@boostdev/design-system-components 2.14.1 → 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 +20 -15
- package/dist/client.cjs +271 -205
- package/dist/client.css +808 -648
- 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 +808 -648
- 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-XIZWAWMJ.js → chunk-XTPUKUN5.js} +16 -6
- 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 +34 -29
- package/dist/web-components/interaction/bds-button.js +1 -1
- 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/Button/Button.mdx +7 -0
- package/src/components/interaction/Button/Button.module.css +17 -9
- package/src/components/interaction/Button/Button.stories.tsx +28 -0
- 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 +9 -1
- package/src/web-components/interaction/BdsButton.stories.tsx +42 -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-button.ts +16 -6
- 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/client.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,13 +1397,14 @@
|
|
|
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;
|
|
1327
|
-
|
|
1406
|
+
--button_padding-inline--size: var(--bds-space_l);
|
|
1407
|
+
padding-inline: var(--button_padding-inline--size);
|
|
1328
1408
|
display: inline-flex;
|
|
1329
1409
|
gap: var(--bds-space_xs);
|
|
1330
1410
|
border-radius: var(--button_radius, var(--bds-border_radius--full));
|
|
@@ -1342,78 +1422,78 @@
|
|
|
1342
1422
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1343
1423
|
transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1344
1424
|
}
|
|
1345
|
-
.
|
|
1425
|
+
.bds2160Button-button.bds2160Button---default {
|
|
1346
1426
|
}
|
|
1347
|
-
.
|
|
1348
|
-
.
|
|
1427
|
+
.bds2160Button-button.bds2160Button---outline,
|
|
1428
|
+
.bds2160Button-button.bds2160Button---ghost {
|
|
1349
1429
|
--button_bg--variant: var(--button_bg--outline, transparent);
|
|
1350
1430
|
--button_text--variant: var(--button_text--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
|
|
1351
1431
|
--button_border--variant: var(--button_border--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
|
|
1352
1432
|
}
|
|
1353
|
-
.
|
|
1433
|
+
.bds2160Button-button.bds2160Button---size_small {
|
|
1354
1434
|
--button_height: 2.25em;
|
|
1355
1435
|
--button_font-size: var(--bds-font_size--body--s);
|
|
1356
|
-
|
|
1436
|
+
--button_padding-inline--size: var(--bds-space_m);
|
|
1357
1437
|
}
|
|
1358
|
-
.
|
|
1438
|
+
.bds2160Button-button.bds2160Button---size_medium {
|
|
1359
1439
|
--button_height: 3em;
|
|
1360
|
-
|
|
1440
|
+
--button_padding-inline--size: var(--bds-space_l);
|
|
1361
1441
|
}
|
|
1362
|
-
.
|
|
1442
|
+
.bds2160Button-button.bds2160Button---size_large {
|
|
1363
1443
|
--button_font-size: var(--bds-font_size--heading-3);
|
|
1364
|
-
|
|
1444
|
+
--button_padding-inline--size: var(--bds-space_xl);
|
|
1365
1445
|
}
|
|
1366
|
-
.
|
|
1446
|
+
.bds2160Button-button.bds2160Button---hasPulse {
|
|
1367
1447
|
animation: pulse 3s infinite;
|
|
1368
1448
|
}
|
|
1369
|
-
.
|
|
1449
|
+
.bds2160Button-button.bds2160Button---iconOnly {
|
|
1370
1450
|
aspect-ratio: 1;
|
|
1371
1451
|
box-sizing: border-box;
|
|
1372
1452
|
padding: var(--bds-space_xxs);
|
|
1373
1453
|
}
|
|
1374
|
-
.
|
|
1454
|
+
.bds2160Button-button.bds2160Button---iconOnly > * {
|
|
1375
1455
|
inline-size: 100%;
|
|
1376
1456
|
block-size: 100%;
|
|
1377
1457
|
}
|
|
1378
|
-
.
|
|
1458
|
+
.bds2160Button-button[href] {
|
|
1379
1459
|
text-decoration: none;
|
|
1380
1460
|
}
|
|
1381
|
-
.
|
|
1461
|
+
.bds2160Button-button svg {
|
|
1382
1462
|
--icon__stroke: currentcolor;
|
|
1383
1463
|
fill: currentcolor;
|
|
1384
1464
|
color: currentcolor;
|
|
1385
1465
|
flex-shrink: 0;
|
|
1386
1466
|
}
|
|
1387
|
-
.
|
|
1467
|
+
.bds2160Button-iconStart {
|
|
1388
1468
|
display: flex;
|
|
1389
1469
|
align-items: center;
|
|
1390
|
-
margin-inline-start: calc(var(--
|
|
1470
|
+
margin-inline-start: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
|
|
1391
1471
|
transition: var(--bds-animation_transition);
|
|
1392
1472
|
}
|
|
1393
|
-
.
|
|
1473
|
+
.bds2160Button-iconEnd {
|
|
1394
1474
|
display: flex;
|
|
1395
1475
|
align-items: center;
|
|
1396
|
-
margin-inline-end: calc(var(--
|
|
1476
|
+
margin-inline-end: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
|
|
1397
1477
|
transition: var(--bds-animation_transition);
|
|
1398
1478
|
}
|
|
1399
|
-
.
|
|
1400
|
-
.
|
|
1479
|
+
.bds2160Button-button.bds2160Button---iconOnly .bds2160Button-iconStart,
|
|
1480
|
+
.bds2160Button-button.bds2160Button---iconOnly .bds2160Button-iconEnd {
|
|
1401
1481
|
margin-inline: 0;
|
|
1402
1482
|
}
|
|
1403
1483
|
@media (hover: hover) and (pointer: fine) {
|
|
1404
|
-
.
|
|
1484
|
+
.bds2160Button-button:hover .bds2160Button-iconStart svg {
|
|
1405
1485
|
animation: fadeZoom 2s ease-out infinite;
|
|
1406
1486
|
}
|
|
1407
|
-
.
|
|
1487
|
+
.bds2160Button-button:hover .bds2160Button-iconEnd svg {
|
|
1408
1488
|
animation: fadeZoom 2s ease-out infinite;
|
|
1409
1489
|
}
|
|
1410
1490
|
}
|
|
1411
|
-
.
|
|
1491
|
+
.bds2160Button-button:focus-visible {
|
|
1412
1492
|
outline: var(--bds-outline_default);
|
|
1413
1493
|
outline-offset: var(--bds-outline_offset);
|
|
1414
1494
|
}
|
|
1415
1495
|
@media (hover: hover) and (pointer: fine) {
|
|
1416
|
-
.
|
|
1496
|
+
.bds2160Button-button.bds2160Button---default:hover {
|
|
1417
1497
|
--button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
|
|
1418
1498
|
--button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
|
|
1419
1499
|
--button_border--variant: var(--button_border--hover, currentcolor);
|
|
@@ -1421,25 +1501,25 @@
|
|
|
1421
1501
|
}
|
|
1422
1502
|
}
|
|
1423
1503
|
@media (hover: hover) and (pointer: fine) {
|
|
1424
|
-
.
|
|
1425
|
-
.
|
|
1504
|
+
.bds2160Button-button.bds2160Button---outline:hover,
|
|
1505
|
+
.bds2160Button-button.bds2160Button---ghost:hover {
|
|
1426
1506
|
--button_bg--variant: var(--button_bg--outline-hover, var(--button_color, var(--bds-color_interactive)));
|
|
1427
1507
|
--button_text--variant: var(--button_text--outline-hover, var(--button_on-color, var(--bds-color_on-interactive)));
|
|
1428
1508
|
--button_border--variant: var(--button_border--outline-hover, transparent);
|
|
1429
1509
|
}
|
|
1430
1510
|
}
|
|
1431
1511
|
@media (prefers-reduced-motion: reduce) {
|
|
1432
|
-
.
|
|
1433
|
-
.
|
|
1434
|
-
.
|
|
1512
|
+
.bds2160Button-button.bds2160Button---hasPulse,
|
|
1513
|
+
.bds2160Button-button:hover .bds2160Button-iconStart svg,
|
|
1514
|
+
.bds2160Button-button:hover .bds2160Button-iconEnd svg {
|
|
1435
1515
|
animation: none;
|
|
1436
1516
|
}
|
|
1437
1517
|
}
|
|
1438
1518
|
}
|
|
1439
1519
|
|
|
1440
1520
|
/* src/components/interaction/Command/Command.module.css */
|
|
1441
|
-
@layer boostdev.
|
|
1442
|
-
.
|
|
1521
|
+
@layer boostdev.bds2160Command-component {
|
|
1522
|
+
.bds2160Command-dialog {
|
|
1443
1523
|
padding: 0;
|
|
1444
1524
|
border: none;
|
|
1445
1525
|
border-radius: var(--command_radius, var(--bds-border_radius--m));
|
|
@@ -1449,11 +1529,11 @@
|
|
|
1449
1529
|
overflow: visible;
|
|
1450
1530
|
margin-block-start: 10vh;
|
|
1451
1531
|
}
|
|
1452
|
-
.
|
|
1532
|
+
.bds2160Command-dialog::backdrop {
|
|
1453
1533
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1454
1534
|
backdrop-filter: blur(3px);
|
|
1455
1535
|
}
|
|
1456
|
-
.
|
|
1536
|
+
.bds2160Command-palette {
|
|
1457
1537
|
display: flex;
|
|
1458
1538
|
flex-direction: column;
|
|
1459
1539
|
background-color: var(--command_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
|
|
@@ -1466,7 +1546,7 @@
|
|
|
1466
1546
|
border-radius: var(--command_radius, var(--bdc-outline_radius));
|
|
1467
1547
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
|
|
1468
1548
|
}
|
|
1469
|
-
.
|
|
1549
|
+
.bds2160Command-searchRow {
|
|
1470
1550
|
display: flex;
|
|
1471
1551
|
align-items: center;
|
|
1472
1552
|
gap: var(--bds-space_xs);
|
|
@@ -1474,13 +1554,13 @@
|
|
|
1474
1554
|
border-block-end: 1px solid currentcolor;
|
|
1475
1555
|
flex-shrink: 0;
|
|
1476
1556
|
}
|
|
1477
|
-
.
|
|
1557
|
+
.bds2160Command-searchIcon {
|
|
1478
1558
|
inline-size: 1.25rem;
|
|
1479
1559
|
block-size: 1.25rem;
|
|
1480
1560
|
color: var(--bds-color_on-bg);
|
|
1481
1561
|
flex-shrink: 0;
|
|
1482
1562
|
}
|
|
1483
|
-
.
|
|
1563
|
+
.bds2160Command-search {
|
|
1484
1564
|
flex: 1;
|
|
1485
1565
|
border: none;
|
|
1486
1566
|
font-family: var(--bds-font_family--body);
|
|
@@ -1489,14 +1569,14 @@
|
|
|
1489
1569
|
background: transparent;
|
|
1490
1570
|
min-inline-size: 0;
|
|
1491
1571
|
}
|
|
1492
|
-
.
|
|
1572
|
+
.bds2160Command-search:focus-visible {
|
|
1493
1573
|
outline: var(--bds-outline_default);
|
|
1494
1574
|
outline-offset: var(--bds-outline_offset);
|
|
1495
1575
|
}
|
|
1496
|
-
.
|
|
1576
|
+
.bds2160Command-search::placeholder {
|
|
1497
1577
|
color: var(--bds-color_on-bg);
|
|
1498
1578
|
}
|
|
1499
|
-
.
|
|
1579
|
+
.bds2160Command-escHint {
|
|
1500
1580
|
font-size: var(--bds-font_size--body--s);
|
|
1501
1581
|
color: var(--bds-color_on-bg);
|
|
1502
1582
|
border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
|
|
@@ -1506,18 +1586,18 @@
|
|
|
1506
1586
|
border: none;
|
|
1507
1587
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1508
1588
|
}
|
|
1509
|
-
.
|
|
1589
|
+
.bds2160Command-list {
|
|
1510
1590
|
overflow-block: auto;
|
|
1511
1591
|
list-style: none;
|
|
1512
1592
|
margin: 0;
|
|
1513
1593
|
padding: var(--bds-space_xs) 0;
|
|
1514
1594
|
}
|
|
1515
|
-
.
|
|
1595
|
+
.bds2160Command-groupList {
|
|
1516
1596
|
list-style: none;
|
|
1517
1597
|
margin: 0;
|
|
1518
1598
|
padding: 0;
|
|
1519
1599
|
}
|
|
1520
|
-
.
|
|
1600
|
+
.bds2160Command-group {
|
|
1521
1601
|
padding: var(--bds-space_xs) var(--bds-space_m);
|
|
1522
1602
|
font-size: var(--bds-font_size--body--s);
|
|
1523
1603
|
font-weight: var(--bds-font_weight--semibold);
|
|
@@ -1525,7 +1605,7 @@
|
|
|
1525
1605
|
text-transform: uppercase;
|
|
1526
1606
|
letter-spacing: 0.05em;
|
|
1527
1607
|
}
|
|
1528
|
-
.
|
|
1608
|
+
.bds2160Command-item {
|
|
1529
1609
|
display: flex;
|
|
1530
1610
|
align-items: center;
|
|
1531
1611
|
gap: var(--bds-space_s);
|
|
@@ -1533,19 +1613,19 @@
|
|
|
1533
1613
|
cursor: pointer;
|
|
1534
1614
|
transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
1535
1615
|
}
|
|
1536
|
-
.
|
|
1616
|
+
.bds2160Command-itemActive {
|
|
1537
1617
|
background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
|
|
1538
1618
|
}
|
|
1539
|
-
.
|
|
1619
|
+
.bds2160Command-itemLabel {
|
|
1540
1620
|
flex: 1;
|
|
1541
1621
|
font-size: var(--bds-font_size--body);
|
|
1542
1622
|
color: var(--bds-color_on-bg);
|
|
1543
1623
|
}
|
|
1544
|
-
.
|
|
1624
|
+
.bds2160Command-itemDesc {
|
|
1545
1625
|
font-size: var(--bds-font_size--body--s);
|
|
1546
1626
|
color: var(--bds-color_on-bg);
|
|
1547
1627
|
}
|
|
1548
|
-
.
|
|
1628
|
+
.bds2160Command-shortcut {
|
|
1549
1629
|
font-size: var(--bds-font_size--body--s);
|
|
1550
1630
|
color: var(--bds-color_on-bg);
|
|
1551
1631
|
border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
|
|
@@ -1554,13 +1634,13 @@
|
|
|
1554
1634
|
border: none;
|
|
1555
1635
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1556
1636
|
}
|
|
1557
|
-
.
|
|
1637
|
+
.bds2160Command-empty {
|
|
1558
1638
|
padding: var(--bds-space_l) var(--bds-space_m);
|
|
1559
1639
|
text-align: center;
|
|
1560
1640
|
color: var(--bds-color_on-bg);
|
|
1561
1641
|
font-size: var(--bds-font_size--body);
|
|
1562
1642
|
}
|
|
1563
|
-
.
|
|
1643
|
+
.bds2160Command-srOnly {
|
|
1564
1644
|
position: absolute;
|
|
1565
1645
|
inline-size: 1px;
|
|
1566
1646
|
block-size: 1px;
|
|
@@ -1572,8 +1652,8 @@
|
|
|
1572
1652
|
}
|
|
1573
1653
|
|
|
1574
1654
|
/* src/components/interaction/Dialog/Dialog.module.css */
|
|
1575
|
-
@layer boostdev.
|
|
1576
|
-
.
|
|
1655
|
+
@layer boostdev.bds2160Dialog-component {
|
|
1656
|
+
.bds2160Dialog-dialog {
|
|
1577
1657
|
font-size: var(--bds-font_size--body--s);
|
|
1578
1658
|
border: var(--dialog_border, none);
|
|
1579
1659
|
--bdc_color: currentcolor;
|
|
@@ -1589,17 +1669,17 @@
|
|
|
1589
1669
|
max-block-size: 90svh;
|
|
1590
1670
|
overflow: visible;
|
|
1591
1671
|
}
|
|
1592
|
-
.
|
|
1672
|
+
.bds2160Dialog-dialog:not([open]) {
|
|
1593
1673
|
display: none;
|
|
1594
1674
|
}
|
|
1595
|
-
.
|
|
1675
|
+
.bds2160Dialog-dialogContent {
|
|
1596
1676
|
display: grid;
|
|
1597
1677
|
gap: var(--bds-grid_gap);
|
|
1598
1678
|
overflow-block: auto;
|
|
1599
1679
|
min-block-size: 0;
|
|
1600
1680
|
flex: 1;
|
|
1601
1681
|
}
|
|
1602
|
-
.
|
|
1682
|
+
.bds2160Dialog-closeButton {
|
|
1603
1683
|
all: unset;
|
|
1604
1684
|
position: absolute;
|
|
1605
1685
|
inset-block-start: -1em;
|
|
@@ -1617,29 +1697,29 @@
|
|
|
1617
1697
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
|
|
1618
1698
|
cursor: pointer;
|
|
1619
1699
|
}
|
|
1620
|
-
.
|
|
1700
|
+
.bds2160Dialog-closeButton::after {
|
|
1621
1701
|
content: "";
|
|
1622
1702
|
position: absolute;
|
|
1623
1703
|
inset-block: -0.5rem;
|
|
1624
1704
|
inset-inline: -0.5rem;
|
|
1625
1705
|
}
|
|
1626
|
-
.
|
|
1706
|
+
.bds2160Dialog-closeButton:focus-visible {
|
|
1627
1707
|
outline: var(--bds-outline_default);
|
|
1628
1708
|
outline-offset: var(--bds-outline_offset);
|
|
1629
1709
|
}
|
|
1630
|
-
.
|
|
1710
|
+
.bds2160Dialog-closeButton svg {
|
|
1631
1711
|
inline-size: 1.25em;
|
|
1632
1712
|
block-size: 1.25em;
|
|
1633
1713
|
}
|
|
1634
|
-
.
|
|
1714
|
+
.bds2160Dialog-dialog::backdrop {
|
|
1635
1715
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1636
1716
|
backdrop-filter: blur(3px);
|
|
1637
1717
|
}
|
|
1638
1718
|
}
|
|
1639
1719
|
|
|
1640
1720
|
/* src/components/interaction/Drawer/Drawer.module.css */
|
|
1641
|
-
@layer boostdev.
|
|
1642
|
-
.
|
|
1721
|
+
@layer boostdev.bds2160Drawer-component {
|
|
1722
|
+
.bds2160Drawer-drawer {
|
|
1643
1723
|
position: fixed;
|
|
1644
1724
|
inset-block: 0;
|
|
1645
1725
|
inset-inline: auto 0;
|
|
@@ -1662,37 +1742,37 @@
|
|
|
1662
1742
|
display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
|
|
1663
1743
|
overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
|
|
1664
1744
|
}
|
|
1665
|
-
.
|
|
1745
|
+
.bds2160Drawer-drawer:not([open]) {
|
|
1666
1746
|
display: none;
|
|
1667
1747
|
}
|
|
1668
|
-
.
|
|
1748
|
+
.bds2160Drawer-drawer:dir(rtl) {
|
|
1669
1749
|
translate: -100% 0;
|
|
1670
1750
|
}
|
|
1671
|
-
.
|
|
1751
|
+
.bds2160Drawer---side_left.bds2160Drawer-drawer {
|
|
1672
1752
|
inset-inline: 0 auto;
|
|
1673
1753
|
translate: -100% 0;
|
|
1674
1754
|
}
|
|
1675
|
-
.
|
|
1755
|
+
.bds2160Drawer---side_left.bds2160Drawer-drawer:dir(rtl) {
|
|
1676
1756
|
translate: 100% 0;
|
|
1677
1757
|
}
|
|
1678
|
-
.
|
|
1758
|
+
.bds2160Drawer-drawer[open] {
|
|
1679
1759
|
translate: 0 0;
|
|
1680
1760
|
}
|
|
1681
1761
|
@starting-style {
|
|
1682
|
-
.
|
|
1762
|
+
.bds2160Drawer-drawer[open] {
|
|
1683
1763
|
translate: 100% 0;
|
|
1684
1764
|
}
|
|
1685
|
-
.
|
|
1765
|
+
.bds2160Drawer-drawer[open]:dir(rtl) {
|
|
1686
1766
|
translate: -100% 0;
|
|
1687
1767
|
}
|
|
1688
|
-
.
|
|
1768
|
+
.bds2160Drawer---side_left.bds2160Drawer-drawer[open] {
|
|
1689
1769
|
translate: -100% 0;
|
|
1690
1770
|
}
|
|
1691
|
-
.
|
|
1771
|
+
.bds2160Drawer---side_left.bds2160Drawer-drawer[open]:dir(rtl) {
|
|
1692
1772
|
translate: 100% 0;
|
|
1693
1773
|
}
|
|
1694
1774
|
}
|
|
1695
|
-
.
|
|
1775
|
+
.bds2160Drawer-drawer::backdrop {
|
|
1696
1776
|
background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
|
|
1697
1777
|
backdrop-filter: blur(3px);
|
|
1698
1778
|
opacity: 0;
|
|
@@ -1701,15 +1781,15 @@
|
|
|
1701
1781
|
display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
|
|
1702
1782
|
overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
|
|
1703
1783
|
}
|
|
1704
|
-
.
|
|
1784
|
+
.bds2160Drawer-drawer[open]::backdrop {
|
|
1705
1785
|
opacity: 1;
|
|
1706
1786
|
}
|
|
1707
1787
|
@starting-style {
|
|
1708
|
-
.
|
|
1788
|
+
.bds2160Drawer-drawer[open]::backdrop {
|
|
1709
1789
|
opacity: 0;
|
|
1710
1790
|
}
|
|
1711
1791
|
}
|
|
1712
|
-
.
|
|
1792
|
+
.bds2160Drawer-header {
|
|
1713
1793
|
display: flex;
|
|
1714
1794
|
align-items: center;
|
|
1715
1795
|
justify-content: space-between;
|
|
@@ -1717,7 +1797,7 @@
|
|
|
1717
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))));
|
|
1718
1798
|
flex-shrink: 0;
|
|
1719
1799
|
}
|
|
1720
|
-
.
|
|
1800
|
+
.bds2160Drawer-closeButton {
|
|
1721
1801
|
all: unset;
|
|
1722
1802
|
display: flex;
|
|
1723
1803
|
align-items: center;
|
|
@@ -1728,20 +1808,20 @@
|
|
|
1728
1808
|
cursor: pointer;
|
|
1729
1809
|
transition: var(--bds-animation_transition);
|
|
1730
1810
|
}
|
|
1731
|
-
.
|
|
1811
|
+
.bds2160Drawer-closeButton svg {
|
|
1732
1812
|
inline-size: 1.25rem;
|
|
1733
1813
|
block-size: 1.25rem;
|
|
1734
1814
|
}
|
|
1735
|
-
.
|
|
1815
|
+
.bds2160Drawer-closeButton:focus-visible {
|
|
1736
1816
|
outline: var(--bds-outline_default);
|
|
1737
1817
|
outline-offset: var(--bds-outline_offset);
|
|
1738
1818
|
}
|
|
1739
1819
|
@media (hover: hover) and (pointer: fine) {
|
|
1740
|
-
.
|
|
1820
|
+
.bds2160Drawer-closeButton:hover {
|
|
1741
1821
|
background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
|
|
1742
1822
|
}
|
|
1743
1823
|
}
|
|
1744
|
-
.
|
|
1824
|
+
.bds2160Drawer-body {
|
|
1745
1825
|
flex: 1;
|
|
1746
1826
|
overflow-block: auto;
|
|
1747
1827
|
padding: var(--bds-space_l);
|
|
@@ -1749,79 +1829,118 @@
|
|
|
1749
1829
|
flex-direction: column;
|
|
1750
1830
|
}
|
|
1751
1831
|
@media (prefers-reduced-motion: reduce) {
|
|
1752
|
-
.
|
|
1753
|
-
.
|
|
1832
|
+
.bds2160Drawer-drawer,
|
|
1833
|
+
.bds2160Drawer-drawer::backdrop {
|
|
1754
1834
|
transition: none;
|
|
1755
1835
|
}
|
|
1756
1836
|
}
|
|
1757
1837
|
}
|
|
1758
1838
|
|
|
1759
1839
|
/* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
|
|
1760
|
-
@layer boostdev.
|
|
1761
|
-
.
|
|
1840
|
+
@layer boostdev.bds2160DropdownMenu-component {
|
|
1841
|
+
.bds2160DropdownMenu-wrapper {
|
|
1762
1842
|
position: relative;
|
|
1763
1843
|
display: inline-flex;
|
|
1764
1844
|
}
|
|
1765
|
-
.
|
|
1845
|
+
.bds2160DropdownMenu-menu {
|
|
1766
1846
|
position: absolute;
|
|
1767
1847
|
inset-block-start: calc(100% + var(--bds-space_xxs));
|
|
1768
1848
|
z-index: var(--bds-z-index_dropdown);
|
|
1769
1849
|
min-inline-size: 10rem;
|
|
1770
|
-
padding: var(--bds-space_xxs)
|
|
1850
|
+
padding: var(--dropdown_padding, var(--bds-space_xxs));
|
|
1771
1851
|
border: var(--dropdown_border, none);
|
|
1772
|
-
--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))));
|
|
1773
1853
|
--bdc-outline_radius: var(--bds-border_radius--s);
|
|
1774
1854
|
border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
|
|
1775
1855
|
background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
|
|
1776
1856
|
color: var(--dropdown_on-color, var(--bds-color_on-bg));
|
|
1777
|
-
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));
|
|
1778
1858
|
list-style: none;
|
|
1779
1859
|
margin: 0;
|
|
1780
1860
|
}
|
|
1781
|
-
.
|
|
1861
|
+
.bds2160DropdownMenu-menu li {
|
|
1782
1862
|
list-style: none;
|
|
1783
1863
|
}
|
|
1784
|
-
.
|
|
1864
|
+
.bds2160DropdownMenu---placement_bottom-start {
|
|
1785
1865
|
inset-inline-start: 0;
|
|
1786
1866
|
}
|
|
1787
|
-
.
|
|
1867
|
+
.bds2160DropdownMenu---placement_bottom-end {
|
|
1788
1868
|
inset-inline-end: 0;
|
|
1789
1869
|
}
|
|
1790
|
-
.
|
|
1870
|
+
.bds2160DropdownMenu-separatorRow {
|
|
1871
|
+
padding-block: var(--bds-space_xxs);
|
|
1872
|
+
}
|
|
1873
|
+
.bds2160DropdownMenu-separator {
|
|
1791
1874
|
border: none;
|
|
1792
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))));
|
|
1793
|
-
margin:
|
|
1876
|
+
margin: 0;
|
|
1877
|
+
}
|
|
1878
|
+
.bds2160DropdownMenu-group {
|
|
1879
|
+
margin: 0;
|
|
1880
|
+
padding: 0;
|
|
1881
|
+
list-style: none;
|
|
1794
1882
|
}
|
|
1795
|
-
.
|
|
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 {
|
|
1796
1892
|
all: unset;
|
|
1797
1893
|
display: flex;
|
|
1798
1894
|
align-items: center;
|
|
1799
1895
|
gap: var(--bds-space_xs);
|
|
1800
1896
|
inline-size: 100%;
|
|
1801
|
-
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));
|
|
1802
1899
|
font-family: var(--bds-font_family--body);
|
|
1803
|
-
font-size: var(--bds-font_size--body);
|
|
1900
|
+
font-size: var(--dropdown_item-font-size, var(--bds-font_size--body));
|
|
1804
1901
|
color: currentcolor;
|
|
1805
1902
|
cursor: pointer;
|
|
1806
1903
|
box-sizing: border-box;
|
|
1807
1904
|
transition: var(--bds-animation_transition);
|
|
1808
1905
|
}
|
|
1809
|
-
.
|
|
1810
|
-
opacity: 0.4;
|
|
1906
|
+
.bds2160DropdownMenu-item:disabled {
|
|
1907
|
+
opacity: var(--dropdown_item-opacity--disabled, 0.4);
|
|
1811
1908
|
cursor: not-allowed;
|
|
1812
1909
|
}
|
|
1813
|
-
.
|
|
1910
|
+
.bds2160DropdownMenu-item:focus-visible {
|
|
1814
1911
|
outline: var(--bds-outline_default);
|
|
1815
1912
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
1816
|
-
|
|
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));
|
|
1817
1924
|
}
|
|
1818
1925
|
@media (hover: hover) and (pointer: fine) {
|
|
1819
|
-
.
|
|
1820
|
-
background-color: var(--dropdown_item-bg--hover, var(--bds-
|
|
1821
|
-
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)));
|
|
1822
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));
|
|
1823
1942
|
}
|
|
1824
|
-
.
|
|
1943
|
+
.bds2160DropdownMenu-icon {
|
|
1825
1944
|
display: flex;
|
|
1826
1945
|
align-items: center;
|
|
1827
1946
|
flex-shrink: 0;
|
|
@@ -1829,11 +1948,11 @@
|
|
|
1829
1948
|
}
|
|
1830
1949
|
|
|
1831
1950
|
/* src/components/interaction/Popover/Popover.module.css */
|
|
1832
|
-
@layer boostdev.
|
|
1833
|
-
.
|
|
1951
|
+
@layer boostdev.bds2160Popover-component {
|
|
1952
|
+
.bds2160Popover-wrapper {
|
|
1834
1953
|
display: inline-flex;
|
|
1835
1954
|
}
|
|
1836
|
-
.
|
|
1955
|
+
.bds2160Popover-panel {
|
|
1837
1956
|
position: fixed;
|
|
1838
1957
|
inset: unset;
|
|
1839
1958
|
margin: 0;
|
|
@@ -1852,7 +1971,7 @@
|
|
|
1852
1971
|
color: var(--popover_on-color, var(--bds-color_on-bg));
|
|
1853
1972
|
font-size: var(--bds-font_size--body);
|
|
1854
1973
|
}
|
|
1855
|
-
.
|
|
1974
|
+
.bds2160Popover-panel[data-placement=bottom] {
|
|
1856
1975
|
top: anchor(bottom);
|
|
1857
1976
|
left: anchor(left);
|
|
1858
1977
|
margin-block-start: var(--bds-space_xs);
|
|
@@ -1861,7 +1980,7 @@
|
|
|
1861
1980
|
--popover-right,
|
|
1862
1981
|
--popover-left;
|
|
1863
1982
|
}
|
|
1864
|
-
.
|
|
1983
|
+
.bds2160Popover-panel[data-placement=top] {
|
|
1865
1984
|
bottom: anchor(top);
|
|
1866
1985
|
left: anchor(left);
|
|
1867
1986
|
margin-block-end: var(--bds-space_xs);
|
|
@@ -1870,7 +1989,7 @@
|
|
|
1870
1989
|
--popover-right,
|
|
1871
1990
|
--popover-left;
|
|
1872
1991
|
}
|
|
1873
|
-
.
|
|
1992
|
+
.bds2160Popover-panel[data-placement=right] {
|
|
1874
1993
|
top: anchor(top);
|
|
1875
1994
|
left: anchor(right);
|
|
1876
1995
|
margin-inline-start: var(--bds-space_xs);
|
|
@@ -1879,7 +1998,7 @@
|
|
|
1879
1998
|
--popover-bottom,
|
|
1880
1999
|
--popover-top;
|
|
1881
2000
|
}
|
|
1882
|
-
.
|
|
2001
|
+
.bds2160Popover-panel[data-placement=left] {
|
|
1883
2002
|
top: anchor(top);
|
|
1884
2003
|
right: anchor(left);
|
|
1885
2004
|
margin-inline-end: var(--bds-space_xs);
|
|
@@ -1937,10 +2056,10 @@
|
|
|
1937
2056
|
margin-block-end: var(--bds-space_xs);
|
|
1938
2057
|
}
|
|
1939
2058
|
@media (width <= 420px) {
|
|
1940
|
-
.
|
|
1941
|
-
.
|
|
1942
|
-
.
|
|
1943
|
-
.
|
|
2059
|
+
.bds2160Popover-panel[data-placement=bottom],
|
|
2060
|
+
.bds2160Popover-panel[data-placement=top],
|
|
2061
|
+
.bds2160Popover-panel[data-placement=left],
|
|
2062
|
+
.bds2160Popover-panel[data-placement=right] {
|
|
1944
2063
|
inset-inline: var(--bds-space_xs);
|
|
1945
2064
|
inline-size: 100%;
|
|
1946
2065
|
max-inline-size: calc(100svw - 2 * var(--bds-space_xs));
|
|
@@ -1948,13 +2067,13 @@
|
|
|
1948
2067
|
}
|
|
1949
2068
|
}
|
|
1950
2069
|
@media (aspect-ratio >= 2/1) {
|
|
1951
|
-
.
|
|
2070
|
+
.bds2160Popover-panel[data-placement=bottom] {
|
|
1952
2071
|
position-try-fallbacks:
|
|
1953
2072
|
--popover-top,
|
|
1954
2073
|
--popover-right,
|
|
1955
2074
|
--popover-left;
|
|
1956
2075
|
}
|
|
1957
|
-
.
|
|
2076
|
+
.bds2160Popover-panel[data-placement=top] {
|
|
1958
2077
|
position-try-fallbacks:
|
|
1959
2078
|
--popover-bottom,
|
|
1960
2079
|
--popover-right,
|
|
@@ -1964,24 +2083,24 @@
|
|
|
1964
2083
|
}
|
|
1965
2084
|
|
|
1966
2085
|
/* src/components/interaction/Rating/Rating.module.css */
|
|
1967
|
-
@layer boostdev.
|
|
1968
|
-
.
|
|
2086
|
+
@layer boostdev.bds2160Rating-component {
|
|
2087
|
+
.bds2160Rating-rating {
|
|
1969
2088
|
display: inline-flex;
|
|
1970
2089
|
gap: var(--bds-space_xxxs);
|
|
1971
2090
|
color: var(--rating_color, var(--bds-color_bg));
|
|
1972
2091
|
}
|
|
1973
|
-
.
|
|
2092
|
+
.bds2160Rating-star {
|
|
1974
2093
|
inline-size: 1.5em;
|
|
1975
2094
|
block-size: 1.5em;
|
|
1976
2095
|
}
|
|
1977
|
-
.
|
|
2096
|
+
.bds2160Rating---filled {
|
|
1978
2097
|
color: var(--rating_color--filled, var(--bds-color_warning));
|
|
1979
2098
|
}
|
|
1980
2099
|
}
|
|
1981
2100
|
|
|
1982
2101
|
/* src/components/interaction/Toast/Toast.module.css */
|
|
1983
|
-
@layer boostdev.
|
|
1984
|
-
.
|
|
2102
|
+
@layer boostdev.bds2160Toast-component {
|
|
2103
|
+
.bds2160Toast-toastContainer {
|
|
1985
2104
|
position: fixed;
|
|
1986
2105
|
inset: unset;
|
|
1987
2106
|
inset-block-end: var(--bds-space_xl);
|
|
@@ -1993,7 +2112,7 @@
|
|
|
1993
2112
|
padding: 0;
|
|
1994
2113
|
background: transparent;
|
|
1995
2114
|
}
|
|
1996
|
-
.
|
|
2115
|
+
.bds2160Toast-toast {
|
|
1997
2116
|
padding: var(--bds-space_m) var(--bds-space_l);
|
|
1998
2117
|
background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
|
|
1999
2118
|
color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
|
|
@@ -2005,29 +2124,29 @@
|
|
|
2005
2124
|
min-inline-size: min(300px, calc(100svw - 2 * var(--bds-space_xl)));
|
|
2006
2125
|
animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
|
|
2007
2126
|
}
|
|
2008
|
-
.
|
|
2127
|
+
.bds2160Toast-toast:dir(rtl) {
|
|
2009
2128
|
--toast_slide-offset: -100%;
|
|
2010
2129
|
}
|
|
2011
|
-
.
|
|
2130
|
+
.bds2160Toast-toast.bds2160Toast---variant_success {
|
|
2012
2131
|
--toast_color--variant: var(--toast_color--success, var(--bds-color_success));
|
|
2013
2132
|
--toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
|
|
2014
2133
|
}
|
|
2015
|
-
.
|
|
2134
|
+
.bds2160Toast-toast.bds2160Toast---variant_warning {
|
|
2016
2135
|
--toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
|
|
2017
2136
|
--toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
|
|
2018
2137
|
}
|
|
2019
|
-
.
|
|
2138
|
+
.bds2160Toast-toast.bds2160Toast---variant_info {
|
|
2020
2139
|
--toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
|
|
2021
2140
|
--toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
|
|
2022
2141
|
}
|
|
2023
|
-
.
|
|
2142
|
+
.bds2160Toast-toast.bds2160Toast---variant_error {
|
|
2024
2143
|
--toast_color--variant: var(--toast_color--error, var(--bds-color_error));
|
|
2025
2144
|
--toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
|
|
2026
2145
|
}
|
|
2027
|
-
.
|
|
2146
|
+
.bds2160Toast-message {
|
|
2028
2147
|
flex: 1;
|
|
2029
2148
|
}
|
|
2030
|
-
.
|
|
2149
|
+
.bds2160Toast-closeButton {
|
|
2031
2150
|
position: relative;
|
|
2032
2151
|
display: flex;
|
|
2033
2152
|
align-items: center;
|
|
@@ -2041,16 +2160,16 @@
|
|
|
2041
2160
|
cursor: pointer;
|
|
2042
2161
|
color: currentcolor;
|
|
2043
2162
|
}
|
|
2044
|
-
.
|
|
2163
|
+
.bds2160Toast-closeButton::after {
|
|
2045
2164
|
content: "";
|
|
2046
2165
|
position: absolute;
|
|
2047
2166
|
inset: -0.75rem;
|
|
2048
2167
|
}
|
|
2049
|
-
.
|
|
2168
|
+
.bds2160Toast-closeButton:focus-visible {
|
|
2050
2169
|
outline: var(--bds-outline_default);
|
|
2051
2170
|
outline-offset: var(--bds-outline_offset);
|
|
2052
2171
|
}
|
|
2053
|
-
.
|
|
2172
|
+
.bds2160Toast-closeButton svg {
|
|
2054
2173
|
inline-size: 1rem;
|
|
2055
2174
|
block-size: 1rem;
|
|
2056
2175
|
}
|
|
@@ -2066,25 +2185,25 @@
|
|
|
2066
2185
|
}
|
|
2067
2186
|
}
|
|
2068
2187
|
@media (prefers-reduced-motion: reduce) {
|
|
2069
|
-
.
|
|
2188
|
+
.bds2160Toast-toast {
|
|
2070
2189
|
animation: none;
|
|
2071
2190
|
}
|
|
2072
2191
|
}
|
|
2073
2192
|
|
|
2074
2193
|
/* src/components/interaction/form/Checkbox/Checkbox.module.css */
|
|
2075
|
-
@layer boostdev.
|
|
2076
|
-
.
|
|
2194
|
+
@layer boostdev.bds2160Checkbox-component {
|
|
2195
|
+
.bds2160Checkbox-checkboxGroup {
|
|
2077
2196
|
--checkbox_size: calc(var(--bds-space_s) * 2);
|
|
2078
2197
|
--inputSize: var(--checkbox_size);
|
|
2079
2198
|
display: flex;
|
|
2080
2199
|
flex-direction: column;
|
|
2081
2200
|
}
|
|
2082
|
-
.
|
|
2201
|
+
.bds2160Checkbox-inputWrapper {
|
|
2083
2202
|
display: flex;
|
|
2084
2203
|
align-items: stretch;
|
|
2085
2204
|
gap: var(--checkbox_gap, var(--bds-space_m));
|
|
2086
2205
|
}
|
|
2087
|
-
.
|
|
2206
|
+
.bds2160Checkbox-checkbox {
|
|
2088
2207
|
margin-block-start: var(--checkbox_offset, 0.25em);
|
|
2089
2208
|
inline-size: var(--checkbox_size);
|
|
2090
2209
|
block-size: var(--checkbox_size);
|
|
@@ -2100,11 +2219,11 @@
|
|
|
2100
2219
|
position: relative;
|
|
2101
2220
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2102
2221
|
}
|
|
2103
|
-
.
|
|
2222
|
+
.bds2160Checkbox-checkbox:checked {
|
|
2104
2223
|
background-color: var(--checkbox_color-active, var(--bdc-color_active));
|
|
2105
2224
|
--bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
|
|
2106
2225
|
}
|
|
2107
|
-
.
|
|
2226
|
+
.bds2160Checkbox-checkbox:checked::after {
|
|
2108
2227
|
content: "";
|
|
2109
2228
|
position: absolute;
|
|
2110
2229
|
inset-inline-start: 0.6em;
|
|
@@ -2115,40 +2234,51 @@
|
|
|
2115
2234
|
border-width: 0 2px 2px 0;
|
|
2116
2235
|
transform: rotate(45deg);
|
|
2117
2236
|
}
|
|
2118
|
-
.
|
|
2237
|
+
.bds2160Checkbox-checkbox:focus {
|
|
2119
2238
|
--bdc_color: var(--bdc_color--focus);
|
|
2120
2239
|
}
|
|
2121
|
-
.
|
|
2240
|
+
.bds2160Checkbox-checkbox:focus-visible {
|
|
2122
2241
|
outline: var(--bds-outline_default);
|
|
2123
2242
|
outline-offset: var(--bds-outline_offset);
|
|
2124
2243
|
}
|
|
2125
|
-
.
|
|
2244
|
+
.bds2160Checkbox-checkbox:disabled {
|
|
2126
2245
|
opacity: 0.5;
|
|
2127
2246
|
cursor: not-allowed;
|
|
2128
2247
|
}
|
|
2129
|
-
.
|
|
2248
|
+
.bds2160Checkbox-checkboxError {
|
|
2130
2249
|
--bdc_color: var(--bdc_color--error);
|
|
2250
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2131
2251
|
}
|
|
2132
2252
|
}
|
|
2133
2253
|
|
|
2134
2254
|
/* src/components/interaction/form/atoms/Message.module.css */
|
|
2135
|
-
@layer boostdev.
|
|
2136
|
-
.
|
|
2137
|
-
.
|
|
2138
|
-
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));
|
|
2139
2259
|
margin-inline-start: var(--labelPosition, 0);
|
|
2140
2260
|
}
|
|
2141
|
-
.
|
|
2142
|
-
|
|
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));
|
|
2143
2267
|
}
|
|
2144
|
-
.
|
|
2145
|
-
|
|
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;
|
|
2146
2276
|
}
|
|
2147
2277
|
}
|
|
2148
2278
|
|
|
2149
2279
|
/* src/components/interaction/form/atoms/Label.module.css */
|
|
2150
|
-
@layer boostdev.
|
|
2151
|
-
.
|
|
2280
|
+
@layer boostdev.bds2160Label-component {
|
|
2281
|
+
.bds2160Label-label {
|
|
2152
2282
|
display: flex;
|
|
2153
2283
|
align-items: center;
|
|
2154
2284
|
font-family: var(--bds-font_family--body);
|
|
@@ -2158,8 +2288,8 @@
|
|
|
2158
2288
|
}
|
|
2159
2289
|
|
|
2160
2290
|
/* src/components/interaction/form/atoms/InputContainer.module.css */
|
|
2161
|
-
@layer boostdev.
|
|
2162
|
-
.
|
|
2291
|
+
@layer boostdev.bds2160InputContainer-component {
|
|
2292
|
+
.bds2160InputContainer-container {
|
|
2163
2293
|
--labelPosition: calc(var(--inputSize) + var(--bds-space_m));
|
|
2164
2294
|
display: flex;
|
|
2165
2295
|
flex-direction: column;
|
|
@@ -2168,8 +2298,8 @@
|
|
|
2168
2298
|
}
|
|
2169
2299
|
|
|
2170
2300
|
/* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
|
|
2171
|
-
@layer boostdev.
|
|
2172
|
-
.
|
|
2301
|
+
@layer boostdev.bds2160CheckboxGroup-component {
|
|
2302
|
+
.bds2160CheckboxGroup-group {
|
|
2173
2303
|
border: none;
|
|
2174
2304
|
padding: 0;
|
|
2175
2305
|
margin: 0;
|
|
@@ -2177,7 +2307,7 @@
|
|
|
2177
2307
|
flex-direction: column;
|
|
2178
2308
|
gap: var(--checkboxGroup_gap, var(--bds-space_xs));
|
|
2179
2309
|
}
|
|
2180
|
-
.
|
|
2310
|
+
.bds2160CheckboxGroup-legend {
|
|
2181
2311
|
font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
|
|
2182
2312
|
font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
|
|
2183
2313
|
font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
|
|
@@ -2185,10 +2315,10 @@
|
|
|
2185
2315
|
padding: 0;
|
|
2186
2316
|
margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
|
|
2187
2317
|
}
|
|
2188
|
-
.
|
|
2318
|
+
.bds2160CheckboxGroup-required {
|
|
2189
2319
|
color: var(--checkboxGroup_required-color, var(--bds-color_error));
|
|
2190
2320
|
}
|
|
2191
|
-
.
|
|
2321
|
+
.bds2160CheckboxGroup-requiredLabel {
|
|
2192
2322
|
position: absolute;
|
|
2193
2323
|
inline-size: 1px;
|
|
2194
2324
|
block-size: 1px;
|
|
@@ -2199,25 +2329,29 @@
|
|
|
2199
2329
|
white-space: nowrap;
|
|
2200
2330
|
border-width: 0;
|
|
2201
2331
|
}
|
|
2202
|
-
.
|
|
2332
|
+
.bds2160CheckboxGroup-items {
|
|
2203
2333
|
display: flex;
|
|
2204
2334
|
flex-direction: column;
|
|
2205
2335
|
gap: var(--checkboxGroup_items-gap, var(--bds-space_xs));
|
|
2206
2336
|
}
|
|
2337
|
+
.bds2160CheckboxGroup-groupError input {
|
|
2338
|
+
--bdc_color: var(--bdc_color--error);
|
|
2339
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2340
|
+
}
|
|
2207
2341
|
}
|
|
2208
2342
|
|
|
2209
2343
|
/* src/components/interaction/form/Combobox/Combobox.module.css */
|
|
2210
|
-
@layer boostdev.
|
|
2211
|
-
.
|
|
2344
|
+
@layer boostdev.bds2160Combobox-component {
|
|
2345
|
+
.bds2160Combobox-formGroup {
|
|
2212
2346
|
display: flex;
|
|
2213
2347
|
flex-direction: column;
|
|
2214
2348
|
}
|
|
2215
|
-
.
|
|
2349
|
+
.bds2160Combobox-inputWrapper {
|
|
2216
2350
|
position: relative;
|
|
2217
2351
|
display: flex;
|
|
2218
2352
|
align-items: center;
|
|
2219
2353
|
}
|
|
2220
|
-
.
|
|
2354
|
+
.bds2160Combobox-input {
|
|
2221
2355
|
appearance: none;
|
|
2222
2356
|
inline-size: 100%;
|
|
2223
2357
|
font-family: var(--bds-font_family--body);
|
|
@@ -2233,21 +2367,22 @@
|
|
|
2233
2367
|
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
2234
2368
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2235
2369
|
}
|
|
2236
|
-
.
|
|
2370
|
+
.bds2160Combobox-input:focus {
|
|
2237
2371
|
--bdc_color: var(--bdc_color--focus);
|
|
2238
2372
|
}
|
|
2239
|
-
.
|
|
2373
|
+
.bds2160Combobox-input:focus-visible {
|
|
2240
2374
|
outline: var(--bds-outline_default);
|
|
2241
2375
|
outline-offset: var(--bds-outline_offset);
|
|
2242
2376
|
}
|
|
2243
|
-
.
|
|
2377
|
+
.bds2160Combobox-input:disabled {
|
|
2244
2378
|
opacity: 0.5;
|
|
2245
2379
|
cursor: not-allowed;
|
|
2246
2380
|
}
|
|
2247
|
-
.
|
|
2381
|
+
.bds2160Combobox-inputError {
|
|
2248
2382
|
--bdc_color: var(--bdc_color--error);
|
|
2383
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2249
2384
|
}
|
|
2250
|
-
.
|
|
2385
|
+
.bds2160Combobox-chevron {
|
|
2251
2386
|
position: absolute;
|
|
2252
2387
|
inset-inline-end: var(--bds-space_s);
|
|
2253
2388
|
display: flex;
|
|
@@ -2255,11 +2390,11 @@
|
|
|
2255
2390
|
pointer-events: none;
|
|
2256
2391
|
color: var(--combobox_color, var(--bds-color_on-bg));
|
|
2257
2392
|
}
|
|
2258
|
-
.
|
|
2393
|
+
.bds2160Combobox-chevron svg {
|
|
2259
2394
|
inline-size: 1rem;
|
|
2260
2395
|
block-size: 1rem;
|
|
2261
2396
|
}
|
|
2262
|
-
.
|
|
2397
|
+
.bds2160Combobox-listbox {
|
|
2263
2398
|
position: absolute;
|
|
2264
2399
|
inset-block-start: calc(100% + var(--bds-space_xxs));
|
|
2265
2400
|
inset-inline: 0;
|
|
@@ -2277,7 +2412,7 @@
|
|
|
2277
2412
|
color: var(--combobox_on-color, var(--bds-color_on-bg));
|
|
2278
2413
|
box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
|
|
2279
2414
|
}
|
|
2280
|
-
.
|
|
2415
|
+
.bds2160Combobox-option {
|
|
2281
2416
|
display: flex;
|
|
2282
2417
|
align-items: center;
|
|
2283
2418
|
padding: var(--combobox_option-padding-block, var(--bds-space_xs)) var(--combobox_option-padding-inline, var(--bds-space_m));
|
|
@@ -2286,29 +2421,29 @@
|
|
|
2286
2421
|
cursor: pointer;
|
|
2287
2422
|
transition: var(--bds-animation_transition);
|
|
2288
2423
|
}
|
|
2289
|
-
.
|
|
2424
|
+
.bds2160Combobox-option.bds2160Combobox---highlighted {
|
|
2290
2425
|
background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
|
|
2291
2426
|
color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
|
|
2292
2427
|
}
|
|
2293
|
-
.
|
|
2428
|
+
.bds2160Combobox-option.bds2160Combobox---selected {
|
|
2294
2429
|
font-weight: var(--bds-font_weight--semibold);
|
|
2295
2430
|
}
|
|
2296
|
-
.
|
|
2431
|
+
.bds2160Combobox-option.bds2160Combobox---disabled {
|
|
2297
2432
|
opacity: 0.4;
|
|
2298
2433
|
cursor: not-allowed;
|
|
2299
2434
|
}
|
|
2300
2435
|
}
|
|
2301
2436
|
|
|
2302
2437
|
/* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
|
|
2303
|
-
@layer boostdev.
|
|
2304
|
-
.
|
|
2438
|
+
@layer boostdev.bds2160FieldGroup-component {
|
|
2439
|
+
.bds2160FieldGroup-fieldGroup {
|
|
2305
2440
|
border: 0;
|
|
2306
2441
|
margin: 0;
|
|
2307
2442
|
padding: 0;
|
|
2308
2443
|
min-inline-size: 0;
|
|
2309
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)) );
|
|
2310
2445
|
}
|
|
2311
|
-
.
|
|
2446
|
+
.bds2160FieldGroup-legend {
|
|
2312
2447
|
inline-size: 100%;
|
|
2313
2448
|
padding-inline: 0;
|
|
2314
2449
|
padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
|
|
@@ -2320,28 +2455,28 @@
|
|
|
2320
2455
|
font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
|
|
2321
2456
|
line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
|
|
2322
2457
|
}
|
|
2323
|
-
.
|
|
2458
|
+
.bds2160FieldGroup-fieldGroup:disabled .bds2160FieldGroup-legend {
|
|
2324
2459
|
opacity: 0.5;
|
|
2325
2460
|
}
|
|
2326
|
-
.
|
|
2461
|
+
.bds2160FieldGroup-fields {
|
|
2327
2462
|
display: flex;
|
|
2328
2463
|
flex-direction: column;
|
|
2329
2464
|
gap: var(--fieldGroup_gap, var(--bds-space_m));
|
|
2330
2465
|
}
|
|
2331
|
-
.
|
|
2466
|
+
.bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields {
|
|
2332
2467
|
flex-flow: row wrap;
|
|
2333
2468
|
}
|
|
2334
|
-
.
|
|
2469
|
+
.bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields > * {
|
|
2335
2470
|
flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
|
|
2336
2471
|
min-inline-size: 0;
|
|
2337
2472
|
}
|
|
2338
|
-
.
|
|
2473
|
+
.bds2160FieldGroup-probeContainer {
|
|
2339
2474
|
position: relative;
|
|
2340
2475
|
inline-size: 0;
|
|
2341
2476
|
block-size: 0;
|
|
2342
2477
|
overflow: hidden;
|
|
2343
2478
|
}
|
|
2344
|
-
.
|
|
2479
|
+
.bds2160FieldGroup-probe {
|
|
2345
2480
|
position: absolute;
|
|
2346
2481
|
inset-block-start: 0;
|
|
2347
2482
|
inset-inline-start: 0;
|
|
@@ -2349,28 +2484,28 @@
|
|
|
2349
2484
|
inline-size: var(--fieldGroup_collapse-threshold);
|
|
2350
2485
|
visibility: hidden;
|
|
2351
2486
|
}
|
|
2352
|
-
.
|
|
2487
|
+
.bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields {
|
|
2353
2488
|
flex-direction: column;
|
|
2354
2489
|
}
|
|
2355
|
-
.
|
|
2490
|
+
.bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields > * {
|
|
2356
2491
|
flex: 1 1 auto;
|
|
2357
2492
|
}
|
|
2358
2493
|
}
|
|
2359
2494
|
|
|
2360
2495
|
/* src/components/interaction/form/FileInput/FileInput.module.css */
|
|
2361
|
-
@layer boostdev.
|
|
2362
|
-
.
|
|
2496
|
+
@layer boostdev.bds2160FileInput-component {
|
|
2497
|
+
.bds2160FileInput-formGroup {
|
|
2363
2498
|
display: flex;
|
|
2364
2499
|
flex-direction: column;
|
|
2365
2500
|
}
|
|
2366
|
-
.
|
|
2501
|
+
.bds2160FileInput-fieldLabel {
|
|
2367
2502
|
display: flex;
|
|
2368
2503
|
align-items: center;
|
|
2369
2504
|
font-family: var(--bds-font_family--body);
|
|
2370
2505
|
color: var(--bds-color_on-bg);
|
|
2371
2506
|
margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
|
|
2372
2507
|
}
|
|
2373
|
-
.
|
|
2508
|
+
.bds2160FileInput-dropZone {
|
|
2374
2509
|
display: flex;
|
|
2375
2510
|
flex-direction: column;
|
|
2376
2511
|
align-items: center;
|
|
@@ -2384,40 +2519,40 @@
|
|
|
2384
2519
|
text-align: center;
|
|
2385
2520
|
transition: var(--bds-animation_transition);
|
|
2386
2521
|
}
|
|
2387
|
-
.
|
|
2522
|
+
.bds2160FileInput-dropZone:focus-within {
|
|
2388
2523
|
outline: var(--bds-outline_default);
|
|
2389
2524
|
outline-offset: var(--bds-outline_offset);
|
|
2390
2525
|
border-color: var(--fileInput_border-color, currentcolor);
|
|
2391
2526
|
}
|
|
2392
|
-
.
|
|
2527
|
+
.bds2160FileInput-isDragging {
|
|
2393
2528
|
border-color: currentcolor;
|
|
2394
2529
|
background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
|
|
2395
2530
|
}
|
|
2396
|
-
.
|
|
2531
|
+
.bds2160FileInput-hasError {
|
|
2397
2532
|
border-color: var(--bds-color_error);
|
|
2398
2533
|
}
|
|
2399
|
-
.
|
|
2534
|
+
.bds2160FileInput-isDisabled {
|
|
2400
2535
|
opacity: 0.5;
|
|
2401
2536
|
cursor: not-allowed;
|
|
2402
2537
|
}
|
|
2403
|
-
.
|
|
2538
|
+
.bds2160FileInput-icon {
|
|
2404
2539
|
inline-size: 2rem;
|
|
2405
2540
|
block-size: 2rem;
|
|
2406
2541
|
flex-shrink: 0;
|
|
2407
2542
|
}
|
|
2408
|
-
.
|
|
2543
|
+
.bds2160FileInput-prompt {
|
|
2409
2544
|
font-size: var(--fileInput_font-size, var(--bds-font_size--body));
|
|
2410
2545
|
color: var(--bds-color_on-bg);
|
|
2411
2546
|
}
|
|
2412
|
-
.
|
|
2547
|
+
.bds2160FileInput-prompt strong {
|
|
2413
2548
|
color: var(--bds-color_interactive_on-bg);
|
|
2414
2549
|
font-weight: var(--bds-font_weight--semibold);
|
|
2415
2550
|
}
|
|
2416
|
-
.
|
|
2551
|
+
.bds2160FileInput-acceptHint {
|
|
2417
2552
|
font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
|
|
2418
2553
|
color: var(--bds-color_on-bg);
|
|
2419
2554
|
}
|
|
2420
|
-
.
|
|
2555
|
+
.bds2160FileInput-hiddenInput {
|
|
2421
2556
|
position: absolute;
|
|
2422
2557
|
inline-size: 1px;
|
|
2423
2558
|
block-size: 1px;
|
|
@@ -2427,7 +2562,7 @@
|
|
|
2427
2562
|
border: 0;
|
|
2428
2563
|
}
|
|
2429
2564
|
@media (hover: hover) and (pointer: fine) {
|
|
2430
|
-
.
|
|
2565
|
+
.bds2160FileInput-dropZone:not(.bds2160FileInput-isDisabled):hover {
|
|
2431
2566
|
border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
|
|
2432
2567
|
background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
|
|
2433
2568
|
}
|
|
@@ -2435,13 +2570,13 @@
|
|
|
2435
2570
|
}
|
|
2436
2571
|
|
|
2437
2572
|
/* src/components/interaction/form/FormInput/FormInput.module.css */
|
|
2438
|
-
@layer boostdev.
|
|
2439
|
-
.
|
|
2573
|
+
@layer boostdev.bds2160FormInput-component {
|
|
2574
|
+
.bds2160FormInput-formGroup {
|
|
2440
2575
|
--labelPosition: 0;
|
|
2441
2576
|
display: flex;
|
|
2442
2577
|
flex-direction: column;
|
|
2443
2578
|
}
|
|
2444
|
-
.
|
|
2579
|
+
.bds2160FormInput-input {
|
|
2445
2580
|
font-family: var(--formInput_font-family, var(--bds-font_family--body));
|
|
2446
2581
|
font-size: var(--formInput_font-size, var(--bds-font_size--body));
|
|
2447
2582
|
padding: var(--formInput_padding, var(--bds-space_s));
|
|
@@ -2454,29 +2589,30 @@
|
|
|
2454
2589
|
background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
|
|
2455
2590
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2456
2591
|
}
|
|
2457
|
-
.
|
|
2592
|
+
.bds2160FormInput-input:focus {
|
|
2458
2593
|
--bdc_color: var(--bdc_color--focus);
|
|
2459
2594
|
}
|
|
2460
|
-
.
|
|
2595
|
+
.bds2160FormInput-input:focus-visible {
|
|
2461
2596
|
outline: var(--bds-outline_default);
|
|
2462
2597
|
outline-offset: var(--bds-outline_offset);
|
|
2463
2598
|
}
|
|
2464
|
-
.
|
|
2599
|
+
.bds2160FormInput-input:disabled {
|
|
2465
2600
|
cursor: not-allowed;
|
|
2466
2601
|
opacity: 0.5;
|
|
2467
2602
|
}
|
|
2468
|
-
.
|
|
2603
|
+
.bds2160FormInput-inputError {
|
|
2469
2604
|
--bdc_color: var(--bdc_color--error);
|
|
2605
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2470
2606
|
}
|
|
2471
2607
|
}
|
|
2472
2608
|
|
|
2473
2609
|
/* src/components/interaction/form/NumberInput/NumberInput.module.css */
|
|
2474
|
-
@layer boostdev.
|
|
2475
|
-
.
|
|
2610
|
+
@layer boostdev.bds2160NumberInput-component {
|
|
2611
|
+
.bds2160NumberInput-formGroup {
|
|
2476
2612
|
display: flex;
|
|
2477
2613
|
flex-direction: column;
|
|
2478
2614
|
}
|
|
2479
|
-
.
|
|
2615
|
+
.bds2160NumberInput-inputRow {
|
|
2480
2616
|
display: flex;
|
|
2481
2617
|
align-items: stretch;
|
|
2482
2618
|
border: var(--numberInput_border, none);
|
|
@@ -2488,14 +2624,14 @@
|
|
|
2488
2624
|
overflow: hidden;
|
|
2489
2625
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2490
2626
|
}
|
|
2491
|
-
.
|
|
2627
|
+
.bds2160NumberInput-inputRow:focus-within {
|
|
2492
2628
|
--bdc_color: var(--bdc_color--focus);
|
|
2493
2629
|
}
|
|
2494
|
-
.
|
|
2630
|
+
.bds2160NumberInput-inputRow:focus-within:has(:focus-visible) {
|
|
2495
2631
|
outline: var(--bds-outline_default);
|
|
2496
2632
|
outline-offset: var(--bds-outline_offset);
|
|
2497
2633
|
}
|
|
2498
|
-
.
|
|
2634
|
+
.bds2160NumberInput-input {
|
|
2499
2635
|
flex: 1;
|
|
2500
2636
|
border: none;
|
|
2501
2637
|
outline: none;
|
|
@@ -2508,14 +2644,15 @@
|
|
|
2508
2644
|
min-inline-size: 0;
|
|
2509
2645
|
appearance: textfield;
|
|
2510
2646
|
}
|
|
2511
|
-
.
|
|
2512
|
-
.
|
|
2647
|
+
.bds2160NumberInput-input::-webkit-inner-spin-button,
|
|
2648
|
+
.bds2160NumberInput-input::-webkit-outer-spin-button {
|
|
2513
2649
|
appearance: none;
|
|
2514
2650
|
}
|
|
2515
|
-
.
|
|
2651
|
+
.bds2160NumberInput-inputError {
|
|
2516
2652
|
--bdc_color: var(--bdc_color--error);
|
|
2653
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2517
2654
|
}
|
|
2518
|
-
.
|
|
2655
|
+
.bds2160NumberInput-stepper {
|
|
2519
2656
|
all: unset;
|
|
2520
2657
|
display: flex;
|
|
2521
2658
|
align-items: center;
|
|
@@ -2528,25 +2665,25 @@
|
|
|
2528
2665
|
transition: var(--bds-animation_transition);
|
|
2529
2666
|
flex-shrink: 0;
|
|
2530
2667
|
}
|
|
2531
|
-
.
|
|
2668
|
+
.bds2160NumberInput-stepper svg {
|
|
2532
2669
|
inline-size: 1rem;
|
|
2533
2670
|
block-size: 1rem;
|
|
2534
2671
|
color: var(--numberInput_stepper-color, var(--bds-color_interactive));
|
|
2535
2672
|
}
|
|
2536
|
-
.
|
|
2673
|
+
.bds2160NumberInput-stepper:first-child {
|
|
2537
2674
|
border-start-start-radius: var(--_radius);
|
|
2538
2675
|
border-end-start-radius: var(--_radius);
|
|
2539
2676
|
}
|
|
2540
|
-
.
|
|
2677
|
+
.bds2160NumberInput-stepper:last-child {
|
|
2541
2678
|
border-start-end-radius: var(--_radius);
|
|
2542
2679
|
border-end-end-radius: var(--_radius);
|
|
2543
2680
|
}
|
|
2544
|
-
.
|
|
2681
|
+
.bds2160NumberInput-stepper:disabled {
|
|
2545
2682
|
opacity: 0.4;
|
|
2546
2683
|
cursor: not-allowed;
|
|
2547
2684
|
}
|
|
2548
2685
|
@media (hover: hover) and (pointer: fine) {
|
|
2549
|
-
.
|
|
2686
|
+
.bds2160NumberInput-stepper:not(:disabled):hover {
|
|
2550
2687
|
background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
|
|
2551
2688
|
opacity: var(--numberInput_stepper-opacity--hover, 0.7);
|
|
2552
2689
|
}
|
|
@@ -2554,30 +2691,30 @@
|
|
|
2554
2691
|
}
|
|
2555
2692
|
|
|
2556
2693
|
/* src/components/interaction/form/Radio/Radio.module.css */
|
|
2557
|
-
@layer boostdev.
|
|
2558
|
-
.
|
|
2694
|
+
@layer boostdev.bds2160Radio-component {
|
|
2695
|
+
.bds2160Radio-radioGroup {
|
|
2559
2696
|
--radio_size: calc(var(--bds-space_s) * 2);
|
|
2560
2697
|
--inputSize: var(--radio_size);
|
|
2561
2698
|
display: flex;
|
|
2562
2699
|
flex-direction: column;
|
|
2563
2700
|
}
|
|
2564
|
-
.
|
|
2701
|
+
.bds2160Radio-inputWrapper {
|
|
2565
2702
|
display: flex;
|
|
2566
2703
|
align-items: flex-start;
|
|
2567
2704
|
gap: var(--bds-space_xs);
|
|
2568
2705
|
}
|
|
2569
|
-
.
|
|
2706
|
+
.bds2160Radio-textWrapper {
|
|
2570
2707
|
display: flex;
|
|
2571
2708
|
flex-direction: column;
|
|
2572
2709
|
gap: var(--bds-space_xxxs);
|
|
2573
2710
|
padding-block-start: var(--bds-space_xxxs);
|
|
2574
2711
|
}
|
|
2575
|
-
.
|
|
2712
|
+
.bds2160Radio-description {
|
|
2576
2713
|
font-size: var(--bds-font_size--body--s);
|
|
2577
2714
|
color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
|
|
2578
2715
|
line-height: var(--bds-font_line-height--body);
|
|
2579
2716
|
}
|
|
2580
|
-
.
|
|
2717
|
+
.bds2160Radio-radio {
|
|
2581
2718
|
flex-shrink: 0;
|
|
2582
2719
|
margin-block-start: var(--radio_offset, 0.2em);
|
|
2583
2720
|
inline-size: var(--radio_size);
|
|
@@ -2594,7 +2731,7 @@
|
|
|
2594
2731
|
position: relative;
|
|
2595
2732
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2596
2733
|
}
|
|
2597
|
-
.
|
|
2734
|
+
.bds2160Radio-radio:checked {
|
|
2598
2735
|
background:
|
|
2599
2736
|
radial-gradient(
|
|
2600
2737
|
circle,
|
|
@@ -2602,29 +2739,30 @@
|
|
|
2602
2739
|
var(--radio_color_bg, var(--bds-color_bg)) 42%);
|
|
2603
2740
|
--bdc_color: var(--radio_color-active, var(--bdc-color_active));
|
|
2604
2741
|
}
|
|
2605
|
-
.
|
|
2742
|
+
.bds2160Radio-radio:focus {
|
|
2606
2743
|
--bdc_color: var(--bdc_color--focus);
|
|
2607
2744
|
}
|
|
2608
|
-
.
|
|
2745
|
+
.bds2160Radio-radio:focus-visible {
|
|
2609
2746
|
outline: var(--bds-outline_default);
|
|
2610
2747
|
outline-offset: var(--bds-outline_offset);
|
|
2611
2748
|
}
|
|
2612
|
-
.
|
|
2749
|
+
.bds2160Radio-radio:disabled {
|
|
2613
2750
|
cursor: not-allowed;
|
|
2614
2751
|
opacity: 0.5;
|
|
2615
2752
|
}
|
|
2616
|
-
.
|
|
2753
|
+
.bds2160Radio-radio:disabled ~ .bds2160Radio-textWrapper {
|
|
2617
2754
|
opacity: 0.5;
|
|
2618
2755
|
cursor: not-allowed;
|
|
2619
2756
|
}
|
|
2620
|
-
.
|
|
2757
|
+
.bds2160Radio-radioError {
|
|
2621
2758
|
--bdc_color: var(--bdc_color--error);
|
|
2759
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2622
2760
|
}
|
|
2623
2761
|
}
|
|
2624
2762
|
|
|
2625
2763
|
/* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
|
|
2626
|
-
@layer boostdev.
|
|
2627
|
-
.
|
|
2764
|
+
@layer boostdev.bds2160RadioGroup-component {
|
|
2765
|
+
.bds2160RadioGroup-group {
|
|
2628
2766
|
border: none;
|
|
2629
2767
|
padding: 0;
|
|
2630
2768
|
margin: 0;
|
|
@@ -2632,7 +2770,7 @@
|
|
|
2632
2770
|
flex-direction: column;
|
|
2633
2771
|
gap: var(--radioGroup_gap, var(--bds-space_xs));
|
|
2634
2772
|
}
|
|
2635
|
-
.
|
|
2773
|
+
.bds2160RadioGroup-legend {
|
|
2636
2774
|
font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
|
|
2637
2775
|
font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
|
|
2638
2776
|
font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
|
|
@@ -2640,10 +2778,10 @@
|
|
|
2640
2778
|
padding: 0;
|
|
2641
2779
|
margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
|
|
2642
2780
|
}
|
|
2643
|
-
.
|
|
2781
|
+
.bds2160RadioGroup-required {
|
|
2644
2782
|
color: var(--radioGroup_required-color, var(--bds-color_error));
|
|
2645
2783
|
}
|
|
2646
|
-
.
|
|
2784
|
+
.bds2160RadioGroup-requiredLabel {
|
|
2647
2785
|
position: absolute;
|
|
2648
2786
|
inline-size: 1px;
|
|
2649
2787
|
block-size: 1px;
|
|
@@ -2654,16 +2792,20 @@
|
|
|
2654
2792
|
white-space: nowrap;
|
|
2655
2793
|
border-width: 0;
|
|
2656
2794
|
}
|
|
2657
|
-
.
|
|
2795
|
+
.bds2160RadioGroup-items {
|
|
2658
2796
|
display: flex;
|
|
2659
2797
|
flex-direction: column;
|
|
2660
2798
|
gap: var(--radioGroup_items-gap, var(--bds-space_xs));
|
|
2661
2799
|
}
|
|
2800
|
+
.bds2160RadioGroup-groupError input {
|
|
2801
|
+
--bdc_color: var(--bdc_color--error);
|
|
2802
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2803
|
+
}
|
|
2662
2804
|
}
|
|
2663
2805
|
|
|
2664
2806
|
/* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
|
|
2665
|
-
@layer boostdev.
|
|
2666
|
-
.
|
|
2807
|
+
@layer boostdev.bds2160SegmentedControl-component {
|
|
2808
|
+
.bds2160SegmentedControl-control {
|
|
2667
2809
|
position: relative;
|
|
2668
2810
|
display: inline-grid;
|
|
2669
2811
|
grid-auto-flow: column;
|
|
@@ -2674,11 +2816,11 @@
|
|
|
2674
2816
|
gap: 0;
|
|
2675
2817
|
--control_dir: 1;
|
|
2676
2818
|
}
|
|
2677
|
-
[dir=rtl] .
|
|
2678
|
-
.
|
|
2819
|
+
[dir=rtl] .bds2160SegmentedControl-control,
|
|
2820
|
+
.bds2160SegmentedControl-control[dir=rtl] {
|
|
2679
2821
|
--control_dir: -1;
|
|
2680
2822
|
}
|
|
2681
|
-
.
|
|
2823
|
+
.bds2160SegmentedControl-thumb {
|
|
2682
2824
|
position: absolute;
|
|
2683
2825
|
inset-block: var(--control_track-pad, var(--bds-space_xxs));
|
|
2684
2826
|
inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
|
|
@@ -2690,7 +2832,7 @@
|
|
|
2690
2832
|
transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
|
|
2691
2833
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2692
2834
|
}
|
|
2693
|
-
.
|
|
2835
|
+
.bds2160SegmentedControl-indicator {
|
|
2694
2836
|
position: absolute;
|
|
2695
2837
|
inset-block: var(--control_track-pad, var(--bds-space_xxs));
|
|
2696
2838
|
inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
|
|
@@ -2702,7 +2844,7 @@
|
|
|
2702
2844
|
transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
|
|
2703
2845
|
transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2704
2846
|
}
|
|
2705
|
-
.
|
|
2847
|
+
.bds2160SegmentedControl-item {
|
|
2706
2848
|
position: relative;
|
|
2707
2849
|
z-index: 1;
|
|
2708
2850
|
display: flex;
|
|
@@ -2723,73 +2865,73 @@
|
|
|
2723
2865
|
border: none;
|
|
2724
2866
|
outline: none;
|
|
2725
2867
|
}
|
|
2726
|
-
.
|
|
2868
|
+
.bds2160SegmentedControl-item:focus-visible {
|
|
2727
2869
|
outline: var(--bds-outline_default);
|
|
2728
2870
|
outline-offset: calc(var(--bds-outline_offset) * -1);
|
|
2729
2871
|
border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
|
|
2730
2872
|
}
|
|
2731
|
-
.
|
|
2873
|
+
.bds2160SegmentedControl-item.bds2160SegmentedControl---active {
|
|
2732
2874
|
color: var(--control_label-color--active, var(--bds-color_on-interactive));
|
|
2733
2875
|
}
|
|
2734
|
-
.
|
|
2876
|
+
.bds2160SegmentedControl-item.bds2160SegmentedControl---disabled {
|
|
2735
2877
|
opacity: 0.5;
|
|
2736
2878
|
cursor: not-allowed;
|
|
2737
2879
|
pointer-events: none;
|
|
2738
2880
|
}
|
|
2739
|
-
.
|
|
2881
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---size_small .bds2160SegmentedControl-item {
|
|
2740
2882
|
padding: var(--bds-space_xxs) var(--bds-space_s);
|
|
2741
2883
|
font-size: var(--bds-font_size--body--s);
|
|
2742
2884
|
}
|
|
2743
|
-
.
|
|
2885
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---size_large .bds2160SegmentedControl-item {
|
|
2744
2886
|
padding: var(--bds-space_s) var(--bds-space_m);
|
|
2745
2887
|
white-space: normal;
|
|
2746
2888
|
text-align: center;
|
|
2747
2889
|
}
|
|
2748
|
-
.
|
|
2890
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline {
|
|
2749
2891
|
--control_label-color--active: var(--bds-color_interactive);
|
|
2750
2892
|
}
|
|
2751
|
-
.
|
|
2893
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-thumb {
|
|
2752
2894
|
display: none;
|
|
2753
2895
|
}
|
|
2754
|
-
.
|
|
2896
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item {
|
|
2755
2897
|
background-color: var(--control_item-bg, transparent);
|
|
2756
2898
|
}
|
|
2757
|
-
.
|
|
2899
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item.bds2160SegmentedControl---active {
|
|
2758
2900
|
background-color: var(--control_item-bg--active, var(--bds-color_bg));
|
|
2759
2901
|
}
|
|
2760
|
-
.
|
|
2902
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-indicator {
|
|
2761
2903
|
display: block;
|
|
2762
2904
|
box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
|
|
2763
2905
|
}
|
|
2764
|
-
.
|
|
2765
|
-
.
|
|
2906
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-thumb,
|
|
2907
|
+
.bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-indicator {
|
|
2766
2908
|
display: none;
|
|
2767
2909
|
}
|
|
2768
2910
|
@media (hover: hover) and (pointer: fine) {
|
|
2769
|
-
.
|
|
2911
|
+
.bds2160SegmentedControl-item:not(.bds2160SegmentedControl---active, .bds2160SegmentedControl---disabled):hover {
|
|
2770
2912
|
color: var(--control_label-color--hover, var(--bds-color_on-bg));
|
|
2771
2913
|
}
|
|
2772
2914
|
}
|
|
2773
2915
|
@media (prefers-reduced-motion: reduce) {
|
|
2774
|
-
.
|
|
2775
|
-
.
|
|
2916
|
+
.bds2160SegmentedControl-thumb,
|
|
2917
|
+
.bds2160SegmentedControl-indicator {
|
|
2776
2918
|
transition: none;
|
|
2777
2919
|
}
|
|
2778
2920
|
}
|
|
2779
2921
|
}
|
|
2780
2922
|
|
|
2781
2923
|
/* src/components/interaction/form/Select/Select.module.css */
|
|
2782
|
-
@layer boostdev.
|
|
2783
|
-
.
|
|
2924
|
+
@layer boostdev.bds2160Select-component {
|
|
2925
|
+
.bds2160Select-formGroup {
|
|
2784
2926
|
display: flex;
|
|
2785
2927
|
flex-direction: column;
|
|
2786
2928
|
}
|
|
2787
|
-
.
|
|
2929
|
+
.bds2160Select-selectWrapper {
|
|
2788
2930
|
position: relative;
|
|
2789
2931
|
display: flex;
|
|
2790
2932
|
align-items: center;
|
|
2791
2933
|
}
|
|
2792
|
-
.
|
|
2934
|
+
.bds2160Select-select {
|
|
2793
2935
|
appearance: none;
|
|
2794
2936
|
inline-size: 100%;
|
|
2795
2937
|
font-family: var(--bds-font_family--body);
|
|
@@ -2806,21 +2948,22 @@
|
|
|
2806
2948
|
cursor: pointer;
|
|
2807
2949
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2808
2950
|
}
|
|
2809
|
-
.
|
|
2951
|
+
.bds2160Select-select:focus {
|
|
2810
2952
|
--bdc_color: var(--bdc_color--focus);
|
|
2811
2953
|
}
|
|
2812
|
-
.
|
|
2954
|
+
.bds2160Select-select:focus-visible {
|
|
2813
2955
|
outline: var(--bds-outline_default);
|
|
2814
2956
|
outline-offset: var(--bds-outline_offset);
|
|
2815
2957
|
}
|
|
2816
|
-
.
|
|
2958
|
+
.bds2160Select-select:disabled {
|
|
2817
2959
|
opacity: 0.5;
|
|
2818
2960
|
cursor: not-allowed;
|
|
2819
2961
|
}
|
|
2820
|
-
.
|
|
2962
|
+
.bds2160Select-selectError {
|
|
2821
2963
|
--bdc_color: var(--bdc_color--error);
|
|
2964
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
2822
2965
|
}
|
|
2823
|
-
.
|
|
2966
|
+
.bds2160Select-chevron {
|
|
2824
2967
|
position: absolute;
|
|
2825
2968
|
inset-inline-end: var(--bds-space_s);
|
|
2826
2969
|
display: flex;
|
|
@@ -2828,30 +2971,30 @@
|
|
|
2828
2971
|
pointer-events: none;
|
|
2829
2972
|
color: var(--select_chevron-color, var(--bds-color_interactive));
|
|
2830
2973
|
}
|
|
2831
|
-
.
|
|
2974
|
+
.bds2160Select-chevron svg {
|
|
2832
2975
|
inline-size: var(--select_chevron-size, 1rem);
|
|
2833
2976
|
block-size: var(--select_chevron-size, 1rem);
|
|
2834
2977
|
}
|
|
2835
2978
|
}
|
|
2836
2979
|
|
|
2837
2980
|
/* src/components/interaction/form/Slider/Slider.module.css */
|
|
2838
|
-
@layer boostdev.
|
|
2839
|
-
.
|
|
2981
|
+
@layer boostdev.bds2160Slider-component {
|
|
2982
|
+
.bds2160Slider-formGroup {
|
|
2840
2983
|
display: flex;
|
|
2841
2984
|
flex-direction: column;
|
|
2842
2985
|
gap: var(--bds-space_xxs);
|
|
2843
2986
|
}
|
|
2844
|
-
.
|
|
2987
|
+
.bds2160Slider-labelRow {
|
|
2845
2988
|
display: flex;
|
|
2846
2989
|
justify-content: space-between;
|
|
2847
2990
|
align-items: baseline;
|
|
2848
2991
|
}
|
|
2849
|
-
.
|
|
2992
|
+
.bds2160Slider-value {
|
|
2850
2993
|
font-size: var(--bds-font_size--body--s);
|
|
2851
2994
|
font-variant-numeric: tabular-nums;
|
|
2852
2995
|
color: var(--bds-color_on-bg--subtle);
|
|
2853
2996
|
}
|
|
2854
|
-
.
|
|
2997
|
+
.bds2160Slider-slider {
|
|
2855
2998
|
--slider_fill: 0%;
|
|
2856
2999
|
color: var(--slider_color, var(--bds-color_on-bg));
|
|
2857
3000
|
appearance: none;
|
|
@@ -2868,7 +3011,7 @@
|
|
|
2868
3011
|
cursor: pointer;
|
|
2869
3012
|
transition: var(--bds-animation_transition);
|
|
2870
3013
|
}
|
|
2871
|
-
.
|
|
3014
|
+
.bds2160Slider-slider:dir(rtl) {
|
|
2872
3015
|
background:
|
|
2873
3016
|
linear-gradient(
|
|
2874
3017
|
to left,
|
|
@@ -2877,16 +3020,16 @@
|
|
|
2877
3020
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
|
|
2878
3021
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
|
|
2879
3022
|
}
|
|
2880
|
-
.
|
|
3023
|
+
.bds2160Slider-slider:focus-visible {
|
|
2881
3024
|
outline: var(--bds-outline_default);
|
|
2882
3025
|
outline-offset: var(--bds-outline_offset);
|
|
2883
3026
|
border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
|
|
2884
3027
|
}
|
|
2885
|
-
.
|
|
3028
|
+
.bds2160Slider-slider:disabled {
|
|
2886
3029
|
opacity: 0.4;
|
|
2887
3030
|
cursor: not-allowed;
|
|
2888
3031
|
}
|
|
2889
|
-
.
|
|
3032
|
+
.bds2160Slider-slider::-webkit-slider-thumb {
|
|
2890
3033
|
appearance: none;
|
|
2891
3034
|
inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
|
|
2892
3035
|
block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
|
|
@@ -2896,7 +3039,7 @@
|
|
|
2896
3039
|
transition: var(--bds-animation_transition);
|
|
2897
3040
|
cursor: pointer;
|
|
2898
3041
|
}
|
|
2899
|
-
.
|
|
3042
|
+
.bds2160Slider-slider::-moz-range-thumb {
|
|
2900
3043
|
inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
|
|
2901
3044
|
block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
|
|
2902
3045
|
border: none;
|
|
@@ -2905,7 +3048,7 @@
|
|
|
2905
3048
|
box-shadow: var(--bds-shadow_s);
|
|
2906
3049
|
cursor: pointer;
|
|
2907
3050
|
}
|
|
2908
|
-
.
|
|
3051
|
+
.bds2160Slider-sliderError {
|
|
2909
3052
|
background:
|
|
2910
3053
|
linear-gradient(
|
|
2911
3054
|
to right,
|
|
@@ -2914,7 +3057,7 @@
|
|
|
2914
3057
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
|
|
2915
3058
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
|
|
2916
3059
|
}
|
|
2917
|
-
.
|
|
3060
|
+
.bds2160Slider-sliderError:dir(rtl) {
|
|
2918
3061
|
background:
|
|
2919
3062
|
linear-gradient(
|
|
2920
3063
|
to left,
|
|
@@ -2923,43 +3066,43 @@
|
|
|
2923
3066
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
|
|
2924
3067
|
var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
|
|
2925
3068
|
}
|
|
2926
|
-
.
|
|
3069
|
+
.bds2160Slider-sliderError::-webkit-slider-thumb {
|
|
2927
3070
|
background-color: var(--slider_color--error, var(--bds-color_error));
|
|
2928
3071
|
}
|
|
2929
|
-
.
|
|
3072
|
+
.bds2160Slider-sliderError::-moz-range-thumb {
|
|
2930
3073
|
background-color: var(--slider_color--error, var(--bds-color_error));
|
|
2931
3074
|
}
|
|
2932
3075
|
@media (prefers-reduced-motion: reduce) {
|
|
2933
|
-
.
|
|
2934
|
-
.
|
|
2935
|
-
.
|
|
3076
|
+
.bds2160Slider-slider,
|
|
3077
|
+
.bds2160Slider-slider::-webkit-slider-thumb,
|
|
3078
|
+
.bds2160Slider-slider::-moz-range-thumb {
|
|
2936
3079
|
transition: none;
|
|
2937
3080
|
}
|
|
2938
3081
|
}
|
|
2939
3082
|
}
|
|
2940
3083
|
|
|
2941
3084
|
/* src/components/interaction/form/Switch/Switch.module.css */
|
|
2942
|
-
@layer boostdev.
|
|
2943
|
-
.
|
|
3085
|
+
@layer boostdev.bds2160Switch-component {
|
|
3086
|
+
.bds2160Switch-switchGroup {
|
|
2944
3087
|
color: var(--switch_color, var(--bds-color_on-bg));
|
|
2945
3088
|
display: flex;
|
|
2946
3089
|
flex-direction: column;
|
|
2947
3090
|
}
|
|
2948
|
-
.
|
|
3091
|
+
.bds2160Switch-switchGroup.bds2160Switch---size_small {
|
|
2949
3092
|
--switch_thumb-size: 1em;
|
|
2950
3093
|
}
|
|
2951
|
-
.
|
|
3094
|
+
.bds2160Switch-switchGroup.bds2160Switch---size_medium {
|
|
2952
3095
|
--switch_thumb-size: 1.25em;
|
|
2953
3096
|
}
|
|
2954
|
-
.
|
|
3097
|
+
.bds2160Switch-switchGroup.bds2160Switch---size_large {
|
|
2955
3098
|
--switch_thumb-size: 1.5em;
|
|
2956
3099
|
}
|
|
2957
|
-
.
|
|
3100
|
+
.bds2160Switch-inputWrapper {
|
|
2958
3101
|
display: flex;
|
|
2959
3102
|
align-items: center;
|
|
2960
3103
|
gap: var(--bds-space_xs);
|
|
2961
3104
|
}
|
|
2962
|
-
.
|
|
3105
|
+
.bds2160Switch-trackWrapper {
|
|
2963
3106
|
position: relative;
|
|
2964
3107
|
display: inline-flex;
|
|
2965
3108
|
align-items: center;
|
|
@@ -2967,7 +3110,7 @@
|
|
|
2967
3110
|
inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
|
|
2968
3111
|
block-size: calc(var(--switch_thumb-size, 1.25em) + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
|
|
2969
3112
|
}
|
|
2970
|
-
.
|
|
3113
|
+
.bds2160Switch-switch {
|
|
2971
3114
|
position: absolute;
|
|
2972
3115
|
inset: 0;
|
|
2973
3116
|
appearance: none;
|
|
@@ -2978,10 +3121,10 @@
|
|
|
2978
3121
|
cursor: pointer;
|
|
2979
3122
|
z-index: 1;
|
|
2980
3123
|
}
|
|
2981
|
-
.
|
|
3124
|
+
.bds2160Switch-switch:disabled {
|
|
2982
3125
|
cursor: not-allowed;
|
|
2983
3126
|
}
|
|
2984
|
-
.
|
|
3127
|
+
.bds2160Switch-track {
|
|
2985
3128
|
display: inline-flex;
|
|
2986
3129
|
align-items: center;
|
|
2987
3130
|
inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
|
|
@@ -2997,7 +3140,7 @@
|
|
|
2997
3140
|
transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
2998
3141
|
--bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
|
|
2999
3142
|
}
|
|
3000
|
-
.
|
|
3143
|
+
.bds2160Switch-thumb {
|
|
3001
3144
|
display: block;
|
|
3002
3145
|
inline-size: var(--switch_thumb-size, 1.25em);
|
|
3003
3146
|
block-size: var(--switch_thumb-size, 1.25em);
|
|
@@ -3007,43 +3150,44 @@
|
|
|
3007
3150
|
transition: var(--bds-animation_transition);
|
|
3008
3151
|
transform: translateX(0);
|
|
3009
3152
|
}
|
|
3010
|
-
.
|
|
3153
|
+
.bds2160Switch-switch.bds2160Switch-switchError + .bds2160Switch-track {
|
|
3011
3154
|
--bdc_color: var(--switch_border-color--error, var(--bds-color_error));
|
|
3155
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
3012
3156
|
}
|
|
3013
|
-
.
|
|
3157
|
+
.bds2160Switch-switch:checked + .bds2160Switch-track {
|
|
3014
3158
|
background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
|
|
3015
3159
|
--bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
|
|
3016
3160
|
}
|
|
3017
|
-
.
|
|
3161
|
+
.bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
|
|
3018
3162
|
background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
|
|
3019
3163
|
transform: translateX(var(--switch_thumb-size, 1.25em));
|
|
3020
3164
|
}
|
|
3021
|
-
[dir=rtl] .
|
|
3165
|
+
[dir=rtl] .bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
|
|
3022
3166
|
transform: translateX(calc(var(--switch_thumb-size, 1.25em) * -1));
|
|
3023
3167
|
}
|
|
3024
|
-
.
|
|
3168
|
+
.bds2160Switch-switch:focus-visible + .bds2160Switch-track {
|
|
3025
3169
|
outline: var(--bds-outline_default);
|
|
3026
3170
|
outline-offset: var(--bds-outline_offset);
|
|
3027
3171
|
border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
|
|
3028
3172
|
}
|
|
3029
|
-
.
|
|
3173
|
+
.bds2160Switch-switch:disabled + .bds2160Switch-track {
|
|
3030
3174
|
opacity: 0.4;
|
|
3031
3175
|
}
|
|
3032
3176
|
@media (prefers-reduced-motion: reduce) {
|
|
3033
|
-
.
|
|
3034
|
-
.
|
|
3177
|
+
.bds2160Switch-track,
|
|
3178
|
+
.bds2160Switch-thumb {
|
|
3035
3179
|
transition: none;
|
|
3036
3180
|
}
|
|
3037
3181
|
}
|
|
3038
3182
|
}
|
|
3039
3183
|
|
|
3040
3184
|
/* src/components/interaction/form/Textarea/Textarea.module.css */
|
|
3041
|
-
@layer boostdev.
|
|
3042
|
-
.
|
|
3185
|
+
@layer boostdev.bds2160Textarea-component {
|
|
3186
|
+
.bds2160Textarea-formGroup {
|
|
3043
3187
|
display: flex;
|
|
3044
3188
|
flex-direction: column;
|
|
3045
3189
|
}
|
|
3046
|
-
.
|
|
3190
|
+
.bds2160Textarea-textarea {
|
|
3047
3191
|
font-family: var(--textarea_font-family, var(--bds-font_family--body));
|
|
3048
3192
|
font-size: var(--textarea_font-size, var(--bds-font_size--body));
|
|
3049
3193
|
line-height: var(--textarea_line-height, var(--bds-font_line-height--body));
|
|
@@ -3059,65 +3203,66 @@
|
|
|
3059
3203
|
min-block-size: var(--textarea_min-block-size, calc(var(--bds-space_m) * 5));
|
|
3060
3204
|
transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
|
|
3061
3205
|
}
|
|
3062
|
-
.
|
|
3206
|
+
.bds2160Textarea-textarea:focus {
|
|
3063
3207
|
--bdc_color: var(--bdc_color--focus);
|
|
3064
3208
|
}
|
|
3065
|
-
.
|
|
3209
|
+
.bds2160Textarea-textarea:focus-visible {
|
|
3066
3210
|
outline: var(--bds-outline_default);
|
|
3067
3211
|
outline-offset: var(--bds-outline_offset);
|
|
3068
3212
|
}
|
|
3069
|
-
.
|
|
3213
|
+
.bds2160Textarea-textarea:disabled {
|
|
3070
3214
|
opacity: 0.5;
|
|
3071
3215
|
cursor: not-allowed;
|
|
3072
3216
|
resize: none;
|
|
3073
3217
|
}
|
|
3074
|
-
.
|
|
3218
|
+
.bds2160Textarea-textareaError {
|
|
3075
3219
|
--bdc_color: var(--bdc_color--error);
|
|
3220
|
+
--bdc-outline_width: var(--bdc-outline_width--error, 2px);
|
|
3076
3221
|
}
|
|
3077
3222
|
}
|
|
3078
3223
|
|
|
3079
3224
|
/* src/components/layout/ButtonGroup/ButtonGroup.module.css */
|
|
3080
|
-
@layer boostdev.
|
|
3081
|
-
.
|
|
3225
|
+
@layer boostdev.bds2160ButtonGroup-component {
|
|
3226
|
+
.bds2160ButtonGroup-buttonGroup {
|
|
3082
3227
|
container-type: inline-size;
|
|
3083
3228
|
container-name: button-group;
|
|
3084
3229
|
grid-column: var(--bds-grid_span-100);
|
|
3085
3230
|
inline-size: 100%;
|
|
3086
3231
|
}
|
|
3087
|
-
.
|
|
3232
|
+
.bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
|
|
3088
3233
|
position: relative;
|
|
3089
3234
|
display: flex;
|
|
3090
3235
|
flex-direction: column-reverse;
|
|
3091
3236
|
gap: var(--buttonGroup_gap, var(--bds-space_l));
|
|
3092
3237
|
align-items: center;
|
|
3093
3238
|
}
|
|
3094
|
-
.
|
|
3239
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
|
|
3095
3240
|
align-items: stretch;
|
|
3096
3241
|
}
|
|
3097
|
-
.
|
|
3098
|
-
.
|
|
3242
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container,
|
|
3243
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
|
|
3099
3244
|
align-items: center;
|
|
3100
3245
|
}
|
|
3101
|
-
.
|
|
3246
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
|
|
3102
3247
|
align-items: flex-start;
|
|
3103
3248
|
}
|
|
3104
3249
|
@supports (contain: inline-size) {
|
|
3105
3250
|
@container button-group (min-width: 30rem) {
|
|
3106
|
-
.
|
|
3251
|
+
.bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
|
|
3107
3252
|
flex-direction: row;
|
|
3108
3253
|
justify-content: space-between;
|
|
3109
3254
|
}
|
|
3110
|
-
.
|
|
3111
|
-
.
|
|
3255
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container > :first-child:last-child,
|
|
3256
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container > :first-child:last-child {
|
|
3112
3257
|
margin-inline-start: auto;
|
|
3113
3258
|
}
|
|
3114
|
-
.
|
|
3259
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
|
|
3115
3260
|
justify-content: center;
|
|
3116
3261
|
}
|
|
3117
|
-
.
|
|
3262
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
|
|
3118
3263
|
justify-content: flex-end;
|
|
3119
3264
|
}
|
|
3120
|
-
.
|
|
3265
|
+
.bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
|
|
3121
3266
|
justify-content: flex-start;
|
|
3122
3267
|
align-items: center;
|
|
3123
3268
|
}
|
|
@@ -3126,208 +3271,223 @@
|
|
|
3126
3271
|
}
|
|
3127
3272
|
|
|
3128
3273
|
/* src/components/layout/Card/Card.module.css */
|
|
3129
|
-
@layer boostdev.
|
|
3130
|
-
.
|
|
3274
|
+
@layer boostdev.bds2160Card-component {
|
|
3275
|
+
.bds2160Card-card {
|
|
3131
3276
|
background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
|
|
3132
3277
|
color: var(--card_on-color, var(--bds-color_on-bg));
|
|
3133
3278
|
border-radius: var(--card_radius, var(--bds-border_radius--m));
|
|
3134
3279
|
transition: var(--card_transition, var(--bds-animation_transition));
|
|
3135
3280
|
position: relative;
|
|
3136
3281
|
}
|
|
3137
|
-
.
|
|
3282
|
+
.bds2160Card-card:is(button) {
|
|
3138
3283
|
border: none;
|
|
3139
3284
|
font: inherit;
|
|
3140
3285
|
text-align: inherit;
|
|
3141
3286
|
display: block;
|
|
3142
3287
|
inline-size: 100%;
|
|
3143
3288
|
}
|
|
3144
|
-
.
|
|
3289
|
+
.bds2160Card-card.bds2160Card---default {
|
|
3145
3290
|
box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
|
|
3146
3291
|
}
|
|
3147
|
-
.
|
|
3292
|
+
.bds2160Card-card.bds2160Card---elevated {
|
|
3148
3293
|
box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
|
|
3149
3294
|
}
|
|
3150
|
-
.
|
|
3295
|
+
.bds2160Card-card.bds2160Card---outlined {
|
|
3151
3296
|
border: var(--card_border, none);
|
|
3152
3297
|
--bdc_color: currentcolor;
|
|
3153
3298
|
box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
|
|
3154
3299
|
}
|
|
3155
|
-
.
|
|
3300
|
+
.bds2160Card-card.bds2160Card---clickable {
|
|
3156
3301
|
cursor: pointer;
|
|
3157
3302
|
}
|
|
3158
|
-
.
|
|
3303
|
+
.bds2160Card-card.bds2160Card---padding-none {
|
|
3159
3304
|
padding: var(--card_padding, 0);
|
|
3160
3305
|
}
|
|
3161
|
-
.
|
|
3306
|
+
.bds2160Card-card.bds2160Card---padding-small {
|
|
3162
3307
|
padding: var(--card_padding, var(--bds-space_s));
|
|
3163
3308
|
}
|
|
3164
|
-
.
|
|
3309
|
+
.bds2160Card-card.bds2160Card---padding-medium {
|
|
3165
3310
|
padding: var(--card_padding, var(--bds-space_m));
|
|
3166
3311
|
}
|
|
3167
|
-
.
|
|
3312
|
+
.bds2160Card-card.bds2160Card---padding-large {
|
|
3168
3313
|
padding: var(--card_padding, var(--bds-space_l));
|
|
3169
3314
|
}
|
|
3170
|
-
.
|
|
3315
|
+
.bds2160Card-card.bds2160Card---padding-extra-large {
|
|
3171
3316
|
padding: var(--card_padding, var(--bds-space_xl));
|
|
3172
3317
|
}
|
|
3173
|
-
.
|
|
3318
|
+
.bds2160Card-card.bds2160Card---text-start {
|
|
3174
3319
|
text-align: start;
|
|
3175
3320
|
}
|
|
3176
|
-
.
|
|
3321
|
+
.bds2160Card-card.bds2160Card---text-center {
|
|
3177
3322
|
text-align: center;
|
|
3178
3323
|
}
|
|
3179
|
-
.
|
|
3324
|
+
.bds2160Card-card.bds2160Card---text-end {
|
|
3180
3325
|
text-align: end;
|
|
3181
3326
|
}
|
|
3182
|
-
.
|
|
3327
|
+
.bds2160Card-card.bds2160Card---clickable:focus-visible {
|
|
3183
3328
|
outline: var(--bds-outline_default);
|
|
3184
3329
|
outline-offset: var(--bds-outline_offset);
|
|
3185
3330
|
}
|
|
3186
|
-
.
|
|
3331
|
+
.bds2160Card-card.bds2160Card---clickable:active {
|
|
3187
3332
|
transform: translateY(0);
|
|
3188
3333
|
box-shadow: var(--card_shadow--active, var(--bds-shadow_s));
|
|
3189
3334
|
}
|
|
3190
3335
|
@media (hover: hover) and (pointer: fine) {
|
|
3191
|
-
.
|
|
3336
|
+
.bds2160Card-card.bds2160Card---clickable:hover {
|
|
3192
3337
|
transform: translateY(-2px);
|
|
3193
3338
|
box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
|
|
3194
3339
|
}
|
|
3195
|
-
.
|
|
3340
|
+
.bds2160Card-card.bds2160Card---default:hover {
|
|
3196
3341
|
box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
|
|
3197
3342
|
}
|
|
3198
|
-
.
|
|
3343
|
+
.bds2160Card-card.bds2160Card---elevated:hover {
|
|
3199
3344
|
box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
|
|
3200
3345
|
}
|
|
3201
|
-
.
|
|
3346
|
+
.bds2160Card-card.bds2160Card---outlined:hover {
|
|
3202
3347
|
box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
|
|
3203
3348
|
}
|
|
3204
3349
|
}
|
|
3205
3350
|
@media (prefers-reduced-motion: reduce) {
|
|
3206
|
-
.
|
|
3351
|
+
.bds2160Card-card {
|
|
3207
3352
|
transition: none;
|
|
3208
3353
|
}
|
|
3209
|
-
.
|
|
3210
|
-
.
|
|
3354
|
+
.bds2160Card-card.bds2160Card---clickable:hover,
|
|
3355
|
+
.bds2160Card-card.bds2160Card---clickable:active {
|
|
3211
3356
|
transform: none;
|
|
3212
3357
|
}
|
|
3213
3358
|
}
|
|
3214
3359
|
}
|
|
3215
3360
|
|
|
3216
3361
|
/* src/components/layout/Grid/Grid.module.css */
|
|
3217
|
-
@layer boostdev.
|
|
3218
|
-
.
|
|
3362
|
+
@layer boostdev.bds2160Grid-component {
|
|
3363
|
+
.bds2160Grid-grid {
|
|
3219
3364
|
display: grid;
|
|
3220
3365
|
gap: var(--grid_gap, var(--bds-grid_gap));
|
|
3221
3366
|
}
|
|
3222
|
-
.
|
|
3367
|
+
.bds2160Grid-grid.bds2160Grid---main {
|
|
3223
3368
|
grid-template-columns: var(--bds-grid_template-columns);
|
|
3224
3369
|
}
|
|
3225
|
-
.
|
|
3370
|
+
.bds2160Grid-grid.bds2160Grid---page {
|
|
3226
3371
|
grid-template-columns: 1fr;
|
|
3227
3372
|
grid-column: 1 / -1;
|
|
3228
3373
|
}
|
|
3229
|
-
.
|
|
3374
|
+
.bds2160Grid-grid.bds2160Grid---funnel {
|
|
3230
3375
|
grid-template-columns: var(--bds-grid_template-columns);
|
|
3231
3376
|
max-inline-size: var(--bds-container_max-width--narrow);
|
|
3232
3377
|
margin-inline: auto;
|
|
3233
3378
|
}
|
|
3234
|
-
.
|
|
3379
|
+
.bds2160Grid-grid.bds2160Grid---custom {
|
|
3235
3380
|
grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
|
|
3236
3381
|
}
|
|
3237
|
-
.
|
|
3382
|
+
.bds2160Grid-grid.bds2160Grid---centered {
|
|
3238
3383
|
margin-inline: auto;
|
|
3239
3384
|
max-inline-size: var(--bds-container_max-width);
|
|
3240
3385
|
padding-inline: var(--bds-container_spacing-inline);
|
|
3241
3386
|
}
|
|
3242
|
-
.
|
|
3387
|
+
.bds2160Grid-item {
|
|
3243
3388
|
min-inline-size: 0;
|
|
3244
3389
|
}
|
|
3245
3390
|
@supports (grid-template-rows: masonry) {
|
|
3246
|
-
.
|
|
3391
|
+
.bds2160Grid-grid.bds2160Grid---masonry {
|
|
3247
3392
|
grid-template-rows: masonry;
|
|
3248
3393
|
}
|
|
3249
3394
|
}
|
|
3250
3395
|
@supports (display: grid-lanes) {
|
|
3251
|
-
.
|
|
3396
|
+
.bds2160Grid-grid.bds2160Grid---masonry {
|
|
3252
3397
|
display: grid-lanes;
|
|
3253
3398
|
}
|
|
3254
3399
|
}
|
|
3255
3400
|
}
|
|
3256
3401
|
|
|
3257
3402
|
/* src/components/layout/SectionHeader/SectionHeader.module.css */
|
|
3258
|
-
@layer boostdev.
|
|
3259
|
-
.
|
|
3403
|
+
@layer boostdev.bds2160SectionHeader-component {
|
|
3404
|
+
.bds2160SectionHeader-sectionHeader {
|
|
3260
3405
|
display: flex;
|
|
3261
3406
|
flex-direction: column;
|
|
3262
3407
|
gap: var(--sectionHeader_gap, var(--bds-space_m));
|
|
3263
3408
|
grid-column: var(--bds-grid_span-100);
|
|
3264
3409
|
}
|
|
3265
|
-
.
|
|
3410
|
+
.bds2160SectionHeader-title {
|
|
3266
3411
|
color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
|
|
3267
3412
|
margin: 0;
|
|
3268
|
-
font-family: var(--bds-font_family--
|
|
3413
|
+
font-family: var(--sectionHeader_title-font-family, var(--bds-font_family--heading));
|
|
3269
3414
|
}
|
|
3270
|
-
.
|
|
3271
|
-
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)));
|
|
3272
3417
|
margin: 0;
|
|
3273
3418
|
font-family: var(--bds-font_family--body);
|
|
3274
3419
|
font-weight: var(--bds-font_weight--medium);
|
|
3275
3420
|
}
|
|
3276
|
-
.
|
|
3421
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---start {
|
|
3277
3422
|
align-items: flex-start;
|
|
3278
3423
|
text-align: start;
|
|
3279
3424
|
}
|
|
3280
|
-
.
|
|
3425
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---center {
|
|
3281
3426
|
align-items: center;
|
|
3282
3427
|
text-align: center;
|
|
3283
3428
|
}
|
|
3284
|
-
.
|
|
3429
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---end {
|
|
3285
3430
|
align-items: flex-end;
|
|
3286
3431
|
text-align: end;
|
|
3287
3432
|
}
|
|
3288
|
-
.
|
|
3289
|
-
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));
|
|
3290
3435
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
3291
|
-
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)));
|
|
3292
3437
|
}
|
|
3293
|
-
.
|
|
3294
|
-
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));
|
|
3295
3440
|
line-height: var(--sectionHeader_subtitle-line-height, 1.3);
|
|
3296
3441
|
}
|
|
3297
|
-
.
|
|
3298
|
-
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));
|
|
3299
3444
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
3300
|
-
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)));
|
|
3301
3446
|
}
|
|
3302
|
-
.
|
|
3303
|
-
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));
|
|
3304
3449
|
line-height: var(--sectionHeader_subtitle-line-height, 1.4);
|
|
3305
3450
|
}
|
|
3306
|
-
.
|
|
3307
|
-
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));
|
|
3308
3453
|
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
|
|
3309
|
-
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)));
|
|
3310
3455
|
}
|
|
3311
|
-
.
|
|
3456
|
+
.bds2160SectionHeader-sectionHeader.bds2160SectionHeader---small .bds2160SectionHeader-subtitle {
|
|
3312
3457
|
font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
|
|
3313
3458
|
line-height: var(--sectionHeader_subtitle-line-height, 1.4);
|
|
3314
3459
|
}
|
|
3315
|
-
.
|
|
3316
|
-
font-size: var(--sectionHeader_title-size, var(--bds-font_size--
|
|
3317
|
-
line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--
|
|
3318
|
-
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)));
|
|
3319
3464
|
letter-spacing: var(--bds-font_tracking--tight);
|
|
3320
3465
|
}
|
|
3321
|
-
.
|
|
3322
|
-
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));
|
|
3323
3468
|
line-height: var(--sectionHeader_subtitle-line-height, 1.3);
|
|
3324
3469
|
font-weight: var(--bds-font_weight--medium);
|
|
3325
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
|
+
}
|
|
3326
3486
|
}
|
|
3327
3487
|
|
|
3328
3488
|
/* src/components/layout/IconWrapper/IconWrapper.module.css */
|
|
3329
|
-
@layer boostdev.
|
|
3330
|
-
.
|
|
3489
|
+
@layer boostdev.bds2160IconWrapper-component {
|
|
3490
|
+
.bds2160IconWrapper-wrapper {
|
|
3331
3491
|
inline-size: 2em;
|
|
3332
3492
|
block-size: 2em;
|
|
3333
3493
|
font-size: var(--icon-wrapper_size, 3em);
|
|
@@ -3343,7 +3503,7 @@
|
|
|
3343
3503
|
position: relative;
|
|
3344
3504
|
transition: var(--bds-animation_transition);
|
|
3345
3505
|
}
|
|
3346
|
-
.
|
|
3506
|
+
.bds2160IconWrapper-wrapper svg {
|
|
3347
3507
|
fill: currentcolor;
|
|
3348
3508
|
}
|
|
3349
3509
|
}
|