Commit 27399e65 authored by Karen Konou's avatar Karen Konou

Merge branch 'dev' into 382-dev-plane-navigation

parents 2e21ebc9 9de858ae
......@@ -6002,19 +6002,29 @@ h3 {
position: relative;
transition: color 150ms ease-in-out;
}
.b-icon-button--overlay.b-icon-button::before {
.b-icon-button__inner {
z-index: 1;
position: relative;
}
.b-icon-button::before {
left: -10px;
right: -10px;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
content: "";
background-color: #212529;
border-radius: 5px;
z-index: -1;
position: absolute;
transition: background-color 150ms ease-in-out;
transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.b-icon-button--overlay::before {
content: "";
}
.b-icon-button--level-1:hover::before {
background-color: #212529;
}
.b-icon-button--level-2::before {
background-color: #212529;
}
.b-icon-button--overlay:hover.b-icon-button::before {
.b-icon-button--level-2:hover::before {
background-color: #0a0c0d;
}
.b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled {
......@@ -6065,6 +6075,9 @@ h3 {
.b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover {
color: #b3b3b3;
}
.b-icon-button--enabled.b-icon-button:active::before, .b-icon-button--enabled.b-icon-button--active::before, .b-icon-button--muted.b-icon-button:active::before, .b-icon-button--muted.b-icon-button--active::before {
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
.b-icon-button--idled:hover {
cursor: default;
}
......@@ -7414,6 +7427,7 @@ input[type=range]:-moz-focusring {
flex-grow: 1;
pointer-events: all;
position: relative;
content: layout;
}
.graph-layout__focus__inner {
top: 0;
......@@ -7467,6 +7481,55 @@ input[type=range]:-moz-focusring {
display: none;
}
.graph-doc-focus {
scrollbar-width: none;
overflow-y: scroll;
background-color: #000000;
height: 100%;
position: relative;
}
.graph-doc-focus::-webkit-scrollbar {
display: none;
}
.graph-doc-focus::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 45%);
content: "";
z-index: 1;
pointer-events: none;
position: sticky;
top: 0;
height: 16px;
width: 100%;
display: block;
}
.graph-doc-focus::after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 45%);
content: "";
z-index: 1;
pointer-events: none;
position: sticky;
bottom: 0;
height: 16px;
width: 100%;
display: block;
}
.graph-doc-focus__header {
padding: 0.75rem 1.25rem;
font-size: 20px;
}
.right-handed .graph-doc-focus__header {
float: right;
}
.left-handed .graph-doc-focus__header {
float: left;
}
.graph-doc-focus__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.graph-sidebar {
scrollbar-width: none;
overflow-y: scroll;
......@@ -7590,6 +7653,22 @@ input[type=range]:-moz-focusring {
.graph-doc-list__item:hover {
background-color: #121212;
}
.graph-doc-list__item--selected::before {
content: "";
position: absolute;
z-index: 1;
width: 2px;
background-color: #0F81C7;
left: 0;
top: 0;
bottom: 0;
}
.graph-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem;
}
.graph-doc-list__item--selected:last-child::before {
border-bottom-left-radius: 0.25rem;
}
.graph-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
......@@ -7607,6 +7686,15 @@ input[type=range]:-moz-focusring {
color: #CED4DA;
}
.graph-contact-list__item__title, .graph-contact-list__item__subtitle {
line-height: 1.3;
margin-bottom: 2px;
}
.graph-contact-list__item__subtitle {
font-size: 15px;
color: #DEE2E6;
}
.graph-toolbar {
display: flex;
padding: 8px;
......@@ -7938,23 +8026,26 @@ a:focus, a:hover {
visibility: visible;
}
.right-handed .mainleaf:hover .mainleaf__settings-icon {
margin-left: 16px;
margin-left: 18px;
}
.left-handed .mainleaf:hover .mainleaf__settings-icon {
margin-right: 16px;
margin-right: 18px;
}
.right-handed .mainleaf__update-icon {
margin-left: 16px;
margin-left: 18px;
}
.left-handed .mainleaf__update-icon {
margin-right: 16px;
margin-right: 18px;
}
.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
.mainleaf__update-icon.b-icon-button::before, .mainleaf__settings-icon.b-icon-button::before {
top: -5px;
bottom: -5px;
left: -6px;
right: -6px;
}
.mainleaf__progress-bar {
width: 64px;
......@@ -8910,19 +9001,43 @@ select.form-control {
top: calc( 50% - 50px );
left: calc( 50% - 50px );
}
.phylo__frame {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
display: flex;
z-index: 1;
width: 100%;
height: calc(100vh - 56px);
justify-content: flex-end;
pointer-events: none;
}
.right-handed .phylo__frame {
flex-direction: row;
}
.left-handed .phylo__frame {
flex-direction: row-reverse;
}
.phylo__sidebar {
position: fixed;
width: 480px;
height: calc(100vh - 56px);
z-index: 1;
height: inherit;
flex-grow: 0;
pointer-events: all;
}
.right-handed .phylo__sidebar {
right: 0;
.phylo__sidebar__inner {
position: fixed;
height: inherit;
width: inherit;
}
.right-handed .phylo__sidebar__inner {
border-left: 1px solid #dee2e6;
}
.left-handed .phylo__sidebar {
left: 0;
.left-handed .phylo__sidebar__inner {
border-right: 1px solid #dee2e6;
}
......
......@@ -5956,19 +5956,29 @@ h3 {
position: relative;
transition: color 150ms ease-in-out;
}
.b-icon-button--overlay.b-icon-button::before {
.b-icon-button__inner {
z-index: 1;
position: relative;
}
.b-icon-button::before {
left: -10px;
right: -10px;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
content: "";
background-color: #F8F9FA;
border-radius: 5px;
z-index: -1;
position: absolute;
transition: background-color 150ms ease-in-out;
transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.b-icon-button--overlay::before {
content: "";
}
.b-icon-button--level-1:hover::before {
background-color: #F8F9FA;
}
.b-icon-button--level-2::before {
background-color: #F8F9FA;
}
.b-icon-button--overlay:hover.b-icon-button::before {
.b-icon-button--level-2:hover::before {
background-color: #dae0e5;
}
.b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled {
......@@ -6019,6 +6029,9 @@ h3 {
.b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover {
color: #0a0c0d;
}
.b-icon-button--enabled.b-icon-button:active::before, .b-icon-button--enabled.b-icon-button--active::before, .b-icon-button--muted.b-icon-button:active::before, .b-icon-button--muted.b-icon-button--active::before {
box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
}
.b-icon-button--idled:hover {
cursor: default;
}
......@@ -7367,6 +7380,7 @@ input[type=range]:-moz-focusring {
flex-grow: 1;
pointer-events: all;
position: relative;
content: layout;
}
.graph-layout__focus__inner {
top: 0;
......@@ -7420,6 +7434,55 @@ input[type=range]:-moz-focusring {
display: none;
}
.graph-doc-focus {
scrollbar-width: none;
overflow-y: scroll;
background-color: #fff;
height: 100%;
position: relative;
}
.graph-doc-focus::-webkit-scrollbar {
display: none;
}
.graph-doc-focus::before {
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
z-index: 1;
pointer-events: none;
position: sticky;
top: 0;
height: 16px;
width: 100%;
display: block;
}
.graph-doc-focus::after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
z-index: 1;
pointer-events: none;
position: sticky;
bottom: 0;
height: 16px;
width: 100%;
display: block;
}
.graph-doc-focus__header {
padding: 0.75rem 1.25rem;
font-size: 20px;
}
.right-handed .graph-doc-focus__header {
float: right;
}
.left-handed .graph-doc-focus__header {
float: left;
}
.graph-doc-focus__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.graph-sidebar {
scrollbar-width: none;
overflow-y: scroll;
......@@ -7543,6 +7606,22 @@ input[type=range]:-moz-focusring {
.graph-doc-list__item:hover {
background-color: #FCFCFC;
}
.graph-doc-list__item--selected::before {
content: "";
position: absolute;
z-index: 1;
width: 2px;
background-color: #17a2b8;
left: 0;
top: 0;
bottom: 0;
}
.graph-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem;
}
.graph-doc-list__item--selected:last-child::before {
border-bottom-left-radius: 0.25rem;
}
.graph-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
......@@ -7560,6 +7639,15 @@ input[type=range]:-moz-focusring {
color: #6C757D;
}
.graph-contact-list__item__title, .graph-contact-list__item__subtitle {
line-height: 1.3;
margin-bottom: 2px;
}
.graph-contact-list__item__subtitle {
font-size: 15px;
color: #495057;
}
.graph-toolbar {
display: flex;
padding: 8px;
......@@ -7891,23 +7979,26 @@ a:focus, a:hover {
visibility: visible;
}
.right-handed .mainleaf:hover .mainleaf__settings-icon {
margin-left: 16px;
margin-left: 18px;
}
.left-handed .mainleaf:hover .mainleaf__settings-icon {
margin-right: 16px;
margin-right: 18px;
}
.right-handed .mainleaf__update-icon {
margin-left: 16px;
margin-left: 18px;
}
.left-handed .mainleaf__update-icon {
margin-right: 16px;
margin-right: 18px;
}
.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
.mainleaf__update-icon.b-icon-button::before, .mainleaf__settings-icon.b-icon-button::before {
top: -5px;
bottom: -5px;
left: -6px;
right: -6px;
}
.mainleaf__progress-bar {
width: 64px;
......@@ -8863,19 +8954,43 @@ select.form-control {
top: calc( 50% - 50px );
left: calc( 50% - 50px );
}
.phylo__frame {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
display: flex;
z-index: 1;
width: 100%;
height: calc(100vh - 56px);
justify-content: flex-end;
pointer-events: none;
}
.right-handed .phylo__frame {
flex-direction: row;
}
.left-handed .phylo__frame {
flex-direction: row-reverse;
}
.phylo__sidebar {
position: fixed;
width: 480px;
height: calc(100vh - 56px);
z-index: 1;
height: inherit;
flex-grow: 0;
pointer-events: all;
}
.right-handed .phylo__sidebar {
right: 0;
.phylo__sidebar__inner {
position: fixed;
height: inherit;
width: inherit;
}
.right-handed .phylo__sidebar__inner {
border-left: 1px solid #dee2e6;
}
.left-handed .phylo__sidebar {
left: 0;
.left-handed .phylo__sidebar__inner {
border-right: 1px solid #dee2e6;
}
......
......@@ -5711,19 +5711,29 @@ h3 {
position: relative;
transition: color 150ms ease-in-out;
}
.b-icon-button--overlay.b-icon-button::before {
.b-icon-button__inner {
z-index: 1;
position: relative;
}
.b-icon-button::before {
left: -10px;
right: -10px;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
content: "";
background-color: #F8F9FA;
border-radius: 5px;
z-index: -1;
position: absolute;
transition: background-color 150ms ease-in-out;
transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.b-icon-button--overlay::before {
content: "";
}
.b-icon-button--level-1:hover::before {
background-color: #F8F9FA;
}
.b-icon-button--level-2::before {
background-color: #F8F9FA;
}
.b-icon-button--overlay:hover.b-icon-button::before {
.b-icon-button--level-2:hover::before {
background-color: #dae0e5;
}
.b-icon-button--enabled, .b-icon-button--muted, .b-icon-button--idled {
......@@ -5774,6 +5784,9 @@ h3 {
.b-icon-button--enabled.b-icon-button--dark:hover, .b-icon-button--muted.b-icon-button--dark:hover {
color: #0a0c0d;
}
.b-icon-button--enabled.b-icon-button:active::before, .b-icon-button--enabled.b-icon-button--active::before, .b-icon-button--muted.b-icon-button:active::before, .b-icon-button--muted.b-icon-button--active::before {
box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.5);
}
.b-icon-button--idled:hover {
cursor: default;
}
......@@ -7123,6 +7136,7 @@ input[type=range]:-moz-focusring {
flex-grow: 1;
pointer-events: all;
position: relative;
content: layout;
}
.graph-layout__focus__inner {
top: 0;
......@@ -7176,6 +7190,55 @@ input[type=range]:-moz-focusring {
display: none;
}
.graph-doc-focus {
scrollbar-width: none;
overflow-y: scroll;
background-color: #fff;
height: 100%;
position: relative;
}
.graph-doc-focus::-webkit-scrollbar {
display: none;
}
.graph-doc-focus::before {
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
z-index: 1;
pointer-events: none;
position: sticky;
top: 0;
height: 16px;
width: 100%;
display: block;
}
.graph-doc-focus::after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
z-index: 1;
pointer-events: none;
position: sticky;
bottom: 0;
height: 16px;
width: 100%;
display: block;
}
.graph-doc-focus__header {
padding: 0.75rem 1.25rem;
font-size: 20px;
}
.right-handed .graph-doc-focus__header {
float: right;
}
.left-handed .graph-doc-focus__header {
float: left;
}
.graph-doc-focus__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.graph-sidebar {
scrollbar-width: none;
overflow-y: scroll;
......@@ -7299,6 +7362,22 @@ input[type=range]:-moz-focusring {
.graph-doc-list__item:hover {
background-color: #FCFCFC;
}
.graph-doc-list__item--selected::before {
content: "";
position: absolute;
z-index: 1;
width: 2px;
background-color: #5c8f94;
left: 0;
top: 0;
bottom: 0;
}
.graph-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem;
}
.graph-doc-list__item--selected:last-child::before {
border-bottom-left-radius: 0.25rem;
}
.graph-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
......@@ -7316,6 +7395,15 @@ input[type=range]:-moz-focusring {
color: #6C757D;
}
.graph-contact-list__item__title, .graph-contact-list__item__subtitle {
line-height: 1.3;
margin-bottom: 2px;
}
.graph-contact-list__item__subtitle {
font-size: 15px;
color: #495057;
}
.graph-toolbar {
display: flex;
padding: 8px;
......@@ -7647,23 +7735,26 @@ a:focus, a:hover {
visibility: visible;
}
.right-handed .mainleaf:hover .mainleaf__settings-icon {
margin-left: 16px;
margin-left: 18px;
}
.left-handed .mainleaf:hover .mainleaf__settings-icon {
margin-right: 16px;
margin-right: 18px;
}
.right-handed .mainleaf__update-icon {
margin-left: 16px;
margin-left: 18px;
}
.left-handed .mainleaf__update-icon {
margin-right: 16px;
margin-right: 18px;
}
.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
.mainleaf__update-icon.b-icon-button::before, .mainleaf__settings-icon.b-icon-button::before {
top: -5px;
bottom: -5px;
left: -6px;
right: -6px;
}
.mainleaf__progress-bar {
width: 64px;
......@@ -8619,19 +8710,43 @@ select.form-control {
top: calc( 50% - 50px );
left: calc( 50% - 50px );
}
.phylo__frame {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
display: flex;
z-index: 1;
width: 100%;
height: calc(100vh - 56px);
justify-content: flex-end;
pointer-events: none;
}
.right-handed .phylo__frame {
flex-direction: row;
}
.left-handed .phylo__frame {
flex-direction: row-reverse;
}
.phylo__sidebar {
position: fixed;
width: 480px;
height: calc(100vh - 56px);
z-index: 1;
height: inherit;
flex-grow: 0;
pointer-events: all;
}
.right-handed .phylo__sidebar {
right: 0;
.phylo__sidebar__inner {
position: fixed;
height: inherit;
width: inherit;
}
.right-handed .phylo__sidebar__inner {
border-left: 1px solid #dee2e6;
}
.left-handed .phylo__sidebar {
left: 0;
.left-handed .phylo__sidebar__inner {
border-right: 1px solid #dee2e6;
}
......
......@@ -5959,19 +5959,29 @@ h3 {
position: relative;
transition: color 150ms ease-in-out;
}
.b-icon-button--overlay.b-icon-button::before {
.b-icon-button__inner {