@flowstack-ui/brick 0.1.5 → 0.1.6
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/README.md +14 -2
- package/dist/agents/accordion.json +80 -0
- package/dist/agents/accordion.md +48 -0
- package/dist/agents/app-bar.json +5 -0
- package/dist/agents/app-bar.md +1 -0
- package/dist/agents/appearance.json +84 -0
- package/dist/agents/appearance.md +48 -0
- package/dist/agents/badge.json +64 -0
- package/dist/agents/badge.md +41 -0
- package/dist/agents/card.json +5 -0
- package/dist/agents/card.md +1 -0
- package/dist/agents/carousel.json +131 -0
- package/dist/agents/carousel.md +64 -0
- package/dist/agents/collapsible.json +81 -0
- package/dist/agents/collapsible.md +49 -0
- package/dist/agents/container.json +10 -4
- package/dist/agents/container.md +4 -2
- package/dist/agents/divider.json +1 -1
- package/dist/agents/divider.md +1 -1
- package/dist/agents/drawer.json +11 -1
- package/dist/agents/drawer.md +3 -0
- package/dist/agents/frame.json +74 -0
- package/dist/agents/frame.md +47 -0
- package/dist/agents/grid.json +9 -0
- package/dist/agents/grid.md +2 -0
- package/dist/agents/icon.json +98 -0
- package/dist/agents/icon.md +51 -0
- package/dist/agents/image.json +18 -2
- package/dist/agents/image.md +5 -1
- package/dist/agents/interface-composition.json +143 -6
- package/dist/agents/interface-composition.md +40 -6
- package/dist/agents/layer-selection.json +13 -1
- package/dist/agents/layer-selection.md +4 -0
- package/dist/agents/list.json +80 -0
- package/dist/agents/list.md +48 -0
- package/dist/agents/manifest.json +61 -1
- package/dist/agents/scroll-area.json +8 -3
- package/dist/agents/scroll-area.md +4 -3
- package/dist/agents/section.json +65 -0
- package/dist/agents/section.md +42 -0
- package/dist/agents/stack.json +29 -5
- package/dist/agents/stack.md +14 -4
- package/dist/agents/surface.json +42 -4
- package/dist/agents/surface.md +13 -2
- package/dist/agents/tabs.json +17 -2
- package/dist/agents/tabs.md +8 -1
- package/dist/agents/text.json +14 -4
- package/dist/agents/text.md +5 -3
- package/dist/agents/z-stack.json +66 -0
- package/dist/agents/z-stack.md +41 -0
- package/dist/appearance.d.ts +2 -0
- package/dist/appearance.d.ts.map +1 -0
- package/dist/appearance.js +2 -0
- package/dist/appearance.js.map +1 -0
- package/dist/carousel.d.ts +3 -0
- package/dist/carousel.d.ts.map +1 -0
- package/dist/carousel.js +3 -0
- package/dist/carousel.js.map +1 -0
- package/dist/components/_responsive-value/ResponsiveValue.d.ts +9 -0
- package/dist/components/_responsive-value/ResponsiveValue.d.ts.map +1 -0
- package/dist/components/_responsive-value/ResponsiveValue.js +22 -0
- package/dist/components/_responsive-value/ResponsiveValue.js.map +1 -0
- package/dist/components/appearance/Appearance.d.ts +14 -0
- package/dist/components/appearance/Appearance.d.ts.map +1 -0
- package/dist/components/appearance/Appearance.js +39 -0
- package/dist/components/appearance/Appearance.js.map +1 -0
- package/dist/components/appearance/index.d.ts +2 -0
- package/dist/components/appearance/index.d.ts.map +1 -0
- package/dist/components/appearance/index.js +2 -0
- package/dist/components/appearance/index.js.map +1 -0
- package/dist/components/card/Card.d.ts +1 -0
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +2 -1
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/carousel/Carousel.d.ts +80 -0
- package/dist/components/carousel/Carousel.d.ts.map +1 -0
- package/dist/components/carousel/Carousel.js +90 -0
- package/dist/components/carousel/Carousel.js.map +1 -0
- package/dist/components/carousel/index.d.ts +2 -0
- package/dist/components/carousel/index.d.ts.map +1 -0
- package/dist/components/carousel/index.js +2 -0
- package/dist/components/carousel/index.js.map +1 -0
- package/dist/components/divider/Divider.js +2 -2
- package/dist/components/divider/Divider.js.map +1 -1
- package/dist/components/frame/Frame.d.ts +28 -0
- package/dist/components/frame/Frame.d.ts.map +1 -0
- package/dist/components/frame/Frame.js +84 -0
- package/dist/components/frame/Frame.js.map +1 -0
- package/dist/components/frame/index.d.ts +2 -0
- package/dist/components/frame/index.d.ts.map +1 -0
- package/dist/components/frame/index.js +2 -0
- package/dist/components/frame/index.js.map +1 -0
- package/dist/components/grid/Grid.d.ts +19 -9
- package/dist/components/grid/Grid.d.ts.map +1 -1
- package/dist/components/grid/Grid.js +26 -10
- package/dist/components/grid/Grid.js.map +1 -1
- package/dist/components/grid/index.d.ts +1 -1
- package/dist/components/grid/index.d.ts.map +1 -1
- package/dist/components/grid/index.js.map +1 -1
- package/dist/components/image/Image.d.ts +4 -0
- package/dist/components/image/Image.d.ts.map +1 -1
- package/dist/components/image/Image.js +4 -4
- package/dist/components/image/Image.js.map +1 -1
- package/dist/components/image/index.d.ts +1 -1
- package/dist/components/image/index.d.ts.map +1 -1
- package/dist/components/image/index.js +1 -1
- package/dist/components/image/index.js.map +1 -1
- package/dist/components/section/Section.d.ts +18 -0
- package/dist/components/section/Section.d.ts.map +1 -0
- package/dist/components/section/Section.js +29 -0
- package/dist/components/section/Section.js.map +1 -0
- package/dist/components/section/index.d.ts +2 -0
- package/dist/components/section/index.d.ts.map +1 -0
- package/dist/components/section/index.js +2 -0
- package/dist/components/section/index.js.map +1 -0
- package/dist/components/stack/Stack.d.ts +33 -8
- package/dist/components/stack/Stack.d.ts.map +1 -1
- package/dist/components/stack/Stack.js +71 -14
- package/dist/components/stack/Stack.js.map +1 -1
- package/dist/components/stack/index.d.ts +1 -1
- package/dist/components/stack/index.d.ts.map +1 -1
- package/dist/components/stack/index.js.map +1 -1
- package/dist/components/surface/Surface.d.ts +41 -3
- package/dist/components/surface/Surface.d.ts.map +1 -1
- package/dist/components/surface/Surface.js +79 -6
- package/dist/components/surface/Surface.js.map +1 -1
- package/dist/components/surface/index.d.ts +1 -1
- package/dist/components/surface/index.d.ts.map +1 -1
- package/dist/components/surface/index.js +1 -1
- package/dist/components/surface/index.js.map +1 -1
- package/dist/components/tabs/Tabs.d.ts +27 -6
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +10 -6
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/index.d.ts +1 -1
- package/dist/components/tabs/index.d.ts.map +1 -1
- package/dist/components/tabs/index.js.map +1 -1
- package/dist/components/z-stack/ZStack.d.ts +43 -0
- package/dist/components/z-stack/ZStack.d.ts.map +1 -0
- package/dist/components/z-stack/ZStack.js +70 -0
- package/dist/components/z-stack/ZStack.js.map +1 -0
- package/dist/components/z-stack/index.d.ts +2 -0
- package/dist/components/z-stack/index.d.ts.map +1 -0
- package/dist/components/z-stack/index.js +2 -0
- package/dist/components/z-stack/index.js.map +1 -0
- package/dist/frame.d.ts +2 -0
- package/dist/frame.d.ts.map +1 -0
- package/dist/frame.js +2 -0
- package/dist/frame.js.map +1 -0
- package/dist/grid.d.ts +1 -1
- package/dist/grid.d.ts.map +1 -1
- package/dist/grid.js.map +1 -1
- package/dist/image.d.ts +1 -1
- package/dist/image.d.ts.map +1 -1
- package/dist/image.js +1 -1
- package/dist/image.js.map +1 -1
- package/dist/index.d.ts +9 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -2
- package/dist/index.js.map +1 -1
- package/dist/section.d.ts +2 -0
- package/dist/section.d.ts.map +1 -0
- package/dist/section.js +2 -0
- package/dist/section.js.map +1 -0
- package/dist/stack.d.ts +1 -1
- package/dist/stack.d.ts.map +1 -1
- package/dist/stack.js.map +1 -1
- package/dist/styles/accordion.css +1 -1
- package/dist/styles/accordion.css.map +1 -1
- package/dist/styles/alert-dialog.css +1 -1
- package/dist/styles/alert-dialog.css.map +1 -1
- package/dist/styles/app-bar.css +1 -1
- package/dist/styles/app-bar.css.map +1 -1
- package/dist/styles/appearance.css +2 -0
- package/dist/styles/appearance.css.map +1 -0
- package/dist/styles/aspect-ratio.css +1 -1
- package/dist/styles/aspect-ratio.css.map +1 -1
- package/dist/styles/avatar.css +1 -1
- package/dist/styles/avatar.css.map +1 -1
- package/dist/styles/badge.css +1 -1
- package/dist/styles/badge.css.map +1 -1
- package/dist/styles/bottom-navigation.css +1 -1
- package/dist/styles/bottom-navigation.css.map +1 -1
- package/dist/styles/breadcrumb.css +1 -1
- package/dist/styles/breadcrumb.css.map +1 -1
- package/dist/styles/button.css +1 -1
- package/dist/styles/button.css.map +1 -1
- package/dist/styles/card.css +1 -1
- package/dist/styles/card.css.map +1 -1
- package/dist/styles/carousel.css +2 -0
- package/dist/styles/carousel.css.map +1 -0
- package/dist/styles/checkbox-group.css +1 -1
- package/dist/styles/checkbox-group.css.map +1 -1
- package/dist/styles/checkbox.css +1 -1
- package/dist/styles/checkbox.css.map +1 -1
- package/dist/styles/chip.css +1 -1
- package/dist/styles/chip.css.map +1 -1
- package/dist/styles/code-block.css +1 -1
- package/dist/styles/code-block.css.map +1 -1
- package/dist/styles/code.css +1 -1
- package/dist/styles/code.css.map +1 -1
- package/dist/styles/collapsible.css +1 -1
- package/dist/styles/collapsible.css.map +1 -1
- package/dist/styles/combobox.css +1 -1
- package/dist/styles/combobox.css.map +1 -1
- package/dist/styles/container.css +1 -1
- package/dist/styles/container.css.map +1 -1
- package/dist/styles/context-menu.css +1 -1
- package/dist/styles/context-menu.css.map +1 -1
- package/dist/styles/core.css +1 -1
- package/dist/styles/core.css.map +1 -1
- package/dist/styles/data-grid.css +1 -1
- package/dist/styles/data-grid.css.map +1 -1
- package/dist/styles/dialog.css +1 -1
- package/dist/styles/dialog.css.map +1 -1
- package/dist/styles/divider.css +1 -1
- package/dist/styles/divider.css.map +1 -1
- package/dist/styles/drawer.css +1 -1
- package/dist/styles/drawer.css.map +1 -1
- package/dist/styles/dropdown-menu.css +1 -1
- package/dist/styles/dropdown-menu.css.map +1 -1
- package/dist/styles/feed.css +1 -1
- package/dist/styles/feed.css.map +1 -1
- package/dist/styles/field.css +1 -1
- package/dist/styles/field.css.map +1 -1
- package/dist/styles/fieldset.css +1 -1
- package/dist/styles/fieldset.css.map +1 -1
- package/dist/styles/file-upload.css +1 -1
- package/dist/styles/file-upload.css.map +1 -1
- package/dist/styles/form.css +1 -1
- package/dist/styles/form.css.map +1 -1
- package/dist/styles/frame.css +2 -0
- package/dist/styles/frame.css.map +1 -0
- package/dist/styles/grid.css +1 -1
- package/dist/styles/grid.css.map +1 -1
- package/dist/styles/hide.css +1 -1
- package/dist/styles/hide.css.map +1 -1
- package/dist/styles/hover-card.css +1 -1
- package/dist/styles/hover-card.css.map +1 -1
- package/dist/styles/icon-button.css +1 -1
- package/dist/styles/icon-button.css.map +1 -1
- package/dist/styles/icon.css +1 -1
- package/dist/styles/icon.css.map +1 -1
- package/dist/styles/image.css +1 -1
- package/dist/styles/image.css.map +1 -1
- package/dist/styles/input.css +1 -1
- package/dist/styles/input.css.map +1 -1
- package/dist/styles/link.css +1 -1
- package/dist/styles/link.css.map +1 -1
- package/dist/styles/list.css +1 -1
- package/dist/styles/list.css.map +1 -1
- package/dist/styles/menubar.css +1 -1
- package/dist/styles/menubar.css.map +1 -1
- package/dist/styles/multi-select.css +1 -1
- package/dist/styles/multi-select.css.map +1 -1
- package/dist/styles/nav-list.css +1 -1
- package/dist/styles/nav-list.css.map +1 -1
- package/dist/styles/navigation-menu.css +1 -1
- package/dist/styles/navigation-menu.css.map +1 -1
- package/dist/styles/number-input.css +1 -1
- package/dist/styles/number-input.css.map +1 -1
- package/dist/styles/otp-field.css +1 -1
- package/dist/styles/otp-field.css.map +1 -1
- package/dist/styles/pagination.css +1 -1
- package/dist/styles/pagination.css.map +1 -1
- package/dist/styles/password-toggle-field.css +1 -1
- package/dist/styles/password-toggle-field.css.map +1 -1
- package/dist/styles/popover.css +1 -1
- package/dist/styles/popover.css.map +1 -1
- package/dist/styles/progress-circle.css +1 -1
- package/dist/styles/progress-circle.css.map +1 -1
- package/dist/styles/progress.css +1 -1
- package/dist/styles/progress.css.map +1 -1
- package/dist/styles/radio-group.css +1 -1
- package/dist/styles/radio-group.css.map +1 -1
- package/dist/styles/rating.css +1 -1
- package/dist/styles/rating.css.map +1 -1
- package/dist/styles/scroll-area.css +1 -1
- package/dist/styles/scroll-area.css.map +1 -1
- package/dist/styles/section.css +2 -0
- package/dist/styles/section.css.map +1 -0
- package/dist/styles/select.css +1 -1
- package/dist/styles/select.css.map +1 -1
- package/dist/styles/show.css +1 -1
- package/dist/styles/show.css.map +1 -1
- package/dist/styles/sidebar.css +1 -1
- package/dist/styles/sidebar.css.map +1 -1
- package/dist/styles/skeleton.css +1 -1
- package/dist/styles/skeleton.css.map +1 -1
- package/dist/styles/skip-link.css +1 -1
- package/dist/styles/skip-link.css.map +1 -1
- package/dist/styles/slider.css +1 -1
- package/dist/styles/slider.css.map +1 -1
- package/dist/styles/stack.css +1 -1
- package/dist/styles/stack.css.map +1 -1
- package/dist/styles/surface.css +1 -1
- package/dist/styles/surface.css.map +1 -1
- package/dist/styles/swipeable-item.css +1 -1
- package/dist/styles/swipeable-item.css.map +1 -1
- package/dist/styles/switch.css +1 -1
- package/dist/styles/switch.css.map +1 -1
- package/dist/styles/table.css +1 -1
- package/dist/styles/table.css.map +1 -1
- package/dist/styles/tabs.css +1 -1
- package/dist/styles/tabs.css.map +1 -1
- package/dist/styles/text.css +1 -1
- package/dist/styles/text.css.map +1 -1
- package/dist/styles/textarea.css +1 -1
- package/dist/styles/textarea.css.map +1 -1
- package/dist/styles/toast.css +1 -1
- package/dist/styles/toast.css.map +1 -1
- package/dist/styles/toggle-group.css +1 -1
- package/dist/styles/toggle-group.css.map +1 -1
- package/dist/styles/toggle.css +1 -1
- package/dist/styles/toggle.css.map +1 -1
- package/dist/styles/toolbar.css +1 -1
- package/dist/styles/toolbar.css.map +1 -1
- package/dist/styles/tooltip.css +1 -1
- package/dist/styles/tooltip.css.map +1 -1
- package/dist/styles/tree-grid.css +1 -1
- package/dist/styles/tree-grid.css.map +1 -1
- package/dist/styles/tree.css +1 -1
- package/dist/styles/tree.css.map +1 -1
- package/dist/styles/visually-hidden.css +1 -1
- package/dist/styles/visually-hidden.css.map +1 -1
- package/dist/styles/z-stack.css +2 -0
- package/dist/styles/z-stack.css.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/dist/surface.d.ts +1 -1
- package/dist/surface.d.ts.map +1 -1
- package/dist/surface.js +1 -1
- package/dist/surface.js.map +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tokens.css.map +1 -1
- package/dist/z-stack.d.ts +2 -0
- package/dist/z-stack.d.ts.map +1 -0
- package/dist/z-stack.js +2 -0
- package/dist/z-stack.js.map +1 -0
- package/docs/guides/appearance-and-tokens.md +91 -1
- package/package.json +22 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,osEAwCA,kDACA,+DACA,2NAKA,qJAKA,4DACA,iLAKA,6UAQA,+ZAmBA,sEACA,8EACA,kFACA,sEACA,kGAEA,+VAWA,+FAEA,6JAIA,6GACA,oNAKA,iHACA,oDACA,iDAEA,wCACE,wPAKF,uCACE,wCAEF,8BACE,2EACA,sHACA,6EACA,iGACA,oDDrIJ","sources":["home/runner/work/brick/brick/.brick-cache/production/textarea.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/textarea/textarea.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/textarea/textarea.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-textarea {\n --brick-textarea-padding-inline: var(--brick-space-3);\n --brick-textarea-padding-block: var(--brick-space-3);\n --brick-textarea-gap: var(--brick-space-2);\n --brick-textarea-radius: var(--brick-radius-control);\n --brick-textarea-font-family: var(--brick-typography-field-value-md-font-family);\n --brick-textarea-font-size: var(--brick-typography-field-value-md-font-size);\n --brick-textarea-font-weight: var(--brick-typography-field-value-md-font-weight);\n --brick-textarea-line-height: var(--brick-typography-field-value-md-line-height);\n --brick-textarea-letter-spacing: var(--brick-typography-field-value-md-letter-spacing);\n --brick-textarea-background: var(--brick-color-surface-raised);\n --brick-textarea-foreground: var(--brick-color-text-primary);\n --brick-textarea-placeholder-foreground: var(--brick-color-text-muted);\n --brick-textarea-border: var(--brick-color-border-strong);\n --brick-textarea-hover-background: var(--brick-color-surface-base);\n --brick-textarea-hover-border: var(--brick-color-accent-border);\n --brick-textarea-focus-ring: var(--brick-color-focus-ring);\n --brick-textarea-invalid-border: var(--brick-color-danger-text);\n --brick-textarea-disabled-background: var(--brick-color-surface-subtle);\n --brick-textarea-disabled-foreground: var(--brick-color-text-secondary);\n --brick-textarea-disabled-border: var(--brick-color-border-subtle);\n --brick-textarea-readonly-background: var(--brick-color-surface-subtle);\n --brick-textarea-count-foreground: var(--brick-color-text-secondary);\n --brick-textarea-count-over-limit-foreground: var(--brick-color-danger-text);\n\n display: inline-grid;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--brick-textarea-gap);\n padding: var(--brick-textarea-padding-block) var(--brick-textarea-padding-inline);\n border: var(--brick-border-width) solid var(--brick-textarea-border);\n border-radius: var(--brick-textarea-radius);\n background: var(--brick-textarea-background);\n color: var(--brick-textarea-foreground);\n vertical-align: top;\n transition: background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), box-shadow var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n .brick-textarea[data-full-width] { inline-size: 100%; }\n .brick-textarea:not([data-full-width]) { inline-size: fit-content; }\n .brick-textarea[data-variant=\"soft\"] {\n --brick-textarea-background: var(--brick-color-surface-subtle);\n --brick-textarea-border: var(--brick-color-border-subtle);\n --brick-textarea-hover-background: var(--brick-color-accent-soft);\n }\n .brick-textarea[data-variant=\"underline\"] {\n --brick-textarea-background: transparent;\n --brick-textarea-radius: 0;\n border-width: 0 0 var(--brick-border-width);\n }\n .brick-textarea[data-shape=\"sharp\"] { --brick-textarea-radius: 0; }\n .brick-textarea[data-size=\"sm\"] {\n --brick-textarea-padding-inline: var(--brick-space-2);\n --brick-textarea-padding-block: var(--brick-space-2);\n --brick-textarea-gap: var(--brick-space-1);\n }\n .brick-textarea[data-size=\"lg\"] {\n --brick-textarea-padding-inline: var(--brick-space-4);\n --brick-textarea-padding-block: var(--brick-space-4);\n --brick-textarea-gap: var(--brick-space-3);\n --brick-textarea-font-size: var(--brick-typography-field-value-lg-font-size);\n --brick-textarea-line-height: var(--brick-typography-field-value-lg-line-height);\n }\n\n .brick-textarea-control {\n display: block;\n box-sizing: border-box;\n inline-size: 100%;\n min-inline-size: 0;\n max-inline-size: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n background: transparent;\n color: inherit;\n font-family: var(--brick-textarea-font-family);\n font-size: var(--brick-textarea-font-size);\n font-weight: var(--brick-textarea-font-weight);\n letter-spacing: var(--brick-textarea-letter-spacing);\n line-height: var(--brick-textarea-line-height);\n }\n\n .brick-textarea[data-resize=\"none\"] .brick-textarea-control { resize: none; }\n .brick-textarea[data-resize=\"vertical\"] .brick-textarea-control { resize: vertical; }\n .brick-textarea[data-resize=\"horizontal\"] .brick-textarea-control { resize: horizontal; }\n .brick-textarea[data-resize=\"both\"] .brick-textarea-control { resize: both; }\n .brick-textarea-control::placeholder { color: var(--brick-textarea-placeholder-foreground); opacity: 1; }\n\n .brick-textarea-count {\n display: block;\n min-inline-size: 0;\n justify-self: end;\n color: var(--brick-textarea-count-foreground);\n font-family: var(--brick-typography-caption-font-family);\n font-size: var(--brick-typography-caption-font-size);\n font-weight: var(--brick-typography-caption-font-weight);\n line-height: var(--brick-typography-caption-line-height);\n text-align: end;\n }\n .brick-textarea-count[data-over-limit] { color: var(--brick-textarea-count-over-limit-foreground); }\n\n .brick-textarea:focus-within {\n border-color: var(--brick-textarea-focus-ring);\n box-shadow: 0 0 0 var(--brick-border-focus-width) var(--brick-textarea-focus-ring);\n }\n .brick-textarea:has(.brick-textarea-control[data-invalid]) { border-color: var(--brick-textarea-invalid-border); }\n .brick-textarea:has(.brick-textarea-control[data-disabled]) {\n border-color: var(--brick-textarea-disabled-border);\n background: var(--brick-textarea-disabled-background);\n color: var(--brick-textarea-disabled-foreground);\n }\n .brick-textarea:has(.brick-textarea-control[data-readonly]) { background: var(--brick-textarea-readonly-background); }\n .brick-textarea-control:disabled { cursor: not-allowed; }\n .brick-textarea-control:read-only { cursor: default; }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-textarea:not(:has(.brick-textarea-control[data-disabled], .brick-textarea-control[data-readonly], .brick-textarea-control[data-invalid])):hover {\n border-color: var(--brick-textarea-hover-border);\n background: var(--brick-textarea-hover-background);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .brick-textarea { transition-duration: 0ms; }\n }\n @media (forced-colors: active) {\n .brick-textarea { border-color: ButtonText; background: Canvas; color: CanvasText; }\n .brick-textarea:focus-within { outline: var(--brick-border-focus-width) solid Highlight; outline-offset: 0; box-shadow: none; }\n .brick-textarea:has(.brick-textarea-control[data-invalid]) { border-color: Mark; }\n .brick-textarea:has(.brick-textarea-control[data-disabled]) { border-color: GrayText; color: GrayText; }\n .brick-textarea-count[data-over-limit] { color: Mark; }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,osEAwCA,kDACA,+DACA,2NAKA,qJAKA,4DACA,iLAKA,6UAQA,+ZAmBA,sEACA,8EACA,kFACA,sEACA,kGAEA,+VAWA,+FAEA,6JAIA,6GACA,oNAKA,iHACA,oDACA,iDAEA,wCACE,wPAKF,uCACE,wCAEF,8BACE,2EACA,sHACA,6EACA,iGACA,oDDrIJ","sources":["home/runner/work/brick/brick/.brick-cache/production/textarea.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/textarea/textarea.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/textarea/textarea.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-textarea {\n --brick-textarea-padding-inline: var(--brick-space-3);\n --brick-textarea-padding-block: var(--brick-space-3);\n --brick-textarea-gap: var(--brick-space-2);\n --brick-textarea-radius: var(--brick-radius-control);\n --brick-textarea-font-family: var(--brick-typography-field-value-md-font-family);\n --brick-textarea-font-size: var(--brick-typography-field-value-md-font-size);\n --brick-textarea-font-weight: var(--brick-typography-field-value-md-font-weight);\n --brick-textarea-line-height: var(--brick-typography-field-value-md-line-height);\n --brick-textarea-letter-spacing: var(--brick-typography-field-value-md-letter-spacing);\n --brick-textarea-background: var(--brick-color-surface-raised);\n --brick-textarea-foreground: var(--brick-color-text-primary);\n --brick-textarea-placeholder-foreground: var(--brick-color-text-muted);\n --brick-textarea-border: var(--brick-color-border-strong);\n --brick-textarea-hover-background: var(--brick-color-surface-base);\n --brick-textarea-hover-border: var(--brick-color-accent-border);\n --brick-textarea-focus-ring: var(--brick-color-focus-ring);\n --brick-textarea-invalid-border: var(--brick-color-danger-text);\n --brick-textarea-disabled-background: var(--brick-color-surface-subtle);\n --brick-textarea-disabled-foreground: var(--brick-color-text-secondary);\n --brick-textarea-disabled-border: var(--brick-color-border-subtle);\n --brick-textarea-readonly-background: var(--brick-color-surface-subtle);\n --brick-textarea-count-foreground: var(--brick-color-text-secondary);\n --brick-textarea-count-over-limit-foreground: var(--brick-color-danger-text);\n\n display: inline-grid;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--brick-textarea-gap);\n padding: var(--brick-textarea-padding-block) var(--brick-textarea-padding-inline);\n border: var(--brick-border-width) solid var(--brick-textarea-border);\n border-radius: var(--brick-textarea-radius);\n background: var(--brick-textarea-background);\n color: var(--brick-textarea-foreground);\n vertical-align: top;\n transition: background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), box-shadow var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n .brick-textarea[data-full-width] { inline-size: 100%; }\n .brick-textarea:not([data-full-width]) { inline-size: fit-content; }\n .brick-textarea[data-variant=\"soft\"] {\n --brick-textarea-background: var(--brick-color-surface-subtle);\n --brick-textarea-border: var(--brick-color-border-subtle);\n --brick-textarea-hover-background: var(--brick-color-accent-soft);\n }\n .brick-textarea[data-variant=\"underline\"] {\n --brick-textarea-background: transparent;\n --brick-textarea-radius: 0;\n border-width: 0 0 var(--brick-border-width);\n }\n .brick-textarea[data-shape=\"sharp\"] { --brick-textarea-radius: 0; }\n .brick-textarea[data-size=\"sm\"] {\n --brick-textarea-padding-inline: var(--brick-space-2);\n --brick-textarea-padding-block: var(--brick-space-2);\n --brick-textarea-gap: var(--brick-space-1);\n }\n .brick-textarea[data-size=\"lg\"] {\n --brick-textarea-padding-inline: var(--brick-space-4);\n --brick-textarea-padding-block: var(--brick-space-4);\n --brick-textarea-gap: var(--brick-space-3);\n --brick-textarea-font-size: var(--brick-typography-field-value-lg-font-size);\n --brick-textarea-line-height: var(--brick-typography-field-value-lg-line-height);\n }\n\n .brick-textarea-control {\n display: block;\n box-sizing: border-box;\n inline-size: 100%;\n min-inline-size: 0;\n max-inline-size: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n background: transparent;\n color: inherit;\n font-family: var(--brick-textarea-font-family);\n font-size: var(--brick-textarea-font-size);\n font-weight: var(--brick-textarea-font-weight);\n letter-spacing: var(--brick-textarea-letter-spacing);\n line-height: var(--brick-textarea-line-height);\n }\n\n .brick-textarea[data-resize=\"none\"] .brick-textarea-control { resize: none; }\n .brick-textarea[data-resize=\"vertical\"] .brick-textarea-control { resize: vertical; }\n .brick-textarea[data-resize=\"horizontal\"] .brick-textarea-control { resize: horizontal; }\n .brick-textarea[data-resize=\"both\"] .brick-textarea-control { resize: both; }\n .brick-textarea-control::placeholder { color: var(--brick-textarea-placeholder-foreground); opacity: 1; }\n\n .brick-textarea-count {\n display: block;\n min-inline-size: 0;\n justify-self: end;\n color: var(--brick-textarea-count-foreground);\n font-family: var(--brick-typography-caption-font-family);\n font-size: var(--brick-typography-caption-font-size);\n font-weight: var(--brick-typography-caption-font-weight);\n line-height: var(--brick-typography-caption-line-height);\n text-align: end;\n }\n .brick-textarea-count[data-over-limit] { color: var(--brick-textarea-count-over-limit-foreground); }\n\n .brick-textarea:focus-within {\n border-color: var(--brick-textarea-focus-ring);\n box-shadow: 0 0 0 var(--brick-border-focus-width) var(--brick-textarea-focus-ring);\n }\n .brick-textarea:has(.brick-textarea-control[data-invalid]) { border-color: var(--brick-textarea-invalid-border); }\n .brick-textarea:has(.brick-textarea-control[data-disabled]) {\n border-color: var(--brick-textarea-disabled-border);\n background: var(--brick-textarea-disabled-background);\n color: var(--brick-textarea-disabled-foreground);\n }\n .brick-textarea:has(.brick-textarea-control[data-readonly]) { background: var(--brick-textarea-readonly-background); }\n .brick-textarea-control:disabled { cursor: not-allowed; }\n .brick-textarea-control:read-only { cursor: default; }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-textarea:not(:has(.brick-textarea-control[data-disabled], .brick-textarea-control[data-readonly], .brick-textarea-control[data-invalid])):hover {\n border-color: var(--brick-textarea-hover-border);\n background: var(--brick-textarea-hover-background);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .brick-textarea { transition-duration: 0ms; }\n }\n @media (forced-colors: active) {\n .brick-textarea { border-color: ButtonText; background: Canvas; color: CanvasText; }\n .brick-textarea:focus-within { outline: var(--brick-border-focus-width) solid Highlight; outline-offset: 0; box-shadow: none; }\n .brick-textarea:has(.brick-textarea-control[data-invalid]) { border-color: Mark; }\n .brick-textarea:has(.brick-textarea-control[data-disabled]) { border-color: GrayText; color: GrayText; }\n .brick-textarea-count[data-over-limit] { color: Mark; }\n }\n}\n"],"names":[]}
|
package/dist/styles/toast.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-toast-viewport{--brick-toast-viewport-z-index:var(--brick-layer-overlay);--brick-toast-viewport-gap:var(--brick-space-3);--brick-toast-offset-block-start:var(--brick-space-4);--brick-toast-offset-block-end:var(--brick-space-4);--brick-toast-offset-inline-start:var(--brick-space-4);--brick-toast-offset-inline-end:var(--brick-space-4);--brick-toast-inline-size:24rem;--brick-toast-overlap-step:var(--brick-space-2);z-index:var(--brick-toast-viewport-z-index);inline-size:min(var(--brick-toast-inline-size), calc(100vw - var(--brick-toast-offset-inline-start) - var(--brick-toast-offset-inline-end) - env(safe-area-inset-left) - env(safe-area-inset-right)));max-block-size:calc(100vh - var(--brick-toast-offset-block-start) - var(--brick-toast-offset-block-end));gap:var(--brick-toast-viewport-gap);pointer-events:none;outline:none;flex-direction:column;margin:0;padding:0;display:flex;position:fixed}.brick-toast-viewport[data-width=compact]{--brick-toast-inline-size:20rem}.brick-toast-viewport[data-width=full]{--brick-toast-inline-size:calc(100vw - var(--brick-toast-offset-inline-start) - var(--brick-toast-offset-inline-end))}.brick-toast-viewport[data-position^=top-]{inset-block-start:calc(var(--brick-toast-offset-block-start) + env(safe-area-inset-top))}.brick-toast-viewport[data-position^=bottom-]{inset-block-end:calc(var(--brick-toast-offset-block-end) + env(safe-area-inset-bottom))}.brick-toast-viewport[data-position$=-start]{inset-inline-start:calc(var(--brick-toast-offset-inline-start) + env(safe-area-inset-left))}.brick-toast-viewport[data-position$=-end]{inset-inline-end:calc(var(--brick-toast-offset-inline-end) + env(safe-area-inset-right))}.brick-toast-viewport[data-position$=-center]{inset-inline-start:50%;transform:translate(-50%)}.brick-toast{--brick-toast-background:var(--brick-color-surface-raised);--brick-toast-foreground:var(--brick-color-text-primary);--brick-toast-description-foreground:var(--brick-color-text-secondary);--brick-toast-border-color:var(--brick-color-border-subtle);--brick-toast-accent-color:var(--brick-color-accent-solid);--brick-toast-radius:var(--brick-radius-overlay);--brick-toast-shadow:0 .75rem 2rem var(--brick-color-shadow);--brick-toast-padding:var(--brick-space-3);--brick-toast-content-gap:var(--brick-space-1);--brick-toast-action-gap:var(--brick-space-2);--brick-toast-motion-duration:var(--brick-motion-duration-fast);--brick-toast-motion-easing:var(--brick-motion-easing-enter);align-items:center;gap:var(--brick-space-3);box-sizing:border-box;border:1px solid var(--brick-toast-border-color);border-inline-start:.25rem solid var(--brick-toast-accent-color);border-radius:var(--brick-toast-radius);min-block-size:3rem;inline-size:100%;min-inline-size:0;padding:var(--brick-toast-padding);background:var(--brick-toast-background);box-shadow:var(--brick-toast-shadow);color:var(--brick-toast-foreground);pointer-events:auto;touch-action:pan-y;transition:opacity var(--brick-toast-motion-duration) var(--brick-toast-motion-easing), transform var(--brick-toast-motion-duration) var(--brick-toast-motion-easing), margin var(--brick-toast-motion-duration) var(--brick-toast-motion-easing);grid-template-columns:auto minmax(0,1fr);display:grid;position:relative}.brick-toast:has(.brick-toast__close){padding-inline-end:calc(2.75rem + var(--brick-space-3))}.brick-toast[data-type=default],.brick-toast[data-type=loading]{--brick-toast-accent-color:var(--brick-color-accent-solid)}.brick-toast[data-type=success]{--brick-toast-accent-color:var(--brick-color-success-solid);--brick-toast-border-color:var(--brick-color-success-border)}.brick-toast[data-type=error]{--brick-toast-accent-color:var(--brick-color-danger-solid);--brick-toast-border-color:var(--brick-color-danger-border)}.brick-toast[data-type=warning]{--brick-toast-accent-color:var(--brick-color-warning-solid);--brick-toast-border-color:var(--brick-color-warning-border)}.brick-toast[data-type=info]{--brick-toast-accent-color:var(--brick-color-info-solid);--brick-toast-border-color:var(--brick-color-info-border)}.brick-toast[data-state=entering]{opacity:0;transform:translateY(.5rem)}.brick-toast[data-state=exiting]{opacity:0;transform:translateY(-.375rem)}.brick-toast[data-swipe=move]{transform:translate(var(--atom-toast-swipe-move-x), var(--atom-toast-swipe-move-y));transition:none}.brick-toast[data-swipe=cancel]{transform:translate(0)}.brick-toast[data-swipe=end]{opacity:0}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]){gap:0;display:grid}.brick-toast-viewport[data-position^=top-][data-stacking=overlap]:not([data-expanded]){padding-block-end:calc(2 * var(--brick-toast-overlap-step))}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]){padding-block-start:calc(2 * var(--brick-toast-overlap-step))}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]) .brick-toast{grid-area:1/1}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]) .brick-toast[data-index="0"]{z-index:1}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]) .brick-toast[data-index="1"]{z-index:2}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]) .brick-toast[data-index="2"]{z-index:3}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="1"]) .brick-toast[data-index="0"]{transform:translateY(var(--brick-toast-overlap-step))}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="2"]) .brick-toast[data-index="0"]{transform:translateY(calc(2 * var(--brick-toast-overlap-step)))}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="2"]) .brick-toast[data-index="1"]{transform:translateY(var(--brick-toast-overlap-step))}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]) .brick-toast{align-self:end}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="1"]) .brick-toast[data-index="0"]{transform:translateY(calc(-1 * var(--brick-toast-overlap-step)))}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="2"]) .brick-toast[data-index="0"]{transform:translateY(calc(-2 * var(--brick-toast-overlap-step)))}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="2"]) .brick-toast[data-index="1"]{transform:translateY(calc(-1 * var(--brick-toast-overlap-step)))}.brick-toast__icon{block-size:1.25rem;inline-size:1.25rem;color:var(--brick-toast-accent-color);place-items:center;display:inline-grid}.brick-toast__icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;block-size:100%;inline-size:100%}.brick-toast__spinner{box-sizing:border-box;border:2px solid color-mix(in srgb, currentColor 30%, transparent);border-block-start-color:currentColor;border-radius:50%;block-size:1rem;inline-size:1rem;animation:.8s linear infinite brick-toast-spin}.brick-toast__content{gap:var(--brick-toast-content-gap);min-inline-size:0;display:grid}.brick-toast__content:first-child{grid-column-start:1}.brick-toast__title,.brick-toast__description{overflow-wrap:anywhere;margin:0}.brick-toast__title{font-family:var(--brick-typography-compact-title-font-family);font-size:var(--brick-typography-compact-title-font-size);font-weight:var(--brick-typography-compact-title-font-weight);line-height:var(--brick-typography-compact-title-line-height)}.brick-toast__description{color:var(--brick-toast-description-foreground);font-family:var(--brick-typography-body-sm-font-family);font-size:var(--brick-typography-body-sm-font-size);line-height:var(--brick-typography-body-sm-line-height)}.brick-toast__actions{gap:var(--brick-toast-action-gap);flex-wrap:wrap;margin-block-start:var(--brick-space-1);display:flex}.brick-toast__action,.brick-toast__close{font:inherit;color:var(--brick-toast-accent-color);cursor:pointer;border:0}.brick-toast__action{border-radius:var(--brick-radius-control);min-block-size:2.25rem;padding-inline:var(--brick-space-2);background:color-mix(in srgb, var(--brick-toast-accent-color) 12%, transparent);color:var(--brick-color-text-primary);font-size:var(--brick-typography-body-sm-font-size);font-weight:var(--brick-typography-control-sm-font-weight)}.brick-toast__close{border-radius:var(--brick-radius-full);block-size:2.75rem;inline-size:2.75rem;color:var(--brick-color-text-secondary);background:0 0;place-items:center;margin:0;padding:0;display:inline-grid;position:absolute;inset-block-start:50%;inset-inline-end:var(--brick-space-1);transform:translateY(-50%)}.brick-toast__close svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:2px;block-size:1.125rem;inline-size:1.125rem}.brick-toast__action:hover{background:color-mix(in srgb, var(--brick-toast-accent-color) 18%, transparent)}.brick-toast__close:hover{background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary)}.brick-toast__action:focus-visible,.brick-toast__close:focus-visible{outline:2px solid var(--brick-color-focus-ring);outline-offset:2px}@keyframes brick-toast-spin{to{transform:rotate(360deg)}}@media (width<=30rem){.brick-toast-viewport[data-width=responsive]{--brick-toast-inline-size:calc(100vw - var(--brick-space-4) * 2);--brick-toast-offset-inline-start:var(--brick-space-2);--brick-toast-offset-inline-end:var(--brick-space-2)}}@media (prefers-reduced-motion:reduce){.brick-toast{transition:none}.brick-toast[data-state=entering],.brick-toast[data-state=exiting]{transform:none}.brick-toast__spinner{border-style:dotted;animation:none}}@media (forced-colors:active){.brick-toast{box-shadow:none;color:canvastext;forced-color-adjust:auto;background:canvas;border-color:canvastext}.brick-toast__icon,.brick-toast__action,.brick-toast__close{color:buttontext}.brick-toast__action{background:buttonface;border:1px solid buttontext}.brick-toast__action:focus-visible,.brick-toast__close:focus-visible{outline-color:highlight}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-toast-viewport{--brick-toast-viewport-z-index:var(--brick-layer-overlay);--brick-toast-viewport-gap:var(--brick-space-3);--brick-toast-offset-block-start:var(--brick-space-4);--brick-toast-offset-block-end:var(--brick-space-4);--brick-toast-offset-inline-start:var(--brick-space-4);--brick-toast-offset-inline-end:var(--brick-space-4);--brick-toast-inline-size:24rem;--brick-toast-overlap-step:var(--brick-space-2);z-index:var(--brick-toast-viewport-z-index);inline-size:min(var(--brick-toast-inline-size), calc(100vw - var(--brick-toast-offset-inline-start) - var(--brick-toast-offset-inline-end) - env(safe-area-inset-left) - env(safe-area-inset-right)));max-block-size:calc(100vh - var(--brick-toast-offset-block-start) - var(--brick-toast-offset-block-end));gap:var(--brick-toast-viewport-gap);pointer-events:none;outline:none;flex-direction:column;margin:0;padding:0;display:flex;position:fixed}.brick-toast-viewport[data-width=compact]{--brick-toast-inline-size:20rem}.brick-toast-viewport[data-width=full]{--brick-toast-inline-size:calc(100vw - var(--brick-toast-offset-inline-start) - var(--brick-toast-offset-inline-end))}.brick-toast-viewport[data-position^=top-]{inset-block-start:calc(var(--brick-toast-offset-block-start) + env(safe-area-inset-top))}.brick-toast-viewport[data-position^=bottom-]{inset-block-end:calc(var(--brick-toast-offset-block-end) + env(safe-area-inset-bottom))}.brick-toast-viewport[data-position$=-start]{inset-inline-start:calc(var(--brick-toast-offset-inline-start) + env(safe-area-inset-left))}.brick-toast-viewport[data-position$=-end]{inset-inline-end:calc(var(--brick-toast-offset-inline-end) + env(safe-area-inset-right))}.brick-toast-viewport[data-position$=-center]{inset-inline-start:50%;transform:translate(-50%)}.brick-toast{--brick-toast-background:var(--brick-color-surface-raised);--brick-toast-foreground:var(--brick-color-text-primary);--brick-toast-description-foreground:var(--brick-color-text-secondary);--brick-toast-border-color:var(--brick-color-border-subtle);--brick-toast-accent-color:var(--brick-color-accent-solid);--brick-toast-radius:var(--brick-radius-overlay);--brick-toast-shadow:0 .75rem 2rem var(--brick-color-shadow);--brick-toast-padding:var(--brick-space-3);--brick-toast-content-gap:var(--brick-space-1);--brick-toast-action-gap:var(--brick-space-2);--brick-toast-motion-duration:var(--brick-motion-duration-fast);--brick-toast-motion-easing:var(--brick-motion-easing-enter);align-items:center;gap:var(--brick-space-3);box-sizing:border-box;border:1px solid var(--brick-toast-border-color);border-inline-start:.25rem solid var(--brick-toast-accent-color);border-radius:var(--brick-toast-radius);min-block-size:3rem;inline-size:100%;min-inline-size:0;padding:var(--brick-toast-padding);background:var(--brick-toast-background);box-shadow:var(--brick-toast-shadow);color:var(--brick-toast-foreground);pointer-events:auto;touch-action:pan-y;transition:opacity var(--brick-toast-motion-duration) var(--brick-toast-motion-easing), transform var(--brick-toast-motion-duration) var(--brick-toast-motion-easing), margin var(--brick-toast-motion-duration) var(--brick-toast-motion-easing);grid-template-columns:auto minmax(0,1fr);display:grid;position:relative}.brick-toast:has(.brick-toast__close){padding-inline-end:calc(2.75rem + var(--brick-space-3))}.brick-toast[data-type=default],.brick-toast[data-type=loading]{--brick-toast-accent-color:var(--brick-color-accent-solid)}.brick-toast[data-type=success]{--brick-toast-accent-color:var(--brick-color-success-solid);--brick-toast-border-color:var(--brick-color-success-border)}.brick-toast[data-type=error]{--brick-toast-accent-color:var(--brick-color-danger-solid);--brick-toast-border-color:var(--brick-color-danger-border)}.brick-toast[data-type=warning]{--brick-toast-accent-color:var(--brick-color-warning-solid);--brick-toast-border-color:var(--brick-color-warning-border)}.brick-toast[data-type=info]{--brick-toast-accent-color:var(--brick-color-info-solid);--brick-toast-border-color:var(--brick-color-info-border)}.brick-toast[data-state=entering]{opacity:0;transform:translateY(.5rem)}.brick-toast[data-state=exiting]{opacity:0;transform:translateY(-.375rem)}.brick-toast[data-swipe=move]{transform:translate(var(--atom-toast-swipe-move-x), var(--atom-toast-swipe-move-y));transition:none}.brick-toast[data-swipe=cancel]{transform:translate(0)}.brick-toast[data-swipe=end]{opacity:0}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]){gap:0;display:grid}.brick-toast-viewport[data-position^=top-][data-stacking=overlap]:not([data-expanded]){padding-block-end:calc(2 * var(--brick-toast-overlap-step))}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]){padding-block-start:calc(2 * var(--brick-toast-overlap-step))}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]) .brick-toast{grid-area:1/1}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]) .brick-toast[data-index="0"]{z-index:1}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]) .brick-toast[data-index="1"]{z-index:2}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]) .brick-toast[data-index="2"]{z-index:3}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="1"]) .brick-toast[data-index="0"]{transform:translateY(var(--brick-toast-overlap-step))}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="2"]) .brick-toast[data-index="0"]{transform:translateY(calc(2 * var(--brick-toast-overlap-step)))}.brick-toast-viewport[data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="2"]) .brick-toast[data-index="1"]{transform:translateY(var(--brick-toast-overlap-step))}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]) .brick-toast{align-self:end}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="1"]) .brick-toast[data-index="0"]{transform:translateY(calc(-1 * var(--brick-toast-overlap-step)))}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="2"]) .brick-toast[data-index="0"]{transform:translateY(calc(-2 * var(--brick-toast-overlap-step)))}.brick-toast-viewport[data-position^=bottom-][data-stacking=overlap]:not([data-expanded]):has(.brick-toast[data-index="2"]) .brick-toast[data-index="1"]{transform:translateY(calc(-1 * var(--brick-toast-overlap-step)))}.brick-toast__icon{block-size:1.25rem;inline-size:1.25rem;color:var(--brick-toast-accent-color);place-items:center;display:inline-grid}.brick-toast__icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;block-size:100%;inline-size:100%}.brick-toast__spinner{box-sizing:border-box;border:2px solid color-mix(in srgb, currentColor 30%, transparent);border-block-start-color:currentColor;border-radius:50%;block-size:1rem;inline-size:1rem;animation:.8s linear infinite brick-toast-spin}.brick-toast__content{gap:var(--brick-toast-content-gap);min-inline-size:0;display:grid}.brick-toast__content:first-child{grid-column-start:1}.brick-toast__title,.brick-toast__description{overflow-wrap:anywhere;margin:0}.brick-toast__title{font-family:var(--brick-typography-compact-title-font-family);font-size:var(--brick-typography-compact-title-font-size);font-weight:var(--brick-typography-compact-title-font-weight);line-height:var(--brick-typography-compact-title-line-height)}.brick-toast__description{color:var(--brick-toast-description-foreground);font-family:var(--brick-typography-body-sm-font-family);font-size:var(--brick-typography-body-sm-font-size);line-height:var(--brick-typography-body-sm-line-height)}.brick-toast__actions{gap:var(--brick-toast-action-gap);flex-wrap:wrap;margin-block-start:var(--brick-space-1);display:flex}.brick-toast__action,.brick-toast__close{font:inherit;color:var(--brick-toast-accent-color);cursor:pointer;border:0}.brick-toast__action{border-radius:var(--brick-radius-control);min-block-size:2.25rem;padding-inline:var(--brick-space-2);background:color-mix(in srgb, var(--brick-toast-accent-color) 12%, transparent);color:var(--brick-color-text-primary);font-size:var(--brick-typography-body-sm-font-size);font-weight:var(--brick-typography-control-sm-font-weight)}.brick-toast__close{border-radius:var(--brick-radius-full);block-size:2.75rem;inline-size:2.75rem;color:var(--brick-color-text-secondary);background:0 0;place-items:center;margin:0;padding:0;display:inline-grid;position:absolute;inset-block-start:50%;inset-inline-end:var(--brick-space-1);transform:translateY(-50%)}.brick-toast__close svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:2px;block-size:1.125rem;inline-size:1.125rem}.brick-toast__action:hover{background:color-mix(in srgb, var(--brick-toast-accent-color) 18%, transparent)}.brick-toast__close:hover{background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary)}.brick-toast__action:focus-visible,.brick-toast__close:focus-visible{outline:2px solid var(--brick-color-focus-ring);outline-offset:2px}@keyframes brick-toast-spin{to{transform:rotate(360deg)}}@media (width<=30rem){.brick-toast-viewport[data-width=responsive]{--brick-toast-inline-size:calc(100vw - var(--brick-space-4) * 2);--brick-toast-offset-inline-start:var(--brick-space-2);--brick-toast-offset-inline-end:var(--brick-space-2)}}@media (prefers-reduced-motion:reduce){.brick-toast{transition:none}.brick-toast[data-state=entering],.brick-toast[data-state=exiting]{transform:none}.brick-toast__spinner{border-style:dotted;animation:none}}@media (forced-colors:active){.brick-toast{box-shadow:none;color:canvastext;forced-color-adjust:auto;background:canvas;border-color:canvastext}.brick-toast__icon,.brick-toast__action,.brick-toast__close{color:buttontext}.brick-toast__action{background:buttonface;border:1px solid buttontext}.brick-toast__action:focus-visible,.brick-toast__close:focus-visible{outline-color:highlight}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=toast.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,24BA0BA,0EACA,6JAIA,oIAGA,sIAGA,yIAGA,oIAGA,+FAKA,27CAoCA,8FAIA,2HAIA,yJAIA,qJAIA,yJAIA,gJAKA,wEACA,0EACA,kIAIA,uDACA,uCAEA,qFAIA,mJAGA,wJAGA,6FAGA,yGACA,yGACA,yGACA,uLAGA,iMAGA,uLAGA,sHAGA,0NAGA,0NAGA,0NAIA,uIAOA,kJASA,uPASA,wFAKA,sDACA,8EAEA,wQAMA,8OAMA,4HACA,oHAOA,+VASA,4TAeA,qIACA,2GACA,6GACA,wIAGA,yDAEA,sBACE,2NAOF,uCACE,6BACA,kFAEA,0DAGF,8BACE,iHACA,6EAGA,uEACA,+FDvQJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toast.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toast/toast.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toast/toast.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-toast-viewport {\n --brick-toast-viewport-z-index: var(--brick-layer-overlay);\n --brick-toast-viewport-gap: var(--brick-space-3);\n --brick-toast-offset-block-start: var(--brick-space-4);\n --brick-toast-offset-block-end: var(--brick-space-4);\n --brick-toast-offset-inline-start: var(--brick-space-4);\n --brick-toast-offset-inline-end: var(--brick-space-4);\n --brick-toast-inline-size: 24rem;\n --brick-toast-overlap-step: var(--brick-space-2);\n\n position: fixed;\n z-index: var(--brick-toast-viewport-z-index);\n display: flex;\n inline-size: min(\n var(--brick-toast-inline-size),\n calc(100vw - var(--brick-toast-offset-inline-start) - var(--brick-toast-offset-inline-end) - env(safe-area-inset-left) - env(safe-area-inset-right))\n );\n max-block-size: calc(100vh - var(--brick-toast-offset-block-start) - var(--brick-toast-offset-block-end));\n flex-direction: column;\n gap: var(--brick-toast-viewport-gap);\n margin: 0;\n padding: 0;\n outline: none;\n pointer-events: none;\n }\n\n .brick-toast-viewport[data-width=\"compact\"] { --brick-toast-inline-size: 20rem; }\n .brick-toast-viewport[data-width=\"full\"] {\n --brick-toast-inline-size: calc(100vw - var(--brick-toast-offset-inline-start) - var(--brick-toast-offset-inline-end));\n }\n\n .brick-toast-viewport[data-position^=\"top-\"] {\n inset-block-start: calc(var(--brick-toast-offset-block-start) + env(safe-area-inset-top));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"] {\n inset-block-end: calc(var(--brick-toast-offset-block-end) + env(safe-area-inset-bottom));\n }\n .brick-toast-viewport[data-position$=\"-start\"] {\n inset-inline-start: calc(var(--brick-toast-offset-inline-start) + env(safe-area-inset-left));\n }\n .brick-toast-viewport[data-position$=\"-end\"] {\n inset-inline-end: calc(var(--brick-toast-offset-inline-end) + env(safe-area-inset-right));\n }\n .brick-toast-viewport[data-position$=\"-center\"] {\n inset-inline-start: 50%;\n transform: translateX(-50%);\n }\n\n .brick-toast {\n --brick-toast-background: var(--brick-color-surface-raised);\n --brick-toast-foreground: var(--brick-color-text-primary);\n --brick-toast-description-foreground: var(--brick-color-text-secondary);\n --brick-toast-border-color: var(--brick-color-border-subtle);\n --brick-toast-accent-color: var(--brick-color-accent-solid);\n --brick-toast-radius: var(--brick-radius-overlay);\n --brick-toast-shadow: 0 0.75rem 2rem var(--brick-color-shadow);\n --brick-toast-padding: var(--brick-space-3);\n --brick-toast-content-gap: var(--brick-space-1);\n --brick-toast-action-gap: var(--brick-space-2);\n --brick-toast-motion-duration: var(--brick-motion-duration-fast);\n --brick-toast-motion-easing: var(--brick-motion-easing-enter);\n\n position: relative;\n display: grid;\n inline-size: 100%;\n min-block-size: 3rem;\n min-inline-size: 0;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n gap: var(--brick-space-3);\n box-sizing: border-box;\n border: 1px solid var(--brick-toast-border-color);\n border-inline-start: 0.25rem solid var(--brick-toast-accent-color);\n border-radius: var(--brick-toast-radius);\n padding: var(--brick-toast-padding);\n background: var(--brick-toast-background);\n box-shadow: var(--brick-toast-shadow);\n color: var(--brick-toast-foreground);\n pointer-events: auto;\n touch-action: pan-y;\n transition: opacity var(--brick-toast-motion-duration) var(--brick-toast-motion-easing),\n transform var(--brick-toast-motion-duration) var(--brick-toast-motion-easing),\n margin var(--brick-toast-motion-duration) var(--brick-toast-motion-easing);\n }\n .brick-toast:has(.brick-toast__close) {\n padding-inline-end: calc(2.75rem + var(--brick-space-3));\n }\n\n .brick-toast[data-type=\"default\"],\n .brick-toast[data-type=\"loading\"] {\n --brick-toast-accent-color: var(--brick-color-accent-solid);\n }\n .brick-toast[data-type=\"success\"] {\n --brick-toast-accent-color: var(--brick-color-success-solid);\n --brick-toast-border-color: var(--brick-color-success-border);\n }\n .brick-toast[data-type=\"error\"] {\n --brick-toast-accent-color: var(--brick-color-danger-solid);\n --brick-toast-border-color: var(--brick-color-danger-border);\n }\n .brick-toast[data-type=\"warning\"] {\n --brick-toast-accent-color: var(--brick-color-warning-solid);\n --brick-toast-border-color: var(--brick-color-warning-border);\n }\n .brick-toast[data-type=\"info\"] {\n --brick-toast-accent-color: var(--brick-color-info-solid);\n --brick-toast-border-color: var(--brick-color-info-border);\n }\n\n .brick-toast[data-state=\"entering\"] { opacity: 0; transform: translateY(0.5rem); }\n .brick-toast[data-state=\"exiting\"] { opacity: 0; transform: translateY(-0.375rem); }\n .brick-toast[data-swipe=\"move\"] {\n transform: translate(var(--atom-toast-swipe-move-x), var(--atom-toast-swipe-move-y));\n transition: none;\n }\n .brick-toast[data-swipe=\"cancel\"] { transform: translate(0, 0); }\n .brick-toast[data-swipe=\"end\"] { opacity: 0; }\n\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) {\n display: grid;\n gap: 0;\n }\n .brick-toast-viewport[data-position^=\"top-\"][data-stacking=\"overlap\"]:not([data-expanded]) {\n padding-block-end: calc(2 * var(--brick-toast-overlap-step));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]) {\n padding-block-start: calc(2 * var(--brick-toast-overlap-step));\n }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast {\n grid-area: 1 / 1;\n }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast[data-index=\"0\"] { z-index: 1; }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast[data-index=\"1\"] { z-index: 2; }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast[data-index=\"2\"] { z-index: 3; }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"1\"]) .brick-toast[data-index=\"0\"] {\n transform: translateY(var(--brick-toast-overlap-step));\n }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"2\"]) .brick-toast[data-index=\"0\"] {\n transform: translateY(calc(2 * var(--brick-toast-overlap-step)));\n }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"2\"]) .brick-toast[data-index=\"1\"] {\n transform: translateY(var(--brick-toast-overlap-step));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast {\n align-self: end;\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"1\"]) .brick-toast[data-index=\"0\"] {\n transform: translateY(calc(-1 * var(--brick-toast-overlap-step)));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"2\"]) .brick-toast[data-index=\"0\"] {\n transform: translateY(calc(-2 * var(--brick-toast-overlap-step)));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"2\"]) .brick-toast[data-index=\"1\"] {\n transform: translateY(calc(-1 * var(--brick-toast-overlap-step)));\n }\n\n .brick-toast__icon {\n display: inline-grid;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n place-items: center;\n color: var(--brick-toast-accent-color);\n }\n .brick-toast__icon svg {\n inline-size: 100%;\n block-size: 100%;\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2;\n }\n .brick-toast__spinner {\n inline-size: 1rem;\n block-size: 1rem;\n box-sizing: border-box;\n border: 2px solid color-mix(in srgb, currentColor 30%, transparent);\n border-block-start-color: currentColor;\n border-radius: 50%;\n animation: brick-toast-spin 800ms linear infinite;\n }\n .brick-toast__content {\n display: grid;\n min-inline-size: 0;\n gap: var(--brick-toast-content-gap);\n }\n .brick-toast__content:first-child { grid-column-start: 1; }\n .brick-toast__title,\n .brick-toast__description { margin: 0; overflow-wrap: anywhere; }\n .brick-toast__title {\n font-family: var(--brick-typography-compact-title-font-family);\n font-size: var(--brick-typography-compact-title-font-size);\n font-weight: var(--brick-typography-compact-title-font-weight);\n line-height: var(--brick-typography-compact-title-line-height);\n }\n .brick-toast__description {\n color: var(--brick-toast-description-foreground);\n font-family: var(--brick-typography-body-sm-font-family);\n font-size: var(--brick-typography-body-sm-font-size);\n line-height: var(--brick-typography-body-sm-line-height);\n }\n .brick-toast__actions { display: flex; flex-wrap: wrap; gap: var(--brick-toast-action-gap); margin-block-start: var(--brick-space-1); }\n .brick-toast__action,\n .brick-toast__close {\n border: 0;\n font: inherit;\n color: var(--brick-toast-accent-color);\n cursor: pointer;\n }\n .brick-toast__action {\n min-block-size: 2.25rem;\n border-radius: var(--brick-radius-control);\n padding-inline: var(--brick-space-2);\n background: color-mix(in srgb, var(--brick-toast-accent-color) 12%, transparent);\n color: var(--brick-color-text-primary);\n font-size: var(--brick-typography-body-sm-font-size);\n font-weight: var(--brick-typography-control-sm-font-weight);\n }\n .brick-toast__close {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--brick-space-1);\n display: inline-grid;\n inline-size: 2.75rem;\n block-size: 2.75rem;\n place-items: center;\n margin: 0;\n border-radius: var(--brick-radius-full);\n padding: 0;\n background: transparent;\n color: var(--brick-color-text-secondary);\n transform: translateY(-50%);\n }\n .brick-toast__close svg { inline-size: 1.125rem; block-size: 1.125rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }\n .brick-toast__action:hover { background: color-mix(in srgb, var(--brick-toast-accent-color) 18%, transparent); }\n .brick-toast__close:hover { background: var(--brick-color-surface-subtle); color: var(--brick-color-text-primary); }\n .brick-toast__action:focus-visible,\n .brick-toast__close:focus-visible { outline: 2px solid var(--brick-color-focus-ring); outline-offset: 2px; }\n\n @keyframes brick-toast-spin { to { transform: rotate(360deg); } }\n\n @media (max-width: 30rem) {\n .brick-toast-viewport[data-width=\"responsive\"] {\n --brick-toast-inline-size: calc(100vw - var(--brick-space-4) * 2);\n --brick-toast-offset-inline-start: var(--brick-space-2);\n --brick-toast-offset-inline-end: var(--brick-space-2);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-toast { transition: none; }\n .brick-toast[data-state=\"entering\"],\n .brick-toast[data-state=\"exiting\"] { transform: none; }\n .brick-toast__spinner { animation: none; border-style: dotted; }\n }\n\n @media (forced-colors: active) {\n .brick-toast { border-color: CanvasText; background: Canvas; box-shadow: none; color: CanvasText; forced-color-adjust: auto; }\n .brick-toast__icon,\n .brick-toast__action,\n .brick-toast__close { color: ButtonText; }\n .brick-toast__action { border: 1px solid ButtonText; background: ButtonFace; }\n .brick-toast__action:focus-visible,\n .brick-toast__close:focus-visible { outline-color: Highlight; }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,24BA0BA,0EACA,6JAIA,oIAGA,sIAGA,yIAGA,oIAGA,+FAKA,27CAoCA,8FAIA,2HAIA,yJAIA,qJAIA,yJAIA,gJAKA,wEACA,0EACA,kIAIA,uDACA,uCAEA,qFAIA,mJAGA,wJAGA,6FAGA,yGACA,yGACA,yGACA,uLAGA,iMAGA,uLAGA,sHAGA,0NAGA,0NAGA,0NAIA,uIAOA,kJASA,uPASA,wFAKA,sDACA,8EAEA,wQAMA,8OAMA,4HACA,oHAOA,+VASA,4TAeA,qIACA,2GACA,6GACA,wIAGA,yDAEA,sBACE,2NAOF,uCACE,6BACA,kFAEA,0DAGF,8BACE,iHACA,6EAGA,uEACA,+FDvQJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toast.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toast/toast.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toast/toast.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-toast-viewport {\n --brick-toast-viewport-z-index: var(--brick-layer-overlay);\n --brick-toast-viewport-gap: var(--brick-space-3);\n --brick-toast-offset-block-start: var(--brick-space-4);\n --brick-toast-offset-block-end: var(--brick-space-4);\n --brick-toast-offset-inline-start: var(--brick-space-4);\n --brick-toast-offset-inline-end: var(--brick-space-4);\n --brick-toast-inline-size: 24rem;\n --brick-toast-overlap-step: var(--brick-space-2);\n\n position: fixed;\n z-index: var(--brick-toast-viewport-z-index);\n display: flex;\n inline-size: min(\n var(--brick-toast-inline-size),\n calc(100vw - var(--brick-toast-offset-inline-start) - var(--brick-toast-offset-inline-end) - env(safe-area-inset-left) - env(safe-area-inset-right))\n );\n max-block-size: calc(100vh - var(--brick-toast-offset-block-start) - var(--brick-toast-offset-block-end));\n flex-direction: column;\n gap: var(--brick-toast-viewport-gap);\n margin: 0;\n padding: 0;\n outline: none;\n pointer-events: none;\n }\n\n .brick-toast-viewport[data-width=\"compact\"] { --brick-toast-inline-size: 20rem; }\n .brick-toast-viewport[data-width=\"full\"] {\n --brick-toast-inline-size: calc(100vw - var(--brick-toast-offset-inline-start) - var(--brick-toast-offset-inline-end));\n }\n\n .brick-toast-viewport[data-position^=\"top-\"] {\n inset-block-start: calc(var(--brick-toast-offset-block-start) + env(safe-area-inset-top));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"] {\n inset-block-end: calc(var(--brick-toast-offset-block-end) + env(safe-area-inset-bottom));\n }\n .brick-toast-viewport[data-position$=\"-start\"] {\n inset-inline-start: calc(var(--brick-toast-offset-inline-start) + env(safe-area-inset-left));\n }\n .brick-toast-viewport[data-position$=\"-end\"] {\n inset-inline-end: calc(var(--brick-toast-offset-inline-end) + env(safe-area-inset-right));\n }\n .brick-toast-viewport[data-position$=\"-center\"] {\n inset-inline-start: 50%;\n transform: translateX(-50%);\n }\n\n .brick-toast {\n --brick-toast-background: var(--brick-color-surface-raised);\n --brick-toast-foreground: var(--brick-color-text-primary);\n --brick-toast-description-foreground: var(--brick-color-text-secondary);\n --brick-toast-border-color: var(--brick-color-border-subtle);\n --brick-toast-accent-color: var(--brick-color-accent-solid);\n --brick-toast-radius: var(--brick-radius-overlay);\n --brick-toast-shadow: 0 0.75rem 2rem var(--brick-color-shadow);\n --brick-toast-padding: var(--brick-space-3);\n --brick-toast-content-gap: var(--brick-space-1);\n --brick-toast-action-gap: var(--brick-space-2);\n --brick-toast-motion-duration: var(--brick-motion-duration-fast);\n --brick-toast-motion-easing: var(--brick-motion-easing-enter);\n\n position: relative;\n display: grid;\n inline-size: 100%;\n min-block-size: 3rem;\n min-inline-size: 0;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n gap: var(--brick-space-3);\n box-sizing: border-box;\n border: 1px solid var(--brick-toast-border-color);\n border-inline-start: 0.25rem solid var(--brick-toast-accent-color);\n border-radius: var(--brick-toast-radius);\n padding: var(--brick-toast-padding);\n background: var(--brick-toast-background);\n box-shadow: var(--brick-toast-shadow);\n color: var(--brick-toast-foreground);\n pointer-events: auto;\n touch-action: pan-y;\n transition: opacity var(--brick-toast-motion-duration) var(--brick-toast-motion-easing),\n transform var(--brick-toast-motion-duration) var(--brick-toast-motion-easing),\n margin var(--brick-toast-motion-duration) var(--brick-toast-motion-easing);\n }\n .brick-toast:has(.brick-toast__close) {\n padding-inline-end: calc(2.75rem + var(--brick-space-3));\n }\n\n .brick-toast[data-type=\"default\"],\n .brick-toast[data-type=\"loading\"] {\n --brick-toast-accent-color: var(--brick-color-accent-solid);\n }\n .brick-toast[data-type=\"success\"] {\n --brick-toast-accent-color: var(--brick-color-success-solid);\n --brick-toast-border-color: var(--brick-color-success-border);\n }\n .brick-toast[data-type=\"error\"] {\n --brick-toast-accent-color: var(--brick-color-danger-solid);\n --brick-toast-border-color: var(--brick-color-danger-border);\n }\n .brick-toast[data-type=\"warning\"] {\n --brick-toast-accent-color: var(--brick-color-warning-solid);\n --brick-toast-border-color: var(--brick-color-warning-border);\n }\n .brick-toast[data-type=\"info\"] {\n --brick-toast-accent-color: var(--brick-color-info-solid);\n --brick-toast-border-color: var(--brick-color-info-border);\n }\n\n .brick-toast[data-state=\"entering\"] { opacity: 0; transform: translateY(0.5rem); }\n .brick-toast[data-state=\"exiting\"] { opacity: 0; transform: translateY(-0.375rem); }\n .brick-toast[data-swipe=\"move\"] {\n transform: translate(var(--atom-toast-swipe-move-x), var(--atom-toast-swipe-move-y));\n transition: none;\n }\n .brick-toast[data-swipe=\"cancel\"] { transform: translate(0, 0); }\n .brick-toast[data-swipe=\"end\"] { opacity: 0; }\n\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) {\n display: grid;\n gap: 0;\n }\n .brick-toast-viewport[data-position^=\"top-\"][data-stacking=\"overlap\"]:not([data-expanded]) {\n padding-block-end: calc(2 * var(--brick-toast-overlap-step));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]) {\n padding-block-start: calc(2 * var(--brick-toast-overlap-step));\n }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast {\n grid-area: 1 / 1;\n }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast[data-index=\"0\"] { z-index: 1; }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast[data-index=\"1\"] { z-index: 2; }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast[data-index=\"2\"] { z-index: 3; }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"1\"]) .brick-toast[data-index=\"0\"] {\n transform: translateY(var(--brick-toast-overlap-step));\n }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"2\"]) .brick-toast[data-index=\"0\"] {\n transform: translateY(calc(2 * var(--brick-toast-overlap-step)));\n }\n .brick-toast-viewport[data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"2\"]) .brick-toast[data-index=\"1\"] {\n transform: translateY(var(--brick-toast-overlap-step));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]) .brick-toast {\n align-self: end;\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"1\"]) .brick-toast[data-index=\"0\"] {\n transform: translateY(calc(-1 * var(--brick-toast-overlap-step)));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"2\"]) .brick-toast[data-index=\"0\"] {\n transform: translateY(calc(-2 * var(--brick-toast-overlap-step)));\n }\n .brick-toast-viewport[data-position^=\"bottom-\"][data-stacking=\"overlap\"]:not([data-expanded]):has(.brick-toast[data-index=\"2\"]) .brick-toast[data-index=\"1\"] {\n transform: translateY(calc(-1 * var(--brick-toast-overlap-step)));\n }\n\n .brick-toast__icon {\n display: inline-grid;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n place-items: center;\n color: var(--brick-toast-accent-color);\n }\n .brick-toast__icon svg {\n inline-size: 100%;\n block-size: 100%;\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2;\n }\n .brick-toast__spinner {\n inline-size: 1rem;\n block-size: 1rem;\n box-sizing: border-box;\n border: 2px solid color-mix(in srgb, currentColor 30%, transparent);\n border-block-start-color: currentColor;\n border-radius: 50%;\n animation: brick-toast-spin 800ms linear infinite;\n }\n .brick-toast__content {\n display: grid;\n min-inline-size: 0;\n gap: var(--brick-toast-content-gap);\n }\n .brick-toast__content:first-child { grid-column-start: 1; }\n .brick-toast__title,\n .brick-toast__description { margin: 0; overflow-wrap: anywhere; }\n .brick-toast__title {\n font-family: var(--brick-typography-compact-title-font-family);\n font-size: var(--brick-typography-compact-title-font-size);\n font-weight: var(--brick-typography-compact-title-font-weight);\n line-height: var(--brick-typography-compact-title-line-height);\n }\n .brick-toast__description {\n color: var(--brick-toast-description-foreground);\n font-family: var(--brick-typography-body-sm-font-family);\n font-size: var(--brick-typography-body-sm-font-size);\n line-height: var(--brick-typography-body-sm-line-height);\n }\n .brick-toast__actions { display: flex; flex-wrap: wrap; gap: var(--brick-toast-action-gap); margin-block-start: var(--brick-space-1); }\n .brick-toast__action,\n .brick-toast__close {\n border: 0;\n font: inherit;\n color: var(--brick-toast-accent-color);\n cursor: pointer;\n }\n .brick-toast__action {\n min-block-size: 2.25rem;\n border-radius: var(--brick-radius-control);\n padding-inline: var(--brick-space-2);\n background: color-mix(in srgb, var(--brick-toast-accent-color) 12%, transparent);\n color: var(--brick-color-text-primary);\n font-size: var(--brick-typography-body-sm-font-size);\n font-weight: var(--brick-typography-control-sm-font-weight);\n }\n .brick-toast__close {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--brick-space-1);\n display: inline-grid;\n inline-size: 2.75rem;\n block-size: 2.75rem;\n place-items: center;\n margin: 0;\n border-radius: var(--brick-radius-full);\n padding: 0;\n background: transparent;\n color: var(--brick-color-text-secondary);\n transform: translateY(-50%);\n }\n .brick-toast__close svg { inline-size: 1.125rem; block-size: 1.125rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }\n .brick-toast__action:hover { background: color-mix(in srgb, var(--brick-toast-accent-color) 18%, transparent); }\n .brick-toast__close:hover { background: var(--brick-color-surface-subtle); color: var(--brick-color-text-primary); }\n .brick-toast__action:focus-visible,\n .brick-toast__close:focus-visible { outline: 2px solid var(--brick-color-focus-ring); outline-offset: 2px; }\n\n @keyframes brick-toast-spin { to { transform: rotate(360deg); } }\n\n @media (max-width: 30rem) {\n .brick-toast-viewport[data-width=\"responsive\"] {\n --brick-toast-inline-size: calc(100vw - var(--brick-space-4) * 2);\n --brick-toast-offset-inline-start: var(--brick-space-2);\n --brick-toast-offset-inline-end: var(--brick-space-2);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-toast { transition: none; }\n .brick-toast[data-state=\"entering\"],\n .brick-toast[data-state=\"exiting\"] { transform: none; }\n .brick-toast__spinner { animation: none; border-style: dotted; }\n }\n\n @media (forced-colors: active) {\n .brick-toast { border-color: CanvasText; background: Canvas; box-shadow: none; color: CanvasText; forced-color-adjust: auto; }\n .brick-toast__icon,\n .brick-toast__action,\n .brick-toast__close { color: ButtonText; }\n .brick-toast__action { border: 1px solid ButtonText; background: ButtonFace; }\n .brick-toast__action:focus-visible,\n .brick-toast__close:focus-visible { outline-color: Highlight; }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-color-accent-border);background:var(--brick-color-accent-soft);color:var(--brick-color-accent-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-color-accent-solid)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline]{border-color:var(--brick-color-border-default);background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline][data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]{background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost][data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):active{background:var(--brick-color-accent-soft-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-secondary);box-shadow:none;cursor:not-allowed;opacity:.65}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled][data-state=on]{border-color:var(--brick-color-border-strong);box-shadow:inset 0 -.125rem 0 var(--brick-color-text-secondary)}:where(.brick-toggle,.brick-toggle-group-item)[data-size=sm]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}:where(.brick-toggle,.brick-toggle-group-item)[data-size=lg]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}:where(.brick-toggle,.brick-toggle-group-item)[data-shape=pill]{--brick-toggle-radius:var(--brick-radius-full)}:where(.brick-toggle,.brick-toggle-group-item)[data-icon-only]{inline-size:var(--brick-toggle-min-block-size);padding-inline:0}@media (hover:hover) and (pointer:fine){:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):hover{background:var(--brick-color-surface-base)}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled]):hover{background:var(--brick-color-surface-subtle)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}}@media (prefers-reduced-motion:reduce){:where(.brick-toggle,.brick-toggle-group-item){transition-duration:0s}}@media (forced-colors:active){:where(.brick-toggle,.brick-toggle-group-item){color:buttontext;background:buttonface;border-color:buttontext}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{color:buttontext;outline-offset:-.25rem;box-shadow:none;background:buttonface;border-color:highlight;outline:.125rem solid highlight}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{outline-offset:var(--brick-border-focus-offset);outline-color:highlight}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{color:graytext;opacity:1;border-color:graytext}}.brick-toggle-group{--brick-toggle-group-gap:.5rem;box-sizing:border-box;align-items:stretch;gap:var(--brick-toggle-group-gap);min-inline-size:0;max-inline-size:100%;display:inline-flex}.brick-toggle-group[data-orientation=horizontal]{flex-flow:wrap}.brick-toggle-group[data-orientation=vertical]{flex-direction:column}.brick-toggle-group[data-full-width]{inline-size:100%;display:flex}.brick-toggle-group[data-full-width]>.brick-toggle-group-item{flex:1 1 0}.brick-toggle-group>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-icon-size:1.125rem}.brick-toggle-group[data-size=sm]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}.brick-toggle-group[data-size=lg]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}.brick-toggle-group[data-shape=pill]>.brick-toggle-group-item{--brick-toggle-radius:var(--brick-radius-full)}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item{border-color:var(--brick-color-border-default);background:0 0}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item{background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item[data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}.brick-toggle-group[data-attached=true]{--brick-toggle-group-gap:0;flex-wrap:nowrap}.brick-toggle-group[data-attached=true]>.brick-toggle-group-item{--brick-toggle-radius:0}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item+.brick-toggle-group-item{margin-inline-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item+.brick-toggle-group-item{margin-block-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-control);border-end-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-start-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-full);border-end-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-start-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}@media (hover:hover) and (pointer:fine){.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-color-accent-border);background:var(--brick-color-accent-soft);color:var(--brick-color-accent-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-color-accent-solid)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline]{border-color:var(--brick-color-border-default);background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline][data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]{background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost][data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):active{background:var(--brick-color-accent-soft-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-secondary);box-shadow:none;cursor:not-allowed;opacity:.65}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled][data-state=on]{border-color:var(--brick-color-border-strong);box-shadow:inset 0 -.125rem 0 var(--brick-color-text-secondary)}:where(.brick-toggle,.brick-toggle-group-item)[data-size=sm]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}:where(.brick-toggle,.brick-toggle-group-item)[data-size=lg]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}:where(.brick-toggle,.brick-toggle-group-item)[data-shape=pill]{--brick-toggle-radius:var(--brick-radius-full)}:where(.brick-toggle,.brick-toggle-group-item)[data-icon-only]{inline-size:var(--brick-toggle-min-block-size);padding-inline:0}@media (hover:hover) and (pointer:fine){:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):hover{background:var(--brick-color-surface-base)}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled]):hover{background:var(--brick-color-surface-subtle)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}}@media (prefers-reduced-motion:reduce){:where(.brick-toggle,.brick-toggle-group-item){transition-duration:0s}}@media (forced-colors:active){:where(.brick-toggle,.brick-toggle-group-item){color:buttontext;background:buttonface;border-color:buttontext}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{color:buttontext;outline-offset:-.25rem;box-shadow:none;background:buttonface;border-color:highlight;outline:.125rem solid highlight}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{outline-offset:var(--brick-border-focus-offset);outline-color:highlight}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{color:graytext;opacity:1;border-color:graytext}}.brick-toggle-group{--brick-toggle-group-gap:.5rem;box-sizing:border-box;align-items:stretch;gap:var(--brick-toggle-group-gap);min-inline-size:0;max-inline-size:100%;display:inline-flex}.brick-toggle-group[data-orientation=horizontal]{flex-flow:wrap}.brick-toggle-group[data-orientation=vertical]{flex-direction:column}.brick-toggle-group[data-full-width]{inline-size:100%;display:flex}.brick-toggle-group[data-full-width]>.brick-toggle-group-item{flex:1 1 0}.brick-toggle-group>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-icon-size:1.125rem}.brick-toggle-group[data-size=sm]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}.brick-toggle-group[data-size=lg]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}.brick-toggle-group[data-shape=pill]>.brick-toggle-group-item{--brick-toggle-radius:var(--brick-radius-full)}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item{border-color:var(--brick-color-border-default);background:0 0}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item{background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item[data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}.brick-toggle-group[data-attached=true]{--brick-toggle-group-gap:0;flex-wrap:nowrap}.brick-toggle-group[data-attached=true]>.brick-toggle-group-item{--brick-toggle-radius:0}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item+.brick-toggle-group-item{margin-inline-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item+.brick-toggle-group-item{margin-block-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-control);border-end-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-start-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-full);border-end-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-start-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}@media (hover:hover) and (pointer:fine){.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=toggle-group.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,83CAsCA,4JAMA,mFAIA,mMAMA,4PAOA,mOAOA,mIAKA,sMAOA,kFAIA,+JAMA,6HAIA,sNAKA,gPASA,2LAKA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,yIAIA,iNAKA,2IAIA,8JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,8GChMF,0LAWA,gEAIA,qEAIA,mEAKA,yEAIA,gNAOA,0SAUA,6SAUA,6GAIA,iOAOA,iIAKA,oMAOA,gFAIA,6JAMA,oNAKA,oFAMA,yFAIA,gLAIA,6KAIA,oNAKA,+MAKA,kNAKA,6MAKA,+NAKA,0NAKA,6NAKA,wNAKA,wCACE,iNFzJJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle-group.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle-group/toggle-group.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";\n@import \"../../src/components/toggle-group/toggle-group.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: var(--brick-color-accent-soft);\n color: var(--brick-color-accent-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-accent-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-color-accent-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-strong);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-text-secondary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n","@layer brick.components {\n .brick-toggle-group {\n --brick-toggle-group-gap: 0.5rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n align-items: stretch;\n gap: var(--brick-toggle-group-gap);\n }\n\n .brick-toggle-group[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n }\n\n .brick-toggle-group[data-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .brick-toggle-group[data-full-width] {\n display: flex;\n inline-size: 100%;\n }\n\n .brick-toggle-group[data-full-width] > .brick-toggle-group-item {\n flex: 1 1 0;\n }\n\n .brick-toggle-group > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-icon-size: 1.125rem;\n }\n\n .brick-toggle-group[data-size=\"sm\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n .brick-toggle-group[data-size=\"lg\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n .brick-toggle-group[data-shape=\"pill\"] > .brick-toggle-group-item {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item {\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n .brick-toggle-group[data-attached=\"true\"] {\n --brick-toggle-group-gap: 0;\n\n flex-wrap: nowrap;\n }\n\n .brick-toggle-group[data-attached=\"true\"] > .brick-toggle-group-item {\n --brick-toggle-radius: 0;\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-inline-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-block-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-end-start-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-start-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-end-start-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-start-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,83CAsCA,4JAMA,mFAIA,mMAMA,4PAOA,mOAOA,mIAKA,sMAOA,kFAIA,+JAMA,6HAIA,sNAKA,gPASA,2LAKA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,yIAIA,iNAKA,2IAIA,8JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,8GChMF,0LAWA,gEAIA,qEAIA,mEAKA,yEAIA,gNAOA,0SAUA,6SAUA,6GAIA,iOAOA,iIAKA,oMAOA,gFAIA,6JAMA,oNAKA,oFAMA,yFAIA,gLAIA,6KAIA,oNAKA,+MAKA,kNAKA,6MAKA,+NAKA,0NAKA,6NAKA,wNAKA,wCACE,iNFzJJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle-group.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle-group/toggle-group.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";\n@import \"../../src/components/toggle-group/toggle-group.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: var(--brick-color-accent-soft);\n color: var(--brick-color-accent-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-accent-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-color-accent-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-strong);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-text-secondary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n","@layer brick.components {\n .brick-toggle-group {\n --brick-toggle-group-gap: 0.5rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n align-items: stretch;\n gap: var(--brick-toggle-group-gap);\n }\n\n .brick-toggle-group[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n }\n\n .brick-toggle-group[data-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .brick-toggle-group[data-full-width] {\n display: flex;\n inline-size: 100%;\n }\n\n .brick-toggle-group[data-full-width] > .brick-toggle-group-item {\n flex: 1 1 0;\n }\n\n .brick-toggle-group > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-icon-size: 1.125rem;\n }\n\n .brick-toggle-group[data-size=\"sm\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n .brick-toggle-group[data-size=\"lg\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n .brick-toggle-group[data-shape=\"pill\"] > .brick-toggle-group-item {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item {\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n .brick-toggle-group[data-attached=\"true\"] {\n --brick-toggle-group-gap: 0;\n\n flex-wrap: nowrap;\n }\n\n .brick-toggle-group[data-attached=\"true\"] > .brick-toggle-group-item {\n --brick-toggle-radius: 0;\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-inline-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-block-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-end-start-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-start-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-end-start-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-start-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n }\n}\n"],"names":[]}
|
package/dist/styles/toggle.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-color-accent-border);background:var(--brick-color-accent-soft);color:var(--brick-color-accent-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-color-accent-solid)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline]{border-color:var(--brick-color-border-default);background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline][data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]{background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost][data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):active{background:var(--brick-color-accent-soft-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-secondary);box-shadow:none;cursor:not-allowed;opacity:.65}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled][data-state=on]{border-color:var(--brick-color-border-strong);box-shadow:inset 0 -.125rem 0 var(--brick-color-text-secondary)}:where(.brick-toggle,.brick-toggle-group-item)[data-size=sm]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}:where(.brick-toggle,.brick-toggle-group-item)[data-size=lg]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}:where(.brick-toggle,.brick-toggle-group-item)[data-shape=pill]{--brick-toggle-radius:var(--brick-radius-full)}:where(.brick-toggle,.brick-toggle-group-item)[data-icon-only]{inline-size:var(--brick-toggle-min-block-size);padding-inline:0}@media (hover:hover) and (pointer:fine){:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):hover{background:var(--brick-color-surface-base)}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled]):hover{background:var(--brick-color-surface-subtle)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}}@media (prefers-reduced-motion:reduce){:where(.brick-toggle,.brick-toggle-group-item){transition-duration:0s}}@media (forced-colors:active){:where(.brick-toggle,.brick-toggle-group-item){color:buttontext;background:buttonface;border-color:buttontext}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{color:buttontext;outline-offset:-.25rem;box-shadow:none;background:buttonface;border-color:highlight;outline:.125rem solid highlight}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{outline-offset:var(--brick-border-focus-offset);outline-color:highlight}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{color:graytext;opacity:1;border-color:graytext}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-color-accent-border);background:var(--brick-color-accent-soft);color:var(--brick-color-accent-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-color-accent-solid)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline]{border-color:var(--brick-color-border-default);background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline][data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]{background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost][data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):active{background:var(--brick-color-accent-soft-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-secondary);box-shadow:none;cursor:not-allowed;opacity:.65}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled][data-state=on]{border-color:var(--brick-color-border-strong);box-shadow:inset 0 -.125rem 0 var(--brick-color-text-secondary)}:where(.brick-toggle,.brick-toggle-group-item)[data-size=sm]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}:where(.brick-toggle,.brick-toggle-group-item)[data-size=lg]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}:where(.brick-toggle,.brick-toggle-group-item)[data-shape=pill]{--brick-toggle-radius:var(--brick-radius-full)}:where(.brick-toggle,.brick-toggle-group-item)[data-icon-only]{inline-size:var(--brick-toggle-min-block-size);padding-inline:0}@media (hover:hover) and (pointer:fine){:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):hover{background:var(--brick-color-surface-base)}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled]):hover{background:var(--brick-color-surface-subtle)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}}@media (prefers-reduced-motion:reduce){:where(.brick-toggle,.brick-toggle-group-item){transition-duration:0s}}@media (forced-colors:active){:where(.brick-toggle,.brick-toggle-group-item){color:buttontext;background:buttonface;border-color:buttontext}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{color:buttontext;outline-offset:-.25rem;box-shadow:none;background:buttonface;border-color:highlight;outline:.125rem solid highlight}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{outline-offset:var(--brick-border-focus-offset);outline-color:highlight}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{color:graytext;opacity:1;border-color:graytext}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=toggle.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,83CAsCA,4JAMA,mFAIA,mMAMA,4PAOA,mOAOA,mIAKA,sMAOA,kFAIA,+JAMA,6HAIA,sNAKA,gPASA,2LAKA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,yIAIA,iNAKA,2IAIA,8JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,+GDjMJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: var(--brick-color-accent-soft);\n color: var(--brick-color-accent-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-accent-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-color-accent-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-strong);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-text-secondary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,83CAsCA,4JAMA,mFAIA,mMAMA,4PAOA,mOAOA,mIAKA,sMAOA,kFAIA,+JAMA,6HAIA,sNAKA,gPASA,2LAKA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,yIAIA,iNAKA,2IAIA,8JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,+GDjMJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: var(--brick-color-accent-soft);\n color: var(--brick-color-accent-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-accent-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-color-accent-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-strong);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-text-secondary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n"],"names":[]}
|
package/dist/styles/toolbar.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-toolbar{--brick-toolbar-surface:var(--brick-color-surface-subtle);--brick-toolbar-border-color:transparent;--brick-toolbar-radius:var(--brick-radius-control);--brick-toolbar-gap:.25rem;--brick-toolbar-padding:.25rem;--brick-toolbar-item-size:var(--brick-control-min-block-size-md);--brick-toolbar-item-padding-inline:.75rem;--brick-toolbar-item-radius:calc(var(--brick-toolbar-radius) - .125rem);--brick-toolbar-item-background:transparent;--brick-toolbar-item-selected-background:var(--brick-color-accent-soft);--brick-toolbar-separator-color:var(--brick-color-border-default);box-sizing:border-box;align-items:center;gap:var(--brick-toolbar-gap);min-inline-size:0;max-inline-size:100%;padding:var(--brick-toolbar-padding);border:var(--brick-border-width) solid var(--brick-toolbar-border-color);border-radius:var(--brick-toolbar-radius);background:var(--brick-toolbar-surface);color:var(--brick-color-text-primary);scrollbar-width:thin;display:inline-flex;overflow:auto hidden}.brick-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;overflow:hidden auto}.brick-toolbar[data-variant=plain]{--brick-toolbar-surface:transparent;--brick-toolbar-padding:0}.brick-toolbar[data-variant=outline]{--brick-toolbar-surface:var(--brick-color-surface-base);--brick-toolbar-border-color:var(--brick-color-border-default)}.brick-toolbar[data-size=sm]{--brick-toolbar-item-size:var(--brick-control-min-block-size-sm);--brick-toolbar-item-padding-inline:.625rem}.brick-toolbar[data-size=lg]{--brick-toolbar-item-size:var(--brick-control-min-block-size-lg);--brick-toolbar-item-padding-inline:1rem}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){box-sizing:border-box;min-block-size:var(--brick-toolbar-item-size);padding:.25rem var(--brick-toolbar-item-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toolbar-item-radius);appearance:none;background:var(--brick-toolbar-item-background);color:inherit;font:inherit;font-family:var(--brick-typography-control-md-font-family);font-weight:var(--brick-typography-control-md-font-weight);line-height:var(--brick-typography-control-md-line-height);white-space:nowrap;cursor:pointer;flex:none;justify-content:center;align-items:center;gap:.375rem;text-decoration:none;display:inline-flex}.brick-toolbar[data-size=sm] :where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){font-size:var(--brick-typography-control-sm-font-size)}.brick-toolbar[data-size=lg] :where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){font-size:var(--brick-typography-control-lg-font-size)}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item)>:where(svg,img){flex:none;block-size:1em;inline-size:1em}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item)[data-disabled]{color:var(--brick-color-text-disabled);cursor:not-allowed}.brick-toolbar__toggle-item[data-state=on]{border-color:var(--brick-color-accent-border);background:var(--brick-toolbar-item-selected-background);color:var(--brick-color-accent-text)}.brick-toolbar__toggle-group{display:contents}.brick-toolbar__separator{inline-size:var(--brick-border-width);background:var(--brick-toolbar-separator-color);flex:none;align-self:stretch;min-block-size:1.25rem;margin:0 .125rem}.brick-toolbar__separator[data-orientation=horizontal]{min-block-size:0;inline-size:auto;block-size:var(--brick-border-width);min-inline-size:1.25rem;margin:.125rem 0}@media (hover:hover) and (pointer:fine){:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item):not([data-disabled]):hover{background:var(--brick-color-surface-raised)}}@media (prefers-reduced-motion:reduce){:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){transition:none}}@media (forced-colors:active){.brick-toolbar{border-color:canvastext}.brick-toolbar__toggle-item[data-state=on]{outline:2px solid highlight}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-toolbar{--brick-toolbar-surface:var(--brick-color-surface-subtle);--brick-toolbar-border-color:transparent;--brick-toolbar-radius:var(--brick-radius-control);--brick-toolbar-gap:.25rem;--brick-toolbar-padding:.25rem;--brick-toolbar-item-size:var(--brick-control-min-block-size-md);--brick-toolbar-item-padding-inline:.75rem;--brick-toolbar-item-radius:calc(var(--brick-toolbar-radius) - .125rem);--brick-toolbar-item-background:transparent;--brick-toolbar-item-selected-background:var(--brick-color-accent-soft);--brick-toolbar-separator-color:var(--brick-color-border-default);box-sizing:border-box;align-items:center;gap:var(--brick-toolbar-gap);min-inline-size:0;max-inline-size:100%;padding:var(--brick-toolbar-padding);border:var(--brick-border-width) solid var(--brick-toolbar-border-color);border-radius:var(--brick-toolbar-radius);background:var(--brick-toolbar-surface);color:var(--brick-color-text-primary);scrollbar-width:thin;display:inline-flex;overflow:auto hidden}.brick-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;overflow:hidden auto}.brick-toolbar[data-variant=plain]{--brick-toolbar-surface:transparent;--brick-toolbar-padding:0}.brick-toolbar[data-variant=outline]{--brick-toolbar-surface:var(--brick-color-surface-base);--brick-toolbar-border-color:var(--brick-color-border-default)}.brick-toolbar[data-size=sm]{--brick-toolbar-item-size:var(--brick-control-min-block-size-sm);--brick-toolbar-item-padding-inline:.625rem}.brick-toolbar[data-size=lg]{--brick-toolbar-item-size:var(--brick-control-min-block-size-lg);--brick-toolbar-item-padding-inline:1rem}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){box-sizing:border-box;min-block-size:var(--brick-toolbar-item-size);padding:.25rem var(--brick-toolbar-item-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toolbar-item-radius);appearance:none;background:var(--brick-toolbar-item-background);color:inherit;font:inherit;font-family:var(--brick-typography-control-md-font-family);font-weight:var(--brick-typography-control-md-font-weight);line-height:var(--brick-typography-control-md-line-height);white-space:nowrap;cursor:pointer;flex:none;justify-content:center;align-items:center;gap:.375rem;text-decoration:none;display:inline-flex}.brick-toolbar[data-size=sm] :where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){font-size:var(--brick-typography-control-sm-font-size)}.brick-toolbar[data-size=lg] :where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){font-size:var(--brick-typography-control-lg-font-size)}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item)>:where(svg,img){flex:none;block-size:1em;inline-size:1em}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item)[data-disabled]{color:var(--brick-color-text-disabled);cursor:not-allowed}.brick-toolbar__toggle-item[data-state=on]{border-color:var(--brick-color-accent-border);background:var(--brick-toolbar-item-selected-background);color:var(--brick-color-accent-text)}.brick-toolbar__toggle-group{display:contents}.brick-toolbar__separator{inline-size:var(--brick-border-width);background:var(--brick-toolbar-separator-color);flex:none;align-self:stretch;min-block-size:1.25rem;margin:0 .125rem}.brick-toolbar__separator[data-orientation=horizontal]{min-block-size:0;inline-size:auto;block-size:var(--brick-border-width);min-inline-size:1.25rem;margin:.125rem 0}@media (hover:hover) and (pointer:fine){:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item):not([data-disabled]):hover{background:var(--brick-color-surface-raised)}}@media (prefers-reduced-motion:reduce){:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){transition:none}}@media (forced-colors:active){.brick-toolbar{border-color:canvastext}.brick-toolbar__toggle-item[data-state=on]{outline:2px solid highlight}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=toolbar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,09BA2BA,yGACA,iGACA,4JACA,0IACA,uIACA,qsBAMA,oKACA,oKACA,yIACA,oOACA,yJACA,uLACA,8CACA,qLACA,uKACA,wCAA4C,yJAC5C,uCAA0C,iGAC1C,8BAAiC,uCAA6C,yEDlDhF","sources":["home/runner/work/brick/brick/.brick-cache/production/toolbar.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toolbar/toolbar.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toolbar/toolbar.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-toolbar {\n --brick-toolbar-surface: var(--brick-color-surface-subtle);\n --brick-toolbar-border-color: transparent;\n --brick-toolbar-radius: var(--brick-radius-control);\n --brick-toolbar-gap: 0.25rem;\n --brick-toolbar-padding: 0.25rem;\n --brick-toolbar-item-size: var(--brick-control-min-block-size-md);\n --brick-toolbar-item-padding-inline: 0.75rem;\n --brick-toolbar-item-radius: calc(var(--brick-toolbar-radius) - 0.125rem);\n --brick-toolbar-item-background: transparent;\n --brick-toolbar-item-selected-background: var(--brick-color-accent-soft);\n --brick-toolbar-separator-color: var(--brick-color-border-default);\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n align-items: center;\n gap: var(--brick-toolbar-gap);\n padding: var(--brick-toolbar-padding);\n border: var(--brick-border-width) solid var(--brick-toolbar-border-color);\n border-radius: var(--brick-toolbar-radius);\n background: var(--brick-toolbar-surface);\n color: var(--brick-color-text-primary);\n overflow: auto hidden;\n scrollbar-width: thin;\n }\n .brick-toolbar[data-orientation=\"vertical\"] { flex-direction: column; align-items: stretch; overflow: hidden auto; }\n .brick-toolbar[data-variant=\"plain\"] { --brick-toolbar-surface: transparent; --brick-toolbar-padding: 0; }\n .brick-toolbar[data-variant=\"outline\"] { --brick-toolbar-surface: var(--brick-color-surface-base); --brick-toolbar-border-color: var(--brick-color-border-default); }\n .brick-toolbar[data-size=\"sm\"] { --brick-toolbar-item-size: var(--brick-control-min-block-size-sm); --brick-toolbar-item-padding-inline: 0.625rem; }\n .brick-toolbar[data-size=\"lg\"] { --brick-toolbar-item-size: var(--brick-control-min-block-size-lg); --brick-toolbar-item-padding-inline: 1rem; }\n :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) {\n display: inline-flex; box-sizing: border-box; flex: 0 0 auto; min-block-size: var(--brick-toolbar-item-size); align-items: center; justify-content: center;\n gap: 0.375rem; padding: 0.25rem var(--brick-toolbar-item-padding-inline); border: var(--brick-border-width) solid transparent; border-radius: var(--brick-toolbar-item-radius);\n appearance: none; background: var(--brick-toolbar-item-background); color: inherit; font: inherit; font-family: var(--brick-typography-control-md-font-family); font-weight: var(--brick-typography-control-md-font-weight);\n line-height: var(--brick-typography-control-md-line-height); text-decoration: none; white-space: nowrap; cursor: pointer;\n }\n .brick-toolbar[data-size=\"sm\"] :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) { font-size: var(--brick-typography-control-sm-font-size); }\n .brick-toolbar[data-size=\"lg\"] :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) { font-size: var(--brick-typography-control-lg-font-size); }\n :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) > :where(svg, img) { inline-size: 1em; block-size: 1em; flex: none; }\n :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item):focus-visible { z-index: 1; outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring); outline-offset: var(--brick-border-focus-offset); }\n :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item)[data-disabled] { color: var(--brick-color-text-disabled); cursor: not-allowed; }\n .brick-toolbar__toggle-item[data-state=\"on\"] { border-color: var(--brick-color-accent-border); background: var(--brick-toolbar-item-selected-background); color: var(--brick-color-accent-text); }\n .brick-toolbar__toggle-group { display: contents; }\n .brick-toolbar__separator { flex: 0 0 auto; align-self: stretch; inline-size: var(--brick-border-width); min-block-size: 1.25rem; margin: 0 0.125rem; background: var(--brick-toolbar-separator-color); }\n .brick-toolbar__separator[data-orientation=\"horizontal\"] { inline-size: auto; min-block-size: 0; block-size: var(--brick-border-width); min-inline-size: 1.25rem; margin: 0.125rem 0; }\n @media (hover: hover) and (pointer: fine) { :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item):not([data-disabled]):hover { background: var(--brick-color-surface-raised); } }\n @media (prefers-reduced-motion: reduce) { :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) { transition: none; } }\n @media (forced-colors: active) { .brick-toolbar { border-color: CanvasText; } .brick-toolbar__toggle-item[data-state=\"on\"] { outline: 2px solid Highlight; } }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,09BA2BA,yGACA,iGACA,4JACA,0IACA,uIACA,qsBAMA,oKACA,oKACA,yIACA,oOACA,yJACA,uLACA,8CACA,qLACA,uKACA,wCAA4C,yJAC5C,uCAA0C,iGAC1C,8BAAiC,uCAA6C,yEDlDhF","sources":["home/runner/work/brick/brick/.brick-cache/production/toolbar.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toolbar/toolbar.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toolbar/toolbar.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-toolbar {\n --brick-toolbar-surface: var(--brick-color-surface-subtle);\n --brick-toolbar-border-color: transparent;\n --brick-toolbar-radius: var(--brick-radius-control);\n --brick-toolbar-gap: 0.25rem;\n --brick-toolbar-padding: 0.25rem;\n --brick-toolbar-item-size: var(--brick-control-min-block-size-md);\n --brick-toolbar-item-padding-inline: 0.75rem;\n --brick-toolbar-item-radius: calc(var(--brick-toolbar-radius) - 0.125rem);\n --brick-toolbar-item-background: transparent;\n --brick-toolbar-item-selected-background: var(--brick-color-accent-soft);\n --brick-toolbar-separator-color: var(--brick-color-border-default);\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n align-items: center;\n gap: var(--brick-toolbar-gap);\n padding: var(--brick-toolbar-padding);\n border: var(--brick-border-width) solid var(--brick-toolbar-border-color);\n border-radius: var(--brick-toolbar-radius);\n background: var(--brick-toolbar-surface);\n color: var(--brick-color-text-primary);\n overflow: auto hidden;\n scrollbar-width: thin;\n }\n .brick-toolbar[data-orientation=\"vertical\"] { flex-direction: column; align-items: stretch; overflow: hidden auto; }\n .brick-toolbar[data-variant=\"plain\"] { --brick-toolbar-surface: transparent; --brick-toolbar-padding: 0; }\n .brick-toolbar[data-variant=\"outline\"] { --brick-toolbar-surface: var(--brick-color-surface-base); --brick-toolbar-border-color: var(--brick-color-border-default); }\n .brick-toolbar[data-size=\"sm\"] { --brick-toolbar-item-size: var(--brick-control-min-block-size-sm); --brick-toolbar-item-padding-inline: 0.625rem; }\n .brick-toolbar[data-size=\"lg\"] { --brick-toolbar-item-size: var(--brick-control-min-block-size-lg); --brick-toolbar-item-padding-inline: 1rem; }\n :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) {\n display: inline-flex; box-sizing: border-box; flex: 0 0 auto; min-block-size: var(--brick-toolbar-item-size); align-items: center; justify-content: center;\n gap: 0.375rem; padding: 0.25rem var(--brick-toolbar-item-padding-inline); border: var(--brick-border-width) solid transparent; border-radius: var(--brick-toolbar-item-radius);\n appearance: none; background: var(--brick-toolbar-item-background); color: inherit; font: inherit; font-family: var(--brick-typography-control-md-font-family); font-weight: var(--brick-typography-control-md-font-weight);\n line-height: var(--brick-typography-control-md-line-height); text-decoration: none; white-space: nowrap; cursor: pointer;\n }\n .brick-toolbar[data-size=\"sm\"] :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) { font-size: var(--brick-typography-control-sm-font-size); }\n .brick-toolbar[data-size=\"lg\"] :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) { font-size: var(--brick-typography-control-lg-font-size); }\n :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) > :where(svg, img) { inline-size: 1em; block-size: 1em; flex: none; }\n :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item):focus-visible { z-index: 1; outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring); outline-offset: var(--brick-border-focus-offset); }\n :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item)[data-disabled] { color: var(--brick-color-text-disabled); cursor: not-allowed; }\n .brick-toolbar__toggle-item[data-state=\"on\"] { border-color: var(--brick-color-accent-border); background: var(--brick-toolbar-item-selected-background); color: var(--brick-color-accent-text); }\n .brick-toolbar__toggle-group { display: contents; }\n .brick-toolbar__separator { flex: 0 0 auto; align-self: stretch; inline-size: var(--brick-border-width); min-block-size: 1.25rem; margin: 0 0.125rem; background: var(--brick-toolbar-separator-color); }\n .brick-toolbar__separator[data-orientation=\"horizontal\"] { inline-size: auto; min-block-size: 0; block-size: var(--brick-border-width); min-inline-size: 1.25rem; margin: 0.125rem 0; }\n @media (hover: hover) and (pointer: fine) { :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item):not([data-disabled]):hover { background: var(--brick-color-surface-raised); } }\n @media (prefers-reduced-motion: reduce) { :where(.brick-toolbar__button, .brick-toolbar__link, .brick-toolbar__toggle-item) { transition: none; } }\n @media (forced-colors: active) { .brick-toolbar { border-color: CanvasText; } .brick-toolbar__toggle-item[data-state=\"on\"] { outline: 2px solid Highlight; } }\n}\n"],"names":[]}
|
package/dist/styles/tooltip.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-tooltip__arrow,.brick-hover-card__arrow,.brick-popover__arrow){color:var(--brick-floating-arrow-stroke,var(--brick-tooltip-border-color));fill:var(--brick-floating-arrow-fill,var(--brick-tooltip-background));filter:drop-shadow(0 1px 0 var(--brick-floating-arrow-stroke,var(--brick-tooltip-border-color)))}.brick-tooltip{--brick-tooltip-background:var(--brick-color-text-primary);--brick-tooltip-foreground:var(--brick-color-surface-base);--brick-tooltip-border-color:color-mix(in srgb, var(--brick-tooltip-foreground), transparent 72%);--brick-tooltip-radius:var(--brick-radius-control);--brick-tooltip-shadow:0 .5rem 1.5rem color-mix(in srgb, var(--brick-color-shadow), transparent 28%);--brick-tooltip-max-inline-size:20rem;--brick-tooltip-padding-block:var(--brick-space-2);--brick-tooltip-padding-inline:var(--brick-space-3);--brick-tooltip-rich-max-inline-size:24rem;--brick-tooltip-rich-gap:var(--brick-space-1);z-index:calc(var(--brick-layer-overlay) - 1);box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--brick-tooltip-max-inline-size), calc(100vi - 2rem));padding-block:var(--brick-tooltip-padding-block);padding-inline:var(--brick-tooltip-padding-inline);border:var(--brick-border-width) solid var(--brick-tooltip-border-color);border-radius:var(--brick-tooltip-radius);background:var(--brick-tooltip-background);box-shadow:var(--brick-tooltip-shadow);color:var(--brick-tooltip-foreground);font-family:var(--brick-typography-supporting-sm-font-family);font-size:var(--brick-typography-supporting-sm-font-size);font-weight:var(--brick-typography-supporting-sm-font-weight);letter-spacing:var(--brick-typography-supporting-sm-letter-spacing);line-height:var(--brick-typography-supporting-sm-line-height);opacity:0;overflow-wrap:anywhere;pointer-events:auto;transition:opacity var(--brick-motion-duration-fast) var(--brick-motion-easing-enter), translate var(--brick-motion-duration-fast) var(--brick-motion-easing-enter);translate:0}.brick-tooltip[data-positioned]{opacity:1}.brick-tooltip[data-state=closed]{opacity:0}.brick-tooltip[data-side=top]:not([data-state=closed]){translate:0 -.2rem}.brick-tooltip[data-side=bottom]:not([data-state=closed]){translate:0 .2rem}.brick-tooltip[data-side=left]:not([data-state=closed]){translate:-.2rem}.brick-tooltip[data-side=right]:not([data-state=closed]){translate:.2rem}.brick-tooltip[data-shape=pill]{--brick-tooltip-radius:var(--brick-radius-full)}.brick-tooltip[data-variant=rich]{max-inline-size:min(var(--brick-tooltip-rich-max-inline-size), calc(100vi - 2rem));gap:var(--brick-tooltip-rich-gap);padding-block:var(--brick-space-3);padding-inline:var(--brick-space-4);display:grid}.brick-tooltip[data-side=top] .brick-tooltip__arrow{translate:0 calc(var(--brick-border-width) * -1);filter:drop-shadow(0 1px 0 var(--brick-tooltip-border-color))}.brick-tooltip[data-side=right] .brick-tooltip__arrow{translate:var(--brick-border-width) 0;filter:drop-shadow(-1px 0 0 var(--brick-tooltip-border-color))}.brick-tooltip[data-side=bottom] .brick-tooltip__arrow{translate:0 var(--brick-border-width);filter:drop-shadow(0 -1px 0 var(--brick-tooltip-border-color))}.brick-tooltip[data-side=left] .brick-tooltip__arrow{translate:calc(var(--brick-border-width) * -1) 0;filter:drop-shadow(1px 0 0 var(--brick-tooltip-border-color))}.brick-tooltip__title,.brick-tooltip__description{min-inline-size:0;margin:0}.brick-tooltip__title{color:inherit;font-family:var(--brick-typography-compact-title-font-family);font-size:var(--brick-typography-compact-title-font-size);font-weight:var(--brick-typography-compact-title-font-weight);letter-spacing:var(--brick-typography-compact-title-letter-spacing);line-height:var(--brick-typography-compact-title-line-height)}.brick-tooltip__description{color:color-mix(in srgb, currentColor, transparent 18%);font-family:var(--brick-typography-supporting-sm-font-family);font-size:var(--brick-typography-supporting-sm-font-size);font-weight:var(--brick-typography-supporting-sm-font-weight);letter-spacing:var(--brick-typography-supporting-sm-letter-spacing);line-height:var(--brick-typography-supporting-sm-line-height)}@media (prefers-reduced-motion:reduce){.brick-tooltip{transition-duration:1ms;translate:0}}@media (forced-colors:active){.brick-tooltip{--brick-tooltip-background:Canvas;--brick-tooltip-foreground:CanvasText;--brick-tooltip-border-color:CanvasText;box-shadow:none}.brick-tooltip__arrow{color:canvastext;fill:canvas;filter:none;stroke:canvastext}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-tooltip__arrow,.brick-hover-card__arrow,.brick-popover__arrow){color:var(--brick-floating-arrow-stroke,var(--brick-tooltip-border-color));fill:var(--brick-floating-arrow-fill,var(--brick-tooltip-background));filter:drop-shadow(0 1px 0 var(--brick-floating-arrow-stroke,var(--brick-tooltip-border-color)))}.brick-tooltip{--brick-tooltip-background:var(--brick-color-text-primary);--brick-tooltip-foreground:var(--brick-color-surface-base);--brick-tooltip-border-color:color-mix(in srgb, var(--brick-tooltip-foreground), transparent 72%);--brick-tooltip-radius:var(--brick-radius-control);--brick-tooltip-shadow:0 .5rem 1.5rem color-mix(in srgb, var(--brick-color-shadow), transparent 28%);--brick-tooltip-max-inline-size:20rem;--brick-tooltip-padding-block:var(--brick-space-2);--brick-tooltip-padding-inline:var(--brick-space-3);--brick-tooltip-rich-max-inline-size:24rem;--brick-tooltip-rich-gap:var(--brick-space-1);z-index:calc(var(--brick-layer-overlay) - 1);box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--brick-tooltip-max-inline-size), calc(100vi - 2rem));padding-block:var(--brick-tooltip-padding-block);padding-inline:var(--brick-tooltip-padding-inline);border:var(--brick-border-width) solid var(--brick-tooltip-border-color);border-radius:var(--brick-tooltip-radius);background:var(--brick-tooltip-background);box-shadow:var(--brick-tooltip-shadow);color:var(--brick-tooltip-foreground);font-family:var(--brick-typography-supporting-sm-font-family);font-size:var(--brick-typography-supporting-sm-font-size);font-weight:var(--brick-typography-supporting-sm-font-weight);letter-spacing:var(--brick-typography-supporting-sm-letter-spacing);line-height:var(--brick-typography-supporting-sm-line-height);opacity:0;overflow-wrap:anywhere;pointer-events:auto;transition:opacity var(--brick-motion-duration-fast) var(--brick-motion-easing-enter), translate var(--brick-motion-duration-fast) var(--brick-motion-easing-enter);translate:0}.brick-tooltip[data-positioned]{opacity:1}.brick-tooltip[data-state=closed]{opacity:0}.brick-tooltip[data-side=top]:not([data-state=closed]){translate:0 -.2rem}.brick-tooltip[data-side=bottom]:not([data-state=closed]){translate:0 .2rem}.brick-tooltip[data-side=left]:not([data-state=closed]){translate:-.2rem}.brick-tooltip[data-side=right]:not([data-state=closed]){translate:.2rem}.brick-tooltip[data-shape=pill]{--brick-tooltip-radius:var(--brick-radius-full)}.brick-tooltip[data-variant=rich]{max-inline-size:min(var(--brick-tooltip-rich-max-inline-size), calc(100vi - 2rem));gap:var(--brick-tooltip-rich-gap);padding-block:var(--brick-space-3);padding-inline:var(--brick-space-4);display:grid}.brick-tooltip[data-side=top] .brick-tooltip__arrow{translate:0 calc(var(--brick-border-width) * -1);filter:drop-shadow(0 1px 0 var(--brick-tooltip-border-color))}.brick-tooltip[data-side=right] .brick-tooltip__arrow{translate:var(--brick-border-width) 0;filter:drop-shadow(-1px 0 0 var(--brick-tooltip-border-color))}.brick-tooltip[data-side=bottom] .brick-tooltip__arrow{translate:0 var(--brick-border-width);filter:drop-shadow(0 -1px 0 var(--brick-tooltip-border-color))}.brick-tooltip[data-side=left] .brick-tooltip__arrow{translate:calc(var(--brick-border-width) * -1) 0;filter:drop-shadow(1px 0 0 var(--brick-tooltip-border-color))}.brick-tooltip__title,.brick-tooltip__description{min-inline-size:0;margin:0}.brick-tooltip__title{color:inherit;font-family:var(--brick-typography-compact-title-font-family);font-size:var(--brick-typography-compact-title-font-size);font-weight:var(--brick-typography-compact-title-font-weight);letter-spacing:var(--brick-typography-compact-title-letter-spacing);line-height:var(--brick-typography-compact-title-line-height)}.brick-tooltip__description{color:color-mix(in srgb, currentColor, transparent 18%);font-family:var(--brick-typography-supporting-sm-font-family);font-size:var(--brick-typography-supporting-sm-font-size);font-weight:var(--brick-typography-supporting-sm-font-weight);letter-spacing:var(--brick-typography-supporting-sm-letter-spacing);line-height:var(--brick-typography-supporting-sm-line-height)}@media (prefers-reduced-motion:reduce){.brick-tooltip{transition-duration:1ms;translate:0}}@media (forced-colors:active){.brick-tooltip{--brick-tooltip-background:Canvas;--brick-tooltip-foreground:CanvasText;--brick-tooltip-border-color:CanvasText;box-shadow:none}.brick-tooltip__arrow{color:canvastext;fill:canvas;filter:none;stroke:canvastext}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=tooltip.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,+TCAA,0nDAqCA,0CAIA,4CAIA,0EAIA,4EAIA,yEAIA,yEAIA,gFAIA,2OAQA,mKAKA,2JAKA,4JAKA,oKAKA,6EAMA,4VASA,4YASA,uCACE,oDAMF,8BACE,+IAOA,mFFrIJ","sources":["home/runner/work/brick/brick/.brick-cache/production/tooltip.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/floating-arrow.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/tooltip/tooltip.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/styles/floating-arrow.css\";\n@import \"../../src/components/tooltip/tooltip.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n :where(.brick-tooltip__arrow, .brick-hover-card__arrow, .brick-popover__arrow) {\n color: var(--brick-floating-arrow-stroke, var(--brick-tooltip-border-color));\n fill: var(--brick-floating-arrow-fill, var(--brick-tooltip-background));\n filter: drop-shadow(0 1px 0 var(--brick-floating-arrow-stroke, var(--brick-tooltip-border-color)));\n }\n}\n","@layer brick.components {\n .brick-tooltip {\n --brick-tooltip-background: var(--brick-color-text-primary);\n --brick-tooltip-foreground: var(--brick-color-surface-base);\n --brick-tooltip-border-color: color-mix(in srgb, var(--brick-tooltip-foreground), transparent 72%);\n --brick-tooltip-radius: var(--brick-radius-control);\n --brick-tooltip-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--brick-color-shadow), transparent 28%);\n --brick-tooltip-max-inline-size: 20rem;\n --brick-tooltip-padding-block: var(--brick-space-2);\n --brick-tooltip-padding-inline: var(--brick-space-3);\n --brick-tooltip-rich-max-inline-size: 24rem;\n --brick-tooltip-rich-gap: var(--brick-space-1);\n\n z-index: calc(var(--brick-layer-overlay) - 1);\n box-sizing: border-box;\n inline-size: max-content;\n max-inline-size: min(var(--brick-tooltip-max-inline-size), calc(100vi - 2rem));\n padding-block: var(--brick-tooltip-padding-block);\n padding-inline: var(--brick-tooltip-padding-inline);\n border: var(--brick-border-width) solid var(--brick-tooltip-border-color);\n border-radius: var(--brick-tooltip-radius);\n background: var(--brick-tooltip-background);\n box-shadow: var(--brick-tooltip-shadow);\n color: var(--brick-tooltip-foreground);\n font-family: var(--brick-typography-supporting-sm-font-family);\n font-size: var(--brick-typography-supporting-sm-font-size);\n font-weight: var(--brick-typography-supporting-sm-font-weight);\n letter-spacing: var(--brick-typography-supporting-sm-letter-spacing);\n line-height: var(--brick-typography-supporting-sm-line-height);\n opacity: 0;\n overflow-wrap: anywhere;\n pointer-events: auto;\n translate: 0 0;\n transition:\n opacity var(--brick-motion-duration-fast) var(--brick-motion-easing-enter),\n translate var(--brick-motion-duration-fast) var(--brick-motion-easing-enter);\n }\n\n .brick-tooltip[data-positioned] {\n opacity: 1;\n }\n\n .brick-tooltip[data-state=\"closed\"] {\n opacity: 0;\n }\n\n .brick-tooltip[data-side=\"top\"]:not([data-state=\"closed\"]) {\n translate: 0 -0.2rem;\n }\n\n .brick-tooltip[data-side=\"bottom\"]:not([data-state=\"closed\"]) {\n translate: 0 0.2rem;\n }\n\n .brick-tooltip[data-side=\"left\"]:not([data-state=\"closed\"]) {\n translate: -0.2rem 0;\n }\n\n .brick-tooltip[data-side=\"right\"]:not([data-state=\"closed\"]) {\n translate: 0.2rem 0;\n }\n\n .brick-tooltip[data-shape=\"pill\"] {\n --brick-tooltip-radius: var(--brick-radius-full);\n }\n\n .brick-tooltip[data-variant=\"rich\"] {\n display: grid;\n max-inline-size: min(var(--brick-tooltip-rich-max-inline-size), calc(100vi - 2rem));\n gap: var(--brick-tooltip-rich-gap);\n padding-block: var(--brick-space-3);\n padding-inline: var(--brick-space-4);\n }\n\n .brick-tooltip[data-side=\"top\"] .brick-tooltip__arrow {\n translate: 0 calc(var(--brick-border-width) * -1);\n filter: drop-shadow(0 1px 0 var(--brick-tooltip-border-color));\n }\n\n .brick-tooltip[data-side=\"right\"] .brick-tooltip__arrow {\n translate: var(--brick-border-width) 0;\n filter: drop-shadow(-1px 0 0 var(--brick-tooltip-border-color));\n }\n\n .brick-tooltip[data-side=\"bottom\"] .brick-tooltip__arrow {\n translate: 0 var(--brick-border-width);\n filter: drop-shadow(0 -1px 0 var(--brick-tooltip-border-color));\n }\n\n .brick-tooltip[data-side=\"left\"] .brick-tooltip__arrow {\n translate: calc(var(--brick-border-width) * -1) 0;\n filter: drop-shadow(1px 0 0 var(--brick-tooltip-border-color));\n }\n\n .brick-tooltip__title,\n .brick-tooltip__description {\n min-inline-size: 0;\n margin: 0;\n }\n\n .brick-tooltip__title {\n color: inherit;\n font-family: var(--brick-typography-compact-title-font-family);\n font-size: var(--brick-typography-compact-title-font-size);\n font-weight: var(--brick-typography-compact-title-font-weight);\n letter-spacing: var(--brick-typography-compact-title-letter-spacing);\n line-height: var(--brick-typography-compact-title-line-height);\n }\n\n .brick-tooltip__description {\n color: color-mix(in srgb, currentColor, transparent 18%);\n font-family: var(--brick-typography-supporting-sm-font-family);\n font-size: var(--brick-typography-supporting-sm-font-size);\n font-weight: var(--brick-typography-supporting-sm-font-weight);\n letter-spacing: var(--brick-typography-supporting-sm-letter-spacing);\n line-height: var(--brick-typography-supporting-sm-line-height);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-tooltip {\n translate: 0 0;\n transition-duration: 1ms;\n }\n }\n\n @media (forced-colors: active) {\n .brick-tooltip {\n --brick-tooltip-background: Canvas;\n --brick-tooltip-foreground: CanvasText;\n --brick-tooltip-border-color: CanvasText;\n box-shadow: none;\n }\n\n .brick-tooltip__arrow {\n color: CanvasText;\n fill: Canvas;\n filter: none;\n stroke: CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,+TCAA,0nDAqCA,0CAIA,4CAIA,0EAIA,4EAIA,yEAIA,yEAIA,gFAIA,2OAQA,mKAKA,2JAKA,4JAKA,oKAKA,6EAMA,4VASA,4YASA,uCACE,oDAMF,8BACE,+IAOA,mFFrIJ","sources":["home/runner/work/brick/brick/.brick-cache/production/tooltip.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/floating-arrow.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/tooltip/tooltip.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/styles/floating-arrow.css\";\n@import \"../../src/components/tooltip/tooltip.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n :where(.brick-tooltip__arrow, .brick-hover-card__arrow, .brick-popover__arrow) {\n color: var(--brick-floating-arrow-stroke, var(--brick-tooltip-border-color));\n fill: var(--brick-floating-arrow-fill, var(--brick-tooltip-background));\n filter: drop-shadow(0 1px 0 var(--brick-floating-arrow-stroke, var(--brick-tooltip-border-color)));\n }\n}\n","@layer brick.components {\n .brick-tooltip {\n --brick-tooltip-background: var(--brick-color-text-primary);\n --brick-tooltip-foreground: var(--brick-color-surface-base);\n --brick-tooltip-border-color: color-mix(in srgb, var(--brick-tooltip-foreground), transparent 72%);\n --brick-tooltip-radius: var(--brick-radius-control);\n --brick-tooltip-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--brick-color-shadow), transparent 28%);\n --brick-tooltip-max-inline-size: 20rem;\n --brick-tooltip-padding-block: var(--brick-space-2);\n --brick-tooltip-padding-inline: var(--brick-space-3);\n --brick-tooltip-rich-max-inline-size: 24rem;\n --brick-tooltip-rich-gap: var(--brick-space-1);\n\n z-index: calc(var(--brick-layer-overlay) - 1);\n box-sizing: border-box;\n inline-size: max-content;\n max-inline-size: min(var(--brick-tooltip-max-inline-size), calc(100vi - 2rem));\n padding-block: var(--brick-tooltip-padding-block);\n padding-inline: var(--brick-tooltip-padding-inline);\n border: var(--brick-border-width) solid var(--brick-tooltip-border-color);\n border-radius: var(--brick-tooltip-radius);\n background: var(--brick-tooltip-background);\n box-shadow: var(--brick-tooltip-shadow);\n color: var(--brick-tooltip-foreground);\n font-family: var(--brick-typography-supporting-sm-font-family);\n font-size: var(--brick-typography-supporting-sm-font-size);\n font-weight: var(--brick-typography-supporting-sm-font-weight);\n letter-spacing: var(--brick-typography-supporting-sm-letter-spacing);\n line-height: var(--brick-typography-supporting-sm-line-height);\n opacity: 0;\n overflow-wrap: anywhere;\n pointer-events: auto;\n translate: 0 0;\n transition:\n opacity var(--brick-motion-duration-fast) var(--brick-motion-easing-enter),\n translate var(--brick-motion-duration-fast) var(--brick-motion-easing-enter);\n }\n\n .brick-tooltip[data-positioned] {\n opacity: 1;\n }\n\n .brick-tooltip[data-state=\"closed\"] {\n opacity: 0;\n }\n\n .brick-tooltip[data-side=\"top\"]:not([data-state=\"closed\"]) {\n translate: 0 -0.2rem;\n }\n\n .brick-tooltip[data-side=\"bottom\"]:not([data-state=\"closed\"]) {\n translate: 0 0.2rem;\n }\n\n .brick-tooltip[data-side=\"left\"]:not([data-state=\"closed\"]) {\n translate: -0.2rem 0;\n }\n\n .brick-tooltip[data-side=\"right\"]:not([data-state=\"closed\"]) {\n translate: 0.2rem 0;\n }\n\n .brick-tooltip[data-shape=\"pill\"] {\n --brick-tooltip-radius: var(--brick-radius-full);\n }\n\n .brick-tooltip[data-variant=\"rich\"] {\n display: grid;\n max-inline-size: min(var(--brick-tooltip-rich-max-inline-size), calc(100vi - 2rem));\n gap: var(--brick-tooltip-rich-gap);\n padding-block: var(--brick-space-3);\n padding-inline: var(--brick-space-4);\n }\n\n .brick-tooltip[data-side=\"top\"] .brick-tooltip__arrow {\n translate: 0 calc(var(--brick-border-width) * -1);\n filter: drop-shadow(0 1px 0 var(--brick-tooltip-border-color));\n }\n\n .brick-tooltip[data-side=\"right\"] .brick-tooltip__arrow {\n translate: var(--brick-border-width) 0;\n filter: drop-shadow(-1px 0 0 var(--brick-tooltip-border-color));\n }\n\n .brick-tooltip[data-side=\"bottom\"] .brick-tooltip__arrow {\n translate: 0 var(--brick-border-width);\n filter: drop-shadow(0 -1px 0 var(--brick-tooltip-border-color));\n }\n\n .brick-tooltip[data-side=\"left\"] .brick-tooltip__arrow {\n translate: calc(var(--brick-border-width) * -1) 0;\n filter: drop-shadow(1px 0 0 var(--brick-tooltip-border-color));\n }\n\n .brick-tooltip__title,\n .brick-tooltip__description {\n min-inline-size: 0;\n margin: 0;\n }\n\n .brick-tooltip__title {\n color: inherit;\n font-family: var(--brick-typography-compact-title-font-family);\n font-size: var(--brick-typography-compact-title-font-size);\n font-weight: var(--brick-typography-compact-title-font-weight);\n letter-spacing: var(--brick-typography-compact-title-letter-spacing);\n line-height: var(--brick-typography-compact-title-line-height);\n }\n\n .brick-tooltip__description {\n color: color-mix(in srgb, currentColor, transparent 18%);\n font-family: var(--brick-typography-supporting-sm-font-family);\n font-size: var(--brick-typography-supporting-sm-font-size);\n font-weight: var(--brick-typography-supporting-sm-font-weight);\n letter-spacing: var(--brick-typography-supporting-sm-letter-spacing);\n line-height: var(--brick-typography-supporting-sm-line-height);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-tooltip {\n translate: 0 0;\n transition-duration: 1ms;\n }\n }\n\n @media (forced-colors: active) {\n .brick-tooltip {\n --brick-tooltip-background: Canvas;\n --brick-tooltip-foreground: CanvasText;\n --brick-tooltip-border-color: CanvasText;\n box-shadow: none;\n }\n\n .brick-tooltip__arrow {\n color: CanvasText;\n fill: Canvas;\n filter: none;\n stroke: CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-tree-grid-container{box-sizing:border-box;overscroll-behavior-inline:contain;inline-size:100%;min-inline-size:0;max-inline-size:100%;overflow-x:auto}.brick-tree-grid{--brick-tree-grid-inline-size:100%;--brick-tree-grid-min-inline-size:38rem;--brick-tree-grid-border-color:var(--brick-color-border-subtle);--brick-tree-grid-border-width:var(--brick-border-width);--brick-tree-grid-radius:var(--brick-radius-surface);--brick-tree-grid-header-background:var(--brick-color-surface-subtle);--brick-tree-grid-header-foreground:var(--brick-color-text-primary);--brick-tree-grid-body-background:var(--brick-color-surface);--brick-tree-grid-footer-background:var(--brick-color-surface-subtle);--brick-tree-grid-cell-foreground:var(--brick-color-text-primary);--brick-tree-grid-cell-padding-inline:var(--brick-space-4);--brick-tree-grid-cell-padding-block:var(--brick-space-3);--brick-tree-grid-row-min-block-size:3rem;--brick-tree-grid-depth-indent:var(--brick-space-5);--brick-tree-grid-caption-foreground:var(--brick-color-text-secondary);--brick-tree-grid-caption-gap:var(--brick-space-3);--brick-tree-grid-active-color:var(--brick-color-focus-ring);--brick-tree-grid-active-width:2px;--brick-tree-grid-selected-background:var(--brick-color-surface-accent-subtle,var(--brick-color-surface-subtle));--brick-tree-grid-selected-foreground:var(--brick-color-text-primary);--brick-tree-grid-hover-background:var(--brick-color-surface-hover,var(--brick-color-surface-subtle));--brick-tree-grid-disabled-opacity:.5;--brick-tree-grid-indicator-size:1rem;--brick-tree-grid-indicator-color:var(--brick-color-text-secondary);--brick-tree-grid-sort-indicator-size:1rem;--brick-tree-grid-sort-indicator-color:var(--brick-color-text-secondary);--brick-tree-grid-motion-duration:.16s;--brick-tree-grid-motion-easing:ease;box-sizing:border-box;inline-size:var(--brick-tree-grid-inline-size);min-inline-size:var(--brick-tree-grid-min-inline-size);border-collapse:separate;border-spacing:0;color:var(--brick-tree-grid-cell-foreground);font-family:var(--brick-typography-body-md-font-family);font-size:var(--brick-typography-body-md-font-size);line-height:var(--brick-typography-body-md-line-height)}.brick-tree-grid[data-size=sm]{--brick-tree-grid-row-min-block-size:2.5rem;--brick-tree-grid-cell-padding-inline:var(--brick-space-3);--brick-tree-grid-depth-indent:var(--brick-space-4);--brick-tree-grid-indicator-size:.875rem;--brick-tree-grid-sort-indicator-size:.875rem;font-size:var(--brick-typography-body-sm-font-size);line-height:var(--brick-typography-body-sm-line-height)}.brick-tree-grid[data-size=lg]{--brick-tree-grid-row-min-block-size:3.5rem;--brick-tree-grid-cell-padding-inline:var(--brick-space-5);--brick-tree-grid-depth-indent:var(--brick-space-6);--brick-tree-grid-indicator-size:1.125rem;--brick-tree-grid-sort-indicator-size:1.125rem;font-size:var(--brick-typography-body-lg-font-size);line-height:var(--brick-typography-body-lg-line-height)}.brick-tree-grid[data-density=compact]{--brick-tree-grid-cell-padding-block:var(--brick-space-1)}.brick-tree-grid[data-density=spacious]{--brick-tree-grid-cell-padding-block:var(--brick-space-5)}.brick-tree-grid__caption{color:var(--brick-tree-grid-caption-foreground);text-align:start}.brick-tree-grid__caption[data-side=top]{caption-side:top;padding-block-end:var(--brick-tree-grid-caption-gap)}.brick-tree-grid__caption[data-side=bottom]{caption-side:bottom;padding-block-start:var(--brick-tree-grid-caption-gap)}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell){box-sizing:border-box;min-block-size:var(--brick-tree-grid-row-min-block-size);padding-block:var(--brick-tree-grid-cell-padding-block);padding-inline:var(--brick-tree-grid-cell-padding-inline);border-block-end:var(--brick-tree-grid-border-width) solid var(--brick-tree-grid-border-color);text-align:start;vertical-align:middle;overflow-wrap:break-word}.brick-tree-grid__column-header{color:var(--brick-tree-grid-header-foreground);background:var(--brick-tree-grid-header-background);font-weight:var(--brick-typography-heading-sm-font-weight);white-space:nowrap}:where(.brick-tree-grid__row-header,.brick-tree-grid__cell){background:var(--brick-tree-grid-body-background)}.brick-tree-grid__row-header{font-weight:var(--brick-typography-body-md-font-weight);padding-inline-start:calc(var(--brick-tree-grid-cell-padding-inline) + (var(--tree-grid-level,1) - 1) * var(--brick-tree-grid-depth-indent))}.brick-tree-grid__row[data-level="2"]{--tree-grid-level:2}.brick-tree-grid__row[data-level="3"]{--tree-grid-level:3}.brick-tree-grid__row[data-level="4"]{--tree-grid-level:4}.brick-tree-grid__row[data-level="5"]{--tree-grid-level:5}.brick-tree-grid__row[data-level="6"]{--tree-grid-level:6}.brick-tree-grid__row[data-level="7"]{--tree-grid-level:7}.brick-tree-grid__row[data-level="8"]{--tree-grid-level:8}.brick-tree-grid__row[data-level="9"]{--tree-grid-level:9}.brick-tree-grid__row[data-level="10"]{--tree-grid-level:10}.brick-tree-grid__footer :where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell){background:var(--brick-tree-grid-footer-background);font-weight:var(--brick-typography-heading-sm-font-weight)}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-align=center]{text-align:center}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-align=end]{text-align:end}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-numeric]{white-space:nowrap;font-variant-numeric:tabular-nums}.brick-tree-grid[data-variant=outline]{border:var(--brick-tree-grid-border-width) solid var(--brick-tree-grid-border-color);border-radius:var(--brick-tree-grid-radius);overflow:clip}.brick-tree-grid[data-variant=outline] :where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)+:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell){border-inline-start:var(--brick-tree-grid-border-width) solid var(--brick-tree-grid-border-color)}.brick-tree-grid[data-variant=outline] :where(.brick-tree-grid__body,.brick-tree-grid__footer):last-child .brick-tree-grid__row:last-child :where(.brick-tree-grid__row-header,.brick-tree-grid__cell){border-block-end:0}.brick-tree-grid[data-variant=outline] :where(.brick-tree-grid__body,.brick-tree-grid__footer):last-child .brick-tree-grid__row:last-child>:first-child{border-end-start-radius:calc(var(--brick-tree-grid-radius) - var(--brick-tree-grid-border-width))}.brick-tree-grid[data-variant=outline] :where(.brick-tree-grid__body,.brick-tree-grid__footer):last-child .brick-tree-grid__row:last-child>:last-child{border-end-end-radius:calc(var(--brick-tree-grid-radius) - var(--brick-tree-grid-border-width))}.brick-tree-grid__row[data-selected] :where(.brick-tree-grid__row-header,.brick-tree-grid__cell){color:var(--brick-tree-grid-selected-foreground);background:var(--brick-tree-grid-selected-background)}.brick-tree-grid__row[data-selectable]:hover :where(.brick-tree-grid__row-header,.brick-tree-grid__cell),.brick-tree-grid__column-header[data-actionable]:hover{background:var(--brick-tree-grid-hover-background)}.brick-tree-grid__row[data-disabled] :where(.brick-tree-grid__row-header,.brick-tree-grid__cell),:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-disabled]{opacity:var(--brick-tree-grid-disabled-opacity)}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-active]{outline:var(--brick-tree-grid-active-width) solid var(--brick-tree-grid-active-color);outline-offset:calc(-1 * var(--brick-tree-grid-active-width));position:relative}.brick-tree-grid__indicator{inline-size:var(--brick-tree-grid-indicator-size);block-size:var(--brick-tree-grid-indicator-size);color:var(--brick-tree-grid-indicator-color);vertical-align:middle;transition:transform var(--brick-tree-grid-motion-duration) var(--brick-tree-grid-motion-easing);justify-content:center;align-items:center;margin-inline-end:var(--brick-space-2);display:inline-flex}.brick-tree-grid__indicator svg,.brick-tree-grid__sort-indicator svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;block-size:100%;inline-size:100%}.brick-tree-grid__row:not([data-expandable]) .brick-tree-grid__indicator{visibility:hidden}.brick-tree-grid__row[data-expanded] .brick-tree-grid__indicator{transform:rotate(90deg)}[dir=rtl] .brick-tree-grid__indicator{transform:scaleX(-1)}[dir=rtl] .brick-tree-grid__row[data-expanded] .brick-tree-grid__indicator{transform:scaleX(-1)rotate(90deg)}.brick-tree-grid__sort-indicator{inline-size:var(--brick-tree-grid-sort-indicator-size);block-size:var(--brick-tree-grid-sort-indicator-size);vertical-align:middle;color:var(--brick-tree-grid-sort-indicator-color);margin-inline-start:var(--brick-space-2);display:inline-flex}.brick-tree-grid__column-header[data-sort=ascending] .brick-tree-grid__sort-indicator path{d:path("m4 10 4-4 4 4")}.brick-tree-grid__column-header[data-sort=descending] .brick-tree-grid__sort-indicator path{d:path("m4 6 4 4 4-4")}@media (prefers-reduced-motion:reduce){.brick-tree-grid__indicator{transition:none}}@media (forced-colors:active){.brick-tree-grid{--brick-tree-grid-border-color:CanvasText;--brick-tree-grid-header-background:Canvas;--brick-tree-grid-body-background:Canvas;--brick-tree-grid-footer-background:Canvas;--brick-tree-grid-active-color:Highlight;--brick-tree-grid-selected-background:Highlight;--brick-tree-grid-selected-foreground:HighlightText;--brick-tree-grid-hover-background:Canvas;--brick-tree-grid-indicator-color:CanvasText;--brick-tree-grid-sort-indicator-color:CanvasText}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-active]{outline-color:highlight}.brick-tree-grid__row[data-disabled] :where(.brick-tree-grid__row-header,.brick-tree-grid__cell){color:graytext;opacity:1}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-tree-grid-container{box-sizing:border-box;overscroll-behavior-inline:contain;inline-size:100%;min-inline-size:0;max-inline-size:100%;overflow-x:auto}.brick-tree-grid{--brick-tree-grid-inline-size:100%;--brick-tree-grid-min-inline-size:38rem;--brick-tree-grid-border-color:var(--brick-color-border-subtle);--brick-tree-grid-border-width:var(--brick-border-width);--brick-tree-grid-radius:var(--brick-radius-surface);--brick-tree-grid-header-background:var(--brick-color-surface-subtle);--brick-tree-grid-header-foreground:var(--brick-color-text-primary);--brick-tree-grid-body-background:var(--brick-color-surface);--brick-tree-grid-footer-background:var(--brick-color-surface-subtle);--brick-tree-grid-cell-foreground:var(--brick-color-text-primary);--brick-tree-grid-cell-padding-inline:var(--brick-space-4);--brick-tree-grid-cell-padding-block:var(--brick-space-3);--brick-tree-grid-row-min-block-size:3rem;--brick-tree-grid-depth-indent:var(--brick-space-5);--brick-tree-grid-caption-foreground:var(--brick-color-text-secondary);--brick-tree-grid-caption-gap:var(--brick-space-3);--brick-tree-grid-active-color:var(--brick-color-focus-ring);--brick-tree-grid-active-width:2px;--brick-tree-grid-selected-background:var(--brick-color-surface-accent-subtle,var(--brick-color-surface-subtle));--brick-tree-grid-selected-foreground:var(--brick-color-text-primary);--brick-tree-grid-hover-background:var(--brick-color-surface-hover,var(--brick-color-surface-subtle));--brick-tree-grid-disabled-opacity:.5;--brick-tree-grid-indicator-size:1rem;--brick-tree-grid-indicator-color:var(--brick-color-text-secondary);--brick-tree-grid-sort-indicator-size:1rem;--brick-tree-grid-sort-indicator-color:var(--brick-color-text-secondary);--brick-tree-grid-motion-duration:.16s;--brick-tree-grid-motion-easing:ease;box-sizing:border-box;inline-size:var(--brick-tree-grid-inline-size);min-inline-size:var(--brick-tree-grid-min-inline-size);border-collapse:separate;border-spacing:0;color:var(--brick-tree-grid-cell-foreground);font-family:var(--brick-typography-body-md-font-family);font-size:var(--brick-typography-body-md-font-size);line-height:var(--brick-typography-body-md-line-height)}.brick-tree-grid[data-size=sm]{--brick-tree-grid-row-min-block-size:2.5rem;--brick-tree-grid-cell-padding-inline:var(--brick-space-3);--brick-tree-grid-depth-indent:var(--brick-space-4);--brick-tree-grid-indicator-size:.875rem;--brick-tree-grid-sort-indicator-size:.875rem;font-size:var(--brick-typography-body-sm-font-size);line-height:var(--brick-typography-body-sm-line-height)}.brick-tree-grid[data-size=lg]{--brick-tree-grid-row-min-block-size:3.5rem;--brick-tree-grid-cell-padding-inline:var(--brick-space-5);--brick-tree-grid-depth-indent:var(--brick-space-6);--brick-tree-grid-indicator-size:1.125rem;--brick-tree-grid-sort-indicator-size:1.125rem;font-size:var(--brick-typography-body-lg-font-size);line-height:var(--brick-typography-body-lg-line-height)}.brick-tree-grid[data-density=compact]{--brick-tree-grid-cell-padding-block:var(--brick-space-1)}.brick-tree-grid[data-density=spacious]{--brick-tree-grid-cell-padding-block:var(--brick-space-5)}.brick-tree-grid__caption{color:var(--brick-tree-grid-caption-foreground);text-align:start}.brick-tree-grid__caption[data-side=top]{caption-side:top;padding-block-end:var(--brick-tree-grid-caption-gap)}.brick-tree-grid__caption[data-side=bottom]{caption-side:bottom;padding-block-start:var(--brick-tree-grid-caption-gap)}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell){box-sizing:border-box;min-block-size:var(--brick-tree-grid-row-min-block-size);padding-block:var(--brick-tree-grid-cell-padding-block);padding-inline:var(--brick-tree-grid-cell-padding-inline);border-block-end:var(--brick-tree-grid-border-width) solid var(--brick-tree-grid-border-color);text-align:start;vertical-align:middle;overflow-wrap:break-word}.brick-tree-grid__column-header{color:var(--brick-tree-grid-header-foreground);background:var(--brick-tree-grid-header-background);font-weight:var(--brick-typography-heading-sm-font-weight);white-space:nowrap}:where(.brick-tree-grid__row-header,.brick-tree-grid__cell){background:var(--brick-tree-grid-body-background)}.brick-tree-grid__row-header{font-weight:var(--brick-typography-body-md-font-weight);padding-inline-start:calc(var(--brick-tree-grid-cell-padding-inline) + (var(--tree-grid-level,1) - 1) * var(--brick-tree-grid-depth-indent))}.brick-tree-grid__row[data-level="2"]{--tree-grid-level:2}.brick-tree-grid__row[data-level="3"]{--tree-grid-level:3}.brick-tree-grid__row[data-level="4"]{--tree-grid-level:4}.brick-tree-grid__row[data-level="5"]{--tree-grid-level:5}.brick-tree-grid__row[data-level="6"]{--tree-grid-level:6}.brick-tree-grid__row[data-level="7"]{--tree-grid-level:7}.brick-tree-grid__row[data-level="8"]{--tree-grid-level:8}.brick-tree-grid__row[data-level="9"]{--tree-grid-level:9}.brick-tree-grid__row[data-level="10"]{--tree-grid-level:10}.brick-tree-grid__footer :where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell){background:var(--brick-tree-grid-footer-background);font-weight:var(--brick-typography-heading-sm-font-weight)}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-align=center]{text-align:center}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-align=end]{text-align:end}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-numeric]{white-space:nowrap;font-variant-numeric:tabular-nums}.brick-tree-grid[data-variant=outline]{border:var(--brick-tree-grid-border-width) solid var(--brick-tree-grid-border-color);border-radius:var(--brick-tree-grid-radius);overflow:clip}.brick-tree-grid[data-variant=outline] :where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)+:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell){border-inline-start:var(--brick-tree-grid-border-width) solid var(--brick-tree-grid-border-color)}.brick-tree-grid[data-variant=outline] :where(.brick-tree-grid__body,.brick-tree-grid__footer):last-child .brick-tree-grid__row:last-child :where(.brick-tree-grid__row-header,.brick-tree-grid__cell){border-block-end:0}.brick-tree-grid[data-variant=outline] :where(.brick-tree-grid__body,.brick-tree-grid__footer):last-child .brick-tree-grid__row:last-child>:first-child{border-end-start-radius:calc(var(--brick-tree-grid-radius) - var(--brick-tree-grid-border-width))}.brick-tree-grid[data-variant=outline] :where(.brick-tree-grid__body,.brick-tree-grid__footer):last-child .brick-tree-grid__row:last-child>:last-child{border-end-end-radius:calc(var(--brick-tree-grid-radius) - var(--brick-tree-grid-border-width))}.brick-tree-grid__row[data-selected] :where(.brick-tree-grid__row-header,.brick-tree-grid__cell){color:var(--brick-tree-grid-selected-foreground);background:var(--brick-tree-grid-selected-background)}.brick-tree-grid__row[data-selectable]:hover :where(.brick-tree-grid__row-header,.brick-tree-grid__cell),.brick-tree-grid__column-header[data-actionable]:hover{background:var(--brick-tree-grid-hover-background)}.brick-tree-grid__row[data-disabled] :where(.brick-tree-grid__row-header,.brick-tree-grid__cell),:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-disabled]{opacity:var(--brick-tree-grid-disabled-opacity)}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-active]{outline:var(--brick-tree-grid-active-width) solid var(--brick-tree-grid-active-color);outline-offset:calc(-1 * var(--brick-tree-grid-active-width));position:relative}.brick-tree-grid__indicator{inline-size:var(--brick-tree-grid-indicator-size);block-size:var(--brick-tree-grid-indicator-size);color:var(--brick-tree-grid-indicator-color);vertical-align:middle;transition:transform var(--brick-tree-grid-motion-duration) var(--brick-tree-grid-motion-easing);justify-content:center;align-items:center;margin-inline-end:var(--brick-space-2);display:inline-flex}.brick-tree-grid__indicator svg,.brick-tree-grid__sort-indicator svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;block-size:100%;inline-size:100%}.brick-tree-grid__row:not([data-expandable]) .brick-tree-grid__indicator{visibility:hidden}.brick-tree-grid__row[data-expanded] .brick-tree-grid__indicator{transform:rotate(90deg)}[dir=rtl] .brick-tree-grid__indicator{transform:scaleX(-1)}[dir=rtl] .brick-tree-grid__row[data-expanded] .brick-tree-grid__indicator{transform:scaleX(-1)rotate(90deg)}.brick-tree-grid__sort-indicator{inline-size:var(--brick-tree-grid-sort-indicator-size);block-size:var(--brick-tree-grid-sort-indicator-size);vertical-align:middle;color:var(--brick-tree-grid-sort-indicator-color);margin-inline-start:var(--brick-space-2);display:inline-flex}.brick-tree-grid__column-header[data-sort=ascending] .brick-tree-grid__sort-indicator path{d:path("m4 10 4-4 4 4")}.brick-tree-grid__column-header[data-sort=descending] .brick-tree-grid__sort-indicator path{d:path("m4 6 4 4 4-4")}@media (prefers-reduced-motion:reduce){.brick-tree-grid__indicator{transition:none}}@media (forced-colors:active){.brick-tree-grid{--brick-tree-grid-border-color:CanvasText;--brick-tree-grid-header-background:Canvas;--brick-tree-grid-body-background:Canvas;--brick-tree-grid-footer-background:Canvas;--brick-tree-grid-active-color:Highlight;--brick-tree-grid-selected-background:Highlight;--brick-tree-grid-selected-foreground:HighlightText;--brick-tree-grid-hover-background:Canvas;--brick-tree-grid-indicator-color:CanvasText;--brick-tree-grid-sort-indicator-color:CanvasText}:where(.brick-tree-grid__column-header,.brick-tree-grid__row-header,.brick-tree-grid__cell)[data-active]{outline-color:highlight}.brick-tree-grid__row[data-disabled] :where(.brick-tree-grid__row-header,.brick-tree-grid__cell){color:graytext;opacity:1}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=tree-grid.css.map */
|