@salt-ds/lab 1.0.0-alpha.102 → 1.0.0-alpha.103
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.
- package/CHANGELOG.md +21 -0
- package/css/salt-lab.css +343 -162
- package/dist-cjs/app-header/AppHeader.css.js +1 -1
- package/dist-cjs/button-bar/ButtonBar.css.js +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.css.js +1 -1
- package/dist-cjs/color-chooser/ColorChooser.css.js +1 -1
- package/dist-cjs/color-chooser/ColorPicker.css.js +1 -1
- package/dist-cjs/color-chooser/HexInput.css.js +1 -1
- package/dist-cjs/color-chooser/RGBAInput.css.js +1 -1
- package/dist-cjs/color-chooser/Swatch.css.js +1 -1
- package/dist-cjs/color-chooser/Swatches.css.js +1 -1
- package/dist-cjs/contact-details/ContactDetails.css.js +1 -1
- package/dist-cjs/content-status/ContentStatus.css.js +1 -1
- package/dist-cjs/dropdown/DropdownButton.css.js +1 -1
- package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
- package/dist-cjs/form-field-legacy/FormHelperText.css.js +1 -1
- package/dist-cjs/index.js +4 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input-legacy/InputLegacy.css.js +1 -1
- package/dist-cjs/input-legacy/StaticInputAdornment.css.js +1 -1
- package/dist-cjs/layer-layout/LayerLayout.css.js +1 -1
- package/dist-cjs/link-button/LinkButton.css.js +6 -0
- package/dist-cjs/link-button/LinkButton.css.js.map +1 -0
- package/dist-cjs/link-button/LinkButton.js +78 -0
- package/dist-cjs/link-button/LinkButton.js.map +1 -0
- package/dist-cjs/list/List.css.js +1 -1
- package/dist-cjs/list/ListItem.css.js +1 -1
- package/dist-cjs/list-deprecated/ListItem.css.js +1 -1
- package/dist-cjs/list-next/ListItemNext.css.js +1 -1
- package/dist-cjs/logo/LogoSeparator.css.js +1 -1
- package/dist-cjs/menu-button/MenuButtonTrigger.css.js +1 -1
- package/dist-cjs/metric/MetricContent.css.js +1 -1
- package/dist-cjs/metric/MetricHeader.css.js +1 -1
- package/dist-cjs/on-solid-button/OnSolidButton.css.js +6 -0
- package/dist-cjs/on-solid-button/OnSolidButton.css.js.map +1 -0
- package/dist-cjs/on-solid-button/OnSolidButton.js +62 -0
- package/dist-cjs/on-solid-button/OnSolidButton.js.map +1 -0
- package/dist-cjs/query-input/QueryInput.css.js +1 -1
- package/dist-cjs/tabs/Tab.css.js +1 -1
- package/dist-cjs/tabs/Tabstrip.css.js +1 -1
- package/dist-cjs/tabs/ThemeTabstrip.css.js +1 -1
- package/dist-cjs/tokenized-input/TokenizedInput.css.js +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +1 -1
- package/dist-cjs/tokenized-input-next/internal/InputPill.css.js +1 -1
- package/dist-cjs/toolbar/Toolbar.css.js +1 -1
- package/dist-cjs/toolbar/Tooltray.css.js +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowSeparator.css.js +1 -1
- package/dist-es/app-header/AppHeader.css.js +1 -1
- package/dist-es/button-bar/ButtonBar.css.js +1 -1
- package/dist-es/cascading-menu/CascadingMenuItem.css.js +1 -1
- package/dist-es/color-chooser/ColorChooser.css.js +1 -1
- package/dist-es/color-chooser/ColorPicker.css.js +1 -1
- package/dist-es/color-chooser/HexInput.css.js +1 -1
- package/dist-es/color-chooser/RGBAInput.css.js +1 -1
- package/dist-es/color-chooser/Swatch.css.js +1 -1
- package/dist-es/color-chooser/Swatches.css.js +1 -1
- package/dist-es/contact-details/ContactDetails.css.js +1 -1
- package/dist-es/content-status/ContentStatus.css.js +1 -1
- package/dist-es/dropdown/DropdownButton.css.js +1 -1
- package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
- package/dist-es/form-field-legacy/FormHelperText.css.js +1 -1
- package/dist-es/index.js +2 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input-legacy/InputLegacy.css.js +1 -1
- package/dist-es/input-legacy/StaticInputAdornment.css.js +1 -1
- package/dist-es/layer-layout/LayerLayout.css.js +1 -1
- package/dist-es/link-button/LinkButton.css.js +4 -0
- package/dist-es/link-button/LinkButton.css.js.map +1 -0
- package/dist-es/link-button/LinkButton.js +76 -0
- package/dist-es/link-button/LinkButton.js.map +1 -0
- package/dist-es/list/List.css.js +1 -1
- package/dist-es/list/ListItem.css.js +1 -1
- package/dist-es/list-deprecated/ListItem.css.js +1 -1
- package/dist-es/list-next/ListItemNext.css.js +1 -1
- package/dist-es/logo/LogoSeparator.css.js +1 -1
- package/dist-es/menu-button/MenuButtonTrigger.css.js +1 -1
- package/dist-es/metric/MetricContent.css.js +1 -1
- package/dist-es/metric/MetricHeader.css.js +1 -1
- package/dist-es/on-solid-button/OnSolidButton.css.js +4 -0
- package/dist-es/on-solid-button/OnSolidButton.css.js.map +1 -0
- package/dist-es/on-solid-button/OnSolidButton.js +60 -0
- package/dist-es/on-solid-button/OnSolidButton.js.map +1 -0
- package/dist-es/query-input/QueryInput.css.js +1 -1
- package/dist-es/tabs/Tab.css.js +1 -1
- package/dist-es/tabs/Tabstrip.css.js +1 -1
- package/dist-es/tabs/ThemeTabstrip.css.js +1 -1
- package/dist-es/tokenized-input/TokenizedInput.css.js +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +1 -1
- package/dist-es/tokenized-input-next/internal/InputPill.css.js +1 -1
- package/dist-es/toolbar/Toolbar.css.js +1 -1
- package/dist-es/toolbar/Tooltray.css.js +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowSeparator.css.js +1 -1
- package/dist-types/index.d.ts +2 -0
- package/dist-types/link-button/LinkButton.d.ts +26 -0
- package/dist-types/link-button/index.d.ts +1 -0
- package/dist-types/on-solid-button/OnSolidButton.d.ts +12 -0
- package/dist-types/on-solid-button/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-
|
|
3
|
+
var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-spacing-100) * 2));\n}\n\n.salt-density-high {\n --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-spacing-100) * 3));\n}\n\n.saltAppHeader {\n --appHeader-background: var(--salt-container-primary-background);\n --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n --appHeader-padding: var(--salt-spacing-300);\n --appHeader-paddingLeft: 8px;\n --appHeader-paddingRight: var(--appHeader-padding);\n\n --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n --saltTabs-tabstrip-height: var(--appHeader-height);\n /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n --saltTabs-activationIndicator-height: 0px;\n --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n align-items: flex-start;\n background: var(--appHeader-background);\n border-bottom: var(--salt-borderStyle-solid) var(--salt-size-fixed-100) var(--salt-separable-primary-borderColor);\n box-shadow: var(--appHeader-shadow);\n box-sizing: content-box;\n display: flex;\n flex: 0 0 auto;\n height: var(--appHeader-height);\n overflow: hidden;\n padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n width: 100%;\n /* overflow: hidden; */\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n /* justify-content: space-between; */\n flex: 1;\n min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n width: 0;\n height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n margin-right: 12px;\n padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n top: 0;\n right: 0;\n width: var(--salt-size-fixed-100);\n bottom: 0;\n content: \"\";\n position: absolute;\n background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n align-self: flex-end;\n flex: 0 0 auto;\n margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n justify-content: flex-end;\n margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n flex-basis: 0;\n flex-grow: 0;\n flex-shrink: 0;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=AppHeader.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltButtonBar {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n gap: var(--salt-
|
|
3
|
+
var css_248z = ".saltButtonBar {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n gap: var(--salt-spacing-100);\n}\n\n.saltButtonBar-alignLeft {\n justify-content: flex-start;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ButtonBar.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltCascadingMenuItem {\n background: var(--salt-selectable-background);\n display: flex;\n\n align-items: center;\n justify-content: space-between;\n\n right: 0;\n cursor: var(--salt-cursor-hover);\n overflow: hidden;\n text-align: left;\n user-select: none;\n white-space: nowrap;\n text-overflow: ellipsis;\n border-top: var(--salt-size-fixed-100) var(--salt-
|
|
3
|
+
var css_248z = ".saltCascadingMenuItem {\n background: var(--salt-selectable-background);\n display: flex;\n\n align-items: center;\n justify-content: space-between;\n\n right: 0;\n cursor: var(--salt-cursor-hover);\n overflow: hidden;\n text-align: left;\n user-select: none;\n white-space: nowrap;\n text-overflow: ellipsis;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n box-sizing: border-box;\n}\n\n.saltCascadingMenuItem-menuItemText {\n flex-grow: 2;\n white-space: nowrap;\n}\n\n.saltCascadingMenuItem-menuItemEndAdornment {\n margin-left: 8px; /* density */\n}\n\n.saltCascadingMenuItem-menuItemStartAdornmentContainer {\n margin-right: var(--salt-spacing-100);\n width: 12px;\n}\n\n.saltCascadingMenuItem-menuItemAdornmentHidden {\n visibility: hidden;\n}\n\n.saltCascadingMenuItem.saltCascadingMenuItem-menuItemDivider {\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);\n}\n\n.saltCascadingMenuItem-menuItemHover:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n/* extra specificity requred to override ListItem selected */\n.saltCascadingMenuItem.saltCascadingMenuItem-menuItemBlurSelected {\n background: var(--salt-selectable-background-selected);\n border-top-color: var(--salt-selectable-borderColor-selected);\n border-bottom-color: var(--salt-selectable-borderColor-selected);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=CascadingMenuItem.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltColorChooser-overlayButtonSwatch {\n margin-right: 10px;\n height: calc(2 * var(--salt-
|
|
3
|
+
var css_248z = ".saltColorChooser-overlayButtonSwatch {\n margin-right: 10px;\n height: calc(2 * var(--salt-spacing-100));\n width: calc(2 * var(--salt-spacing-100));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n height: calc(var(--salt-spacing-300) - 2px) !important;\n width: calc(var(--salt-spacing-300) - 2px) !important;\n border: 1px solid var(--salt-sentiment-negative-foreground-decorative);\n /* RGBA using red-700 */\n background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%);\n}\n\n.saltColorChooser-overlayButtonText {\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--salt-text-fontSize);\n letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n background: transparent;\n text-transform: none;\n justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n width: var(--salt-spacing-300);\n display: contents;\n}\n\n.saltColorChooser-defaultButton {\n float: right;\n background: transparent;\n padding: 6px 2px 6px 2px;\n height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n.saltColorChooser-defaultButton {\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n padding-right: 5px;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ColorChooser.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-
|
|
3
|
+
var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-spacing-100) calc(2 * var(--salt-spacing-100)) 0px calc(1.5 * var(--salt-spacing-100));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-spacing-100) 0px 0px var(--salt-spacing-100);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * calc(var(--salt-size-base) + var(--salt-spacing-100))) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ColorPicker.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltColorChooserHexInput {\n display: flex;\n flex-direction: row;\n padding: 0px 0px var(--salt-
|
|
3
|
+
var css_248z = ".saltColorChooserHexInput {\n display: flex;\n flex-direction: row;\n padding: 0px 0px var(--salt-spacing-300) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n margin-top: 5px;\n font-size: var(--salt-text-label-fontSize);\n padding-right: 6px;\n color: var(--salt-content-secondary-foreground);\n padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n width: var(--salt-spacing-100);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=HexInput.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltColorChooser-rgbaInput {\n width: var(--salt-
|
|
3
|
+
var css_248z = ".saltColorChooser-rgbaInput {\n width: var(--salt-spacing-100);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n padding-top: var(--salt-spacing-100);\n}\n\n.saltColorChooser-opacityInput {\n min-width: 40px !important;\n width: 40px !important;\n min-height: unset !important;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-rgbaText {\n margin-top: 5px;\n font-size: var(--salt-text-label-fontSize);\n color: var(--salt-content-secondary-foreground);\n padding-top: 4px;\n padding-right: 6px;\n padding-left: 6px;\n}\n\n.saltColorChooser-rgbaInputDiv {\n display: flex;\n flex-direction: row;\n padding: 0px 0px var(--salt-spacing-100) 0px;\n}\n\n.saltColorChooser-overrideInput {\n min-width: 0em;\n background: transparent !important;\n color: var(--salt-content-primary-foreground);\n border-bottom: 1px solid var(--salt-content-primary-foreground);\n}\n\n.saltColorChooser-alphaSpacerDiv {\n height: 24px;\n}\n\n.saltColorChooser-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=RGBAInput.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n margin-bottom: 1px;\n margin-left: 1px;\n cursor: var(--salt-cursor-hover);\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n --colorChooser-swatch-density-high-size: calc(5 * var(--salt-
|
|
3
|
+
var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n margin-bottom: 1px;\n margin-left: 1px;\n cursor: var(--salt-cursor-hover);\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n --colorChooser-swatch-density-high-size: calc(5 * var(--salt-spacing-100));\n --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-spacing-100));\n --colorChooser-swatch-density-low-size: calc(3 * var(--salt-spacing-100));\n --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-spacing-100));\n}\n\n.salt-density-touch {\n --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n width: var(--colorChooser-swatch-size-unit);\n height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n margin-bottom: 1px;\n margin-left: 1px;\n cursor: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n width: calc(var(--colorChooser-swatch-size-unit) - 2);\n height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n width: calc(var(--colorChooser-swatch-size-unit) - 2);\n height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-accented-bold-foreground-active) !important;\n margin-bottom: 1px;\n margin-left: 1px;\n cursor: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-sentiment-negative-foreground-decorative) !important;\n width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n margin-bottom: 1px;\n margin-left: 1px;\n background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Swatch.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatches-colorNameTextDiv {\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltColorChooserSwatches-colorNameTextDiv,\n.saltColorChooserSwatches-colorTextDiv,\n.saltColorChooserSwatches-alphaTextDiv {\n color: var(--salt-content-secondary-foreground);\n}\n\n.saltColorChooserSwatches-colorTextDiv {\n font-size: var(--salt-text-fontSize);\n margin-right: var(--salt-
|
|
3
|
+
var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatches-colorNameTextDiv {\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltColorChooserSwatches-colorNameTextDiv,\n.saltColorChooserSwatches-colorTextDiv,\n.saltColorChooserSwatches-alphaTextDiv {\n color: var(--salt-content-secondary-foreground);\n}\n\n.saltColorChooserSwatches-colorTextDiv {\n font-size: var(--salt-text-fontSize);\n margin-right: var(--salt-spacing-100);\n}\n\n.saltColorChooserSwatches-alphaTextDiv {\n font-size: var(--salt-text-fontSize);\n margin-right: var(--salt-spacing-100);\n}\n\n.saltColorChooserSwatches-textDiv {\n display: flex;\n justify-content: space-between;\n padding: 8px 8px 0px 8px;\n}\n\n.saltColorChooserSwatches-pickerDiv {\n padding-top: calc(2 * var(--salt-spacing-100));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Swatches.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".salt-density-touch {\n --contactDetails-default-primary-fontSize: 30px;\n --contactDetails-default-secondary-fontSize: 16px;\n --contactDetails-compact-primary-fontSize: 16px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-icon-size: 18px;\n --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n --contactDetails-compact-primary-fontSize: 14px;\n --contactDetails-default-primary-fontSize: 24px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-default-secondary-fontSize: 14px;\n --contactDetails-label-width: 70px;\n --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n --contactDetails-compact-primary-fontSize: 12px;\n --contactDetails-default-primary-fontSize: 18px;\n --contactDetails-compact-secondary-fontSize: 12px;\n --contactDetails-default-secondary-fontSize: 12px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n --contactDetails-compact-primary-fontSize: 11px;\n --contactDetails-default-primary-fontSize: 14px;\n --contactDetails-compact-secondary-fontSize: 11px;\n --contactDetails-default-secondary-fontSize: 11px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n --contactDetails-color: var(--salt-content-primary-foreground);\n --contactDetails-label-color: var(--salt-content-secondary-foreground);\n --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);\n --contactDetails-noAvatar-indicator-width: 4px;\n --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n --contactDetails-favoriteToggle-marginRight: 0px;\n --contactDetails-favoriteToggle-marginTop: 0px;\n --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-
|
|
3
|
+
var css_248z = ".salt-density-touch {\n --contactDetails-default-primary-fontSize: 30px;\n --contactDetails-default-secondary-fontSize: 16px;\n --contactDetails-compact-primary-fontSize: 16px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-icon-size: 18px;\n --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n --contactDetails-compact-primary-fontSize: 14px;\n --contactDetails-default-primary-fontSize: 24px;\n --contactDetails-compact-secondary-fontSize: 14px;\n --contactDetails-default-secondary-fontSize: 14px;\n --contactDetails-label-width: 70px;\n --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n --contactDetails-compact-primary-fontSize: 12px;\n --contactDetails-default-primary-fontSize: 18px;\n --contactDetails-compact-secondary-fontSize: 12px;\n --contactDetails-default-secondary-fontSize: 12px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n --contactDetails-compact-primary-fontSize: 11px;\n --contactDetails-default-primary-fontSize: 14px;\n --contactDetails-compact-secondary-fontSize: 11px;\n --contactDetails-default-secondary-fontSize: 11px;\n --contactDetails-label-width: 60px;\n --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n --contactDetails-color: var(--salt-content-primary-foreground);\n --contactDetails-label-color: var(--salt-content-secondary-foreground);\n --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);\n --contactDetails-noAvatar-indicator-width: 4px;\n --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n --contactDetails-favoriteToggle-marginRight: 0px;\n --contactDetails-favoriteToggle-marginTop: 0px;\n --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-spacing-100);\n --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-spacing-100) * 2);\n --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-spacing-100);\n\n /* TODO: Check below tokens with design */\n --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n display: grid;\n padding: var(--salt-spacing-100);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n color: var(--contactDetails-color);\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary secondary\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions metadataExpander\"\n \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar avatar\"\n \"noAvatar primary favorite\"\n \"noAvatar secondary secondary\"\n \"noAvatar tertiary tertiary\"\n \". actions metadataExpander\"\n \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n grid-template-columns: auto auto auto 1fr auto;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary primary favorite\"\n \"noAvatar avatar secondary tertiary tertiary\"\n \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n grid-template-columns: auto auto 1fr auto;\n grid-template-rows: auto auto auto auto;\n grid-template-areas:\n \"noAvatar avatar primary favorite\"\n \"noAvatar avatar secondary favorite\"\n \"noAvatar avatar tertiary tertiary\"\n \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n grid-template-columns: auto minmax(60px, 1fr) auto;\n grid-template-rows: auto;\n grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n grid-area: noAvatar;\n width: var(--contactDetails-noAvatar-indicator-width);\n background: var(--contactDetails-noAvatar-color);\n margin-right: var(--salt-spacing-100);\n}\n\n.saltContactAvatar {\n grid-area: avatar;\n margin-right: var(--salt-spacing-100);\n}\n\n.saltContactAvatar-stacked {\n margin-bottom: var(--salt-spacing-100);\n}\n\n.saltContactActions {\n grid-area: actions;\n display: flex;\n margin-top: var(--salt-spacing-100);\n margin-left: calc(var(--salt-spacing-100) * -1);\n}\n\n.saltContactPrimaryInfo {\n grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n margin-bottom: calc(var(--salt-spacing-100) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n margin-right: calc(var(--salt-spacing-100) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n margin-right: calc(var(--salt-spacing-100) * 0.5);\n}\n\n.saltContactMetadata {\n grid-area: metadata;\n display: flex;\n flex-direction: column;\n padding-top: var(--salt-spacing-100);\n padding-bottom: var(--salt-spacing-100);\n}\n\n.saltContactMetadata-expander {\n grid-area: metadataExpander;\n margin-top: var(--salt-spacing-100);\n}\n\n.saltContactMetadata-separator {\n width: 100%;\n height: 1px;\n background: var(--contactDetails-separator-color);\n margin-bottom: var(--salt-spacing-100);\n}\n\n.saltContactMetadataItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: calc(var(--salt-spacing-100) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n margin-right: calc(var(--salt-spacing-100) * 2);\n padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n flex-shrink: 0;\n color: var(--contactDetails-label-color);\n margin-right: calc(var(--salt-spacing-100) * 2);\n width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n align-self: start;\n grid-area: favorite;\n justify-self: center;\n line-height: var(--contactDetails-primary-fontSize);\n margin-right: var(--contactDetails-favoriteToggle-marginRight);\n margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n --contactDetails-favoriteToggle-fill: var(--salt-sentiment-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n height: var(--contactDetails-icon-size);\n width: var(--contactDetails-icon-size);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ContactDetails.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: var(--salt-text-textAlign-embedded);\n gap: var(--salt-
|
|
3
|
+
var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: var(--salt-text-textAlign-embedded);\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground));\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-100);\n\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title.saltText {\n font-weight: var(--salt-text-display1-fontWeight);\n /* TODO: Use correct token */\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-spacing-100));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ContentStatus.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltDropdownButton {\n --saltButton-background-hover: var(--salt-actionable-
|
|
3
|
+
var css_248z = ".saltDropdownButton {\n --saltButton-background-hover: var(--salt-actionable-subtle-background);\n --saltButton-background-active: var(--salt-actionable-subtle-background);\n --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n --saltButton-textAlign: left;\n --saltButton-textTransform: none;\n --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n --saltIcon-color: var(--salt-actionable-subtle-foreground);\n --saltButton-text-color-active: var(--salt-actionable-subtle-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n width: 100%;\n}\n\n.saltDropdownButton-content {\n align-items: center;\n flex: 1;\n width: 100%;\n display: flex;\n white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n display: inline-block;\n letter-spacing: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n outline: none;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=DropdownButton.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".salt-density-high {\n --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n --formFieldLegacy-background: var(--salt-editable-primary-background);\n --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n /* Set to 0 until helper text class provided */\n --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n border: 0;\n display: inline-grid;\n margin: var(--saltFormFieldLegacy-margin, 0);\n padding: 0;\n position: relative;\n min-width: 0;\n vertical-align: top;\n width: var(--saltFormFieldLegacy-width, auto);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n --saltInputLegacy-cursor: var(--salt-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-200);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n --saltInputLegacy-cursor: var(--salt-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n --formFieldLegacy-activationIndicator-offsetBottom: calc(\n var(--formFieldLegacy-helperText-marginTop-fullWidth) +\n var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);\n\n --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n --formFieldLegacy-label-marginTop: var(--salt-size-unit);\n --formFieldLegacy-label-paddingLeft: 0px;\n --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n align-self: start;\n grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n --formFieldLegacy-label-marginTop: 0;\n --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);\n --formFieldLegacy-label-paddingRight: var(--salt-size-unit);\n /* Uses density invariant value unless helper text provided */\n --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n background: linear-gradient(\n to top,\n transparent var(--formFieldLegacy-background-offset-height),\n var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n /* Uses density aware value from FormHelperText */\n --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n grid-row-start: 3;\n grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n grid-row-start: 4;\n grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n grid-column-start: 2;\n grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: var(--formFieldLegacy-helperText-height, 0px);\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
|
|
3
|
+
var css_248z = ".salt-density-high {\n --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n --formFieldLegacy-background: var(--salt-editable-primary-background);\n --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n /* Set to 0 until helper text class provided */\n --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n border: 0;\n display: inline-grid;\n margin: var(--saltFormFieldLegacy-margin, 0);\n padding: 0;\n position: relative;\n min-width: 0;\n vertical-align: top;\n width: var(--saltFormFieldLegacy-width, auto);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n --saltInputLegacy-cursor: var(--salt-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-200);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n --saltInputLegacy-cursor: var(--salt-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n --formFieldLegacy-activationIndicator-offsetBottom: calc(\n var(--formFieldLegacy-helperText-marginTop-fullWidth) +\n var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n --formFieldLegacy-activationIndicator-opacity: 0.4;\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n --formFieldLegacy-helperText-opacity: 0.4;\n\n --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n --formFieldLegacy-label-marginTop: var(--salt-spacing-100);\n --formFieldLegacy-label-paddingLeft: 0px;\n --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-spacing-100));\n\n align-self: start;\n grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n --formFieldLegacy-label-marginTop: 0;\n --formFieldLegacy-label-paddingLeft: var(--salt-spacing-100);\n --formFieldLegacy-label-paddingRight: var(--salt-spacing-100);\n /* Uses density invariant value unless helper text provided */\n --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n background: linear-gradient(\n to top,\n transparent var(--formFieldLegacy-background-offset-height),\n var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n /* Uses density aware value from FormHelperText */\n --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n grid-row-start: 3;\n grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n grid-row-start: 4;\n grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n grid-column-start: 2;\n grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: var(--formFieldLegacy-helperText-height, 0px);\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FormFieldLegacy.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n --formFieldLegacy-helperText-marginTop-default: 2px;\n --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n --formFieldLegacy-helperText-marginTop-default: 2px;\n --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n --formFieldLegacy-helperText-marginTop-default: 8px;\n --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n --formFieldLegacy-helperText-marginTop-default: 4px;\n --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n --formFieldLegacy-helperText-opacity: 1;\n\n color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));\n font-size: var(--formFieldLegacy-helperText-fontSize);\n font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-
|
|
3
|
+
var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n --formFieldLegacy-helperText-marginTop-default: 2px;\n --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n --formFieldLegacy-helperText-marginTop-default: 2px;\n --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n --formFieldLegacy-helperText-marginTop-default: 8px;\n --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n --formFieldLegacy-helperText-marginTop-default: 4px;\n --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n --formFieldLegacy-helperText-opacity: 1;\n\n color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));\n font-size: var(--formFieldLegacy-helperText-fontSize);\n font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-spacing-100));\n transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FormHelperText.css.js.map
|
package/dist-cjs/index.js
CHANGED
|
@@ -43,6 +43,7 @@ var FormattedInput = require('./formatted-input/FormattedInput.js');
|
|
|
43
43
|
var InputLegacy = require('./input-legacy/InputLegacy.js');
|
|
44
44
|
var StaticInputAdornment = require('./input-legacy/StaticInputAdornment.js');
|
|
45
45
|
var LayerLayout = require('./layer-layout/LayerLayout.js');
|
|
46
|
+
var LinkButton = require('./link-button/LinkButton.js');
|
|
46
47
|
var Highlighter = require('./list/Highlighter.js');
|
|
47
48
|
var List = require('./list/List.js');
|
|
48
49
|
var ListItem = require('./list/ListItem.js');
|
|
@@ -80,6 +81,7 @@ var MenuButton = require('./menu-button/MenuButton.js');
|
|
|
80
81
|
var Metric = require('./metric/Metric.js');
|
|
81
82
|
var MetricContent = require('./metric/MetricContent.js');
|
|
82
83
|
var MetricHeader = require('./metric/MetricHeader.js');
|
|
84
|
+
var OnSolidButton = require('./on-solid-button/OnSolidButton.js');
|
|
83
85
|
var Portal = require('./portal/Portal.js');
|
|
84
86
|
var QueryInput = require('./query-input/QueryInput.js');
|
|
85
87
|
var useQueryInput = require('./query-input/useQueryInput.js');
|
|
@@ -172,6 +174,7 @@ exports.Input = InputLegacy.InputLegacy;
|
|
|
172
174
|
exports.StaticInputAdornment = StaticInputAdornment.StaticInputAdornment;
|
|
173
175
|
exports.LAYER_POSITIONS = LayerLayout.LAYER_POSITIONS;
|
|
174
176
|
exports.LayerLayout = LayerLayout.LayerLayout;
|
|
177
|
+
exports.LinkButton = LinkButton.LinkButton;
|
|
175
178
|
exports.Highlighter = Highlighter.Highlighter;
|
|
176
179
|
exports.List = List.List;
|
|
177
180
|
exports.ListItem = ListItem.ListItem;
|
|
@@ -203,6 +206,7 @@ exports.MenuButton = MenuButton.MenuButton;
|
|
|
203
206
|
exports.Metric = Metric.Metric;
|
|
204
207
|
exports.MetricContent = MetricContent.MetricContent;
|
|
205
208
|
exports.MetricHeader = MetricHeader.MetricHeader;
|
|
209
|
+
exports.OnSolidButton = OnSolidButton.OnSolidButton;
|
|
206
210
|
exports.Portal = Portal.Portal;
|
|
207
211
|
exports.QueryInput = QueryInput.QueryInput;
|
|
208
212
|
exports.useQueryInput = useQueryInput.useQueryInput;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-
|
|
3
|
+
var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 0.5);\n --inputLegacy-button-inset: 4px;\n}\n.salt-density-low {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2 / 3);\n --inputLegacy-button-inset: 4px;\n}\n.salt-density-medium {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 0.5);\n --inputLegacy-button-inset: 2px;\n}\n.salt-density-high {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n --inputLegacy-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInputLegacy {\n align-items: center;\n background: var(--saltInputLegacy-background, none);\n border: var(--saltInputLegacy-border, none);\n border-radius: var(--saltInputLegacy-borderRadius, 0);\n color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground));\n cursor: var(--saltInputLegacy-cursor, default);\n display: inline-flex;\n font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));\n height: var(--saltInputLegacy-height, var(--salt-size-base));\n line-height: var(--salt-text-lineHeight);\n min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));\n min-width: var(--saltInputLegacy-minWidth, 8em);\n padding: var(--saltInputLegacy-padding, 0 var(--salt-spacing-100));\n position: var(--saltInputLegacy-position, relative);\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Reset in the next class */\n.saltInputLegacy-input:focus {\n outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInputLegacy-focused {\n outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));\n outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));\n outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));\n outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to inner input component */\n.saltInputLegacy-input {\n background: var(--saltInputLegacy-background, none);\n border: none;\n box-sizing: content-box;\n color: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--saltInputLegacy-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n height: 100%;\n width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputLegacy-disabled .saltInputLegacy-input {\n cursor: var(--salt-cursor-disabled);\n color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInputLegacy-suffixContainer,\n.saltInputLegacy-prefixContainer {\n display: flex;\n align-items: center;\n\n height: var(--inputLegacy-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInputLegacy-inputAdornedStart {\n padding-left: var(--saltInputLegacy-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInputLegacy-inputAdornedStart .saltInputLegacy-input {\n padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-spacing-100));\n}\n\n/* Style applied to root element with end adornment */\n.saltInputLegacy-inputAdornedEnd {\n padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {\n padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-spacing-100));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,\n.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {\n height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));\n margin: var(--inputLegacy-button-inset);\n padding: 0 calc(var(--salt-spacing-100) - var(--inputLegacy-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInputLegacy-leftTextAlign .saltInputLegacy-input {\n text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInputLegacy-centerTextAlign .saltInputLegacy-input {\n text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInputLegacy-rightTextAlign .saltInputLegacy-input {\n text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInputLegacy-formField {\n min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);\n width: 100%;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=InputLegacy.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltStaticInputAdornment {\n --inputLegacy-staticAdornment-padding: var(--salt-
|
|
3
|
+
var css_248z = ".saltStaticInputAdornment {\n --inputLegacy-staticAdornment-padding: var(--salt-spacing-100);\n}\n\n.saltStaticInputAdornment {\n display: flex;\n align-items: center;\n}\n\n.saltInputLegacy-prefixContainer .saltStaticInputAdornment {\n padding-left: var(--inputLegacy-staticAdornment-padding);\n}\n\n.saltInputLegacy-suffixContainer .saltStaticInputAdornment {\n padding-right: var(--inputLegacy-staticAdornment-padding);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=StaticInputAdornment.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltLayerLayout {\n --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-
|
|
3
|
+
var css_248z = ".saltLayerLayout {\n --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-spacing-300));\n --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-spacing-300));\n}\n\n.saltLayerLayout {\n background: var(--layerLayout-background);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n max-width: 100%;\n overflow: auto;\n padding: var(--layerLayout-padding);\n box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));\n z-index: calc(var(--salt-zIndex-appHeader) - 1);\n box-sizing: border-box;\n}\n\n.saltLayerLayout-fullScreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.saltLayerLayout-center {\n margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));\n}\n\n.saltLayerLayout-center.saltLayerLayout-enter-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,\n.saltScrim.saltLayerLayout-enter-animation {\n animation: var(--salt-animation-fade-in-center);\n}\n\n.saltLayerLayout-center.saltLayerLayout-exit-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,\n.saltScrim.saltLayerLayout-exit-animation {\n animation: var(--salt-animation-fade-out-back);\n}\n\n.saltLayerLayout-anchor {\n position: fixed;\n max-height: 100%;\n top: 0;\n}\n\n.saltLayerLayout-top {\n left: 0;\n right: 0;\n bottom: auto;\n}\n\n.saltLayerLayout-top.saltLayerLayout-enter-animation {\n animation: var(--salt-animation-slide-in-bottom);\n}\n\n.saltLayerLayout-top.saltLayerLayout-exit-animation {\n animation: var(--salt-animation-slide-out-bottom);\n}\n\n.saltLayerLayout-right {\n left: auto;\n right: 0;\n height: 100%;\n}\n\n.saltLayerLayout-right.saltLayerLayout-enter-animation {\n animation: var(--salt-animation-slide-in-right);\n}\n\n.saltLayerLayout-right.saltLayerLayout-exit-animation {\n animation: var(--salt-animation-slide-out-right);\n}\n\n.saltLayerLayout-left {\n left: 0;\n right: auto;\n height: 100%;\n}\n\n.saltLayerLayout-left.saltLayerLayout-enter-animation {\n animation: var(--salt-animation-slide-in-left);\n}\n\n.saltLayerLayout-left.saltLayerLayout-exit-animation {\n animation: var(--salt-animation-slide-out-left);\n}\n\n.saltLayerLayout-bottom {\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-enter-animation {\n animation: var(--salt-animation-slide-in-top);\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-exit-animation {\n animation: var(--salt-animation-slide-out-top);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=LayerLayout.css.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltLinkButton {\n --linkButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltLinkButton-alignItems, center);\n appearance: none;\n background: var(--saltLinkButton-background, var(--linkButton-background));\n border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));\n border-style: var(--saltLinkButton-borderStyle, solid);\n border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));\n border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltLinkButton-text-color, var(--linkButton-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltLinkButton-justifyContent, center);\n font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));\n margin: var(--saltLinkButton-margin, 0);\n height: var(--saltLinkButton-height, var(--salt-size-base));\n min-width: var(--saltLinkButton-minWidth, unset);\n position: relative;\n text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: var(--linkButton-textDecoration, var(--salt-text-link-textDecoration));\n text-underline-offset: var(--salt-spacing-fixed-200);\n transition: none;\n width: var(--saltLinkButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n.saltLinkButton-underlineDefault {\n --linkButton-textDecoration: var(--salt-text-link-textDecoration);\n --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);\n}\n\n.saltLinkButton-underlineNever {\n --linkButton-textDecoration: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);\n}\n\n/* Class for ADA content - visually hidden but accessible to screen readers.\n Uses clip-path and prevents user selection so the text isn't included\n when users copy the link button's visible content. */\n.saltLinkButton-externalLinkADA {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n user-select: none;\n -webkit-user-select: none;\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when LinkButton is not active or disabled */\n .saltLinkButton:hover {\n background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));\n }\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltLinkButton:focus-visible {\n outline: var(--salt-focused-outline);\n\n background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));\n}\n\n/* Pseudo-class applied to the root element when LinkButton is active */\n.saltLinkButton.saltLinkButton-active:focus-visible,\n.saltLinkButton:focus-visible:active,\n.saltLinkButton:active,\n.saltLinkButton.saltLinkButton-active {\n background: var(--saltLinkButton-background-active, var(--linkButton-background-active));\n color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));\n border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n.saltLinkButton-neutral {\n --linkButton-text-color: var(--salt-actionable-subtle-foreground);\n --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --linkButton-background: var(--salt-actionable-subtle-background);\n --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --linkButton-background-active: var(--salt-actionable-subtle-background-active);\n --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltLinkButton-accented {\n --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --linkButton-background: var(--salt-actionable-accented-subtle-background);\n --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=LinkButton.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinkButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var LinkButton$1 = require('./LinkButton.css.js');
|
|
10
|
+
|
|
11
|
+
const withBaseName = core.makePrefixer("saltLinkButton");
|
|
12
|
+
const LinkButton = react.forwardRef(
|
|
13
|
+
function LinkButton2(props, ref) {
|
|
14
|
+
const {
|
|
15
|
+
children,
|
|
16
|
+
className,
|
|
17
|
+
IconComponent,
|
|
18
|
+
onBlur,
|
|
19
|
+
onClick,
|
|
20
|
+
onKeyDown,
|
|
21
|
+
onKeyUp,
|
|
22
|
+
sentiment = "neutral",
|
|
23
|
+
target = "_self",
|
|
24
|
+
underline = "default",
|
|
25
|
+
...rest
|
|
26
|
+
} = props;
|
|
27
|
+
const { active, buttonProps } = core.useButton({
|
|
28
|
+
onBlur,
|
|
29
|
+
onClick,
|
|
30
|
+
onKeyDown,
|
|
31
|
+
onKeyUp
|
|
32
|
+
});
|
|
33
|
+
const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;
|
|
34
|
+
const targetWindow = window.useWindow();
|
|
35
|
+
styles.useComponentCssInjection({
|
|
36
|
+
testId: "salt-link-button",
|
|
37
|
+
css: LinkButton$1,
|
|
38
|
+
window: targetWindow
|
|
39
|
+
});
|
|
40
|
+
const { ExternalIcon } = core.useIcon();
|
|
41
|
+
const LinkButtonIconComponent = IconComponent === void 0 ? ExternalIcon : IconComponent;
|
|
42
|
+
const linkButton = core.renderProps("a", {
|
|
43
|
+
className: clsx.clsx(
|
|
44
|
+
withBaseName(),
|
|
45
|
+
withBaseName(sentiment),
|
|
46
|
+
withBaseName(`underline${core.capitalize(underline)}`),
|
|
47
|
+
{ [withBaseName("active")]: active },
|
|
48
|
+
className
|
|
49
|
+
),
|
|
50
|
+
...activeStateProps,
|
|
51
|
+
...rest,
|
|
52
|
+
ref,
|
|
53
|
+
target,
|
|
54
|
+
children
|
|
55
|
+
});
|
|
56
|
+
if (linkButton.props.target !== "_blank") {
|
|
57
|
+
return linkButton;
|
|
58
|
+
}
|
|
59
|
+
return react.cloneElement(
|
|
60
|
+
linkButton,
|
|
61
|
+
void 0,
|
|
62
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
63
|
+
linkButton.props.children,
|
|
64
|
+
LinkButtonIconComponent && /* @__PURE__ */ jsxRuntime.jsx(
|
|
65
|
+
LinkButtonIconComponent,
|
|
66
|
+
{
|
|
67
|
+
className: withBaseName("icon"),
|
|
68
|
+
"aria-hidden": true
|
|
69
|
+
}
|
|
70
|
+
),
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("externalLinkADA"), children: "Opens in a new tab" })
|
|
72
|
+
] })
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
exports.LinkButton = LinkButton;
|
|
78
|
+
//# sourceMappingURL=LinkButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import {\n capitalize,\n makePrefixer,\n type RenderPropsType,\n renderProps,\n useButton,\n useIcon,\n} from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ComponentType,\n cloneElement,\n forwardRef,\n} from \"react\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * The sentiment of the button. Options are 'accented' and 'neutral'.\n * 'neutral' is the default value.\n */\n sentiment?: \"accented\" | \"neutral\";\n /**\n * Render prop to enable customisation of anchor element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Either \"default\" or \"never\".\n * Determines when underline should be applied to the link button.\n *\n * @default \"default\".\n */\n underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n function LinkButton(props, ref) {\n const {\n children,\n className,\n IconComponent,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n sentiment = \"neutral\",\n target = \"_self\",\n underline = \"default\",\n ...rest\n } = props;\n\n const { active, buttonProps } = useButton<HTMLAnchorElement>({\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n });\n // Native anchors with an href do not require tabIndex=\"0\".\n const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link-button\",\n css: linkButtonCss,\n window: targetWindow,\n });\n const { ExternalIcon } = useIcon();\n\n const LinkButtonIconComponent =\n IconComponent === undefined ? ExternalIcon : IconComponent;\n\n const linkButton = renderProps(\"a\", {\n className: clsx(\n withBaseName(),\n withBaseName(sentiment),\n withBaseName(`underline${capitalize(underline)}`),\n { [withBaseName(\"active\")]: active },\n className,\n ),\n ...activeStateProps,\n ...rest,\n ref,\n target,\n children,\n });\n\n if (linkButton.props.target !== \"_blank\") {\n return linkButton;\n }\n\n return cloneElement(\n linkButton,\n undefined,\n <>\n {linkButton.props.children}\n {LinkButtonIconComponent && (\n <LinkButtonIconComponent\n className={withBaseName(\"icon\")}\n aria-hidden\n />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>\n Opens in a new tab\n </span>\n </>,\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","LinkButton","useButton","useWindow","useComponentCssInjection","linkButtonCss","useIcon","renderProps","clsx","capitalize","cloneElement","jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAIC,cAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,YAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAaC,iBAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAYC,eAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,IAAI,UAAA,CAAW,KAAA,CAAM,MAAA,KAAW,QAAA,EAAU;AACxC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAOC,kBAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACAC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA,CAAM,QAAA;AAAA,QACjB,uBAAA,oBACCC,cAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,uCAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(--salt-borderStyle-solid);\n --list-borderWidth: var(--salt-size-fixed-100);\n --list-height: auto;\n --list-item-height: var(--salt-size-
|
|
3
|
+
var css_248z = ".saltList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(--salt-borderStyle-solid);\n --list-borderWidth: var(--salt-size-fixed-100);\n --list-height: auto;\n --list-item-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n --list-item-gap: 0px;\n --list-maxHeight: 100%;\n\n background: var(--list-background);\n border-color: var(--salt-container-bold-borderColor);\n border-style: var(--list-borderStyle);\n border-width: var(--list-borderWidth);\n height: var(--saltList-height, var(--list-height));\n max-height: var(--list-maxHeight);\n outline: none;\n overflow-y: auto;\n position: relative;\n user-select: none;\n width: var(--saltList-width, auto);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n\n box-sizing: border-box;\n}\n\n.saltList-borderless {\n --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n --list-item-height: 30px;\n max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n overflow: auto;\n}\n\n.saltListItemHeader {\n --saltList-item-background: var(--list-item-header-background);\n color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n --saltList-item-background: var(--list-background);\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n border-width: var(--checkbox-borderWidth);\n border-color: var(--checkbox-borderColor);\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n background: var(--list-item-header-twisty-color);\n height: 12px;\n left: var(--list-item-header-twisty-left);\n right: var(--list-item-header-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n inset: 2px;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=List.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltListItem {\n /* Color */\n --list-item-text-color: var(--salt-content-primary-foreground);\n --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-content-primary-foreground);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.saltListItem {\n color: var(--list-item-text-color);\n cursor: var(--saltList-item-cursor, var(--salt-cursor-hover));\n background: var(--saltList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--saltList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--salt-
|
|
3
|
+
var css_248z = ".saltListItem {\n /* Color */\n --list-item-text-color: var(--salt-content-primary-foreground);\n --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-content-primary-foreground);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.saltListItem {\n color: var(--list-item-text-color);\n cursor: var(--saltList-item-cursor, var(--salt-cursor-hover));\n background: var(--saltList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--saltList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--salt-spacing-100);\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.saltListItem:last-child {\n margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n --list-item-background-active: var(--salt-selectable-background);\n --list-item-text-color-active: var(--salt-content-primary-foreground);\n --list-item-text-padding: 0 0 0 var(--salt-spacing-100);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n --list-item-text-color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n flex: 1;\n overflow: hidden;\n padding: var(--list-item-text-padding, 0px);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n /* biome-ignore lint/complexity/noImportantStyles: Needed to ensure the proxy doesn't take any space. */\n position: absolute !important;\n visibility: hidden;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ListItem.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltListItemDeprecated {\n /* Color */\n --list-item-text-color: var(--salt-selectable-foreground);\n --list-item-background: var(--salt-selectable-background);\n --list-item-background-hover: var(--salt-selectable-background-hover);\n --list-item-selected-focus-outlineColor: var(--salt-content-bold-foreground);\n\n --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n --list-item-background-active: var(--salt-selectable-background-selected);\n\n /* Text, Font */\n --list-item-textAlign: var(--salt-text-textAlign);\n --list-item-fontSize: var(--salt-text-fontSize);\n --list-item-lineHeight: var(--salt-text-lineHeight);\n\n /* Spacing */\n --list-item-padding: 0 var(--salt-
|
|
3
|
+
var css_248z = ".saltListItemDeprecated {\n /* Color */\n --list-item-text-color: var(--salt-selectable-foreground);\n --list-item-background: var(--salt-selectable-background);\n --list-item-background-hover: var(--salt-selectable-background-hover);\n --list-item-selected-focus-outlineColor: var(--salt-content-bold-foreground);\n\n --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n --list-item-background-active: var(--salt-selectable-background-selected);\n\n /* Text, Font */\n --list-item-textAlign: var(--salt-text-textAlign);\n --list-item-fontSize: var(--salt-text-fontSize);\n --list-item-lineHeight: var(--salt-text-lineHeight);\n\n /* Spacing */\n --list-item-padding: 0 var(--salt-spacing-100);\n\n /* Misc. */\n --list-item-gap: 0px;\n --list-item-alignItems: center;\n --list-item-selectable-cursor: pointer;\n --list-item-cursor: default;\n\n --list-item-disabled-cursor: var(--salt-cursor-disabled);\n --list-item-disabled-regular-opacity: 0.4;\n}\n\n.saltListItemDeprecated {\n color: var(--list-item-text-color);\n background: var(--list-item-background);\n text-align: var(--list-item-textAlign);\n line-height: var(--list-item-lineHeight);\n font-size: var(--list-item-fontSize);\n padding: var(--list-item-padding);\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.saltListItemDeprecated {\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated:last-child {\n margin-bottom: 0px;\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) {\n background: var(--list-item-background-hover);\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-deselectable {\n cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated-textWrapper {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltListItemDeprecated-selected {\n color: var(--list-item-text-color-active);\n background: var(--list-item-background-active);\n cursor: var(--list-item-cursor);\n}\n\n.saltListItemDeprecated-disabled {\n cursor: var(--list-item-disabled-cursor);\n opacity: var(--list-item-disabled-regular-opacity);\n}\n\n.saltListItemDeprecated-focusVisible:after {\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n content: \"\";\n position: absolute;\n\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ListItem.css.js.map
|