@salt-ds/core 1.18.0 → 1.18.1
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/css/salt-core.css +15 -1
- package/dist-cjs/badge/Badge.css.js +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/checkbox/Checkbox.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/flex-layout/FlexLayout.css.js +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-cjs/radio-button/RadioButton.css.js +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-es/badge/Badge.css.js +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/checkbox/Checkbox.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/flex-layout/FlexLayout.css.js +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-es/radio-button/RadioButton.css.js +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/package.json +1 -1
package/css/salt-core.css
CHANGED
|
@@ -158,6 +158,7 @@
|
|
|
158
158
|
border-radius: 9999px;
|
|
159
159
|
white-space: nowrap;
|
|
160
160
|
z-index: var(--salt-zIndex-default);
|
|
161
|
+
box-sizing: border-box;
|
|
161
162
|
align-items: center;
|
|
162
163
|
justify-content: center;
|
|
163
164
|
display: inline-flex;
|
|
@@ -351,6 +352,7 @@
|
|
|
351
352
|
border-style: var(--salt-container-borderStyle);
|
|
352
353
|
padding: var(--saltCard-padding, var(--salt-spacing-200));
|
|
353
354
|
position: relative;
|
|
355
|
+
box-sizing: border-box;
|
|
354
356
|
}
|
|
355
357
|
.saltCard-primary {
|
|
356
358
|
background: var(--saltCard-background, var(--salt-container-primary-background));
|
|
@@ -534,6 +536,7 @@ a:link .saltInteractableCard * {
|
|
|
534
536
|
.saltCheckbox-input,
|
|
535
537
|
.saltCheckboxIcon {
|
|
536
538
|
margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
|
|
539
|
+
box-sizing: border-box;
|
|
537
540
|
}
|
|
538
541
|
.saltCheckboxIcon > svg {
|
|
539
542
|
transform: translate(0px, 0px);
|
|
@@ -608,6 +611,7 @@ a:link .saltInteractableCard * {
|
|
|
608
611
|
position: relative;
|
|
609
612
|
--saltIcon-size: 100%;
|
|
610
613
|
display: flex;
|
|
614
|
+
box-sizing: border-box;
|
|
611
615
|
}
|
|
612
616
|
.saltCheckbox:hover .saltCheckboxIcon,
|
|
613
617
|
.saltCheckbox:hover .saltCheckboxIcon-indeterminate {
|
|
@@ -676,6 +680,7 @@ a:link .saltInteractableCard * {
|
|
|
676
680
|
font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));
|
|
677
681
|
font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));
|
|
678
682
|
line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));
|
|
683
|
+
box-sizing: border-box;
|
|
679
684
|
}
|
|
680
685
|
.saltFileDropZone-active {
|
|
681
686
|
background: var(--salt-target-background-hover);
|
|
@@ -733,6 +738,7 @@ a:link .saltInteractableCard * {
|
|
|
733
738
|
flex-wrap: var(--flexLayout-wrap);
|
|
734
739
|
justify-content: var(--flexLayout-justify);
|
|
735
740
|
align-items: var(--flexLayout-align);
|
|
741
|
+
box-sizing: border-box;
|
|
736
742
|
}
|
|
737
743
|
.saltFlexLayout-separator {
|
|
738
744
|
gap: calc(var(--flexLayout-gap) * 2);
|
|
@@ -930,6 +936,7 @@ a:link .saltInteractableCard * {
|
|
|
930
936
|
padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));
|
|
931
937
|
position: relative;
|
|
932
938
|
width: 100%;
|
|
939
|
+
box-sizing: border-box;
|
|
933
940
|
}
|
|
934
941
|
.saltInput:hover {
|
|
935
942
|
--input-borderStyle: var(--salt-editable-borderStyle-hover);
|
|
@@ -1616,9 +1623,11 @@ a:link .saltInteractableCard * {
|
|
|
1616
1623
|
padding: 0;
|
|
1617
1624
|
width: var(--salt-size-selectable);
|
|
1618
1625
|
z-index: var(--salt-zIndex-default);
|
|
1626
|
+
box-sizing: border-box;
|
|
1619
1627
|
}
|
|
1620
1628
|
.saltRadioButtonIcon {
|
|
1621
1629
|
margin-top: var(--radioButton-icon-marginTop);
|
|
1630
|
+
box-sizing: border-box;
|
|
1622
1631
|
}
|
|
1623
1632
|
.saltRadioButtonIcon > svg {
|
|
1624
1633
|
transform: translate(0px, 0px);
|
|
@@ -1900,6 +1909,7 @@ a:link .saltInteractableCard * {
|
|
|
1900
1909
|
align-items: center;
|
|
1901
1910
|
color: var(--salt-selectable-foreground);
|
|
1902
1911
|
background: var(--salt-container-primary-background);
|
|
1912
|
+
box-sizing: border-box;
|
|
1903
1913
|
}
|
|
1904
1914
|
.saltSwitch-label {
|
|
1905
1915
|
padding-top: var(--salt-spacing-25);
|
|
@@ -1937,6 +1947,7 @@ a:link .saltInteractableCard * {
|
|
|
1937
1947
|
background: currentColor;
|
|
1938
1948
|
margin: var(--salt-spacing-25);
|
|
1939
1949
|
border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
|
|
1950
|
+
box-sizing: border-box;
|
|
1940
1951
|
}
|
|
1941
1952
|
.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,
|
|
1942
1953
|
.saltSwitch:hover .saltSwitch-thumb {
|
|
@@ -2321,6 +2332,7 @@ label.saltText small,
|
|
|
2321
2332
|
border-width: var(--salt-size-bar-small);
|
|
2322
2333
|
border-radius: calc(var(--salt-size-base) * 3);
|
|
2323
2334
|
border-color: var(--salt-track-borderColor);
|
|
2335
|
+
box-sizing: border-box;
|
|
2324
2336
|
}
|
|
2325
2337
|
.saltCircularProgress-bar {
|
|
2326
2338
|
inline-size: calc(var(--salt-size-base) * 3);
|
|
@@ -2329,6 +2341,7 @@ label.saltText small,
|
|
|
2329
2341
|
border-width: var(--salt-size-bar-strong);
|
|
2330
2342
|
border-radius: calc(var(--salt-size-base) * 3);
|
|
2331
2343
|
border-color: var(--salt-accent-background);
|
|
2344
|
+
box-sizing: border-box;
|
|
2332
2345
|
}
|
|
2333
2346
|
.saltCircularProgress-bars {
|
|
2334
2347
|
position: absolute;
|
|
@@ -2365,6 +2378,7 @@ label.saltText small,
|
|
|
2365
2378
|
display: flex;
|
|
2366
2379
|
min-width: 400px;
|
|
2367
2380
|
font-size: var(--linearProgress-fontSize);
|
|
2381
|
+
box-sizing: border-box;
|
|
2368
2382
|
}
|
|
2369
2383
|
.saltLinearProgress-barContainer {
|
|
2370
2384
|
background: none;
|
|
@@ -2400,4 +2414,4 @@ label.saltText small,
|
|
|
2400
2414
|
padding-left: var(--salt-spacing-100);
|
|
2401
2415
|
}
|
|
2402
2416
|
|
|
2403
|
-
/* src/
|
|
2417
|
+
/* src/93f45c06-41dc-4a15-ad67-814388eeab21.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--salt-text-notation-lineHeight);\n min-width: var(--salt-text-notation-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-text-notation-fontSize);\n font-weight: var(--salt-text-notation-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-notation-lineHeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%);\n}\n";
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--salt-text-notation-lineHeight);\n min-width: var(--salt-text-notation-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n box-sizing: border-box;\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-text-notation-fontSize);\n font-weight: var(--salt-text-notation-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-notation-lineHeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Badge.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to the root element */\n.saltCard {\n border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n border-style: var(--salt-container-borderStyle);\n padding: var(--saltCard-padding, var(--salt-spacing-200));\n position: relative;\n}\n\n.saltCard-primary {\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-color: var(--salt-container-primary-borderColor);\n --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n background: var(--saltCard-background, var(--salt-container-secondary-background));\n border-color: var(--salt-container-secondary-borderColor);\n --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied if `hoverable` is set */\n.saltCard-hoverable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n content: \"\";\n position: absolute;\n background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n left: calc(-1 * var(--salt-size-border));\n bottom: calc(-1 * var(--salt-size-border));\n height: var(--salt-size-accent);\n width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n left: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: calc(100% + calc(2 * var(--salt-size-border)));\n width: var(--salt-size-accent);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n left: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: var(--salt-size-accent);\n width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n right: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: calc(100% + calc(2 * var(--salt-size-border)));\n width: var(--salt-size-accent);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n * Use Interactable Card component instead\n * for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n outline: var(--salt-focused-outline);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n border-color: var(--salt-container-primary-borderColor-disabled);\n color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
|
|
3
|
+
var css_248z = "/* Styles applied to the root element */\n.saltCard {\n border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n border-style: var(--salt-container-borderStyle);\n padding: var(--saltCard-padding, var(--salt-spacing-200));\n position: relative;\n box-sizing: border-box;\n}\n\n.saltCard-primary {\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-color: var(--salt-container-primary-borderColor);\n --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n background: var(--saltCard-background, var(--salt-container-secondary-background));\n border-color: var(--salt-container-secondary-borderColor);\n --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied if `hoverable` is set */\n.saltCard-hoverable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n content: \"\";\n position: absolute;\n background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n left: calc(-1 * var(--salt-size-border));\n bottom: calc(-1 * var(--salt-size-border));\n height: var(--salt-size-accent);\n width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n left: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: calc(100% + calc(2 * var(--salt-size-border)));\n width: var(--salt-size-accent);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n left: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: var(--salt-size-accent);\n width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n right: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: calc(100% + calc(2 * var(--salt-size-border)));\n width: var(--salt-size-accent);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n * Use Interactable Card component instead\n * for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n outline: var(--salt-focused-outline);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n border-color: var(--salt-container-primary-borderColor-disabled);\n color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Card.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\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 root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n.saltCheckboxIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
|
|
3
|
+
var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\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 root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n box-sizing: border-box;\n}\n\n.saltCheckboxIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Checkbox.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
3
|
+
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=CheckboxIcon.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
3
|
+
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FileDropZone.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Default variables applied to the root element */\n.saltFlexLayout {\n --flexLayout-gap-multiplier: var(--flexLayout-gap-density-multiplier, 3);\n --flexLayout-layout-display: flex;\n --flexLayout-direction: row;\n --flexLayout-wrap: nowrap;\n --flexLayout-justify: flex-start;\n --flexLayout-align: stretch;\n --flexLayout-separator: var(--salt-size-border);\n --flexLayout-gap: calc(var(--salt-size-unit) * var(--flexLayout-gap-multiplier));\n}\n\n/* Style applied to the root element */\n.saltFlexLayout {\n gap: var(--flexLayout-gap);\n display: var(--flexLayout-layout-display);\n flex-direction: var(--flexLayout-direction);\n flex-wrap: var(--flexLayout-wrap);\n justify-content: var(--flexLayout-justify);\n align-items: var(--flexLayout-align);\n}\n\n.saltFlexLayout-separator {\n gap: calc(var(--flexLayout-gap) * 2);\n}\n\n.saltFlexLayout-separator > * {\n position: relative;\n}\n.saltFlexLayout-separator > *:not(:last-child)::after {\n position: absolute;\n display: block;\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* Row separator */\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n height: 100%;\n}\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n width: var(--flexLayout-separator);\n top: 0;\n}\n.saltFlexLayout-separator-row-start > *:not(:last-child)::after {\n right: 0;\n}\n.saltFlexLayout-separator-row-center > *:not(:last-child)::after {\n right: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-row-end > *:not(:last-child)::after {\n right: calc(var(--flexLayout-gap) * -2);\n}\n\n/* Column separator */\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n width: 100%;\n}\n\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n height: var(--flexLayout-separator);\n left: 0;\n width: 100%;\n}\n.saltFlexLayout-separator-column-start > *:not(:last-child)::after {\n bottom: 0;\n}\n.saltFlexLayout-separator-column-center > *:not(:last-child)::after {\n bottom: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-column-end > *:not(:last-child)::after {\n bottom: calc(var(--flexLayout-gap) * -2);\n}\n";
|
|
3
|
+
var css_248z = "/* Default variables applied to the root element */\n.saltFlexLayout {\n --flexLayout-gap-multiplier: var(--flexLayout-gap-density-multiplier, 3);\n --flexLayout-layout-display: flex;\n --flexLayout-direction: row;\n --flexLayout-wrap: nowrap;\n --flexLayout-justify: flex-start;\n --flexLayout-align: stretch;\n --flexLayout-separator: var(--salt-size-border);\n --flexLayout-gap: calc(var(--salt-size-unit) * var(--flexLayout-gap-multiplier));\n}\n\n/* Style applied to the root element */\n.saltFlexLayout {\n gap: var(--flexLayout-gap);\n display: var(--flexLayout-layout-display);\n flex-direction: var(--flexLayout-direction);\n flex-wrap: var(--flexLayout-wrap);\n justify-content: var(--flexLayout-justify);\n align-items: var(--flexLayout-align);\n box-sizing: border-box;\n}\n\n.saltFlexLayout-separator {\n gap: calc(var(--flexLayout-gap) * 2);\n}\n\n.saltFlexLayout-separator > * {\n position: relative;\n}\n.saltFlexLayout-separator > *:not(:last-child)::after {\n position: absolute;\n display: block;\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* Row separator */\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n height: 100%;\n}\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n width: var(--flexLayout-separator);\n top: 0;\n}\n.saltFlexLayout-separator-row-start > *:not(:last-child)::after {\n right: 0;\n}\n.saltFlexLayout-separator-row-center > *:not(:last-child)::after {\n right: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-row-end > *:not(:last-child)::after {\n right: calc(var(--flexLayout-gap) * -2);\n}\n\n/* Column separator */\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n width: 100%;\n}\n\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n height: var(--flexLayout-separator);\n left: 0;\n width: 100%;\n}\n.saltFlexLayout-separator-column-start > *:not(:last-child)::after {\n bottom: 0;\n}\n.saltFlexLayout-separator-column-center > *:not(:last-child)::after {\n bottom: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-column-end > *:not(:last-child)::after {\n bottom: calc(var(--flexLayout-gap) * -2);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FlexLayout.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n box-sizing: border-box;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Input.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltCircularProgress {\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n position: relative;\n}\n\n.saltCircularProgress-progressLabel {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n width: 100%;\n}\n\n.saltCircularProgress-track {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-small);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-track-borderColor);\n}\n\n.saltCircularProgress-bar {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-strong);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n inline-size: 50%;\n block-size: 100%;\n transform-origin: 100% center;\n transform: rotate(180deg);\n overflow: hidden;\n position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n inline-size: 100%;\n block-size: 100%;\n transform-origin: 100% center;\n overflow: hidden;\n transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n transform: rotate(0deg);\n}\n";
|
|
3
|
+
var css_248z = ".saltCircularProgress {\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n position: relative;\n}\n\n.saltCircularProgress-progressLabel {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n width: 100%;\n}\n\n.saltCircularProgress-track {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-small);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-track-borderColor);\n box-sizing: border-box;\n}\n\n.saltCircularProgress-bar {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-strong);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-accent-background);\n box-sizing: border-box;\n}\n\n.saltCircularProgress-bars {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n inline-size: 50%;\n block-size: 100%;\n transform-origin: 100% center;\n transform: rotate(180deg);\n overflow: hidden;\n position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n inline-size: 100%;\n block-size: 100%;\n transform-origin: 100% center;\n overflow: hidden;\n transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n transform: rotate(0deg);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=CircularProgress.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltLinearProgress {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n min-width: 400px;\n font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n background: none;\n position: relative;\n width: 100%;\n overflow: hidden;\n height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n width: 100%;\n position: absolute;\n left: 0;\n bottom: 0;\n top: 0;\n transition: transform 0.2s linear;\n transform-origin: left;\n background: var(--salt-accent-background);\n z-index: 2;\n}\n\n.saltLinearProgress-track {\n background: var(--salt-track-borderColor);\n width: 100%;\n height: var(--salt-size-bar-small);\n position: absolute;\n top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n transition: transform 0.2s linear;\n transform-origin: left;\n}\n\n.saltLinearProgress-progressLabel {\n color: inherit;\n margin: 0;\n white-space: nowrap;\n padding-left: var(--salt-spacing-100);\n}\n";
|
|
3
|
+
var css_248z = ".saltLinearProgress {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n min-width: 400px;\n font-size: var(--linearProgress-fontSize);\n box-sizing: border-box;\n}\n\n.saltLinearProgress-barContainer {\n background: none;\n position: relative;\n width: 100%;\n overflow: hidden;\n height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n width: 100%;\n position: absolute;\n left: 0;\n bottom: 0;\n top: 0;\n transition: transform 0.2s linear;\n transform-origin: left;\n background: var(--salt-accent-background);\n z-index: 2;\n}\n\n.saltLinearProgress-track {\n background: var(--salt-track-borderColor);\n width: 100%;\n height: var(--salt-size-bar-small);\n position: absolute;\n top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n transition: transform 0.2s linear;\n transform-origin: left;\n}\n\n.saltLinearProgress-progressLabel {\n color: inherit;\n margin: 0;\n white-space: nowrap;\n padding-left: var(--salt-spacing-100);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=LinearProgress.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n display: flex;\n gap: var(--salt-spacing-100);\n cursor: var(--salt-selectable-cursor-hover);\n position: relative;\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 --radioButton-icon-marginTop: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n cursor: inherit;\n position: absolute;\n height: var(--salt-size-selectable);\n opacity: 0;\n margin: var(--radioButton-icon-marginTop) 0 0 0;\n padding: 0;\n width: var(--salt-size-selectable);\n z-index: var(--salt-zIndex-default);\n}\n\n.saltRadioButtonIcon {\n margin-top: var(--radioButton-icon-marginTop);\n}\n\n.saltRadioButtonIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n outline-offset: var(--salt-focused-outlineOffset);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n";
|
|
3
|
+
var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n display: flex;\n gap: var(--salt-spacing-100);\n cursor: var(--salt-selectable-cursor-hover);\n position: relative;\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 --radioButton-icon-marginTop: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n cursor: inherit;\n position: absolute;\n height: var(--salt-size-selectable);\n opacity: 0;\n margin: var(--radioButton-icon-marginTop) 0 0 0;\n padding: 0;\n width: var(--salt-size-selectable);\n z-index: var(--salt-zIndex-default);\n box-sizing: border-box;\n}\n\n.saltRadioButtonIcon {\n margin-top: var(--radioButton-icon-marginTop);\n box-sizing: border-box;\n}\n\n.saltRadioButtonIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n outline-offset: var(--salt-focused-outlineOffset);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=RadioButton.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n color: var(--salt-content-primary-foreground);\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\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-disabled);\n color: var(--salt-selectable-foreground-disabled);\n background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n";
|
|
3
|
+
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n color: var(--salt-content-primary-foreground);\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\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n box-sizing: border-box;\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-disabled);\n color: var(--salt-selectable-foreground-disabled);\n background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n box-sizing: border-box;\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Switch.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--salt-text-notation-lineHeight);\n min-width: var(--salt-text-notation-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-text-notation-fontSize);\n font-weight: var(--salt-text-notation-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-notation-lineHeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%);\n}\n";
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltBadge {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.saltBadge-badge {\n /* Should this vary according to touch size */\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n height: var(--salt-text-notation-lineHeight);\n min-width: var(--salt-text-notation-lineHeight);\n border-radius: 9999px;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n box-sizing: border-box;\n\n align-items: center;\n justify-content: center;\n display: inline-flex;\n margin: auto;\n\n font-size: var(--salt-text-notation-fontSize);\n font-weight: var(--salt-text-notation-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-notation-lineHeight);\n background: var(--salt-accent-background);\n color: var(--salt-accent-foreground);\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n position: absolute;\n right: var(--salt-spacing-100);\n transform: translateX(100%);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Badge.css.js.map
|
package/dist-es/card/Card.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to the root element */\n.saltCard {\n border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n border-style: var(--salt-container-borderStyle);\n padding: var(--saltCard-padding, var(--salt-spacing-200));\n position: relative;\n}\n\n.saltCard-primary {\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-color: var(--salt-container-primary-borderColor);\n --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n background: var(--saltCard-background, var(--salt-container-secondary-background));\n border-color: var(--salt-container-secondary-borderColor);\n --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied if `hoverable` is set */\n.saltCard-hoverable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n content: \"\";\n position: absolute;\n background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n left: calc(-1 * var(--salt-size-border));\n bottom: calc(-1 * var(--salt-size-border));\n height: var(--salt-size-accent);\n width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n left: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: calc(100% + calc(2 * var(--salt-size-border)));\n width: var(--salt-size-accent);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n left: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: var(--salt-size-accent);\n width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n right: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: calc(100% + calc(2 * var(--salt-size-border)));\n width: var(--salt-size-accent);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n * Use Interactable Card component instead\n * for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n outline: var(--salt-focused-outline);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n border-color: var(--salt-container-primary-borderColor-disabled);\n color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to the root element */\n.saltCard {\n border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n border-style: var(--salt-container-borderStyle);\n padding: var(--saltCard-padding, var(--salt-spacing-200));\n position: relative;\n box-sizing: border-box;\n}\n\n.saltCard-primary {\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-color: var(--salt-container-primary-borderColor);\n --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n background: var(--saltCard-background, var(--salt-container-secondary-background));\n border-color: var(--salt-container-secondary-borderColor);\n --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied if `hoverable` is set */\n.saltCard-hoverable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n content: \"\";\n position: absolute;\n background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n left: calc(-1 * var(--salt-size-border));\n bottom: calc(-1 * var(--salt-size-border));\n height: var(--salt-size-accent);\n width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n left: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: calc(100% + calc(2 * var(--salt-size-border)));\n width: var(--salt-size-accent);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n left: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: var(--salt-size-accent);\n width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n right: calc(-1 * var(--salt-size-border));\n top: calc(-1 * var(--salt-size-border));\n height: calc(100% + calc(2 * var(--salt-size-border)));\n width: var(--salt-size-accent);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n * Use Interactable Card component instead\n * for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n outline: var(--salt-focused-outline);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n border-color: var(--salt-container-primary-borderColor-disabled);\n color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Card.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\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 root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n.saltCheckboxIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\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 root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n box-sizing: border-box;\n}\n\n.saltCheckboxIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Checkbox.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
1
|
+
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CheckboxIcon.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
1
|
+
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=FileDropZone.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Default variables applied to the root element */\n.saltFlexLayout {\n --flexLayout-gap-multiplier: var(--flexLayout-gap-density-multiplier, 3);\n --flexLayout-layout-display: flex;\n --flexLayout-direction: row;\n --flexLayout-wrap: nowrap;\n --flexLayout-justify: flex-start;\n --flexLayout-align: stretch;\n --flexLayout-separator: var(--salt-size-border);\n --flexLayout-gap: calc(var(--salt-size-unit) * var(--flexLayout-gap-multiplier));\n}\n\n/* Style applied to the root element */\n.saltFlexLayout {\n gap: var(--flexLayout-gap);\n display: var(--flexLayout-layout-display);\n flex-direction: var(--flexLayout-direction);\n flex-wrap: var(--flexLayout-wrap);\n justify-content: var(--flexLayout-justify);\n align-items: var(--flexLayout-align);\n}\n\n.saltFlexLayout-separator {\n gap: calc(var(--flexLayout-gap) * 2);\n}\n\n.saltFlexLayout-separator > * {\n position: relative;\n}\n.saltFlexLayout-separator > *:not(:last-child)::after {\n position: absolute;\n display: block;\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* Row separator */\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n height: 100%;\n}\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n width: var(--flexLayout-separator);\n top: 0;\n}\n.saltFlexLayout-separator-row-start > *:not(:last-child)::after {\n right: 0;\n}\n.saltFlexLayout-separator-row-center > *:not(:last-child)::after {\n right: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-row-end > *:not(:last-child)::after {\n right: calc(var(--flexLayout-gap) * -2);\n}\n\n/* Column separator */\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n width: 100%;\n}\n\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n height: var(--flexLayout-separator);\n left: 0;\n width: 100%;\n}\n.saltFlexLayout-separator-column-start > *:not(:last-child)::after {\n bottom: 0;\n}\n.saltFlexLayout-separator-column-center > *:not(:last-child)::after {\n bottom: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-column-end > *:not(:last-child)::after {\n bottom: calc(var(--flexLayout-gap) * -2);\n}\n";
|
|
1
|
+
var css_248z = "/* Default variables applied to the root element */\n.saltFlexLayout {\n --flexLayout-gap-multiplier: var(--flexLayout-gap-density-multiplier, 3);\n --flexLayout-layout-display: flex;\n --flexLayout-direction: row;\n --flexLayout-wrap: nowrap;\n --flexLayout-justify: flex-start;\n --flexLayout-align: stretch;\n --flexLayout-separator: var(--salt-size-border);\n --flexLayout-gap: calc(var(--salt-size-unit) * var(--flexLayout-gap-multiplier));\n}\n\n/* Style applied to the root element */\n.saltFlexLayout {\n gap: var(--flexLayout-gap);\n display: var(--flexLayout-layout-display);\n flex-direction: var(--flexLayout-direction);\n flex-wrap: var(--flexLayout-wrap);\n justify-content: var(--flexLayout-justify);\n align-items: var(--flexLayout-align);\n box-sizing: border-box;\n}\n\n.saltFlexLayout-separator {\n gap: calc(var(--flexLayout-gap) * 2);\n}\n\n.saltFlexLayout-separator > * {\n position: relative;\n}\n.saltFlexLayout-separator > *:not(:last-child)::after {\n position: absolute;\n display: block;\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* Row separator */\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n height: 100%;\n}\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n width: var(--flexLayout-separator);\n top: 0;\n}\n.saltFlexLayout-separator-row-start > *:not(:last-child)::after {\n right: 0;\n}\n.saltFlexLayout-separator-row-center > *:not(:last-child)::after {\n right: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-row-end > *:not(:last-child)::after {\n right: calc(var(--flexLayout-gap) * -2);\n}\n\n/* Column separator */\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n width: 100%;\n}\n\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n height: var(--flexLayout-separator);\n left: 0;\n width: 100%;\n}\n.saltFlexLayout-separator-column-start > *:not(:last-child)::after {\n bottom: 0;\n}\n.saltFlexLayout-separator-column-center > *:not(:last-child)::after {\n bottom: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-column-end > *:not(:last-child)::after {\n bottom: calc(var(--flexLayout-gap) * -2);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=FlexLayout.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n box-sizing: border-box;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Input.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltCircularProgress {\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n position: relative;\n}\n\n.saltCircularProgress-progressLabel {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n width: 100%;\n}\n\n.saltCircularProgress-track {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-small);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-track-borderColor);\n}\n\n.saltCircularProgress-bar {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-strong);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n inline-size: 50%;\n block-size: 100%;\n transform-origin: 100% center;\n transform: rotate(180deg);\n overflow: hidden;\n position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n inline-size: 100%;\n block-size: 100%;\n transform-origin: 100% center;\n overflow: hidden;\n transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n transform: rotate(0deg);\n}\n";
|
|
1
|
+
var css_248z = ".saltCircularProgress {\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n position: relative;\n}\n\n.saltCircularProgress-progressLabel {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n width: 100%;\n}\n\n.saltCircularProgress-track {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-small);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-track-borderColor);\n box-sizing: border-box;\n}\n\n.saltCircularProgress-bar {\n inline-size: calc(var(--salt-size-base) * 3);\n block-size: calc(var(--salt-size-base) * 3);\n border-style: var(--salt-track-borderStyle);\n border-width: var(--salt-size-bar-strong);\n border-radius: calc(var(--salt-size-base) * 3);\n border-color: var(--salt-accent-background);\n box-sizing: border-box;\n}\n\n.saltCircularProgress-bars {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n inline-size: 50%;\n block-size: 100%;\n transform-origin: 100% center;\n transform: rotate(180deg);\n overflow: hidden;\n position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n inline-size: 100%;\n block-size: 100%;\n transform-origin: 100% center;\n overflow: hidden;\n transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n transform: rotate(0deg);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CircularProgress.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltLinearProgress {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n min-width: 400px;\n font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n background: none;\n position: relative;\n width: 100%;\n overflow: hidden;\n height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n width: 100%;\n position: absolute;\n left: 0;\n bottom: 0;\n top: 0;\n transition: transform 0.2s linear;\n transform-origin: left;\n background: var(--salt-accent-background);\n z-index: 2;\n}\n\n.saltLinearProgress-track {\n background: var(--salt-track-borderColor);\n width: 100%;\n height: var(--salt-size-bar-small);\n position: absolute;\n top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n transition: transform 0.2s linear;\n transform-origin: left;\n}\n\n.saltLinearProgress-progressLabel {\n color: inherit;\n margin: 0;\n white-space: nowrap;\n padding-left: var(--salt-spacing-100);\n}\n";
|
|
1
|
+
var css_248z = ".saltLinearProgress {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n min-width: 400px;\n font-size: var(--linearProgress-fontSize);\n box-sizing: border-box;\n}\n\n.saltLinearProgress-barContainer {\n background: none;\n position: relative;\n width: 100%;\n overflow: hidden;\n height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n width: 100%;\n position: absolute;\n left: 0;\n bottom: 0;\n top: 0;\n transition: transform 0.2s linear;\n transform-origin: left;\n background: var(--salt-accent-background);\n z-index: 2;\n}\n\n.saltLinearProgress-track {\n background: var(--salt-track-borderColor);\n width: 100%;\n height: var(--salt-size-bar-small);\n position: absolute;\n top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n transition: transform 0.2s linear;\n transform-origin: left;\n}\n\n.saltLinearProgress-progressLabel {\n color: inherit;\n margin: 0;\n white-space: nowrap;\n padding-left: var(--salt-spacing-100);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=LinearProgress.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n display: flex;\n gap: var(--salt-spacing-100);\n cursor: var(--salt-selectable-cursor-hover);\n position: relative;\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 --radioButton-icon-marginTop: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n cursor: inherit;\n position: absolute;\n height: var(--salt-size-selectable);\n opacity: 0;\n margin: var(--radioButton-icon-marginTop) 0 0 0;\n padding: 0;\n width: var(--salt-size-selectable);\n z-index: var(--salt-zIndex-default);\n}\n\n.saltRadioButtonIcon {\n margin-top: var(--radioButton-icon-marginTop);\n}\n\n.saltRadioButtonIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n outline-offset: var(--salt-focused-outlineOffset);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n display: flex;\n gap: var(--salt-spacing-100);\n cursor: var(--salt-selectable-cursor-hover);\n position: relative;\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 --radioButton-icon-marginTop: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n cursor: inherit;\n position: absolute;\n height: var(--salt-size-selectable);\n opacity: 0;\n margin: var(--radioButton-icon-marginTop) 0 0 0;\n padding: 0;\n width: var(--salt-size-selectable);\n z-index: var(--salt-zIndex-default);\n box-sizing: border-box;\n}\n\n.saltRadioButtonIcon {\n margin-top: var(--radioButton-icon-marginTop);\n box-sizing: border-box;\n}\n\n.saltRadioButtonIcon > svg {\n /* ensures svg is centered in all browsers */\n transform: translate(0px, 0px);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n outline-offset: var(--salt-focused-outlineOffset);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-foreground);\n color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n outline-color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-foreground);\n color: var(--salt-status-warning-foreground);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=RadioButton.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n color: var(--salt-content-primary-foreground);\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\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-disabled);\n color: var(--salt-selectable-foreground-disabled);\n background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n";
|
|
1
|
+
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n color: var(--salt-content-primary-foreground);\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\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n box-sizing: border-box;\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-disabled);\n color: var(--salt-selectable-foreground-disabled);\n background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n box-sizing: border-box;\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Switch.css.js.map
|