Commit 4b90694c authored by arturo's avatar arturo

[graph] Doc Focus

* #375: rc5.x
parent 9961ac74
Pipeline #2750 failed with stage
in 0 seconds
......@@ -6154,6 +6154,59 @@ h3 {
margin-right: 16px;
}
.b-ripple {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
}
.b-ripple:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10%);
background-repeat: no-repeat;
background-position: 50%;
opacity: 0;
transition: transform 0.6s, opacity 0.6s;
transform: scale(10);
}
.b-ripple:active:after {
transform: scale(0);
opacity: 0.2;
transition: transform 0s, opacity 0s;
}
.b-ripple--primary:after {
background-image: radial-gradient(circle, #FF550B 10%, transparent 10%);
}
.b-ripple--secondary:after {
background-image: radial-gradient(circle, #303030 10%, transparent 10%);
}
.b-ripple--success:after {
background-image: radial-gradient(circle, #015668 10%, transparent 10%);
}
.b-ripple--info:after {
background-image: radial-gradient(circle, #0F81C7 10%, transparent 10%);
}
.b-ripple--warning:after {
background-image: radial-gradient(circle, #0DE2EA 10%, transparent 10%);
}
.b-ripple--danger:after {
background-image: radial-gradient(circle, #FF304F 10%, transparent 10%);
}
.b-ripple--light:after {
background-image: radial-gradient(circle, #e8e8e8 10%, transparent 10%);
}
.b-ripple--dark:after {
background-image: radial-gradient(circle, #000000 10%, transparent 10%);
}
html {
box-sizing: border-box;
height: 100%;
......@@ -7054,6 +7107,7 @@ a:focus {
width: inherit;
height: inherit;
border-radius: 3px;
border: 1px solid #6C757D;
}
.range-slider__knob {
user-select: none;
......@@ -7316,22 +7370,59 @@ input[type=range]:-moz-focusring {
width: 100%;
height: calc(100vh - 56px );
}
.graph-layout__frame {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
display: flex;
z-index: 2;
width: 100%;
height: calc(100vh - 56px);
justify-content: flex-end;
pointer-events: none;
}
.right-handed .graph-layout__frame {
flex-direction: row;
}
.left-handed .graph-layout__frame {
flex-direction: row-reverse;
}
.graph-layout__sidebar {
position: fixed;
width: 480px;
height: calc(100vh - 56px);
z-index: 2;
height: inherit;
flex-grow: 0;
pointer-events: all;
}
.right-handed .graph-layout__sidebar {
right: 0;
.graph-layout__sidebar__inner {
position: fixed;
height: inherit;
width: inherit;
}
.right-handed .graph-layout__sidebar__inner {
border-left: 1px solid #dee2e6;
}
.left-handed .graph-layout__sidebar {
left: 0;
.left-handed .graph-layout__sidebar__inner {
border-right: 1px solid #dee2e6;
}
.graph-layout__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.graph-layout__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #000000;
}
.graph-layout__toolbar {
position: absolute;
z-index: 1;
......@@ -7487,6 +7578,35 @@ input[type=range]:-moz-focusring {
margin-top: 16px;
}
.graph-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.graph-doc-list__item:focus {
outline: 0;
}
.graph-doc-list__item:hover {
background-color: #121212;
}
.graph-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.graph-doc-list__item__source {
font-size: 15px;
color: #DEE2E6;
}
.graph-doc-list__item__date {
font-size: 14px;
color: #CED4DA;
}
.graph-toolbar {
display: flex;
padding: 8px;
......
......@@ -6107,6 +6107,59 @@ h3 {
margin-right: 16px;
}
.b-ripple {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
}
.b-ripple:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10%);
background-repeat: no-repeat;
background-position: 50%;
opacity: 0;
transition: transform 0.6s, opacity 0.6s;
transform: scale(10);
}
.b-ripple:active:after {
transform: scale(0);
opacity: 0.2;
transition: transform 0s, opacity 0s;
}
.b-ripple--primary:after {
background-image: radial-gradient(circle, #005a9a 10%, transparent 10%);
}
.b-ripple--secondary:after {
background-image: radial-gradient(circle, #007bff 10%, transparent 10%);
}
.b-ripple--success:after {
background-image: radial-gradient(circle, #28a745 10%, transparent 10%);
}
.b-ripple--info:after {
background-image: radial-gradient(circle, #17a2b8 10%, transparent 10%);
}
.b-ripple--warning:after {
background-image: radial-gradient(circle, #ffc107 10%, transparent 10%);
}
.b-ripple--danger:after {
background-image: radial-gradient(circle, #dc3545 10%, transparent 10%);
}
.b-ripple--light:after {
background-image: radial-gradient(circle, #f8f9fa 10%, transparent 10%);
}
.b-ripple--dark:after {
background-image: radial-gradient(circle, #343a40 10%, transparent 10%);
}
html {
box-sizing: border-box;
height: 100%;
......@@ -7007,6 +7060,7 @@ a:focus {
width: inherit;
height: inherit;
border-radius: 3px;
border: 1px solid #CED4DA;
}
.range-slider__knob {
user-select: none;
......@@ -7269,22 +7323,59 @@ input[type=range]:-moz-focusring {
width: 100%;
height: calc(100vh - 56px );
}
.graph-layout__frame {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
display: flex;
z-index: 2;
width: 100%;
height: calc(100vh - 56px);
justify-content: flex-end;
pointer-events: none;
}
.right-handed .graph-layout__frame {
flex-direction: row;
}
.left-handed .graph-layout__frame {
flex-direction: row-reverse;
}
.graph-layout__sidebar {
position: fixed;
width: 480px;
height: calc(100vh - 56px);
z-index: 2;
height: inherit;
flex-grow: 0;
pointer-events: all;
}
.right-handed .graph-layout__sidebar {
right: 0;
.graph-layout__sidebar__inner {
position: fixed;
height: inherit;
width: inherit;
}
.right-handed .graph-layout__sidebar__inner {
border-left: 1px solid #dee2e6;
}
.left-handed .graph-layout__sidebar {
left: 0;
.left-handed .graph-layout__sidebar__inner {
border-right: 1px solid #dee2e6;
}
.graph-layout__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.graph-layout__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.graph-layout__toolbar {
position: absolute;
z-index: 1;
......@@ -7440,6 +7531,35 @@ input[type=range]:-moz-focusring {
margin-top: 16px;
}
.graph-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.graph-doc-list__item:focus {
outline: 0;
}
.graph-doc-list__item:hover {
background-color: #FCFCFC;
}
.graph-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.graph-doc-list__item__source {
font-size: 15px;
color: #495057;
}
.graph-doc-list__item__date {
font-size: 14px;
color: #6C757D;
}
.graph-toolbar {
display: flex;
padding: 8px;
......
......@@ -5863,6 +5863,59 @@ h3 {
margin-right: 16px;
}
.b-ripple {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
}
.b-ripple:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10%);
background-repeat: no-repeat;
background-position: 50%;
opacity: 0;
transition: transform 0.6s, opacity 0.6s;
transform: scale(10);
}
.b-ripple:active:after {
transform: scale(0);
opacity: 0.2;
transition: transform 0s, opacity 0s;
}
.b-ripple--primary:after {
background-image: radial-gradient(circle, #2f3c48 10%, transparent 10%);
}
.b-ripple--secondary:after {
background-image: radial-gradient(circle, #6f7f8c 10%, transparent 10%);
}
.b-ripple--success:after {
background-image: radial-gradient(circle, #3e4d59 10%, transparent 10%);
}
.b-ripple--info:after {
background-image: radial-gradient(circle, #5c8f94 10%, transparent 10%);
}
.b-ripple--warning:after {
background-image: radial-gradient(circle, #6e9fa5 10%, transparent 10%);
}
.b-ripple--danger:after {
background-image: radial-gradient(circle, #cc330d 10%, transparent 10%);
}
.b-ripple--light:after {
background-image: radial-gradient(circle, #eceeec 10%, transparent 10%);
}
.b-ripple--dark:after {
background-image: radial-gradient(circle, #1e2b37 10%, transparent 10%);
}
html {
box-sizing: border-box;
height: 100%;
......@@ -6763,6 +6816,7 @@ a:focus {
width: inherit;
height: inherit;
border-radius: 3px;
border: 1px solid #CED4DA;
}
.range-slider__knob {
user-select: none;
......@@ -7025,22 +7079,59 @@ input[type=range]:-moz-focusring {
width: 100%;
height: calc(100vh - 56px );
}
.graph-layout__frame {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
display: flex;
z-index: 2;
width: 100%;
height: calc(100vh - 56px);
justify-content: flex-end;
pointer-events: none;
}
.right-handed .graph-layout__frame {
flex-direction: row;
}
.left-handed .graph-layout__frame {
flex-direction: row-reverse;
}
.graph-layout__sidebar {
position: fixed;
width: 480px;
height: calc(100vh - 56px);
z-index: 2;
height: inherit;
flex-grow: 0;
pointer-events: all;
}
.right-handed .graph-layout__sidebar {
right: 0;
.graph-layout__sidebar__inner {
position: fixed;
height: inherit;
width: inherit;
}
.right-handed .graph-layout__sidebar__inner {
border-left: 1px solid #dee2e6;
}
.left-handed .graph-layout__sidebar {
left: 0;
.left-handed .graph-layout__sidebar__inner {
border-right: 1px solid #dee2e6;
}
.graph-layout__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.graph-layout__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.graph-layout__toolbar {
position: absolute;
z-index: 1;
......@@ -7196,6 +7287,35 @@ input[type=range]:-moz-focusring {
margin-top: 16px;
}
.graph-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.graph-doc-list__item:focus {
outline: 0;
}
.graph-doc-list__item:hover {
background-color: #FCFCFC;
}
.graph-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.graph-doc-list__item__source {
font-size: 15px;
color: #495057;
}
.graph-doc-list__item__date {
font-size: 14px;
color: #6C757D;
}
.graph-toolbar {
display: flex;
padding: 8px;
......
......@@ -6111,6 +6111,59 @@ h3 {
margin-right: 16px;
}
.b-ripple {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
}
.b-ripple:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10%);
background-repeat: no-repeat;
background-position: 50%;
opacity: 0;
transition: transform 0.6s, opacity 0.6s;
transform: scale(10);
}
.b-ripple:active:after {
transform: scale(0);
opacity: 0.2;
transition: transform 0s, opacity 0s;
}
.b-ripple--primary:after {
background-image: radial-gradient(circle, #083358 10%, transparent 10%);
}
.b-ripple--secondary:after {
background-image: radial-gradient(circle, #F67280 10%, transparent 10%);
}
.b-ripple--success:after {
background-image: radial-gradient(circle, #0074E4 10%, transparent 10%);
}
.b-ripple--info:after {
background-image: radial-gradient(circle, #74DBEF 10%, transparent 10%);
}
.b-ripple--warning:after {
background-image: radial-gradient(circle, #FC3C3C 10%, transparent 10%);
}
.b-ripple--danger:after {
background-image: radial-gradient(circle, #FF4057 10%, transparent 10%);
}
.b-ripple--light:after {
background-image: radial-gradient(circle, #F2F2F0 10%, transparent 10%);
}
.b-ripple--dark:after {
background-image: radial-gradient(circle, #072247 10%, transparent 10%);
}
html {
box-sizing: border-box;
height: 100%;
......@@ -7011,6 +7064,7 @@ a:focus {
width: inherit;
height: inherit;
border-radius: 3px;
border: 1px solid #CED4DA;
}
.range-slider__knob {
user-select: none;
......@@ -7273,22 +7327,59 @@ input[type=range]:-moz-focusring {
width: 100%;
height: calc(100vh - 56px );
}
.graph-layout__frame {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
display: flex;
z-index: 2;
width: 100%;
height: calc(100vh - 56px);
justify-content: flex-end;
pointer-events: none;
}
.right-handed .graph-layout__frame {
flex-direction: row;
}
.left-handed .graph-layout__frame {
flex-direction: row-reverse;
}
.graph-layout__sidebar {
position: fixed;
width: 480px;
height: calc(100vh - 56px);
z-index: 2;
height: inherit;
flex-grow: 0;
pointer-events: all;
}
.right-handed .graph-layout__sidebar {
right: 0;
.graph-layout__sidebar__inner {
position: fixed;
height: inherit;
width: inherit;
}
.right-handed .graph-layout__sidebar__inner {
border-left: 1px solid #dee2e6;
}
.left-handed .graph-layout__sidebar {
left: 0;
.left-handed .graph-layout__sidebar__inner {
border-right: 1px solid #dee2e6;
}
.graph-layout__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.graph-layout__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.graph-layout__toolbar {
position: absolute;
z-index: 1;
......@@ -7444,6 +7535,35 @@ input[type=range]:-moz-focusring {
margin-top: 16px;
}
.graph-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.graph-doc-list__item:focus {
outline: 0;
}
.graph-doc-list__item:hover {
background-color: #FCFCFC;
}
.graph-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.graph-doc-list__item__source {
font-size: 15px;
color: #495057;
}
.graph-doc-list__item__date {
font-size: 14px;
color: #6C757D;
}
.graph-toolbar {
display: flex;
padding: 8px;
......
......@@ -6112,6 +6112,59 @@ h3 {
margin-right: 16px;
}
.b-ripple {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
}
.b-ripple:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
pointer-events: none;