@genesislcap/foundation-layout 14.345.1 → 14.346.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/custom-elements.json +1 -1
  2. package/dist/dts/styles/layout.styles.d.ts.map +1 -1
  3. package/dist/esm/styles/layout.styles.js +36 -39
  4. package/package.json +12 -12
package/dist/custom-elements.json CHANGED
@@ -1259,7 +1259,7 @@
1259
1259
  {
1260
1260
  "kind": "variable",
1261
1261
  "name": "layoutStyles",
1262
- "default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n .lm_goldenlayout {\n padding: 1px;\n background: ${neutralLayer1};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n }\n\n .lm_stack.lm_item {\n background-color: ${neutralLayer4};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n }\n .lm_maximised .lm_header {\n background-color: ${neutralLayer4};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n position: unset;\n }\n\n .lm_maximised .lm_header .lm_tabs {\n z-index: 3;\n }\n\n .lm_content {\n background-color: ${neutralLayer3};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n border: 1px solid;\n border-color: #2e3339;\n box-sizing: border-box;\n }\n\n .lm-header {\n z-index: 1;\n }\n .lm_header .lm_tabs {\n padding: 0 16px;\n }\n\n .lm_stack > .lm_items {\n z-index: 2;\n box-shadow: 0px -1px 15px rgba(0, 0, 0, 0.35);\n }\n\n .lm_header .lm_tab.lm_active.lm_focused {\n background-color: ${neutralLayer3};\n }\n .lm_header .lm_tab.lm_active {\n background-color: ${neutralLayer3};\n border: 1px solid;\n border-color: #2e3339;\n border-bottom: 0;\n color: ${accentFillRest};\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background-color: ${neutralLayer4};\n border: 1px solid;\n border-bottom-color: #2e3339;\n border-bottom: 0px solid;\n border-color: rgba(0, 0, 0, 0.35);\n border-radius: calc(${controlCornerRadius} * 1.5px) calc(${controlCornerRadius} * 1.5px) 0 0;\n box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.35);\n color: rgba(255, 255, 255, 0.3);\n display: flex;\n font-family: inherit;\n font-size: 13px;\n font-weight: 700;\n height: 30px;\n margin-right: 2px;\n margin-top: 3px;\n padding: 2px 16px;\n }\n\n .lm_header .lm_tab:not(.lm_active):hover {\n background-color: rgba(255, 255, 255, 0.1);\n color: #f1f1f1;\n }\n\n .lm_header .lm_controls {\n top: 4px;\n display: flex;\n }\n .lm_header .lm_controls > * {\n width: 30px;\n height: 30px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 16px;\n background-color: rgba(255, 255, 255, 0.03);\n border-radius: calc(${controlCornerRadius} * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 1;\n }\n .lm_header .lm_controls > *:hover {\n background-color: rgba(255, 255, 255, 0.1);\n cursor: pointer;\n }\n\n .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n }\n .lm_maximised .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n }\n .lm_controls .lm_close {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n }\n .lm_header .lm_tab .lm_close_tab {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n background-size: 10px;\n background-repeat: no-repeat;\n margin-left: 12px;\n position: relative;\n top: 0;\n right: 0;\n }\n\n .lm_header .lm_tab.lm_active {\n padding: 4px 25px 3px 10px;\n }\n\n .lm_header .lm_tab:not(.lm_active) .lm_title {\n color: ${accentFillRest};\n opacity: 0.7;\n }\n\n .lm_header .lm_controls .lm_tabdropdown::before {\n content: none;\n }\n .lm_header .lm_controls .lm_tabdropdown {\n background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n }\n .lm_header .lm_tabdropdown_list {\n top: 38px;\n right: 108px;\n background-color: ${neutralLayer3};\n border: 1px solid;\n border-color: #2e3339;\n border-radius: calc(${controlCornerRadius} * 1.5px);\n box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n }\n .lm_header .lm_tabdropdown_list > .lm_tab {\n box-shadow: none;\n padding: 0 16px;\n white-space: nowrap;\n background-color: transparent;\n color: #c9c9c9;\n height: 36px;\n border-radius: 0;\n overflow: visible;\n text-overflow: normal;\n }\n .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n border-bottom: 0;\n }\n\n /* gl base styles start */\n .lm_root {\n position: relative;\n }\n .lm_row > .lm_item {\n float: left;\n }\n .lm_content {\n overflow: hidden;\n position: relative;\n }\n .lm_dragging,\n .lm_dragging * {\n cursor: move !important;\n user-select: none;\n }\n .lm_maximised {\n left: 0;\n padding: 1px;\n position: absolute;\n top: 0;\n z-index: 40;\n }\n .lm_maximise_placeholder {\n display: none;\n }\n .lm_splitter {\n position: relative;\n z-index: 20;\n }\n .lm_splitter:hover,\n .lm_splitter.lm_dragging {\n background: ${accentFillRest};\n border-radius: calc(${controlCornerRadius} * 4px);\n }\n .lm_splitter.lm_vertical .lm_drag_handle {\n width: 100%;\n height: 15px;\n position: absolute;\n top: -5px;\n cursor: ns-resize !important;\n }\n .lm_splitter.lm_horizontal {\n float: left;\n height: 100%;\n }\n .lm_splitter.lm_horizontal .lm_drag_handle {\n width: 15px;\n height: 100%;\n position: absolute;\n left: -5px;\n cursor: ew-resize !important;\n }\n .lm_header {\n overflow: visible;\n position: relative;\n z-index: 1;\n }\n .lm_header [class^='lm_'] {\n box-sizing: content-box !important;\n }\n .lm_header .lm_controls {\n position: absolute;\n right: 3px;\n }\n .lm_header .lm_controls > li {\n cursor: pointer;\n float: left;\n width: 18px;\n height: 18px;\n text-align: center;\n }\n .lm_header ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n .lm_header .lm_tabs {\n position: absolute;\n }\n .lm_header .lm_tab {\n cursor: pointer;\n float: left;\n margin-top: 1px;\n padding: 3px 25px 3px 10px;\n position: relative;\n }\n .lm_header .lm_tab i {\n width: 2px;\n height: 19px;\n position: absolute;\n }\n .lm_header .lm_tab i.lm_left {\n top: 0;\n left: -2px;\n }\n .lm_header .lm_tab i.lm_right {\n top: 0;\n right: -2px;\n }\n .lm_header .lm_tab .lm_title {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n }\n .lm_header .lm_tab .lm_title:only-child {\n padding-left: 10px;\n }\n .lm_header .lm_tab .lm_close_tab {\n width: 14px;\n height: 14px;\n position: absolute;\n top: 11px;\n right: 0;\n text-align: center;\n }\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n height: 100%;\n }\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header,\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_left .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items,\n .lm_stack.lm_left .lm_items,\n .lm_stack.lm_right .lm_items {\n float: left;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n .lm_stack.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n .lm_drop_tab_placeholder {\n float: left;\n width: 100px;\n height: 10px;\n visibility: hidden;\n }\n .lm_header .lm_tabdropdown_list {\n position: absolute;\n top: 20px;\n right: 0;\n z-index: 5;\n overflow: hidden;\n }\n .lm_header .lm_tabdropdown_list .lm_tab {\n clear: both;\n padding-right: 10px;\n margin: 0;\n }\n .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n width: 100px;\n }\n .lm_header .lm_tabdropdown_list .lm_close_tab {\n display: none !important;\n }\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n }\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n .lm_popin {\n width: 20px;\n height: 20px;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 9999;\n }\n .lm_popin > * {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n .lm_popin > .lm_bg {\n z-index: 10;\n }\n .lm_popin > .lm_icon {\n z-index: 20;\n } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
1262
+ "default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n .lm_goldenlayout {\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n }\n\n .lm_stack.lm_item {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n }\n .lm_maximised .lm_header {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n position: unset;\n }\n\n .lm_maximised .lm_header .lm_tabs {\n z-index: 3;\n }\n\n .lm_content {\n background-color: var(--neutral-layer-card-container);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n box-sizing: border-box;\n color: var(--neutral-foreground-rest);\n }\n\n .lm-header {\n z-index: 1;\n }\n .lm_header .lm_tabs {\n padding: 0 16px;\n }\n\n .lm_stack > .lm_items {\n z-index: 2;\n box-shadow: 0px -1px 15px rgba(0, 0, 0, 0.15);\n }\n\n .lm_header .lm_tab.lm_active.lm_focused {\n background-color: var(--neutral-layer-card-container);\n }\n .lm_header .lm_tab.lm_active {\n background-color: var(--neutral-layer-card-container);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-bottom: 0;\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background-color: var(--neutral-layer-4);\n border: 1px solid;\n border-bottom-color: transparent;\n border-bottom: 0px solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 1.5px) calc(var(--control-corner-radius) * 1.5px) 0 0;\n color: var(--accent-foreground-rest);\n display: flex;\n font-family: inherit;\n font-size: 13px;\n font-weight: 700;\n height: 30px;\n margin-right: 2px;\n margin-top: 3px;\n padding: 2px 16px;\n }\n\n .lm_header .lm_tab:not(.lm_active):hover {\n background-color: var(--neutral-layer-card-container);\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_controls {\n top: 4px;\n display: flex;\n }\n .lm_header .lm_controls > * {\n width: 30px;\n height: 30px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 16px;\n background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 1;\n }\n .lm_header .lm_controls > *:hover {\n background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n cursor: pointer;\n }\n\n .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n }\n .lm_maximised .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n }\n .lm_controls .lm_close {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n }\n .lm_header .lm_tab .lm_close_tab {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n background-size: 10px;\n background-repeat: no-repeat;\n margin-left: 12px;\n position: relative;\n top: 0;\n right: 0;\n }\n\n .lm_header .lm_tab.lm_active {\n padding: 4px 25px 3px 10px;\n }\n\n .lm_header .lm_tab:not(.lm_active) .lm_title {\n color: var(--accent-foreground-rest);\n opacity: 0.6;\n }\n\n .lm_header .lm_controls .lm_tabdropdown::before {\n content: none;\n }\n .lm_header .lm_controls .lm_tabdropdown {\n background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n }\n .lm_header .lm_tabdropdown_list {\n top: 38px;\n right: 108px;\n background-color: var(--neutral-layer-3);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n }\n .lm_header .lm_tabdropdown_list > .lm_tab {\n box-shadow: none;\n padding: 0 16px;\n white-space: nowrap;\n background-color: transparent;\n color: var(--neutral-foreground-rest);\n height: 36px;\n border-radius: 0;\n overflow: visible;\n text-overflow: normal;\n }\n .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n border-bottom: 0;\n }\n\n /* gl base styles start */\n .lm_root {\n position: relative;\n }\n .lm_row > .lm_item {\n float: left;\n }\n .lm_content {\n overflow: hidden;\n position: relative;\n }\n .lm_dragging,\n .lm_dragging * {\n cursor: move !important;\n user-select: none;\n }\n .lm_maximised {\n left: 0;\n padding: 1px;\n position: absolute;\n top: 0;\n z-index: 40;\n }\n .lm_maximise_placeholder {\n display: none;\n }\n .lm_splitter {\n position: relative;\n z-index: 20;\n }\n .lm_splitter:hover,\n .lm_splitter.lm_dragging {\n background: var(--accent-fill-rest);\n border-radius: calc(var(--control-corner-radius) * 4px);\n }\n .lm_splitter.lm_vertical .lm_drag_handle {\n width: 100%;\n height: 15px;\n position: absolute;\n top: -5px;\n cursor: ns-resize !important;\n }\n .lm_splitter.lm_horizontal {\n float: left;\n height: 100%;\n }\n .lm_splitter.lm_horizontal .lm_drag_handle {\n width: 15px;\n height: 100%;\n position: absolute;\n left: -5px;\n cursor: ew-resize !important;\n }\n .lm_header {\n overflow: visible;\n position: relative;\n z-index: 1;\n }\n .lm_header [class^='lm_'] {\n box-sizing: content-box !important;\n }\n .lm_header .lm_controls {\n position: absolute;\n right: 3px;\n }\n .lm_header .lm_controls > li {\n cursor: pointer;\n float: left;\n width: 18px;\n height: 18px;\n text-align: center;\n }\n .lm_header ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n .lm_header .lm_tabs {\n position: absolute;\n }\n .lm_header .lm_tab {\n cursor: pointer;\n float: left;\n margin-top: 1px;\n padding: 3px 25px 3px 10px;\n position: relative;\n }\n .lm_header .lm_tab i {\n width: 2px;\n height: 19px;\n position: absolute;\n }\n .lm_header .lm_tab i.lm_left {\n top: 0;\n left: -2px;\n }\n .lm_header .lm_tab i.lm_right {\n top: 0;\n right: -2px;\n }\n .lm_header .lm_tab .lm_title {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n }\n .lm_header .lm_tab .lm_title:only-child {\n padding-left: 10px;\n }\n .lm_header .lm_tab .lm_close_tab {\n width: 14px;\n height: 14px;\n position: absolute;\n top: 11px;\n right: 0;\n text-align: center;\n }\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n height: 100%;\n }\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header,\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_left .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items,\n .lm_stack.lm_left .lm_items,\n .lm_stack.lm_right .lm_items {.lm_header .lm_tab.lm_active\n float: left;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n .lm_stack.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n .lm_drop_tab_placeholder {\n float: left;\n width: 100px;\n height: 10px;\n visibility: hidden;\n }\n .lm_header .lm_tabdropdown_list {\n position: absolute;\n top: 20px;\n right: 0;\n z-index: 5;\n overflow: hidden;\n }\n .lm_header .lm_tabdropdown_list .lm_tab {\n clear: both;\n padding-right: 10px;\n margin: 0;\n }\n .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n width: 100px;\n }\n .lm_header .lm_tabdropdown_list .lm_close_tab {\n display: none !important;\n }\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n box-shadow: none;\n }\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n .lm_popin {\n width: 20px;\n height: 20px;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 9999;\n }\n .lm_popin > * {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n .lm_popin > .lm_bg {\n z-index: 10;\n }\n .lm_popin > .lm_icon {\n z-index: 20;\n } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
1263
1263
  "description": "`ElementStyles` which defines the css for FoundationLayout.",
1264
1264
  "privacy": "public"
1265
1265
  }
package/dist/dts/styles/layout.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"layout.styles.d.ts","sourceRoot":"","sources":["../../../src/styles/layout.styles.ts"],"names":[],"mappings":"AAkGA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iDAmbxB,CAAC"}
1
+ {"version":3,"file":"layout.styles.d.ts","sourceRoot":"","sources":["../../../src/styles/layout.styles.ts"],"names":[],"mappings":"AA0FA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iDAkbxB,CAAC"}
package/dist/esm/styles/layout.styles.js CHANGED
@@ -1,20 +1,18 @@
1
1
  // NOTE: This file is stylelint ignored as the css class names that golden layout use go against the rules
2
- import { accentFillRest, controlCornerRadius, neutralLayer1, neutralLayer3, neutralLayer4, } from '@microsoft/fast-components';
3
2
  import { css } from '@microsoft/fast-element';
4
3
  import { LAYOUT_ICONS } from './constants';
5
4
  const containerStyles = `
6
5
  :host {
7
- contain: content;
8
6
  display: block;
9
7
  position: relative;
10
8
  height: 100%;
11
9
  width: 100%;
10
+ background-color: var(--fill-color);
12
11
  }
13
12
  .layout-container {
14
13
  position: absolute;
15
14
  height: 100%;
16
15
  width: 100%;
17
- inset: 0px;
18
16
  }
19
17
  `;
20
18
  const loadingSpinnerStyles = css `
@@ -26,7 +24,7 @@ const loadingSpinnerStyles = css `
26
24
  width: var(--spinner-size);
27
25
  height: var(--spinner-size);
28
26
  border: 4px solid white;
29
- border-top: 4px solid ${accentFillRest};
27
+ border-top: 4px solid var(--accent-fill-rest);
30
28
  border-radius: 50%;
31
29
  }
32
30
 
@@ -97,18 +95,16 @@ export const layoutStyles = css `
97
95
  ${loadingSpinnerStyles}
98
96
 
99
97
  .lm_goldenlayout {
100
- padding: 1px;
101
- background: ${neutralLayer1};
102
- border-radius: calc(${controlCornerRadius} * 1.5px);
98
+ border-radius: calc(var(--control-corner-radius) * 1.5px);
103
99
  }
104
100
 
105
101
  .lm_stack.lm_item {
106
- background-color: ${neutralLayer4};
107
- border-radius: calc(${controlCornerRadius} * 1.5px);
102
+ background-color: var(--neutral-layer-3);
103
+ border-radius: calc(var(--control-corner-radius) * 1.5px);
108
104
  }
109
105
  .lm_maximised .lm_header {
110
- background-color: ${neutralLayer4};
111
- border-radius: calc(${controlCornerRadius} * 1.5px);
106
+ background-color: var(--neutral-layer-3);
107
+ border-radius: calc(var(--control-corner-radius) * 1.5px);
112
108
  position: unset;
113
109
  }
114
110
 
@@ -117,11 +113,12 @@ export const layoutStyles = css `
117
113
  }
118
114
 
119
115
  .lm_content {
120
- background-color: ${neutralLayer3};
121
- border-radius: calc(${controlCornerRadius} * 1.5px);
116
+ background-color: var(--neutral-layer-card-container);
117
+ border-radius: calc(var(--control-corner-radius) * 1.5px);
122
118
  border: 1px solid;
123
- border-color: #2e3339;
119
+ border-color: var(--neutral-stroke-rest);
124
120
  box-sizing: border-box;
121
+ color: var(--neutral-foreground-rest);
125
122
  }
126
123
 
127
124
  .lm-header {
@@ -133,30 +130,29 @@ export const layoutStyles = css `
133
130
 
134
131
  .lm_stack > .lm_items {
135
132
  z-index: 2;
136
- box-shadow: 0px -1px 15px rgba(0, 0, 0, 0.35);
133
+ box-shadow: 0px -1px 15px rgba(0, 0, 0, 0.15);
137
134
  }
138
135
 
139
136
  .lm_header .lm_tab.lm_active.lm_focused {
140
- background-color: ${neutralLayer3};
137
+ background-color: var(--neutral-layer-card-container);
141
138
  }
142
139
  .lm_header .lm_tab.lm_active {
143
- background-color: ${neutralLayer3};
140
+ background-color: var(--neutral-layer-card-container);
144
141
  border: 1px solid;
145
- border-color: #2e3339;
142
+ border-color: var(--neutral-stroke-rest);
146
143
  border-bottom: 0;
147
- color: ${accentFillRest};
144
+ color: var(--accent-foreground-rest);
148
145
  }
149
146
 
150
147
  .lm_header .lm_tab {
151
148
  align-items: center;
152
- background-color: ${neutralLayer4};
149
+ background-color: var(--neutral-layer-4);
153
150
  border: 1px solid;
154
- border-bottom-color: #2e3339;
151
+ border-bottom-color: transparent;
155
152
  border-bottom: 0px solid;
156
- border-color: rgba(0, 0, 0, 0.35);
157
- border-radius: calc(${controlCornerRadius} * 1.5px) calc(${controlCornerRadius} * 1.5px) 0 0;
158
- box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.35);
159
- color: rgba(255, 255, 255, 0.3);
153
+ border-color: var(--neutral-stroke-rest);
154
+ border-radius: calc(var(--control-corner-radius) * 1.5px) calc(var(--control-corner-radius) * 1.5px) 0 0;
155
+ color: var(--accent-foreground-rest);
160
156
  display: flex;
161
157
  font-family: inherit;
162
158
  font-size: 13px;
@@ -168,8 +164,8 @@ export const layoutStyles = css `
168
164
  }
169
165
 
170
166
  .lm_header .lm_tab:not(.lm_active):hover {
171
- background-color: rgba(255, 255, 255, 0.1);
172
- color: #f1f1f1;
167
+ background-color: var(--neutral-layer-card-container);
168
+ color: var(--accent-foreground-rest);
173
169
  }
174
170
 
175
171
  .lm_header .lm_controls {
@@ -182,14 +178,14 @@ export const layoutStyles = css `
182
178
  background-repeat: no-repeat;
183
179
  background-position: center;
184
180
  background-size: 16px;
185
- background-color: rgba(255, 255, 255, 0.03);
186
- border-radius: calc(${controlCornerRadius} * 1.5px);
181
+ background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);
182
+ border-radius: calc(var(--control-corner-radius) * 1.5px);
187
183
  margin-right: 4px;
188
184
  top: 3px;
189
185
  opacity: 1;
190
186
  }
191
187
  .lm_header .lm_controls > *:hover {
192
- background-color: rgba(255, 255, 255, 0.1);
188
+ background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);
193
189
  cursor: pointer;
194
190
  }
195
191
 
@@ -217,8 +213,8 @@ export const layoutStyles = css `
217
213
  }
218
214
 
219
215
  .lm_header .lm_tab:not(.lm_active) .lm_title {
220
- color: ${accentFillRest};
221
- opacity: 0.7;
216
+ color: var(--accent-foreground-rest);
217
+ opacity: 0.6;
222
218
  }
223
219
 
224
220
  .lm_header .lm_controls .lm_tabdropdown::before {
@@ -230,10 +226,10 @@ export const layoutStyles = css `
230
226
  .lm_header .lm_tabdropdown_list {
231
227
  top: 38px;
232
228
  right: 108px;
233
- background-color: ${neutralLayer3};
229
+ background-color: var(--neutral-layer-3);
234
230
  border: 1px solid;
235
- border-color: #2e3339;
236
- border-radius: calc(${controlCornerRadius} * 1.5px);
231
+ border-color: var(--neutral-stroke-rest);
232
+ border-radius: calc(var(--control-corner-radius) * 1.5px);
237
233
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
238
234
  }
239
235
  .lm_header .lm_tabdropdown_list > .lm_tab {
@@ -241,7 +237,7 @@ export const layoutStyles = css `
241
237
  padding: 0 16px;
242
238
  white-space: nowrap;
243
239
  background-color: transparent;
244
- color: #c9c9c9;
240
+ color: var(--neutral-foreground-rest);
245
241
  height: 36px;
246
242
  border-radius: 0;
247
243
  overflow: visible;
@@ -283,8 +279,8 @@ export const layoutStyles = css `
283
279
  }
284
280
  .lm_splitter:hover,
285
281
  .lm_splitter.lm_dragging {
286
- background: ${accentFillRest};
287
- border-radius: calc(${controlCornerRadius} * 4px);
282
+ background: var(--accent-fill-rest);
283
+ border-radius: calc(var(--control-corner-radius) * 4px);
288
284
  }
289
285
  .lm_splitter.lm_vertical .lm_drag_handle {
290
286
  width: 100%;
@@ -397,7 +393,7 @@ export const layoutStyles = css `
397
393
  .lm_dragProxy.lm_left .lm_items,
398
394
  .lm_dragProxy.lm_right .lm_items,
399
395
  .lm_stack.lm_left .lm_items,
400
- .lm_stack.lm_right .lm_items {
396
+ .lm_stack.lm_right .lm_items {.lm_header .lm_tab.lm_active
401
397
  float: left;
402
398
  }
403
399
  .lm_dragProxy.lm_left .lm_header .lm_tabs,
@@ -489,6 +485,7 @@ export const layoutStyles = css `
489
485
  display: none;
490
486
  position: absolute;
491
487
  z-index: 20;
488
+ box-shadow: none;
492
489
  }
493
490
  .lm_dropTargetIndicator .lm_inner {
494
491
  width: 100%;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-layout",
3
3
  "description": "Genesis Foundation UI App Layout",
4
- "version": "14.345.1",
4
+ "version": "14.346.0",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "main": "dist/esm/index.js",
7
7
  "types": "dist/foundation-layout.d.ts",
@@ -36,19 +36,19 @@
36
36
  }
37
37
  },
38
38
  "devDependencies": {
39
- "@genesislcap/foundation-testing": "14.345.1",
40
- "@genesislcap/genx": "14.345.1",
41
- "@genesislcap/rollup-builder": "14.345.1",
42
- "@genesislcap/ts-builder": "14.345.1",
43
- "@genesislcap/uvu-playwright-builder": "14.345.1",
44
- "@genesislcap/vite-builder": "14.345.1",
45
- "@genesislcap/webpack-builder": "14.345.1"
39
+ "@genesislcap/foundation-testing": "14.346.0",
40
+ "@genesislcap/genx": "14.346.0",
41
+ "@genesislcap/rollup-builder": "14.346.0",
42
+ "@genesislcap/ts-builder": "14.346.0",
43
+ "@genesislcap/uvu-playwright-builder": "14.346.0",
44
+ "@genesislcap/vite-builder": "14.346.0",
45
+ "@genesislcap/webpack-builder": "14.346.0"
46
46
  },
47
47
  "dependencies": {
48
48
  "@genesis-community/golden-layout": "^2.11.0",
49
- "@genesislcap/foundation-comms": "14.345.1",
50
- "@genesislcap/foundation-logger": "14.345.1",
51
- "@genesislcap/foundation-utils": "14.345.1",
49
+ "@genesislcap/foundation-comms": "14.346.0",
50
+ "@genesislcap/foundation-logger": "14.346.0",
51
+ "@genesislcap/foundation-utils": "14.346.0",
52
52
  "@microsoft/fast-components": "2.30.6",
53
53
  "@microsoft/fast-element": "1.14.0",
54
54
  "@microsoft/fast-foundation": "2.49.6"
@@ -62,5 +62,5 @@
62
62
  "access": "public"
63
63
  },
64
64
  "customElements": "dist/custom-elements.json",
65
- "gitHead": "6fe2b3549762f27ea710ee27fdf7b10a0d4ecfce"
65
+ "gitHead": "9d95d289ce549d9c0f347187acbc3ae6ac5d9a69"
66
66
  }