@boostdev/design-system-components 2.15.0 → 2.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +19 -14
- package/dist/client.cjs +271 -205
- package/dist/client.css +801 -642
- package/dist/client.d.cts +19 -4
- package/dist/client.d.ts +19 -4
- package/dist/client.js +206 -139
- package/dist/index.cjs +271 -205
- package/dist/index.css +801 -642
- package/dist/index.d.cts +19 -4
- package/dist/index.d.ts +19 -4
- package/dist/index.js +206 -139
- package/dist/web-components/chunk-2DHW2WJZ.js +154 -0
- package/dist/web-components/{chunk-LDIPCTRN.js → chunk-2MJTO2IW.js} +48 -2
- package/dist/web-components/{chunk-3WAV6MDN.js → chunk-3FSGP35V.js} +1 -0
- package/dist/web-components/{chunk-KA3VPKMY.js → chunk-4MB2ICSK.js} +1 -0
- package/dist/web-components/{chunk-IDSM74LM.js → chunk-6XL5P76D.js} +3 -3
- package/dist/web-components/{chunk-P24JYC5V.js → chunk-7VXRMCAL.js} +10 -4
- package/dist/web-components/{chunk-CUKQ2L5B.js → chunk-AGI6YQRC.js} +9 -16
- package/dist/web-components/chunk-BDRV452N.js +51 -0
- package/dist/web-components/{chunk-3AY2YKCM.js → chunk-CKCPV347.js} +1 -0
- package/dist/web-components/{chunk-HBLJ4SLY.js → chunk-DD3OUXNG.js} +5 -5
- package/dist/web-components/{chunk-RVF7W653.js → chunk-DGOCPKHI.js} +30 -10
- package/dist/web-components/{chunk-2OLVQUBU.js → chunk-EYCW7TKB.js} +8 -15
- package/dist/web-components/{chunk-VANAKB6D.js → chunk-GPJWLAKU.js} +33 -16
- package/dist/web-components/{chunk-VED2DFJ6.js → chunk-GQNQBEYR.js} +8 -15
- package/dist/web-components/{chunk-WFVKU4GX.js → chunk-IKAJLROF.js} +49 -4
- package/dist/web-components/{chunk-RSZ3BWBK.js → chunk-KSK4RZZQ.js} +30 -7
- package/dist/web-components/{chunk-FEDABOR5.js → chunk-LHFUXZ52.js} +7 -15
- package/dist/web-components/{chunk-M3ECULRH.js → chunk-RBF7WPLI.js} +10 -8
- package/dist/web-components/{chunk-6G22I2CK.js → chunk-RZH5IVB5.js} +31 -1
- package/dist/web-components/chunk-SRKQ6GST.js +40 -0
- package/dist/web-components/{chunk-5HUAFCU6.js → chunk-TJV7UIXC.js} +7 -0
- package/dist/web-components/{chunk-J3HVUIUH.js → chunk-XI2U6U26.js} +8 -15
- package/dist/web-components/{chunk-JH6LQKLK.js → chunk-XJU7KITO.js} +8 -15
- package/dist/web-components/{chunk-JV5QT2OU.js → chunk-YLDQOESI.js} +27 -13
- package/dist/web-components/globals.js +1 -1
- package/dist/web-components/index.d.ts +1 -0
- package/dist/web-components/index.js +33 -28
- package/dist/web-components/interaction/bds-dropdown-menu-group.d.ts +41 -0
- package/dist/web-components/interaction/bds-dropdown-menu-group.js +7 -0
- package/dist/web-components/interaction/bds-dropdown-menu-item.d.ts +14 -1
- package/dist/web-components/interaction/bds-dropdown-menu-item.js +1 -1
- package/dist/web-components/interaction/bds-dropdown-menu.d.ts +2 -1
- package/dist/web-components/interaction/bds-dropdown-menu.js +1 -1
- package/dist/web-components/interaction/bds-tab.d.ts +5 -0
- package/dist/web-components/interaction/bds-tab.js +1 -1
- package/dist/web-components/interaction/bds-tooltip.js +1 -1
- package/dist/web-components/interaction/form/bds-checkbox-group.d.ts +6 -0
- package/dist/web-components/interaction/form/bds-checkbox-group.js +2 -1
- package/dist/web-components/interaction/form/bds-checkbox.js +1 -1
- package/dist/web-components/interaction/form/bds-combobox.js +2 -1
- package/dist/web-components/interaction/form/bds-form-input.js +2 -1
- package/dist/web-components/interaction/form/bds-number-input.js +2 -1
- package/dist/web-components/interaction/form/bds-radio-group.d.ts +5 -0
- package/dist/web-components/interaction/form/bds-radio-group.js +2 -1
- package/dist/web-components/interaction/form/bds-radio.js +1 -1
- package/dist/web-components/interaction/form/bds-select.js +2 -1
- package/dist/web-components/interaction/form/bds-slider.js +2 -1
- package/dist/web-components/interaction/form/bds-switch.js +1 -1
- package/dist/web-components/interaction/form/bds-textarea.js +2 -1
- package/dist/web-components/ui/bds-alert.d.ts +8 -1
- package/dist/web-components/ui/bds-alert.js +1 -1
- package/dist/web-components/ui/bds-avatar.d.ts +11 -0
- package/dist/web-components/ui/bds-avatar.js +1 -1
- package/dist/web-components/ui/bds-notification-banner.d.ts +14 -1
- package/dist/web-components/ui/bds-notification-banner.js +1 -1
- package/dist/web-components/ui/bds-section-header.d.ts +6 -0
- package/dist/web-components/ui/bds-section-header.js +1 -1
- package/dist/web-components/ui/bds-separator.js +1 -1
- package/dist/web-components/ui/bds-table.js +1 -1
- package/package.json +6 -2
- package/src/components/interaction/DropdownMenu/DropdownMenu.mdx +35 -4
- package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +58 -10
- package/src/components/interaction/DropdownMenu/DropdownMenu.spec.tsx +114 -1
- package/src/components/interaction/DropdownMenu/DropdownMenu.stories.tsx +25 -0
- package/src/components/interaction/DropdownMenu/DropdownMenu.tsx +69 -17
- package/src/components/interaction/form/Checkbox/Checkbox.module.css +1 -0
- package/src/components/interaction/form/Checkbox/Checkbox.spec.tsx +7 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.mdx +1 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css +7 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.spec.tsx +22 -0
- package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx +1 -1
- package/src/components/interaction/form/Combobox/Combobox.module.css +1 -0
- package/src/components/interaction/form/Combobox/Combobox.spec.tsx +7 -0
- package/src/components/interaction/form/FormInput/FormInput.mdx +9 -0
- package/src/components/interaction/form/FormInput/FormInput.module.css +1 -0
- package/src/components/interaction/form/FormInput/FormInput.spec.tsx +7 -0
- package/src/components/interaction/form/NumberInput/NumberInput.module.css +1 -0
- package/src/components/interaction/form/NumberInput/NumberInput.spec.tsx +7 -0
- package/src/components/interaction/form/Radio/Radio.module.css +1 -0
- package/src/components/interaction/form/Radio/Radio.spec.tsx +7 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.mdx +1 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.module.css +7 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.spec.tsx +22 -0
- package/src/components/interaction/form/RadioGroup/RadioGroup.tsx +1 -1
- package/src/components/interaction/form/Select/Select.module.css +1 -0
- package/src/components/interaction/form/Select/Select.spec.tsx +7 -0
- package/src/components/interaction/form/Switch/Switch.module.css +1 -0
- package/src/components/interaction/form/Switch/Switch.spec.tsx +7 -0
- package/src/components/interaction/form/Textarea/Textarea.module.css +1 -0
- package/src/components/interaction/form/Textarea/Textarea.spec.tsx +7 -0
- package/src/components/interaction/form/atoms/Message.module.css +14 -3
- package/src/components/interaction/form/atoms/Message.spec.tsx +22 -0
- package/src/components/interaction/form/atoms/Message.tsx +5 -0
- package/src/components/layout/SectionHeader/SectionHeader.mdx +18 -5
- package/src/components/layout/SectionHeader/SectionHeader.module.css +35 -14
- package/src/components/layout/SectionHeader/SectionHeader.spec.tsx +44 -0
- package/src/components/layout/SectionHeader/SectionHeader.stories.tsx +5 -0
- package/src/components/layout/SectionHeader/SectionHeader.tsx +3 -1
- package/src/components/ui/Alert/Alert.mdx +11 -0
- package/src/components/ui/Alert/Alert.module.css +30 -1
- package/src/components/ui/Alert/Alert.spec.tsx +21 -0
- package/src/components/ui/Alert/Alert.stories.tsx +20 -0
- package/src/components/ui/Alert/Alert.tsx +8 -1
- package/src/components/ui/Avatar/Avatar.mdx +22 -2
- package/src/components/ui/Avatar/Avatar.module.css +29 -2
- package/src/components/ui/Avatar/Avatar.spec.tsx +26 -0
- package/src/components/ui/Avatar/Avatar.stories.tsx +23 -0
- package/src/components/ui/Avatar/Avatar.tsx +4 -2
- package/src/components/ui/Avatar/avatarTone.spec.ts +41 -0
- package/src/components/ui/Avatar/avatarTone.ts +22 -0
- package/src/components/ui/Collapsible/Collapsible.module.css +1 -2
- package/src/components/ui/NotificationBanner/NotificationBanner.mdx +14 -0
- package/src/components/ui/NotificationBanner/NotificationBanner.module.css +31 -1
- package/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx +29 -0
- package/src/components/ui/NotificationBanner/NotificationBanner.stories.tsx +25 -0
- package/src/components/ui/NotificationBanner/NotificationBanner.tsx +15 -1
- package/src/components/ui/Separator/Separator.mdx +1 -0
- package/src/components/ui/Separator/Separator.module.css +6 -0
- package/src/components/ui/Separator/Separator.spec.tsx +19 -0
- package/src/components/ui/Separator/Separator.stories.tsx +15 -0
- package/src/components/ui/Table/Table.mdx +4 -1
- package/src/components/ui/Table/Table.module.css +7 -7
- package/src/components/ui/Table/Table.spec.tsx +11 -0
- package/src/components/ui/Tabs/Tabs.mdx +11 -5
- package/src/components/ui/Tabs/Tabs.module.css +23 -5
- package/src/components/ui/Tabs/Tabs.spec.tsx +39 -0
- package/src/components/ui/Tabs/Tabs.tsx +2 -1
- package/src/components/ui/Tabs/getNodeText.spec.tsx +23 -0
- package/src/components/ui/Tabs/getNodeText.ts +13 -0
- package/src/components/ui/Tooltip/Tooltip.mdx +6 -3
- package/src/components/ui/Tooltip/Tooltip.module.css +6 -2
- package/src/components/ui/Tooltip/Tooltip.spec.tsx +10 -0
- package/src/components/ui/Tooltip/Tooltip.stories.tsx +13 -0
- package/src/css/bdc.css +5 -2
- package/src/css/bdc.spec.ts +65 -0
- package/src/stories/DesignSystem/Borders.mdx +17 -9
- package/src/web-components/globals.ts +10 -4
- package/src/web-components/index.ts +1 -0
- package/src/web-components/interaction/BdsAccordion.mdx +1 -1
- package/src/web-components/interaction/BdsAccordion.stories.tsx +1 -1
- package/src/web-components/interaction/BdsButton.mdx +1 -1
- package/src/web-components/interaction/BdsButton.stories.tsx +1 -1
- package/src/web-components/interaction/BdsCollapsible.mdx +1 -1
- package/src/web-components/interaction/BdsCollapsible.stories.tsx +1 -1
- package/src/web-components/interaction/BdsDialog.mdx +1 -1
- package/src/web-components/interaction/BdsDialog.stories.tsx +1 -1
- package/src/web-components/interaction/BdsDrawer.mdx +1 -1
- package/src/web-components/interaction/BdsDrawer.stories.tsx +1 -1
- package/src/web-components/interaction/BdsDropdownMenu.mdx +62 -6
- package/src/web-components/interaction/BdsDropdownMenu.stories.tsx +32 -7
- package/src/web-components/interaction/BdsPopover.mdx +1 -1
- package/src/web-components/interaction/BdsPopover.stories.tsx +1 -1
- package/src/web-components/interaction/BdsSkipLink.mdx +1 -1
- package/src/web-components/interaction/BdsSkipLink.stories.tsx +1 -1
- package/src/web-components/interaction/BdsTabs.mdx +10 -1
- package/src/web-components/interaction/BdsTabs.stories.tsx +1 -1
- package/src/web-components/interaction/BdsToastProvider.mdx +1 -1
- package/src/web-components/interaction/BdsToastProvider.stories.tsx +1 -1
- package/src/web-components/interaction/BdsTooltip.mdx +13 -5
- package/src/web-components/interaction/BdsTooltip.stories.tsx +12 -12
- package/src/web-components/interaction/bds-dropdown-menu-group.ts +72 -0
- package/src/web-components/interaction/bds-dropdown-menu-item.ts +65 -17
- package/src/web-components/interaction/bds-dropdown-menu.spec.ts +135 -0
- package/src/web-components/interaction/bds-dropdown-menu.ts +5 -4
- package/src/web-components/interaction/bds-tab.spec.ts +34 -2
- package/src/web-components/interaction/bds-tab.ts +31 -6
- package/src/web-components/interaction/bds-tooltip.spec.ts +16 -0
- package/src/web-components/interaction/bds-tooltip.ts +10 -8
- package/src/web-components/interaction/form/BdsCheckbox.mdx +5 -1
- package/src/web-components/interaction/form/BdsCheckbox.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsCheckboxGroup.mdx +5 -1
- package/src/web-components/interaction/form/BdsCheckboxGroup.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsCombobox.mdx +5 -1
- package/src/web-components/interaction/form/BdsCombobox.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsFieldGroup.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsFileInput.mdx +1 -1
- package/src/web-components/interaction/form/BdsFileInput.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsFormInput.mdx +8 -1
- package/src/web-components/interaction/form/BdsFormInput.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsNumberInput.mdx +5 -1
- package/src/web-components/interaction/form/BdsNumberInput.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsRadio.mdx +5 -1
- package/src/web-components/interaction/form/BdsRadio.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsRadioGroup.mdx +5 -1
- package/src/web-components/interaction/form/BdsRadioGroup.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsSegmentedControl.mdx +1 -1
- package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsSelect.mdx +5 -1
- package/src/web-components/interaction/form/BdsSelect.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsSlider.mdx +5 -1
- package/src/web-components/interaction/form/BdsSlider.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsSwitch.mdx +5 -1
- package/src/web-components/interaction/form/BdsSwitch.stories.tsx +1 -1
- package/src/web-components/interaction/form/BdsTextarea.mdx +5 -1
- package/src/web-components/interaction/form/BdsTextarea.stories.tsx +1 -1
- package/src/web-components/interaction/form/bds-checkbox-group.spec.ts +32 -3
- package/src/web-components/interaction/form/bds-checkbox-group.ts +33 -17
- package/src/web-components/interaction/form/bds-checkbox.ts +1 -0
- package/src/web-components/interaction/form/bds-combobox.ts +6 -16
- package/src/web-components/interaction/form/bds-form-input.ts +6 -16
- package/src/web-components/interaction/form/bds-number-input.ts +6 -16
- package/src/web-components/interaction/form/bds-radio-group.spec.ts +32 -3
- package/src/web-components/interaction/form/bds-radio-group.ts +26 -14
- package/src/web-components/interaction/form/bds-radio.ts +1 -0
- package/src/web-components/interaction/form/bds-select.ts +6 -16
- package/src/web-components/interaction/form/bds-slider.ts +5 -16
- package/src/web-components/interaction/form/bds-switch.ts +1 -0
- package/src/web-components/interaction/form/bds-textarea.ts +6 -16
- package/src/web-components/interaction/form/field-message.spec.ts +62 -0
- package/src/web-components/interaction/form/field-message.ts +55 -0
- package/src/web-components/layout/BdsGrid.mdx +1 -1
- package/src/web-components/layout/BdsGrid.stories.tsx +1 -1
- package/src/web-components/layout/BdsGridItem.mdx +1 -1
- package/src/web-components/layout/BdsGridItem.stories.tsx +1 -1
- package/src/web-components/ui/BdsAlert.mdx +19 -1
- package/src/web-components/ui/BdsAlert.stories.tsx +29 -3
- package/src/web-components/ui/BdsAvatar.mdx +20 -3
- package/src/web-components/ui/BdsAvatar.stories.tsx +25 -2
- package/src/web-components/ui/BdsBadge.mdx +1 -1
- package/src/web-components/ui/BdsBadge.stories.tsx +1 -1
- package/src/web-components/ui/BdsBreadcrumb.mdx +1 -1
- package/src/web-components/ui/BdsBreadcrumb.stories.tsx +1 -1
- package/src/web-components/ui/BdsButtonContainer.mdx +1 -1
- package/src/web-components/ui/BdsButtonContainer.stories.tsx +1 -1
- package/src/web-components/ui/BdsCalendar.mdx +1 -1
- package/src/web-components/ui/BdsCalendar.stories.tsx +1 -1
- package/src/web-components/ui/BdsCalendarRange.mdx +1 -1
- package/src/web-components/ui/BdsCalendarRange.stories.tsx +1 -1
- package/src/web-components/ui/BdsCard.mdx +1 -1
- package/src/web-components/ui/BdsCard.stories.tsx +1 -1
- package/src/web-components/ui/BdsCarousel.mdx +1 -1
- package/src/web-components/ui/BdsCarousel.stories.tsx +1 -1
- package/src/web-components/ui/BdsDescriptionList.mdx +1 -1
- package/src/web-components/ui/BdsDescriptionList.stories.tsx +1 -1
- package/src/web-components/ui/BdsIconWrapper.mdx +1 -1
- package/src/web-components/ui/BdsIconWrapper.stories.tsx +1 -1
- package/src/web-components/ui/BdsLink.mdx +1 -1
- package/src/web-components/ui/BdsLink.stories.tsx +1 -1
- package/src/web-components/ui/BdsLoading.mdx +1 -1
- package/src/web-components/ui/BdsLoading.stories.tsx +1 -1
- package/src/web-components/ui/BdsNotificationBanner.mdx +10 -1
- package/src/web-components/ui/BdsNotificationBanner.stories.tsx +29 -2
- package/src/web-components/ui/BdsPagination.mdx +1 -1
- package/src/web-components/ui/BdsPagination.stories.tsx +1 -1
- package/src/web-components/ui/BdsProgress.mdx +1 -1
- package/src/web-components/ui/BdsProgress.stories.tsx +1 -1
- package/src/web-components/ui/BdsProgressCircle.mdx +1 -1
- package/src/web-components/ui/BdsProgressCircle.stories.tsx +1 -1
- package/src/web-components/ui/BdsRating.mdx +1 -1
- package/src/web-components/ui/BdsRating.stories.tsx +1 -1
- package/src/web-components/ui/BdsSectionHeader.mdx +18 -6
- package/src/web-components/ui/BdsSectionHeader.stories.tsx +10 -2
- package/src/web-components/ui/BdsSeparator.mdx +2 -1
- package/src/web-components/ui/BdsSeparator.stories.tsx +13 -1
- package/src/web-components/ui/BdsSkeleton.mdx +1 -1
- package/src/web-components/ui/BdsSkeleton.stories.tsx +1 -1
- package/src/web-components/ui/BdsTable.mdx +5 -1
- package/src/web-components/ui/BdsTable.stories.tsx +1 -1
- package/src/web-components/ui/BdsTypography.mdx +1 -1
- package/src/web-components/ui/BdsTypography.stories.tsx +1 -1
- package/src/web-components/ui/bds-alert.spec.ts +27 -0
- package/src/web-components/ui/bds-alert.ts +34 -1
- package/src/web-components/ui/bds-avatar.spec.ts +47 -0
- package/src/web-components/ui/bds-avatar.ts +36 -3
- package/src/web-components/ui/bds-notification-banner.spec.ts +45 -0
- package/src/web-components/ui/bds-notification-banner.ts +53 -1
- package/src/web-components/ui/bds-section-header.spec.ts +36 -3
- package/src/web-components/ui/bds-section-header.ts +32 -10
- package/src/web-components/ui/bds-separator.spec.ts +8 -0
- package/src/web-components/ui/bds-separator.ts +7 -0
- package/src/web-components/ui/bds-table.spec.ts +11 -0
- package/src/web-components/ui/bds-table.ts +5 -5
- package/dist/web-components/chunk-QZAIRJ75.js +0 -111
package/dist/index.css
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/* src/css/bdc.css */
|
|
2
2
|
@property --bdc_color { syntax: "<color>"; inherits: false; initial-value: currentcolor; }
|
|
3
|
-
@property --bdc-outline_width { syntax: "<length>"; inherits:
|
|
3
|
+
@property --bdc-outline_width { syntax: "<length>"; inherits: true; initial-value: 1px; }
|
|
4
4
|
@property --bdc-outline_offset { syntax: "<length>"; inherits: false; initial-value: -1px; }
|
|
5
5
|
@property --bdc-outline_radius { syntax: "<length-percentage>"; inherits: false; initial-value: 0; }
|
|
6
6
|
@property --bdc-outline_shadow { syntax: "*"; inherits: false; initial-value: 0 0 0 0 transparent; }
|
|
7
|
-
@layer boostdev.
|
|
7
|
+
@layer boostdev.tokens.semantic {
|
|
8
8
|
:root {
|
|
9
9
|
--bdc-outline_border: none;
|
|
10
10
|
--bdc_color: currentcolor;
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
--bdc-color_active--strong: var(--bds-color_interactive_on-bg);
|
|
18
18
|
--bdc-color_on-active--strong: var(--bds-color_on-blue--strong);
|
|
19
19
|
--bdc-outline_width: 1px;
|
|
20
|
+
--bdc-outline_width--error: 2px;
|
|
20
21
|
--bdc-outline_offset: -1px;
|
|
21
22
|
--bdc-outline_radius: var(--bds-border_radius--xs);
|
|
22
23
|
--bdc-outline_radius--l: 1.5em;
|
|
@@ -27,8 +28,8 @@
|
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
/* src/components/ui/Accordion/Accordion.module.css */
|
|
30
|
-
@layer boostdev.
|
|
31
|
-
.
|
|
31
|
+
@layer boostdev.bds2160Accordion-component {
|
|
32
|
+
.bds2160Accordion-accordion {
|
|
32
33
|
display: flex;
|
|
33
34
|
flex-direction: column;
|
|
34
35
|
border: var(--accordion_border, none);
|
|
@@ -38,16 +39,16 @@
|
|
|
38
39
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--accordion_shadow, var(--bdc-outline_shadow));
|
|
39
40
|
overflow: hidden;
|
|
40
41
|
}
|
|
41
|
-
.
|
|
42
|
+
.bds2160Accordion-item {
|
|
42
43
|
border-block-end: 1px solid var(--accordion_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
|
|
43
44
|
}
|
|
44
|
-
.
|
|
45
|
+
.bds2160Accordion-item:last-child {
|
|
45
46
|
border-block-end: none;
|
|
46
47
|
}
|
|
47
|
-
.
|
|
48
|
+
.bds2160Accordion-heading {
|
|
48
49
|
margin: 0;
|
|
49
50
|
}
|
|
50
|
-
.
|
|
51
|
+
.bds2160Accordion-trigger {
|
|
51
52
|
all: unset;
|
|
52
53
|
display: flex;
|
|
53
54
|
align-items: center;
|
|
@@ -62,52 +63,52 @@
|
|
|
62
63
|
transition: var(--bds-animation_transition);
|
|
63
64
|
box-sizing: border-box;
|
|
64
65
|
}
|
|
65
|
-
.
|
|
66
|
+
.bds2160Accordion-trigger:disabled {
|
|
66
67
|
opacity: 0.4;
|
|
67
68
|
cursor: not-allowed;
|
|
68
69
|
}
|
|
69
|
-
.
|
|
70
|
+
.bds2160Accordion-trigger:focus-visible {
|
|
70
71
|
outline: var(--bds-outline_default);
|
|
71
72
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
72
73
|
border-radius: var(--bds-border_radius--xs);
|
|
73
74
|
}
|
|
74
75
|
@media (hover: hover) and (pointer: fine) {
|
|
75
|
-
.
|
|
76
|
+
.bds2160Accordion-trigger:not(:disabled):hover {
|
|
76
77
|
background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
|
|
77
78
|
}
|
|
78
79
|
}
|
|
79
|
-
.
|
|
80
|
+
.bds2160Accordion-triggerLabel {
|
|
80
81
|
flex: 1;
|
|
81
82
|
text-align: start;
|
|
82
83
|
}
|
|
83
|
-
.
|
|
84
|
+
.bds2160Accordion-chevron {
|
|
84
85
|
inline-size: 1.25rem;
|
|
85
86
|
block-size: 1.25rem;
|
|
86
87
|
flex-shrink: 0;
|
|
87
88
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
88
89
|
}
|
|
89
|
-
.
|
|
90
|
+
.bds2160Accordion-item.bds2160Accordion---open .bds2160Accordion-chevron {
|
|
90
91
|
transform: rotate(180deg);
|
|
91
92
|
}
|
|
92
|
-
.
|
|
93
|
+
.bds2160Accordion-panel {
|
|
93
94
|
overflow: hidden;
|
|
94
95
|
}
|
|
95
|
-
.
|
|
96
|
+
.bds2160Accordion-panelContent {
|
|
96
97
|
padding: 0 var(--bds-space_m) var(--bds-space_m);
|
|
97
98
|
color: var(--bds-color_on-bg);
|
|
98
99
|
font-size: var(--bds-font_size--body);
|
|
99
100
|
line-height: var(--bds-font_line-height--body);
|
|
100
101
|
}
|
|
101
102
|
@media (prefers-reduced-motion: reduce) {
|
|
102
|
-
.
|
|
103
|
+
.bds2160Accordion-chevron {
|
|
103
104
|
transition: none;
|
|
104
105
|
}
|
|
105
106
|
}
|
|
106
107
|
}
|
|
107
108
|
|
|
108
109
|
/* src/components/ui/Alert/Alert.module.css */
|
|
109
|
-
@layer boostdev.
|
|
110
|
-
.
|
|
110
|
+
@layer boostdev.bds2160Alert-component {
|
|
111
|
+
.bds2160Alert-alert {
|
|
111
112
|
display: flex;
|
|
112
113
|
align-items: flex-start;
|
|
113
114
|
gap: var(--bds-space_s);
|
|
@@ -115,47 +116,65 @@
|
|
|
115
116
|
border-radius: var(--alert_radius, var(--bds-border_radius--s));
|
|
116
117
|
background-color: var(--alert_bg, var(--alert_bg--variant, var(--bds-color_blue--subtle)));
|
|
117
118
|
color: var(--alert_text, var(--alert_text--variant, var(--bds-color_on-blue--subtle)));
|
|
118
|
-
border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
|
|
119
|
+
border-inline-start: var(--alert_border-width, var(--alert_border-width--variant, var(--bds-space_s))) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
|
|
119
120
|
font-size: var(--bds-font_size--body);
|
|
120
121
|
line-height: var(--bds-font_line-height--body);
|
|
122
|
+
--alert_border-width--variant: initial;
|
|
121
123
|
}
|
|
122
|
-
.
|
|
124
|
+
.bds2160Alert---variant_info {
|
|
123
125
|
--alert_bg--variant: var(--alert_bg--info, var(--bds-color_blue--subtle));
|
|
124
126
|
--alert_text--variant: var(--alert_text--info, var(--bds-color_on-blue--subtle));
|
|
125
127
|
--alert_border--variant: var(--alert_border--info, var(--bds-color_blue));
|
|
126
128
|
}
|
|
127
|
-
.
|
|
129
|
+
.bds2160Alert---variant_success {
|
|
128
130
|
--alert_bg--variant: var(--alert_bg--success, var(--bds-color_success--subtle));
|
|
129
131
|
--alert_text--variant: var(--alert_text--success, var(--bds-color_on-success--subtle));
|
|
130
132
|
--alert_border--variant: var(--alert_border--success, var(--bds-color_success));
|
|
131
133
|
}
|
|
132
|
-
.
|
|
134
|
+
.bds2160Alert---variant_warning {
|
|
133
135
|
--alert_bg--variant: var(--alert_bg--warning, var(--bds-color_orange--subtle));
|
|
134
136
|
--alert_text--variant: var(--alert_text--warning, var(--bds-color_on-orange--subtle));
|
|
135
137
|
--alert_border--variant: var(--alert_border--warning, var(--bds-color_warning));
|
|
136
138
|
}
|
|
137
|
-
.
|
|
139
|
+
.bds2160Alert---variant_error {
|
|
138
140
|
--alert_bg--variant: var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
|
|
139
141
|
--alert_text--variant: var(--alert_text--error, var(--bds-color_on-bg));
|
|
140
142
|
--alert_border--variant: var(--alert_border--error, var(--bds-color_error));
|
|
141
143
|
}
|
|
142
|
-
.
|
|
144
|
+
.bds2160Alert---appearance_gradient {
|
|
145
|
+
--alert_border-width--variant: 3px;
|
|
146
|
+
background-image: var(--alert_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
|
|
147
|
+
box-shadow: var(--alert_shadow, var(--bds-shadow_s));
|
|
148
|
+
}
|
|
149
|
+
.bds2160Alert---appearance_gradient.bds2160Alert---variant_info {
|
|
150
|
+
--alert_border--variant: var(--alert_border--info, var(--alert_accent--info, var(--bds-color_on-blue--subtle)));
|
|
151
|
+
}
|
|
152
|
+
.bds2160Alert---appearance_gradient.bds2160Alert---variant_success {
|
|
153
|
+
--alert_border--variant: var(--alert_border--success, var(--alert_accent--success, var(--bds-color_on-success--subtle)));
|
|
154
|
+
}
|
|
155
|
+
.bds2160Alert---appearance_gradient.bds2160Alert---variant_warning {
|
|
156
|
+
--alert_border--variant: var(--alert_border--warning, var(--alert_accent--warning, var(--bds-color_warning)));
|
|
157
|
+
}
|
|
158
|
+
.bds2160Alert---appearance_gradient.bds2160Alert---variant_error {
|
|
159
|
+
--alert_border--variant: var(--alert_border--error, var(--alert_accent--error, var(--bds-color_error)));
|
|
160
|
+
}
|
|
161
|
+
.bds2160Alert-icon {
|
|
143
162
|
display: flex;
|
|
144
163
|
align-items: center;
|
|
145
164
|
flex-shrink: 0;
|
|
146
165
|
margin-block-start: 0.1em;
|
|
147
166
|
}
|
|
148
|
-
.
|
|
167
|
+
.bds2160Alert-content {
|
|
149
168
|
flex: 1;
|
|
150
169
|
display: flex;
|
|
151
170
|
flex-direction: column;
|
|
152
171
|
gap: var(--bds-space_xxs);
|
|
153
172
|
}
|
|
154
|
-
.
|
|
173
|
+
.bds2160Alert-title {
|
|
155
174
|
font-weight: var(--bds-font_weight--semibold);
|
|
156
175
|
font-size: var(--bds-font_size--body);
|
|
157
176
|
}
|
|
158
|
-
.
|
|
177
|
+
.bds2160Alert-dismiss {
|
|
159
178
|
all: unset;
|
|
160
179
|
display: flex;
|
|
161
180
|
align-items: center;
|
|
@@ -171,24 +190,24 @@
|
|
|
171
190
|
min-block-size: var(--alert_dismiss-size, 2.75rem);
|
|
172
191
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--alert_dismiss-shadow, var(--bdc-outline_shadow));
|
|
173
192
|
}
|
|
174
|
-
.
|
|
193
|
+
.bds2160Alert-dismiss svg {
|
|
175
194
|
inline-size: 1rem;
|
|
176
195
|
block-size: 1rem;
|
|
177
196
|
}
|
|
178
|
-
.
|
|
197
|
+
.bds2160Alert-dismiss:focus-visible {
|
|
179
198
|
outline: var(--bds-outline_default);
|
|
180
199
|
outline-offset: var(--bds-outline_offset);
|
|
181
200
|
}
|
|
182
201
|
@media (hover: hover) and (pointer: fine) {
|
|
183
|
-
.
|
|
202
|
+
.bds2160Alert-dismiss:hover {
|
|
184
203
|
opacity: var(--alert_dismiss-opacity--hover, 0.7);
|
|
185
204
|
}
|
|
186
205
|
}
|
|
187
206
|
}
|
|
188
207
|
|
|
189
208
|
/* src/components/ui/Avatar/Avatar.module.css */
|
|
190
|
-
@layer boostdev.
|
|
191
|
-
.
|
|
209
|
+
@layer boostdev.bds2160Avatar-component {
|
|
210
|
+
.bds2160Avatar-avatar {
|
|
192
211
|
display: inline-flex;
|
|
193
212
|
align-items: center;
|
|
194
213
|
justify-content: center;
|
|
@@ -198,42 +217,62 @@
|
|
|
198
217
|
border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
|
|
199
218
|
overflow: hidden;
|
|
200
219
|
}
|
|
201
|
-
.
|
|
202
|
-
background-color: var(--avatar_bg, var(--
|
|
203
|
-
color: var(--avatar_text, var(--
|
|
220
|
+
.bds2160Avatar-avatar.bds2160Avatar---fallback {
|
|
221
|
+
background-color: var(--avatar_bg, var(--avatar_bg--variant));
|
|
222
|
+
color: var(--avatar_text, var(--avatar_text--variant));
|
|
204
223
|
font-weight: var(--bds-font_weight--semibold);
|
|
205
224
|
}
|
|
206
|
-
.
|
|
225
|
+
.bds2160Avatar-avatar.bds2160Avatar---tone_primary {
|
|
226
|
+
--avatar_bg--variant: var(--avatar_bg--primary, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
|
|
227
|
+
--avatar_text--variant: var(--avatar_text--primary, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
|
|
228
|
+
}
|
|
229
|
+
.bds2160Avatar-avatar.bds2160Avatar---tone_secondary {
|
|
230
|
+
--avatar_bg--variant: var(--avatar_bg--secondary, var(--bds-color_secondary--subtle, var(--bds-color_blue--subtle)));
|
|
231
|
+
--avatar_text--variant: var(--avatar_text--secondary, var(--bds-color_on-secondary--subtle, var(--bds-color_on-blue--subtle)));
|
|
232
|
+
}
|
|
233
|
+
.bds2160Avatar-avatar.bds2160Avatar---tone_accent-1 {
|
|
234
|
+
--avatar_bg--variant: var(--avatar_bg--accent-1, var(--bds-color_accent-1--subtle, var(--bds-color_green--subtle)));
|
|
235
|
+
--avatar_text--variant: var(--avatar_text--accent-1, var(--bds-color_on-accent-1--subtle, var(--bds-color_on-green--subtle)));
|
|
236
|
+
}
|
|
237
|
+
.bds2160Avatar-avatar.bds2160Avatar---tone_accent-2 {
|
|
238
|
+
--avatar_bg--variant: var(--avatar_bg--accent-2, var(--bds-color_accent-2--subtle, var(--bds-color_orange--subtle)));
|
|
239
|
+
--avatar_text--variant: var(--avatar_text--accent-2, var(--bds-color_on-accent-2--subtle, var(--bds-color_on-orange--subtle)));
|
|
240
|
+
}
|
|
241
|
+
.bds2160Avatar-avatar.bds2160Avatar---tone_accent-3 {
|
|
242
|
+
--avatar_bg--variant: var(--avatar_bg--accent-3, var(--bds-color_accent-3--subtle, var(--bds-color_blue--subtle)));
|
|
243
|
+
--avatar_text--variant: var(--avatar_text--accent-3, var(--bds-color_on-accent-3--subtle, var(--bds-color_on-blue--subtle)));
|
|
244
|
+
}
|
|
245
|
+
.bds2160Avatar-avatar.bds2160Avatar---size_small {
|
|
207
246
|
--avatar_size--variant: 2em;
|
|
208
247
|
}
|
|
209
|
-
.
|
|
248
|
+
.bds2160Avatar-avatar.bds2160Avatar---size_medium {
|
|
210
249
|
--avatar_size--variant: 3em;
|
|
211
250
|
}
|
|
212
|
-
.
|
|
251
|
+
.bds2160Avatar-avatar.bds2160Avatar---size_large {
|
|
213
252
|
--avatar_size--variant: 4.5em;
|
|
214
253
|
}
|
|
215
|
-
.
|
|
254
|
+
.bds2160Avatar-image {
|
|
216
255
|
inline-size: 100%;
|
|
217
256
|
block-size: 100%;
|
|
218
257
|
object-fit: cover;
|
|
219
258
|
display: block;
|
|
220
259
|
}
|
|
221
|
-
.
|
|
260
|
+
.bds2160Avatar-initials {
|
|
222
261
|
line-height: 1;
|
|
223
262
|
user-select: none;
|
|
224
263
|
font-size: var(--bds-font_size--body);
|
|
225
264
|
}
|
|
226
|
-
.
|
|
265
|
+
.bds2160Avatar-avatar.bds2160Avatar---size_small .bds2160Avatar-initials {
|
|
227
266
|
font-size: var(--bds-font_size--body--s);
|
|
228
267
|
}
|
|
229
|
-
.
|
|
268
|
+
.bds2160Avatar-avatar.bds2160Avatar---size_large .bds2160Avatar-initials {
|
|
230
269
|
font-size: var(--bds-font_size--heading-3);
|
|
231
270
|
}
|
|
232
271
|
}
|
|
233
272
|
|
|
234
273
|
/* src/components/ui/Badge/Badge.module.css */
|
|
235
|
-
@layer boostdev.
|
|
236
|
-
.
|
|
274
|
+
@layer boostdev.bds2160Badge-component {
|
|
275
|
+
.bds2160Badge-badge {
|
|
237
276
|
display: inline-flex;
|
|
238
277
|
align-items: center;
|
|
239
278
|
justify-content: center;
|
|
@@ -246,34 +285,34 @@
|
|
|
246
285
|
background-color: var(--badge_bg, var(--badge_bg--variant, var(--bds-color_blue)));
|
|
247
286
|
color: var(--badge_text, var(--badge_text--variant, var(--bds-color_on-blue)));
|
|
248
287
|
}
|
|
249
|
-
.
|
|
288
|
+
.bds2160Badge---variant_primary {
|
|
250
289
|
--badge_bg--variant: var(--badge_bg--primary, var(--bds-color_interactive));
|
|
251
290
|
--badge_text--variant: var(--badge_text--primary, var(--bds-color_on-interactive));
|
|
252
291
|
}
|
|
253
|
-
.
|
|
292
|
+
.bds2160Badge---variant_secondary {
|
|
254
293
|
--badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_bg));
|
|
255
294
|
--badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
|
|
256
295
|
}
|
|
257
|
-
.
|
|
296
|
+
.bds2160Badge---variant_success {
|
|
258
297
|
--badge_bg--variant: var(--badge_bg--success, var(--bds-color_success));
|
|
259
298
|
--badge_text--variant: var(--badge_text--success, var(--bds-color_on-success));
|
|
260
299
|
}
|
|
261
|
-
.
|
|
300
|
+
.bds2160Badge---variant_error {
|
|
262
301
|
--badge_bg--variant: var(--badge_bg--error, var(--bds-color_error));
|
|
263
302
|
--badge_text--variant: var(--badge_text--error, var(--bds-color_on-error));
|
|
264
303
|
}
|
|
265
|
-
.
|
|
304
|
+
.bds2160Badge---variant_warning {
|
|
266
305
|
--badge_bg--variant: var(--badge_bg--warning, var(--bds-color_warning));
|
|
267
306
|
--badge_text--variant: var(--badge_text--warning, var(--bds-color_on-warning));
|
|
268
307
|
}
|
|
269
308
|
}
|
|
270
309
|
|
|
271
310
|
/* src/components/ui/Breadcrumb/Breadcrumb.module.css */
|
|
272
|
-
@layer boostdev.
|
|
273
|
-
.
|
|
311
|
+
@layer boostdev.bds2160Breadcrumb-component {
|
|
312
|
+
.bds2160Breadcrumb-breadcrumb {
|
|
274
313
|
font-size: var(--bds-font_size--body--s);
|
|
275
314
|
}
|
|
276
|
-
.
|
|
315
|
+
.bds2160Breadcrumb-list {
|
|
277
316
|
display: flex;
|
|
278
317
|
flex-wrap: wrap;
|
|
279
318
|
align-items: center;
|
|
@@ -282,52 +321,51 @@
|
|
|
282
321
|
margin: 0;
|
|
283
322
|
padding: 0;
|
|
284
323
|
}
|
|
285
|
-
.
|
|
324
|
+
.bds2160Breadcrumb-item {
|
|
286
325
|
display: flex;
|
|
287
326
|
align-items: center;
|
|
288
327
|
gap: var(--bds-space_xxs);
|
|
289
328
|
}
|
|
290
|
-
.
|
|
329
|
+
.bds2160Breadcrumb-link {
|
|
291
330
|
color: var(--bds-color_interactive_on-bg);
|
|
292
331
|
text-decoration: none;
|
|
293
332
|
transition: var(--bds-animation_transition);
|
|
294
333
|
}
|
|
295
|
-
.
|
|
334
|
+
.bds2160Breadcrumb-link:focus-visible {
|
|
296
335
|
outline: var(--bds-outline_default);
|
|
297
336
|
outline-offset: var(--bds-outline_offset);
|
|
298
337
|
border-radius: var(--bds-border_radius--xs);
|
|
299
338
|
}
|
|
300
339
|
@media (hover: hover) and (pointer: fine) {
|
|
301
|
-
.
|
|
340
|
+
.bds2160Breadcrumb-link:hover {
|
|
302
341
|
text-decoration: underline;
|
|
303
342
|
text-underline-offset: 0.2em;
|
|
304
343
|
}
|
|
305
344
|
}
|
|
306
|
-
.
|
|
345
|
+
.bds2160Breadcrumb-separator {
|
|
307
346
|
color: var(--bds-color_on-bg--subtle);
|
|
308
347
|
user-select: none;
|
|
309
348
|
}
|
|
310
|
-
.
|
|
349
|
+
.bds2160Breadcrumb-text {
|
|
311
350
|
color: var(--bds-color_on-bg--subtle);
|
|
312
351
|
}
|
|
313
|
-
.
|
|
352
|
+
.bds2160Breadcrumb-current {
|
|
314
353
|
color: var(--bds-color_on-bg--subtle);
|
|
315
354
|
font-weight: var(--bds-font_weight--semibold);
|
|
316
355
|
}
|
|
317
356
|
}
|
|
318
357
|
|
|
319
358
|
/* src/components/ui/Collapsible/Collapsible.module.css */
|
|
320
|
-
@layer boostdev.
|
|
321
|
-
.
|
|
359
|
+
@layer boostdev.bds2160Collapsible-component {
|
|
360
|
+
.bds2160Collapsible-collapsible {
|
|
322
361
|
border: var(--collapsible_border, none);
|
|
323
362
|
--bdc_color: var(--collapsible_border-color, var(--bds-color_bg--subtle));
|
|
324
|
-
--bdc-outline_width: var(--collapsible_border-width, 1px);
|
|
325
363
|
--bdc-outline_radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
|
|
326
364
|
border-radius: var(--bdc-outline_radius);
|
|
327
|
-
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
365
|
+
box-shadow: inset 0 0 0 var(--collapsible_border-width, var(--bdc-outline_width)) var(--bdc_color);
|
|
328
366
|
overflow: hidden;
|
|
329
367
|
}
|
|
330
|
-
.
|
|
368
|
+
.bds2160Collapsible-summary {
|
|
331
369
|
list-style: none;
|
|
332
370
|
display: flex;
|
|
333
371
|
align-items: center;
|
|
@@ -342,25 +380,25 @@
|
|
|
342
380
|
user-select: none;
|
|
343
381
|
transition: var(--bds-animation_transition);
|
|
344
382
|
}
|
|
345
|
-
.
|
|
383
|
+
.bds2160Collapsible-summary::-webkit-details-marker {
|
|
346
384
|
display: none;
|
|
347
385
|
}
|
|
348
|
-
.
|
|
386
|
+
.bds2160Collapsible-summary:focus-visible {
|
|
349
387
|
outline: var(--bds-outline_default);
|
|
350
388
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
351
389
|
}
|
|
352
390
|
@media (hover: hover) and (pointer: fine) {
|
|
353
|
-
.
|
|
391
|
+
.bds2160Collapsible-summary:hover {
|
|
354
392
|
background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
|
|
355
393
|
}
|
|
356
394
|
}
|
|
357
|
-
.
|
|
395
|
+
.bds2160Collapsible-collapsible[open] > .bds2160Collapsible-summary {
|
|
358
396
|
border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
|
|
359
397
|
}
|
|
360
|
-
.
|
|
398
|
+
.bds2160Collapsible-summaryContent {
|
|
361
399
|
flex: 1;
|
|
362
400
|
}
|
|
363
|
-
.
|
|
401
|
+
.bds2160Collapsible-icon {
|
|
364
402
|
inline-size: 0.5rem;
|
|
365
403
|
block-size: 0.5rem;
|
|
366
404
|
border-inline-end: 2px solid currentcolor;
|
|
@@ -369,25 +407,25 @@
|
|
|
369
407
|
flex-shrink: 0;
|
|
370
408
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
371
409
|
}
|
|
372
|
-
.
|
|
410
|
+
.bds2160Collapsible-collapsible[open] > .bds2160Collapsible-summary .bds2160Collapsible-icon {
|
|
373
411
|
transform: rotate(-135deg);
|
|
374
412
|
}
|
|
375
|
-
.
|
|
413
|
+
.bds2160Collapsible-content {
|
|
376
414
|
padding: var(--bds-space_m);
|
|
377
415
|
color: var(--collapsible_on-color, var(--bds-color_on-bg));
|
|
378
416
|
font-size: var(--bds-font_size--body);
|
|
379
417
|
line-height: var(--bds-font_line-height--body);
|
|
380
418
|
}
|
|
381
419
|
@media (prefers-reduced-motion: reduce) {
|
|
382
|
-
.
|
|
420
|
+
.bds2160Collapsible-icon {
|
|
383
421
|
transition: none;
|
|
384
422
|
}
|
|
385
423
|
}
|
|
386
424
|
}
|
|
387
425
|
|
|
388
426
|
/* src/components/ui/Calendar/Calendar.module.css */
|
|
389
|
-
@layer boostdev.
|
|
390
|
-
.
|
|
427
|
+
@layer boostdev.bds2160Calendar-component {
|
|
428
|
+
.bds2160Calendar-calendar {
|
|
391
429
|
display: inline-block;
|
|
392
430
|
inline-size: fit-content;
|
|
393
431
|
max-inline-size: 100%;
|
|
@@ -399,36 +437,36 @@
|
|
|
399
437
|
padding: var(--bds-space_m);
|
|
400
438
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
|
|
401
439
|
}
|
|
402
|
-
.
|
|
440
|
+
.bds2160Calendar-months {
|
|
403
441
|
display: flex;
|
|
404
442
|
flex-wrap: wrap;
|
|
405
443
|
gap: var(--bds-space_l);
|
|
406
444
|
}
|
|
407
|
-
.
|
|
445
|
+
.bds2160Calendar-month {
|
|
408
446
|
display: flex;
|
|
409
447
|
flex-direction: column;
|
|
410
448
|
gap: var(--bds-space_s);
|
|
411
449
|
inline-size: var(--calendar_size, 17rem);
|
|
412
450
|
max-inline-size: 100%;
|
|
413
451
|
}
|
|
414
|
-
.
|
|
452
|
+
.bds2160Calendar-monthHeader {
|
|
415
453
|
display: flex;
|
|
416
454
|
align-items: center;
|
|
417
455
|
justify-content: space-between;
|
|
418
456
|
gap: var(--bds-space_xs);
|
|
419
457
|
}
|
|
420
|
-
.
|
|
458
|
+
.bds2160Calendar-navSlot {
|
|
421
459
|
display: inline-flex;
|
|
422
460
|
inline-size: 2.75rem;
|
|
423
461
|
block-size: 2.75rem;
|
|
424
462
|
flex: none;
|
|
425
463
|
}
|
|
426
|
-
.
|
|
464
|
+
.bds2160Calendar-monthYear {
|
|
427
465
|
font-size: var(--bds-font_size--body);
|
|
428
466
|
font-weight: var(--bds-font_weight--semibold);
|
|
429
467
|
color: var(--bds-color_on-bg);
|
|
430
468
|
}
|
|
431
|
-
.
|
|
469
|
+
.bds2160Calendar-navBtn {
|
|
432
470
|
all: unset;
|
|
433
471
|
display: flex;
|
|
434
472
|
align-items: center;
|
|
@@ -440,28 +478,28 @@
|
|
|
440
478
|
color: var(--bds-color_on-bg);
|
|
441
479
|
transition: var(--bds-animation_transition);
|
|
442
480
|
}
|
|
443
|
-
.
|
|
481
|
+
.bds2160Calendar-navBtn svg {
|
|
444
482
|
inline-size: 1rem;
|
|
445
483
|
block-size: 1rem;
|
|
446
484
|
}
|
|
447
|
-
.
|
|
485
|
+
.bds2160Calendar-navBtn:focus-visible {
|
|
448
486
|
outline: var(--bds-outline_default);
|
|
449
487
|
outline-offset: var(--bds-outline_offset);
|
|
450
488
|
}
|
|
451
489
|
@media (hover: hover) and (pointer: fine) {
|
|
452
|
-
.
|
|
490
|
+
.bds2160Calendar-navBtn:hover {
|
|
453
491
|
background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
|
|
454
492
|
}
|
|
455
493
|
}
|
|
456
|
-
.
|
|
494
|
+
.bds2160Calendar-grid {
|
|
457
495
|
display: grid;
|
|
458
496
|
grid-template-columns: repeat(7, 1fr);
|
|
459
497
|
gap: var(--bds-space_xxxs);
|
|
460
498
|
}
|
|
461
|
-
.
|
|
499
|
+
.bds2160Calendar-row {
|
|
462
500
|
display: contents;
|
|
463
501
|
}
|
|
464
|
-
.
|
|
502
|
+
.bds2160Calendar-weekday {
|
|
465
503
|
display: flex;
|
|
466
504
|
align-items: center;
|
|
467
505
|
justify-content: center;
|
|
@@ -471,11 +509,11 @@
|
|
|
471
509
|
color: var(--bds-color_on-bg--subtle);
|
|
472
510
|
user-select: none;
|
|
473
511
|
}
|
|
474
|
-
.
|
|
512
|
+
.bds2160Calendar-cell {
|
|
475
513
|
display: flex;
|
|
476
514
|
aspect-ratio: 1;
|
|
477
515
|
}
|
|
478
|
-
.
|
|
516
|
+
.bds2160Calendar-day {
|
|
479
517
|
all: unset;
|
|
480
518
|
box-sizing: border-box;
|
|
481
519
|
display: flex;
|
|
@@ -489,60 +527,60 @@
|
|
|
489
527
|
cursor: pointer;
|
|
490
528
|
transition: var(--bds-animation_transition);
|
|
491
529
|
}
|
|
492
|
-
.
|
|
530
|
+
.bds2160Calendar-day:focus-visible {
|
|
493
531
|
outline: var(--bds-outline_default);
|
|
494
532
|
outline-offset: var(--bds-outline_offset);
|
|
495
533
|
}
|
|
496
534
|
@media (hover: hover) and (pointer: fine) {
|
|
497
|
-
.
|
|
535
|
+
.bds2160Calendar-day:not(.bds2160Calendar-disabled, .bds2160Calendar-selected, .bds2160Calendar-rangeStart, .bds2160Calendar-rangeEnd):hover {
|
|
498
536
|
background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
|
|
499
537
|
}
|
|
500
538
|
}
|
|
501
|
-
.
|
|
539
|
+
.bds2160Calendar-outside {
|
|
502
540
|
color: var(--bds-color_on-bg--subtle);
|
|
503
541
|
opacity: 0.4;
|
|
504
542
|
}
|
|
505
|
-
.
|
|
543
|
+
.bds2160Calendar-today {
|
|
506
544
|
font-weight: var(--bds-font_weight--semibold);
|
|
507
545
|
--bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
|
|
508
546
|
border: var(--calendar_today-border, none);
|
|
509
547
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_today-shadow, var(--bdc-outline_shadow));
|
|
510
548
|
}
|
|
511
|
-
.
|
|
549
|
+
.bds2160Calendar-selected {
|
|
512
550
|
background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
|
|
513
551
|
color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
|
|
514
552
|
font-weight: var(--bds-font_weight--semibold);
|
|
515
553
|
}
|
|
516
|
-
.
|
|
554
|
+
.bds2160Calendar-inRange {
|
|
517
555
|
background-color: var(--calendar_day-bg--in-range, var(--bds-color_blue--subtle));
|
|
518
556
|
border-radius: 0;
|
|
519
557
|
}
|
|
520
|
-
.
|
|
521
|
-
.
|
|
558
|
+
.bds2160Calendar-rangeStart,
|
|
559
|
+
.bds2160Calendar-rangeEnd {
|
|
522
560
|
background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
|
|
523
561
|
color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
|
|
524
562
|
font-weight: var(--bds-font_weight--semibold);
|
|
525
563
|
}
|
|
526
|
-
.
|
|
564
|
+
.bds2160Calendar-disabled {
|
|
527
565
|
opacity: 0.35;
|
|
528
566
|
cursor: not-allowed;
|
|
529
567
|
}
|
|
530
568
|
@media (prefers-reduced-motion: reduce) {
|
|
531
|
-
.
|
|
569
|
+
.bds2160Calendar-day {
|
|
532
570
|
transition: none;
|
|
533
571
|
}
|
|
534
572
|
}
|
|
535
573
|
}
|
|
536
574
|
|
|
537
575
|
/* src/components/ui/Carousel/Carousel.module.css */
|
|
538
|
-
@layer boostdev.
|
|
539
|
-
.
|
|
576
|
+
@layer boostdev.bds2160Carousel-component {
|
|
577
|
+
.bds2160Carousel-carousel {
|
|
540
578
|
position: relative;
|
|
541
579
|
display: flex;
|
|
542
580
|
align-items: center;
|
|
543
581
|
gap: var(--bds-space_xs);
|
|
544
582
|
}
|
|
545
|
-
.
|
|
583
|
+
.bds2160Carousel-track {
|
|
546
584
|
display: flex;
|
|
547
585
|
gap: var(--bds-space_m);
|
|
548
586
|
overflow-inline: auto;
|
|
@@ -551,14 +589,14 @@
|
|
|
551
589
|
flex: 1;
|
|
552
590
|
scroll-behavior: smooth;
|
|
553
591
|
}
|
|
554
|
-
.
|
|
592
|
+
.bds2160Carousel-track::-webkit-scrollbar {
|
|
555
593
|
display: none;
|
|
556
594
|
}
|
|
557
|
-
.
|
|
595
|
+
.bds2160Carousel-slide {
|
|
558
596
|
scroll-snap-align: start;
|
|
559
597
|
flex-shrink: 0;
|
|
560
598
|
}
|
|
561
|
-
.
|
|
599
|
+
.bds2160Carousel-navBtn {
|
|
562
600
|
all: unset;
|
|
563
601
|
display: flex;
|
|
564
602
|
align-items: center;
|
|
@@ -575,29 +613,29 @@
|
|
|
575
613
|
flex-shrink: 0;
|
|
576
614
|
transition: var(--bds-animation_transition);
|
|
577
615
|
}
|
|
578
|
-
.
|
|
616
|
+
.bds2160Carousel-navBtn svg {
|
|
579
617
|
inline-size: 1.25rem;
|
|
580
618
|
block-size: 1.25rem;
|
|
581
619
|
}
|
|
582
|
-
.
|
|
620
|
+
.bds2160Carousel-navBtn:focus-visible {
|
|
583
621
|
outline: var(--bds-outline_default);
|
|
584
622
|
outline-offset: var(--bds-outline_offset);
|
|
585
623
|
}
|
|
586
624
|
@media (hover: hover) and (pointer: fine) {
|
|
587
|
-
.
|
|
625
|
+
.bds2160Carousel-navBtn:hover {
|
|
588
626
|
background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
|
|
589
627
|
}
|
|
590
628
|
}
|
|
591
629
|
@media (prefers-reduced-motion: reduce) {
|
|
592
|
-
.
|
|
630
|
+
.bds2160Carousel-track {
|
|
593
631
|
scroll-behavior: auto;
|
|
594
632
|
}
|
|
595
633
|
}
|
|
596
634
|
}
|
|
597
635
|
|
|
598
636
|
/* src/components/ui/DescriptionList/DescriptionList.module.css */
|
|
599
|
-
@layer boostdev.
|
|
600
|
-
.
|
|
637
|
+
@layer boostdev.bds2160DescriptionList-component {
|
|
638
|
+
.bds2160DescriptionList-list {
|
|
601
639
|
display: flex;
|
|
602
640
|
flex-direction: column;
|
|
603
641
|
gap: var(--bds-space_s);
|
|
@@ -606,61 +644,61 @@
|
|
|
606
644
|
font-size: var(--bds-font_size--body);
|
|
607
645
|
color: var(--bds-color_on-bg);
|
|
608
646
|
}
|
|
609
|
-
.
|
|
647
|
+
.bds2160DescriptionList-group {
|
|
610
648
|
display: flex;
|
|
611
649
|
flex-direction: column;
|
|
612
650
|
gap: var(--bds-space_xxs);
|
|
613
651
|
}
|
|
614
|
-
.
|
|
652
|
+
.bds2160DescriptionList-term {
|
|
615
653
|
font-weight: var(--bds-font_weight--semibold);
|
|
616
654
|
color: var(--bds-color_on-bg);
|
|
617
655
|
}
|
|
618
|
-
.
|
|
656
|
+
.bds2160DescriptionList-details {
|
|
619
657
|
margin: 0;
|
|
620
658
|
color: var(--bds-color_on-bg);
|
|
621
659
|
}
|
|
622
|
-
.
|
|
660
|
+
.bds2160DescriptionList---layout_inline .bds2160DescriptionList-group {
|
|
623
661
|
display: grid;
|
|
624
662
|
grid-template-columns: minmax(8rem, 1fr) 2fr;
|
|
625
663
|
gap: var(--bds-space_xs);
|
|
626
664
|
align-items: baseline;
|
|
627
665
|
}
|
|
628
|
-
.
|
|
666
|
+
.bds2160DescriptionList---layout_inline .bds2160DescriptionList-term {
|
|
629
667
|
grid-column: 1;
|
|
630
668
|
}
|
|
631
|
-
.
|
|
669
|
+
.bds2160DescriptionList---layout_inline .bds2160DescriptionList-details {
|
|
632
670
|
grid-column: 2;
|
|
633
671
|
}
|
|
634
672
|
}
|
|
635
673
|
|
|
636
674
|
/* src/components/ui/Link/Link.module.css */
|
|
637
|
-
@layer boostdev.
|
|
638
|
-
.
|
|
675
|
+
@layer boostdev.bds2160Link-component {
|
|
676
|
+
.bds2160Link-link {
|
|
639
677
|
color: var(--link_color, var(--link_color--variant, var(--bds-color_interactive_on-bg)));
|
|
640
678
|
text-decoration: underline;
|
|
641
679
|
text-underline-offset: 0.2em;
|
|
642
680
|
transition: var(--bds-animation_transition);
|
|
643
681
|
cursor: pointer;
|
|
644
682
|
}
|
|
645
|
-
.
|
|
683
|
+
.bds2160Link-link:focus-visible {
|
|
646
684
|
outline: var(--bds-outline_default);
|
|
647
685
|
outline-offset: var(--bds-outline_offset);
|
|
648
686
|
border-radius: var(--bds-border_radius--xs);
|
|
649
687
|
}
|
|
650
688
|
@media (hover: hover) and (pointer: fine) {
|
|
651
|
-
.
|
|
689
|
+
.bds2160Link-link:hover {
|
|
652
690
|
color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
|
|
653
691
|
}
|
|
654
692
|
}
|
|
655
|
-
.
|
|
693
|
+
.bds2160Link---variant_default {
|
|
656
694
|
--link_color--variant: var(--link_color--default, var(--bds-color_interactive_on-bg));
|
|
657
695
|
--link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
|
|
658
696
|
}
|
|
659
|
-
.
|
|
697
|
+
.bds2160Link---variant_subtle {
|
|
660
698
|
--link_color--variant: var(--link_color--subtle, var(--bds-color_on-bg));
|
|
661
699
|
--link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
|
|
662
700
|
}
|
|
663
|
-
.
|
|
701
|
+
.bds2160Link---variant_standalone {
|
|
664
702
|
--link_color--variant: var(--link_color--standalone, var(--bds-color_interactive_on-bg));
|
|
665
703
|
--link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
|
|
666
704
|
display: inline-flex;
|
|
@@ -670,12 +708,12 @@
|
|
|
670
708
|
text-decoration: none;
|
|
671
709
|
}
|
|
672
710
|
@media (hover: hover) and (pointer: fine) {
|
|
673
|
-
.
|
|
711
|
+
.bds2160Link---variant_standalone:hover {
|
|
674
712
|
text-decoration: underline;
|
|
675
713
|
text-underline-offset: 0.2em;
|
|
676
714
|
}
|
|
677
715
|
}
|
|
678
|
-
.
|
|
716
|
+
.bds2160Link-externalLabel {
|
|
679
717
|
position: absolute;
|
|
680
718
|
inline-size: 1px;
|
|
681
719
|
block-size: 1px;
|
|
@@ -689,13 +727,13 @@
|
|
|
689
727
|
}
|
|
690
728
|
|
|
691
729
|
/* src/components/ui/Loading/Loading.module.css */
|
|
692
|
-
@layer boostdev.
|
|
693
|
-
.
|
|
730
|
+
@layer boostdev.bds2160Loading-component {
|
|
731
|
+
.bds2160Loading-loading {
|
|
694
732
|
display: flex;
|
|
695
733
|
justify-content: center;
|
|
696
734
|
align-items: center;
|
|
697
735
|
}
|
|
698
|
-
.
|
|
736
|
+
.bds2160Loading-spinner {
|
|
699
737
|
inline-size: 2.5em;
|
|
700
738
|
block-size: 2.5em;
|
|
701
739
|
border: 4px solid var(--bds-color_bg);
|
|
@@ -703,18 +741,18 @@
|
|
|
703
741
|
border-radius: var(--loading_radius, var(--bds-border_radius--circle));
|
|
704
742
|
animation: spin 1s linear infinite;
|
|
705
743
|
}
|
|
706
|
-
.
|
|
744
|
+
.bds2160Loading---size_small .bds2160Loading-spinner {
|
|
707
745
|
inline-size: 1.5em;
|
|
708
746
|
block-size: 1.5em;
|
|
709
747
|
border-width: 2px;
|
|
710
748
|
}
|
|
711
|
-
.
|
|
749
|
+
.bds2160Loading---size_large .bds2160Loading-spinner {
|
|
712
750
|
inline-size: 4em;
|
|
713
751
|
block-size: 4em;
|
|
714
752
|
border-width: 6px;
|
|
715
753
|
}
|
|
716
754
|
@media (prefers-reduced-motion: reduce) {
|
|
717
|
-
.
|
|
755
|
+
.bds2160Loading-spinner {
|
|
718
756
|
animation: none;
|
|
719
757
|
}
|
|
720
758
|
}
|
|
@@ -729,46 +767,67 @@
|
|
|
729
767
|
}
|
|
730
768
|
|
|
731
769
|
/* src/components/ui/NotificationBanner/NotificationBanner.module.css */
|
|
732
|
-
@layer boostdev.
|
|
733
|
-
.
|
|
770
|
+
@layer boostdev.bds2160NotificationBanner-component {
|
|
771
|
+
.bds2160NotificationBanner-banner {
|
|
734
772
|
display: flex;
|
|
735
773
|
align-items: center;
|
|
736
774
|
gap: var(--bds-space_m);
|
|
737
775
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
738
776
|
background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
|
|
739
777
|
color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
|
|
740
|
-
border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
|
|
778
|
+
border-block-end: var(--banner_border-width, 3px) solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
|
|
741
779
|
font-size: var(--bds-font_size--body);
|
|
742
780
|
line-height: var(--bds-font_line-height--body);
|
|
743
781
|
inline-size: 100%;
|
|
744
782
|
}
|
|
745
|
-
.
|
|
783
|
+
.bds2160NotificationBanner---variant_info {
|
|
746
784
|
--banner_bg--variant: var(--banner_bg--info, var(--bds-color_blue--subtle));
|
|
747
785
|
--banner_text--variant: var(--banner_text--info, var(--bds-color_on-blue--subtle));
|
|
748
786
|
--banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
|
|
749
787
|
}
|
|
750
|
-
.
|
|
788
|
+
.bds2160NotificationBanner---variant_success {
|
|
751
789
|
--banner_bg--variant: var(--banner_bg--success, var(--bds-color_success--subtle));
|
|
752
790
|
--banner_text--variant: var(--banner_text--success, var(--bds-color_on-success--subtle));
|
|
753
791
|
--banner_border--variant: var(--banner_border--success, var(--bds-color_success));
|
|
754
792
|
}
|
|
755
|
-
.
|
|
793
|
+
.bds2160NotificationBanner---variant_warning {
|
|
756
794
|
--banner_bg--variant: var(--banner_bg--warning, var(--bds-color_orange--subtle));
|
|
757
795
|
--banner_text--variant: var(--banner_text--warning, var(--bds-color_on-orange--subtle));
|
|
758
796
|
--banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
|
|
759
797
|
}
|
|
760
|
-
.
|
|
798
|
+
.bds2160NotificationBanner---variant_error {
|
|
761
799
|
--banner_bg--variant: var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
|
|
762
800
|
--banner_text--variant: var(--banner_text--error, var(--bds-color_on-bg));
|
|
763
801
|
--banner_border--variant: var(--banner_border--error, var(--bds-color_error));
|
|
764
802
|
}
|
|
765
|
-
.
|
|
803
|
+
.bds2160NotificationBanner---appearance_gradient {
|
|
804
|
+
background-image: var(--banner_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
|
|
805
|
+
box-shadow: var(--banner_shadow, var(--bds-shadow_s));
|
|
806
|
+
}
|
|
807
|
+
.bds2160NotificationBanner---appearance_gradient.bds2160NotificationBanner---variant_info {
|
|
808
|
+
--banner_border--variant: var(--banner_border--info, var(--banner_accent--info, var(--bds-color_on-blue--subtle)));
|
|
809
|
+
}
|
|
810
|
+
.bds2160NotificationBanner---appearance_gradient.bds2160NotificationBanner---variant_success {
|
|
811
|
+
--banner_border--variant: var(--banner_border--success, var(--banner_accent--success, var(--bds-color_on-success--subtle)));
|
|
812
|
+
}
|
|
813
|
+
.bds2160NotificationBanner---appearance_gradient.bds2160NotificationBanner---variant_warning {
|
|
814
|
+
--banner_border--variant: var(--banner_border--warning, var(--banner_accent--warning, var(--bds-color_warning)));
|
|
815
|
+
}
|
|
816
|
+
.bds2160NotificationBanner---appearance_gradient.bds2160NotificationBanner---variant_error {
|
|
817
|
+
--banner_border--variant: var(--banner_border--error, var(--banner_accent--error, var(--bds-color_error)));
|
|
818
|
+
}
|
|
819
|
+
.bds2160NotificationBanner-icon {
|
|
820
|
+
display: flex;
|
|
821
|
+
align-items: center;
|
|
822
|
+
flex-shrink: 0;
|
|
823
|
+
}
|
|
824
|
+
.bds2160NotificationBanner-content {
|
|
766
825
|
flex: 1;
|
|
767
826
|
}
|
|
768
|
-
.
|
|
827
|
+
.bds2160NotificationBanner-action {
|
|
769
828
|
flex-shrink: 0;
|
|
770
829
|
}
|
|
771
|
-
.
|
|
830
|
+
.bds2160NotificationBanner-dismiss {
|
|
772
831
|
all: unset;
|
|
773
832
|
display: flex;
|
|
774
833
|
align-items: center;
|
|
@@ -784,28 +843,28 @@
|
|
|
784
843
|
--bdc_color: currentcolor;
|
|
785
844
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
786
845
|
}
|
|
787
|
-
.
|
|
846
|
+
.bds2160NotificationBanner-dismiss svg {
|
|
788
847
|
inline-size: 1rem;
|
|
789
848
|
block-size: 1rem;
|
|
790
849
|
}
|
|
791
|
-
.
|
|
850
|
+
.bds2160NotificationBanner-dismiss:focus-visible {
|
|
792
851
|
outline: var(--bds-outline_default);
|
|
793
852
|
outline-offset: var(--bds-outline_offset);
|
|
794
853
|
}
|
|
795
854
|
@media (hover: hover) and (pointer: fine) {
|
|
796
|
-
.
|
|
855
|
+
.bds2160NotificationBanner-dismiss:hover {
|
|
797
856
|
opacity: var(--banner_dismiss-opacity--hover, 0.7);
|
|
798
857
|
}
|
|
799
858
|
}
|
|
800
859
|
}
|
|
801
860
|
|
|
802
861
|
/* src/components/ui/Pagination/Pagination.module.css */
|
|
803
|
-
@layer boostdev.
|
|
804
|
-
.
|
|
862
|
+
@layer boostdev.bds2160Pagination-component {
|
|
863
|
+
.bds2160Pagination-pagination {
|
|
805
864
|
display: flex;
|
|
806
865
|
justify-content: center;
|
|
807
866
|
}
|
|
808
|
-
.
|
|
867
|
+
.bds2160Pagination-list {
|
|
809
868
|
display: flex;
|
|
810
869
|
align-items: center;
|
|
811
870
|
gap: var(--bds-space_xxs);
|
|
@@ -813,10 +872,10 @@
|
|
|
813
872
|
margin: 0;
|
|
814
873
|
padding: 0;
|
|
815
874
|
}
|
|
816
|
-
.
|
|
875
|
+
.bds2160Pagination-list li {
|
|
817
876
|
list-style: none;
|
|
818
877
|
}
|
|
819
|
-
.
|
|
878
|
+
.bds2160Pagination-button {
|
|
820
879
|
all: unset;
|
|
821
880
|
display: inline-flex;
|
|
822
881
|
align-items: center;
|
|
@@ -837,30 +896,30 @@
|
|
|
837
896
|
transition: var(--bds-animation_transition);
|
|
838
897
|
box-sizing: border-box;
|
|
839
898
|
}
|
|
840
|
-
.
|
|
899
|
+
.bds2160Pagination-button:disabled {
|
|
841
900
|
opacity: 0.4;
|
|
842
901
|
cursor: not-allowed;
|
|
843
902
|
}
|
|
844
|
-
.
|
|
903
|
+
.bds2160Pagination-button:focus-visible {
|
|
845
904
|
outline: var(--bds-outline_default);
|
|
846
905
|
outline-offset: var(--bds-outline_offset);
|
|
847
906
|
}
|
|
848
907
|
@media (hover: hover) and (pointer: fine) {
|
|
849
|
-
.
|
|
908
|
+
.bds2160Pagination-button:not(:disabled, .bds2160Pagination---active):hover {
|
|
850
909
|
--btn_bg--state: var(--pagination_item-bg--hover, var(--btn_bg--hover, var(--bds-color_bg--subtle)));
|
|
851
910
|
--btn_color--state: var(--pagination_item-color--hover, var(--btn_color--hover, var(--bds-color_interactive_on-bg)));
|
|
852
911
|
}
|
|
853
912
|
}
|
|
854
|
-
.
|
|
913
|
+
.bds2160Pagination-button.bds2160Pagination---active {
|
|
855
914
|
--btn_bg--state: var(--pagination_item-bg--active, var(--btn_bg--active, var(--bdc-color_active)));
|
|
856
915
|
--btn_color--state: var(--pagination_item-color--active, var(--btn_color--active, var(--bdc-color_on-active)));
|
|
857
916
|
--btn_border--state: var(--pagination_item-border--active, var(--btn_border--active, var(--bdc-color_active)));
|
|
858
917
|
}
|
|
859
|
-
.
|
|
918
|
+
.bds2160Pagination-button.bds2160Pagination---nav svg {
|
|
860
919
|
inline-size: 1rem;
|
|
861
920
|
block-size: 1rem;
|
|
862
921
|
}
|
|
863
|
-
.
|
|
922
|
+
.bds2160Pagination-ellipsis {
|
|
864
923
|
display: inline-flex;
|
|
865
924
|
align-items: center;
|
|
866
925
|
justify-content: center;
|
|
@@ -873,71 +932,71 @@
|
|
|
873
932
|
}
|
|
874
933
|
|
|
875
934
|
/* src/components/ui/Progress/Progress.module.css */
|
|
876
|
-
@layer boostdev.
|
|
877
|
-
.
|
|
935
|
+
@layer boostdev.bds2160Progress-component {
|
|
936
|
+
.bds2160Progress-container {
|
|
878
937
|
display: flex;
|
|
879
938
|
flex-direction: column;
|
|
880
939
|
gap: var(--bds-space_xxs);
|
|
881
940
|
inline-size: 100%;
|
|
882
941
|
}
|
|
883
|
-
.
|
|
942
|
+
.bds2160Progress-labelRow {
|
|
884
943
|
display: flex;
|
|
885
944
|
justify-content: space-between;
|
|
886
945
|
align-items: baseline;
|
|
887
946
|
font-size: var(--bds-font_size--body--s);
|
|
888
947
|
color: var(--bds-color_on-bg);
|
|
889
948
|
}
|
|
890
|
-
.
|
|
949
|
+
.bds2160Progress-value {
|
|
891
950
|
font-variant-numeric: tabular-nums;
|
|
892
951
|
}
|
|
893
|
-
.
|
|
952
|
+
.bds2160Progress-track {
|
|
894
953
|
inline-size: 100%;
|
|
895
954
|
block-size: var(--progress_height, var(--bds-space_xs));
|
|
896
955
|
background-color: var(--progress_color-track, var(--bds-color_bg--subtle));
|
|
897
956
|
border-radius: var(--progress_radius, var(--bds-border_radius--full));
|
|
898
957
|
overflow: hidden;
|
|
899
958
|
}
|
|
900
|
-
.
|
|
959
|
+
.bds2160Progress-track.bds2160Progress---size_small {
|
|
901
960
|
--progress_height: var(--bds-space_xxs);
|
|
902
961
|
}
|
|
903
|
-
.
|
|
962
|
+
.bds2160Progress-track.bds2160Progress---size_medium {
|
|
904
963
|
--progress_height: var(--bds-space_xs);
|
|
905
964
|
}
|
|
906
|
-
.
|
|
965
|
+
.bds2160Progress-track.bds2160Progress---size_large {
|
|
907
966
|
--progress_height: var(--bds-space_s);
|
|
908
967
|
}
|
|
909
|
-
.
|
|
968
|
+
.bds2160Progress-fill {
|
|
910
969
|
block-size: 100%;
|
|
911
970
|
background-color: var(--progress_color-active, var(--bdc-color_active));
|
|
912
971
|
border-radius: var(--progress_radius, var(--bds-border_radius--full));
|
|
913
972
|
transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
914
973
|
}
|
|
915
974
|
@media (prefers-reduced-motion: reduce) {
|
|
916
|
-
.
|
|
975
|
+
.bds2160Progress-fill {
|
|
917
976
|
transition: none;
|
|
918
977
|
}
|
|
919
978
|
}
|
|
920
979
|
}
|
|
921
980
|
|
|
922
981
|
/* src/components/ui/ProgressCircle/ProgressCircle.module.css */
|
|
923
|
-
@layer boostdev.
|
|
924
|
-
.
|
|
982
|
+
@layer boostdev.bds2160ProgressCircle-component {
|
|
983
|
+
.bds2160ProgressCircle-wrapper {
|
|
925
984
|
position: relative;
|
|
926
985
|
display: inline-flex;
|
|
927
986
|
align-items: center;
|
|
928
987
|
justify-content: center;
|
|
929
988
|
}
|
|
930
|
-
.
|
|
989
|
+
.bds2160ProgressCircle-svg {
|
|
931
990
|
display: block;
|
|
932
991
|
}
|
|
933
|
-
.
|
|
992
|
+
.bds2160ProgressCircle-track {
|
|
934
993
|
stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
|
|
935
994
|
}
|
|
936
|
-
.
|
|
995
|
+
.bds2160ProgressCircle-fill {
|
|
937
996
|
stroke: var(--progressCircle_color-active, var(--bdc-color_active));
|
|
938
997
|
transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
939
998
|
}
|
|
940
|
-
.
|
|
999
|
+
.bds2160ProgressCircle-value {
|
|
941
1000
|
position: absolute;
|
|
942
1001
|
font-size: var(--bds-font_size--body--s);
|
|
943
1002
|
font-weight: var(--bds-font_weight--semibold);
|
|
@@ -945,44 +1004,50 @@
|
|
|
945
1004
|
color: var(--bds-color_on-bg);
|
|
946
1005
|
line-height: 1;
|
|
947
1006
|
}
|
|
948
|
-
.
|
|
1007
|
+
.bds2160ProgressCircle---size_small .bds2160ProgressCircle-value {
|
|
949
1008
|
font-size: var(--progressCircle_font-size--small, var(--bds-font_size--body--s));
|
|
950
1009
|
}
|
|
951
|
-
.
|
|
1010
|
+
.bds2160ProgressCircle---size_medium .bds2160ProgressCircle-value {
|
|
952
1011
|
font-size: var(--bds-font_size--body--s);
|
|
953
1012
|
}
|
|
954
|
-
.
|
|
1013
|
+
.bds2160ProgressCircle---size_large .bds2160ProgressCircle-value {
|
|
955
1014
|
font-size: var(--bds-font_size--body);
|
|
956
1015
|
}
|
|
957
1016
|
@media (prefers-reduced-motion: reduce) {
|
|
958
|
-
.
|
|
1017
|
+
.bds2160ProgressCircle-fill {
|
|
959
1018
|
transition: none;
|
|
960
1019
|
}
|
|
961
1020
|
}
|
|
962
1021
|
}
|
|
963
1022
|
|
|
964
1023
|
/* src/components/ui/Separator/Separator.module.css */
|
|
965
|
-
@layer boostdev.
|
|
966
|
-
.
|
|
1024
|
+
@layer boostdev.bds2160Separator-component {
|
|
1025
|
+
.bds2160Separator-separator {
|
|
967
1026
|
border: none;
|
|
968
1027
|
background-color: var(--separator_color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
|
|
969
1028
|
}
|
|
970
|
-
.
|
|
1029
|
+
.bds2160Separator-separator.bds2160Separator---horizontal {
|
|
971
1030
|
display: block;
|
|
972
1031
|
inline-size: 100%;
|
|
973
1032
|
block-size: var(--separator_thickness, 1px);
|
|
1033
|
+
box-sizing: content-box;
|
|
1034
|
+
padding-block: var(--separator_spacing, 0);
|
|
1035
|
+
background-clip: content-box;
|
|
974
1036
|
}
|
|
975
|
-
.
|
|
1037
|
+
.bds2160Separator-separator.bds2160Separator---vertical {
|
|
976
1038
|
display: inline-block;
|
|
977
1039
|
inline-size: var(--separator_thickness, 1px);
|
|
978
1040
|
min-block-size: var(--separator_length, 1em);
|
|
979
1041
|
align-self: stretch;
|
|
1042
|
+
box-sizing: content-box;
|
|
1043
|
+
padding-inline: var(--separator_spacing, var(--bds-space_s));
|
|
1044
|
+
background-clip: content-box;
|
|
980
1045
|
}
|
|
981
1046
|
}
|
|
982
1047
|
|
|
983
1048
|
/* src/components/ui/Skeleton/Skeleton.module.css */
|
|
984
|
-
@layer boostdev.
|
|
985
|
-
.
|
|
1049
|
+
@layer boostdev.bds2160Skeleton-component {
|
|
1050
|
+
.bds2160Skeleton-skeleton {
|
|
986
1051
|
background:
|
|
987
1052
|
linear-gradient(
|
|
988
1053
|
90deg,
|
|
@@ -995,7 +1060,7 @@
|
|
|
995
1060
|
min-block-size: var(--skeleton_min-block-size, var(--bds-space_m));
|
|
996
1061
|
}
|
|
997
1062
|
@media (prefers-reduced-motion: reduce) {
|
|
998
|
-
.
|
|
1063
|
+
.bds2160Skeleton-skeleton {
|
|
999
1064
|
animation: none;
|
|
1000
1065
|
background: var(--skeleton_color-base, var(--bds-color_grey--subtle));
|
|
1001
1066
|
}
|
|
@@ -1011,8 +1076,8 @@
|
|
|
1011
1076
|
}
|
|
1012
1077
|
|
|
1013
1078
|
/* src/components/ui/SkipLink/SkipLink.module.css */
|
|
1014
|
-
@layer boostdev.
|
|
1015
|
-
.
|
|
1079
|
+
@layer boostdev.bds2160SkipLink-component {
|
|
1080
|
+
.bds2160SkipLink-skipLink {
|
|
1016
1081
|
position: absolute;
|
|
1017
1082
|
inset-block-start: var(--skip-link_inset, var(--bds-space_s));
|
|
1018
1083
|
inset-inline-start: var(--skip-link_inset, var(--bds-space_s));
|
|
@@ -1030,21 +1095,21 @@
|
|
|
1030
1095
|
transform: translateY(-200%);
|
|
1031
1096
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1032
1097
|
}
|
|
1033
|
-
.
|
|
1098
|
+
.bds2160SkipLink-skipLink:focus-visible {
|
|
1034
1099
|
transform: translateY(0);
|
|
1035
1100
|
outline: var(--bds-outline_default);
|
|
1036
1101
|
outline-offset: var(--bds-outline_offset);
|
|
1037
1102
|
}
|
|
1038
1103
|
@media (prefers-reduced-motion: reduce) {
|
|
1039
|
-
.
|
|
1104
|
+
.bds2160SkipLink-skipLink {
|
|
1040
1105
|
transition: none;
|
|
1041
1106
|
}
|
|
1042
1107
|
}
|
|
1043
1108
|
}
|
|
1044
1109
|
|
|
1045
1110
|
/* src/components/ui/Table/Table.module.css */
|
|
1046
|
-
@layer boostdev.
|
|
1047
|
-
.
|
|
1111
|
+
@layer boostdev.bds2160Table-component {
|
|
1112
|
+
.bds2160Table-wrapper {
|
|
1048
1113
|
inline-size: 100%;
|
|
1049
1114
|
overflow-inline: auto;
|
|
1050
1115
|
border: var(--table_border, none);
|
|
@@ -1053,39 +1118,39 @@
|
|
|
1053
1118
|
border-radius: var(--table_radius, var(--bdc-outline_radius));
|
|
1054
1119
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--table_shadow, var(--bdc-outline_shadow));
|
|
1055
1120
|
}
|
|
1056
|
-
.
|
|
1121
|
+
.bds2160Table-wrapper:focus-visible {
|
|
1057
1122
|
outline: var(--bds-outline_default);
|
|
1058
1123
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
1059
1124
|
}
|
|
1060
|
-
.
|
|
1125
|
+
.bds2160Table-table {
|
|
1061
1126
|
inline-size: 100%;
|
|
1062
1127
|
border-collapse: collapse;
|
|
1063
1128
|
font-size: var(--table_font-size, var(--bds-font_size--body));
|
|
1064
1129
|
font-family: var(--bds-font_family--body);
|
|
1065
1130
|
}
|
|
1066
|
-
.
|
|
1131
|
+
.bds2160Table-caption {
|
|
1067
1132
|
caption-side: top;
|
|
1068
1133
|
text-align: start;
|
|
1069
1134
|
padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
|
|
1070
1135
|
font-weight: var(--bds-font_weight--semibold);
|
|
1071
1136
|
color: var(--bds-color_on-bg);
|
|
1072
1137
|
}
|
|
1073
|
-
.
|
|
1074
|
-
background-color: var(--bds-color_bg--subtle);
|
|
1138
|
+
.bds2160Table-thead {
|
|
1139
|
+
background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
|
|
1075
1140
|
}
|
|
1076
|
-
.
|
|
1141
|
+
.bds2160Table-th {
|
|
1077
1142
|
padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
|
|
1078
1143
|
text-align: start;
|
|
1079
|
-
font-weight: var(--bds-font_weight--
|
|
1080
|
-
font-size: var(--table_header-font-size, var(--bds-font_size--body
|
|
1081
|
-
color: var(--bds-color_on-bg--subtle);
|
|
1144
|
+
font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
|
|
1145
|
+
font-size: var(--table_header-font-size, var(--bds-font_size--body));
|
|
1146
|
+
color: var(--table_header-color, var(--bds-color_on-bg--subtle));
|
|
1082
1147
|
white-space: nowrap;
|
|
1083
1148
|
border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
|
|
1084
1149
|
}
|
|
1085
|
-
.
|
|
1150
|
+
.bds2160Table-th.bds2160Table---sortable {
|
|
1086
1151
|
padding: 0;
|
|
1087
1152
|
}
|
|
1088
|
-
.
|
|
1153
|
+
.bds2160Table-sortButton {
|
|
1089
1154
|
all: unset;
|
|
1090
1155
|
display: flex;
|
|
1091
1156
|
align-items: center;
|
|
@@ -1093,127 +1158,141 @@
|
|
|
1093
1158
|
padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
|
|
1094
1159
|
inline-size: 100%;
|
|
1095
1160
|
cursor: pointer;
|
|
1096
|
-
color: var(--bds-color_on-bg--subtle);
|
|
1097
|
-
font-weight: var(--bds-font_weight--
|
|
1098
|
-
font-size: var(--table_header-font-size, var(--bds-font_size--body
|
|
1161
|
+
color: var(--table_header-color, var(--bds-color_on-bg--subtle));
|
|
1162
|
+
font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
|
|
1163
|
+
font-size: var(--table_header-font-size, var(--bds-font_size--body));
|
|
1099
1164
|
transition: var(--bds-animation_transition);
|
|
1100
1165
|
box-sizing: border-box;
|
|
1101
1166
|
}
|
|
1102
|
-
.
|
|
1167
|
+
.bds2160Table-sortButton:focus-visible {
|
|
1103
1168
|
outline: var(--bds-outline_default);
|
|
1104
1169
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
1105
1170
|
}
|
|
1106
1171
|
@media (hover: hover) and (pointer: fine) {
|
|
1107
|
-
.
|
|
1172
|
+
.bds2160Table-sortButton:hover {
|
|
1108
1173
|
color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
|
|
1109
1174
|
}
|
|
1110
1175
|
}
|
|
1111
|
-
.
|
|
1176
|
+
.bds2160Table-sortIcon {
|
|
1112
1177
|
inline-size: 1rem;
|
|
1113
1178
|
block-size: 1rem;
|
|
1114
1179
|
opacity: 0.4;
|
|
1115
1180
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1116
1181
|
}
|
|
1117
|
-
.
|
|
1182
|
+
.bds2160Table-sortIcon.bds2160Table---sort-active {
|
|
1118
1183
|
opacity: 1;
|
|
1119
1184
|
color: var(--bds-color_interactive);
|
|
1120
1185
|
}
|
|
1121
|
-
.
|
|
1186
|
+
.bds2160Table-sortIcon.bds2160Table---sort-desc {
|
|
1122
1187
|
transform: rotate(180deg);
|
|
1123
1188
|
}
|
|
1124
|
-
.
|
|
1189
|
+
.bds2160Table-tbody .bds2160Table-tr {
|
|
1125
1190
|
border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
|
|
1126
1191
|
transition: var(--bds-animation_transition);
|
|
1127
1192
|
}
|
|
1128
|
-
.
|
|
1193
|
+
.bds2160Table-tbody .bds2160Table-tr:last-child {
|
|
1129
1194
|
border-block-end: none;
|
|
1130
1195
|
}
|
|
1131
1196
|
@media (hover: hover) and (pointer: fine) {
|
|
1132
|
-
.
|
|
1197
|
+
.bds2160Table-tbody .bds2160Table-tr:hover {
|
|
1133
1198
|
background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
|
|
1134
1199
|
}
|
|
1135
1200
|
}
|
|
1136
|
-
.
|
|
1201
|
+
.bds2160Table-td {
|
|
1137
1202
|
padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
|
|
1138
1203
|
color: var(--bds-color_on-bg);
|
|
1139
1204
|
vertical-align: middle;
|
|
1140
1205
|
}
|
|
1141
1206
|
@media (prefers-reduced-motion: reduce) {
|
|
1142
|
-
.
|
|
1207
|
+
.bds2160Table-sortIcon {
|
|
1143
1208
|
transition: none;
|
|
1144
1209
|
}
|
|
1145
1210
|
}
|
|
1146
1211
|
}
|
|
1147
1212
|
|
|
1148
1213
|
/* src/components/ui/Tabs/Tabs.module.css */
|
|
1149
|
-
@layer boostdev.
|
|
1150
|
-
.
|
|
1214
|
+
@layer boostdev.bds2160Tabs-component {
|
|
1215
|
+
.bds2160Tabs-tabs {
|
|
1151
1216
|
display: flex;
|
|
1152
1217
|
flex-direction: column;
|
|
1153
1218
|
}
|
|
1154
|
-
.
|
|
1219
|
+
.bds2160Tabs-tabList {
|
|
1155
1220
|
display: flex;
|
|
1156
1221
|
border-block-end: 1px solid var(--tabs_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
|
|
1157
1222
|
gap: var(--tabs_gap, var(--bds-space_xxs));
|
|
1158
1223
|
}
|
|
1159
|
-
.
|
|
1224
|
+
.bds2160Tabs-tab {
|
|
1160
1225
|
all: unset;
|
|
1161
1226
|
display: inline-flex;
|
|
1162
1227
|
align-items: center;
|
|
1163
1228
|
padding: var(--tab_padding, var(--bds-space_s) var(--bds-space_m));
|
|
1164
1229
|
font-family: var(--bds-font_family--body);
|
|
1165
1230
|
font-size: var(--bds-font_size--body);
|
|
1166
|
-
font-weight: var(--bds-font_weight--
|
|
1167
|
-
color: var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
|
|
1168
|
-
border-block-end:
|
|
1231
|
+
font-weight: var(--tab_font-weight, var(--tab_font-weight--state, var(--tab_font-weight--inactive, var(--bds-font_weight--medium))));
|
|
1232
|
+
color: var(--tab_color, var(--tab_color--state, var(--tab_color--inactive, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)))));
|
|
1233
|
+
border-block-end: var(--tab_indicator-width, 3px) solid var(--tab_border-color, var(--tab_border-color--state, transparent));
|
|
1169
1234
|
margin-block-end: -1px;
|
|
1170
1235
|
cursor: pointer;
|
|
1171
1236
|
transition: var(--bds-animation_transition);
|
|
1172
1237
|
}
|
|
1173
|
-
.
|
|
1174
|
-
|
|
1238
|
+
.bds2160Tabs-label {
|
|
1239
|
+
display: inline-grid;
|
|
1240
|
+
}
|
|
1241
|
+
.bds2160Tabs-label::after {
|
|
1242
|
+
content: attr(data-label);
|
|
1243
|
+
grid-area: 1 / 1;
|
|
1244
|
+
font-weight: var(--tab_font-weight, var(--tab_font-weight--active, var(--bds-font_weight--bold)));
|
|
1245
|
+
visibility: hidden;
|
|
1246
|
+
pointer-events: none;
|
|
1247
|
+
block-size: 0;
|
|
1248
|
+
overflow: hidden;
|
|
1249
|
+
}
|
|
1250
|
+
.bds2160Tabs-tab.bds2160Tabs---active {
|
|
1251
|
+
--tab_color--state: var(--tab_color--active, var(--bds-color_on-bg));
|
|
1252
|
+
--tab_font-weight--state: var(--tab_font-weight--active, var(--bds-font_weight--bold));
|
|
1175
1253
|
--tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
|
|
1176
1254
|
}
|
|
1177
|
-
.
|
|
1255
|
+
.bds2160Tabs-tab:disabled {
|
|
1178
1256
|
opacity: 0.4;
|
|
1179
1257
|
cursor: not-allowed;
|
|
1180
1258
|
}
|
|
1181
|
-
.
|
|
1259
|
+
.bds2160Tabs-tab:focus-visible {
|
|
1182
1260
|
outline: var(--bds-outline_default);
|
|
1183
1261
|
outline-offset: var(--bds-outline_offset);
|
|
1184
1262
|
border-radius: var(--bds-border_radius--xs);
|
|
1185
1263
|
}
|
|
1186
1264
|
@media (hover: hover) and (pointer: fine) {
|
|
1187
|
-
.
|
|
1188
|
-
--tab_color--state: var(--tab_color--hover, var(--bds-
|
|
1265
|
+
.bds2160Tabs-tab:not(:disabled, .bds2160Tabs---active):hover {
|
|
1266
|
+
--tab_color--state: var(--tab_color--hover, var(--bds-color_on-bg));
|
|
1189
1267
|
}
|
|
1190
1268
|
}
|
|
1191
|
-
.
|
|
1269
|
+
.bds2160Tabs-panel {
|
|
1192
1270
|
padding-block-start: var(--tabs_panel-padding, var(--bds-space_m));
|
|
1193
1271
|
}
|
|
1194
|
-
.
|
|
1272
|
+
.bds2160Tabs-panel:focus-visible {
|
|
1195
1273
|
outline: var(--bds-outline_default);
|
|
1196
1274
|
outline-offset: var(--bds-outline_offset);
|
|
1197
1275
|
}
|
|
1198
1276
|
}
|
|
1199
1277
|
|
|
1200
1278
|
/* src/components/ui/Tooltip/Tooltip.module.css */
|
|
1201
|
-
@layer boostdev.
|
|
1202
|
-
.
|
|
1279
|
+
@layer boostdev.bds2160Tooltip-component {
|
|
1280
|
+
.bds2160Tooltip-wrapper {
|
|
1203
1281
|
position: relative;
|
|
1204
1282
|
display: inline-flex;
|
|
1205
1283
|
align-items: center;
|
|
1206
1284
|
}
|
|
1207
|
-
.
|
|
1285
|
+
.bds2160Tooltip-tooltip {
|
|
1208
1286
|
display: block;
|
|
1209
1287
|
position: absolute;
|
|
1210
1288
|
z-index: var(--bds-z-index_popover);
|
|
1211
|
-
padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-
|
|
1212
|
-
border-radius: var(--tooltip_radius, var(--bds-border_radius--
|
|
1289
|
+
padding: var(--tooltip_padding, var(--bds-space_xxs) var(--bds-space_s));
|
|
1290
|
+
border-radius: var(--tooltip_radius, var(--bds-border_radius--xs));
|
|
1213
1291
|
background-color: var(--tooltip_bg, var(--bds-color_on-bg));
|
|
1214
1292
|
color: var(--tooltip_text, var(--bds-color_bg));
|
|
1215
1293
|
font-size: var(--tooltip_font-size, var(--bds-font_size--body--s));
|
|
1216
1294
|
line-height: var(--bds-font_line-height--body);
|
|
1295
|
+
inline-size: max-content;
|
|
1217
1296
|
max-inline-size: var(--tooltip_max-inline-size, 20rem);
|
|
1218
1297
|
white-space: normal;
|
|
1219
1298
|
pointer-events: none;
|
|
@@ -1222,72 +1301,72 @@
|
|
|
1222
1301
|
opacity: 0;
|
|
1223
1302
|
transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1224
1303
|
}
|
|
1225
|
-
[dir=rtl] .
|
|
1226
|
-
.
|
|
1304
|
+
[dir=rtl] .bds2160Tooltip-tooltip,
|
|
1305
|
+
.bds2160Tooltip-tooltip[dir=rtl] {
|
|
1227
1306
|
--tooltip_dir: -1;
|
|
1228
1307
|
}
|
|
1229
|
-
.
|
|
1308
|
+
.bds2160Tooltip---visible {
|
|
1230
1309
|
visibility: visible;
|
|
1231
1310
|
opacity: 1;
|
|
1232
1311
|
pointer-events: auto;
|
|
1233
1312
|
}
|
|
1234
|
-
.
|
|
1313
|
+
.bds2160Tooltip---placement_top {
|
|
1235
1314
|
inset-block-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
|
|
1236
1315
|
inset-inline-start: 50%;
|
|
1237
1316
|
transform: translateX(calc(-50% * var(--tooltip_dir, 1)));
|
|
1238
1317
|
}
|
|
1239
|
-
.
|
|
1318
|
+
.bds2160Tooltip---placement_bottom {
|
|
1240
1319
|
inset-block-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
|
|
1241
1320
|
inset-inline-start: 50%;
|
|
1242
1321
|
transform: translateX(calc(-50% * var(--tooltip_dir, 1)));
|
|
1243
1322
|
}
|
|
1244
|
-
.
|
|
1323
|
+
.bds2160Tooltip---placement_left {
|
|
1245
1324
|
inset-inline-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
|
|
1246
1325
|
inset-block-start: 50%;
|
|
1247
1326
|
transform: translateY(-50%);
|
|
1248
1327
|
}
|
|
1249
|
-
.
|
|
1328
|
+
.bds2160Tooltip---placement_right {
|
|
1250
1329
|
inset-inline-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
|
|
1251
1330
|
inset-block-start: 50%;
|
|
1252
1331
|
transform: translateY(-50%);
|
|
1253
1332
|
}
|
|
1254
1333
|
@media (prefers-reduced-motion: reduce) {
|
|
1255
|
-
.
|
|
1334
|
+
.bds2160Tooltip-tooltip {
|
|
1256
1335
|
transition: none;
|
|
1257
1336
|
}
|
|
1258
1337
|
}
|
|
1259
1338
|
}
|
|
1260
1339
|
|
|
1261
1340
|
/* src/components/ui/Typography/Typography.module.css */
|
|
1262
|
-
@layer boostdev.
|
|
1263
|
-
.
|
|
1341
|
+
@layer boostdev.bds2160Typography-component {
|
|
1342
|
+
.bds2160Typography-typography {
|
|
1264
1343
|
margin: 0;
|
|
1265
1344
|
font-family: var(--bds-font_family--body);
|
|
1266
1345
|
color: var(--typography_color, var(--bds-color_on-bg));
|
|
1267
1346
|
}
|
|
1268
|
-
.
|
|
1347
|
+
.bds2160Typography---h1 {
|
|
1269
1348
|
font-family: var(--bds-font_family--heading);
|
|
1270
1349
|
font-size: var(--typography_font-size--h1, var(--bds-font_size--heading-1));
|
|
1271
1350
|
font-weight: var(--bds-font_weight--bold);
|
|
1272
1351
|
line-height: var(--bds-font_line-height--heading);
|
|
1273
1352
|
}
|
|
1274
|
-
.
|
|
1353
|
+
.bds2160Typography---h2 {
|
|
1275
1354
|
font-family: var(--bds-font_family--heading);
|
|
1276
1355
|
font-size: var(--typography_font-size--h2, var(--bds-font_size--heading-2));
|
|
1277
1356
|
font-weight: var(--bds-font_weight--semibold);
|
|
1278
1357
|
line-height: var(--bds-font_line-height--heading);
|
|
1279
1358
|
}
|
|
1280
|
-
.
|
|
1359
|
+
.bds2160Typography---h3 {
|
|
1281
1360
|
font-family: var(--bds-font_family--heading);
|
|
1282
1361
|
font-size: var(--typography_font-size--h3, var(--bds-font_size--heading-3));
|
|
1283
1362
|
font-weight: var(--bds-font_weight--semibold);
|
|
1284
1363
|
line-height: var(--bds-font_line-height--heading);
|
|
1285
1364
|
}
|
|
1286
|
-
.
|
|
1365
|
+
.bds2160Typography---body {
|
|
1287
1366
|
font-size: var(--typography_font-size--body, var(--bds-font_size--body));
|
|
1288
1367
|
line-height: var(--bds-font_line-height--body);
|
|
1289
1368
|
}
|
|
1290
|
-
.
|
|
1369
|
+
.bds2160Typography---body_s {
|
|
1291
1370
|
font-size: var(--typography_font-size--body_s, var(--bds-font_size--body--s));
|
|
1292
1371
|
line-height: var(--bds-font_line-height--body);
|
|
1293
1372
|
}
|
|
@@ -1318,9 +1397,9 @@
|
|
|
1318
1397
|
box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
|
|
1319
1398
|
}
|
|
1320
1399
|
}
|
|
1321
|
-
@layer boostdev.
|
|
1322
|
-
.
|
|
1323
|
-
.
|
|
1400
|
+
@layer boostdev.bds2160Button-component {
|
|
1401
|
+
.bds2160Button-button,
|
|
1402
|
+
.bds2160Button-button[href] {
|
|
1324
1403
|
all: unset;
|
|
1325
1404
|
position: relative;
|
|
1326
1405
|
font: inherit;
|
|
@@ -1343,78 +1422,78 @@
|
|
|
1343
1422
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1344
1423
|
transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1345
1424
|
}
|
|
1346
|
-
.
|
|
1425
|
+
.bds2160Button-button.bds2160Button---default {
|
|
1347
1426
|
}
|
|
1348
|
-
.
|
|
1349
|
-
.
|
|
1427
|
+
.bds2160Button-button.bds2160Button---outline,
|
|
1428
|
+
.bds2160Button-button.bds2160Button---ghost {
|
|
1350
1429
|
--button_bg--variant: var(--button_bg--outline, transparent);
|
|
1351
1430
|
--button_text--variant: var(--button_text--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
|
|
1352
1431
|
--button_border--variant: var(--button_border--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
|
|
1353
1432
|
}
|
|
1354
|
-
.
|
|
1433
|
+
.bds2160Button-button.bds2160Button---size_small {
|
|
1355
1434
|
--button_height: 2.25em;
|
|
1356
1435
|
--button_font-size: var(--bds-font_size--body--s);
|
|
1357
1436
|
--button_padding-inline--size: var(--bds-space_m);
|
|
1358
1437
|
}
|
|
1359
|
-
.
|
|
1438
|
+
.bds2160Button-button.bds2160Button---size_medium {
|
|
1360
1439
|
--button_height: 3em;
|
|
1361
1440
|
--button_padding-inline--size: var(--bds-space_l);
|
|
1362
1441
|
}
|
|
1363
|
-
.
|
|
1442
|
+
.bds2160Button-button.bds2160Button---size_large {
|
|
1364
1443
|
--button_font-size: var(--bds-font_size--heading-3);
|
|
1365
1444
|
--button_padding-inline--size: var(--bds-space_xl);
|
|
1366
1445
|
}
|
|
1367
|
-
.
|
|
1446
|
+
.bds2160Button-button.bds2160Button---hasPulse {
|
|
1368
1447
|
animation: pulse 3s infinite;
|
|
1369
1448
|
}
|
|
1370
|
-
.
|
|
1449
|
+
.bds2160Button-button.bds2160Button---iconOnly {
|
|
1371
1450
|
aspect-ratio: 1;
|
|
1372
1451
|
box-sizing: border-box;
|
|
1373
1452
|
padding: var(--bds-space_xxs);
|
|
1374
1453
|
}
|
|
1375
|
-
.
|
|
1454
|
+
.bds2160Button-button.bds2160Button---iconOnly > * {
|
|
1376
1455
|
inline-size: 100%;
|
|
1377
1456
|
block-size: 100%;
|
|
1378
1457
|
}
|
|
1379
|
-
.
|
|
1458
|
+
.bds2160Button-button[href] {
|
|
1380
1459
|
text-decoration: none;
|
|
1381
1460
|
}
|
|
1382
|
-
.
|
|
1461
|
+
.bds2160Button-button svg {
|
|
1383
1462
|
--icon__stroke: currentcolor;
|
|
1384
1463
|
fill: currentcolor;
|
|
1385
1464
|
color: currentcolor;
|
|
1386
1465
|
flex-shrink: 0;
|
|
1387
1466
|
}
|
|
1388
|
-
.
|
|
1467
|
+
.bds2160Button-iconStart {
|
|
1389
1468
|
display: flex;
|
|
1390
1469
|
align-items: center;
|
|
1391
1470
|
margin-inline-start: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
|
|
1392
1471
|
transition: var(--bds-animation_transition);
|
|
1393
1472
|
}
|
|
1394
|
-
.
|
|
1473
|
+
.bds2160Button-iconEnd {
|
|
1395
1474
|
display: flex;
|
|
1396
1475
|
align-items: center;
|
|
1397
1476
|
margin-inline-end: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
|
|
1398
1477
|
transition: var(--bds-animation_transition);
|
|
1399
1478
|
}
|
|
1400
|
-
.
|
|
1401
|
-
.
|
|
1479
|
+
.bds2160Button-button.bds2160Button---iconOnly .bds2160Button-iconStart,
|
|
1480
|
+
.bds2160Button-button.bds2160Button---iconOnly .bds2160Button-iconEnd {
|
|
1402
1481
|
margin-inline: 0;
|
|
1403
1482
|
}
|
|
1404
1483
|
@media (hover: hover) and (pointer: fine) {
|
|
1405
|
-
.
|
|
1484
|
+
.bds2160Button-button:hover .bds2160Button-iconStart svg {
|
|
1406
1485
|
animation: fadeZoom 2s ease-out infinite;
|
|
1407
1486
|
}
|
|
1408
|
-
.
|
|
1487
|
+
.bds2160Button-button:hover .bds2160Button-iconEnd svg {
|
|
1409
1488
|
animation: fadeZoom 2s ease-out infinite;
|
|
1410
1489
|
}
|
|
1411
1490
|
}
|
|
1412
|
-
.
|
|
1491
|
+
.bds2160Button-button:focus-visible {
|
|
1413
1492
|
outline: var(--bds-outline_default);
|
|
1414
1493
|
outline-offset: var(--bds-outline_offset);
|
|
1415
1494
|
}
|
|
1416
1495
|
@media (hover: hover) and (pointer: fine) {
|
|
1417
|
-
.
|
|
1496
|
+
.bds2160Button-button.bds2160Button---default:hover {
|
|
1418
1497
|
--button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
|
|
1419
1498
|
--button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
|
|
1420
1499
|
--button_border--variant: var(--button_border--hover, currentcolor);
|
|
@@ -1422,25 +1501,25 @@
|
|
|
1422
1501
|
}
|
|
1423
1502
|
}
|
|
1424
1503
|
@media (hover: hover) and (pointer: fine) {
|
|
1425
|
-
.
|
|
1426
|
-
.
|
|
1504
|
+
.bds2160Button-button.bds2160Button---outline:hover,
|
|
1505
|
+
.bds2160Button-button.bds2160Button---ghost:hover {
|
|
1427
1506
|
--button_bg--variant: var(--button_bg--outline-hover, var(--button_color, var(--bds-color_interactive)));
|
|
1428
1507
|
--button_text--variant: var(--button_text--outline-hover, var(--button_on-color, var(--bds-color_on-interactive)));
|
|
1429
1508
|
--button_border--variant: var(--button_border--outline-hover, transparent);
|
|
1430
1509
|
}
|
|
1431
1510
|
}
|
|
1432
1511
|
@media (prefers-reduced-motion: reduce) {
|
|
1433
|
-
.
|
|
1434
|
-
.
|
|
1435
|
-
.
|
|
1512
|
+
.bds2160Button-button.bds2160Button---hasPulse,
|
|
1513
|
+
.bds2160Button-button:hover .bds2160Button-iconStart svg,
|
|
1514
|
+
.bds2160Button-button:hover .bds2160Button-iconEnd svg {
|
|
1436
1515
|
animation: none;
|
|
1437
1516
|
}
|
|
1438
1517
|
}
|
|
1439
1518
|
}
|
|
1440
1519
|
|
|
1441
1520
|
/* src/components/interaction/Command/Command.module.css */
|
|
1442
|
-
@layer boostdev.
|
|
1443
|
-
.
|
|
1521
|
+
@layer boostdev.bds2160Command-component {
|
|
1522
|
+
.bds2160Command-dialog {
|
|
1444
1523
|
padding: 0;
|
|
1445
1524
|
border: none;
|
|
1446
1525
|
border-radius: var(--command_radius, var(--bds-border_radius--m));
|
|
@@ -1450,11 +1529,11 @@
|
|
|
1450
1529
|
overflow: visible;
|
|
1451
1530
|
margin-block-start: 10vh;
|
|
1452
1531
|
}
|
|
1453
|
-
.
|
|
1532
|
+
.bds2160Command-dialog::backdrop {
|
|
1454
1533
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1455
1534
|
backdrop-filter: blur(3px);
|
|
1456
1535
|
}
|
|
1457
|
-
.
|
|
1536
|
+
.bds2160Command-palette {
|
|
1458
1537
|
display: flex;
|
|
1459
1538
|
flex-direction: column;
|
|
1460
1539
|
background-color: var(--command_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
|
|
@@ -1467,7 +1546,7 @@
|
|
|
1467
1546
|
border-radius: var(--command_radius, var(--bdc-outline_radius));
|
|
1468
1547
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
|
|
1469
1548
|
}
|
|
1470
|
-
.
|
|
1549
|
+
.bds2160Command-searchRow {
|
|
1471
1550
|
display: flex;
|
|
1472
1551
|
align-items: center;
|
|
1473
1552
|
gap: var(--bds-space_xs);
|
|
@@ -1475,13 +1554,13 @@
|
|
|
1475
1554
|
border-block-end: 1px solid currentcolor;
|
|
1476
1555
|
flex-shrink: 0;
|
|
1477
1556
|
}
|
|
1478
|
-
.
|
|
1557
|
+
.bds2160Command-searchIcon {
|
|
1479
1558
|
inline-size: 1.25rem;
|
|
1480
1559
|
block-size: 1.25rem;
|
|
1481
1560
|
color: var(--bds-color_on-bg);
|
|
1482
1561
|
flex-shrink: 0;
|
|
1483
1562
|
}
|
|
1484
|
-
.
|
|
1563
|
+
.bds2160Command-search {
|
|
1485
1564
|
flex: 1;
|
|
1486
1565
|
border: none;
|
|
1487
1566
|
font-family: var(--bds-font_family--body);
|
|
@@ -1490,14 +1569,14 @@
|
|
|
1490
1569
|
background: transparent;
|
|
1491
1570
|
min-inline-size: 0;
|
|
1492
1571
|
}
|
|
1493
|
-
.
|
|
1572
|
+
.bds2160Command-search:focus-visible {
|
|
1494
1573
|
outline: var(--bds-outline_default);
|
|
1495
1574
|
outline-offset: var(--bds-outline_offset);
|
|
1496
1575
|
}
|
|
1497
|
-
.
|
|
1576
|
+
.bds2160Command-search::placeholder {
|
|
1498
1577
|
color: var(--bds-color_on-bg);
|
|
1499
1578
|
}
|
|
1500
|
-
.
|
|
1579
|
+
.bds2160Command-escHint {
|
|
1501
1580
|
font-size: var(--bds-font_size--body--s);
|
|
1502
1581
|
color: var(--bds-color_on-bg);
|
|
1503
1582
|
border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
|
|
@@ -1507,18 +1586,18 @@
|
|
|
1507
1586
|
border: none;
|
|
1508
1587
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1509
1588
|
}
|
|
1510
|
-
.
|
|
1589
|
+
.bds2160Command-list {
|
|
1511
1590
|
overflow-block: auto;
|
|
1512
1591
|
list-style: none;
|
|
1513
1592
|
margin: 0;
|
|
1514
1593
|
padding: var(--bds-space_xs) 0;
|
|
1515
1594
|
}
|
|
1516
|
-
.
|
|
1595
|
+
.bds2160Command-groupList {
|
|
1517
1596
|
list-style: none;
|
|
1518
1597
|
margin: 0;
|
|
1519
1598
|
padding: 0;
|
|
1520
1599
|
}
|
|
1521
|
-
.
|
|
1600
|
+
.bds2160Command-group {
|
|
1522
1601
|
padding: var(--bds-space_xs) var(--bds-space_m);
|
|
1523
1602
|
font-size: var(--bds-font_size--body--s);
|
|
1524
1603
|
font-weight: var(--bds-font_weight--semibold);
|
|
@@ -1526,7 +1605,7 @@
|
|
|
1526
1605
|
text-transform: uppercase;
|
|
1527
1606
|
letter-spacing: 0.05em;
|
|
1528
1607
|
}
|
|
1529
|
-
.
|
|
1608
|
+
.bds2160Command-item {
|
|
1530
1609
|
display: flex;
|
|
1531
1610
|
align-items: center;
|
|
1532
1611
|
gap: var(--bds-space_s);
|
|
@@ -1534,19 +1613,19 @@
|
|
|
1534
1613
|
cursor: pointer;
|
|
1535
1614
|
transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1536
1615
|
}
|
|
1537
|
-
.
|
|
1616
|
+
.bds2160Command-itemActive {
|
|
1538
1617
|
background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
|
|
1539
1618
|
}
|
|
1540
|
-
.
|
|
1619
|
+
.bds2160Command-itemLabel {
|
|
1541
1620
|
flex: 1;
|
|
1542
1621
|
font-size: var(--bds-font_size--body);
|
|
1543
1622
|
color: var(--bds-color_on-bg);
|
|
1544
1623
|
}
|
|
1545
|
-
.
|
|
1624
|
+
.bds2160Command-itemDesc {
|
|
1546
1625
|
font-size: var(--bds-font_size--body--s);
|
|
1547
1626
|
color: var(--bds-color_on-bg);
|
|
1548
1627
|
}
|
|
1549
|
-
.
|
|
1628
|
+
.bds2160Command-shortcut {
|
|
1550
1629
|
font-size: var(--bds-font_size--body--s);
|
|
1551
1630
|
color: var(--bds-color_on-bg);
|
|
1552
1631
|
border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
|
|
@@ -1555,13 +1634,13 @@
|
|
|
1555
1634
|
border: none;
|
|
1556
1635
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1557
1636
|
}
|
|
1558
|
-
.
|
|
1637
|
+
.bds2160Command-empty {
|
|
1559
1638
|
padding: var(--bds-space_l) var(--bds-space_m);
|
|
1560
1639
|
text-align: center;
|
|
1561
1640
|
color: var(--bds-color_on-bg);
|
|
1562
1641
|
font-size: var(--bds-font_size--body);
|
|
1563
1642
|
}
|
|
1564
|
-
.
|
|
1643
|
+
.bds2160Command-srOnly {
|
|
1565
1644
|
position: absolute;
|
|
1566
1645
|
inline-size: 1px;
|
|
1567
1646
|
block-size: 1px;
|
|
@@ -1573,8 +1652,8 @@
|
|
|
1573
1652
|
}
|
|
1574
1653
|
|
|
1575
1654
|
/* src/components/interaction/Dialog/Dialog.module.css */
|
|
1576
|
-
@layer boostdev.
|
|
1577
|
-
.
|
|
1655
|
+
@layer boostdev.bds2160Dialog-component {
|
|
1656
|
+
.bds2160Dialog-dialog {
|
|
1578
1657
|
font-size: var(--bds-font_size--body--s);
|
|
1579
1658
|
border: var(--dialog_border, none);
|
|
1580
1659
|
--bdc_color: currentcolor;
|
|
@@ -1590,17 +1669,17 @@
|
|
|
1590
1669
|
max-block-size: 90svh;
|
|
1591
1670
|
overflow: visible;
|
|
1592
1671
|
}
|
|
1593
|
-
.
|
|
1672
|
+
.bds2160Dialog-dialog:not([open]) {
|
|
1594
1673
|
display: none;
|
|
1595
1674
|
}
|
|
1596
|
-
.
|
|
1675
|
+
.bds2160Dialog-dialogContent {
|
|
1597
1676
|
display: grid;
|
|
1598
1677
|
gap: var(--bds-grid_gap);
|
|
1599
1678
|
overflow-block: auto;
|
|
1600
1679
|
min-block-size: 0;
|
|
1601
1680
|
flex: 1;
|
|
1602
1681
|
}
|
|
1603
|
-
.
|
|
1682
|
+
.bds2160Dialog-closeButton {
|
|
1604
1683
|
all: unset;
|
|
1605
1684
|
position: absolute;
|
|
1606
1685
|
inset-block-start: -1em;
|
|
@@ -1618,29 +1697,29 @@
|
|
|
1618
1697
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1619
1698
|
cursor: pointer;
|
|
1620
1699
|
}
|
|
1621
|
-
.
|
|
1700
|
+
.bds2160Dialog-closeButton::after {
|
|
1622
1701
|
content: "";
|
|
1623
1702
|
position: absolute;
|
|
1624
1703
|
inset-block: -0.5rem;
|
|
1625
1704
|
inset-inline: -0.5rem;
|
|
1626
1705
|
}
|
|
1627
|
-
.
|
|
1706
|
+
.bds2160Dialog-closeButton:focus-visible {
|
|
1628
1707
|
outline: var(--bds-outline_default);
|
|
1629
1708
|
outline-offset: var(--bds-outline_offset);
|
|
1630
1709
|
}
|
|
1631
|
-
.
|
|
1710
|
+
.bds2160Dialog-closeButton svg {
|
|
1632
1711
|
inline-size: 1.25em;
|
|
1633
1712
|
block-size: 1.25em;
|
|
1634
1713
|
}
|
|
1635
|
-
.
|
|
1714
|
+
.bds2160Dialog-dialog::backdrop {
|
|
1636
1715
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1637
1716
|
backdrop-filter: blur(3px);
|
|
1638
1717
|
}
|
|
1639
1718
|
}
|
|
1640
1719
|
|
|
1641
1720
|
/* src/components/interaction/Drawer/Drawer.module.css */
|
|
1642
|
-
@layer boostdev.
|
|
1643
|
-
.
|
|
1721
|
+
@layer boostdev.bds2160Drawer-component {
|
|
1722
|
+
.bds2160Drawer-drawer {
|
|
1644
1723
|
position: fixed;
|
|
1645
1724
|
inset-block: 0;
|
|
1646
1725
|
inset-inline: auto 0;
|
|
@@ -1663,37 +1742,37 @@
|
|
|
1663
1742
|
display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
|
|
1664
1743
|
overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
|
|
1665
1744
|
}
|
|
1666
|
-
.
|
|
1745
|
+
.bds2160Drawer-drawer:not([open]) {
|
|
1667
1746
|
display: none;
|
|
1668
1747
|
}
|
|
1669
|
-
.
|
|
1748
|
+
.bds2160Drawer-drawer:dir(rtl) {
|
|
1670
1749
|
translate: -100% 0;
|
|
1671
1750
|
}
|
|
1672
|
-
.
|
|
1751
|
+
.bds2160Drawer---side_left.bds2160Drawer-drawer {
|
|
1673
1752
|
inset-inline: 0 auto;
|
|
1674
1753
|
translate: -100% 0;
|
|
1675
1754
|
}
|
|
1676
|
-
.
|
|
1755
|
+
.bds2160Drawer---side_left.bds2160Drawer-drawer:dir(rtl) {
|
|
1677
1756
|
translate: 100% 0;
|
|
1678
1757
|
}
|
|
1679
|
-
.
|
|
1758
|
+
.bds2160Drawer-drawer[open] {
|
|
1680
1759
|
translate: 0 0;
|
|
1681
1760
|
}
|
|
1682
1761
|
@starting-style {
|
|
1683
|
-
.
|
|
1762
|
+
.bds2160Drawer-drawer[open] {
|
|
1684
1763
|
translate: 100% 0;
|
|
1685
1764
|
}
|
|
1686
|
-
.
|
|
1765
|
+
.bds2160Drawer-drawer[open]:dir(rtl) {
|
|
1687
1766
|
translate: -100% 0;
|
|
1688
1767
|
}
|
|
1689
|
-
.
|
|
1768
|
+
.bds2160Drawer---side_left.bds2160Drawer-drawer[open] {
|
|
1690
1769
|
translate: -100% 0;
|
|
1691
1770
|
}
|
|
1692
|
-
.
|
|
1771
|
+
.bds2160Drawer---side_left.bds2160Drawer-drawer[open]:dir(rtl) {
|
|
1693
1772
|
translate: 100% 0;
|
|
1694
1773
|
}
|
|
1695
1774
|
}
|
|
1696
|
-
.
|
|
1775
|
+
.bds2160Drawer-drawer::backdrop {
|
|
1697
1776
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1698
1777
|
backdrop-filter: blur(3px);
|
|
1699
1778
|
opacity: 0;
|
|
@@ -1702,15 +1781,15 @@
|
|
|
1702
1781
|
display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
|
|
1703
1782
|
overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
|
|
1704
1783
|
}
|
|
1705
|
-
.
|
|
1784
|
+
.bds2160Drawer-drawer[open]::backdrop {
|
|
1706
1785
|
opacity: 1;
|
|
1707
1786
|
}
|
|
1708
1787
|
@starting-style {
|
|
1709
|
-
.
|
|
1788
|
+
.bds2160Drawer-drawer[open]::backdrop {
|
|
1710
1789
|
opacity: 0;
|
|
1711
1790
|
}
|
|
1712
1791
|
}
|
|
1713
|
-
.
|
|
1792
|
+
.bds2160Drawer-header {
|
|
1714
1793
|
display: flex;
|
|
1715
1794
|
align-items: center;
|
|
1716
1795
|
justify-content: space-between;
|
|
@@ -1718,7 +1797,7 @@
|
|
|
1718
1797
|
border-block-end: 1px solid var(--drawer_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
|
|
1719
1798
|
flex-shrink: 0;
|
|
1720
1799
|
}
|
|
1721
|
-
.
|
|
1800
|
+
.bds2160Drawer-closeButton {
|
|
1722
1801
|
all: unset;
|
|
1723
1802
|
display: flex;
|
|
1724
1803
|
align-items: center;
|
|
@@ -1729,20 +1808,20 @@
|
|
|
1729
1808
|
cursor: pointer;
|
|
1730
1809
|
transition: var(--bds-animation_transition);
|
|
1731
1810
|
}
|
|
1732
|
-
.
|
|
1811
|
+
.bds2160Drawer-closeButton svg {
|
|
1733
1812
|
inline-size: 1.25rem;
|
|
1734
1813
|
block-size: 1.25rem;
|
|
1735
1814
|
}
|
|
1736
|
-
.
|
|
1815
|
+
.bds2160Drawer-closeButton:focus-visible {
|
|
1737
1816
|
outline: var(--bds-outline_default);
|
|
1738
1817
|
outline-offset: var(--bds-outline_offset);
|
|
1739
1818
|
}
|
|
1740
1819
|
@media (hover: hover) and (pointer: fine) {
|
|
1741
|
-
.
|
|
1820
|
+
.bds2160Drawer-closeButton:hover {
|
|
1742
1821
|
background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
|
|
1743
1822
|
}
|
|
1744
1823
|
}
|
|
1745
|
-
.
|
|
1824
|
+
.bds2160Drawer-body {
|
|
1746
1825
|
flex: 1;
|
|
1747
1826
|
overflow-block: auto;
|
|
1748
1827
|
padding: var(--bds-space_l);
|
|
@@ -1750,79 +1829,118 @@
|
|
|
1750
1829
|
flex-direction: column;
|
|
1751
1830
|
}
|
|
1752
1831
|
@media (prefers-reduced-motion: reduce) {
|
|
1753
|
-
.
|
|
1754
|
-
.
|
|
1832
|
+
.bds2160Drawer-drawer,
|
|
1833
|
+
.bds2160Drawer-drawer::backdrop {
|
|
1755
1834
|
transition: none;
|
|
1756
1835
|
}
|
|
1757
1836
|
}
|
|
1758
1837
|
}
|
|
1759
1838
|
|
|
1760
1839
|
/* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
|
|
1761
|
-
@layer boostdev.
|
|
1762
|
-
.
|
|
1840
|
+
@layer boostdev.bds2160DropdownMenu-component {
|
|
1841
|
+
.bds2160DropdownMenu-wrapper {
|
|
1763
1842
|
position: relative;
|
|
1764
1843
|
display: inline-flex;
|
|
1765
1844
|
}
|
|
1766
|
-
.
|
|
1845
|
+
.bds2160DropdownMenu-menu {
|
|
1767
1846
|
position: absolute;
|
|
1768
1847
|
inset-block-start: calc(100% + var(--bds-space_xxs));
|
|
1769
1848
|
z-index: var(--bds-z-index_dropdown);
|
|
1770
1849
|
min-inline-size: 10rem;
|
|
1771
|
-
padding: var(--bds-space_xxs)
|
|
1850
|
+
padding: var(--dropdown_padding, var(--bds-space_xxs));
|
|
1772
1851
|
border: var(--dropdown_border, none);
|
|
1773
|
-
--bdc_color:
|
|
1852
|
+
--bdc_color: var(--dropdown_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
|
|
1774
1853
|
--bdc-outline_radius: var(--bds-border_radius--s);
|
|
1775
1854
|
border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
|
|
1776
1855
|
background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
|
|
1777
1856
|
color: var(--dropdown_on-color, var(--bds-color_on-bg));
|
|
1778
|
-
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-
|
|
1857
|
+
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_l));
|
|
1779
1858
|
list-style: none;
|
|
1780
1859
|
margin: 0;
|
|
1781
1860
|
}
|
|
1782
|
-
.
|
|
1861
|
+
.bds2160DropdownMenu-menu li {
|
|
1783
1862
|
list-style: none;
|
|
1784
1863
|
}
|
|
1785
|
-
.
|
|
1864
|
+
.bds2160DropdownMenu---placement_bottom-start {
|
|
1786
1865
|
inset-inline-start: 0;
|
|
1787
1866
|
}
|
|
1788
|
-
.
|
|
1867
|
+
.bds2160DropdownMenu---placement_bottom-end {
|
|
1789
1868
|
inset-inline-end: 0;
|
|
1790
1869
|
}
|
|
1791
|
-
.
|
|
1870
|
+
.bds2160DropdownMenu-separatorRow {
|
|
1871
|
+
padding-block: var(--bds-space_xxs);
|
|
1872
|
+
}
|
|
1873
|
+
.bds2160DropdownMenu-separator {
|
|
1792
1874
|
border: none;
|
|
1793
1875
|
border-block-start: 1px solid var(--dropdown_separator-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
|
|
1794
|
-
margin:
|
|
1876
|
+
margin: 0;
|
|
1877
|
+
}
|
|
1878
|
+
.bds2160DropdownMenu-group {
|
|
1879
|
+
margin: 0;
|
|
1880
|
+
padding: 0;
|
|
1881
|
+
list-style: none;
|
|
1795
1882
|
}
|
|
1796
|
-
.
|
|
1883
|
+
.bds2160DropdownMenu-groupLabel {
|
|
1884
|
+
display: block;
|
|
1885
|
+
padding: var(--dropdown_group-label-padding, var(--bds-space_xs) var(--bds-space_s) var(--bds-space_xxs));
|
|
1886
|
+
font-family: var(--bds-font_family--body);
|
|
1887
|
+
font-size: var(--dropdown_group-label-font-size, var(--bds-font_size--body--s));
|
|
1888
|
+
font-weight: var(--dropdown_group-label-font-weight, var(--bds-font_weight--bold));
|
|
1889
|
+
color: var(--dropdown_group-label-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
|
|
1890
|
+
}
|
|
1891
|
+
.bds2160DropdownMenu-item {
|
|
1797
1892
|
all: unset;
|
|
1798
1893
|
display: flex;
|
|
1799
1894
|
align-items: center;
|
|
1800
1895
|
gap: var(--bds-space_xs);
|
|
1801
1896
|
inline-size: 100%;
|
|
1802
|
-
padding: var(--bds-space_xs) var(--bds-
|
|
1897
|
+
padding: var(--dropdown_item-padding, var(--bds-space_xs) var(--bds-space_s));
|
|
1898
|
+
border-radius: var(--dropdown_item-radius, var(--bds-border_radius--xs));
|
|
1803
1899
|
font-family: var(--bds-font_family--body);
|
|
1804
|
-
font-size: var(--bds-font_size--body);
|
|
1900
|
+
font-size: var(--dropdown_item-font-size, var(--bds-font_size--body));
|
|
1805
1901
|
color: currentcolor;
|
|
1806
1902
|
cursor: pointer;
|
|
1807
1903
|
box-sizing: border-box;
|
|
1808
1904
|
transition: var(--bds-animation_transition);
|
|
1809
1905
|
}
|
|
1810
|
-
.
|
|
1811
|
-
opacity: 0.4;
|
|
1906
|
+
.bds2160DropdownMenu-item:disabled {
|
|
1907
|
+
opacity: var(--dropdown_item-opacity--disabled, 0.4);
|
|
1812
1908
|
cursor: not-allowed;
|
|
1813
1909
|
}
|
|
1814
|
-
.
|
|
1910
|
+
.bds2160DropdownMenu-item:focus-visible {
|
|
1815
1911
|
outline: var(--bds-outline_default);
|
|
1816
1912
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
1817
|
-
|
|
1913
|
+
}
|
|
1914
|
+
.bds2160DropdownMenu-item:not(:disabled):focus-visible {
|
|
1915
|
+
background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
|
|
1916
|
+
color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
|
|
1917
|
+
}
|
|
1918
|
+
.bds2160DropdownMenu---destructive {
|
|
1919
|
+
color: var(--dropdown_item-color--destructive, var(--bds-color_error_on-bg));
|
|
1920
|
+
}
|
|
1921
|
+
.bds2160DropdownMenu---destructive:not(:disabled):focus-visible {
|
|
1922
|
+
background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
|
|
1923
|
+
color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
|
|
1818
1924
|
}
|
|
1819
1925
|
@media (hover: hover) and (pointer: fine) {
|
|
1820
|
-
.
|
|
1821
|
-
background-color: var(--dropdown_item-bg--hover, var(--bds-
|
|
1822
|
-
color: var(--dropdown_item-color--hover, var(--bds-
|
|
1926
|
+
.bds2160DropdownMenu-item:not(:disabled):hover {
|
|
1927
|
+
background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
|
|
1928
|
+
color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
|
|
1823
1929
|
}
|
|
1930
|
+
.bds2160DropdownMenu---destructive:not(:disabled):hover {
|
|
1931
|
+
background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
|
|
1932
|
+
color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
|
|
1933
|
+
}
|
|
1934
|
+
}
|
|
1935
|
+
.bds2160DropdownMenu-label {
|
|
1936
|
+
flex: 1;
|
|
1937
|
+
}
|
|
1938
|
+
.bds2160DropdownMenu-shortcut {
|
|
1939
|
+
flex-shrink: 0;
|
|
1940
|
+
color: var(--dropdown_shortcut-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
|
|
1941
|
+
font-size: var(--dropdown_shortcut-font-size, var(--bds-font_size--body--s));
|
|
1824
1942
|
}
|
|
1825
|
-
.
|
|
1943
|
+
.bds2160DropdownMenu-icon {
|
|
1826
1944
|
display: flex;
|
|
1827
1945
|
align-items: center;
|
|
1828
1946
|
flex-shrink: 0;
|
|
@@ -1830,11 +1948,11 @@
|
|
|
1830
1948
|
}
|
|
1831
1949
|
|
|
1832
1950
|
/* src/components/interaction/Popover/Popover.module.css */
|
|
1833
|
-
@layer boostdev.
|
|
1834
|
-
.
|
|
1951
|
+
@layer boostdev.bds2160Popover-component {
|
|
1952
|
+
.bds2160Popover-wrapper {
|
|
1835
1953
|
display: inline-flex;
|
|
1836
1954
|
}
|
|
1837
|
-
.
|
|
1955
|
+
.bds2160Popover-panel {
|
|
1838
1956
|
position: fixed;
|
|
1839
1957
|
inset: unset;
|
|
1840
1958
|
margin: 0;
|
|
@@ -1853,7 +1971,7 @@
|
|
|
1853
1971
|
color: var(--popover_on-color, var(--bds-color_on-bg));
|
|
1854
1972
|
font-size: var(--bds-font_size--body);
|
|
1855
1973
|
}
|
|
1856
|
-
.
|
|
1974
|
+
.bds2160Popover-panel[data-placement=bottom] {
|
|
1857
1975
|
top: anchor(bottom);
|
|
1858
1976
|
left: anchor(left);
|
|
1859
1977
|
margin-block-start: var(--bds-space_xs);
|
|
@@ -1862,7 +1980,7 @@
|
|
|
1862
1980
|
--popover-right,
|
|
1863
1981
|
--popover-left;
|
|
1864
1982
|
}
|
|
1865
|
-
.
|
|
1983
|
+
.bds2160Popover-panel[data-placement=top] {
|
|
1866
1984
|
bottom: anchor(top);
|
|
1867
1985
|
left: anchor(left);
|
|
1868
1986
|
margin-block-end: var(--bds-space_xs);
|
|
@@ -1871,7 +1989,7 @@
|
|
|
1871
1989
|
--popover-right,
|
|
1872
1990
|
--popover-left;
|
|
1873
1991
|
}
|
|
1874
|
-
.
|
|
1992
|
+
.bds2160Popover-panel[data-placement=right] {
|
|
1875
1993
|
top: anchor(top);
|
|
1876
1994
|
left: anchor(right);
|
|
1877
1995
|
margin-inline-start: var(--bds-space_xs);
|
|
@@ -1880,7 +1998,7 @@
|
|
|
1880
1998
|
--popover-bottom,
|
|
1881
1999
|
--popover-top;
|
|
1882
2000
|
}
|
|
1883
|
-
.
|
|
2001
|
+
.bds2160Popover-panel[data-placement=left] {
|
|
1884
2002
|
top: anchor(top);
|
|
1885
2003
|
right: anchor(left);
|
|
1886
2004
|
margin-inline-end: var(--bds-space_xs);
|
|
@@ -1938,10 +2056,10 @@
|
|
|
1938
2056
|
margin-block-end: var(--bds-space_xs);
|
|
1939
2057
|
}
|
|
1940
2058
|
@media (width <= 420px) {
|
|
1941
|
-
.
|
|
1942
|
-
.
|
|
1943
|
-
.
|
|
1944
|
-
.
|
|
2059
|
+
.bds2160Popover-panel[data-placement=bottom],
|
|
2060
|
+
.bds2160Popover-panel[data-placement=top],
|
|
2061
|
+
.bds2160Popover-panel[data-placement=left],
|
|
2062
|
+
.bds2160Popover-panel[data-placement=right] {
|
|
1945
2063
|
inset-inline: var(--bds-space_xs);
|
|
1946
2064
|
inline-size: 100%;
|
|
1947
2065
|
max-inline-size: calc(100svw - 2 * var(--bds-space_xs));
|
|
@@ -1949,13 +2067,13 @@
|
|
|
1949
2067
|
}
|
|
1950
2068
|
}
|
|
1951
2069
|
@media (aspect-ratio >= 2/1) {
|
|
1952
|
-
.
|
|
2070
|
+
.bds2160Popover-panel[data-placement=bottom] {
|
|
1953
2071
|
position-try-fallbacks:
|
|
1954
2072
|
--popover-top,
|
|
1955
2073
|
--popover-right,
|
|
1956
2074
|
--popover-left;
|
|
1957
2075
|
}
|
|
1958
|
-
.
|
|
2076
|
+
.bds2160Popover-panel[data-placement=top] {
|
|
1959
2077
|
position-try-fallbacks:
|
|
1960
2078
|
--popover-bottom,
|
|
1961
2079
|
--popover-right,
|
|
@@ -1965,24 +2083,24 @@
|
|
|
1965
2083
|
}
|
|
1966
2084
|
|
|
1967
2085
|
/* src/components/interaction/Rating/Rating.module.css */
|
|
1968
|
-
@layer boostdev.
|
|
1969
|
-
.
|
|
2086
|
+
@layer boostdev.bds2160Rating-component {
|
|
2087
|
+
.bds2160Rating-rating {
|
|
1970
2088
|
display: inline-flex;
|
|
1971
2089
|
gap: var(--bds-space_xxxs);
|
|
1972
2090
|
color: var(--rating_color, var(--bds-color_bg));
|
|
1973
2091
|
}
|
|
1974
|
-
.
|
|
2092
|
+
.bds2160Rating-star {
|
|
1975
2093
|
inline-size: 1.5em;
|
|
1976
2094
|
block-size: 1.5em;
|
|
1977
2095
|
}
|
|
1978
|
-
.
|
|
2096
|
+
.bds2160Rating---filled {
|
|
1979
2097
|
color: var(--rating_color--filled, var(--bds-color_warning));
|
|
1980
2098
|
}
|
|
1981
2099
|
}
|
|
1982
2100
|
|
|
1983
2101
|
/* src/components/interaction/Toast/Toast.module.css */
|
|
1984
|
-
@layer boostdev.
|
|
1985
|
-
.
|
|
2102
|
+
@layer boostdev.bds2160Toast-component {
|
|
2103
|
+
.bds2160Toast-toastContainer {
|
|
1986
2104
|
position: fixed;
|
|
1987
2105
|
inset: unset;
|
|
1988
2106
|
inset-block-end: var(--bds-space_xl);
|
|
@@ -1994,7 +2112,7 @@
|
|
|
1994
2112
|
padding: 0;
|
|
1995
2113
|
background: transparent;
|
|
1996
2114
|
}
|
|
1997
|
-
.
|
|
2115
|
+
.bds2160Toast-toast {
|
|
1998
2116
|
padding: var(--bds-space_m) var(--bds-space_l);
|
|
1999
2117
|
background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
|
|
2000
2118
|
color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
|
|
@@ -2006,29 +2124,29 @@
|
|
|
2006
2124
|
min-inline-size: min(300px, calc(100svw - 2 * var(--bds-space_xl)));
|
|
2007
2125
|
animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
|
|
2008
2126
|
}
|
|
2009
|
-
.
|
|
2127
|
+
.bds2160Toast-toast:dir(rtl) {
|
|
2010
2128
|
--toast_slide-offset: -100%;
|
|
2011
2129
|
}
|
|
2012
|
-
.
|
|
2130
|
+
.bds2160Toast-toast.bds2160Toast---variant_success {
|
|
2013
2131
|
--toast_color--variant: var(--toast_color--success, var(--bds-color_success));
|
|
2014
2132
|
--toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
|
|
2015
2133
|
}
|
|
2016
|
-
.
|
|
2134
|
+
.bds2160Toast-toast.bds2160Toast---variant_warning {
|
|
2017
2135
|
--toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
|
|
2018
2136
|
--toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
|
|
2019
2137
|
}
|
|
2020
|
-
.
|
|
2138
|
+
.bds2160Toast-toast.bds2160Toast---variant_info {
|
|
2021
2139
|
--toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
|
|
2022
2140
|
--toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
|
|
2023
2141
|
}
|
|
2024
|
-
.
|
|
2142
|
+
.bds2160Toast-toast.bds2160Toast---variant_error {
|
|
2025
2143
|
--toast_color--variant: var(--toast_color--error, var(--bds-color_error));
|
|
2026
2144
|
--toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
|
|
2027
2145
|
}
|
|
2028
|
-
.
|
|
2146
|
+
.bds2160Toast-message {
|
|
2029
2147
|
flex: 1;
|
|
2030
2148
|
}
|
|
2031
|
-
.
|
|
2149
|
+
.bds2160Toast-closeButton {
|
|
2032
2150
|
position: relative;
|
|
2033
2151
|
display: flex;
|
|
2034
2152
|
align-items: center;
|
|
@@ -2042,16 +2160,16 @@
|
|
|
2042
2160
|
cursor: pointer;
|
|
2043
2161
|
color: currentcolor;
|
|
2044
2162
|
}
|
|
2045
|
-
.
|
|
2163
|
+
.bds2160Toast-closeButton::after {
|
|
2046
2164
|
content: "";
|
|
2047
2165
|
position: absolute;
|
|
2048
2166
|
inset: -0.75rem;
|
|
2049
2167
|
}
|
|
2050
|
-
.
|
|
2168
|
+
.bds2160Toast-closeButton:focus-visible {
|
|
2051
2169
|
outline: var(--bds-outline_default);
|
|
2052
2170
|
outline-offset: var(--bds-outline_offset);
|
|
2053
2171
|
}
|
|
2054
|
-
.
|
|
2172
|
+
.bds2160Toast-closeButton svg {
|
|
2055
2173
|
inline-size: 1rem;
|
|
2056
2174
|
block-size: 1rem;
|
|
2057
2175
|
}
|
|
@@ -2067,25 +2185,25 @@
|
|
|
2067
2185
|
}
|
|
2068
2186
|
}
|
|
2069
2187
|
@media (prefers-reduced-motion: reduce) {
|
|
2070
|
-
.
|
|
2188
|
+
.bds2160Toast-toast {
|
|
2071
2189
|
animation: none;
|
|
2072
2190
|
}
|
|
2073
2191
|
}
|
|
2074
2192
|
|
|
2075
2193
|
/* src/components/interaction/form/Checkbox/Checkbox.module.css */
|
|
2076
|
-
@layer boostdev.
|
|
2077
|
-
.
|
|
2194
|
+
@layer boostdev.bds2160Checkbox-component {
|
|
2195
|
+
.bds2160Checkbox-checkboxGroup {
|
|
2078
2196
|
--checkbox_size: calc(var(--bds-space_s) * 2);
|
|
2079
2197
|
--inputSize: var(--checkbox_size);
|
|
2080
2198
|
display: flex;
|
|
2081
2199
|
flex-direction: column;
|
|
2082
2200
|
}
|
|
2083
|
-
.
|
|
2201
|
+
.bds2160Checkbox-inputWrapper {
|
|
2084
2202
|
display: flex;
|
|
2085
2203
|
align-items: stretch;
|
|
2086
2204
|
gap: var(--checkbox_gap, var(--bds-space_m));
|
|
2087
2205
|
}
|
|
2088
|
-
.
|
|
2206
|
+
.bds2160Checkbox-checkbox {
|
|
2089
2207
|
margin-block-start: var(--checkbox_offset, 0.25em);
|
|
2090
2208
|
inline-size: var(--checkbox_size);
|
|
2091
2209
|
block-size: var(--checkbox_size);
|
|
@@ -2101,11 +2219,11 @@
|
|
|
2101
2219
|
position: relative;
|
|
2102
2220
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2103
2221
|
}
|
|
2104
|
-
.
|
|
2222
|
+
.bds2160Checkbox-checkbox:checked {
|
|
2105
2223
|
background-color: var(--checkbox_color-active, var(--bdc-color_active));
|
|
2106
2224
|
--bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
|
|
2107
2225
|
}
|
|
2108
|
-
.
|
|
2226
|
+
.bds2160Checkbox-checkbox:checked::after {
|
|
2109
2227
|
content: "";
|
|
2110
2228
|
position: absolute;
|
|
2111
2229
|
inset-inline-start: 0.6em;
|
|
@@ -2116,40 +2234,51 @@
|
|
|
2116
2234
|
border-width: 0 2px 2px 0;
|
|
2117
2235
|
transform: rotate(45deg);
|
|
2118
2236
|
}
|
|
2119
|
-
.
|
|
2237
|
+
.bds2160Checkbox-checkbox:focus {
|
|
2120
2238
|
--bdc_color: var(--bdc_color--focus);
|
|
2121
2239
|
}
|
|
2122
|
-
.
|
|
2240
|
+
.bds2160Checkbox-checkbox:focus-visible {
|
|
2123
2241
|
outline: var(--bds-outline_default);
|
|
2124
2242
|
outline-offset: var(--bds-outline_offset);
|
|
2125
2243
|
}
|
|
2126
|
-
.
|
|
2244
|
+
.bds2160Checkbox-checkbox:disabled {
|
|
2127
2245
|
opacity: 0.5;
|
|
2128
2246
|
cursor: not-allowed;
|
|
2129
2247
|
}
|
|
2130
|
-
.
|
|
2248
|
+
.bds2160Checkbox-checkboxError {
|
|
2131
2249
|
--bdc_color: var(--bdc_color--error);
|
|
2250
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2132
2251
|
}
|
|
2133
2252
|
}
|
|
2134
2253
|
|
|
2135
2254
|
/* src/components/interaction/form/atoms/Message.module.css */
|
|
2136
|
-
@layer boostdev.
|
|
2137
|
-
.
|
|
2138
|
-
.
|
|
2139
|
-
font-size: var(--bds-font_size--body--s);
|
|
2255
|
+
@layer boostdev.bds2160Message-component {
|
|
2256
|
+
.bds2160Message-error,
|
|
2257
|
+
.bds2160Message-hint {
|
|
2258
|
+
font-size: var(--formMessage_font-size, var(--bds-font_size--body--s));
|
|
2140
2259
|
margin-inline-start: var(--labelPosition, 0);
|
|
2141
2260
|
}
|
|
2142
|
-
.
|
|
2143
|
-
|
|
2261
|
+
.bds2160Message-error {
|
|
2262
|
+
display: flex;
|
|
2263
|
+
align-items: flex-start;
|
|
2264
|
+
gap: var(--formMessage_gap, var(--bds-space_xxs));
|
|
2265
|
+
color: var(--formMessage_color--error, var(--bds-color_error_on-bg));
|
|
2266
|
+
font-weight: var(--formMessage_font-weight--error, var(--bds-font_weight--semibold));
|
|
2144
2267
|
}
|
|
2145
|
-
.
|
|
2146
|
-
|
|
2268
|
+
.bds2160Message-hint {
|
|
2269
|
+
color: var(--formMessage_color--hint, inherit);
|
|
2270
|
+
font-style: var(--formMessage_font-style--hint, italic);
|
|
2271
|
+
}
|
|
2272
|
+
.bds2160Message-icon {
|
|
2273
|
+
inline-size: var(--formMessage_icon-size, 1.15em);
|
|
2274
|
+
block-size: var(--formMessage_icon-size, 1.15em);
|
|
2275
|
+
flex-shrink: 0;
|
|
2147
2276
|
}
|
|
2148
2277
|
}
|
|
2149
2278
|
|
|
2150
2279
|
/* src/components/interaction/form/atoms/Label.module.css */
|
|
2151
|
-
@layer boostdev.
|
|
2152
|
-
.
|
|
2280
|
+
@layer boostdev.bds2160Label-component {
|
|
2281
|
+
.bds2160Label-label {
|
|
2153
2282
|
display: flex;
|
|
2154
2283
|
align-items: center;
|
|
2155
2284
|
font-family: var(--bds-font_family--body);
|
|
@@ -2159,8 +2288,8 @@
|
|
|
2159
2288
|
}
|
|
2160
2289
|
|
|
2161
2290
|
/* src/components/interaction/form/atoms/InputContainer.module.css */
|
|
2162
|
-
@layer boostdev.
|
|
2163
|
-
.
|
|
2291
|
+
@layer boostdev.bds2160InputContainer-component {
|
|
2292
|
+
.bds2160InputContainer-container {
|
|
2164
2293
|
--labelPosition: calc(var(--inputSize) + var(--bds-space_m));
|
|
2165
2294
|
display: flex;
|
|
2166
2295
|
flex-direction: column;
|
|
@@ -2169,8 +2298,8 @@
|
|
|
2169
2298
|
}
|
|
2170
2299
|
|
|
2171
2300
|
/* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
|
|
2172
|
-
@layer boostdev.
|
|
2173
|
-
.
|
|
2301
|
+
@layer boostdev.bds2160CheckboxGroup-component {
|
|
2302
|
+
.bds2160CheckboxGroup-group {
|
|
2174
2303
|
border: none;
|
|
2175
2304
|
padding: 0;
|
|
2176
2305
|
margin: 0;
|
|
@@ -2178,7 +2307,7 @@
|
|
|
2178
2307
|
flex-direction: column;
|
|
2179
2308
|
gap: var(--checkboxGroup_gap, var(--bds-space_xs));
|
|
2180
2309
|
}
|
|
2181
|
-
.
|
|
2310
|
+
.bds2160CheckboxGroup-legend {
|
|
2182
2311
|
font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
|
|
2183
2312
|
font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
|
|
2184
2313
|
font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
|
|
@@ -2186,10 +2315,10 @@
|
|
|
2186
2315
|
padding: 0;
|
|
2187
2316
|
margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
|
|
2188
2317
|
}
|
|
2189
|
-
.
|
|
2318
|
+
.bds2160CheckboxGroup-required {
|
|
2190
2319
|
color: var(--checkboxGroup_required-color, var(--bds-color_error));
|
|
2191
2320
|
}
|
|
2192
|
-
.
|
|
2321
|
+
.bds2160CheckboxGroup-requiredLabel {
|
|
2193
2322
|
position: absolute;
|
|
2194
2323
|
inline-size: 1px;
|
|
2195
2324
|
block-size: 1px;
|
|
@@ -2200,25 +2329,29 @@
|
|
|
2200
2329
|
white-space: nowrap;
|
|
2201
2330
|
border-width: 0;
|
|
2202
2331
|
}
|
|
2203
|
-
.
|
|
2332
|
+
.bds2160CheckboxGroup-items {
|
|
2204
2333
|
display: flex;
|
|
2205
2334
|
flex-direction: column;
|
|
2206
2335
|
gap: var(--checkboxGroup_items-gap, var(--bds-space_xs));
|
|
2207
2336
|
}
|
|
2337
|
+
.bds2160CheckboxGroup-groupError input {
|
|
2338
|
+
--bdc_color: var(--bdc_color--error);
|
|
2339
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2340
|
+
}
|
|
2208
2341
|
}
|
|
2209
2342
|
|
|
2210
2343
|
/* src/components/interaction/form/Combobox/Combobox.module.css */
|
|
2211
|
-
@layer boostdev.
|
|
2212
|
-
.
|
|
2344
|
+
@layer boostdev.bds2160Combobox-component {
|
|
2345
|
+
.bds2160Combobox-formGroup {
|
|
2213
2346
|
display: flex;
|
|
2214
2347
|
flex-direction: column;
|
|
2215
2348
|
}
|
|
2216
|
-
.
|
|
2349
|
+
.bds2160Combobox-inputWrapper {
|
|
2217
2350
|
position: relative;
|
|
2218
2351
|
display: flex;
|
|
2219
2352
|
align-items: center;
|
|
2220
2353
|
}
|
|
2221
|
-
.
|
|
2354
|
+
.bds2160Combobox-input {
|
|
2222
2355
|
appearance: none;
|
|
2223
2356
|
inline-size: 100%;
|
|
2224
2357
|
font-family: var(--bds-font_family--body);
|
|
@@ -2234,21 +2367,22 @@
|
|
|
2234
2367
|
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
2235
2368
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2236
2369
|
}
|
|
2237
|
-
.
|
|
2370
|
+
.bds2160Combobox-input:focus {
|
|
2238
2371
|
--bdc_color: var(--bdc_color--focus);
|
|
2239
2372
|
}
|
|
2240
|
-
.
|
|
2373
|
+
.bds2160Combobox-input:focus-visible {
|
|
2241
2374
|
outline: var(--bds-outline_default);
|
|
2242
2375
|
outline-offset: var(--bds-outline_offset);
|
|
2243
2376
|
}
|
|
2244
|
-
.
|
|
2377
|
+
.bds2160Combobox-input:disabled {
|
|
2245
2378
|
opacity: 0.5;
|
|
2246
2379
|
cursor: not-allowed;
|
|
2247
2380
|
}
|
|
2248
|
-
.
|
|
2381
|
+
.bds2160Combobox-inputError {
|
|
2249
2382
|
--bdc_color: var(--bdc_color--error);
|
|
2383
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2250
2384
|
}
|
|
2251
|
-
.
|
|
2385
|
+
.bds2160Combobox-chevron {
|
|
2252
2386
|
position: absolute;
|
|
2253
2387
|
inset-inline-end: var(--bds-space_s);
|
|
2254
2388
|
display: flex;
|
|
@@ -2256,11 +2390,11 @@
|
|
|
2256
2390
|
pointer-events: none;
|
|
2257
2391
|
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
2258
2392
|
}
|
|
2259
|
-
.
|
|
2393
|
+
.bds2160Combobox-chevron svg {
|
|
2260
2394
|
inline-size: 1rem;
|
|
2261
2395
|
block-size: 1rem;
|
|
2262
2396
|
}
|
|
2263
|
-
.
|
|
2397
|
+
.bds2160Combobox-listbox {
|
|
2264
2398
|
position: absolute;
|
|
2265
2399
|
inset-block-start: calc(100% + var(--bds-space_xxs));
|
|
2266
2400
|
inset-inline: 0;
|
|
@@ -2278,7 +2412,7 @@
|
|
|
2278
2412
|
color: var(--combobox_on-color, var(--bds-color_on-bg));
|
|
2279
2413
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
|
|
2280
2414
|
}
|
|
2281
|
-
.
|
|
2415
|
+
.bds2160Combobox-option {
|
|
2282
2416
|
display: flex;
|
|
2283
2417
|
align-items: center;
|
|
2284
2418
|
padding: var(--combobox_option-padding-block, var(--bds-space_xs)) var(--combobox_option-padding-inline, var(--bds-space_m));
|
|
@@ -2287,29 +2421,29 @@
|
|
|
2287
2421
|
cursor: pointer;
|
|
2288
2422
|
transition: var(--bds-animation_transition);
|
|
2289
2423
|
}
|
|
2290
|
-
.
|
|
2424
|
+
.bds2160Combobox-option.bds2160Combobox---highlighted {
|
|
2291
2425
|
background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
|
|
2292
2426
|
color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
|
|
2293
2427
|
}
|
|
2294
|
-
.
|
|
2428
|
+
.bds2160Combobox-option.bds2160Combobox---selected {
|
|
2295
2429
|
font-weight: var(--bds-font_weight--semibold);
|
|
2296
2430
|
}
|
|
2297
|
-
.
|
|
2431
|
+
.bds2160Combobox-option.bds2160Combobox---disabled {
|
|
2298
2432
|
opacity: 0.4;
|
|
2299
2433
|
cursor: not-allowed;
|
|
2300
2434
|
}
|
|
2301
2435
|
}
|
|
2302
2436
|
|
|
2303
2437
|
/* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
|
|
2304
|
-
@layer boostdev.
|
|
2305
|
-
.
|
|
2438
|
+
@layer boostdev.bds2160FieldGroup-component {
|
|
2439
|
+
.bds2160FieldGroup-fieldGroup {
|
|
2306
2440
|
border: 0;
|
|
2307
2441
|
margin: 0;
|
|
2308
2442
|
padding: 0;
|
|
2309
2443
|
min-inline-size: 0;
|
|
2310
2444
|
--fieldGroup_collapse-threshold: calc( var(--fieldGroup_field-count, 1) * var(--fieldGroup_min-field-width, 12rem) + (var(--fieldGroup_field-count, 1) - 1) * var(--fieldGroup_gap, var(--bds-space_m)) );
|
|
2311
2445
|
}
|
|
2312
|
-
.
|
|
2446
|
+
.bds2160FieldGroup-legend {
|
|
2313
2447
|
inline-size: 100%;
|
|
2314
2448
|
padding-inline: 0;
|
|
2315
2449
|
padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
|
|
@@ -2321,28 +2455,28 @@
|
|
|
2321
2455
|
font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
|
|
2322
2456
|
line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
|
|
2323
2457
|
}
|
|
2324
|
-
.
|
|
2458
|
+
.bds2160FieldGroup-fieldGroup:disabled .bds2160FieldGroup-legend {
|
|
2325
2459
|
opacity: 0.5;
|
|
2326
2460
|
}
|
|
2327
|
-
.
|
|
2461
|
+
.bds2160FieldGroup-fields {
|
|
2328
2462
|
display: flex;
|
|
2329
2463
|
flex-direction: column;
|
|
2330
2464
|
gap: var(--fieldGroup_gap, var(--bds-space_m));
|
|
2331
2465
|
}
|
|
2332
|
-
.
|
|
2466
|
+
.bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields {
|
|
2333
2467
|
flex-flow: row wrap;
|
|
2334
2468
|
}
|
|
2335
|
-
.
|
|
2469
|
+
.bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields > * {
|
|
2336
2470
|
flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
|
|
2337
2471
|
min-inline-size: 0;
|
|
2338
2472
|
}
|
|
2339
|
-
.
|
|
2473
|
+
.bds2160FieldGroup-probeContainer {
|
|
2340
2474
|
position: relative;
|
|
2341
2475
|
inline-size: 0;
|
|
2342
2476
|
block-size: 0;
|
|
2343
2477
|
overflow: hidden;
|
|
2344
2478
|
}
|
|
2345
|
-
.
|
|
2479
|
+
.bds2160FieldGroup-probe {
|
|
2346
2480
|
position: absolute;
|
|
2347
2481
|
inset-block-start: 0;
|
|
2348
2482
|
inset-inline-start: 0;
|
|
@@ -2350,28 +2484,28 @@
|
|
|
2350
2484
|
inline-size: var(--fieldGroup_collapse-threshold);
|
|
2351
2485
|
visibility: hidden;
|
|
2352
2486
|
}
|
|
2353
|
-
.
|
|
2487
|
+
.bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields {
|
|
2354
2488
|
flex-direction: column;
|
|
2355
2489
|
}
|
|
2356
|
-
.
|
|
2490
|
+
.bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields > * {
|
|
2357
2491
|
flex: 1 1 auto;
|
|
2358
2492
|
}
|
|
2359
2493
|
}
|
|
2360
2494
|
|
|
2361
2495
|
/* src/components/interaction/form/FileInput/FileInput.module.css */
|
|
2362
|
-
@layer boostdev.
|
|
2363
|
-
.
|
|
2496
|
+
@layer boostdev.bds2160FileInput-component {
|
|
2497
|
+
.bds2160FileInput-formGroup {
|
|
2364
2498
|
display: flex;
|
|
2365
2499
|
flex-direction: column;
|
|
2366
2500
|
}
|
|
2367
|
-
.
|
|
2501
|
+
.bds2160FileInput-fieldLabel {
|
|
2368
2502
|
display: flex;
|
|
2369
2503
|
align-items: center;
|
|
2370
2504
|
font-family: var(--bds-font_family--body);
|
|
2371
2505
|
color: var(--bds-color_on-bg);
|
|
2372
2506
|
margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
|
|
2373
2507
|
}
|
|
2374
|
-
.
|
|
2508
|
+
.bds2160FileInput-dropZone {
|
|
2375
2509
|
display: flex;
|
|
2376
2510
|
flex-direction: column;
|
|
2377
2511
|
align-items: center;
|
|
@@ -2385,40 +2519,40 @@
|
|
|
2385
2519
|
text-align: center;
|
|
2386
2520
|
transition: var(--bds-animation_transition);
|
|
2387
2521
|
}
|
|
2388
|
-
.
|
|
2522
|
+
.bds2160FileInput-dropZone:focus-within {
|
|
2389
2523
|
outline: var(--bds-outline_default);
|
|
2390
2524
|
outline-offset: var(--bds-outline_offset);
|
|
2391
2525
|
border-color: var(--fileInput_border-color, currentcolor);
|
|
2392
2526
|
}
|
|
2393
|
-
.
|
|
2527
|
+
.bds2160FileInput-isDragging {
|
|
2394
2528
|
border-color: currentcolor;
|
|
2395
2529
|
background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
|
|
2396
2530
|
}
|
|
2397
|
-
.
|
|
2531
|
+
.bds2160FileInput-hasError {
|
|
2398
2532
|
border-color: var(--bds-color_error);
|
|
2399
2533
|
}
|
|
2400
|
-
.
|
|
2534
|
+
.bds2160FileInput-isDisabled {
|
|
2401
2535
|
opacity: 0.5;
|
|
2402
2536
|
cursor: not-allowed;
|
|
2403
2537
|
}
|
|
2404
|
-
.
|
|
2538
|
+
.bds2160FileInput-icon {
|
|
2405
2539
|
inline-size: 2rem;
|
|
2406
2540
|
block-size: 2rem;
|
|
2407
2541
|
flex-shrink: 0;
|
|
2408
2542
|
}
|
|
2409
|
-
.
|
|
2543
|
+
.bds2160FileInput-prompt {
|
|
2410
2544
|
font-size: var(--fileInput_font-size, var(--bds-font_size--body));
|
|
2411
2545
|
color: var(--bds-color_on-bg);
|
|
2412
2546
|
}
|
|
2413
|
-
.
|
|
2547
|
+
.bds2160FileInput-prompt strong {
|
|
2414
2548
|
color: var(--bds-color_interactive_on-bg);
|
|
2415
2549
|
font-weight: var(--bds-font_weight--semibold);
|
|
2416
2550
|
}
|
|
2417
|
-
.
|
|
2551
|
+
.bds2160FileInput-acceptHint {
|
|
2418
2552
|
font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
|
|
2419
2553
|
color: var(--bds-color_on-bg);
|
|
2420
2554
|
}
|
|
2421
|
-
.
|
|
2555
|
+
.bds2160FileInput-hiddenInput {
|
|
2422
2556
|
position: absolute;
|
|
2423
2557
|
inline-size: 1px;
|
|
2424
2558
|
block-size: 1px;
|
|
@@ -2428,7 +2562,7 @@
|
|
|
2428
2562
|
border: 0;
|
|
2429
2563
|
}
|
|
2430
2564
|
@media (hover: hover) and (pointer: fine) {
|
|
2431
|
-
.
|
|
2565
|
+
.bds2160FileInput-dropZone:not(.bds2160FileInput-isDisabled):hover {
|
|
2432
2566
|
border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
|
|
2433
2567
|
background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
|
|
2434
2568
|
}
|
|
@@ -2436,13 +2570,13 @@
|
|
|
2436
2570
|
}
|
|
2437
2571
|
|
|
2438
2572
|
/* src/components/interaction/form/FormInput/FormInput.module.css */
|
|
2439
|
-
@layer boostdev.
|
|
2440
|
-
.
|
|
2573
|
+
@layer boostdev.bds2160FormInput-component {
|
|
2574
|
+
.bds2160FormInput-formGroup {
|
|
2441
2575
|
--labelPosition: 0;
|
|
2442
2576
|
display: flex;
|
|
2443
2577
|
flex-direction: column;
|
|
2444
2578
|
}
|
|
2445
|
-
.
|
|
2579
|
+
.bds2160FormInput-input {
|
|
2446
2580
|
font-family: var(--formInput_font-family, var(--bds-font_family--body));
|
|
2447
2581
|
font-size: var(--formInput_font-size, var(--bds-font_size--body));
|
|
2448
2582
|
padding: var(--formInput_padding, var(--bds-space_s));
|
|
@@ -2455,29 +2589,30 @@
|
|
|
2455
2589
|
background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
|
|
2456
2590
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2457
2591
|
}
|
|
2458
|
-
.
|
|
2592
|
+
.bds2160FormInput-input:focus {
|
|
2459
2593
|
--bdc_color: var(--bdc_color--focus);
|
|
2460
2594
|
}
|
|
2461
|
-
.
|
|
2595
|
+
.bds2160FormInput-input:focus-visible {
|
|
2462
2596
|
outline: var(--bds-outline_default);
|
|
2463
2597
|
outline-offset: var(--bds-outline_offset);
|
|
2464
2598
|
}
|
|
2465
|
-
.
|
|
2599
|
+
.bds2160FormInput-input:disabled {
|
|
2466
2600
|
cursor: not-allowed;
|
|
2467
2601
|
opacity: 0.5;
|
|
2468
2602
|
}
|
|
2469
|
-
.
|
|
2603
|
+
.bds2160FormInput-inputError {
|
|
2470
2604
|
--bdc_color: var(--bdc_color--error);
|
|
2605
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2471
2606
|
}
|
|
2472
2607
|
}
|
|
2473
2608
|
|
|
2474
2609
|
/* src/components/interaction/form/NumberInput/NumberInput.module.css */
|
|
2475
|
-
@layer boostdev.
|
|
2476
|
-
.
|
|
2610
|
+
@layer boostdev.bds2160NumberInput-component {
|
|
2611
|
+
.bds2160NumberInput-formGroup {
|
|
2477
2612
|
display: flex;
|
|
2478
2613
|
flex-direction: column;
|
|
2479
2614
|
}
|
|
2480
|
-
.
|
|
2615
|
+
.bds2160NumberInput-inputRow {
|
|
2481
2616
|
display: flex;
|
|
2482
2617
|
align-items: stretch;
|
|
2483
2618
|
border: var(--numberInput_border, none);
|
|
@@ -2489,14 +2624,14 @@
|
|
|
2489
2624
|
overflow: hidden;
|
|
2490
2625
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2491
2626
|
}
|
|
2492
|
-
.
|
|
2627
|
+
.bds2160NumberInput-inputRow:focus-within {
|
|
2493
2628
|
--bdc_color: var(--bdc_color--focus);
|
|
2494
2629
|
}
|
|
2495
|
-
.
|
|
2630
|
+
.bds2160NumberInput-inputRow:focus-within:has(:focus-visible) {
|
|
2496
2631
|
outline: var(--bds-outline_default);
|
|
2497
2632
|
outline-offset: var(--bds-outline_offset);
|
|
2498
2633
|
}
|
|
2499
|
-
.
|
|
2634
|
+
.bds2160NumberInput-input {
|
|
2500
2635
|
flex: 1;
|
|
2501
2636
|
border: none;
|
|
2502
2637
|
outline: none;
|
|
@@ -2509,14 +2644,15 @@
|
|
|
2509
2644
|
min-inline-size: 0;
|
|
2510
2645
|
appearance: textfield;
|
|
2511
2646
|
}
|
|
2512
|
-
.
|
|
2513
|
-
.
|
|
2647
|
+
.bds2160NumberInput-input::-webkit-inner-spin-button,
|
|
2648
|
+
.bds2160NumberInput-input::-webkit-outer-spin-button {
|
|
2514
2649
|
appearance: none;
|
|
2515
2650
|
}
|
|
2516
|
-
.
|
|
2651
|
+
.bds2160NumberInput-inputError {
|
|
2517
2652
|
--bdc_color: var(--bdc_color--error);
|
|
2653
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2518
2654
|
}
|
|
2519
|
-
.
|
|
2655
|
+
.bds2160NumberInput-stepper {
|
|
2520
2656
|
all: unset;
|
|
2521
2657
|
display: flex;
|
|
2522
2658
|
align-items: center;
|
|
@@ -2529,25 +2665,25 @@
|
|
|
2529
2665
|
transition: var(--bds-animation_transition);
|
|
2530
2666
|
flex-shrink: 0;
|
|
2531
2667
|
}
|
|
2532
|
-
.
|
|
2668
|
+
.bds2160NumberInput-stepper svg {
|
|
2533
2669
|
inline-size: 1rem;
|
|
2534
2670
|
block-size: 1rem;
|
|
2535
2671
|
color: var(--numberInput_stepper-color, var(--bds-color_interactive));
|
|
2536
2672
|
}
|
|
2537
|
-
.
|
|
2673
|
+
.bds2160NumberInput-stepper:first-child {
|
|
2538
2674
|
border-start-start-radius: var(--_radius);
|
|
2539
2675
|
border-end-start-radius: var(--_radius);
|
|
2540
2676
|
}
|
|
2541
|
-
.
|
|
2677
|
+
.bds2160NumberInput-stepper:last-child {
|
|
2542
2678
|
border-start-end-radius: var(--_radius);
|
|
2543
2679
|
border-end-end-radius: var(--_radius);
|
|
2544
2680
|
}
|
|
2545
|
-
.
|
|
2681
|
+
.bds2160NumberInput-stepper:disabled {
|
|
2546
2682
|
opacity: 0.4;
|
|
2547
2683
|
cursor: not-allowed;
|
|
2548
2684
|
}
|
|
2549
2685
|
@media (hover: hover) and (pointer: fine) {
|
|
2550
|
-
.
|
|
2686
|
+
.bds2160NumberInput-stepper:not(:disabled):hover {
|
|
2551
2687
|
background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
|
|
2552
2688
|
opacity: var(--numberInput_stepper-opacity--hover, 0.7);
|
|
2553
2689
|
}
|
|
@@ -2555,30 +2691,30 @@
|
|
|
2555
2691
|
}
|
|
2556
2692
|
|
|
2557
2693
|
/* src/components/interaction/form/Radio/Radio.module.css */
|
|
2558
|
-
@layer boostdev.
|
|
2559
|
-
.
|
|
2694
|
+
@layer boostdev.bds2160Radio-component {
|
|
2695
|
+
.bds2160Radio-radioGroup {
|
|
2560
2696
|
--radio_size: calc(var(--bds-space_s) * 2);
|
|
2561
2697
|
--inputSize: var(--radio_size);
|
|
2562
2698
|
display: flex;
|
|
2563
2699
|
flex-direction: column;
|
|
2564
2700
|
}
|
|
2565
|
-
.
|
|
2701
|
+
.bds2160Radio-inputWrapper {
|
|
2566
2702
|
display: flex;
|
|
2567
2703
|
align-items: flex-start;
|
|
2568
2704
|
gap: var(--bds-space_xs);
|
|
2569
2705
|
}
|
|
2570
|
-
.
|
|
2706
|
+
.bds2160Radio-textWrapper {
|
|
2571
2707
|
display: flex;
|
|
2572
2708
|
flex-direction: column;
|
|
2573
2709
|
gap: var(--bds-space_xxxs);
|
|
2574
2710
|
padding-block-start: var(--bds-space_xxxs);
|
|
2575
2711
|
}
|
|
2576
|
-
.
|
|
2712
|
+
.bds2160Radio-description {
|
|
2577
2713
|
font-size: var(--bds-font_size--body--s);
|
|
2578
2714
|
color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
|
|
2579
2715
|
line-height: var(--bds-font_line-height--body);
|
|
2580
2716
|
}
|
|
2581
|
-
.
|
|
2717
|
+
.bds2160Radio-radio {
|
|
2582
2718
|
flex-shrink: 0;
|
|
2583
2719
|
margin-block-start: var(--radio_offset, 0.2em);
|
|
2584
2720
|
inline-size: var(--radio_size);
|
|
@@ -2595,7 +2731,7 @@
|
|
|
2595
2731
|
position: relative;
|
|
2596
2732
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2597
2733
|
}
|
|
2598
|
-
.
|
|
2734
|
+
.bds2160Radio-radio:checked {
|
|
2599
2735
|
background:
|
|
2600
2736
|
radial-gradient(
|
|
2601
2737
|
circle,
|
|
@@ -2603,29 +2739,30 @@
|
|
|
2603
2739
|
var(--radio_color_bg, var(--bds-color_bg)) 42%);
|
|
2604
2740
|
--bdc_color: var(--radio_color-active, var(--bdc-color_active));
|
|
2605
2741
|
}
|
|
2606
|
-
.
|
|
2742
|
+
.bds2160Radio-radio:focus {
|
|
2607
2743
|
--bdc_color: var(--bdc_color--focus);
|
|
2608
2744
|
}
|
|
2609
|
-
.
|
|
2745
|
+
.bds2160Radio-radio:focus-visible {
|
|
2610
2746
|
outline: var(--bds-outline_default);
|
|
2611
2747
|
outline-offset: var(--bds-outline_offset);
|
|
2612
2748
|
}
|
|
2613
|
-
.
|
|
2749
|
+
.bds2160Radio-radio:disabled {
|
|
2614
2750
|
cursor: not-allowed;
|
|
2615
2751
|
opacity: 0.5;
|
|
2616
2752
|
}
|
|
2617
|
-
.
|
|
2753
|
+
.bds2160Radio-radio:disabled ~ .bds2160Radio-textWrapper {
|
|
2618
2754
|
opacity: 0.5;
|
|
2619
2755
|
cursor: not-allowed;
|
|
2620
2756
|
}
|
|
2621
|
-
.
|
|
2757
|
+
.bds2160Radio-radioError {
|
|
2622
2758
|
--bdc_color: var(--bdc_color--error);
|
|
2759
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2623
2760
|
}
|
|
2624
2761
|
}
|
|
2625
2762
|
|
|
2626
2763
|
/* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
|
|
2627
|
-
@layer boostdev.
|
|
2628
|
-
.
|
|
2764
|
+
@layer boostdev.bds2160RadioGroup-component {
|
|
2765
|
+
.bds2160RadioGroup-group {
|
|
2629
2766
|
border: none;
|
|
2630
2767
|
padding: 0;
|
|
2631
2768
|
margin: 0;
|
|
@@ -2633,7 +2770,7 @@
|
|
|
2633
2770
|
flex-direction: column;
|
|
2634
2771
|
gap: var(--radioGroup_gap, var(--bds-space_xs));
|
|
2635
2772
|
}
|
|
2636
|
-
.
|
|
2773
|
+
.bds2160RadioGroup-legend {
|
|
2637
2774
|
font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
|
|
2638
2775
|
font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
|
|
2639
2776
|
font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
|
|
@@ -2641,10 +2778,10 @@
|
|
|
2641
2778
|
padding: 0;
|
|
2642
2779
|
margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
|
|
2643
2780
|
}
|
|
2644
|
-
.
|
|
2781
|
+
.bds2160RadioGroup-required {
|
|
2645
2782
|
color: var(--radioGroup_required-color, var(--bds-color_error));
|
|
2646
2783
|
}
|
|
2647
|
-
.
|
|
2784
|
+
.bds2160RadioGroup-requiredLabel {
|
|
2648
2785
|
position: absolute;
|
|
2649
2786
|
inline-size: 1px;
|
|
2650
2787
|
block-size: 1px;
|
|
@@ -2655,16 +2792,20 @@
|
|
|
2655
2792
|
white-space: nowrap;
|
|
2656
2793
|
border-width: 0;
|
|
2657
2794
|
}
|
|
2658
|
-
.
|
|
2795
|
+
.bds2160RadioGroup-items {
|
|
2659
2796
|
display: flex;
|
|
2660
2797
|
flex-direction: column;
|
|
2661
2798
|
gap: var(--radioGroup_items-gap, var(--bds-space_xs));
|
|
2662
2799
|
}
|
|
2800
|
+
.bds2160RadioGroup-groupError input {
|
|
2801
|
+
--bdc_color: var(--bdc_color--error);
|
|
2802
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2803
|
+
}
|
|
2663
2804
|
}
|
|
2664
2805
|
|
|
2665
2806
|
/* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
|
|
2666
|
-
@layer boostdev.
|
|
2667
|
-
.
|
|
2807
|
+
@layer boostdev.bds2160SegmentedControl-component {
|
|
2808
|
+
.bds2160SegmentedControl-control {
|
|
2668
2809
|
position: relative;
|
|
2669
2810
|
display: inline-grid;
|
|
2670
2811
|
grid-auto-flow: column;
|
|
@@ -2675,11 +2816,11 @@
|
|
|
2675
2816
|
gap: 0;
|
|
2676
2817
|
--control_dir: 1;
|
|
2677
2818
|
}
|
|
2678
|
-
[dir=rtl] .
|
|
2679
|
-
.
|
|
2819
|
+
[dir=rtl] .bds2160SegmentedControl-control,
|
|
2820
|
+
.bds2160SegmentedControl-control[dir=rtl] {
|
|
2680
2821
|
--control_dir: -1;
|
|
2681
2822
|
}
|
|
2682
|
-
.
|
|
2823
|
+
.bds2160SegmentedControl-thumb {
|
|
2683
2824
|
position: absolute;
|
|
2684
2825
|
inset-block: var(--control_track-pad, var(--bds-space_xxs));
|
|
2685
2826
|
inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
|
|
@@ -2691,7 +2832,7 @@
|
|
|
2691
2832
|
transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
|
|
2692
2833
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2693
2834
|
}
|
|
2694
|
-
.
|
|
2835
|
+
.bds2160SegmentedControl-indicator {
|
|
2695
2836
|
position: absolute;
|
|
2696
2837
|
inset-block: var(--control_track-pad, var(--bds-space_xxs));
|
|
2697
2838
|
inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
|
|
@@ -2703,7 +2844,7 @@
|
|
|
2703
2844
|
transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
|
|
2704
2845
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2705
2846
|
}
|
|
2706
|
-
.
|
|
2847
|
+
.bds2160SegmentedControl-item {
|
|
2707
2848
|
position: relative;
|
|
2708
2849
|
z-index: 1;
|
|
2709
2850
|
display: flex;
|
|
@@ -2724,73 +2865,73 @@
|
|
|
2724
2865
|
border: none;
|
|
2725
2866
|
outline: none;
|
|
2726
2867
|
}
|
|
2727
|
-
.
|
|
2868
|
+
.bds2160SegmentedControl-item:focus-visible {
|
|
2728
2869
|
outline: var(--bds-outline_default);
|
|
2729
2870
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
2730
2871
|
border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
|
|
2731
2872
|
}
|
|
2732
|
-
.
|
|
2873
|
+
.bds2160SegmentedControl-item.bds2160SegmentedControl---active {
|
|
2733
2874
|
color: var(--control_label-color--active, var(--bds-color_on-interactive));
|
|
2734
2875
|
}
|
|
2735
|
-
.
|
|
2876
|
+
.bds2160SegmentedControl-item.bds2160SegmentedControl---disabled {
|
|
2736
2877
|
opacity: 0.5;
|
|
2737
2878
|
cursor: not-allowed;
|
|
2738
2879
|
pointer-events: none;
|
|
2739
2880
|
}
|
|
2740
|
-
.
|
|
2881
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---size_small .bds2160SegmentedControl-item {
|
|
2741
2882
|
padding: var(--bds-space_xxs) var(--bds-space_s);
|
|
2742
2883
|
font-size: var(--bds-font_size--body--s);
|
|
2743
2884
|
}
|
|
2744
|
-
.
|
|
2885
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---size_large .bds2160SegmentedControl-item {
|
|
2745
2886
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
2746
2887
|
white-space: normal;
|
|
2747
2888
|
text-align: center;
|
|
2748
2889
|
}
|
|
2749
|
-
.
|
|
2890
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline {
|
|
2750
2891
|
--control_label-color--active: var(--bds-color_interactive);
|
|
2751
2892
|
}
|
|
2752
|
-
.
|
|
2893
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-thumb {
|
|
2753
2894
|
display: none;
|
|
2754
2895
|
}
|
|
2755
|
-
.
|
|
2896
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item {
|
|
2756
2897
|
background-color: var(--control_item-bg, transparent);
|
|
2757
2898
|
}
|
|
2758
|
-
.
|
|
2899
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item.bds2160SegmentedControl---active {
|
|
2759
2900
|
background-color: var(--control_item-bg--active, var(--bds-color_bg));
|
|
2760
2901
|
}
|
|
2761
|
-
.
|
|
2902
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-indicator {
|
|
2762
2903
|
display: block;
|
|
2763
2904
|
box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
|
|
2764
2905
|
}
|
|
2765
|
-
.
|
|
2766
|
-
.
|
|
2906
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-thumb,
|
|
2907
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-indicator {
|
|
2767
2908
|
display: none;
|
|
2768
2909
|
}
|
|
2769
2910
|
@media (hover: hover) and (pointer: fine) {
|
|
2770
|
-
.
|
|
2911
|
+
.bds2160SegmentedControl-item:not(.bds2160SegmentedControl---active, .bds2160SegmentedControl---disabled):hover {
|
|
2771
2912
|
color: var(--control_label-color--hover, var(--bds-color_on-bg));
|
|
2772
2913
|
}
|
|
2773
2914
|
}
|
|
2774
2915
|
@media (prefers-reduced-motion: reduce) {
|
|
2775
|
-
.
|
|
2776
|
-
.
|
|
2916
|
+
.bds2160SegmentedControl-thumb,
|
|
2917
|
+
.bds2160SegmentedControl-indicator {
|
|
2777
2918
|
transition: none;
|
|
2778
2919
|
}
|
|
2779
2920
|
}
|
|
2780
2921
|
}
|
|
2781
2922
|
|
|
2782
2923
|
/* src/components/interaction/form/Select/Select.module.css */
|
|
2783
|
-
@layer boostdev.
|
|
2784
|
-
.
|
|
2924
|
+
@layer boostdev.bds2160Select-component {
|
|
2925
|
+
.bds2160Select-formGroup {
|
|
2785
2926
|
display: flex;
|
|
2786
2927
|
flex-direction: column;
|
|
2787
2928
|
}
|
|
2788
|
-
.
|
|
2929
|
+
.bds2160Select-selectWrapper {
|
|
2789
2930
|
position: relative;
|
|
2790
2931
|
display: flex;
|
|
2791
2932
|
align-items: center;
|
|
2792
2933
|
}
|
|
2793
|
-
.
|
|
2934
|
+
.bds2160Select-select {
|
|
2794
2935
|
appearance: none;
|
|
2795
2936
|
inline-size: 100%;
|
|
2796
2937
|
font-family: var(--bds-font_family--body);
|
|
@@ -2807,21 +2948,22 @@
|
|
|
2807
2948
|
cursor: pointer;
|
|
2808
2949
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2809
2950
|
}
|
|
2810
|
-
.
|
|
2951
|
+
.bds2160Select-select:focus {
|
|
2811
2952
|
--bdc_color: var(--bdc_color--focus);
|
|
2812
2953
|
}
|
|
2813
|
-
.
|
|
2954
|
+
.bds2160Select-select:focus-visible {
|
|
2814
2955
|
outline: var(--bds-outline_default);
|
|
2815
2956
|
outline-offset: var(--bds-outline_offset);
|
|
2816
2957
|
}
|
|
2817
|
-
.
|
|
2958
|
+
.bds2160Select-select:disabled {
|
|
2818
2959
|
opacity: 0.5;
|
|
2819
2960
|
cursor: not-allowed;
|
|
2820
2961
|
}
|
|
2821
|
-
.
|
|
2962
|
+
.bds2160Select-selectError {
|
|
2822
2963
|
--bdc_color: var(--bdc_color--error);
|
|
2964
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2823
2965
|
}
|
|
2824
|
-
.
|
|
2966
|
+
.bds2160Select-chevron {
|
|
2825
2967
|
position: absolute;
|
|
2826
2968
|
inset-inline-end: var(--bds-space_s);
|
|
2827
2969
|
display: flex;
|
|
@@ -2829,30 +2971,30 @@
|
|
|
2829
2971
|
pointer-events: none;
|
|
2830
2972
|
color: var(--select_chevron-color, var(--bds-color_interactive));
|
|
2831
2973
|
}
|
|
2832
|
-
.
|
|
2974
|
+
.bds2160Select-chevron svg {
|
|
2833
2975
|
inline-size: var(--select_chevron-size, 1rem);
|
|
2834
2976
|
block-size: var(--select_chevron-size, 1rem);
|
|
2835
2977
|
}
|
|
2836
2978
|
}
|
|
2837
2979
|
|
|
2838
2980
|
/* src/components/interaction/form/Slider/Slider.module.css */
|
|
2839
|
-
@layer boostdev.
|
|
2840
|
-
.
|
|
2981
|
+
@layer boostdev.bds2160Slider-component {
|
|
2982
|
+
.bds2160Slider-formGroup {
|
|
2841
2983
|
display: flex;
|
|
2842
2984
|
flex-direction: column;
|
|
2843
2985
|
gap: var(--bds-space_xxs);
|
|
2844
2986
|
}
|
|
2845
|
-
.
|
|
2987
|
+
.bds2160Slider-labelRow {
|
|
2846
2988
|
display: flex;
|
|
2847
2989
|
justify-content: space-between;
|
|
2848
2990
|
align-items: baseline;
|
|
2849
2991
|
}
|
|
2850
|
-
.
|
|
2992
|
+
.bds2160Slider-value {
|
|
2851
2993
|
font-size: var(--bds-font_size--body--s);
|
|
2852
2994
|
font-variant-numeric: tabular-nums;
|
|
2853
2995
|
color: var(--bds-color_on-bg--subtle);
|
|
2854
2996
|
}
|
|
2855
|
-
.
|
|
2997
|
+
.bds2160Slider-slider {
|
|
2856
2998
|
--slider_fill: 0%;
|
|
2857
2999
|
color: var(--slider_color, var(--bds-color_on-bg));
|
|
2858
3000
|
appearance: none;
|
|
@@ -2869,7 +3011,7 @@
|
|
|
2869
3011
|
cursor: pointer;
|
|
2870
3012
|
transition: var(--bds-animation_transition);
|
|
2871
3013
|
}
|
|
2872
|
-
.
|
|
3014
|
+
.bds2160Slider-slider:dir(rtl) {
|
|
2873
3015
|
background:
|
|
2874
3016
|
linear-gradient(
|
|
2875
3017
|
to left,
|
|
@@ -2878,16 +3020,16 @@
|
|
|
2878
3020
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
|
|
2879
3021
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
|
|
2880
3022
|
}
|
|
2881
|
-
.
|
|
3023
|
+
.bds2160Slider-slider:focus-visible {
|
|
2882
3024
|
outline: var(--bds-outline_default);
|
|
2883
3025
|
outline-offset: var(--bds-outline_offset);
|
|
2884
3026
|
border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
|
|
2885
3027
|
}
|
|
2886
|
-
.
|
|
3028
|
+
.bds2160Slider-slider:disabled {
|
|
2887
3029
|
opacity: 0.4;
|
|
2888
3030
|
cursor: not-allowed;
|
|
2889
3031
|
}
|
|
2890
|
-
.
|
|
3032
|
+
.bds2160Slider-slider::-webkit-slider-thumb {
|
|
2891
3033
|
appearance: none;
|
|
2892
3034
|
inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
|
|
2893
3035
|
block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
|
|
@@ -2897,7 +3039,7 @@
|
|
|
2897
3039
|
transition: var(--bds-animation_transition);
|
|
2898
3040
|
cursor: pointer;
|
|
2899
3041
|
}
|
|
2900
|
-
.
|
|
3042
|
+
.bds2160Slider-slider::-moz-range-thumb {
|
|
2901
3043
|
inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
|
|
2902
3044
|
block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
|
|
2903
3045
|
border: none;
|
|
@@ -2906,7 +3048,7 @@
|
|
|
2906
3048
|
box-shadow: var(--bds-shadow_s);
|
|
2907
3049
|
cursor: pointer;
|
|
2908
3050
|
}
|
|
2909
|
-
.
|
|
3051
|
+
.bds2160Slider-sliderError {
|
|
2910
3052
|
background:
|
|
2911
3053
|
linear-gradient(
|
|
2912
3054
|
to right,
|
|
@@ -2915,7 +3057,7 @@
|
|
|
2915
3057
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
|
|
2916
3058
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
|
|
2917
3059
|
}
|
|
2918
|
-
.
|
|
3060
|
+
.bds2160Slider-sliderError:dir(rtl) {
|
|
2919
3061
|
background:
|
|
2920
3062
|
linear-gradient(
|
|
2921
3063
|
to left,
|
|
@@ -2924,43 +3066,43 @@
|
|
|
2924
3066
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
|
|
2925
3067
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
|
|
2926
3068
|
}
|
|
2927
|
-
.
|
|
3069
|
+
.bds2160Slider-sliderError::-webkit-slider-thumb {
|
|
2928
3070
|
background-color: var(--slider_color--error, var(--bds-color_error));
|
|
2929
3071
|
}
|
|
2930
|
-
.
|
|
3072
|
+
.bds2160Slider-sliderError::-moz-range-thumb {
|
|
2931
3073
|
background-color: var(--slider_color--error, var(--bds-color_error));
|
|
2932
3074
|
}
|
|
2933
3075
|
@media (prefers-reduced-motion: reduce) {
|
|
2934
|
-
.
|
|
2935
|
-
.
|
|
2936
|
-
.
|
|
3076
|
+
.bds2160Slider-slider,
|
|
3077
|
+
.bds2160Slider-slider::-webkit-slider-thumb,
|
|
3078
|
+
.bds2160Slider-slider::-moz-range-thumb {
|
|
2937
3079
|
transition: none;
|
|
2938
3080
|
}
|
|
2939
3081
|
}
|
|
2940
3082
|
}
|
|
2941
3083
|
|
|
2942
3084
|
/* src/components/interaction/form/Switch/Switch.module.css */
|
|
2943
|
-
@layer boostdev.
|
|
2944
|
-
.
|
|
3085
|
+
@layer boostdev.bds2160Switch-component {
|
|
3086
|
+
.bds2160Switch-switchGroup {
|
|
2945
3087
|
color: var(--switch_color, var(--bds-color_on-bg));
|
|
2946
3088
|
display: flex;
|
|
2947
3089
|
flex-direction: column;
|
|
2948
3090
|
}
|
|
2949
|
-
.
|
|
3091
|
+
.bds2160Switch-switchGroup.bds2160Switch---size_small {
|
|
2950
3092
|
--switch_thumb-size: 1em;
|
|
2951
3093
|
}
|
|
2952
|
-
.
|
|
3094
|
+
.bds2160Switch-switchGroup.bds2160Switch---size_medium {
|
|
2953
3095
|
--switch_thumb-size: 1.25em;
|
|
2954
3096
|
}
|
|
2955
|
-
.
|
|
3097
|
+
.bds2160Switch-switchGroup.bds2160Switch---size_large {
|
|
2956
3098
|
--switch_thumb-size: 1.5em;
|
|
2957
3099
|
}
|
|
2958
|
-
.
|
|
3100
|
+
.bds2160Switch-inputWrapper {
|
|
2959
3101
|
display: flex;
|
|
2960
3102
|
align-items: center;
|
|
2961
3103
|
gap: var(--bds-space_xs);
|
|
2962
3104
|
}
|
|
2963
|
-
.
|
|
3105
|
+
.bds2160Switch-trackWrapper {
|
|
2964
3106
|
position: relative;
|
|
2965
3107
|
display: inline-flex;
|
|
2966
3108
|
align-items: center;
|
|
@@ -2968,7 +3110,7 @@
|
|
|
2968
3110
|
inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
|
|
2969
3111
|
block-size: calc(var(--switch_thumb-size, 1.25em) + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
|
|
2970
3112
|
}
|
|
2971
|
-
.
|
|
3113
|
+
.bds2160Switch-switch {
|
|
2972
3114
|
position: absolute;
|
|
2973
3115
|
inset: 0;
|
|
2974
3116
|
appearance: none;
|
|
@@ -2979,10 +3121,10 @@
|
|
|
2979
3121
|
cursor: pointer;
|
|
2980
3122
|
z-index: 1;
|
|
2981
3123
|
}
|
|
2982
|
-
.
|
|
3124
|
+
.bds2160Switch-switch:disabled {
|
|
2983
3125
|
cursor: not-allowed;
|
|
2984
3126
|
}
|
|
2985
|
-
.
|
|
3127
|
+
.bds2160Switch-track {
|
|
2986
3128
|
display: inline-flex;
|
|
2987
3129
|
align-items: center;
|
|
2988
3130
|
inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
|
|
@@ -2998,7 +3140,7 @@
|
|
|
2998
3140
|
transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2999
3141
|
--bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
|
|
3000
3142
|
}
|
|
3001
|
-
.
|
|
3143
|
+
.bds2160Switch-thumb {
|
|
3002
3144
|
display: block;
|
|
3003
3145
|
inline-size: var(--switch_thumb-size, 1.25em);
|
|
3004
3146
|
block-size: var(--switch_thumb-size, 1.25em);
|
|
@@ -3008,43 +3150,44 @@
|
|
|
3008
3150
|
transition: var(--bds-animation_transition);
|
|
3009
3151
|
transform: translateX(0);
|
|
3010
3152
|
}
|
|
3011
|
-
.
|
|
3153
|
+
.bds2160Switch-switch.bds2160Switch-switchError + .bds2160Switch-track {
|
|
3012
3154
|
--bdc_color: var(--switch_border-color--error, var(--bds-color_error));
|
|
3155
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
3013
3156
|
}
|
|
3014
|
-
.
|
|
3157
|
+
.bds2160Switch-switch:checked + .bds2160Switch-track {
|
|
3015
3158
|
background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
|
|
3016
3159
|
--bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
|
|
3017
3160
|
}
|
|
3018
|
-
.
|
|
3161
|
+
.bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
|
|
3019
3162
|
background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
|
|
3020
3163
|
transform: translateX(var(--switch_thumb-size, 1.25em));
|
|
3021
3164
|
}
|
|
3022
|
-
[dir=rtl] .
|
|
3165
|
+
[dir=rtl] .bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
|
|
3023
3166
|
transform: translateX(calc(var(--switch_thumb-size, 1.25em) * -1));
|
|
3024
3167
|
}
|
|
3025
|
-
.
|
|
3168
|
+
.bds2160Switch-switch:focus-visible + .bds2160Switch-track {
|
|
3026
3169
|
outline: var(--bds-outline_default);
|
|
3027
3170
|
outline-offset: var(--bds-outline_offset);
|
|
3028
3171
|
border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
|
|
3029
3172
|
}
|
|
3030
|
-
.
|
|
3173
|
+
.bds2160Switch-switch:disabled + .bds2160Switch-track {
|
|
3031
3174
|
opacity: 0.4;
|
|
3032
3175
|
}
|
|
3033
3176
|
@media (prefers-reduced-motion: reduce) {
|
|
3034
|
-
.
|
|
3035
|
-
.
|
|
3177
|
+
.bds2160Switch-track,
|
|
3178
|
+
.bds2160Switch-thumb {
|
|
3036
3179
|
transition: none;
|
|
3037
3180
|
}
|
|
3038
3181
|
}
|
|
3039
3182
|
}
|
|
3040
3183
|
|
|
3041
3184
|
/* src/components/interaction/form/Textarea/Textarea.module.css */
|
|
3042
|
-
@layer boostdev.
|
|
3043
|
-
.
|
|
3185
|
+
@layer boostdev.bds2160Textarea-component {
|
|
3186
|
+
.bds2160Textarea-formGroup {
|
|
3044
3187
|
display: flex;
|
|
3045
3188
|
flex-direction: column;
|
|
3046
3189
|
}
|
|
3047
|
-
.
|
|
3190
|
+
.bds2160Textarea-textarea {
|
|
3048
3191
|
font-family: var(--textarea_font-family, var(--bds-font_family--body));
|
|
3049
3192
|
font-size: var(--textarea_font-size, var(--bds-font_size--body));
|
|
3050
3193
|
line-height: var(--textarea_line-height, var(--bds-font_line-height--body));
|
|
@@ -3060,65 +3203,66 @@
|
|
|
3060
3203
|
min-block-size: var(--textarea_min-block-size, calc(var(--bds-space_m) * 5));
|
|
3061
3204
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
3062
3205
|
}
|
|
3063
|
-
.
|
|
3206
|
+
.bds2160Textarea-textarea:focus {
|
|
3064
3207
|
--bdc_color: var(--bdc_color--focus);
|
|
3065
3208
|
}
|
|
3066
|
-
.
|
|
3209
|
+
.bds2160Textarea-textarea:focus-visible {
|
|
3067
3210
|
outline: var(--bds-outline_default);
|
|
3068
3211
|
outline-offset: var(--bds-outline_offset);
|
|
3069
3212
|
}
|
|
3070
|
-
.
|
|
3213
|
+
.bds2160Textarea-textarea:disabled {
|
|
3071
3214
|
opacity: 0.5;
|
|
3072
3215
|
cursor: not-allowed;
|
|
3073
3216
|
resize: none;
|
|
3074
3217
|
}
|
|
3075
|
-
.
|
|
3218
|
+
.bds2160Textarea-textareaError {
|
|
3076
3219
|
--bdc_color: var(--bdc_color--error);
|
|
3220
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
3077
3221
|
}
|
|
3078
3222
|
}
|
|
3079
3223
|
|
|
3080
3224
|
/* src/components/layout/ButtonGroup/ButtonGroup.module.css */
|
|
3081
|
-
@layer boostdev.
|
|
3082
|
-
.
|
|
3225
|
+
@layer boostdev.bds2160ButtonGroup-component {
|
|
3226
|
+
.bds2160ButtonGroup-buttonGroup {
|
|
3083
3227
|
container-type: inline-size;
|
|
3084
3228
|
container-name: button-group;
|
|
3085
3229
|
grid-column: var(--bds-grid_span-100);
|
|
3086
3230
|
inline-size: 100%;
|
|
3087
3231
|
}
|
|
3088
|
-
.
|
|
3232
|
+
.bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
|
|
3089
3233
|
position: relative;
|
|
3090
3234
|
display: flex;
|
|
3091
3235
|
flex-direction: column-reverse;
|
|
3092
3236
|
gap: var(--buttonGroup_gap, var(--bds-space_l));
|
|
3093
3237
|
align-items: center;
|
|
3094
3238
|
}
|
|
3095
|
-
.
|
|
3239
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
|
|
3096
3240
|
align-items: stretch;
|
|
3097
3241
|
}
|
|
3098
|
-
.
|
|
3099
|
-
.
|
|
3242
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container,
|
|
3243
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
|
|
3100
3244
|
align-items: center;
|
|
3101
3245
|
}
|
|
3102
|
-
.
|
|
3246
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
|
|
3103
3247
|
align-items: flex-start;
|
|
3104
3248
|
}
|
|
3105
3249
|
@supports (contain: inline-size) {
|
|
3106
3250
|
@container button-group (min-width: 30rem) {
|
|
3107
|
-
.
|
|
3251
|
+
.bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
|
|
3108
3252
|
flex-direction: row;
|
|
3109
3253
|
justify-content: space-between;
|
|
3110
3254
|
}
|
|
3111
|
-
.
|
|
3112
|
-
.
|
|
3255
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container > :first-child:last-child,
|
|
3256
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container > :first-child:last-child {
|
|
3113
3257
|
margin-inline-start: auto;
|
|
3114
3258
|
}
|
|
3115
|
-
.
|
|
3259
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
|
|
3116
3260
|
justify-content: center;
|
|
3117
3261
|
}
|
|
3118
|
-
.
|
|
3262
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
|
|
3119
3263
|
justify-content: flex-end;
|
|
3120
3264
|
}
|
|
3121
|
-
.
|
|
3265
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
|
|
3122
3266
|
justify-content: flex-start;
|
|
3123
3267
|
align-items: center;
|
|
3124
3268
|
}
|
|
@@ -3127,208 +3271,223 @@
|
|
|
3127
3271
|
}
|
|
3128
3272
|
|
|
3129
3273
|
/* src/components/layout/Card/Card.module.css */
|
|
3130
|
-
@layer boostdev.
|
|
3131
|
-
.
|
|
3274
|
+
@layer boostdev.bds2160Card-component {
|
|
3275
|
+
.bds2160Card-card {
|
|
3132
3276
|
background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
|
|
3133
3277
|
color: var(--card_on-color, var(--bds-color_on-bg));
|
|
3134
3278
|
border-radius: var(--card_radius, var(--bds-border_radius--m));
|
|
3135
3279
|
transition: var(--card_transition, var(--bds-animation_transition));
|
|
3136
3280
|
position: relative;
|
|
3137
3281
|
}
|
|
3138
|
-
.
|
|
3282
|
+
.bds2160Card-card:is(button) {
|
|
3139
3283
|
border: none;
|
|
3140
3284
|
font: inherit;
|
|
3141
3285
|
text-align: inherit;
|
|
3142
3286
|
display: block;
|
|
3143
3287
|
inline-size: 100%;
|
|
3144
3288
|
}
|
|
3145
|
-
.
|
|
3289
|
+
.bds2160Card-card.bds2160Card---default {
|
|
3146
3290
|
box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
|
|
3147
3291
|
}
|
|
3148
|
-
.
|
|
3292
|
+
.bds2160Card-card.bds2160Card---elevated {
|
|
3149
3293
|
box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
|
|
3150
3294
|
}
|
|
3151
|
-
.
|
|
3295
|
+
.bds2160Card-card.bds2160Card---outlined {
|
|
3152
3296
|
border: var(--card_border, none);
|
|
3153
3297
|
--bdc_color: currentcolor;
|
|
3154
3298
|
box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
|
|
3155
3299
|
}
|
|
3156
|
-
.
|
|
3300
|
+
.bds2160Card-card.bds2160Card---clickable {
|
|
3157
3301
|
cursor: pointer;
|
|
3158
3302
|
}
|
|
3159
|
-
.
|
|
3303
|
+
.bds2160Card-card.bds2160Card---padding-none {
|
|
3160
3304
|
padding: var(--card_padding, 0);
|
|
3161
3305
|
}
|
|
3162
|
-
.
|
|
3306
|
+
.bds2160Card-card.bds2160Card---padding-small {
|
|
3163
3307
|
padding: var(--card_padding, var(--bds-space_s));
|
|
3164
3308
|
}
|
|
3165
|
-
.
|
|
3309
|
+
.bds2160Card-card.bds2160Card---padding-medium {
|
|
3166
3310
|
padding: var(--card_padding, var(--bds-space_m));
|
|
3167
3311
|
}
|
|
3168
|
-
.
|
|
3312
|
+
.bds2160Card-card.bds2160Card---padding-large {
|
|
3169
3313
|
padding: var(--card_padding, var(--bds-space_l));
|
|
3170
3314
|
}
|
|
3171
|
-
.
|
|
3315
|
+
.bds2160Card-card.bds2160Card---padding-extra-large {
|
|
3172
3316
|
padding: var(--card_padding, var(--bds-space_xl));
|
|
3173
3317
|
}
|
|
3174
|
-
.
|
|
3318
|
+
.bds2160Card-card.bds2160Card---text-start {
|
|
3175
3319
|
text-align: start;
|
|
3176
3320
|
}
|
|
3177
|
-
.
|
|
3321
|
+
.bds2160Card-card.bds2160Card---text-center {
|
|
3178
3322
|
text-align: center;
|
|
3179
3323
|
}
|
|
3180
|
-
.
|
|
3324
|
+
.bds2160Card-card.bds2160Card---text-end {
|
|
3181
3325
|
text-align: end;
|
|
3182
3326
|
}
|
|
3183
|
-
.
|
|
3327
|
+
.bds2160Card-card.bds2160Card---clickable:focus-visible {
|
|
3184
3328
|
outline: var(--bds-outline_default);
|
|
3185
3329
|
outline-offset: var(--bds-outline_offset);
|
|
3186
3330
|
}
|
|
3187
|
-
.
|
|
3331
|
+
.bds2160Card-card.bds2160Card---clickable:active {
|
|
3188
3332
|
transform: translateY(0);
|
|
3189
3333
|
box-shadow: var(--card_shadow--active, var(--bds-shadow_s));
|
|
3190
3334
|
}
|
|
3191
3335
|
@media (hover: hover) and (pointer: fine) {
|
|
3192
|
-
.
|
|
3336
|
+
.bds2160Card-card.bds2160Card---clickable:hover {
|
|
3193
3337
|
transform: translateY(-2px);
|
|
3194
3338
|
box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
|
|
3195
3339
|
}
|
|
3196
|
-
.
|
|
3340
|
+
.bds2160Card-card.bds2160Card---default:hover {
|
|
3197
3341
|
box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
|
|
3198
3342
|
}
|
|
3199
|
-
.
|
|
3343
|
+
.bds2160Card-card.bds2160Card---elevated:hover {
|
|
3200
3344
|
box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
|
|
3201
3345
|
}
|
|
3202
|
-
.
|
|
3346
|
+
.bds2160Card-card.bds2160Card---outlined:hover {
|
|
3203
3347
|
box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
|
|
3204
3348
|
}
|
|
3205
3349
|
}
|
|
3206
3350
|
@media (prefers-reduced-motion: reduce) {
|
|
3207
|
-
.
|
|
3351
|
+
.bds2160Card-card {
|
|
3208
3352
|
transition: none;
|
|
3209
3353
|
}
|
|
3210
|
-
.
|
|
3211
|
-
.
|
|
3354
|
+
.bds2160Card-card.bds2160Card---clickable:hover,
|
|
3355
|
+
.bds2160Card-card.bds2160Card---clickable:active {
|
|
3212
3356
|
transform: none;
|
|
3213
3357
|
}
|
|
3214
3358
|
}
|
|
3215
3359
|
}
|
|
3216
3360
|
|
|
3217
3361
|
/* src/components/layout/Grid/Grid.module.css */
|
|
3218
|
-
@layer boostdev.
|
|
3219
|
-
.
|
|
3362
|
+
@layer boostdev.bds2160Grid-component {
|
|
3363
|
+
.bds2160Grid-grid {
|
|
3220
3364
|
display: grid;
|
|
3221
3365
|
gap: var(--grid_gap, var(--bds-grid_gap));
|
|
3222
3366
|
}
|
|
3223
|
-
.
|
|
3367
|
+
.bds2160Grid-grid.bds2160Grid---main {
|
|
3224
3368
|
grid-template-columns: var(--bds-grid_template-columns);
|
|
3225
3369
|
}
|
|
3226
|
-
.
|
|
3370
|
+
.bds2160Grid-grid.bds2160Grid---page {
|
|
3227
3371
|
grid-template-columns: 1fr;
|
|
3228
3372
|
grid-column: 1 / -1;
|
|
3229
3373
|
}
|
|
3230
|
-
.
|
|
3374
|
+
.bds2160Grid-grid.bds2160Grid---funnel {
|
|
3231
3375
|
grid-template-columns: var(--bds-grid_template-columns);
|
|
3232
3376
|
max-inline-size: var(--bds-container_max-width--narrow);
|
|
3233
3377
|
margin-inline: auto;
|
|
3234
3378
|
}
|
|
3235
|
-
.
|
|
3379
|
+
.bds2160Grid-grid.bds2160Grid---custom {
|
|
3236
3380
|
grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
|
|
3237
3381
|
}
|
|
3238
|
-
.
|
|
3382
|
+
.bds2160Grid-grid.bds2160Grid---centered {
|
|
3239
3383
|
margin-inline: auto;
|
|
3240
3384
|
max-inline-size: var(--bds-container_max-width);
|
|
3241
3385
|
padding-inline: var(--bds-container_spacing-inline);
|
|
3242
3386
|
}
|
|
3243
|
-
.
|
|
3387
|
+
.bds2160Grid-item {
|
|
3244
3388
|
min-inline-size: 0;
|
|
3245
3389
|
}
|
|
3246
3390
|
@supports (grid-template-rows: masonry) {
|
|
3247
|
-
.
|
|
3391
|
+
.bds2160Grid-grid.bds2160Grid---masonry {
|
|
3248
3392
|
grid-template-rows: masonry;
|
|
3249
3393
|
}
|
|
3250
3394
|
}
|
|
3251
3395
|
@supports (display: grid-lanes) {
|
|
3252
|
-
.
|
|
3396
|
+
.bds2160Grid-grid.bds2160Grid---masonry {
|
|
3253
3397
|
display: grid-lanes;
|
|
3254
3398
|
}
|
|
3255
3399
|
}
|
|
3256
3400
|
}
|
|
3257
3401
|
|
|
3258
3402
|
/* src/components/layout/SectionHeader/SectionHeader.module.css */
|
|
3259
|
-
@layer boostdev.
|
|
3260
|
-
.
|
|
3403
|
+
@layer boostdev.bds2160SectionHeader-component {
|
|
3404
|
+
.bds2160SectionHeader-sectionHeader {
|
|
3261
3405
|
display: flex;
|
|
3262
3406
|
flex-direction: column;
|
|
3263
3407
|
gap: var(--sectionHeader_gap, var(--bds-space_m));
|
|
3264
3408
|
grid-column: var(--bds-grid_span-100);
|
|
3265
3409
|
}
|
|
3266
|
-
.
|
|
3410
|
+
.bds2160SectionHeader-title {
|
|
3267
3411
|
color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
|
|
3268
3412
|
margin: 0;
|
|
3269
|
-
font-family: var(--bds-font_family--
|
|
3413
|
+
font-family: var(--sectionHeader_title-font-family, var(--bds-font_family--heading));
|
|
3270
3414
|
}
|
|
3271
|
-
.
|
|
3272
|
-
color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
|
|
3415
|
+
.bds2160SectionHeader-subtitle {
|
|
3416
|
+
color: var(--sectionHeader_subtitle-color, var(--bds-color_on-bg--muted, var(--bds-color_grey--strong)));
|
|
3273
3417
|
margin: 0;
|
|
3274
3418
|
font-family: var(--bds-font_family--body);
|
|
3275
3419
|
font-weight: var(--bds-font_weight--medium);
|
|
3276
3420
|
}
|
|
3277
|
-
.
|
|
3421
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---start {
|
|
3278
3422
|
align-items: flex-start;
|
|
3279
3423
|
text-align: start;
|
|
3280
3424
|
}
|
|
3281
|
-
.
|
|
3425
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---center {
|
|
3282
3426
|
align-items: center;
|
|
3283
3427
|
text-align: center;
|
|
3284
3428
|
}
|
|
3285
|
-
.
|
|
3429
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---end {
|
|
3286
3430
|
align-items: flex-end;
|
|
3287
3431
|
text-align: end;
|
|
3288
3432
|
}
|
|
3289
|
-
.
|
|
3290
|
-
font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-
|
|
3433
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---medium .bds2160SectionHeader-title {
|
|
3434
|
+
font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2));
|
|
3291
3435
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
3292
|
-
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
|
|
3436
|
+
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
|
|
3293
3437
|
}
|
|
3294
|
-
.
|
|
3295
|
-
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--
|
|
3438
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---medium .bds2160SectionHeader-subtitle {
|
|
3439
|
+
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
|
|
3296
3440
|
line-height: var(--sectionHeader_subtitle-line-height, 1.3);
|
|
3297
3441
|
}
|
|
3298
|
-
.
|
|
3299
|
-
font-size: var(--sectionHeader_title-size, var(--bds-font_size--
|
|
3442
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---xs .bds2160SectionHeader-title {
|
|
3443
|
+
font-size: var(--sectionHeader_title-size, var(--bds-font_size--body));
|
|
3300
3444
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
3301
|
-
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
|
|
3445
|
+
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
|
|
3302
3446
|
}
|
|
3303
|
-
.
|
|
3304
|
-
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
|
|
3447
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---xs .bds2160SectionHeader-subtitle {
|
|
3448
|
+
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body--s));
|
|
3305
3449
|
line-height: var(--sectionHeader_subtitle-line-height, 1.4);
|
|
3306
3450
|
}
|
|
3307
|
-
.
|
|
3308
|
-
font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-
|
|
3451
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---small .bds2160SectionHeader-title {
|
|
3452
|
+
font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-3));
|
|
3309
3453
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
3310
|
-
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
|
|
3454
|
+
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
|
|
3311
3455
|
}
|
|
3312
|
-
.
|
|
3456
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---small .bds2160SectionHeader-subtitle {
|
|
3313
3457
|
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
|
|
3314
3458
|
line-height: var(--sectionHeader_subtitle-line-height, 1.4);
|
|
3315
3459
|
}
|
|
3316
|
-
.
|
|
3317
|
-
font-size: var(--sectionHeader_title-size, var(--bds-font_size--
|
|
3318
|
-
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--
|
|
3319
|
-
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
|
|
3460
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---large .bds2160SectionHeader-title {
|
|
3461
|
+
font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
|
|
3462
|
+
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
3463
|
+
font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
|
|
3320
3464
|
letter-spacing: var(--bds-font_tracking--tight);
|
|
3321
3465
|
}
|
|
3322
|
-
.
|
|
3323
|
-
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-
|
|
3466
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---large .bds2160SectionHeader-subtitle {
|
|
3467
|
+
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
|
|
3324
3468
|
line-height: var(--sectionHeader_subtitle-line-height, 1.3);
|
|
3325
3469
|
font-weight: var(--bds-font_weight--medium);
|
|
3326
3470
|
}
|
|
3471
|
+
@supports (background-clip: text) {
|
|
3472
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---gradient .bds2160SectionHeader-title {
|
|
3473
|
+
inline-size: fit-content;
|
|
3474
|
+
max-inline-size: 100%;
|
|
3475
|
+
background-image: var(--sectionHeader_title-gradient, linear-gradient(90deg, var(--bds-color_primary--strong, var(--bds-color_blue--strong)), var(--bds-color_accent-3--strong, var(--bds-color_blue--strong))));
|
|
3476
|
+
background-clip: text;
|
|
3477
|
+
color: transparent;
|
|
3478
|
+
}
|
|
3479
|
+
}
|
|
3480
|
+
@media (forced-colors: active) {
|
|
3481
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---gradient .bds2160SectionHeader-title {
|
|
3482
|
+
background-image: none;
|
|
3483
|
+
color: CanvasText;
|
|
3484
|
+
}
|
|
3485
|
+
}
|
|
3327
3486
|
}
|
|
3328
3487
|
|
|
3329
3488
|
/* src/components/layout/IconWrapper/IconWrapper.module.css */
|
|
3330
|
-
@layer boostdev.
|
|
3331
|
-
.
|
|
3489
|
+
@layer boostdev.bds2160IconWrapper-component {
|
|
3490
|
+
.bds2160IconWrapper-wrapper {
|
|
3332
3491
|
inline-size: 2em;
|
|
3333
3492
|
block-size: 2em;
|
|
3334
3493
|
font-size: var(--icon-wrapper_size, 3em);
|
|
@@ -3344,7 +3503,7 @@
|
|
|
3344
3503
|
position: relative;
|
|
3345
3504
|
transition: var(--bds-animation_transition);
|
|
3346
3505
|
}
|
|
3347
|
-
.
|
|
3506
|
+
.bds2160IconWrapper-wrapper svg {
|
|
3348
3507
|
fill: currentcolor;
|
|
3349
3508
|
}
|
|
3350
3509
|
}
|