@deephaven/golden-layout 0.21.2-beta.2 → 0.21.2-beta.6

package/css/goldenlayout-base.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/goldenlayout-base.scss"],"names":[],"mappings":"AAkBA,SACE,kBAGF,iBACE,WAIF,YACE,gBACA,kBACA,UAIF,4BAEE,2BACA,iBAIF,cACE,kBACA,MACA,OACA,WAGF,yBACE,aAIF,aACE,kBACA,WAEA,4CAEE,kBAIA,yCACE,MA/DG,KAgEH,kBACA,iBAIJ,2BACE,WACA,OA9DM,KAgEN,2CACE,OAjEI,KAkEJ,kBACA,iBAMN,WACE,aACA,8BACA,eACA,WACA,kBAEA,4BAQE,WAGF,wBACE,kCAIF,wBACE,aACA,iBAEA,2BACE,eACA,WACA,MA5GG,KA6GH,OAnGI,KAoGJ,kBAGF,qCACE,eACA,WAIJ,cACE,SACA,UACA,qBAGF,oBACE,aACA,YACA,gBAIF,mBACE,eACA,OA/HM,KAgIN,eACA,qBACA,mBACA,kBACA,YACA,cAEA,6BACE,qBACA,mBACA,gBACA,uBACA,eAIF,iCACE,MAzJG,KA0JH,OAlJI,KAmJJ,kBACA,MACA,QACA,kBAQJ,2DACE,YAQF,8HACE,WACA,WACA,mBACA,kKACE,0BACA,MACA,aAEF,kLACE,SAGJ,0HACE,WAOA,gFACE,oCACA,OACA,gGACE,qBACA,eAGJ,wGACE,YACA,cACA,UAKN,mCACE,WAME,kFACE,kCACA,UACA,cAEF,0FACE,SAEF,0GACE,YACA,WAQF,kFACE,aACA,gBAEF,4FACE,QAEF,4GACE,YACA,YAKN,yBACE,cAKA,+CACE,WACA,QACA,SACA,sBACA,qBACA,sBACA,mCACA,kCACA,WAGF,gCACE,kBACA,SACA,QACA,UACA,gBACA,kBAEA,yCACE,sBAGF,wCACE,mBAGF,8CACE,wBAUN,cACE,kBACA,MACA,OACA,WACA,oBAEA,yBACE,uBAGF,0BACE,gBACA,gBAKJ,wBACE,aACA,kBACA,WACA,oBAGA,kCACE,MArUK,KAsUL,OA7TM,KA8TN,kBACA,MACA,OAIJ,yBACE,aACA,MA9UO,KA+UP,OAtUQ,KAuUR,kBACA,MACA,OACA,WAIF,UACE,MAxVO,KAyVP,OAhVQ,KAiVR,kBACA,SACA,QACA,aAEA,YACE,MAjWK,KAkWL,OAzVM,KA0VN,kBACA,MACA,OAGF,iBACE,WAGF,mBACE","file":"goldenlayout-base.css","sourcesContent":["// Width variables (appears count calculates by raw css)\n$width0: 100%; // Appears 3 times\n$width1: 20px; // Appears 2 times\n$width2: 100px; // Appears 1 time\n$width3: 14px; // Appears 1 time\n$width4: 18px; // Appears 1 time\n$width5: 15px; // Appears 1 time\n$width6: 2px; // Appears 1 time\n\n// Height variables (appears count calculates by raw css)\n$height0: 100%; // Appears 4 times\n$height1: 20px; // Appears 2 times\n$height2: 14px; // Appears 2 times\n$height3: 10px; // Appears 1 time\n$height4: 19px; // Appears 1 time\n$height5: 18px; // Appears 1 time\n$height6: 15px; // Appears 1 time\n\n.lm_root {\n  position: relative;\n}\n\n.lm_row > .lm_item {\n  float: left;\n}\n\n// Single Pane content (area in which final dragged content is contained)\n.lm_content {\n  overflow: hidden;\n  position: relative;\n  outline: 0;\n}\n\n// \".lm_dragging\" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged\n.lm_dragging,\n.lm_dragging * {\n  cursor: grabbing !important;\n  user-select: none;\n}\n\n// If a specific Pane is maximized\n.lm_maximised {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 40;\n}\n\n.lm_maximise_placeholder {\n  display: none;\n}\n\n// Separator line (handle to change pane size)\n.lm_splitter {\n  position: relative;\n  z-index: 20;\n\n  &:hover, // When hovered by mouse...\n  &.lm_dragging {\n    background: orange;\n  }\n\n  &.lm_vertical {\n    .lm_drag_handle {\n      width: $width0;\n      position: absolute;\n      cursor: ns-resize;\n    }\n  }\n\n  &.lm_horizontal {\n    float: left;\n    height: $height0;\n\n    .lm_drag_handle {\n      height: $height0;\n      position: absolute;\n      cursor: ew-resize;\n    }\n  }\n}\n\n// Pane Header (container of Tabs for each pane)\n.lm_header {\n  display: flex;\n  justify-content: space-between;\n  max-width: 100%;\n  z-index: 12; //above lm_content, below lm_splitter\n  position: relative;\n\n  &.lm_dropdown_open {\n    // This is an ugly hack, z-index of the whole header needs to be moved up\n    // when the menu is open, because its positioned relative to header.\n    // The header has a position, which creates a stacking context\n    // that can result in the next header being \"above\" the dropdown.\n    // The same problem happens for splitters too.\n    // A better solution would refactor the dropdown to be a root node,\n    // and in general use z-index way less.\n    z-index: 22; //above other lm_headers and lm_splitter\n  }\n\n  [class^='lm_'] {\n    box-sizing: content-box !important;\n  }\n\n  // Pane controls (popout, maximize, minimize, close)\n  .lm_controls {\n    display: flex;\n    user-select: none;\n\n    > li {\n      cursor: pointer;\n      float: left;\n      width: $width4;\n      height: $height5;\n      text-align: center;\n    }\n\n    > li[disabled] {\n      cursor: default;\n      opacity: 0.1;\n    }\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n\n  .lm_tabs {\n    display: flex;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in \".lm_header\"\n  .lm_tab {\n    cursor: pointer;\n    height: $height2;\n    margin-top: 1px;\n    padding: 0px 10px 5px;\n    padding-right: 25px;\n    position: relative;\n    min-width: 0;\n    flex-shrink: 0;\n\n    .lm_title {\n      display: inline-block;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 100%;\n    }\n\n    // Close Tab Icon\n    .lm_close_tab {\n      width: $width3;\n      height: $height2;\n      position: absolute;\n      top: 0;\n      right: 0;\n      text-align: center;\n    }\n  }\n}\n\n// Headers positions\n.lm_stack.lm_left,\n.lm_stack.lm_right {\n  .lm_header {\n    height: 100%;\n  }\n}\n\n.lm_dragProxy.lm_left,\n.lm_dragProxy.lm_right,\n.lm_stack.lm_left,\n.lm_stack.lm_right {\n  .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n    .lm_tabs {\n      transform-origin: left top;\n      top: 0;\n      width: 1000px; /*hack*/\n    }\n    .lm_controls {\n      bottom: 0;\n    }\n  }\n  .lm_items {\n    float: left;\n  }\n}\n\n.lm_dragProxy.lm_left,\n.lm_stack.lm_left {\n  .lm_header {\n    .lm_tabs {\n      transform: rotate(-90deg) scaleX(-1);\n      left: 0;\n      .lm_tab {\n        transform: scaleX(-1);\n        margin-top: 1px;\n      }\n    }\n    .lm_tabdropdown_list {\n      top: initial;\n      right: initial;\n      left: 20px;\n    }\n  }\n}\n\n.lm_dragProxy.lm_right .lm_content {\n  float: left;\n}\n\n.lm_dragProxy.lm_right,\n.lm_stack.lm_right {\n  .lm_header {\n    .lm_tabs {\n      transform: rotate(90deg) scaleX(1);\n      left: 100%;\n      margin-left: 0;\n    }\n    .lm_controls {\n      left: 3px;\n    }\n    .lm_tabdropdown_list {\n      top: initial;\n      right: 20px;\n    }\n  }\n}\n\n.lm_dragProxy.lm_bottom,\n.lm_stack.lm_bottom {\n  .lm_header {\n    .lm_tab {\n      margin-top: 0;\n      border-top: none;\n    }\n    .lm_controls {\n      top: 3px;\n    }\n    .lm_tabdropdown_list {\n      top: initial;\n      bottom: 20px;\n    }\n  }\n}\n\n.lm_drop_tab_placeholder {\n  flex-shrink: 0;\n}\n\n// Dropdown arrow for additional tabs when too many to be displayed\n.lm_header {\n  .lm_controls .lm_tabdropdown:before {\n    content: '';\n    width: 0;\n    height: 0;\n    vertical-align: middle;\n    display: inline-block;\n    border-top: 5px dashed;\n    border-right: 5px solid transparent;\n    border-left: 5px solid transparent;\n    color: white; // Overriden in specific Themes\n  }\n\n  .lm_tabdropdown_list {\n    position: absolute;\n    top: 20px;\n    right: 0;\n    z-index: 5;\n    overflow-y: auto;\n    overflow-x: hidden;\n\n    .lm_tabs {\n      flex-direction: column;\n    }\n\n    .lm_tab {\n      padding-right: 10px;\n    }\n\n    .lm_close_tab {\n      display: none !important;\n    }\n  }\n}\n\n/***********************************\n* Drag Proxy\n***********************************/\n\n// Single Pane content during Drag (style of moving window following mouse)\n.lm_dragProxy {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 30;\n  pointer-events: none;\n\n  .lm_header {\n    background: transparent;\n  }\n\n  .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n}\n\n// Placeholder Container of target position\n.lm_dropTargetIndicator {\n  display: none;\n  position: absolute;\n  z-index: 20;\n  pointer-events: none;\n\n  // Inner Placeholder\n  .lm_inner {\n    width: $width0;\n    height: $height0;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n}\n\n.lm_transition_indicator {\n  display: none;\n  width: $width1;\n  height: $height1;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 20;\n}\n\n// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:\n.lm_popin {\n  width: $width1;\n  height: $height1;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: 9999;\n\n  > * {\n    width: $width0;\n    height: $height0;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  > .lm_bg {\n    z-index: 10;\n  }\n\n  > .lm_icon {\n    z-index: 20;\n  }\n}\n"]}

package/css/goldenlayout-dark-theme.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/goldenlayout-dark-theme.scss"],"names":[],"mappings":"AAiBA,iBACE,WAjBO,KAqBT,YACE,WArBO,KA0BP,0BACE,sCAKJ,wBACE,+BACA,wBACA,0BAGA,kCACE,WAxCK,KAyCL,WAKJ,aACE,WA/CO,KAgDP,aACA,8BAEA,4CAEE,WA/CK,KAgDL,UAKJ,WACE,YACA,iBAEA,yBACE,eAIF,mBACE,6BACA,eACA,MAhEK,KAiEL,WAhEK,KAiEL,uCACA,iBACA,mBACA,gBAQA,iCACE,WACA,YACA,iOACA,kCACA,4BACA,QACA,UACA,WAEA,uCACE,UAKJ,6BACE,mBACA,2BACA,mBAEA,2CACE,UAQN,kFACE,sCACA,sGACE,0BAOJ,wBACE,iBApHK,QAyHP,gCAGE,WApIK,KAqIL,MAnIK,KAuIT,+CACE,MA3IO,KA4IP,WAzIO,KA6IT,+CACE,MAtIQ,KA4IR,gBACE,kBACA,kCACA,4BACA,WACA,8BAEA,sBACE,UAKJ,wBACE,6MAIF,0BACE,iLAIF,uBACE,iNAGF,+BACE,yMAGF,mCACE,yMAOF,yBACE,iBA/LK,KAoML,wCACE,6KAKN,yBACE,iBA3MO,KA4MP,uBAIF,UACE,eAGA,iBACE,WA1MM,KA2MN,WAIF,mBACE,iPACA,kCACA,4BACA,2BACA,0BACA,WAIA,yBACE","file":"goldenlayout-dark-theme.css","sourcesContent":["// Color variables (appears count calculates by raw css)\n$color0: #000000; // Appears 7 times\n$color1: #222222; // Appears 3 times\n$color2: #eeeeee; // Appears 2 times\n$color3: #dddddd; // Appears 2 times\n\n$color4: #cccccc; // Appears 1 time\n$color5: #444444; // Appears 1 time\n$color6: #999999; // Appears 1 time\n$color7: #111111; // Appears 1 time\n$color8: #452500; // Appears 1 time\n$color9: #555555; // Appears 1 time\n$color10: #ffffff; // Appears 2 time\n\n// \".lm_dragging\" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged\n\n// 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)\n.lm_goldenlayout {\n  background: $color0;\n}\n\n// Single Pane content (area in which final dragged content is contained)\n.lm_content {\n  background: $color1;\n}\n\n// Single Pane content during Drag (style of moving window following mouse)\n.lm_dragProxy {\n  .lm_content {\n    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n  }\n}\n\n// Placeholder Container of target position\n.lm_dropTargetIndicator {\n  box-shadow: inset 0 0 30px $color0;\n  outline: 1px dashed $color4;\n  transition: all 200ms ease;\n\n  // Inner Placeholder\n  .lm_inner {\n    background: $color0;\n    opacity: 0.2;\n  }\n}\n\n// Separator line (handle to change pane size)\n.lm_splitter {\n  background: $color0;\n  opacity: 0.001;\n  transition: opacity 200ms ease;\n\n  &:hover, // When hovered by mouse...\n  &.lm_dragging {\n    background: $color5;\n    opacity: 1;\n  }\n}\n\n// Pane Header (container of Tabs for each pane)\n.lm_header {\n  height: 20px;\n  user-select: none;\n\n  &.lm_selectable {\n    cursor: pointer;\n  }\n\n  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in \".lm_header\"\n  .lm_tab {\n    font-family: Arial, sans-serif;\n    font-size: 12px;\n    color: $color6;\n    background: $color7;\n    box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3);\n    margin-right: 2px;\n    padding-bottom: 2px;\n    padding-top: 2px;\n\n    /*.lm_title         // Present in LIGHT Theme\n    {\n      padding-top:1px;\n    }*/\n\n    // Close Tab Icon\n    .lm_close_tab {\n      width: 11px;\n      height: 11px;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);\n      background-position: center center;\n      background-repeat: no-repeat;\n      top: 4px;\n      right: 6px;\n      opacity: 0.4;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n\n    // If Tab is active, so if it's in foreground\n    &.lm_active {\n      border-bottom: none;\n      box-shadow: 0 -2px 2px $color0;\n      padding-bottom: 3px;\n\n      .lm_close_tab {\n        opacity: 1;\n      }\n    }\n  }\n}\n\n.lm_dragProxy.lm_bottom,\n.lm_stack.lm_bottom {\n  .lm_header .lm_tab {\n    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);\n    &.lm_active {\n      box-shadow: 0 2px 2px $color0;\n    }\n  }\n}\n\n// 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\")\n.lm_selected {\n  .lm_header {\n    background-color: $color8;\n  }\n}\n\n.lm_tab {\n  &:hover, // If Tab is hovered\n  &.lm_active // If Tab is active, so if it's in foreground\n  {\n    background: $color1;\n    color: $color3;\n  }\n}\n\n.lm_header .lm_tabs .lm_tab.lm_keyboard_active {\n  color: $color0;\n  background: $color3;\n}\n\n// Dropdown arrow for additional tabs when too many to be displayed\n.lm_header .lm_controls .lm_tabdropdown:before {\n  color: $color10;\n}\n\n// Pane controls (popout, maximize, minimize, close)\n.lm_controls {\n  // All Pane controls shares these\n  > li {\n    position: relative;\n    background-position: center center;\n    background-repeat: no-repeat;\n    opacity: 0.4;\n    transition: opacity 300ms ease;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  // Icon to PopOut Pane, so move it to a different Browser Window\n  .lm_popout {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);\n  }\n\n  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container\n  .lm_maximise {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);\n  }\n\n  // Icon to Close Pane and so remove it from GoldenLayout Container\n  .lm_close {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);\n  }\n\n  .lm_tabnextbutton {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjUGBgEGBg4GBgYGFgYAKTHCARoDgABscAe0vtWukAAAAASUVORK5CYII=);\n  }\n\n  .lm_tabpreviousbutton {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjYGJgYGFg4GBgEGBgUACTHCARoDgABSMAXe2fzqEAAAAASUVORK5CYII=);\n  }\n}\n\n// If a specific Pane is maximized\n.lm_maximised {\n  // Pane Header (container of Tabs for each pane) can have different style when is Maximized\n  .lm_header {\n    background-color: $color0;\n  }\n\n  // 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)\n  .lm_controls {\n    .lm_maximise {\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);\n    }\n  }\n}\n\n.lm_transition_indicator {\n  background-color: $color0;\n  border: 1px dashed $color9;\n}\n\n// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:\n.lm_popin {\n  cursor: pointer;\n\n  // Background of Icon\n  .lm_bg {\n    background: $color10;\n    opacity: 0.3;\n  }\n\n  // Icon to Restore original position in Golden Layout Container\n  .lm_icon {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);\n    background-position: center center;\n    background-repeat: no-repeat;\n    border-left: 1px solid $color2;\n    border-top: 1px solid $color2;\n    opacity: 0.7;\n  }\n\n  &:hover {\n    .lm_icon {\n      opacity: 1;\n    }\n  }\n}\n"]}

package/css/goldenlayout-light-theme.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/goldenlayout-light-theme.scss"],"names":[],"mappings":"AAiBA,iBAEE,+aAIF,YACE,WAvBO,QAwBP,sBAKA,0BACE,sCACA,sBAKJ,wBACE,yCACA,wBACA,WACA,0BAGA,kCACE,WA3CK,KA4CL,WAKJ,aACE,WA1CO,KA2CP,aACA,8BAEA,4CAEE,WA/CK,KAgDL,UAKJ,WACE,YAGA,yBACE,eAIF,mBACE,6BACA,eACA,MAhEM,KAiEN,WApEK,QAqEL,iBACA,mBACA,sBACA,mBAEA,6BACE,gBAIF,iCACE,WACA,YACA,yKACA,kCACA,4BACA,UACA,QACA,WAEA,uCACE,UAKJ,6BACE,mBACA,4CACA,mBAEA,wCACE,8BAGF,2CACE,UAMR,6CACE,gBAME,sGACE,2CAOJ,wBACE,iBAhIK,QAqIP,gCAGE,WA/IK,QAgJL,MA7IK,KAiJT,+CACE,MArJO,QAsJP,WAnJO,KAuJT,+CACE,MA1JO,KAgKP,gBACE,kBACA,kCACA,4BACA,WACA,8BAEA,sBACE,UAKJ,wBACE,iMAIF,0BACE,yKAIF,uBACE,iLAGF,+BACE,yMAGF,mCACE,yMAOF,yBACE,iBApMK,KAyML,wCACE,6KAKN,yBACE,iBApNO,KAqNP,uBAIF,UACE,eAGA,iBACE,WA9NK,KA+NL,WAIF,mBACE,iPACA,kCACA,4BACA,WAIA,yBACE","file":"goldenlayout-light-theme.css","sourcesContent":["// Color variables (appears count calculates by raw css)\n$color0: #e1e1e1; // Appears 3 times\n$color1: #000000; // Appears 4 times\n$color2: #cccccc; // Appears 3 times\n$color3: #777777; // Appears 2 times\n\n$color4: #ffffff; // Appears 1 time\n$color5: #555555; // Appears 1 time\n$color6: #452500; // Appears 1 time\n$color7: #fafafa; // Appears 1 time\n$color8: #999999; // Appears 1 time\n$color9: #bbbbbb; // Appears 1 time\n$color10: #888888; // Appears 1 time\n\n// \".lm_dragging\" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged\n\n// 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)\n.lm_goldenlayout {\n  //background:$color0;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAGFBMVEX29vb19fXw8PDy8vL09PTz8/Pv7+/x8fGKuegbAAAAyUlEQVR42pXRQQ7CMBRDwST9pfe/MahEmgURbt7WmpVb6+vG0dd9REnn66xRy/qXiCgmEIIJhGACIZhACCYQgvlDCDFIEAwSBIMEwSBBMEgQDBIEgwTBIEEwCJEMQiSDENFMQmQzCZEbNyGemd6KeGZ6u4hnXe2qbdLHFjhf1XqNLXHev4wdMd9nspiEiWISJgqECQJhgkCYIBAmCIQJAmGCQJggECYJhAkCEUMEwhCBMEQgDJEIQ2RSg0iEIRJhiB/S+rrjqvXQ3paIJUgPBXxiAAAAAElFTkSuQmCC);\n}\n\n// Single Pane content (area in which final dragged content is contained)\n.lm_content {\n  background: $color0;\n  border: 1px solid $color2;\n}\n\n// Single Pane content during Drag (style of moving window following mouse)\n.lm_dragProxy {\n  .lm_content {\n    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\n    box-sizing: border-box;\n  }\n}\n\n// Placeholder Container of target position\n.lm_dropTargetIndicator {\n  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);\n  outline: 1px dashed $color2;\n  margin: 1px;\n  transition: all 200ms ease;\n\n  // Inner Placeholder\n  .lm_inner {\n    background: $color1;\n    opacity: 0.1;\n  }\n}\n\n// Separator line (handle to change pane size)\n.lm_splitter {\n  background: $color8;\n  opacity: 0.001;\n  transition: opacity 200ms ease;\n\n  &:hover, // When hovered by mouse...\n  &.lm_dragging {\n    background: $color9;\n    opacity: 1;\n  }\n}\n\n// Pane Header (container of Tabs for each pane)\n.lm_header {\n  height: 20px;\n  //user-select:none;       // Present in DARK Theme\n\n  &.lm_selectable {\n    cursor: pointer;\n  }\n\n  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in \".lm_header\"\n  .lm_tab {\n    font-family: Arial, sans-serif;\n    font-size: 12px;\n    color: $color10;\n    background: $color7;\n    margin-right: 2px;\n    padding-bottom: 4px;\n    border: 1px solid $color2;\n    border-bottom: none;\n\n    .lm_title {\n      padding-top: 1px;\n    }\n\n    // Close Tab Icon\n    .lm_close_tab {\n      width: 11px;\n      height: 11px;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAIklEQVR4nGNgYGD4z4Ad/Mdg4ODDBXCZRFgCp5EEHQMXBwAQAgz0SVCcggAAAABJRU5ErkJggg==);\n      background-position: center center;\n      background-repeat: no-repeat;\n      right: 6px;\n      top: 4px;\n      opacity: 0.4;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n\n    // If Tab is active, so if it's in foreground\n    &.lm_active {\n      border-bottom: none;\n      box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.2);\n      padding-bottom: 5px;\n\n      &.lm_focusin {\n        box-shadow: inset 0px 1px $color1;\n      }\n\n      .lm_close_tab {\n        opacity: 1;\n      }\n    }\n  }\n}\n\n.lm_window_blur .lm_tab.lm_active.lm_focusin {\n  box-shadow: none;\n}\n\n.lm_dragProxy.lm_bottom,\n.lm_stack.lm_bottom {\n  .lm_header .lm_tab {\n    &.lm_active {\n      box-shadow: 2px 2px 2px -2px rgba(0, 0, 0, 0.2);\n    }\n  }\n}\n\n// 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\")\n.lm_selected {\n  .lm_header {\n    background-color: $color6;\n  }\n}\n\n.lm_tab {\n  &:hover, // If Tab is hovered\n  &.lm_active // If Tab is active, so if it's in foreground\n  {\n    background: $color0;\n    color: $color3;\n  }\n}\n\n.lm_header .lm_tabs .lm_tab.lm_keyboard_active {\n  color: $color0;\n  background: $color3;\n}\n\n// Dropdown arrow for additional tabs when too many to be displayed\n.lm_header .lm_controls .lm_tabdropdown:before {\n  color: $color1;\n}\n\n// Pane controls (popout, maximize, minimize, close)\n.lm_controls {\n  // All Pane controls shares these\n  > li {\n    position: relative;\n    background-position: center center;\n    background-repeat: no-repeat;\n    opacity: 0.4;\n    transition: opacity 300ms ease;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  // Icon to PopOut Pane, so move it to a different Browser Window\n  .lm_popout {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVR4nI2QMQoAMAwCz5L/f9mOzZIaN0E9UDyZhaaQz6atgBHgambEJ5wBKoS0WaIvfT+6K2MIECN19MAAAAAASUVORK5CYII=);\n  }\n\n  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container\n  .lm_maximise {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==);\n  }\n\n  // Icon to Close Pane and so remove it from GoldenLayout Container\n  .lm_close {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVR4nGNgYGD4z4Af/Mdg4FKASwCnDf8JKSBoAtEmEXQTQd8RDCcA6+4Q8OvIgasAAAAASUVORK5CYII=);\n  }\n\n  .lm_tabnextbutton {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABxJREFUCNdjUGBgEGBg4GBgYGFgYAKTHCARoDgABscAe0vtWukAAAAASUVORK5CYII=);\n  }\n\n  .lm_tabpreviousbutton {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABxJREFUCNdjYGJgYGFg4GBgEGBgUACTHCARoDgABSMAXe2fzqEAAAAASUVORK5CYII=);\n  }\n}\n\n// If a specific Pane is maximized\n.lm_maximised {\n  // Pane Header (container of Tabs for each pane) can have different style when is Maximized\n  .lm_header {\n    background-color: $color4;\n  }\n\n  // 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)\n  .lm_controls {\n    .lm_maximise {\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);\n    }\n  }\n}\n\n.lm_transition_indicator {\n  background-color: $color1;\n  border: 1px dashed $color5;\n}\n\n// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:\n.lm_popin {\n  cursor: pointer;\n\n  // Background of Icon\n  .lm_bg {\n    background: $color1;\n    opacity: 0.7;\n  }\n\n  // Icon to Restore original position in Golden Layout Container\n  .lm_icon {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);\n    background-position: center center;\n    background-repeat: no-repeat;\n    opacity: 0.7;\n  }\n\n  &:hover {\n    .lm_icon {\n      opacity: 1;\n    }\n  }\n}\n"]}

package/css/goldenlayout-soda-theme.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/goldenlayout-soda-theme.scss"],"names":[],"mappings":"AAcA,iBACE,WAdO,KAeP,6CACA,yBAIF,YACE,WAdO,QAmBP,0BACE,sCAKJ,wBACE,+BACA,wBACA,0BAGA,kCACE,WAvCK,KAwCL,WAKJ,aACE,WA9CO,KA+CP,aACA,8BAEA,4CAEE,WAlDK,KAmDL,UAKJ,WACE,2LACA,YAGA,yBACE,eAIF,mBACE,6BACA,eACA,2LACA,MAlEK,KAmEL,SACA,mBAUA,iCACE,WACA,YACA,iOACA,kCACA,4BACA,UACA,QACA,WAEA,uCACE,UAKJ,6BACE,mBACA,mBAEA,2CACE,UAON,2DACE,2OAKF,wBACE,iBAlHK,QAuHP,gCAGE,2KACA,MA/HK,KAoIT,+CACE,MArIO,KA2IP,gBACE,kBACA,kCACA,4BACA,WACA,8BAEA,sBACE,UAKJ,wBACE,6MAIF,0BACE,iLAIF,uBACE,iNAOF,yBACE,iBA5KK,KAiLL,wCACE,6KAKN,yBACE,iBAxLO,KAyLP,uBAIF,UACE,eAGA,iBACE,WAjMK,KAkML,WAIF,mBACE,iPACA,kCACA,4BACA,WAIA,yBACE","file":"goldenlayout-soda-theme.css","sourcesContent":["// Color variables (appears count calculates by raw css)\n$color0: #000000; // Appears 7 times\n$color1: #eeeeee; // Appears 3 times\n$color2: #444444; // Appears 2 times\n$color3: #222222; // Appears 1 time\n$color4: #555555; // Appears 1 time\n$color5: #452500; // Appears 1 time\n$color6: #999999; // Appears 1 time\n$color7: #272822; // Appears 1 time\n$color8: #cccccc; // Appears 1 time\n\n// \".lm_dragging\" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged\n\n// 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)\n.lm_goldenlayout {\n  background: $color0;\n  background: linear-gradient($color0, $color1);\n  background-repeat: repeat;\n}\n\n// Single Pane content (area in which final dragged content is contained)\n.lm_content {\n  background: $color7;\n}\n\n// Single Pane content during Drag (style of moving window following mouse)\n.lm_dragProxy {\n  .lm_content {\n    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n  }\n}\n\n// Placeholder Container of target position\n.lm_dropTargetIndicator {\n  box-shadow: inset 0 0 30px $color0;\n  outline: 1px dashed $color8;\n  transition: all 200ms ease;\n\n  // Inner Placeholder\n  .lm_inner {\n    background: $color0;\n    opacity: 0.2;\n  }\n}\n\n// Separator line (handle to change pane size)\n.lm_splitter {\n  background: $color0;\n  opacity: 0.001;\n  transition: opacity 200ms ease;\n\n  &:hover, // When hovered by mouse...\n  &.lm_dragging {\n    background: $color2;\n    opacity: 1;\n  }\n}\n\n// Pane Header (container of Tabs for each pane)\n.lm_header {\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAANElEQVR4nH2IsQ0AMAyDHM5J/v8qD3ixulWdOiAQmhkAquoi6frt33udBEnYprvZXZJg+wAKcQ/o96fYNQAAAABJRU5ErkJggg==);\n  height: 28px;\n  //user-select:none;       // Present in DARK Theme\n\n  &.lm_selectable {\n    cursor: pointer;\n  }\n\n  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in \".lm_header\"\n  .lm_tab {\n    font-family: Arial, sans-serif;\n    font-size: 13px;\n    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAANklEQVR4nHXGsQ0AMAgDQcuFh2EC9p+HhpIGaCMlKV5/cHdKoiQC+DYzl8+/nJk0M0YEu5tVtXqyIehfJSkOAAAAAElFTkSuQmCC);\n    color: $color6;\n    margin: 0;\n    padding-bottom: 4px;\n\n    // (Used in other Themes but actually not here)\n    /*\n    .lm_title\n    {\n      padding-top:1px;\n    }*/\n\n    // Close Tab Icon\n    .lm_close_tab {\n      width: 11px;\n      height: 11px;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);\n      background-position: center center;\n      background-repeat: no-repeat;\n      right: 6px;\n      top: 4px;\n      opacity: 0.4;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n\n    // If Tab is active, so if it's in foreground\n    &.lm_active {\n      border-bottom: none;\n      padding-bottom: 5px;\n\n      .lm_close_tab {\n        opacity: 1;\n      }\n    }\n  }\n}\n.lm_stack.lm_left,\n.lm_stack.lm_right {\n  .lm_header {\n    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAABCAIAAABCJ1mGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QQHEjUmFgXMqwAAADBJREFUCNdth7ENADAMwkjOIf9/xQMsqEPVTPVg2TUz3V0PANcb310nAWCbpKQktg/HHA+z1P+XmwAAAABJRU5ErkJggg==);\n  }\n}\n// 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\")\n.lm_selected {\n  .lm_header {\n    background-color: $color5;\n  }\n}\n\n.lm_tab {\n  &:hover, // If Tab is hovered\n  &.lm_active // If Tab is active, so if it's in foreground\n  {\n    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAKUlEQVR4nGPw8vJi4ubmZmJgYGD6//8/nEZnY+MTUoPM/vfvH9PPnz8BJQc56Apw2moAAAAASUVORK5CYII=);\n    color: $color1;\n  }\n}\n\n// Dropdown arrow for additional tabs when too many to be displayed\n.lm_header .lm_controls .lm_tabdropdown:before {\n  color: $color1;\n}\n\n// Pane controls (popout, maximize, minimize, close)\n.lm_controls {\n  // All Pane controls shares these\n  > li {\n    position: relative;\n    background-position: center center;\n    background-repeat: no-repeat;\n    opacity: 0.4;\n    transition: opacity 300ms ease;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  // Icon to PopOut Pane, so move it to a different Browser Window\n  .lm_popout {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);\n  }\n\n  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container\n  .lm_maximise {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);\n  }\n\n  // Icon to Close Pane and so remove it from GoldenLayout Container\n  .lm_close {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);\n  }\n}\n\n// If a specific Pane is maximized\n.lm_maximised {\n  // Pane Header (container of Tabs for each pane) can have different style when is Maximized\n  .lm_header {\n    background-color: $color0;\n  }\n\n  // 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)\n  .lm_controls {\n    .lm_maximise {\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);\n    }\n  }\n}\n\n.lm_transition_indicator {\n  background-color: $color0;\n  border: 1px dashed $color4;\n}\n\n// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:\n.lm_popin {\n  cursor: pointer;\n\n  // Background of Icon\n  .lm_bg {\n    background: $color1;\n    opacity: 0.7;\n  }\n\n  // Icon to Restore original position in Golden Layout Container\n  .lm_icon {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);\n    background-position: center center;\n    background-repeat: no-repeat;\n    opacity: 0.7;\n  }\n\n  &:hover {\n    .lm_icon {\n      opacity: 1;\n    }\n  }\n}\n"]}

package/css/goldenlayout-translucent-theme.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/goldenlayout-translucent-theme.scss"],"names":[],"mappings":"AAMA,iBACE,mBACA,uEAIF,YACE,gCACA,uCACA,cAKA,0BACE,sCAKJ,wBACE,+CACA,wBACA,WACA,0BAWF,aACE,WAzCO,KA0CP,aACA,8BAEA,4CAEE,WA/CK,KAgDL,WAKJ,WACE,YAGA,yBACE,eAIF,mBACE,6BACA,eACA,MAjEK,KAkEL,gCACA,iBACA,mBAGA,iCACE,WACA,YACA,iOACA,kCACA,4BACA,UACA,QACA,WAEA,uCACE,UAKJ,6BACE,mBACA,4CACA,mBAEA,2CACE,UASJ,sGACE,2CAeJ,gCAGE,gCACA,MA1HK,KAyIP,gBACE,kBACA,kCACA,4BACA,WACA,8BAEA,sBACE,UAKJ,wBACE,6MAIF,0BACE,iLAIF,uBACE,iNAmCJ,UACE,eAYA,mBACE,iPACA,kCACA,4BACA,WAIA,yBACE,UAON,SACE","file":"goldenlayout-translucent-theme.css","sourcesContent":["// Color variables (appears count calculates by raw css)\n$color0: #ffffff; // Appears 7 times\n\n// \".lm_dragging\" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged\n\n// 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)\n.lm_goldenlayout {\n  background: dodgerblue;\n  background: linear-gradient(to right bottom, dodgerblue, palevioletred);\n}\n\n// Single Pane content (area in which final dragged content is contained)\n.lm_content {\n  background: rgba(255, 255, 255, 0.1);\n  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);\n  color: whitesmoke;\n}\n\n// Single Pane content during Drag (style of moving window following mouse)\n.lm_dragProxy {\n  .lm_content {\n    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n  }\n}\n\n// Placeholder Container of target position\n.lm_dropTargetIndicator {\n  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);\n  outline: 1px dashed $color0;\n  margin: 1px;\n  transition: all 200ms ease;\n\n  // Inner Placeholder (Used in other Themes but actually not here)\n  /*.lm_inner\n  {\n    background:$color0;\n    opacity:0.1;\n  }*/\n}\n\n// Separator line (handle to change pane size)\n.lm_splitter {\n  background: $color0;\n  opacity: 0.001;\n  transition: opacity 200ms ease;\n\n  &:hover, // When hovered by mouse...\n  &.lm_dragging {\n    background: $color0;\n    opacity: 0.4;\n  }\n}\n\n// Pane Header (container of Tabs for each pane)\n.lm_header {\n  height: 20px;\n  //user-select:none;       // Present in DARK Theme\n\n  &.lm_selectable {\n    cursor: pointer;\n  }\n\n  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in \".lm_header\"\n  .lm_tab {\n    font-family: Arial, sans-serif;\n    font-size: 13px;\n    color: $color0;\n    background: rgba(255, 255, 255, 0.1);\n    margin-right: 2px;\n    padding-bottom: 4px;\n\n    // Close Tab Icon\n    .lm_close_tab {\n      width: 11px;\n      height: 11px;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);\n      background-position: center center;\n      background-repeat: no-repeat;\n      right: 6px;\n      top: 4px;\n      opacity: 0.4;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n\n    // If Tab is active, so if it's in foreground\n    &.lm_active {\n      border-bottom: none;\n      box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.2);\n      padding-bottom: 5px;\n\n      .lm_close_tab {\n        opacity: 1;\n      }\n    }\n  }\n}\n\n.lm_dragProxy.lm_bottom,\n.lm_stack.lm_bottom {\n  .lm_header .lm_tab {\n    &.lm_active {\n      box-shadow: 2px 2px 2px -2px rgba(0, 0, 0, 0.2);\n    }\n  }\n}\n\n// 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\")\n.lm_selected {\n  // (Used in other Themes but actually not here)\n  /*.lm_header\n  {\n    background-color:$color6;\n  }*/\n}\n\n.lm_tab {\n  &:hover, // If Tab is hovered\n  &.lm_active // If Tab is active, so if it's in foreground\n  {\n    background: rgba(255, 255, 255, 0.3);\n    color: $color0;\n  }\n}\n\n// Dropdown arrow for additional tabs when too many to be displayed\n// (Used in other Themes but actually not here)\n/*\n.lm_header .lm_controls .lm_tabdropdown:before \n{\n  color:$color1;\n}*/\n\n// Pane controls (popout, maximize, minimize, close)\n.lm_controls {\n  // All Pane controls shares these\n  > li {\n    position: relative;\n    background-position: center center;\n    background-repeat: no-repeat;\n    opacity: 0.4;\n    transition: opacity 300ms ease;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  // Icon to PopOut Pane, so move it to a different Browser Window\n  .lm_popout {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);\n  }\n\n  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container\n  .lm_maximise {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);\n  }\n\n  // Icon to Close Pane and so remove it from GoldenLayout Container\n  .lm_close {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);\n  }\n}\n\n// If a specific Pane is maximized\n// (Used in other Themes but actually not here)\n/*\n.lm_maximised \n{\n    // Pane Header (container of Tabs for each pane) can have different style when is Maximized\n    .lm_header \n    {\n      background-color:$color4;\n    }\n  \n    // 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)\n    .lm_controls \n    {\n        .lm_maximise \n        {\n          background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);\n        }\n    }\n}\n*/\n\n// (Used in other Themes but actually not here)\n/*\n.lm_transition_indicator \n{\n\tbackground-color:$color1;\n\tborder:1px dashed $color5;\n}*/\n\n// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:\n.lm_popin {\n  cursor: pointer;\n\n  // Background of Icon\n  // (Used in other Themes but actually not here)\n  /*\n  .lm_bg\n  {\n    background:$color1;\n    opacity:0.7;\n  }*/\n\n  // Icon to Restore original position in Golden Layout Container\n  .lm_icon {\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);\n    background-position: center center;\n    background-repeat: no-repeat;\n    opacity: 0.7;\n  }\n\n  &:hover {\n    .lm_icon {\n      opacity: 1;\n    }\n  }\n}\n\n// Present only in this Theme\n\n.lm_item {\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/golden-layout",
-  "version": "0.21.2-beta.2+37e42ec",
+  "version": "0.21.2-beta.6+cc6ad9f",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
   "description": "A multi-screen javascript Layout manager",
@@ -18,17 +18,8 @@
   },
   "scripts": {
     "build": "cross-env NODE_ENV=production run-p build:*",
-    "build-dev": "cross-env NODE_ENV=development run-p build:*",
-    "sass": "sass ./src/scss:./dist/css -s compressed",
-    "build:babel": "npm run babel",
-    "build:sass": "npm run sass",
-    "babel": "babel ./src --out-dir ./dist --extensions \".ts,.js,.tsx,.jsx\" --source-maps --root-mode upward",
-    "watch": "run-p watch:*",
-    "watch:babel": "npm run babel -- -w --skip-initial-build",
-    "watch:sass": "npm run sass -- --watch --update",
-    "clean": "rimraf ./dist",
-    "start": "cross-env NODE_ENV=development npm run watch",
-    "prestart": "npm run build-dev",
+    "build:sass": "sass --embed-sources --style=compressed ./scss:./css",
+    "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.js,.tsx,.jsx\" --source-maps --root-mode upward",
     "pretest": "npm run build",
     "test": "karma start karma.conf.cjs",
     "pretest:ci": "npm run pretest",
@@ -47,7 +38,9 @@
     "popouts"
   ],
   "files": [
-    "dist"
+    "dist",
+    "scss",
+    "css"
   ],
   "publishConfig": {
     "access": "public"
@@ -58,5 +51,5 @@
     "karma-browserify": "^8.1.0",
     "watchify": "^4.0.0"
   },
-  "gitHead": "37e42ecdc341b935f525f5eb50034c2cb908c49d"
+  "gitHead": "cc6ad9f17d6d744a3b80c5af92411f73fad2e6c4"
 }

package/scss/goldenlayout-base.scss

@@ -0,0 +1,369 @@
+// Width variables (appears count calculates by raw css)
+$width0: 100%; // Appears 3 times
+$width1: 20px; // Appears 2 times
+$width2: 100px; // Appears 1 time
+$width3: 14px; // Appears 1 time
+$width4: 18px; // Appears 1 time
+$width5: 15px; // Appears 1 time
+$width6: 2px; // Appears 1 time
+
+// Height variables (appears count calculates by raw css)
+$height0: 100%; // Appears 4 times
+$height1: 20px; // Appears 2 times
+$height2: 14px; // Appears 2 times
+$height3: 10px; // Appears 1 time
+$height4: 19px; // Appears 1 time
+$height5: 18px; // Appears 1 time
+$height6: 15px; // Appears 1 time
+
+.lm_root {
+  position: relative;
+}
+
+.lm_row > .lm_item {
+  float: left;
+}
+
+// Single Pane content (area in which final dragged content is contained)
+.lm_content {
+  overflow: hidden;
+  position: relative;
+  outline: 0;
+}
+
+// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
+.lm_dragging,
+.lm_dragging * {
+  cursor: grabbing !important;
+  user-select: none;
+}
+
+// If a specific Pane is maximized
+.lm_maximised {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 40;
+}
+
+.lm_maximise_placeholder {
+  display: none;
+}
+
+// Separator line (handle to change pane size)
+.lm_splitter {
+  position: relative;
+  z-index: 20;
+
+  &:hover, // When hovered by mouse...
+  &.lm_dragging {
+    background: orange;
+  }
+
+  &.lm_vertical {
+    .lm_drag_handle {
+      width: $width0;
+      position: absolute;
+      cursor: ns-resize;
+    }
+  }
+
+  &.lm_horizontal {
+    float: left;
+    height: $height0;
+
+    .lm_drag_handle {
+      height: $height0;
+      position: absolute;
+      cursor: ew-resize;
+    }
+  }
+}
+
+// Pane Header (container of Tabs for each pane)
+.lm_header {
+  display: flex;
+  justify-content: space-between;
+  max-width: 100%;
+  z-index: 12; //above lm_content, below lm_splitter
+  position: relative;
+
+  &.lm_dropdown_open {
+    // This is an ugly hack, z-index of the whole header needs to be moved up
+    // when the menu is open, because its positioned relative to header.
+    // The header has a position, which creates a stacking context
+    // that can result in the next header being "above" the dropdown.
+    // The same problem happens for splitters too.
+    // A better solution would refactor the dropdown to be a root node,
+    // and in general use z-index way less.
+    z-index: 22; //above other lm_headers and lm_splitter
+  }
+
+  [class^='lm_'] {
+    box-sizing: content-box !important;
+  }
+
+  // Pane controls (popout, maximize, minimize, close)
+  .lm_controls {
+    display: flex;
+    user-select: none;
+
+    > li {
+      cursor: pointer;
+      float: left;
+      width: $width4;
+      height: $height5;
+      text-align: center;
+    }
+
+    > li[disabled] {
+      cursor: default;
+      opacity: 0.1;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .lm_tabs {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
+  .lm_tab {
+    cursor: pointer;
+    height: $height2;
+    margin-top: 1px;
+    padding: 0px 10px 5px;
+    padding-right: 25px;
+    position: relative;
+    min-width: 0;
+    flex-shrink: 0;
+
+    .lm_title {
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+
+    // Close Tab Icon
+    .lm_close_tab {
+      width: $width3;
+      height: $height2;
+      position: absolute;
+      top: 0;
+      right: 0;
+      text-align: center;
+    }
+  }
+}
+
+// Headers positions
+.lm_stack.lm_left,
+.lm_stack.lm_right {
+  .lm_header {
+    height: 100%;
+  }
+}
+
+.lm_dragProxy.lm_left,
+.lm_dragProxy.lm_right,
+.lm_stack.lm_left,
+.lm_stack.lm_right {
+  .lm_header {
+    width: 20px;
+    float: left;
+    vertical-align: top;
+    .lm_tabs {
+      transform-origin: left top;
+      top: 0;
+      width: 1000px; /*hack*/
+    }
+    .lm_controls {
+      bottom: 0;
+    }
+  }
+  .lm_items {
+    float: left;
+  }
+}
+
+.lm_dragProxy.lm_left,
+.lm_stack.lm_left {
+  .lm_header {
+    .lm_tabs {
+      transform: rotate(-90deg) scaleX(-1);
+      left: 0;
+      .lm_tab {
+        transform: scaleX(-1);
+        margin-top: 1px;
+      }
+    }
+    .lm_tabdropdown_list {
+      top: initial;
+      right: initial;
+      left: 20px;
+    }
+  }
+}
+
+.lm_dragProxy.lm_right .lm_content {
+  float: left;
+}
+
+.lm_dragProxy.lm_right,
+.lm_stack.lm_right {
+  .lm_header {
+    .lm_tabs {
+      transform: rotate(90deg) scaleX(1);
+      left: 100%;
+      margin-left: 0;
+    }
+    .lm_controls {
+      left: 3px;
+    }
+    .lm_tabdropdown_list {
+      top: initial;
+      right: 20px;
+    }
+  }
+}
+
+.lm_dragProxy.lm_bottom,
+.lm_stack.lm_bottom {
+  .lm_header {
+    .lm_tab {
+      margin-top: 0;
+      border-top: none;
+    }
+    .lm_controls {
+      top: 3px;
+    }
+    .lm_tabdropdown_list {
+      top: initial;
+      bottom: 20px;
+    }
+  }
+}
+
+.lm_drop_tab_placeholder {
+  flex-shrink: 0;
+}
+
+// Dropdown arrow for additional tabs when too many to be displayed
+.lm_header {
+  .lm_controls .lm_tabdropdown:before {
+    content: '';
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    display: inline-block;
+    border-top: 5px dashed;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    color: white; // Overriden in specific Themes
+  }
+
+  .lm_tabdropdown_list {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    z-index: 5;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .lm_tabs {
+      flex-direction: column;
+    }
+
+    .lm_tab {
+      padding-right: 10px;
+    }
+
+    .lm_close_tab {
+      display: none !important;
+    }
+  }
+}
+
+/***********************************
+* Drag Proxy
+***********************************/
+
+// Single Pane content during Drag (style of moving window following mouse)
+.lm_dragProxy {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+  pointer-events: none;
+
+  .lm_header {
+    background: transparent;
+  }
+
+  .lm_content {
+    border-top: none;
+    overflow: hidden;
+  }
+}
+
+// Placeholder Container of target position
+.lm_dropTargetIndicator {
+  display: none;
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+
+  // Inner Placeholder
+  .lm_inner {
+    width: $width0;
+    height: $height0;
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+}
+
+.lm_transition_indicator {
+  display: none;
+  width: $width1;
+  height: $height1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+}
+
+// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
+.lm_popin {
+  width: $width1;
+  height: $height1;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 9999;
+
+  > * {
+    width: $width0;
+    height: $height0;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  > .lm_bg {
+    z-index: 10;
+  }
+
+  > .lm_icon {
+    z-index: 20;
+  }
+}