@deephaven/golden-layout 0.40.3 → 0.40.4

package/scss/goldenlayout-dark-theme.scss

@@ -1,150 +1,234 @@
-// Color variables (appears count calculates by raw css)
-$color0: #000000; // Appears 7 times
-$color1: #222222; // Appears 3 times
-$color2: #eeeeee; // Appears 2 times
-$color3: #dddddd; // Appears 2 times
-
-$color4: #cccccc; // Appears 1 time
-$color5: #444444; // Appears 1 time
-$color6: #999999; // Appears 1 time
-$color7: #111111; // Appears 1 time
-$color8: #452500; // Appears 1 time
-$color9: #555555; // Appears 1 time
-$color10: #ffffff; // Appears 2 time
+@import '@deephaven/components/scss/custom.scss';
+
+$tab-height: 28px;
+$drag-border-width: 5px;
+
+$close-button-height: 8px;
+$tab-font-size: 12px;
+
+$lm-tab-color: $gray-400;
+$lm-tab-hover-color: $gray-300;
+$lm-tab-active-color: $white;
+$lm-tab-icon-color: $gray-200;
+
+//make some subtle tab background colors relative to our defined color
+$lm-tab-active-background: $content-bg;
+$lm-tab-background: darken($lm-tab-active-background, 3.5);
+$lm-header-background: darken($lm-tab-active-background, 5);
+
+$lm-close-button-hover-color: $gray-100;
+$lm-close-button-active-color: $gray-400;
+
+$lm-splitter-hover-color: $gray-400;
+$lm-splitter-active-color: $gray-300;
 
 // ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
+//is added to the body class, prevents overflow in our app context
+.lm_dragging {
+  overflow: hidden;
+  pointer-events: none;
+
+  // we still need events on our header for scroll while dragging to work
+  .lm_goldenlayout .lm_header {
+    pointer-events: auto;
+
+    // disable other control buttons during drag
+    .lm_controls > li {
+      pointer-events: none;
+
+      &.lm_tabpreviousbutton,
+      &.lm_tabnextbutton {
+        pointer-events: auto;
+      }
+    }
+  }
+}
+
+// disable hover styling during drag (pointer-events still needed)
+body:not(.lm_dragging) .lm_header .lm_tab:not(.lm_active):hover {
+  color: $lm-tab-hover-color;
+}
+
+.lm_header .lm_tab.lm_active .lm_close_tab {
+  background-color: $lm-tab-active-background;
+}
+
+body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
+  background-color: $lm-close-button-active-color;
+}
+
+body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover {
+  background-color: $lm-close-button-hover-color;
+}
 
 // Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
 .lm_goldenlayout {
-  background: $color0;
+  background: $background;
+  position: absolute;
 }
 
 // Single Pane content (area in which final dragged content is contained)
 .lm_content {
-  background: $color1;
+  background: $content-bg;
+  overflow: visible;
 }
 
 // Single Pane content during Drag (style of moving window following mouse)
 .lm_dragProxy {
   .lm_content {
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
+    height: 100%;
+    width: 100%;
+    box-shadow: $box-shadow;
+  }
+  .lm_header {
+    height: $tab-height;
+    box-shadow: none;
+
+    .lm_tab,
+    .lm_tab.lm_active {
+      border: 0;
+      box-shadow: $box-shadow;
+    }
   }
 }
 
 // Placeholder Container of target position
 .lm_dropTargetIndicator {
-  box-shadow: inset 0 0 30px $color0;
-  outline: 1px dashed $color4;
-  transition: all 200ms ease;
+  @include ants-base($white, $black); //replace with ants
+  box-sizing: border-box;
+  transition: all $transition-mid ease;
 
   // Inner Placeholder
   .lm_inner {
-    background: $color0;
-    opacity: 0.2;
+    box-sizing: border-box;
+    border: $ant-thickness solid transparent; //offset shadow using a transparent border
+    box-shadow: inset 0 0 1rem 1px rgba(black, 0.45); //true black for this shadow
+    opacity: 1; //set opacity back to 1, default 0.2 and backroudn was solid.
+    background: rgba(
+      $primary,
+      0.1
+    ); //apply scrim as rgba background now instead
   }
 }
 
 // Separator line (handle to change pane size)
 .lm_splitter {
-  background: $color0;
+  background: $lm-splitter-hover-color;
   opacity: 0.001;
-  transition: opacity 200ms ease;
+  transition: opacity $transition ease;
 
   &:hover, // When hovered by mouse...
   &.lm_dragging {
-    background: $color5;
+    background: $lm-splitter-active-color;
     opacity: 1;
   }
 }
 
 // Pane Header (container of Tabs for each pane)
 .lm_header {
-  height: 20px;
+  box-sizing: content-box; // golden-layout sets a js height using a content box model
+  height: $tab-height;
+  padding-top: 0;
+  background: $lm-header-background;
+  box-shadow: inset 0 -1px 0 0 $background;
+  // inset box shadows with 0-blur used to draw borders without impacting spacing or GL size calculations.
+  // golden layout default styling doesnt have the same border styling we want
+  // this trick is used elsewhere in the header as well for the same purpose
   user-select: none;
 
+  .lm_controls {
+    > li {
+      height: 100%;
+      width: 24px;
+    }
+  }
+
   &.lm_selectable {
     cursor: pointer;
   }
 
   // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
   .lm_tab {
-    font-family: Arial, sans-serif;
-    font-size: 12px;
-    color: $color6;
-    background: $color7;
-    box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3);
-    margin-right: 2px;
-    padding-bottom: 2px;
-    padding-top: 2px;
-
-    /*.lm_title         // Present in LIGHT Theme
-    {
-      padding-top:1px;
-    }*/
+    display: flex;
+    align-items: center;
+    font-family: $font-family-sans-serif;
+    background-color: $lm-tab-background;
+    color: $lm-tab-color;
+    height: $tab-height;
+    font-size: $tab-font-size;
+    min-width: 5rem;
+    margin: 0;
+    padding: 0 $spacer-1 0 $spacer-2;
+    box-shadow: inset -1px -1px 0 0 $background; // acting as bottom and right border
+    transition: color $transition, background-color $transition;
+    max-width: 12rem;
+    white-space: nowrap;
+    overflow: hidden;
+
+    .lm_title {
+      flex-grow: 1;
+      padding-right: $spacer-1;
+      // add equalized spacing for tabs without close buttons
+      // so that when a tab is longer then min-width it still
+      // is balanced with equal padding. Extra padding is then
+      // removed from tabs with close buttons via negative margin
+    }
+
+    .lm_title_before {
+      display: flex;
+      align-items: center;
+    }
 
     // Close Tab Icon
     .lm_close_tab {
-      width: 11px;
-      height: 11px;
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);
-      background-position: center center;
-      background-repeat: no-repeat;
-      top: 4px;
-      right: 6px;
-      opacity: 0.4;
+      $lm-close-button-padding: 4px;
+
+      cursor: pointer;
+      position: relative;
+      width: $close-button-height;
+      height: $close-button-height;
+      padding: $lm-close-button-padding;
+      margin-left: -$spacer-1; // undo padding on title
+      //fa-times-light url svg encoded as a background mask
+      background-color: $lm-tab-background; //set the backgroun color to nothing
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E");
+      mask-position: center center;
+      mask-repeat: no-repeat;
+      mask-size: $close-button-height;
+      opacity: 1;
+      transition: background-color $transition;
 
       &:hover {
         opacity: 1;
       }
     }
-
-    // If Tab is active, so if it's in foreground
-    &.lm_active {
-      border-bottom: none;
-      box-shadow: 0 -2px 2px $color0;
-      padding-bottom: 3px;
-
-      .lm_close_tab {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.lm_dragProxy.lm_bottom,
-.lm_stack.lm_bottom {
-  .lm_header .lm_tab {
-    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-    &.lm_active {
-      box-shadow: 0 2px 2px $color0;
-    }
   }
 }
 
 // If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
 .lm_selected {
   .lm_header {
-    background-color: $color8;
+    background-color: $lm-tab-active-background;
   }
 }
 
-.lm_tab {
-  &:hover, // If Tab is hovered
-  &.lm_active // If Tab is active, so if it's in foreground
-  {
-    background: $color1;
-    color: $color3;
+.lm_header .lm_tab.lm_active,
+.lm_header .lm_tab.lm_active:hover {
+  height: $tab-height;
+  background-color: $lm-tab-active-background;
+  color: $lm-tab-active-color;
+  padding-bottom: 0;
+  box-shadow: inset -1px 0 0 0 $background; // act as right border only when active
+  // also kills the default shadow, doesn't work well with our design
+  &.lm_focusin {
+    box-shadow: inset 0 1px $primary, inset -1px 0 0 0 $background; // top focus indicator, right border
   }
 }
 
-.lm_header .lm_tabs .lm_tab.lm_keyboard_active {
-  color: $color0;
-  background: $color3;
-}
-
-// Dropdown arrow for additional tabs when too many to be displayed
-.lm_header .lm_controls .lm_tabdropdown:before {
-  color: $color10;
+.lm_window_blur {
+  .lm_header .lm_tab.lm_active.lm_focusin {
+    box-shadow: none;
+  }
 }
 
 // Pane controls (popout, maximize, minimize, close)
@@ -169,7 +253,23 @@ $color10: #ffffff; // Appears 2 time
 
   // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
   .lm_maximise {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
+    background-size: 16px;
+    // vsChromeMaximize
+    background-image: str-replace(
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M3 3v10h10V3H3zm9 9H4V4h8v8z'/%3E%3C/svg%3E"),
+      '#',
+      '%23'
+    );
+  }
+
+  .lm_tabdropdown {
+    background-size: 16px;
+    // vsChevronDown
+    background-image: str-replace(
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z'/%3E%3C/svg%3E"),
+      '#',
+      '%23'
+    );
   }
 
   // Icon to Close Pane and so remove it from GoldenLayout Container
@@ -178,52 +278,103 @@ $color10: #ffffff; // Appears 2 time
   }
 
   .lm_tabnextbutton {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjUGBgEGBg4GBgYGFgYAKTHCARoDgABscAe0vtWukAAAAASUVORK5CYII=);
+    background-size: 16px;
+    // vsChevronRight
+    background-image: str-replace(
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z'/%3E%3C/svg%3E"),
+      '#',
+      '%23'
+    );
   }
 
   .lm_tabpreviousbutton {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjYGJgYGFg4GBgEGBgUACTHCARoDgABSMAXe2fzqEAAAAASUVORK5CYII=);
+    background-size: 16px;
+    // vsChevronLeft
+    background-image: str-replace(
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z'/%3E%3C/svg%3E"),
+      '#',
+      '%23'
+    );
   }
 }
 
-// If a specific Pane is maximized
-.lm_maximised {
-  // Pane Header (container of Tabs for each pane) can have different style when is Maximized
-  .lm_header {
-    background-color: $color0;
-  }
+.lm_header .lm_tabdropdown_list {
+  z-index: $zindex-dropdown;
+  background: $lm-tab-background;
+  top: 22px;
+  right: 24px;
+  box-shadow: $box-shadow-900;
+  border-radius: $border-radius;
+  max-width: 12rem;
+
+  .lm_tabdropdown_search {
+    padding: $spacer-1;
+    input {
+      padding: $input-padding-y $input-padding-x;
+      line-height: $input-line-height;
+      color: $input-color;
+      background-color: $input-bg;
+      border: $input-border-width solid $input-border-color;
+      border-radius: $border-radius;
+      max-width: 100%;
+
+      &::placeholder {
+        color: $input-placeholder-color;
+        opacity: 1;
+      }
 
-  // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
-  .lm_controls {
-    .lm_maximise {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
+      &:focus {
+        border-color: $input-focus-border-color;
+        box-shadow: $input-btn-focus-box-shadow;
+        outline: 0;
+      }
     }
   }
-}
 
-// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
-.lm_popin {
-  cursor: pointer;
+  .lm_tab {
+    background: $lm-tab-background;
+    color: $lm-tab-hover-color;
+    box-shadow: none;
 
-  // Background of Icon
-  .lm_bg {
-    background: $color10;
-    opacity: 0.3;
+    &.lm_keyboard_active {
+      color: $lm-tab-hover-color;
+      background-color: $primary-dark;
+    }
+
+    &:hover {
+      color: $lm-tab-active-color;
+      background-color: $primary;
+    }
   }
+}
 
-  // Icon to Restore original position in Golden Layout Container
-  .lm_icon {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
-    background-position: center center;
-    background-repeat: no-repeat;
-    border-left: 1px solid $color2;
-    border-top: 1px solid $color2;
-    opacity: 0.7;
+// If a specific Pane is maximized
+.lm_maximised {
+  border: 15px solid rgba($black, 0.85);
+  height: 100% !important;
+  width: 100% !important;
+  .lm_items {
+    box-shadow: $box-shadow-900;
   }
 
-  &:hover {
-    .lm_icon {
-      opacity: 1;
+  // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
+  .lm_controls {
+    .lm_maximise {
+      opacity: 0.7;
+      // vsChromeMinimize
+      background-image: str-replace(
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$gray-100}' d='M14 8v1H3V8h11z'/%3E%3C/svg%3E"),
+        '#',
+        '%23'
+      );
+
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }
+
+.lm_tabs:empty + .lm_controls .lm_maximise {
+  display: none;
+}