@salt-ds/core 1.47.0 → 1.47.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/CHANGELOG.md +13 -0
- package/css/salt-core.css +225 -213
- package/dist-cjs/accordion/Accordion.css.js +1 -1
- package/dist-cjs/accordion/AccordionGroup.css.js +1 -1
- package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
- package/dist-cjs/banner/Banner.css.js +1 -1
- package/dist-cjs/border-item/BorderItem.js +33 -32
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +3 -1
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/button/Button.js +2 -1
- package/dist-cjs/button/Button.js.map +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/dialog/Dialog.css.js +1 -1
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/divider/Divider.css.js +1 -1
- package/dist-cjs/dropdown/Dropdown.css.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/flex-item/FlexItem.js +46 -48
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.css.js +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +60 -62
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/flow-layout/FlowLayout.js +3 -5
- package/dist-cjs/flow-layout/FlowLayout.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +51 -53
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +49 -51
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
- package/dist-cjs/link-card/LinkCard.css.js +1 -1
- package/dist-cjs/list-box/ListBox.css.js +1 -1
- package/dist-cjs/list-box/ListBox.js +5 -0
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js +1 -1
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuGroup.css.js +1 -1
- package/dist-cjs/menu/MenuItem.css.js +1 -1
- package/dist-cjs/menu/MenuPanel.css.js +1 -1
- package/dist-cjs/menu/MenuTrigger.js +32 -29
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
- package/dist-cjs/option/Option.css.js +1 -1
- package/dist-cjs/option/Option.js +1 -0
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.css.js +1 -1
- package/dist-cjs/option/OptionList.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanel.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js +17 -11
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pagination/PageButton.css.js +1 -1
- package/dist-cjs/pill/Pill.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.js +5 -3
- package/dist-cjs/pill-input/PillInput.js.map +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/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +1 -1
- package/dist-cjs/slider/internal/SliderThumb.css.js +1 -1
- package/dist-cjs/slider/internal/SliderTooltip.css.js +1 -1
- package/dist-cjs/slider/internal/SliderTrack.css.js +1 -1
- package/dist-cjs/spinner/Spinner.css.js +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +2 -1
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.css.js +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +4 -2
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/stepper/internal/StepConnector.css.js +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-cjs/tag/Tag.css.js +1 -1
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/theme/Theme.js.map +1 -1
- package/dist-cjs/toast/Toast.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-es/accordion/Accordion.css.js +1 -1
- package/dist-es/accordion/AccordionGroup.css.js +1 -1
- package/dist-es/accordion/AccordionHeader.css.js +1 -1
- package/dist-es/banner/Banner.css.js +1 -1
- package/dist-es/border-item/BorderItem.js +33 -32
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +3 -1
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/button/Button.js +2 -1
- package/dist-es/button/Button.js.map +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/dialog/Dialog.css.js +1 -1
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/divider/Divider.css.js +1 -1
- package/dist-es/dropdown/Dropdown.css.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/flex-item/FlexItem.js +46 -48
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.css.js +1 -1
- package/dist-es/flex-layout/FlexLayout.js +60 -62
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/flow-layout/FlowLayout.js +3 -5
- package/dist-es/flow-layout/FlowLayout.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +51 -53
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +49 -51
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +1 -1
- package/dist-es/link-card/LinkCard.css.js +1 -1
- package/dist-es/list-box/ListBox.css.js +1 -1
- package/dist-es/list-box/ListBox.js +5 -0
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/menu/MenuBase.js +1 -1
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuGroup.css.js +1 -1
- package/dist-es/menu/MenuItem.css.js +1 -1
- package/dist-es/menu/MenuPanel.css.js +1 -1
- package/dist-es/menu/MenuTrigger.js +33 -30
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/navigation-item/NavigationItem.css.js +1 -1
- package/dist-es/option/Option.css.js +1 -1
- package/dist-es/option/Option.js +1 -0
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.css.js +1 -1
- package/dist-es/option/OptionList.css.js +1 -1
- package/dist-es/overlay/OverlayPanel.css.js +1 -1
- package/dist-es/overlay/OverlayPanelContent.css.js +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +1 -1
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js +18 -12
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pagination/PageButton.css.js +1 -1
- package/dist-es/pill/Pill.css.js +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-es/pill-input/PillInput.js +5 -3
- package/dist-es/pill-input/PillInput.js.map +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/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +1 -1
- package/dist-es/slider/internal/SliderThumb.css.js +1 -1
- package/dist-es/slider/internal/SliderTooltip.css.js +1 -1
- package/dist-es/slider/internal/SliderTrack.css.js +1 -1
- package/dist-es/spinner/Spinner.css.js +1 -1
- package/dist-es/split-layout/SplitLayout.js +2 -1
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.css.js +1 -1
- package/dist-es/stack-layout/StackLayout.js +4 -2
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/stepper/internal/StepConnector.css.js +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/dist-es/tag/Tag.css.js +1 -1
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/theme/Theme.js.map +1 -1
- package/dist-es/toast/Toast.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-types/aria-announcer/AriaAnnouncerContext.d.ts +2 -2
- package/dist-types/aria-announcer/useAriaAnnouncer.d.ts +2 -2
- package/dist-types/avatar/Avatar.d.ts +1 -1
- package/dist-types/border-item/BorderItem.d.ts +4 -4
- package/dist-types/border-layout/BorderLayout.d.ts +3 -3
- package/dist-types/breakpoints/BreakpointProvider.d.ts +1 -1
- package/dist-types/button/Button.d.ts +3 -3
- package/dist-types/combo-box/ComboBox.d.ts +3 -12
- package/dist-types/combo-box/useComboBox.d.ts +3 -3
- package/dist-types/dialog/DialogContext.d.ts +3 -2
- package/dist-types/dropdown/Dropdown.d.ts +3 -52
- package/dist-types/flex-item/FlexItem.d.ts +4 -4
- package/dist-types/flex-layout/FlexLayout.d.ts +7 -7
- package/dist-types/flow-layout/FlowLayout.d.ts +3 -3
- package/dist-types/form-field/FormField.d.ts +1 -1
- package/dist-types/form-field-context/FormFieldContext.d.ts +1 -1
- package/dist-types/grid-item/GridItem.d.ts +5 -5
- package/dist-types/grid-layout/GridLayout.d.ts +3 -3
- package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +1 -1
- package/dist-types/list-box/ListBox.d.ts +3 -20
- package/dist-types/list-control/ListControlContext.d.ts +1 -1
- package/dist-types/list-control/ListControlState.d.ts +5 -5
- package/dist-types/menu/MenuContext.d.ts +1 -1
- package/dist-types/menu/MenuTrigger.d.ts +1 -1
- package/dist-types/overlay/OverlayContext.d.ts +1 -1
- package/dist-types/overlay/OverlayTrigger.d.ts +1 -1
- package/dist-types/pagination/usePagination.d.ts +1 -1
- package/dist-types/salt-provider/SaltProvider.d.ts +4 -4
- package/dist-types/semantic-icon-provider/SemanticIconProvider.d.ts +1 -1
- package/dist-types/slider/internal/useRangeSliderThumb.d.ts +1 -1
- package/dist-types/slider/internal/useSliderThumb.d.ts +1 -1
- package/dist-types/slider/internal/utils.d.ts +5 -5
- package/dist-types/spinner/Spinner.d.ts +2 -2
- package/dist-types/split-layout/SplitLayout.d.ts +3 -3
- package/dist-types/stack-layout/StackLayout.d.ts +3 -3
- package/dist-types/status-adornment/ErrorAdornment.d.ts +1 -1
- package/dist-types/status-adornment/StatusAdornment.d.ts +1 -1
- package/dist-types/status-adornment/SuccessAdornment.d.ts +1 -1
- package/dist-types/status-adornment/WarningAdornment.d.ts +1 -1
- package/dist-types/status-indicator/ValidationStatus.d.ts +1 -1
- package/dist-types/stepper/Step.d.ts +4 -4
- package/dist-types/stepper/Stepper.d.ts +1 -1
- package/dist-types/text/Text.d.ts +3 -3
- package/dist-types/theme/Accent.d.ts +2 -2
- package/dist-types/theme/ActionFont.d.ts +2 -2
- package/dist-types/theme/Corner.d.ts +2 -2
- package/dist-types/theme/Density.d.ts +1 -1
- package/dist-types/theme/HeadingFont.d.ts +2 -2
- package/dist-types/theme/Mode.d.ts +1 -1
- package/dist-types/theme/Theme.d.ts +3 -3
- package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +1 -1
- package/dist-types/tooltip/useAriaAnnounce.d.ts +1 -1
- package/dist-types/tooltip/useTooltip.d.ts +3 -3
- package/dist-types/types.d.ts +1 -1
- package/dist-types/utils/createChainedFunction.d.ts +1 -1
- package/dist-types/utils/inferElementType.d.ts +1 -1
- package/dist-types/utils/makePrefixer.d.ts +1 -1
- package/dist-types/utils/polymorphicTypes.d.ts +5 -5
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +3 -13
- package/dist-types/utils/useResponsiveProp.d.ts +2 -2
- package/dist-types/utils/useValueEffect.d.ts +1 -1
- package/dist-types/viewport/ViewportProvider.d.ts +1 -1
- package/package.json +1 -1
package/css/salt-core.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* src/accordion/Accordion.css */
|
|
2
2
|
.saltAccordion {
|
|
3
|
-
border-top: var(--salt-size-
|
|
3
|
+
border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
4
4
|
}
|
|
5
5
|
.saltAccordion-error {
|
|
6
6
|
border-top-color: var(--salt-status-error-borderColor);
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
/* src/accordion/AccordionGroup.css */
|
|
19
19
|
.saltAccordionGroup {
|
|
20
|
-
border-bottom: var(--salt-size-
|
|
20
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
/* src/accordion/AccordionHeader.css */
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
color: var(--salt-content-primary-foreground);
|
|
36
36
|
font-weight: var(--salt-text-fontWeight-strong);
|
|
37
37
|
text-align: left;
|
|
38
|
-
cursor: var(--salt-
|
|
38
|
+
cursor: var(--salt-cursor-hover);
|
|
39
39
|
box-sizing: border-box;
|
|
40
40
|
-webkit-tap-highlight-color: transparent;
|
|
41
41
|
}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
.saltAccordionHeader:disabled {
|
|
77
77
|
background: transparent;
|
|
78
78
|
color: var(--salt-content-primary-foreground-disabled);
|
|
79
|
-
cursor: var(--salt-
|
|
79
|
+
cursor: var(--salt-cursor-disabled);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
/* src/accordion/AccordionPanel.css */
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
--banner-background: var(--salt-container-primary-background);
|
|
287
287
|
background: var(--saltBanner-background, var(--banner-background));
|
|
288
288
|
border-color: var(--saltBanner-borderColor, var(--banner-borderColor));
|
|
289
|
-
border-width: var(--saltBanner-borderWidth, var(--salt-size-
|
|
289
|
+
border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));
|
|
290
290
|
border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));
|
|
291
291
|
border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));
|
|
292
292
|
box-sizing: border-box;
|
|
@@ -355,15 +355,15 @@
|
|
|
355
355
|
|
|
356
356
|
/* src/button/Button.css */
|
|
357
357
|
.saltButton {
|
|
358
|
+
--button-borderWidth: var(--salt-size-fixed-100);
|
|
358
359
|
align-items: var(--saltButton-alignItems, center);
|
|
359
360
|
appearance: none;
|
|
360
361
|
background: var(--saltButton-background, var(--button-background));
|
|
361
362
|
border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));
|
|
362
363
|
border-style: var(--saltButton-borderStyle, solid);
|
|
363
|
-
border-width: var(--saltButton-borderWidth, var(--
|
|
364
|
+
border-width: var(--saltButton-borderWidth, var(--button-borderWidth));
|
|
364
365
|
border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));
|
|
365
366
|
color: var(--saltButton-text-color, var(--button-text-color));
|
|
366
|
-
cursor: var(--saltButton-cursor, pointer);
|
|
367
367
|
display: inline-flex;
|
|
368
368
|
gap: var(--salt-spacing-50);
|
|
369
369
|
justify-content: var(--saltButton-justifyContent, center);
|
|
@@ -372,7 +372,7 @@
|
|
|
372
372
|
line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));
|
|
373
373
|
letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));
|
|
374
374
|
text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));
|
|
375
|
-
padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--
|
|
375
|
+
padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));
|
|
376
376
|
margin: var(--saltButton-margin, 0);
|
|
377
377
|
height: var(--saltButton-height, var(--salt-size-base));
|
|
378
378
|
min-width: var(--saltButton-minWidth, unset);
|
|
@@ -399,17 +399,20 @@
|
|
|
399
399
|
background: var(--saltButton-background-active-hover, var(--button-background));
|
|
400
400
|
color: var(--saltButton-text-color-active-hover, var(--button-text-color));
|
|
401
401
|
border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
|
|
402
|
+
cursor: var(--salt-cursor-active);
|
|
402
403
|
}
|
|
403
404
|
.saltButton:hover {
|
|
404
405
|
background: var(--saltButton-background-hover, var(--button-background-hover));
|
|
405
406
|
color: var(--saltButton-text-color-hover, var(--button-text-color-hover));
|
|
406
407
|
border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
|
|
408
|
+
cursor: var(--salt-cursor-hover);
|
|
407
409
|
}
|
|
408
410
|
.saltButton:active,
|
|
409
411
|
.saltButton.saltButton-active {
|
|
410
412
|
background: var(--saltButton-background-active, var(--button-background-active));
|
|
411
413
|
color: var(--saltButton-text-color-active, var(--button-text-color-active));
|
|
412
414
|
border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));
|
|
415
|
+
cursor: var(--salt-cursor-active);
|
|
413
416
|
}
|
|
414
417
|
.saltButton[aria-expanded=true][aria-haspopup=menu],
|
|
415
418
|
.saltButton[aria-expanded=true][aria-haspopup=dialog] {
|
|
@@ -425,7 +428,7 @@
|
|
|
425
428
|
.saltButton-disabled:hover {
|
|
426
429
|
background: var(--saltButton-background-disabled, var(--button-background-disabled));
|
|
427
430
|
color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));
|
|
428
|
-
cursor: var(--saltButton-cursor-disabled, var(--salt-
|
|
431
|
+
cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));
|
|
429
432
|
border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));
|
|
430
433
|
}
|
|
431
434
|
.saltButton-accented.saltButton-solid {
|
|
@@ -483,7 +486,7 @@
|
|
|
483
486
|
--button-borderColor-hover: var(--salt-actionable-accented-borderColor);
|
|
484
487
|
--button-borderColor-active: var(--salt-actionable-accented-borderColor);
|
|
485
488
|
--button-borderColor-disabled: var(--salt-actionable-accented-borderColor);
|
|
486
|
-
cursor:
|
|
489
|
+
cursor: var(--salt-cursor-pending);
|
|
487
490
|
}
|
|
488
491
|
.saltButton-neutral.saltButton-solid {
|
|
489
492
|
--button-text-color: var(--salt-actionable-bold-foreground);
|
|
@@ -540,7 +543,7 @@
|
|
|
540
543
|
--button-borderColor-hover: var(--salt-actionable-borderColor);
|
|
541
544
|
--button-borderColor-active: var(--salt-actionable-borderColor);
|
|
542
545
|
--button-borderColor-disabled: var(--salt-actionable-borderColor);
|
|
543
|
-
cursor:
|
|
546
|
+
cursor: var(--salt-cursor-pending);
|
|
544
547
|
}
|
|
545
548
|
.saltButton-negative.saltButton-solid {
|
|
546
549
|
--button-text-color: var(--salt-actionable-negative-bold-foreground);
|
|
@@ -597,7 +600,7 @@
|
|
|
597
600
|
--button-borderColor-hover: var(--salt-actionable-negative-borderColor);
|
|
598
601
|
--button-borderColor-active: var(--salt-actionable-negative-borderColor);
|
|
599
602
|
--button-borderColor-disabled: var(--salt-actionable-negative-borderColor);
|
|
600
|
-
cursor:
|
|
603
|
+
cursor: var(--salt-cursor-pending);
|
|
601
604
|
}
|
|
602
605
|
.saltButton-positive.saltButton-solid {
|
|
603
606
|
--button-text-color: var(--salt-actionable-positive-bold-foreground);
|
|
@@ -654,7 +657,7 @@
|
|
|
654
657
|
--button-borderColor-hover: var(--salt-actionable-positive-borderColor);
|
|
655
658
|
--button-borderColor-active: var(--salt-actionable-positive-borderColor);
|
|
656
659
|
--button-borderColor-disabled: var(--salt-actionable-positive-borderColor);
|
|
657
|
-
cursor:
|
|
660
|
+
cursor: var(--salt-cursor-pending);
|
|
658
661
|
}
|
|
659
662
|
.saltButton-caution.saltButton-solid {
|
|
660
663
|
--button-text-color: var(--salt-actionable-caution-bold-foreground);
|
|
@@ -711,7 +714,7 @@
|
|
|
711
714
|
--button-borderColor-hover: var(--salt-actionable-caution-borderColor);
|
|
712
715
|
--button-borderColor-active: var(--salt-actionable-caution-borderColor);
|
|
713
716
|
--button-borderColor-disabled: var(--salt-actionable-caution-borderColor);
|
|
714
|
-
cursor:
|
|
717
|
+
cursor: var(--salt-cursor-pending);
|
|
715
718
|
}
|
|
716
719
|
.saltButton strong {
|
|
717
720
|
font-weight: var(--salt-text-action-fontWeight-strong);
|
|
@@ -736,7 +739,7 @@
|
|
|
736
739
|
|
|
737
740
|
/* src/card/Card.css */
|
|
738
741
|
.saltCard {
|
|
739
|
-
border-width: var(--saltCard-borderWidth, var(--salt-size-
|
|
742
|
+
border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));
|
|
740
743
|
border-style: var(--salt-container-borderStyle);
|
|
741
744
|
padding: var(--saltCard-padding, var(--salt-spacing-200));
|
|
742
745
|
position: relative;
|
|
@@ -769,27 +772,27 @@
|
|
|
769
772
|
background-color: var(--saltCard-accent-color, var(--card-accent-color));
|
|
770
773
|
}
|
|
771
774
|
.saltCard-accentBottom::after {
|
|
772
|
-
left: calc(-1 * var(--salt-size-
|
|
773
|
-
bottom: calc(-1 * var(--salt-size-
|
|
775
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
776
|
+
bottom: calc(-1 * var(--salt-size-fixed-100));
|
|
774
777
|
height: var(--salt-size-bar);
|
|
775
|
-
width: calc(100% +
|
|
778
|
+
width: calc(100% + var(--salt-size-fixed-200));
|
|
776
779
|
}
|
|
777
780
|
.saltCard-accentLeft::after {
|
|
778
|
-
left: calc(-1 * var(--salt-size-
|
|
779
|
-
top: calc(-1 * var(--salt-size-
|
|
780
|
-
height: calc(100% +
|
|
781
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
782
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
783
|
+
height: calc(100% + var(--salt-size-fixed-200));
|
|
781
784
|
width: var(--salt-size-bar);
|
|
782
785
|
}
|
|
783
786
|
.saltCard-accentTop::after {
|
|
784
|
-
left: calc(-1 * var(--salt-size-
|
|
785
|
-
top: calc(-1 * var(--salt-size-
|
|
787
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
788
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
786
789
|
height: var(--salt-size-bar);
|
|
787
|
-
width: calc(100% +
|
|
790
|
+
width: calc(100% + var(--salt-size-fixed-200));
|
|
788
791
|
}
|
|
789
792
|
.saltCard-accentRight::after {
|
|
790
|
-
right: calc(-1 * var(--salt-size-
|
|
791
|
-
top: calc(-1 * var(--salt-size-
|
|
792
|
-
height: calc(100% +
|
|
793
|
+
right: calc(-1 * var(--salt-size-fixed-100));
|
|
794
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
795
|
+
height: calc(100% + var(--salt-size-fixed-200));
|
|
793
796
|
width: var(--salt-size-bar);
|
|
794
797
|
}
|
|
795
798
|
.saltCard-interactable {
|
|
@@ -799,7 +802,7 @@
|
|
|
799
802
|
a:focus .saltCard-interactable,
|
|
800
803
|
.saltCard-interactable:hover {
|
|
801
804
|
box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
|
|
802
|
-
cursor: var(--saltCard-cursor-hover, var(--salt-
|
|
805
|
+
cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));
|
|
803
806
|
border-color: var(--salt-actionable-accented-borderColor-hover);
|
|
804
807
|
position: relative;
|
|
805
808
|
}
|
|
@@ -825,7 +828,7 @@ a:focus .saltCard-interactable.saltCard-disabled,
|
|
|
825
828
|
a:focus .saltCard-interactable.saltCard-disabled {
|
|
826
829
|
border-color: var(--salt-container-primary-borderColor-disabled);
|
|
827
830
|
color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));
|
|
828
|
-
cursor: var(--saltCard-cursor-disabled, var(--salt-
|
|
831
|
+
cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));
|
|
829
832
|
outline: none;
|
|
830
833
|
}
|
|
831
834
|
.saltCard-disabled div {
|
|
@@ -837,7 +840,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
837
840
|
display: inline-flex;
|
|
838
841
|
gap: var(--salt-spacing-100);
|
|
839
842
|
position: relative;
|
|
840
|
-
cursor: var(--salt-
|
|
843
|
+
cursor: var(--salt-cursor-hover);
|
|
841
844
|
font-size: var(--salt-text-fontSize);
|
|
842
845
|
line-height: var(--salt-text-lineHeight);
|
|
843
846
|
font-family: var(--salt-text-fontFamily);
|
|
@@ -845,11 +848,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
845
848
|
}
|
|
846
849
|
.saltCheckbox-disabled {
|
|
847
850
|
color: var(--salt-content-primary-foreground-disabled);
|
|
848
|
-
cursor: var(--salt-
|
|
851
|
+
cursor: var(--salt-cursor-disabled);
|
|
849
852
|
}
|
|
850
853
|
.saltCheckbox-readOnly {
|
|
851
854
|
color: var(--salt-content-primary-foreground);
|
|
852
|
-
cursor: var(--salt-
|
|
855
|
+
cursor: var(--salt-cursor-readonly);
|
|
853
856
|
}
|
|
854
857
|
.saltCheckbox-input,
|
|
855
858
|
.saltCheckboxIcon {
|
|
@@ -920,7 +923,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
920
923
|
min-width: var(--checkbox-size);
|
|
921
924
|
height: var(--checkbox-size);
|
|
922
925
|
min-height: var(--checkbox-size);
|
|
923
|
-
border: var(--salt-size-
|
|
926
|
+
border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
|
|
924
927
|
border-radius: var(--salt-palette-corner-weaker, 0);
|
|
925
928
|
color: var(--salt-selectable-foreground);
|
|
926
929
|
background: var(--salt-container-primary-background);
|
|
@@ -1011,7 +1014,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1011
1014
|
overflow-y: auto;
|
|
1012
1015
|
z-index: var(--salt-zIndex-modal);
|
|
1013
1016
|
height: min-content;
|
|
1014
|
-
border: var(--salt-size-
|
|
1017
|
+
border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
1015
1018
|
box-sizing: border-box;
|
|
1016
1019
|
border-radius: var(--salt-palette-corner, 0);
|
|
1017
1020
|
}
|
|
@@ -1127,7 +1130,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1127
1130
|
.saltDialogContent-scroll {
|
|
1128
1131
|
margin-left: var(--salt-spacing-300);
|
|
1129
1132
|
margin-right: var(--salt-spacing-300);
|
|
1130
|
-
border-bottom: var(--salt-size-
|
|
1133
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
1131
1134
|
}
|
|
1132
1135
|
|
|
1133
1136
|
/* src/dialog/DialogHeader.css */
|
|
@@ -1192,10 +1195,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1192
1195
|
border: none;
|
|
1193
1196
|
}
|
|
1194
1197
|
.saltDivider-horizontal {
|
|
1195
|
-
height: var(--salt-size-
|
|
1198
|
+
height: var(--salt-size-fixed-100);
|
|
1196
1199
|
}
|
|
1197
1200
|
.saltDivider-vertical {
|
|
1198
|
-
width: var(--salt-size-
|
|
1201
|
+
width: var(--salt-size-fixed-100);
|
|
1199
1202
|
height: auto;
|
|
1200
1203
|
}
|
|
1201
1204
|
|
|
@@ -1285,9 +1288,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1285
1288
|
min-width: 4em;
|
|
1286
1289
|
width: 100%;
|
|
1287
1290
|
background: var(--dropdown-background);
|
|
1288
|
-
cursor: var(--dropdown-cursor);
|
|
1289
1291
|
min-height: var(--salt-size-base);
|
|
1290
|
-
border: var(--dropdown-border);
|
|
1291
1292
|
border-radius: var(--salt-palette-corner-weak, 0);
|
|
1292
1293
|
display: inline-flex;
|
|
1293
1294
|
align-items: center;
|
|
@@ -1302,11 +1303,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1302
1303
|
overflow: hidden;
|
|
1303
1304
|
}
|
|
1304
1305
|
.saltDropdown:hover {
|
|
1305
|
-
background: var(--
|
|
1306
|
-
cursor: var(--salt-
|
|
1306
|
+
background: var(--dropdown-background-hover);
|
|
1307
|
+
cursor: var(--salt-cursor-hover);
|
|
1307
1308
|
}
|
|
1308
1309
|
.saltDropdown-bordered.saltDropdown {
|
|
1309
|
-
border: var(--salt-size-
|
|
1310
|
+
border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
|
|
1310
1311
|
}
|
|
1311
1312
|
.saltDropdown-bordered.saltDropdown:hover {
|
|
1312
1313
|
border-style: var(--salt-editable-borderStyle-hover);
|
|
@@ -1332,7 +1333,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1332
1333
|
bottom: 0;
|
|
1333
1334
|
width: 100%;
|
|
1334
1335
|
position: absolute;
|
|
1335
|
-
border-bottom: var(--salt-size-
|
|
1336
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
|
|
1336
1337
|
}
|
|
1337
1338
|
.saltDropdown:hover .saltDropdown-activationIndicator {
|
|
1338
1339
|
border-bottom-style: var(--salt-editable-borderStyle-hover);
|
|
@@ -1340,7 +1341,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1340
1341
|
}
|
|
1341
1342
|
.saltDropdown:focus .saltDropdown-activationIndicator,
|
|
1342
1343
|
.saltDropdown:focus:hover .saltDropdown-activationIndicator {
|
|
1343
|
-
border-bottom: var(--salt-size-
|
|
1344
|
+
border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--dropdown-borderColor-active);
|
|
1344
1345
|
}
|
|
1345
1346
|
.saltDropdown[aria-readonly=true] .saltDropdown-activationIndicator,
|
|
1346
1347
|
.saltDropdown[aria-readonly=true]:hover .saltDropdown-activationIndicator {
|
|
@@ -1358,9 +1359,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1358
1359
|
border-bottom-width: 0;
|
|
1359
1360
|
}
|
|
1360
1361
|
.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {
|
|
1361
|
-
border-bottom-width:
|
|
1362
|
+
border-bottom-width: var(--salt-size-fixed-100);
|
|
1362
1363
|
}
|
|
1363
1364
|
.saltDropdown-primary {
|
|
1365
|
+
--dropdown-color: var(--salt-content-primary-foreground);
|
|
1364
1366
|
--dropdown-background: var(--salt-editable-primary-background);
|
|
1365
1367
|
--dropdown-background-active: var(--salt-editable-primary-background-active);
|
|
1366
1368
|
--dropdown-background-hover: var(--salt-editable-primary-background-hover);
|
|
@@ -1372,6 +1374,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1372
1374
|
--dropdown-outlineColor: var(--salt-focused-outlineColor);
|
|
1373
1375
|
}
|
|
1374
1376
|
.saltDropdown-secondary {
|
|
1377
|
+
--dropdown-color: var(--salt-content-primary-foreground);
|
|
1375
1378
|
--dropdown-background: var(--salt-editable-secondary-background);
|
|
1376
1379
|
--dropdown-background-active: var(--salt-editable-secondary-background-active);
|
|
1377
1380
|
--dropdown-background-hover: var(--salt-editable-secondary-background-active);
|
|
@@ -1383,6 +1386,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1383
1386
|
--dropdown-outlineColor: var(--salt-focused-outlineColor);
|
|
1384
1387
|
}
|
|
1385
1388
|
.saltDropdown-error {
|
|
1389
|
+
--dropdown-color: var(--salt-content-primary-foreground);
|
|
1386
1390
|
--dropdown-background: var(--salt-status-error-background);
|
|
1387
1391
|
--dropdown-background-active: var(--salt-status-error-background);
|
|
1388
1392
|
--dropdown-background-hover: var(--salt-status-error-background);
|
|
@@ -1393,6 +1397,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1393
1397
|
--dropdown-outlineColor: var(--salt-status-error-borderColor);
|
|
1394
1398
|
}
|
|
1395
1399
|
.saltDropdown-warning {
|
|
1400
|
+
--dropdown-color: var(--salt-content-primary-foreground);
|
|
1396
1401
|
--dropdown-background: var(--salt-status-warning-background);
|
|
1397
1402
|
--dropdown-background-active: var(--salt-status-warning-background);
|
|
1398
1403
|
--dropdown-background-hover: var(--salt-status-warning-background);
|
|
@@ -1403,6 +1408,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1403
1408
|
--dropdown-outlineColor: var(--salt-status-warning-borderColor);
|
|
1404
1409
|
}
|
|
1405
1410
|
.saltDropdown-success {
|
|
1411
|
+
--dropdown-color: var(--salt-content-primary-foreground);
|
|
1406
1412
|
--dropdown-background: var(--salt-status-success-background);
|
|
1407
1413
|
--dropdown-background-active: var(--salt-status-success-background);
|
|
1408
1414
|
--dropdown-background-hover: var(--salt-status-success-background);
|
|
@@ -1415,17 +1421,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1415
1421
|
.saltDropdown:focus,
|
|
1416
1422
|
.saltDropdown:focus:hover {
|
|
1417
1423
|
background: var(--dropdown-background-active);
|
|
1418
|
-
cursor: var(--salt-
|
|
1424
|
+
cursor: var(--salt-cursor-hover);
|
|
1419
1425
|
outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);
|
|
1420
1426
|
}
|
|
1421
1427
|
.saltDropdown.saltDropdown[aria-readonly=true] {
|
|
1422
1428
|
background: var(--dropdown-background-readonly);
|
|
1423
|
-
cursor: var(--salt-
|
|
1429
|
+
cursor: var(--salt-cursor-readonly);
|
|
1424
1430
|
}
|
|
1425
1431
|
.saltDropdown.saltDropdown:disabled,
|
|
1426
1432
|
.saltDropdown.saltDropdown:disabled:hover {
|
|
1427
1433
|
background: var(--dropdown-background-disabled);
|
|
1428
|
-
cursor: var(--salt-
|
|
1434
|
+
cursor: var(--salt-cursor-disabled);
|
|
1429
1435
|
color: var(--salt-content-primary-foreground-disabled);
|
|
1430
1436
|
}
|
|
1431
1437
|
.saltDropdown-content {
|
|
@@ -1454,7 +1460,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1454
1460
|
text-align: center;
|
|
1455
1461
|
align-items: center;
|
|
1456
1462
|
justify-content: center;
|
|
1457
|
-
border: var(--saltFileDropZone-border, var(--salt-size-
|
|
1463
|
+
border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
|
|
1458
1464
|
border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));
|
|
1459
1465
|
flex-direction: column;
|
|
1460
1466
|
padding: var(--salt-spacing-200);
|
|
@@ -1467,21 +1473,21 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1467
1473
|
}
|
|
1468
1474
|
.saltFileDropZone-active {
|
|
1469
1475
|
background: var(--salt-target-background-hover);
|
|
1470
|
-
border: var(--salt-size-
|
|
1476
|
+
border: var(--salt-size-fixed-200) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);
|
|
1471
1477
|
}
|
|
1472
1478
|
.saltFileDropZone-error {
|
|
1473
|
-
border: var(--salt-size-
|
|
1479
|
+
border: var(--salt-size-fixed-200) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);
|
|
1474
1480
|
}
|
|
1475
1481
|
.saltFileDropZone-success {
|
|
1476
|
-
border: var(--salt-size-
|
|
1482
|
+
border: var(--salt-size-fixed-200) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);
|
|
1477
1483
|
}
|
|
1478
1484
|
.saltFileDropZone .input-hidden {
|
|
1479
1485
|
display: none;
|
|
1480
1486
|
}
|
|
1481
1487
|
.saltFileDropZone-disabled {
|
|
1482
1488
|
background: var(--salt-container-primary-background-disabled);
|
|
1483
|
-
border: var(--salt-size-
|
|
1484
|
-
cursor: var(--salt-
|
|
1489
|
+
border: var(--salt-size-fixed-200) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);
|
|
1490
|
+
cursor: var(--salt-cursor-disabled);
|
|
1485
1491
|
color: var(--salt-content-primary-foreground-disabled);
|
|
1486
1492
|
}
|
|
1487
1493
|
|
|
@@ -1512,7 +1518,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1512
1518
|
--flexLayout-wrap: nowrap;
|
|
1513
1519
|
--flexLayout-justify: flex-start;
|
|
1514
1520
|
--flexLayout-align: stretch;
|
|
1515
|
-
--flexLayout-separator: var(--salt-size-
|
|
1521
|
+
--flexLayout-separator: var(--salt-size-fixed-100);
|
|
1516
1522
|
}
|
|
1517
1523
|
.saltFlexLayout {
|
|
1518
1524
|
gap: var(--flexLayout-gap);
|
|
@@ -1723,10 +1729,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1723
1729
|
}
|
|
1724
1730
|
.saltInput:hover {
|
|
1725
1731
|
background: var(--saltInput-background-hover, var(--input-background-hover));
|
|
1726
|
-
cursor: var(--salt-
|
|
1732
|
+
cursor: var(--salt-cursor-text);
|
|
1727
1733
|
}
|
|
1728
1734
|
.saltInput-bordered.saltInput {
|
|
1729
|
-
border: var(--salt-size-
|
|
1735
|
+
border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--input-borderColor);
|
|
1730
1736
|
}
|
|
1731
1737
|
.saltInput-bordered.saltInput:hover {
|
|
1732
1738
|
border-style: var(--salt-editable-borderStyle-hover);
|
|
@@ -1752,7 +1758,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1752
1758
|
bottom: 0;
|
|
1753
1759
|
width: 100%;
|
|
1754
1760
|
position: absolute;
|
|
1755
|
-
border-bottom: var(--salt-size-
|
|
1761
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--input-borderColor);
|
|
1756
1762
|
}
|
|
1757
1763
|
.saltInput:hover .saltInput-activationIndicator {
|
|
1758
1764
|
border-bottom-style: var(--salt-editable-borderStyle-hover);
|
|
@@ -1760,7 +1766,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1760
1766
|
}
|
|
1761
1767
|
.saltInput-focused .saltInput-activationIndicator,
|
|
1762
1768
|
.saltInput-focused:hover .saltInput-activationIndicator {
|
|
1763
|
-
border-bottom: var(--salt-size-
|
|
1769
|
+
border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);
|
|
1764
1770
|
}
|
|
1765
1771
|
.saltInput-readOnly .saltInput-activationIndicator,
|
|
1766
1772
|
.saltInput-readOnly:hover .saltInput-activationIndicator {
|
|
@@ -1778,7 +1784,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1778
1784
|
border-bottom-width: 0;
|
|
1779
1785
|
}
|
|
1780
1786
|
.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {
|
|
1781
|
-
border-bottom-width:
|
|
1787
|
+
border-bottom-width: var(--salt-size-fixed-100);
|
|
1782
1788
|
}
|
|
1783
1789
|
.saltInput-primary {
|
|
1784
1790
|
--input-background: var(--salt-editable-primary-background);
|
|
@@ -1835,17 +1841,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1835
1841
|
.saltInput-focused,
|
|
1836
1842
|
.saltInput-focused:hover {
|
|
1837
1843
|
background: var(--saltInput-background-active, var(--input-background-active));
|
|
1838
|
-
cursor: var(--salt-
|
|
1844
|
+
cursor: var(--salt-cursor-text);
|
|
1839
1845
|
outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
|
|
1840
1846
|
}
|
|
1841
1847
|
.saltInput.saltInput-readOnly {
|
|
1842
1848
|
background: var(--input-background-readonly);
|
|
1843
|
-
cursor: var(--salt-
|
|
1849
|
+
cursor: var(--salt-cursor-readonly);
|
|
1844
1850
|
}
|
|
1845
1851
|
.saltInput.saltInput-disabled,
|
|
1846
1852
|
.saltInput.saltInput-disabled:hover {
|
|
1847
1853
|
background: var(--input-background-disabled);
|
|
1848
|
-
cursor: var(--salt-
|
|
1854
|
+
cursor: var(--salt-cursor-disabled);
|
|
1849
1855
|
color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));
|
|
1850
1856
|
}
|
|
1851
1857
|
.saltInput-startAdornmentContainer {
|
|
@@ -1877,7 +1883,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1877
1883
|
}
|
|
1878
1884
|
.saltInput-startAdornmentContainer > .saltButton,
|
|
1879
1885
|
.saltInput-endAdornmentContainer > .saltButton {
|
|
1880
|
-
--saltButton-padding: calc(var(--salt-spacing-50) - var(--
|
|
1886
|
+
--saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
|
|
1881
1887
|
--saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
1882
1888
|
--saltButton-borderRadius: var(--salt-palette-corner-weaker);
|
|
1883
1889
|
}
|
|
@@ -1915,7 +1921,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1915
1921
|
|
|
1916
1922
|
/* src/interactable-card/InteractableCard.css */
|
|
1917
1923
|
.saltInteractableCard {
|
|
1918
|
-
border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-
|
|
1924
|
+
border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100));
|
|
1919
1925
|
border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));
|
|
1920
1926
|
border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));
|
|
1921
1927
|
box-shadow: var(--salt-overlayable-shadow);
|
|
@@ -1945,31 +1951,31 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1945
1951
|
background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));
|
|
1946
1952
|
}
|
|
1947
1953
|
.saltInteractableCard-accentBottom::after {
|
|
1948
|
-
left: calc(-1 * var(--salt-size-
|
|
1949
|
-
bottom: calc(-1 * var(--salt-size-
|
|
1954
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
1955
|
+
bottom: calc(-1 * var(--salt-size-fixed-100));
|
|
1950
1956
|
height: var(--salt-size-bar);
|
|
1951
|
-
width: calc(100% +
|
|
1957
|
+
width: calc(100% + var(--salt-size-fixed-200));
|
|
1952
1958
|
}
|
|
1953
1959
|
.saltInteractableCard-accentLeft::after {
|
|
1954
|
-
left: calc(-1 * var(--salt-size-
|
|
1955
|
-
top: calc(-1 * var(--salt-size-
|
|
1956
|
-
height: calc(100% +
|
|
1960
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
1961
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
1962
|
+
height: calc(100% + var(--salt-size-fixed-200));
|
|
1957
1963
|
width: var(--salt-size-bar);
|
|
1958
1964
|
}
|
|
1959
1965
|
.saltInteractableCard-accentTop::after {
|
|
1960
|
-
left: calc(-1 * var(--salt-size-
|
|
1961
|
-
top: calc(-1 * var(--salt-size-
|
|
1966
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
1967
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
1962
1968
|
height: var(--salt-size-bar);
|
|
1963
|
-
width: calc(100% +
|
|
1969
|
+
width: calc(100% + var(--salt-size-fixed-200));
|
|
1964
1970
|
}
|
|
1965
1971
|
.saltInteractableCard-accentRight::after {
|
|
1966
|
-
right: calc(-1 * var(--salt-size-
|
|
1967
|
-
top: calc(-1 * var(--salt-size-
|
|
1968
|
-
height: calc(100% +
|
|
1972
|
+
right: calc(-1 * var(--salt-size-fixed-100));
|
|
1973
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
1974
|
+
height: calc(100% + var(--salt-size-fixed-200));
|
|
1969
1975
|
width: var(--salt-size-bar);
|
|
1970
1976
|
}
|
|
1971
1977
|
.saltInteractableCard:focus-visible {
|
|
1972
|
-
cursor: var(--salt-
|
|
1978
|
+
cursor: var(--salt-cursor-hover);
|
|
1973
1979
|
box-shadow: var(--salt-overlayable-shadow-hover);
|
|
1974
1980
|
color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));
|
|
1975
1981
|
outline-color: var(--salt-focused-outlineColor);
|
|
@@ -1979,19 +1985,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1979
1985
|
}
|
|
1980
1986
|
@media (hover: hover) {
|
|
1981
1987
|
.saltInteractableCard:hover {
|
|
1982
|
-
cursor: var(--salt-
|
|
1988
|
+
cursor: var(--salt-cursor-hover);
|
|
1983
1989
|
box-shadow: var(--salt-overlayable-shadow-hover);
|
|
1984
1990
|
border-color: var(--salt-actionable-accented-borderColor-hover);
|
|
1985
1991
|
}
|
|
1986
1992
|
.saltInteractableCard-disabled:hover {
|
|
1987
|
-
cursor: var(--salt-
|
|
1993
|
+
cursor: var(--salt-cursor-disabled);
|
|
1988
1994
|
box-shadow: none;
|
|
1989
1995
|
}
|
|
1990
1996
|
}
|
|
1991
1997
|
.saltInteractableCard-selected,
|
|
1992
1998
|
.saltInteractableCard:active,
|
|
1993
1999
|
.saltInteractableCard-active {
|
|
1994
|
-
cursor: var(--salt-
|
|
2000
|
+
cursor: var(--salt-cursor-hover);
|
|
1995
2001
|
box-shadow: var(--salt-overlayable-shadow);
|
|
1996
2002
|
border-color: var(--salt-actionable-accented-borderColor-active);
|
|
1997
2003
|
}
|
|
@@ -2000,7 +2006,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2000
2006
|
.saltInteractableCard-disabled:active {
|
|
2001
2007
|
box-shadow: none;
|
|
2002
2008
|
color: var(--salt-content-primary-foreground-disabled);
|
|
2003
|
-
cursor: var(--salt-
|
|
2009
|
+
cursor: var(--salt-cursor-disabled);
|
|
2004
2010
|
outline: none;
|
|
2005
2011
|
--card-accent-color: var(--salt-accent-background-disabled);
|
|
2006
2012
|
}
|
|
@@ -2129,7 +2135,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2129
2135
|
.saltLinkCard {
|
|
2130
2136
|
border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));
|
|
2131
2137
|
border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));
|
|
2132
|
-
border-width: var(--saltLinkCard-borderWidth, var(--salt-size-
|
|
2138
|
+
border-width: var(--saltLinkCard-borderWidth, var(--salt-size-fixed-100));
|
|
2133
2139
|
box-shadow: var(--salt-overlayable-shadow);
|
|
2134
2140
|
display: block;
|
|
2135
2141
|
overflow: hidden;
|
|
@@ -2157,31 +2163,31 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2157
2163
|
background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));
|
|
2158
2164
|
}
|
|
2159
2165
|
.saltLinkCard-accentBottom::after {
|
|
2160
|
-
left: calc(-1 * var(--salt-size-
|
|
2161
|
-
bottom: calc(-1 * var(--salt-size-
|
|
2166
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
2167
|
+
bottom: calc(-1 * var(--salt-size-fixed-100));
|
|
2162
2168
|
height: var(--salt-size-bar);
|
|
2163
|
-
width: calc(100% +
|
|
2169
|
+
width: calc(100% + var(--salt-size-fixed-200));
|
|
2164
2170
|
}
|
|
2165
2171
|
.saltLinkCard-accentLeft::after {
|
|
2166
|
-
left: calc(-1 * var(--salt-size-
|
|
2167
|
-
top: calc(-1 * var(--salt-size-
|
|
2168
|
-
height: calc(100% +
|
|
2172
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
2173
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
2174
|
+
height: calc(100% + var(--salt-size-fixed-200));
|
|
2169
2175
|
width: var(--salt-size-bar);
|
|
2170
2176
|
}
|
|
2171
2177
|
.saltLinkCard-accentTop::after {
|
|
2172
|
-
left: calc(-1 * var(--salt-size-
|
|
2173
|
-
top: calc(-1 * var(--salt-size-
|
|
2178
|
+
left: calc(-1 * var(--salt-size-fixed-100));
|
|
2179
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
2174
2180
|
height: var(--salt-size-bar);
|
|
2175
|
-
width: calc(100% +
|
|
2181
|
+
width: calc(100% + var(--salt-size-fixed-200));
|
|
2176
2182
|
}
|
|
2177
2183
|
.saltLinkCard-accentRight::after {
|
|
2178
|
-
right: calc(-1 * var(--salt-size-
|
|
2179
|
-
top: calc(-1 * var(--salt-size-
|
|
2180
|
-
height: calc(100% +
|
|
2184
|
+
right: calc(-1 * var(--salt-size-fixed-100));
|
|
2185
|
+
top: calc(-1 * var(--salt-size-fixed-100));
|
|
2186
|
+
height: calc(100% + var(--salt-size-fixed-200));
|
|
2181
2187
|
width: var(--salt-size-bar);
|
|
2182
2188
|
}
|
|
2183
2189
|
.saltLinkCard:focus-visible {
|
|
2184
|
-
cursor: var(--salt-
|
|
2190
|
+
cursor: var(--salt-cursor-hover);
|
|
2185
2191
|
box-shadow: var(--salt-overlayable-shadow-hover);
|
|
2186
2192
|
outline-color: var(--salt-focused-outlineColor);
|
|
2187
2193
|
outline-style: var(--salt-focused-outlineStyle);
|
|
@@ -2191,13 +2197,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2191
2197
|
}
|
|
2192
2198
|
@media (hover: hover) {
|
|
2193
2199
|
.saltLinkCard:hover {
|
|
2194
|
-
cursor: var(--salt-
|
|
2200
|
+
cursor: var(--salt-cursor-hover);
|
|
2195
2201
|
box-shadow: var(--salt-overlayable-shadow-hover);
|
|
2196
2202
|
border-color: var(--salt-actionable-accented-borderColor-hover);
|
|
2197
2203
|
}
|
|
2198
2204
|
}
|
|
2199
2205
|
.saltLinkCard:active {
|
|
2200
|
-
cursor: var(--salt-
|
|
2206
|
+
cursor: var(--salt-cursor-active);
|
|
2201
2207
|
border-color: var(--salt-actionable-accented-borderColor-active);
|
|
2202
2208
|
box-shadow: var(--salt-overlayable-shadow);
|
|
2203
2209
|
}
|
|
@@ -2206,7 +2212,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2206
2212
|
.saltListBox {
|
|
2207
2213
|
display: flex;
|
|
2208
2214
|
flex-direction: column;
|
|
2209
|
-
gap: var(--salt-
|
|
2215
|
+
gap: var(--salt-spacing-fixed-100);
|
|
2210
2216
|
background: var(--salt-container-primary-background);
|
|
2211
2217
|
overflow: auto;
|
|
2212
2218
|
padding-top: 1px;
|
|
@@ -2217,7 +2223,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2217
2223
|
max-height: inherit;
|
|
2218
2224
|
}
|
|
2219
2225
|
.saltListBox-bordered {
|
|
2220
|
-
border: var(--salt-size-
|
|
2226
|
+
border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
|
|
2221
2227
|
border-radius: var(--salt-palette-corner, 0);
|
|
2222
2228
|
}
|
|
2223
2229
|
.saltListBox:focus-visible {
|
|
@@ -2239,7 +2245,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2239
2245
|
box-sizing: border-box;
|
|
2240
2246
|
}
|
|
2241
2247
|
.saltMenuGroup {
|
|
2242
|
-
border-top: var(--salt-size-
|
|
2248
|
+
border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
2243
2249
|
}
|
|
2244
2250
|
.saltMenuGroup:first-of-type {
|
|
2245
2251
|
border-top: 0;
|
|
@@ -2259,13 +2265,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2259
2265
|
display: flex;
|
|
2260
2266
|
gap: var(--salt-spacing-100);
|
|
2261
2267
|
position: relative;
|
|
2262
|
-
cursor: var(--salt-
|
|
2268
|
+
cursor: var(--salt-cursor-hover);
|
|
2263
2269
|
box-sizing: border-box;
|
|
2264
2270
|
flex-shrink: 0;
|
|
2265
2271
|
}
|
|
2266
2272
|
.saltMenuItem:focus-visible {
|
|
2267
2273
|
outline: var(--salt-focused-outline);
|
|
2268
|
-
outline-offset: calc(var(--salt-size-
|
|
2274
|
+
outline-offset: calc(var(--salt-size-fixed-100) * -2);
|
|
2269
2275
|
}
|
|
2270
2276
|
.saltMenuItem:hover {
|
|
2271
2277
|
outline: none;
|
|
@@ -2276,20 +2282,20 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2276
2282
|
}
|
|
2277
2283
|
.saltMenuItem:active {
|
|
2278
2284
|
background: var(--salt-selectable-background-selected);
|
|
2279
|
-
box-shadow: 0 calc(var(--salt-size-
|
|
2285
|
+
box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
|
|
2280
2286
|
}
|
|
2281
2287
|
.saltMenuItem[aria-disabled=true],
|
|
2282
2288
|
.saltMenuItem[aria-disabled=true]:active {
|
|
2283
2289
|
background: var(--salt-selectable-background-disabled);
|
|
2284
2290
|
color: var(--salt-content-primary-foreground-disabled);
|
|
2285
|
-
cursor: var(--salt-
|
|
2291
|
+
cursor: var(--salt-cursor-disabled);
|
|
2286
2292
|
box-shadow: none;
|
|
2287
2293
|
}
|
|
2288
2294
|
.saltMenuItem-blurActive {
|
|
2289
2295
|
z-index: var(--salt-zIndex-default);
|
|
2290
2296
|
background: var(--salt-selectable-background-selected);
|
|
2291
|
-
box-shadow: 0 calc(var(--salt-size-
|
|
2292
|
-
box-shadow: 0 calc(var(--salt-size-
|
|
2297
|
+
box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
|
|
2298
|
+
box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
|
|
2293
2299
|
}
|
|
2294
2300
|
.saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {
|
|
2295
2301
|
min-height: var(--salt-text-lineHeight);
|
|
@@ -2301,7 +2307,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2301
2307
|
/* src/menu/MenuPanel.css */
|
|
2302
2308
|
.saltMenuPanel {
|
|
2303
2309
|
background: var(--salt-container-primary-background);
|
|
2304
|
-
border: var(--salt-size-
|
|
2310
|
+
border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
|
|
2305
2311
|
overflow: hidden;
|
|
2306
2312
|
overflow-y: auto;
|
|
2307
2313
|
min-width: 10em;
|
|
@@ -2314,7 +2320,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2314
2320
|
.saltMenuPanel-container {
|
|
2315
2321
|
display: flex;
|
|
2316
2322
|
flex-direction: column;
|
|
2317
|
-
gap: var(--salt-
|
|
2323
|
+
gap: var(--salt-spacing-fixed-100);
|
|
2318
2324
|
max-height: inherit;
|
|
2319
2325
|
min-height: inherit;
|
|
2320
2326
|
}
|
|
@@ -2345,10 +2351,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2345
2351
|
}
|
|
2346
2352
|
.saltMultilineInput:hover {
|
|
2347
2353
|
background: var(--multilineInput-background-hover);
|
|
2348
|
-
cursor: var(--salt-
|
|
2354
|
+
cursor: var(--salt-cursor-text);
|
|
2349
2355
|
}
|
|
2350
2356
|
.saltMultilineInput-bordered.saltMultilineInput {
|
|
2351
|
-
border: var(--salt-size-
|
|
2357
|
+
border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--multilineInput-borderColor);
|
|
2352
2358
|
}
|
|
2353
2359
|
.saltMultilineInput-bordered.saltMultilineInput:hover {
|
|
2354
2360
|
border-style: var(--salt-editable-borderStyle-hover);
|
|
@@ -2374,7 +2380,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2374
2380
|
bottom: 0;
|
|
2375
2381
|
width: 100%;
|
|
2376
2382
|
position: absolute;
|
|
2377
|
-
border-bottom: var(--salt-size-
|
|
2383
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--multilineInput-borderColor);
|
|
2378
2384
|
}
|
|
2379
2385
|
.saltMultilineInput:hover .saltMultilineInput-activationIndicator {
|
|
2380
2386
|
border-bottom-style: var(--salt-editable-borderStyle-hover);
|
|
@@ -2382,7 +2388,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2382
2388
|
}
|
|
2383
2389
|
.saltMultilineInput-focused .saltMultilineInput-activationIndicator,
|
|
2384
2390
|
.saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {
|
|
2385
|
-
border-bottom: var(--salt-size-
|
|
2391
|
+
border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--multilineInput-borderColor-active);
|
|
2386
2392
|
}
|
|
2387
2393
|
.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,
|
|
2388
2394
|
.saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {
|
|
@@ -2400,7 +2406,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2400
2406
|
border-bottom-width: 0;
|
|
2401
2407
|
}
|
|
2402
2408
|
.saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-activationIndicator {
|
|
2403
|
-
border-bottom-width:
|
|
2409
|
+
border-bottom-width: var(--salt-size-fixed-100);
|
|
2404
2410
|
}
|
|
2405
2411
|
.saltMultilineInput-primary {
|
|
2406
2412
|
--multilineInput-background: var(--salt-editable-primary-background);
|
|
@@ -2457,17 +2463,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2457
2463
|
.saltMultilineInput-focused,
|
|
2458
2464
|
.saltMultilineInput-focused:hover {
|
|
2459
2465
|
background: var(--multilineInput-background-active);
|
|
2460
|
-
cursor: var(--salt-
|
|
2466
|
+
cursor: var(--salt-cursor-text);
|
|
2461
2467
|
outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);
|
|
2462
2468
|
}
|
|
2463
2469
|
.saltMultilineInput.saltMultilineInput-readOnly {
|
|
2464
2470
|
background: var(--multilineInput-background-readonly);
|
|
2465
|
-
cursor: var(--salt-
|
|
2471
|
+
cursor: var(--salt-cursor-readonly);
|
|
2466
2472
|
}
|
|
2467
2473
|
.saltMultilineInput.saltMultilineInput-disabled,
|
|
2468
2474
|
.saltMultilineInput.saltMultilineInput-disabled:hover {
|
|
2469
2475
|
background: var(--input-background-disabled);
|
|
2470
|
-
cursor: var(--salt-
|
|
2476
|
+
cursor: var(--salt-cursor-disabled);
|
|
2471
2477
|
color: var(--salt-content-primary-foreground-disabled);
|
|
2472
2478
|
}
|
|
2473
2479
|
.saltMultilineInput.saltMultilineInput-withAdornmentRow {
|
|
@@ -2512,7 +2518,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2512
2518
|
}
|
|
2513
2519
|
.saltMultilineInput-startAdornmentContainer > .saltButton,
|
|
2514
2520
|
.saltMultilineInput-endAdornmentContainer > .saltButton {
|
|
2515
|
-
--saltButton-padding: calc(var(--salt-spacing-50) - var(--
|
|
2521
|
+
--saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
|
|
2516
2522
|
--saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
2517
2523
|
--saltButton-borderRadius: var(--salt-palette-corner-weaker);
|
|
2518
2524
|
}
|
|
@@ -2564,7 +2570,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2564
2570
|
font: inherit;
|
|
2565
2571
|
color: inherit;
|
|
2566
2572
|
text-decoration: none;
|
|
2567
|
-
cursor: var(--salt-
|
|
2573
|
+
cursor: var(--salt-cursor-hover);
|
|
2568
2574
|
transition: all var(--salt-duration-instant) ease-in-out;
|
|
2569
2575
|
box-sizing: border-box;
|
|
2570
2576
|
}
|
|
@@ -2666,7 +2672,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2666
2672
|
display: flex;
|
|
2667
2673
|
gap: var(--salt-spacing-100);
|
|
2668
2674
|
position: relative;
|
|
2669
|
-
cursor: var(--salt-
|
|
2675
|
+
cursor: var(--salt-cursor-hover);
|
|
2670
2676
|
box-sizing: border-box;
|
|
2671
2677
|
flex-shrink: 0;
|
|
2672
2678
|
}
|
|
@@ -2675,7 +2681,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2675
2681
|
}
|
|
2676
2682
|
.saltOption-focusVisible {
|
|
2677
2683
|
outline: var(--salt-focused-outline);
|
|
2678
|
-
outline-offset: calc(var(--salt-size-
|
|
2684
|
+
outline-offset: calc(var(--salt-size-fixed-100) * -2);
|
|
2679
2685
|
}
|
|
2680
2686
|
.saltOption:hover {
|
|
2681
2687
|
background: var(--salt-selectable-background-hover);
|
|
@@ -2684,13 +2690,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2684
2690
|
z-index: var(--salt-zIndex-default);
|
|
2685
2691
|
background: var(--salt-selectable-background-selected);
|
|
2686
2692
|
box-shadow:
|
|
2687
|
-
calc(var(--salt-size-
|
|
2688
|
-
calc(var(--salt-size-
|
|
2689
|
-
0 calc(var(--salt-size-
|
|
2693
|
+
calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),
|
|
2694
|
+
calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),
|
|
2695
|
+
0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
|
|
2690
2696
|
}
|
|
2691
2697
|
.saltOption[aria-disabled=true] {
|
|
2692
2698
|
color: var(--salt-content-primary-foreground-disabled);
|
|
2693
|
-
cursor: var(--salt-
|
|
2699
|
+
cursor: var(--salt-cursor-disabled);
|
|
2694
2700
|
}
|
|
2695
2701
|
.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {
|
|
2696
2702
|
min-height: var(--salt-text-lineHeight);
|
|
@@ -2711,7 +2717,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2711
2717
|
box-sizing: border-box;
|
|
2712
2718
|
}
|
|
2713
2719
|
.saltOptionGroup {
|
|
2714
|
-
border-top: var(--salt-size-
|
|
2720
|
+
border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
2715
2721
|
}
|
|
2716
2722
|
.saltOptionGroup:first-of-type {
|
|
2717
2723
|
border-top: 0;
|
|
@@ -2720,7 +2726,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2720
2726
|
/* src/option/OptionList.css */
|
|
2721
2727
|
.saltOptionList {
|
|
2722
2728
|
background: var(--salt-container-primary-background);
|
|
2723
|
-
border: var(--salt-size-
|
|
2729
|
+
border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
|
|
2724
2730
|
border-radius: var(--salt-palette-corner, 0);
|
|
2725
2731
|
overflow: hidden;
|
|
2726
2732
|
overflow-y: auto;
|
|
@@ -2732,7 +2738,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2732
2738
|
.saltOptionList-container {
|
|
2733
2739
|
display: flex;
|
|
2734
2740
|
flex-direction: column;
|
|
2735
|
-
gap: var(--salt-
|
|
2741
|
+
gap: var(--salt-spacing-fixed-100);
|
|
2736
2742
|
max-height: inherit;
|
|
2737
2743
|
min-height: inherit;
|
|
2738
2744
|
}
|
|
@@ -2779,7 +2785,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2779
2785
|
line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));
|
|
2780
2786
|
border-color: var(--overlay-borderColor);
|
|
2781
2787
|
border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));
|
|
2782
|
-
border-width: var(--saltOverlay-borderWidth, var(--salt-size-
|
|
2788
|
+
border-width: var(--saltOverlay-borderWidth, var(--salt-size-fixed-100));
|
|
2783
2789
|
border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));
|
|
2784
2790
|
background: var(--overlay-background);
|
|
2785
2791
|
box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
|
|
@@ -2812,12 +2818,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2812
2818
|
}
|
|
2813
2819
|
.saltOverlayPanelContent-overflow {
|
|
2814
2820
|
padding-right: var(--salt-spacing-100);
|
|
2815
|
-
border-top: var(--salt-size-
|
|
2816
|
-
border-bottom: var(--salt-size-
|
|
2821
|
+
border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) transparent;
|
|
2822
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) transparent;
|
|
2817
2823
|
overflow-y: auto;
|
|
2818
2824
|
}
|
|
2819
2825
|
.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {
|
|
2820
|
-
border-top: var(--salt-size-
|
|
2826
|
+
border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
2821
2827
|
}
|
|
2822
2828
|
|
|
2823
2829
|
/* src/pagination/CompactInput.css */
|
|
@@ -2876,7 +2882,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2876
2882
|
font-family: var(--salt-text-fontFamily);
|
|
2877
2883
|
line-height: var(--salt-text-lineHeight);
|
|
2878
2884
|
letter-spacing: var(--salt-text-letterSpacing);
|
|
2879
|
-
cursor: var(--salt-
|
|
2885
|
+
cursor: var(--salt-cursor-hover);
|
|
2880
2886
|
border-radius: var(--salt-palette-corner-weak, 0);
|
|
2881
2887
|
}
|
|
2882
2888
|
.saltPageButton:hover,
|
|
@@ -2892,10 +2898,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2892
2898
|
.saltPageButton:disabled {
|
|
2893
2899
|
color: var(--salt-content-secondary-foreground);
|
|
2894
2900
|
background: var(--salt-selectable-background);
|
|
2895
|
-
cursor: var(--salt-
|
|
2901
|
+
cursor: var(--salt-cursor-readonly);
|
|
2896
2902
|
}
|
|
2897
2903
|
.saltPageButton[aria-current=page] {
|
|
2898
|
-
border: var(--salt-size-
|
|
2904
|
+
border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
|
|
2899
2905
|
background: var(--salt-selectable-background-selected);
|
|
2900
2906
|
}
|
|
2901
2907
|
.saltPageButton-fixed {
|
|
@@ -2979,19 +2985,20 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
2979
2985
|
|
|
2980
2986
|
/* src/pill/Pill.css */
|
|
2981
2987
|
.saltPill {
|
|
2988
|
+
--pill-borderWidth: var(--salt-size-fixed-100);
|
|
2982
2989
|
appearance: none;
|
|
2983
2990
|
display: inline-flex;
|
|
2984
2991
|
align-items: center;
|
|
2985
2992
|
background: var(--saltPill-background, var(--pill-background));
|
|
2986
2993
|
border-radius: var(--salt-palette-corner-weaker, 0);
|
|
2987
2994
|
border-style: solid;
|
|
2988
|
-
border-width: var(--
|
|
2995
|
+
border-width: var(--pill-borderWidth);
|
|
2989
2996
|
border-color: var(--pill-borderColor);
|
|
2990
2997
|
height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
2991
2998
|
min-height: var(--salt-text-minHeight);
|
|
2992
2999
|
position: relative;
|
|
2993
3000
|
gap: var(--salt-spacing-50);
|
|
2994
|
-
padding: 0 calc(var(--salt-spacing-50) - var(--
|
|
3001
|
+
padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));
|
|
2995
3002
|
color: var(--saltPill-color, var(--pill-color));
|
|
2996
3003
|
font-family: var(--salt-text-fontFamily);
|
|
2997
3004
|
font-size: var(--salt-text-fontSize);
|
|
@@ -3005,7 +3012,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3005
3012
|
--pill-background: var(--salt-actionable-bold-background);
|
|
3006
3013
|
--pill-color: var(--salt-actionable-bold-foreground);
|
|
3007
3014
|
--pill-borderColor: var(--salt-actionable-bold-borderColor);
|
|
3008
|
-
cursor: var(--salt-
|
|
3015
|
+
cursor: var(--salt-cursor-hover);
|
|
3009
3016
|
}
|
|
3010
3017
|
.saltPill-clickable:hover,
|
|
3011
3018
|
.saltPill-clickable:focus-visible {
|
|
@@ -3032,7 +3039,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3032
3039
|
--pill-color: var(--salt-actionable-bold-foreground-disabled);
|
|
3033
3040
|
--pill-background: var(--salt-actionable-bold-background-disabled);
|
|
3034
3041
|
--pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);
|
|
3035
|
-
cursor: var(--salt-
|
|
3042
|
+
cursor: var(--salt-cursor-disabled);
|
|
3036
3043
|
}
|
|
3037
3044
|
|
|
3038
3045
|
/* src/pill-input/PillInput.css */
|
|
@@ -3063,10 +3070,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3063
3070
|
}
|
|
3064
3071
|
.saltPillInput:hover {
|
|
3065
3072
|
background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));
|
|
3066
|
-
cursor: var(--salt-
|
|
3073
|
+
cursor: var(--salt-cursor-text);
|
|
3067
3074
|
}
|
|
3068
3075
|
.saltPillInput-bordered.saltPillInput {
|
|
3069
|
-
|
|
3076
|
+
--pillInput-borderWidth: var(--salt-size-fixed-100);
|
|
3077
|
+
border: var(--pillInput-borderWidth) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
|
|
3070
3078
|
}
|
|
3071
3079
|
.saltPillInput-bordered.saltPillInput:hover {
|
|
3072
3080
|
border-style: var(--salt-editable-borderStyle-hover);
|
|
@@ -3074,7 +3082,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3074
3082
|
}
|
|
3075
3083
|
.saltPillInput-bordered.saltPillInput-focused,
|
|
3076
3084
|
.saltPillInput-bordered:active {
|
|
3077
|
-
--pillInput-borderWidth: calc(var(--salt-
|
|
3085
|
+
--pillInput-borderWidth: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));
|
|
3078
3086
|
}
|
|
3079
3087
|
.saltPillInput-bordered.saltPillInput-focused,
|
|
3080
3088
|
.saltPillInput-bordered.saltPillInput-focused:hover {
|
|
@@ -3096,7 +3104,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3096
3104
|
bottom: 0;
|
|
3097
3105
|
width: 100%;
|
|
3098
3106
|
position: absolute;
|
|
3099
|
-
border-bottom: var(--salt-size-
|
|
3107
|
+
border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
|
|
3100
3108
|
}
|
|
3101
3109
|
.saltPillInput:hover .saltPillInput-activationIndicator {
|
|
3102
3110
|
border-bottom-style: var(--salt-editable-borderStyle-hover);
|
|
@@ -3104,7 +3112,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3104
3112
|
}
|
|
3105
3113
|
.saltPillInput-focused .saltPillInput-activationIndicator,
|
|
3106
3114
|
.saltPillInput-focused:hover .saltPillInput-activationIndicator {
|
|
3107
|
-
border-bottom: var(--salt-size-
|
|
3115
|
+
border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--pillInput-borderColor-active);
|
|
3108
3116
|
}
|
|
3109
3117
|
.saltPillInput-readOnly .saltPillInput-activationIndicator,
|
|
3110
3118
|
.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {
|
|
@@ -3122,7 +3130,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3122
3130
|
border-bottom-width: 0;
|
|
3123
3131
|
}
|
|
3124
3132
|
.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {
|
|
3125
|
-
border-bottom-width: calc(var(--salt-size-
|
|
3133
|
+
border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));
|
|
3126
3134
|
}
|
|
3127
3135
|
.saltPillInput-primary {
|
|
3128
3136
|
--pillInput-background: var(--salt-editable-primary-background);
|
|
@@ -3181,17 +3189,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3181
3189
|
.saltPillInput-focused,
|
|
3182
3190
|
.saltPillInput-focused:hover {
|
|
3183
3191
|
background: var(--saltPillInput-background-active, var(--pillInput-background-active));
|
|
3184
|
-
cursor: var(--salt-
|
|
3192
|
+
cursor: var(--salt-cursor-text);
|
|
3185
3193
|
outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
|
|
3186
3194
|
}
|
|
3187
3195
|
.saltPillInput.saltPillInput-readOnly {
|
|
3188
3196
|
background: var(--pillInput-background-readonly);
|
|
3189
|
-
cursor: var(--salt-
|
|
3197
|
+
cursor: var(--salt-cursor-readonly);
|
|
3190
3198
|
}
|
|
3191
3199
|
.saltPillInput-disabled,
|
|
3192
3200
|
.saltPillInput-disabled:hover {
|
|
3193
3201
|
background: var(--pillInput-background-disabled);
|
|
3194
|
-
cursor: var(--salt-
|
|
3202
|
+
cursor: var(--salt-cursor-disabled);
|
|
3195
3203
|
color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));
|
|
3196
3204
|
}
|
|
3197
3205
|
.saltPillInput-startAdornmentContainer {
|
|
@@ -3231,7 +3239,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3231
3239
|
}
|
|
3232
3240
|
.saltPillInput-startAdornmentContainer > .saltButton,
|
|
3233
3241
|
.saltPillInput-endAdornmentContainer > .saltButton {
|
|
3234
|
-
--saltButton-padding: calc(var(--salt-spacing-50) - var(--
|
|
3242
|
+
--saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
|
|
3235
3243
|
--saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
3236
3244
|
--saltButton-borderRadius: var(--salt-palette-corner-weaker);
|
|
3237
3245
|
}
|
|
@@ -3248,10 +3256,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3248
3256
|
box-sizing: border-box;
|
|
3249
3257
|
}
|
|
3250
3258
|
.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {
|
|
3251
|
-
padding-top: calc(var(--salt-spacing-50) - var(--
|
|
3259
|
+
padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));
|
|
3252
3260
|
}
|
|
3253
3261
|
.saltPillInput-bordered > .saltPillInput-inputWrapper {
|
|
3254
|
-
padding: calc(var(--salt-spacing-50) - var(--
|
|
3262
|
+
padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;
|
|
3255
3263
|
}
|
|
3256
3264
|
.saltPillInput-pillList {
|
|
3257
3265
|
display: contents;
|
|
@@ -3309,7 +3317,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3309
3317
|
.saltRadioButton {
|
|
3310
3318
|
display: inline-flex;
|
|
3311
3319
|
gap: var(--salt-spacing-100);
|
|
3312
|
-
cursor: var(--salt-
|
|
3320
|
+
cursor: var(--salt-cursor-hover);
|
|
3313
3321
|
position: relative;
|
|
3314
3322
|
font-size: var(--salt-text-fontSize);
|
|
3315
3323
|
line-height: var(--salt-text-lineHeight);
|
|
@@ -3319,11 +3327,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3319
3327
|
}
|
|
3320
3328
|
.saltRadioButton-disabled {
|
|
3321
3329
|
color: var(--salt-content-primary-foreground-disabled);
|
|
3322
|
-
cursor: var(--salt-
|
|
3330
|
+
cursor: var(--salt-cursor-disabled);
|
|
3323
3331
|
}
|
|
3324
3332
|
.saltRadioButton-readOnly {
|
|
3325
3333
|
color: var(--salt-content-primary-foreground);
|
|
3326
|
-
cursor: var(--salt-
|
|
3334
|
+
cursor: var(--salt-cursor-readonly);
|
|
3327
3335
|
}
|
|
3328
3336
|
.saltRadioButton-input {
|
|
3329
3337
|
cursor: inherit;
|
|
@@ -3398,7 +3406,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3398
3406
|
min-height: var(--radioButton-size);
|
|
3399
3407
|
border-radius: 50%;
|
|
3400
3408
|
position: relative;
|
|
3401
|
-
border: var(--salt-size-
|
|
3409
|
+
border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
|
|
3402
3410
|
color: var(--salt-selectable-foreground);
|
|
3403
3411
|
background: var(--salt-container-primary-background);
|
|
3404
3412
|
--saltIcon-size: 100%;
|
|
@@ -3481,25 +3489,25 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3481
3489
|
display: flex;
|
|
3482
3490
|
flex-direction: row;
|
|
3483
3491
|
background: var(--button-background);
|
|
3484
|
-
gap: var(--salt-
|
|
3492
|
+
gap: var(--salt-spacing-fixed-100);
|
|
3485
3493
|
}
|
|
3486
3494
|
.saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after {
|
|
3487
3495
|
content: "";
|
|
3488
|
-
width: var(--salt-
|
|
3496
|
+
width: var(--salt-spacing-fixed-100);
|
|
3489
3497
|
position: absolute;
|
|
3490
3498
|
background: var(--button-background);
|
|
3491
|
-
right: calc(var(--salt-size-
|
|
3492
|
-
top: calc(var(--salt-size-
|
|
3493
|
-
bottom: calc(var(--salt-size-
|
|
3499
|
+
right: calc(var(--salt-size-fixed-100) * -2);
|
|
3500
|
+
top: calc(var(--salt-size-fixed-100) * -1);
|
|
3501
|
+
bottom: calc(var(--salt-size-fixed-100) * -1);
|
|
3494
3502
|
}
|
|
3495
3503
|
.saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before {
|
|
3496
3504
|
content: "";
|
|
3497
|
-
width: var(--salt-
|
|
3505
|
+
width: var(--salt-spacing-fixed-100);
|
|
3498
3506
|
position: absolute;
|
|
3499
3507
|
background: var(--salt-separable-primary-borderColor);
|
|
3500
|
-
left: calc(var(--salt-size-
|
|
3501
|
-
top: calc(var(--salt-size-
|
|
3502
|
-
bottom: calc(var(--salt-size-
|
|
3508
|
+
left: calc(var(--salt-size-fixed-100) * -2);
|
|
3509
|
+
top: calc(var(--salt-size-fixed-100) * -1);
|
|
3510
|
+
bottom: calc(var(--salt-size-fixed-100) * -1);
|
|
3503
3511
|
}
|
|
3504
3512
|
.saltSegmentedButtonGroup > .saltButton:not(:first-of-type) {
|
|
3505
3513
|
border-bottom-left-radius: 0;
|
|
@@ -3577,7 +3585,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3577
3585
|
width: calc(var(--salt-size-base) * 2);
|
|
3578
3586
|
}
|
|
3579
3587
|
.saltSpinner-small {
|
|
3580
|
-
--spinner-strokeWidth: var(--salt-size-
|
|
3588
|
+
--spinner-strokeWidth: var(--salt-size-fixed-200);
|
|
3581
3589
|
height: var(--salt-size-icon);
|
|
3582
3590
|
width: var(--salt-size-icon);
|
|
3583
3591
|
}
|
|
@@ -3605,7 +3613,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3605
3613
|
|
|
3606
3614
|
/* src/stack-layout/StackLayout.css */
|
|
3607
3615
|
.saltStackLayout {
|
|
3608
|
-
--stackLayout-separator-weight: var(--salt-size-
|
|
3616
|
+
--stackLayout-separator-weight: var(--salt-size-fixed-100, 1);
|
|
3609
3617
|
}
|
|
3610
3618
|
.saltStackLayout-separator > * {
|
|
3611
3619
|
position: relative;
|
|
@@ -3760,7 +3768,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3760
3768
|
display: flex;
|
|
3761
3769
|
gap: var(--salt-spacing-100);
|
|
3762
3770
|
position: relative;
|
|
3763
|
-
cursor: var(--salt-
|
|
3771
|
+
cursor: var(--salt-cursor-hover);
|
|
3764
3772
|
color: var(--salt-content-primary-foreground);
|
|
3765
3773
|
font-family: var(--salt-text-fontFamily);
|
|
3766
3774
|
font-size: var(--salt-text-fontSize);
|
|
@@ -3769,16 +3777,16 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3769
3777
|
}
|
|
3770
3778
|
.saltSwitch-disabled {
|
|
3771
3779
|
color: var(--salt-content-primary-foreground-disabled);
|
|
3772
|
-
cursor: var(--salt-
|
|
3780
|
+
cursor: var(--salt-cursor-disabled);
|
|
3773
3781
|
}
|
|
3774
3782
|
.saltSwitch-track {
|
|
3775
|
-
border: var(--salt-size-
|
|
3783
|
+
border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
|
|
3776
3784
|
--saltIcon-size: 100%;
|
|
3777
3785
|
border-radius: var(--salt-palette-corner-weak, 0);
|
|
3778
3786
|
display: flex;
|
|
3779
3787
|
flex-shrink: 0;
|
|
3780
3788
|
height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
3781
|
-
width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-
|
|
3789
|
+
width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);
|
|
3782
3790
|
align-items: center;
|
|
3783
3791
|
color: var(--salt-selectable-foreground);
|
|
3784
3792
|
background: var(--salt-container-primary-background);
|
|
@@ -3819,7 +3827,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3819
3827
|
height: var(--salt-size-selectable);
|
|
3820
3828
|
background: currentColor;
|
|
3821
3829
|
margin: var(--salt-spacing-25);
|
|
3822
|
-
border: var(--salt-size-
|
|
3830
|
+
border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
|
|
3823
3831
|
box-sizing: border-box;
|
|
3824
3832
|
border-radius: var(--salt-palette-corner-weaker, 0);
|
|
3825
3833
|
}
|
|
@@ -3848,7 +3856,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3848
3856
|
top: 0;
|
|
3849
3857
|
z-index: var(--salt-zIndex-default);
|
|
3850
3858
|
height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
3851
|
-
width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-
|
|
3859
|
+
width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);
|
|
3852
3860
|
}
|
|
3853
3861
|
@media (prefers-reduced-motion) {
|
|
3854
3862
|
.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,
|
|
@@ -3886,15 +3894,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3886
3894
|
.saltTag-primary {
|
|
3887
3895
|
background: var(--tag-primary-background, var(--salt-category-1-subtle-background));
|
|
3888
3896
|
color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));
|
|
3889
|
-
border: var(--salt-size-
|
|
3897
|
+
border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) transparent;
|
|
3890
3898
|
}
|
|
3891
3899
|
.saltTag-bordered {
|
|
3892
|
-
border: var(--salt-size-
|
|
3900
|
+
border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));
|
|
3893
3901
|
}
|
|
3894
3902
|
.saltTag-secondary {
|
|
3895
3903
|
background: var(--tag-secondary-background, var(--salt-category-1-bold-background));
|
|
3896
3904
|
color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));
|
|
3897
|
-
border: var(--salt-size-
|
|
3905
|
+
border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) transparent;
|
|
3898
3906
|
}
|
|
3899
3907
|
.saltTag-category-1 {
|
|
3900
3908
|
--tag-primary-background: var(--salt-category-1-subtle-background);
|
|
@@ -4265,7 +4273,7 @@ label.saltText small,
|
|
|
4265
4273
|
--toast-iconColor: var(--salt-content-primary-foreground);
|
|
4266
4274
|
background: var(--saltToast-background, var(--toast-background));
|
|
4267
4275
|
border-color: var(--saltToast-borderColor, var(--toast-borderColor));
|
|
4268
|
-
border-width: var(--saltToast-borderWidth, var(--salt-size-
|
|
4276
|
+
border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));
|
|
4269
4277
|
border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));
|
|
4270
4278
|
border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));
|
|
4271
4279
|
box-sizing: border-box;
|
|
@@ -4312,12 +4320,13 @@ label.saltText small,
|
|
|
4312
4320
|
|
|
4313
4321
|
/* src/toggle-button/ToggleButton.css */
|
|
4314
4322
|
.saltToggleButton {
|
|
4323
|
+
--toggleButton-borderWidth: var(--salt-size-fixed-100);
|
|
4315
4324
|
align-items: center;
|
|
4316
4325
|
appearance: none;
|
|
4317
4326
|
background: var(--toggleButton-background);
|
|
4318
4327
|
border-color: var(--toggleButton-borderColor, transparent);
|
|
4319
4328
|
border-style: solid;
|
|
4320
|
-
border-width: var(--
|
|
4329
|
+
border-width: var(--toggleButton-borderWidth);
|
|
4321
4330
|
border-radius: var(--salt-palette-corner-weak, 0);
|
|
4322
4331
|
box-sizing: border-box;
|
|
4323
4332
|
color: var(--toggleButton-text-color);
|
|
@@ -4332,7 +4341,7 @@ label.saltText small,
|
|
|
4332
4341
|
font-family: var(--salt-text-action-fontFamily);
|
|
4333
4342
|
letter-spacing: var(--salt-text-action-letterSpacing);
|
|
4334
4343
|
text-transform: var(--salt-text-action-textTransform);
|
|
4335
|
-
padding: 0 calc(var(--salt-spacing-100) - var(--
|
|
4344
|
+
padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));
|
|
4336
4345
|
margin: 0;
|
|
4337
4346
|
min-width: unset;
|
|
4338
4347
|
position: relative;
|
|
@@ -4361,13 +4370,13 @@ label.saltText small,
|
|
|
4361
4370
|
.saltToggleButton[aria-pressed=true] {
|
|
4362
4371
|
background: var(--toggleButton-background-selected);
|
|
4363
4372
|
color: var(--toggleButton-text-color-selected);
|
|
4364
|
-
cursor: var(--salt-
|
|
4373
|
+
cursor: var(--salt-cursor-active);
|
|
4365
4374
|
border-color: var(--toggleButton-borderColor-selected);
|
|
4366
4375
|
}
|
|
4367
4376
|
.saltToggleButton[aria-disabled=true] {
|
|
4368
4377
|
background: var(--toggleButton-background-disabled);
|
|
4369
4378
|
color: var(--toggleButton-text-color-disabled);
|
|
4370
|
-
cursor: var(--salt-
|
|
4379
|
+
cursor: var(--salt-cursor-disabled);
|
|
4371
4380
|
border-color: var(--toggleButton-borderColor-disabled);
|
|
4372
4381
|
}
|
|
4373
4382
|
.saltToggleButton[aria-checked=true].saltToggleButton[aria-disabled=true],
|
|
@@ -4379,7 +4388,7 @@ label.saltText small,
|
|
|
4379
4388
|
.saltToggleButton.saltToggleButton-readOnly {
|
|
4380
4389
|
background: var(--toggleButton-background-readonly);
|
|
4381
4390
|
color: var(--toggleButton-text-color-readonly);
|
|
4382
|
-
cursor: var(--salt-
|
|
4391
|
+
cursor: var(--salt-cursor-disabled);
|
|
4383
4392
|
border-color: var(--toggleButton-borderColor-readonly);
|
|
4384
4393
|
}
|
|
4385
4394
|
.saltToggleButton[aria-checked=true].saltToggleButton-readOnly,
|
|
@@ -4621,24 +4630,25 @@ label.saltText small,
|
|
|
4621
4630
|
|
|
4622
4631
|
/* src/toggle-button-group/ToggleButtonGroup.css */
|
|
4623
4632
|
.saltToggleButtonGroup {
|
|
4633
|
+
--toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);
|
|
4624
4634
|
display: flex;
|
|
4625
4635
|
background: var(--salt-container-primary-background);
|
|
4626
|
-
border: var(--
|
|
4636
|
+
border: var(--toggleButtonGroup-borderWidth) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
|
|
4627
4637
|
border-radius: var(--salt-palette-corner-weak, 0);
|
|
4628
4638
|
width: fit-content;
|
|
4629
4639
|
gap: var(--salt-spacing-50);
|
|
4630
|
-
padding: calc(var(--salt-spacing-50) - var(--
|
|
4640
|
+
padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth));
|
|
4631
4641
|
flex-direction: row;
|
|
4632
4642
|
}
|
|
4633
4643
|
.saltToggleButtonGroup-disabled {
|
|
4634
4644
|
background: var(--salt-container-primary-background-disabled);
|
|
4635
4645
|
border-color: var(--salt-container-primary-borderColor-disabled);
|
|
4636
|
-
cursor: var(--salt-
|
|
4646
|
+
cursor: var(--salt-cursor-disabled);
|
|
4637
4647
|
}
|
|
4638
4648
|
.saltToggleButtonGroup-readOnly {
|
|
4639
4649
|
background: var(--salt-container-primary-background);
|
|
4640
4650
|
border-color: var(--salt-container-primary-borderColor);
|
|
4641
|
-
cursor: var(--salt-
|
|
4651
|
+
cursor: var(--salt-cursor-disabled);
|
|
4642
4652
|
}
|
|
4643
4653
|
.saltToggleButtonGroup .saltToggleButton {
|
|
4644
4654
|
border-radius: var(--salt-palette-corner-weaker, 0);
|
|
@@ -4659,14 +4669,15 @@ label.saltText small,
|
|
|
4659
4669
|
--tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
|
|
4660
4670
|
--tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);
|
|
4661
4671
|
--tooltip-status-borderColor: var(--salt-container-primary-borderColor);
|
|
4662
|
-
--tooltip-
|
|
4672
|
+
--tooltip-borderWidth: var(--salt-size-fixed-100);
|
|
4673
|
+
--tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);
|
|
4663
4674
|
}
|
|
4664
4675
|
.saltTooltip {
|
|
4665
4676
|
box-sizing: border-box;
|
|
4666
4677
|
background: var(--tooltip-background);
|
|
4667
4678
|
border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));
|
|
4668
4679
|
border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
|
|
4669
|
-
border-width: var(--saltTooltip-borderWidth, var(--
|
|
4680
|
+
border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));
|
|
4670
4681
|
border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
|
|
4671
4682
|
box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
|
|
4672
4683
|
color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));
|
|
@@ -4674,7 +4685,7 @@ label.saltText small,
|
|
|
4674
4685
|
font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));
|
|
4675
4686
|
font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));
|
|
4676
4687
|
line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));
|
|
4677
|
-
max-width: var(--saltTooltip-maxWidth,
|
|
4688
|
+
max-width: var(--saltTooltip-maxWidth, 60ch);
|
|
4678
4689
|
padding: var(--saltTooltip-padding, var(--tooltip-padding));
|
|
4679
4690
|
position: relative;
|
|
4680
4691
|
text-align: var(--saltTooltip-textAlign, left);
|
|
@@ -4746,8 +4757,8 @@ label.saltText small,
|
|
|
4746
4757
|
border-width: var(--salt-size-bar-strong);
|
|
4747
4758
|
}
|
|
4748
4759
|
.saltCircularProgress-bufferBorder {
|
|
4749
|
-
border: solid var(--salt-size-
|
|
4750
|
-
outline: solid var(--salt-size-
|
|
4760
|
+
border: solid var(--salt-size-fixed-100) var(--salt-accent-background);
|
|
4761
|
+
outline: solid var(--salt-size-fixed-100) var(--salt-accent-background);
|
|
4751
4762
|
outline-offset: calc(var(--salt-size-bar-strong) * -1);
|
|
4752
4763
|
}
|
|
4753
4764
|
.saltCircularProgress-bufferBackground {
|
|
@@ -4800,7 +4811,7 @@ label.saltText small,
|
|
|
4800
4811
|
background: var(--salt-accent-background);
|
|
4801
4812
|
position: absolute;
|
|
4802
4813
|
right: 0;
|
|
4803
|
-
width: var(--salt-size-
|
|
4814
|
+
width: var(--salt-size-fixed-100);
|
|
4804
4815
|
height: var(--salt-size-bar-strong);
|
|
4805
4816
|
}
|
|
4806
4817
|
.saltCircularProgress-bufferOverlayRight:before {
|
|
@@ -4836,9 +4847,9 @@ label.saltText small,
|
|
|
4836
4847
|
.saltLinearProgress-buffer {
|
|
4837
4848
|
width: 0;
|
|
4838
4849
|
background: var(--salt-container-primary-background);
|
|
4839
|
-
outline: solid var(--salt-size-
|
|
4850
|
+
outline: solid var(--salt-size-fixed-100) var(--salt-accent-background);
|
|
4840
4851
|
z-index: var(--salt-zIndex-default);
|
|
4841
|
-
outline-offset: calc(var(--salt-size-
|
|
4852
|
+
outline-offset: calc(var(--salt-size-fixed-100) * -1);
|
|
4842
4853
|
}
|
|
4843
4854
|
.saltLinearProgress-bar {
|
|
4844
4855
|
width: 100%;
|
|
@@ -4886,18 +4897,19 @@ label.saltText small,
|
|
|
4886
4897
|
.saltSliderThumb {
|
|
4887
4898
|
align-items: center;
|
|
4888
4899
|
background: var(--salt-accent-borderColor);
|
|
4889
|
-
cursor: var(--salt-
|
|
4900
|
+
cursor: var(--salt-cursor-grab);
|
|
4890
4901
|
display: flex;
|
|
4891
4902
|
height: var(--salt-size-selectable);
|
|
4892
4903
|
outline: none;
|
|
4893
4904
|
position: absolute;
|
|
4894
4905
|
top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);
|
|
4895
4906
|
transform: translateX(-50%);
|
|
4896
|
-
width: var(--salt-size-
|
|
4907
|
+
width: var(--salt-size-fixed-200);
|
|
4897
4908
|
touch-action: none;
|
|
4898
4909
|
}
|
|
4899
4910
|
.saltSliderThumb-disabled {
|
|
4900
4911
|
background: var(--salt-accent-borderColor-disabled);
|
|
4912
|
+
cursor: var(--salt-cursor-disabled);
|
|
4901
4913
|
pointer-events: none;
|
|
4902
4914
|
}
|
|
4903
4915
|
.saltSliderThumb-focusVisible {
|
|
@@ -4908,12 +4920,12 @@ label.saltText small,
|
|
|
4908
4920
|
}
|
|
4909
4921
|
.saltSliderThumb:active,
|
|
4910
4922
|
.saltSliderThumb-dragging {
|
|
4911
|
-
cursor: var(--
|
|
4923
|
+
cursor: var(--salt-cursor-grab-active);
|
|
4912
4924
|
}
|
|
4913
4925
|
.saltSliderThumb-input {
|
|
4914
4926
|
border: 0;
|
|
4915
4927
|
appearance: none;
|
|
4916
|
-
cursor: var(--salt-
|
|
4928
|
+
cursor: var(--salt-cursor-grab);
|
|
4917
4929
|
height: var(--salt-size-base);
|
|
4918
4930
|
left: var(--slider-progressPercentage);
|
|
4919
4931
|
margin: 0;
|
|
@@ -4946,7 +4958,7 @@ label.saltText small,
|
|
|
4946
4958
|
background: var(--salt-container-primary-background);
|
|
4947
4959
|
border-color: var(--salt-container-primary-borderColor);
|
|
4948
4960
|
border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
|
|
4949
|
-
border-width: var(--saltTooltip-borderWidth, var(--salt-size-
|
|
4961
|
+
border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100));
|
|
4950
4962
|
border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
|
|
4951
4963
|
box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
|
|
4952
4964
|
bottom: 50%;
|
|
@@ -4972,7 +4984,7 @@ label.saltText small,
|
|
|
4972
4984
|
top: 100%;
|
|
4973
4985
|
transform: translateX(-50%);
|
|
4974
4986
|
stroke: var(--salt-container-primary-borderColor);
|
|
4975
|
-
stroke-width: var(--salt-size-
|
|
4987
|
+
stroke-width: var(--salt-size-fixed-100);
|
|
4976
4988
|
width: var(--salt-size-icon);
|
|
4977
4989
|
}
|
|
4978
4990
|
.saltSliderTooltip-text {
|
|
@@ -4995,7 +5007,7 @@ label.saltText small,
|
|
|
4995
5007
|
margin-bottom: calc(var(--salt-size-base) / 2);
|
|
4996
5008
|
}
|
|
4997
5009
|
.saltSliderTrack-disabled {
|
|
4998
|
-
cursor: var(--salt-
|
|
5010
|
+
cursor: var(--salt-cursor-disabled);
|
|
4999
5011
|
}
|
|
5000
5012
|
.saltSliderTrack-container {
|
|
5001
5013
|
align-items: center;
|
|
@@ -5006,7 +5018,7 @@ label.saltText small,
|
|
|
5006
5018
|
}
|
|
5007
5019
|
.saltSliderTrack-wrapper {
|
|
5008
5020
|
align-items: center;
|
|
5009
|
-
cursor: var(--salt-
|
|
5021
|
+
cursor: var(--salt-cursor-hover);
|
|
5010
5022
|
display: flex;
|
|
5011
5023
|
flex: 1;
|
|
5012
5024
|
height: var(--salt-size-selectable);
|
|
@@ -5015,7 +5027,7 @@ label.saltText small,
|
|
|
5015
5027
|
}
|
|
5016
5028
|
.saltSliderTrack-disabled,
|
|
5017
5029
|
.saltSliderTrack-disabled .saltSliderTrack-wrapper {
|
|
5018
|
-
cursor: var(--salt-
|
|
5030
|
+
cursor: var(--salt-cursor-disabled);
|
|
5019
5031
|
}
|
|
5020
5032
|
.saltSliderTrack-disabled .saltSliderTrack-wrapper {
|
|
5021
5033
|
pointer-events: none;
|
|
@@ -5037,7 +5049,7 @@ label.saltText small,
|
|
|
5037
5049
|
background: var(--slider-track-fill);
|
|
5038
5050
|
border-top-left-radius: var(--salt-palette-corner-weaker);
|
|
5039
5051
|
border-bottom-left-radius: var(--salt-palette-corner-weaker);
|
|
5040
|
-
width: calc(var(--slider-progressPercentage) -
|
|
5052
|
+
width: calc(var(--slider-progressPercentage) - var(--salt-size-fixed-300));
|
|
5041
5053
|
}
|
|
5042
5054
|
.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {
|
|
5043
5055
|
border-bottom-left-radius: unset;
|
|
@@ -5046,25 +5058,25 @@ label.saltText small,
|
|
|
5046
5058
|
background: var(--slider-track-background);
|
|
5047
5059
|
border-top-right-radius: var(--salt-palette-corner-weaker);
|
|
5048
5060
|
border-bottom-right-radius: var(--salt-palette-corner-weaker);
|
|
5049
|
-
width: calc(100% - var(--slider-progressPercentage) -
|
|
5061
|
+
width: calc(100% - var(--slider-progressPercentage) - var(--salt-size-fixed-300));
|
|
5050
5062
|
}
|
|
5051
5063
|
.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {
|
|
5052
5064
|
border-bottom-right-radius: unset;
|
|
5053
5065
|
}
|
|
5054
5066
|
.saltSliderTrack-range .saltSliderTrack-rail::before {
|
|
5055
5067
|
background: var(--slider-track-background);
|
|
5056
|
-
width: calc(var(--slider-progressPercentageStart) -
|
|
5068
|
+
width: calc(var(--slider-progressPercentageStart) - var(--salt-size-fixed-300));
|
|
5057
5069
|
}
|
|
5058
5070
|
.saltSliderTrack-range .saltSliderTrack-rail::after {
|
|
5059
5071
|
background: var(--slider-track-background);
|
|
5060
|
-
width: calc(100% - var(--slider-progressPercentageEnd) -
|
|
5072
|
+
width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-size-fixed-300));
|
|
5061
5073
|
}
|
|
5062
5074
|
.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
|
|
5063
5075
|
background: var(--slider-track-fill);
|
|
5064
5076
|
height: 100%;
|
|
5065
|
-
left: calc(var(--slider-progressPercentageStart) +
|
|
5077
|
+
left: calc(var(--slider-progressPercentageStart) + var(--salt-size-fixed-300));
|
|
5066
5078
|
position: absolute;
|
|
5067
|
-
width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-
|
|
5079
|
+
width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));
|
|
5068
5080
|
}
|
|
5069
5081
|
.saltSliderTrack-minLabel,
|
|
5070
5082
|
.saltSliderTrack-maxLabel {
|
|
@@ -5072,7 +5084,7 @@ label.saltText small,
|
|
|
5072
5084
|
}
|
|
5073
5085
|
.saltSliderTrack-dragging,
|
|
5074
5086
|
.saltSliderTrack-dragging .saltSliderTrack-wrapper {
|
|
5075
|
-
cursor: var(--salt-
|
|
5087
|
+
cursor: var(--salt-cursor-grab-active);
|
|
5076
5088
|
}
|
|
5077
5089
|
.saltSliderTrack-disabled {
|
|
5078
5090
|
--slider-track-fill: var(--salt-accent-borderColor-disabled);
|
|
@@ -5088,7 +5100,7 @@ label.saltText small,
|
|
|
5088
5100
|
height: var(--slider-tick-height);
|
|
5089
5101
|
position: absolute;
|
|
5090
5102
|
transform: translate(-50%);
|
|
5091
|
-
width: var(--salt-size-
|
|
5103
|
+
width: var(--salt-size-fixed-200);
|
|
5092
5104
|
}
|
|
5093
5105
|
.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {
|
|
5094
5106
|
visibility: hidden;
|
|
@@ -5150,7 +5162,7 @@ label.saltText small,
|
|
|
5150
5162
|
top: calc(var(--step-icon-size) / 2);
|
|
5151
5163
|
left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
|
|
5152
5164
|
right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
|
|
5153
|
-
border-top-width: var(--salt-size-
|
|
5165
|
+
border-top-width: var(--salt-size-fixed-200);
|
|
5154
5166
|
border-top-style: var(--salt-track-borderStyle-incomplete);
|
|
5155
5167
|
border-top-color: var(--salt-track-borderColor);
|
|
5156
5168
|
}
|
|
@@ -5162,7 +5174,7 @@ label.saltText small,
|
|
|
5162
5174
|
min-height: var(--salt-size-base);
|
|
5163
5175
|
align-self: stretch;
|
|
5164
5176
|
justify-self: center;
|
|
5165
|
-
border-left-width: var(--salt-size-
|
|
5177
|
+
border-left-width: var(--salt-size-fixed-200);
|
|
5166
5178
|
border-left-style: var(--salt-track-borderStyle-incomplete);
|
|
5167
5179
|
border-left-color: var(--salt-track-borderColor);
|
|
5168
5180
|
}
|
|
@@ -5254,4 +5266,4 @@ label.saltText small,
|
|
|
5254
5266
|
color: var(--salt-status-error-foreground-informative);
|
|
5255
5267
|
}
|
|
5256
5268
|
|
|
5257
|
-
/* src/
|
|
5269
|
+
/* src/d88b00e3-c3d1-4dc7-8745-7c39ccde27ab.css */
|