[graph] Node Focus

* #375: rc6.x

dist/styles/bootstrap-darkster.css

@@ -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;
 }
 

dist/styles/bootstrap-default.css

@@ -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;
 }
 

dist/styles/bootstrap-greyson.css

@@ -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;
 }
 

dist/styles/bootstrap-herbie.css

@@ -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 {
+  z-index: 1;
+  position: relative;