@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
package/dist/styles/badge.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-badge,.brick-notification-badge{--brick-badge-tone-solid:var(--brick-color-text-primary);--brick-badge-tone-on-solid:var(--brick-color-text-inverse);--brick-badge-tone-soft:var(--brick-color-surface-subtle);--brick-badge-tone-on-soft:var(--brick-color-text-primary);--brick-badge-tone-border:var(--brick-color-border-strong);--brick-badge-tone-text:var(--brick-color-text-primary)}.brick-badge{--brick-badge-background:var(--brick-badge-tone-soft);--brick-badge-foreground:var(--brick-badge-tone-on-soft);--brick-badge-border-color:transparent;--brick-badge-min-block-size:1.5rem;--brick-badge-inline-padding:.5rem;--brick-badge-block-padding:.125rem;--brick-badge-gap:var(--brick-space-1);--brick-badge-radius:var(--brick-radius-control);--brick-badge-font-size:var(--brick-typography-control-sm-font-size);box-sizing:border-box;min-inline-size:0;min-block-size:var(--brick-badge-min-block-size);justify-content:safe center;align-items:center;gap:var(--brick-badge-gap);max-inline-size:100%;padding-block:var(--brick-badge-block-padding);padding-inline:var(--brick-badge-inline-padding);border:var(--brick-border-width) solid var(--brick-badge-border-color);border-radius:var(--brick-badge-radius);background:var(--brick-badge-background);color:var(--brick-badge-foreground);font-family:var(--brick-typography-control-sm-font-family);font-size:var(--brick-badge-font-size);font-weight:var(--brick-typography-control-sm-font-weight);font-variant-numeric:tabular-nums;letter-spacing:var(--brick-typography-control-sm-letter-spacing);line-height:var(--brick-typography-control-sm-line-height);overflow-wrap:anywhere;word-break:break-word;text-align:start;vertical-align:baseline;display:inline-flex}.brick-badge[data-shape=pill]{--brick-badge-radius:var(--brick-radius-full)}.brick-badge[data-size=sm]{--brick-badge-min-block-size:1.25rem;--brick-badge-inline-padding:.375rem;--brick-badge-block-padding:.0625rem;--brick-badge-font-size:var(--brick-typography-control-xs-font-size)}.brick-badge[data-size=lg]{--brick-badge-min-block-size:1.75rem;--brick-badge-inline-padding:.625rem;--brick-badge-block-padding:.1875rem;--brick-badge-font-size:var(--brick-typography-control-lg-font-size)}.brick-badge[data-variant=solid]{--brick-badge-background:var(--brick-badge-tone-solid);--brick-badge-foreground:var(--brick-badge-tone-on-solid);--brick-badge-border-color:var(--brick-badge-tone-solid)}.brick-badge[data-variant=outline]{--brick-badge-background:transparent;--brick-badge-foreground:var(--brick-badge-tone-text);--brick-badge-border-color:var(--brick-badge-tone-border)}.brick-badge[data-tone=accent],.brick-notification-badge[data-tone=accent]{--brick-badge-tone-solid:var(--brick-color-accent-solid);--brick-badge-tone-on-solid:var(--brick-color-accent-on-solid);--brick-badge-tone-soft:var(--brick-color-accent-soft);--brick-badge-tone-on-soft:var(--brick-color-accent-on-soft);--brick-badge-tone-border:var(--brick-color-accent-border);--brick-badge-tone-text:var(--brick-color-accent-text)}.brick-badge[data-tone=info],.brick-notification-badge[data-tone=info]{--brick-badge-tone-solid:var(--brick-color-info-solid);--brick-badge-tone-on-solid:var(--brick-color-info-on-solid);--brick-badge-tone-soft:var(--brick-color-info-soft);--brick-badge-tone-on-soft:var(--brick-color-info-on-soft);--brick-badge-tone-border:var(--brick-color-info-border);--brick-badge-tone-text:var(--brick-color-info-text)}.brick-badge[data-tone=success],.brick-notification-badge[data-tone=success]{--brick-badge-tone-solid:var(--brick-color-success-solid);--brick-badge-tone-on-solid:var(--brick-color-success-on-solid);--brick-badge-tone-soft:var(--brick-color-success-soft);--brick-badge-tone-on-soft:var(--brick-color-success-on-soft);--brick-badge-tone-border:var(--brick-color-success-border);--brick-badge-tone-text:var(--brick-color-success-text)}.brick-badge[data-tone=warning],.brick-notification-badge[data-tone=warning]{--brick-badge-tone-solid:var(--brick-color-warning-solid);--brick-badge-tone-on-solid:var(--brick-color-warning-on-solid);--brick-badge-tone-soft:var(--brick-color-warning-soft);--brick-badge-tone-on-soft:var(--brick-color-warning-on-soft);--brick-badge-tone-border:var(--brick-color-warning-border);--brick-badge-tone-text:var(--brick-color-warning-text)}.brick-badge[data-tone=danger],.brick-notification-badge[data-tone=danger]{--brick-badge-tone-solid:var(--brick-color-danger-solid);--brick-badge-tone-on-solid:var(--brick-color-danger-on-solid);--brick-badge-tone-soft:var(--brick-color-danger-soft);--brick-badge-tone-on-soft:var(--brick-color-danger-on-soft);--brick-badge-tone-border:var(--brick-color-danger-border);--brick-badge-tone-text:var(--brick-color-danger-text)}.brick-notification-badge{--brick-notification-badge-size:1.25rem;--brick-notification-badge-dot-size:.625rem;--brick-notification-badge-inline-padding:.3125rem;--brick-notification-badge-outline-color:var(--brick-color-surface-base);--brick-notification-badge-translate-inline:50%;--brick-notification-badge-translate-block:-50%;box-sizing:border-box;vertical-align:middle;max-inline-size:100%;display:inline-flex;position:relative}.brick-notification-badge[data-size=sm]{--brick-notification-badge-size:1rem;--brick-notification-badge-dot-size:.5rem;--brick-notification-badge-inline-padding:.25rem}.brick-notification-badge[data-size=lg]{--brick-notification-badge-size:1.5rem;--brick-notification-badge-dot-size:.75rem;--brick-notification-badge-inline-padding:.375rem}.brick-notification-badge__indicator{z-index:1;box-sizing:border-box;min-inline-size:var(--brick-notification-badge-size);block-size:var(--brick-notification-badge-size);padding-inline:var(--brick-notification-badge-inline-padding);border:var(--brick-border-width) solid var(--brick-notification-badge-outline-color);border-radius:var(--brick-radius-full);background:var(--brick-badge-tone-solid);color:var(--brick-badge-tone-on-solid);font-family:var(--brick-font-family-body);font-size:.6875rem;font-weight:var(--brick-font-weight-semibold);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:absolute}.brick-notification-badge__indicator[data-shape=circle]{inline-size:var(--brick-notification-badge-size);padding-inline:0}.brick-notification-badge__indicator[data-variant=dot]{min-inline-size:var(--brick-notification-badge-dot-size);inline-size:var(--brick-notification-badge-dot-size);block-size:var(--brick-notification-badge-dot-size);padding:0}.brick-notification-badge[data-placement^=top]>.brick-notification-badge__indicator{inset-block-start:0}.brick-notification-badge[data-placement^=bottom]>.brick-notification-badge__indicator{--brick-notification-badge-translate-block:50%;inset-block-end:0}.brick-notification-badge[data-placement$=end]>.brick-notification-badge__indicator{translate:var(--brick-notification-badge-translate-inline) var(--brick-notification-badge-translate-block);inset-inline-end:0}.brick-notification-badge[data-placement$=start]>.brick-notification-badge__indicator{translate:calc(var(--brick-notification-badge-translate-inline) * -1) var(--brick-notification-badge-translate-block);inset-inline-start:0}.brick-notification-badge[data-overlap=circular]{--brick-notification-badge-translate-inline:50%;--brick-notification-badge-translate-block:-50%}.brick-notification-badge[data-overlap=circular][data-placement^=bottom]{--brick-notification-badge-translate-block:50%}.brick-notification-badge[data-overlap=circular][data-placement^=top]>.brick-notification-badge__indicator{inset-block-start:14.6447%}.brick-notification-badge[data-overlap=circular][data-placement^=bottom]>.brick-notification-badge__indicator{inset-block-end:14.6447%}.brick-notification-badge[data-overlap=circular][data-placement$=start]>.brick-notification-badge__indicator{inset-inline-start:14.6447%}.brick-notification-badge[data-overlap=circular][data-placement$=end]>.brick-notification-badge__indicator{inset-inline-end:14.6447%}:is([dir=rtl],:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))) .brick-notification-badge[data-placement$=end]>.brick-notification-badge__indicator,.brick-notification-badge[dir=rtl][data-placement$=end]>.brick-notification-badge__indicator{translate:calc(var(--brick-notification-badge-translate-inline) * -1) var(--brick-notification-badge-translate-block)}:is([dir=rtl],:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))) .brick-notification-badge[data-placement$=start]>.brick-notification-badge__indicator,.brick-notification-badge[dir=rtl][data-placement$=start]>.brick-notification-badge__indicator{translate:var(--brick-notification-badge-translate-inline) var(--brick-notification-badge-translate-block)}@media (forced-colors:active){.brick-badge{color:canvastext;background:canvas;border-color:canvastext}.brick-notification-badge__indicator{color:canvas;forced-color-adjust:none;background:canvastext;border-color:canvas}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-badge,.brick-notification-badge{--brick-badge-tone-solid:var(--brick-color-text-primary);--brick-badge-tone-on-solid:var(--brick-color-text-inverse);--brick-badge-tone-soft:var(--brick-color-surface-subtle);--brick-badge-tone-on-soft:var(--brick-color-text-primary);--brick-badge-tone-border:var(--brick-color-border-strong);--brick-badge-tone-text:var(--brick-color-text-primary)}.brick-badge{--brick-badge-background:var(--brick-badge-tone-soft);--brick-badge-foreground:var(--brick-badge-tone-on-soft);--brick-badge-border-color:transparent;--brick-badge-min-block-size:1.5rem;--brick-badge-inline-padding:.5rem;--brick-badge-block-padding:.125rem;--brick-badge-gap:var(--brick-space-1);--brick-badge-radius:var(--brick-radius-control);--brick-badge-font-size:var(--brick-typography-control-sm-font-size);box-sizing:border-box;min-inline-size:0;min-block-size:var(--brick-badge-min-block-size);justify-content:safe center;align-items:center;gap:var(--brick-badge-gap);max-inline-size:100%;padding-block:var(--brick-badge-block-padding);padding-inline:var(--brick-badge-inline-padding);border:var(--brick-border-width) solid var(--brick-badge-border-color);border-radius:var(--brick-badge-radius);background:var(--brick-badge-background);color:var(--brick-badge-foreground);font-family:var(--brick-typography-control-sm-font-family);font-size:var(--brick-badge-font-size);font-weight:var(--brick-typography-control-sm-font-weight);font-variant-numeric:tabular-nums;letter-spacing:var(--brick-typography-control-sm-letter-spacing);line-height:var(--brick-typography-control-sm-line-height);overflow-wrap:anywhere;word-break:break-word;text-align:start;vertical-align:baseline;display:inline-flex}.brick-badge[data-shape=pill]{--brick-badge-radius:var(--brick-radius-full)}.brick-badge[data-size=sm]{--brick-badge-min-block-size:1.25rem;--brick-badge-inline-padding:.375rem;--brick-badge-block-padding:.0625rem;--brick-badge-font-size:var(--brick-typography-control-xs-font-size)}.brick-badge[data-size=lg]{--brick-badge-min-block-size:1.75rem;--brick-badge-inline-padding:.625rem;--brick-badge-block-padding:.1875rem;--brick-badge-font-size:var(--brick-typography-control-lg-font-size)}.brick-badge[data-variant=solid]{--brick-badge-background:var(--brick-badge-tone-solid);--brick-badge-foreground:var(--brick-badge-tone-on-solid);--brick-badge-border-color:var(--brick-badge-tone-solid)}.brick-badge[data-variant=outline]{--brick-badge-background:transparent;--brick-badge-foreground:var(--brick-badge-tone-text);--brick-badge-border-color:var(--brick-badge-tone-border)}.brick-badge[data-tone=accent],.brick-notification-badge[data-tone=accent]{--brick-badge-tone-solid:var(--brick-color-accent-solid);--brick-badge-tone-on-solid:var(--brick-color-accent-on-solid);--brick-badge-tone-soft:var(--brick-color-accent-soft);--brick-badge-tone-on-soft:var(--brick-color-accent-on-soft);--brick-badge-tone-border:var(--brick-color-accent-border);--brick-badge-tone-text:var(--brick-color-accent-text)}.brick-badge[data-tone=info],.brick-notification-badge[data-tone=info]{--brick-badge-tone-solid:var(--brick-color-info-solid);--brick-badge-tone-on-solid:var(--brick-color-info-on-solid);--brick-badge-tone-soft:var(--brick-color-info-soft);--brick-badge-tone-on-soft:var(--brick-color-info-on-soft);--brick-badge-tone-border:var(--brick-color-info-border);--brick-badge-tone-text:var(--brick-color-info-text)}.brick-badge[data-tone=success],.brick-notification-badge[data-tone=success]{--brick-badge-tone-solid:var(--brick-color-success-solid);--brick-badge-tone-on-solid:var(--brick-color-success-on-solid);--brick-badge-tone-soft:var(--brick-color-success-soft);--brick-badge-tone-on-soft:var(--brick-color-success-on-soft);--brick-badge-tone-border:var(--brick-color-success-border);--brick-badge-tone-text:var(--brick-color-success-text)}.brick-badge[data-tone=warning],.brick-notification-badge[data-tone=warning]{--brick-badge-tone-solid:var(--brick-color-warning-solid);--brick-badge-tone-on-solid:var(--brick-color-warning-on-solid);--brick-badge-tone-soft:var(--brick-color-warning-soft);--brick-badge-tone-on-soft:var(--brick-color-warning-on-soft);--brick-badge-tone-border:var(--brick-color-warning-border);--brick-badge-tone-text:var(--brick-color-warning-text)}.brick-badge[data-tone=danger],.brick-notification-badge[data-tone=danger]{--brick-badge-tone-solid:var(--brick-color-danger-solid);--brick-badge-tone-on-solid:var(--brick-color-danger-on-solid);--brick-badge-tone-soft:var(--brick-color-danger-soft);--brick-badge-tone-on-soft:var(--brick-color-danger-on-soft);--brick-badge-tone-border:var(--brick-color-danger-border);--brick-badge-tone-text:var(--brick-color-danger-text)}.brick-notification-badge{--brick-notification-badge-size:1.25rem;--brick-notification-badge-dot-size:.625rem;--brick-notification-badge-inline-padding:.3125rem;--brick-notification-badge-outline-color:var(--brick-color-surface-base);--brick-notification-badge-translate-inline:50%;--brick-notification-badge-translate-block:-50%;box-sizing:border-box;vertical-align:middle;max-inline-size:100%;display:inline-flex;position:relative}.brick-notification-badge[data-size=sm]{--brick-notification-badge-size:1rem;--brick-notification-badge-dot-size:.5rem;--brick-notification-badge-inline-padding:.25rem}.brick-notification-badge[data-size=lg]{--brick-notification-badge-size:1.5rem;--brick-notification-badge-dot-size:.75rem;--brick-notification-badge-inline-padding:.375rem}.brick-notification-badge__indicator{z-index:1;box-sizing:border-box;min-inline-size:var(--brick-notification-badge-size);block-size:var(--brick-notification-badge-size);padding-inline:var(--brick-notification-badge-inline-padding);border:var(--brick-border-width) solid var(--brick-notification-badge-outline-color);border-radius:var(--brick-radius-full);background:var(--brick-badge-tone-solid);color:var(--brick-badge-tone-on-solid);font-family:var(--brick-font-family-body);font-size:.6875rem;font-weight:var(--brick-font-weight-semibold);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:absolute}.brick-notification-badge__indicator[data-shape=circle]{inline-size:var(--brick-notification-badge-size);padding-inline:0}.brick-notification-badge__indicator[data-variant=dot]{min-inline-size:var(--brick-notification-badge-dot-size);inline-size:var(--brick-notification-badge-dot-size);block-size:var(--brick-notification-badge-dot-size);padding:0}.brick-notification-badge[data-placement^=top]>.brick-notification-badge__indicator{inset-block-start:0}.brick-notification-badge[data-placement^=bottom]>.brick-notification-badge__indicator{--brick-notification-badge-translate-block:50%;inset-block-end:0}.brick-notification-badge[data-placement$=end]>.brick-notification-badge__indicator{translate:var(--brick-notification-badge-translate-inline) var(--brick-notification-badge-translate-block);inset-inline-end:0}.brick-notification-badge[data-placement$=start]>.brick-notification-badge__indicator{translate:calc(var(--brick-notification-badge-translate-inline) * -1) var(--brick-notification-badge-translate-block);inset-inline-start:0}.brick-notification-badge[data-overlap=circular]{--brick-notification-badge-translate-inline:50%;--brick-notification-badge-translate-block:-50%}.brick-notification-badge[data-overlap=circular][data-placement^=bottom]{--brick-notification-badge-translate-block:50%}.brick-notification-badge[data-overlap=circular][data-placement^=top]>.brick-notification-badge__indicator{inset-block-start:14.6447%}.brick-notification-badge[data-overlap=circular][data-placement^=bottom]>.brick-notification-badge__indicator{inset-block-end:14.6447%}.brick-notification-badge[data-overlap=circular][data-placement$=start]>.brick-notification-badge__indicator{inset-inline-start:14.6447%}.brick-notification-badge[data-overlap=circular][data-placement$=end]>.brick-notification-badge__indicator{inset-inline-end:14.6447%}:is([dir=rtl],:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))) .brick-notification-badge[data-placement$=end]>.brick-notification-badge__indicator,.brick-notification-badge[dir=rtl][data-placement$=end]>.brick-notification-badge__indicator{translate:calc(var(--brick-notification-badge-translate-inline) * -1) var(--brick-notification-badge-translate-block)}:is([dir=rtl],:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))) .brick-notification-badge[data-placement$=start]>.brick-notification-badge__indicator,.brick-notification-badge[dir=rtl][data-placement$=start]>.brick-notification-badge__indicator{translate:var(--brick-notification-badge-translate-inline) var(--brick-notification-badge-translate-block)}@media (forced-colors:active){.brick-badge{color:canvastext;background:canvas;border-color:canvastext}.brick-notification-badge__indicator{color:canvas;forced-color-adjust:none;background:canvastext;border-color:canvas}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=badge.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,oYAUA,oyCAqCA,4EAIA,+MAOA,+MAOA,2MAMA,wLAMA,yaAUA,yZAUA,ibAUA,ibAUA,yaAUA,ibAeA,wKAMA,4KAMA,ssBAuBA,0HAKA,mOAOA,wGAKA,wJAMA,kNAOA,iOAOA,iJAKA,wHAIA,sIAKA,uIAKA,yIAKA,qIAKA,igBASA,0fASA,8BACE,wEAMA,uHD7QJ","sources":["home/runner/work/brick/brick/.brick-cache/production/badge.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/badge/badge.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/badge/badge.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-badge,\n .brick-notification-badge {\n --brick-badge-tone-solid: var(--brick-color-text-primary);\n --brick-badge-tone-on-solid: var(--brick-color-text-inverse);\n --brick-badge-tone-soft: var(--brick-color-surface-subtle);\n --brick-badge-tone-on-soft: var(--brick-color-text-primary);\n --brick-badge-tone-border: var(--brick-color-border-strong);\n --brick-badge-tone-text: var(--brick-color-text-primary);\n }\n\n .brick-badge {\n --brick-badge-background: var(--brick-badge-tone-soft);\n --brick-badge-foreground: var(--brick-badge-tone-on-soft);\n --brick-badge-border-color: transparent;\n --brick-badge-min-block-size: 1.5rem;\n --brick-badge-inline-padding: 0.5rem;\n --brick-badge-block-padding: 0.125rem;\n --brick-badge-gap: var(--brick-space-1);\n --brick-badge-radius: var(--brick-radius-control);\n --brick-badge-font-size: var(--brick-typography-control-sm-font-size);\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n min-block-size: var(--brick-badge-min-block-size);\n max-inline-size: 100%;\n align-items: center;\n justify-content: safe center;\n gap: var(--brick-badge-gap);\n padding-block: var(--brick-badge-block-padding);\n padding-inline: var(--brick-badge-inline-padding);\n border: var(--brick-border-width) solid var(--brick-badge-border-color);\n border-radius: var(--brick-badge-radius);\n background: var(--brick-badge-background);\n color: var(--brick-badge-foreground);\n font-family: var(--brick-typography-control-sm-font-family);\n font-size: var(--brick-badge-font-size);\n font-weight: var(--brick-typography-control-sm-font-weight);\n font-variant-numeric: tabular-nums;\n letter-spacing: var(--brick-typography-control-sm-letter-spacing);\n line-height: var(--brick-typography-control-sm-line-height);\n overflow-wrap: anywhere;\n word-break: break-word;\n text-align: start;\n vertical-align: baseline;\n }\n\n .brick-badge[data-shape=\"pill\"] {\n --brick-badge-radius: var(--brick-radius-full);\n }\n\n .brick-badge[data-size=\"sm\"] {\n --brick-badge-min-block-size: 1.25rem;\n --brick-badge-inline-padding: 0.375rem;\n --brick-badge-block-padding: 0.0625rem;\n --brick-badge-font-size: var(--brick-typography-control-xs-font-size);\n }\n\n .brick-badge[data-size=\"lg\"] {\n --brick-badge-min-block-size: 1.75rem;\n --brick-badge-inline-padding: 0.625rem;\n --brick-badge-block-padding: 0.1875rem;\n --brick-badge-font-size: var(--brick-typography-control-lg-font-size);\n }\n\n .brick-badge[data-variant=\"solid\"] {\n --brick-badge-background: var(--brick-badge-tone-solid);\n --brick-badge-foreground: var(--brick-badge-tone-on-solid);\n --brick-badge-border-color: var(--brick-badge-tone-solid);\n }\n\n .brick-badge[data-variant=\"outline\"] {\n --brick-badge-background: transparent;\n --brick-badge-foreground: var(--brick-badge-tone-text);\n --brick-badge-border-color: var(--brick-badge-tone-border);\n }\n\n .brick-badge[data-tone=\"accent\"],\n .brick-notification-badge[data-tone=\"accent\"] {\n --brick-badge-tone-solid: var(--brick-color-accent-solid);\n --brick-badge-tone-on-solid: var(--brick-color-accent-on-solid);\n --brick-badge-tone-soft: var(--brick-color-accent-soft);\n --brick-badge-tone-on-soft: var(--brick-color-accent-on-soft);\n --brick-badge-tone-border: var(--brick-color-accent-border);\n --brick-badge-tone-text: var(--brick-color-accent-text);\n }\n\n .brick-badge[data-tone=\"info\"],\n .brick-notification-badge[data-tone=\"info\"] {\n --brick-badge-tone-solid: var(--brick-color-info-solid);\n --brick-badge-tone-on-solid: var(--brick-color-info-on-solid);\n --brick-badge-tone-soft: var(--brick-color-info-soft);\n --brick-badge-tone-on-soft: var(--brick-color-info-on-soft);\n --brick-badge-tone-border: var(--brick-color-info-border);\n --brick-badge-tone-text: var(--brick-color-info-text);\n }\n\n .brick-badge[data-tone=\"success\"],\n .brick-notification-badge[data-tone=\"success\"] {\n --brick-badge-tone-solid: var(--brick-color-success-solid);\n --brick-badge-tone-on-solid: var(--brick-color-success-on-solid);\n --brick-badge-tone-soft: var(--brick-color-success-soft);\n --brick-badge-tone-on-soft: var(--brick-color-success-on-soft);\n --brick-badge-tone-border: var(--brick-color-success-border);\n --brick-badge-tone-text: var(--brick-color-success-text);\n }\n\n .brick-badge[data-tone=\"warning\"],\n .brick-notification-badge[data-tone=\"warning\"] {\n --brick-badge-tone-solid: var(--brick-color-warning-solid);\n --brick-badge-tone-on-solid: var(--brick-color-warning-on-solid);\n --brick-badge-tone-soft: var(--brick-color-warning-soft);\n --brick-badge-tone-on-soft: var(--brick-color-warning-on-soft);\n --brick-badge-tone-border: var(--brick-color-warning-border);\n --brick-badge-tone-text: var(--brick-color-warning-text);\n }\n\n .brick-badge[data-tone=\"danger\"],\n .brick-notification-badge[data-tone=\"danger\"] {\n --brick-badge-tone-solid: var(--brick-color-danger-solid);\n --brick-badge-tone-on-solid: var(--brick-color-danger-on-solid);\n --brick-badge-tone-soft: var(--brick-color-danger-soft);\n --brick-badge-tone-on-soft: var(--brick-color-danger-on-soft);\n --brick-badge-tone-border: var(--brick-color-danger-border);\n --brick-badge-tone-text: var(--brick-color-danger-text);\n }\n\n .brick-notification-badge {\n --brick-notification-badge-size: 1.25rem;\n --brick-notification-badge-dot-size: 0.625rem;\n --brick-notification-badge-inline-padding: 0.3125rem;\n --brick-notification-badge-outline-color: var(--brick-color-surface-base);\n --brick-notification-badge-translate-inline: 50%;\n --brick-notification-badge-translate-block: -50%;\n\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n max-inline-size: 100%;\n vertical-align: middle;\n }\n\n .brick-notification-badge[data-size=\"sm\"] {\n --brick-notification-badge-size: 1rem;\n --brick-notification-badge-dot-size: 0.5rem;\n --brick-notification-badge-inline-padding: 0.25rem;\n }\n\n .brick-notification-badge[data-size=\"lg\"] {\n --brick-notification-badge-size: 1.5rem;\n --brick-notification-badge-dot-size: 0.75rem;\n --brick-notification-badge-inline-padding: 0.375rem;\n }\n\n .brick-notification-badge__indicator {\n position: absolute;\n z-index: 1;\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: var(--brick-notification-badge-size);\n block-size: var(--brick-notification-badge-size);\n align-items: center;\n justify-content: center;\n padding-inline: var(--brick-notification-badge-inline-padding);\n border: var(--brick-border-width) solid var(--brick-notification-badge-outline-color);\n border-radius: var(--brick-radius-full);\n background: var(--brick-badge-tone-solid);\n color: var(--brick-badge-tone-on-solid);\n font-family: var(--brick-font-family-body);\n font-size: 0.6875rem;\n font-weight: var(--brick-font-weight-semibold);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n pointer-events: none;\n white-space: nowrap;\n }\n\n .brick-notification-badge__indicator[data-shape=\"circle\"] {\n inline-size: var(--brick-notification-badge-size);\n padding-inline: 0;\n }\n\n .brick-notification-badge__indicator[data-variant=\"dot\"] {\n min-inline-size: var(--brick-notification-badge-dot-size);\n inline-size: var(--brick-notification-badge-dot-size);\n block-size: var(--brick-notification-badge-dot-size);\n padding: 0;\n }\n\n .brick-notification-badge[data-placement^=\"top\"]\n > .brick-notification-badge__indicator {\n inset-block-start: 0;\n }\n\n .brick-notification-badge[data-placement^=\"bottom\"]\n > .brick-notification-badge__indicator {\n --brick-notification-badge-translate-block: 50%;\n inset-block-end: 0;\n }\n\n .brick-notification-badge[data-placement$=\"end\"]\n > .brick-notification-badge__indicator {\n inset-inline-end: 0;\n translate: var(--brick-notification-badge-translate-inline)\n var(--brick-notification-badge-translate-block);\n }\n\n .brick-notification-badge[data-placement$=\"start\"]\n > .brick-notification-badge__indicator {\n inset-inline-start: 0;\n translate: calc(var(--brick-notification-badge-translate-inline) * -1)\n var(--brick-notification-badge-translate-block);\n }\n\n .brick-notification-badge[data-overlap=\"circular\"] {\n --brick-notification-badge-translate-inline: 50%;\n --brick-notification-badge-translate-block: -50%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement^=\"bottom\"] {\n --brick-notification-badge-translate-block: 50%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement^=\"top\"]\n > .brick-notification-badge__indicator {\n inset-block-start: 14.6447%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement^=\"bottom\"]\n > .brick-notification-badge__indicator {\n inset-block-end: 14.6447%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement$=\"start\"]\n > .brick-notification-badge__indicator {\n inset-inline-start: 14.6447%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement$=\"end\"]\n > .brick-notification-badge__indicator {\n inset-inline-end: 14.6447%;\n }\n\n :is([dir=\"rtl\"], :dir(rtl))\n .brick-notification-badge[data-placement$=\"end\"]\n > .brick-notification-badge__indicator,\n .brick-notification-badge[dir=\"rtl\"][data-placement$=\"end\"]\n > .brick-notification-badge__indicator {\n translate: calc(var(--brick-notification-badge-translate-inline) * -1)\n var(--brick-notification-badge-translate-block);\n }\n\n :is([dir=\"rtl\"], :dir(rtl))\n .brick-notification-badge[data-placement$=\"start\"]\n > .brick-notification-badge__indicator,\n .brick-notification-badge[dir=\"rtl\"][data-placement$=\"start\"]\n > .brick-notification-badge__indicator {\n translate: var(--brick-notification-badge-translate-inline)\n var(--brick-notification-badge-translate-block);\n }\n\n @media (forced-colors: active) {\n .brick-badge {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n\n .brick-notification-badge__indicator {\n border-color: Canvas;\n background: CanvasText;\n color: Canvas;\n forced-color-adjust: none;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,oYAUA,oyCAqCA,4EAIA,+MAOA,+MAOA,2MAMA,wLAMA,yaAUA,yZAUA,ibAUA,ibAUA,yaAUA,ibAeA,wKAMA,4KAMA,ssBAuBA,0HAKA,mOAOA,wGAKA,wJAMA,kNAOA,iOAOA,iJAKA,wHAIA,sIAKA,uIAKA,yIAKA,qIAKA,igBASA,0fASA,8BACE,wEAMA,uHD7QJ","sources":["home/runner/work/brick/brick/.brick-cache/production/badge.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/badge/badge.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/badge/badge.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-badge,\n .brick-notification-badge {\n --brick-badge-tone-solid: var(--brick-color-text-primary);\n --brick-badge-tone-on-solid: var(--brick-color-text-inverse);\n --brick-badge-tone-soft: var(--brick-color-surface-subtle);\n --brick-badge-tone-on-soft: var(--brick-color-text-primary);\n --brick-badge-tone-border: var(--brick-color-border-strong);\n --brick-badge-tone-text: var(--brick-color-text-primary);\n }\n\n .brick-badge {\n --brick-badge-background: var(--brick-badge-tone-soft);\n --brick-badge-foreground: var(--brick-badge-tone-on-soft);\n --brick-badge-border-color: transparent;\n --brick-badge-min-block-size: 1.5rem;\n --brick-badge-inline-padding: 0.5rem;\n --brick-badge-block-padding: 0.125rem;\n --brick-badge-gap: var(--brick-space-1);\n --brick-badge-radius: var(--brick-radius-control);\n --brick-badge-font-size: var(--brick-typography-control-sm-font-size);\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n min-block-size: var(--brick-badge-min-block-size);\n max-inline-size: 100%;\n align-items: center;\n justify-content: safe center;\n gap: var(--brick-badge-gap);\n padding-block: var(--brick-badge-block-padding);\n padding-inline: var(--brick-badge-inline-padding);\n border: var(--brick-border-width) solid var(--brick-badge-border-color);\n border-radius: var(--brick-badge-radius);\n background: var(--brick-badge-background);\n color: var(--brick-badge-foreground);\n font-family: var(--brick-typography-control-sm-font-family);\n font-size: var(--brick-badge-font-size);\n font-weight: var(--brick-typography-control-sm-font-weight);\n font-variant-numeric: tabular-nums;\n letter-spacing: var(--brick-typography-control-sm-letter-spacing);\n line-height: var(--brick-typography-control-sm-line-height);\n overflow-wrap: anywhere;\n word-break: break-word;\n text-align: start;\n vertical-align: baseline;\n }\n\n .brick-badge[data-shape=\"pill\"] {\n --brick-badge-radius: var(--brick-radius-full);\n }\n\n .brick-badge[data-size=\"sm\"] {\n --brick-badge-min-block-size: 1.25rem;\n --brick-badge-inline-padding: 0.375rem;\n --brick-badge-block-padding: 0.0625rem;\n --brick-badge-font-size: var(--brick-typography-control-xs-font-size);\n }\n\n .brick-badge[data-size=\"lg\"] {\n --brick-badge-min-block-size: 1.75rem;\n --brick-badge-inline-padding: 0.625rem;\n --brick-badge-block-padding: 0.1875rem;\n --brick-badge-font-size: var(--brick-typography-control-lg-font-size);\n }\n\n .brick-badge[data-variant=\"solid\"] {\n --brick-badge-background: var(--brick-badge-tone-solid);\n --brick-badge-foreground: var(--brick-badge-tone-on-solid);\n --brick-badge-border-color: var(--brick-badge-tone-solid);\n }\n\n .brick-badge[data-variant=\"outline\"] {\n --brick-badge-background: transparent;\n --brick-badge-foreground: var(--brick-badge-tone-text);\n --brick-badge-border-color: var(--brick-badge-tone-border);\n }\n\n .brick-badge[data-tone=\"accent\"],\n .brick-notification-badge[data-tone=\"accent\"] {\n --brick-badge-tone-solid: var(--brick-color-accent-solid);\n --brick-badge-tone-on-solid: var(--brick-color-accent-on-solid);\n --brick-badge-tone-soft: var(--brick-color-accent-soft);\n --brick-badge-tone-on-soft: var(--brick-color-accent-on-soft);\n --brick-badge-tone-border: var(--brick-color-accent-border);\n --brick-badge-tone-text: var(--brick-color-accent-text);\n }\n\n .brick-badge[data-tone=\"info\"],\n .brick-notification-badge[data-tone=\"info\"] {\n --brick-badge-tone-solid: var(--brick-color-info-solid);\n --brick-badge-tone-on-solid: var(--brick-color-info-on-solid);\n --brick-badge-tone-soft: var(--brick-color-info-soft);\n --brick-badge-tone-on-soft: var(--brick-color-info-on-soft);\n --brick-badge-tone-border: var(--brick-color-info-border);\n --brick-badge-tone-text: var(--brick-color-info-text);\n }\n\n .brick-badge[data-tone=\"success\"],\n .brick-notification-badge[data-tone=\"success\"] {\n --brick-badge-tone-solid: var(--brick-color-success-solid);\n --brick-badge-tone-on-solid: var(--brick-color-success-on-solid);\n --brick-badge-tone-soft: var(--brick-color-success-soft);\n --brick-badge-tone-on-soft: var(--brick-color-success-on-soft);\n --brick-badge-tone-border: var(--brick-color-success-border);\n --brick-badge-tone-text: var(--brick-color-success-text);\n }\n\n .brick-badge[data-tone=\"warning\"],\n .brick-notification-badge[data-tone=\"warning\"] {\n --brick-badge-tone-solid: var(--brick-color-warning-solid);\n --brick-badge-tone-on-solid: var(--brick-color-warning-on-solid);\n --brick-badge-tone-soft: var(--brick-color-warning-soft);\n --brick-badge-tone-on-soft: var(--brick-color-warning-on-soft);\n --brick-badge-tone-border: var(--brick-color-warning-border);\n --brick-badge-tone-text: var(--brick-color-warning-text);\n }\n\n .brick-badge[data-tone=\"danger\"],\n .brick-notification-badge[data-tone=\"danger\"] {\n --brick-badge-tone-solid: var(--brick-color-danger-solid);\n --brick-badge-tone-on-solid: var(--brick-color-danger-on-solid);\n --brick-badge-tone-soft: var(--brick-color-danger-soft);\n --brick-badge-tone-on-soft: var(--brick-color-danger-on-soft);\n --brick-badge-tone-border: var(--brick-color-danger-border);\n --brick-badge-tone-text: var(--brick-color-danger-text);\n }\n\n .brick-notification-badge {\n --brick-notification-badge-size: 1.25rem;\n --brick-notification-badge-dot-size: 0.625rem;\n --brick-notification-badge-inline-padding: 0.3125rem;\n --brick-notification-badge-outline-color: var(--brick-color-surface-base);\n --brick-notification-badge-translate-inline: 50%;\n --brick-notification-badge-translate-block: -50%;\n\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n max-inline-size: 100%;\n vertical-align: middle;\n }\n\n .brick-notification-badge[data-size=\"sm\"] {\n --brick-notification-badge-size: 1rem;\n --brick-notification-badge-dot-size: 0.5rem;\n --brick-notification-badge-inline-padding: 0.25rem;\n }\n\n .brick-notification-badge[data-size=\"lg\"] {\n --brick-notification-badge-size: 1.5rem;\n --brick-notification-badge-dot-size: 0.75rem;\n --brick-notification-badge-inline-padding: 0.375rem;\n }\n\n .brick-notification-badge__indicator {\n position: absolute;\n z-index: 1;\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: var(--brick-notification-badge-size);\n block-size: var(--brick-notification-badge-size);\n align-items: center;\n justify-content: center;\n padding-inline: var(--brick-notification-badge-inline-padding);\n border: var(--brick-border-width) solid var(--brick-notification-badge-outline-color);\n border-radius: var(--brick-radius-full);\n background: var(--brick-badge-tone-solid);\n color: var(--brick-badge-tone-on-solid);\n font-family: var(--brick-font-family-body);\n font-size: 0.6875rem;\n font-weight: var(--brick-font-weight-semibold);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n pointer-events: none;\n white-space: nowrap;\n }\n\n .brick-notification-badge__indicator[data-shape=\"circle\"] {\n inline-size: var(--brick-notification-badge-size);\n padding-inline: 0;\n }\n\n .brick-notification-badge__indicator[data-variant=\"dot\"] {\n min-inline-size: var(--brick-notification-badge-dot-size);\n inline-size: var(--brick-notification-badge-dot-size);\n block-size: var(--brick-notification-badge-dot-size);\n padding: 0;\n }\n\n .brick-notification-badge[data-placement^=\"top\"]\n > .brick-notification-badge__indicator {\n inset-block-start: 0;\n }\n\n .brick-notification-badge[data-placement^=\"bottom\"]\n > .brick-notification-badge__indicator {\n --brick-notification-badge-translate-block: 50%;\n inset-block-end: 0;\n }\n\n .brick-notification-badge[data-placement$=\"end\"]\n > .brick-notification-badge__indicator {\n inset-inline-end: 0;\n translate: var(--brick-notification-badge-translate-inline)\n var(--brick-notification-badge-translate-block);\n }\n\n .brick-notification-badge[data-placement$=\"start\"]\n > .brick-notification-badge__indicator {\n inset-inline-start: 0;\n translate: calc(var(--brick-notification-badge-translate-inline) * -1)\n var(--brick-notification-badge-translate-block);\n }\n\n .brick-notification-badge[data-overlap=\"circular\"] {\n --brick-notification-badge-translate-inline: 50%;\n --brick-notification-badge-translate-block: -50%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement^=\"bottom\"] {\n --brick-notification-badge-translate-block: 50%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement^=\"top\"]\n > .brick-notification-badge__indicator {\n inset-block-start: 14.6447%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement^=\"bottom\"]\n > .brick-notification-badge__indicator {\n inset-block-end: 14.6447%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement$=\"start\"]\n > .brick-notification-badge__indicator {\n inset-inline-start: 14.6447%;\n }\n\n .brick-notification-badge[data-overlap=\"circular\"][data-placement$=\"end\"]\n > .brick-notification-badge__indicator {\n inset-inline-end: 14.6447%;\n }\n\n :is([dir=\"rtl\"], :dir(rtl))\n .brick-notification-badge[data-placement$=\"end\"]\n > .brick-notification-badge__indicator,\n .brick-notification-badge[dir=\"rtl\"][data-placement$=\"end\"]\n > .brick-notification-badge__indicator {\n translate: calc(var(--brick-notification-badge-translate-inline) * -1)\n var(--brick-notification-badge-translate-block);\n }\n\n :is([dir=\"rtl\"], :dir(rtl))\n .brick-notification-badge[data-placement$=\"start\"]\n > .brick-notification-badge__indicator,\n .brick-notification-badge[dir=\"rtl\"][data-placement$=\"start\"]\n > .brick-notification-badge__indicator {\n translate: var(--brick-notification-badge-translate-inline)\n var(--brick-notification-badge-translate-block);\n }\n\n @media (forced-colors: active) {\n .brick-badge {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n\n .brick-notification-badge__indicator {\n border-color: Canvas;\n background: CanvasText;\n color: Canvas;\n forced-color-adjust: none;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-bottom-navigation{--brick-bottom-navigation-background:var(--brick-color-surface-base);--brick-bottom-navigation-foreground:var(--brick-color-text-secondary);--brick-bottom-navigation-border-color:var(--brick-color-border-default);--brick-bottom-navigation-shadow:0 .5rem 1.5rem color-mix(in srgb, var(--brick-color-shadow), transparent 38%);--brick-bottom-navigation-gap:var(--brick-space-1);--brick-bottom-navigation-outer-gutter:var(--brick-space-3);--brick-bottom-navigation-padding-inline:var(--brick-space-2);--brick-bottom-navigation-padding-block:var(--brick-space-2);--brick-bottom-navigation-item-min-inline-size:3.5rem;--brick-bottom-navigation-item-max-inline-size:6rem;--brick-bottom-navigation-item-min-block-size:4rem;--brick-bottom-navigation-item-radius:var(--brick-radius-control);--brick-bottom-navigation-item-foreground:var(--brick-color-text-secondary);--brick-bottom-navigation-item-foreground-hover:var(--brick-color-text-primary);--brick-bottom-navigation-item-foreground-active:var(--brick-color-text-primary);--brick-bottom-navigation-item-foreground-disabled:var(--brick-color-text-muted);--brick-bottom-navigation-item-background-hover:var(--brick-color-surface-subtle);--brick-bottom-navigation-item-background-pressed:var(--brick-color-surface-raised);--brick-bottom-navigation-selection-background:var(--brick-color-surface-raised);--brick-bottom-navigation-selection-border:var(--brick-color-border-strong);--brick-bottom-navigation-focus-ring:var(--brick-color-text-primary);--brick-bottom-navigation-icon-size:1.5rem;--brick-bottom-navigation-icon-indicator-inline-size:4rem;--brick-bottom-navigation-icon-indicator-block-size:2rem;--brick-bottom-navigation-label-gap:var(--brick-space-1);--brick-bottom-navigation-label-font-family:var(--brick-typography-caption-font-family);--brick-bottom-navigation-label-font-size:var(--brick-typography-caption-font-size);--brick-bottom-navigation-label-font-weight:var(--brick-typography-caption-font-weight);--brick-bottom-navigation-label-font-weight-active:var(--brick-typography-label-strong-font-weight);--brick-bottom-navigation-label-line-height:var(--brick-typography-caption-line-height);--brick-bottom-navigation-label-letter-spacing:var(--brick-typography-caption-letter-spacing);--brick-bottom-navigation-blurred-background:color-mix(in srgb, var(--brick-bottom-navigation-background), transparent 14%);--brick-bottom-navigation-reduced-transparency-background:var(--brick-bottom-navigation-background);--brick-bottom-navigation-z-index:calc(var(--brick-layer-overlay) - 10);--brick-bottom-navigation-resolved-block-size:5rem;--_brick-bottom-navigation-safe-area-block-size:0px;box-sizing:border-box;block-size:calc(var(--brick-bottom-navigation-resolved-block-size) + var(--_brick-bottom-navigation-safe-area-block-size));align-items:stretch;gap:var(--brick-bottom-navigation-gap);inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--brick-bottom-navigation-padding-block) var(--brick-bottom-navigation-padding-inline);background:var(--brick-bottom-navigation-background);color:var(--brick-bottom-navigation-foreground);border:0;grid-auto-flow:column;display:grid}.brick-bottom-navigation[data-arrangement=equal]{grid-auto-columns:minmax(var(--brick-bottom-navigation-item-min-inline-size), 1fr)}.brick-bottom-navigation[data-arrangement=centered]{grid-auto-columns:minmax(var(--brick-bottom-navigation-item-min-inline-size), var(--brick-bottom-navigation-item-max-inline-size));justify-content:center}.brick-bottom-navigation[data-layout=floating]{inline-size:fit-content;max-inline-size:calc(100% - (2 * var(--brick-bottom-navigation-outer-gutter)));border-radius:var(--brick-radius-overlay);margin-inline:auto}.brick-bottom-navigation[data-position=sticky],.brick-bottom-navigation[data-position=absolute],.brick-bottom-navigation[data-position=fixed]{z-index:var(--brick-bottom-navigation-z-index);inset-block-end:0}.brick-bottom-navigation[data-position=sticky]{position:sticky}.brick-bottom-navigation[data-position=absolute]{position:absolute}.brick-bottom-navigation[data-position=fixed]{position:fixed}.brick-bottom-navigation[data-layout=full]:is([data-position=absolute],[data-position=fixed]){inset-inline:0}.brick-bottom-navigation[data-layout=floating]:is([data-position=absolute],[data-position=fixed]){margin-inline:0;inset-inline-start:50%;transform:translate(-50%)}.brick-bottom-navigation[data-safe-area]:not([data-layout=floating]):is([data-position=sticky],[data-position=absolute],[data-position=fixed]){--_brick-bottom-navigation-safe-area-block-size:env(safe-area-max-inset-bottom,0px);padding-block-end:calc(var(--brick-bottom-navigation-padding-block) + var(--_brick-bottom-navigation-safe-area-block-size));padding-inline-start:max(var(--brick-bottom-navigation-padding-inline), env(safe-area-max-inset-left,0px));padding-inline-end:max(var(--brick-bottom-navigation-padding-inline), env(safe-area-max-inset-right,0px))}.brick-bottom-navigation[data-safe-area][data-layout=floating]:is([data-position=sticky],[data-position=absolute],[data-position=fixed]){inset-block-end:max(var(--brick-bottom-navigation-outer-gutter), env(safe-area-max-inset-bottom,0px))}.brick-bottom-navigation[data-tone=accent]{--brick-bottom-navigation-item-foreground-active:var(--brick-color-accent-text);--brick-bottom-navigation-selection-background:var(--brick-color-accent-soft);--brick-bottom-navigation-selection-border:var(--brick-color-accent-border);--brick-bottom-navigation-focus-ring:var(--brick-color-focus-ring)}.brick-bottom-navigation[data-variant=solid]{--brick-bottom-navigation-background:var(--brick-color-text-primary);--brick-bottom-navigation-foreground:var(--brick-color-text-inverse);--brick-bottom-navigation-border-color:transparent;--brick-bottom-navigation-item-foreground:var(--brick-color-text-inverse);--brick-bottom-navigation-item-foreground-hover:var(--brick-color-text-inverse);--brick-bottom-navigation-item-foreground-active:var(--brick-color-text-inverse);--brick-bottom-navigation-item-background-hover:color-mix(in srgb, currentColor, transparent 88%);--brick-bottom-navigation-item-background-pressed:color-mix(in srgb, currentColor, transparent 78%);--brick-bottom-navigation-selection-background:color-mix(in srgb, currentColor, transparent 80%);--brick-bottom-navigation-selection-border:currentColor;--brick-bottom-navigation-focus-ring:currentColor}.brick-bottom-navigation[data-tone=accent][data-variant=solid]{--brick-bottom-navigation-background:var(--brick-color-accent-solid);--brick-bottom-navigation-foreground:var(--brick-color-accent-on-solid);--brick-bottom-navigation-item-foreground:var(--brick-color-accent-on-solid);--brick-bottom-navigation-item-foreground-hover:var(--brick-color-accent-on-solid);--brick-bottom-navigation-item-foreground-active:var(--brick-color-accent-on-solid)}.brick-bottom-navigation[data-variant=soft]{--brick-bottom-navigation-background:var(--brick-color-surface-subtle);--brick-bottom-navigation-border-color:transparent}.brick-bottom-navigation[data-tone=accent][data-variant=soft]{--brick-bottom-navigation-background:var(--brick-color-accent-soft);--brick-bottom-navigation-foreground:var(--brick-color-accent-on-soft)}.brick-bottom-navigation[data-variant=outline]{border-block-start:var(--brick-border-width) solid var(--brick-bottom-navigation-border-color)}.brick-bottom-navigation[data-layout=floating][data-variant=outline]{border:var(--brick-border-width) solid var(--brick-bottom-navigation-border-color)}.brick-bottom-navigation[data-variant=ghost]{--brick-bottom-navigation-background:transparent;--brick-bottom-navigation-border-color:transparent}.brick-bottom-navigation[data-elevated]{box-shadow:var(--brick-bottom-navigation-shadow)}.brick-bottom-navigation[data-blurred]{background:var(--brick-bottom-navigation-blurred-background);backdrop-filter:blur(.75rem)saturate(1.15)}.brick-bottom-navigation[data-size=sm]{--brick-bottom-navigation-padding-inline:var(--brick-space-1);--brick-bottom-navigation-padding-block:var(--brick-space-1);--brick-bottom-navigation-item-min-inline-size:3rem;--brick-bottom-navigation-item-max-inline-size:5rem;--brick-bottom-navigation-item-min-block-size:3rem;--brick-bottom-navigation-icon-size:1.25rem;--brick-bottom-navigation-icon-indicator-inline-size:3.25rem;--brick-bottom-navigation-icon-indicator-block-size:1.75rem;--brick-bottom-navigation-resolved-block-size:4rem}.brick-bottom-navigation[data-size=lg]{--brick-bottom-navigation-padding-inline:var(--brick-space-3);--brick-bottom-navigation-padding-block:var(--brick-space-3);--brick-bottom-navigation-item-min-inline-size:4rem;--brick-bottom-navigation-item-max-inline-size:7rem;--brick-bottom-navigation-item-min-block-size:4.75rem;--brick-bottom-navigation-icon-size:1.75rem;--brick-bottom-navigation-icon-indicator-inline-size:4.5rem;--brick-bottom-navigation-icon-indicator-block-size:2.5rem;--brick-bottom-navigation-label-font-size:var(--brick-typography-body-sm-font-size);--brick-bottom-navigation-label-line-height:var(--brick-typography-body-sm-line-height);--brick-bottom-navigation-resolved-block-size:6.25rem}.brick-bottom-navigation__item{box-sizing:border-box;min-inline-size:0;min-block-size:var(--brick-bottom-navigation-item-min-block-size);justify-content:center;align-items:center;gap:var(--brick-bottom-navigation-label-gap);padding:var(--brick-space-1);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-bottom-navigation-item-radius);appearance:none;color:var(--brick-bottom-navigation-item-foreground);font:inherit;text-align:center;touch-action:manipulation;cursor:pointer;background:0 0;flex-direction:column;text-decoration:none;display:flex;position:relative}.brick-bottom-navigation__item:hover:not([data-disabled]){background:var(--brick-bottom-navigation-item-background-hover);color:var(--brick-bottom-navigation-item-foreground-hover)}.brick-bottom-navigation__item:active:not([data-disabled]){background:var(--brick-bottom-navigation-item-background-pressed)}.brick-bottom-navigation__item:focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-bottom-navigation-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-bottom-navigation__item[data-state=active]{color:var(--brick-bottom-navigation-item-foreground-active)}.brick-bottom-navigation[data-selection=item] .brick-bottom-navigation__item[data-state=active]{border-color:var(--brick-bottom-navigation-selection-border);background:var(--brick-bottom-navigation-selection-background)}.brick-bottom-navigation[data-selection=item][data-selection-shape=square] .brick-bottom-navigation__item{--brick-bottom-navigation-item-radius:0}.brick-bottom-navigation[data-selection=item][data-selection-shape=rounded] .brick-bottom-navigation__item{--brick-bottom-navigation-item-radius:var(--brick-radius-control)}.brick-bottom-navigation[data-selection=item][data-selection-shape=pill] .brick-bottom-navigation__item{--brick-bottom-navigation-item-radius:var(--brick-radius-full)}.brick-bottom-navigation__item[data-disabled]{color:var(--brick-bottom-navigation-item-foreground-disabled);cursor:not-allowed;opacity:.65}.brick-bottom-navigation__icon{box-sizing:border-box;inline-size:var(--brick-bottom-navigation-icon-indicator-inline-size);block-size:var(--brick-bottom-navigation-icon-indicator-block-size);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-radius-full);color:inherit;flex:none;justify-content:center;align-items:center;display:inline-flex}.brick-bottom-navigation__icon :where(.brick-icon,svg,img){inline-size:var(--brick-bottom-navigation-icon-size);block-size:var(--brick-bottom-navigation-icon-size)}.brick-bottom-navigation[data-selection=indicator] .brick-bottom-navigation__item[data-state=active] .brick-bottom-navigation__icon{border-color:var(--brick-bottom-navigation-selection-border);background:var(--brick-bottom-navigation-selection-background)}.brick-bottom-navigation[data-selection=indicator][data-selection-shape=circle] .brick-bottom-navigation__icon{inline-size:var(--brick-bottom-navigation-icon-indicator-block-size);border-radius:var(--brick-radius-full)}.brick-bottom-navigation[data-selection=indicator][data-selection-shape=rounded] .brick-bottom-navigation__icon{border-radius:var(--brick-radius-control)}.brick-bottom-navigation[data-selection=indicator][data-selection-shape=pill] .brick-bottom-navigation__icon{border-radius:var(--brick-radius-full)}.brick-bottom-navigation__label{min-inline-size:0;max-inline-size:100%;color:inherit;font-family:var(--brick-bottom-navigation-label-font-family);font-size:var(--brick-bottom-navigation-label-font-size);font-weight:var(--brick-bottom-navigation-label-font-weight);letter-spacing:var(--brick-bottom-navigation-label-letter-spacing);line-height:var(--brick-bottom-navigation-label-line-height);overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.brick-bottom-navigation__item[data-state=active] .brick-bottom-navigation__label{font-weight:var(--brick-bottom-navigation-label-font-weight-active)}.brick-bottom-navigation__item:not([data-label-visible]) .brick-bottom-navigation__label{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;overflow-wrap:normal;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:no-preference){.brick-bottom-navigation__item,.brick-bottom-navigation__icon{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)}}@media (prefers-reduced-transparency:reduce){.brick-bottom-navigation[data-blurred]{background:var(--brick-bottom-navigation-reduced-transparency-background);backdrop-filter:none}}@media (forced-colors:active){.brick-bottom-navigation,.brick-bottom-navigation[data-variant],.brick-bottom-navigation[data-blurred]{--brick-bottom-navigation-background:Canvas;--brick-bottom-navigation-foreground:CanvasText;--brick-bottom-navigation-border-color:CanvasText;--brick-bottom-navigation-item-foreground:LinkText;--brick-bottom-navigation-item-foreground-hover:LinkText;--brick-bottom-navigation-item-foreground-active:LinkText;--brick-bottom-navigation-item-foreground-disabled:GrayText;--brick-bottom-navigation-selection-background:Canvas;--brick-bottom-navigation-selection-border:Highlight;--brick-bottom-navigation-focus-ring:Highlight;box-shadow:none}.brick-bottom-navigation__item[data-disabled]{border-color:graytext}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-bottom-navigation{--brick-bottom-navigation-background:var(--brick-color-surface-base);--brick-bottom-navigation-foreground:var(--brick-color-text-secondary);--brick-bottom-navigation-border-color:var(--brick-color-border-default);--brick-bottom-navigation-shadow:0 .5rem 1.5rem color-mix(in srgb, var(--brick-color-shadow), transparent 38%);--brick-bottom-navigation-gap:var(--brick-space-1);--brick-bottom-navigation-outer-gutter:var(--brick-space-3);--brick-bottom-navigation-padding-inline:var(--brick-space-2);--brick-bottom-navigation-padding-block:var(--brick-space-2);--brick-bottom-navigation-item-min-inline-size:3.5rem;--brick-bottom-navigation-item-max-inline-size:6rem;--brick-bottom-navigation-item-min-block-size:4rem;--brick-bottom-navigation-item-radius:var(--brick-radius-control);--brick-bottom-navigation-item-foreground:var(--brick-color-text-secondary);--brick-bottom-navigation-item-foreground-hover:var(--brick-color-text-primary);--brick-bottom-navigation-item-foreground-active:var(--brick-color-text-primary);--brick-bottom-navigation-item-foreground-disabled:var(--brick-color-text-muted);--brick-bottom-navigation-item-background-hover:var(--brick-color-surface-subtle);--brick-bottom-navigation-item-background-pressed:var(--brick-color-surface-raised);--brick-bottom-navigation-selection-background:var(--brick-color-surface-raised);--brick-bottom-navigation-selection-border:var(--brick-color-border-strong);--brick-bottom-navigation-focus-ring:var(--brick-color-text-primary);--brick-bottom-navigation-icon-size:1.5rem;--brick-bottom-navigation-icon-indicator-inline-size:4rem;--brick-bottom-navigation-icon-indicator-block-size:2rem;--brick-bottom-navigation-label-gap:var(--brick-space-1);--brick-bottom-navigation-label-font-family:var(--brick-typography-caption-font-family);--brick-bottom-navigation-label-font-size:var(--brick-typography-caption-font-size);--brick-bottom-navigation-label-font-weight:var(--brick-typography-caption-font-weight);--brick-bottom-navigation-label-font-weight-active:var(--brick-typography-label-strong-font-weight);--brick-bottom-navigation-label-line-height:var(--brick-typography-caption-line-height);--brick-bottom-navigation-label-letter-spacing:var(--brick-typography-caption-letter-spacing);--brick-bottom-navigation-blurred-background:color-mix(in srgb, var(--brick-bottom-navigation-background), transparent 14%);--brick-bottom-navigation-reduced-transparency-background:var(--brick-bottom-navigation-background);--brick-bottom-navigation-z-index:calc(var(--brick-layer-overlay) - 10);--brick-bottom-navigation-resolved-block-size:5rem;--_brick-bottom-navigation-safe-area-block-size:0px;box-sizing:border-box;block-size:calc(var(--brick-bottom-navigation-resolved-block-size) + var(--_brick-bottom-navigation-safe-area-block-size));align-items:stretch;gap:var(--brick-bottom-navigation-gap);inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--brick-bottom-navigation-padding-block) var(--brick-bottom-navigation-padding-inline);background:var(--brick-bottom-navigation-background);color:var(--brick-bottom-navigation-foreground);border:0;grid-auto-flow:column;display:grid}.brick-bottom-navigation[data-arrangement=equal]{grid-auto-columns:minmax(var(--brick-bottom-navigation-item-min-inline-size), 1fr)}.brick-bottom-navigation[data-arrangement=centered]{grid-auto-columns:minmax(var(--brick-bottom-navigation-item-min-inline-size), var(--brick-bottom-navigation-item-max-inline-size));justify-content:center}.brick-bottom-navigation[data-layout=floating]{inline-size:fit-content;max-inline-size:calc(100% - (2 * var(--brick-bottom-navigation-outer-gutter)));border-radius:var(--brick-radius-overlay);margin-inline:auto}.brick-bottom-navigation[data-position=sticky],.brick-bottom-navigation[data-position=absolute],.brick-bottom-navigation[data-position=fixed]{z-index:var(--brick-bottom-navigation-z-index);inset-block-end:0}.brick-bottom-navigation[data-position=sticky]{position:sticky}.brick-bottom-navigation[data-position=absolute]{position:absolute}.brick-bottom-navigation[data-position=fixed]{position:fixed}.brick-bottom-navigation[data-layout=full]:is([data-position=absolute],[data-position=fixed]){inset-inline:0}.brick-bottom-navigation[data-layout=floating]:is([data-position=absolute],[data-position=fixed]){margin-inline:0;inset-inline-start:50%;transform:translate(-50%)}.brick-bottom-navigation[data-safe-area]:not([data-layout=floating]):is([data-position=sticky],[data-position=absolute],[data-position=fixed]){--_brick-bottom-navigation-safe-area-block-size:env(safe-area-max-inset-bottom,0px);padding-block-end:calc(var(--brick-bottom-navigation-padding-block) + var(--_brick-bottom-navigation-safe-area-block-size));padding-inline-start:max(var(--brick-bottom-navigation-padding-inline), env(safe-area-max-inset-left,0px));padding-inline-end:max(var(--brick-bottom-navigation-padding-inline), env(safe-area-max-inset-right,0px))}.brick-bottom-navigation[data-safe-area][data-layout=floating]:is([data-position=sticky],[data-position=absolute],[data-position=fixed]){inset-block-end:max(var(--brick-bottom-navigation-outer-gutter), env(safe-area-max-inset-bottom,0px))}.brick-bottom-navigation[data-tone=accent]{--brick-bottom-navigation-item-foreground-active:var(--brick-color-accent-text);--brick-bottom-navigation-selection-background:var(--brick-color-accent-soft);--brick-bottom-navigation-selection-border:var(--brick-color-accent-border);--brick-bottom-navigation-focus-ring:var(--brick-color-focus-ring)}.brick-bottom-navigation[data-variant=solid]{--brick-bottom-navigation-background:var(--brick-color-text-primary);--brick-bottom-navigation-foreground:var(--brick-color-text-inverse);--brick-bottom-navigation-border-color:transparent;--brick-bottom-navigation-item-foreground:var(--brick-color-text-inverse);--brick-bottom-navigation-item-foreground-hover:var(--brick-color-text-inverse);--brick-bottom-navigation-item-foreground-active:var(--brick-color-text-inverse);--brick-bottom-navigation-item-background-hover:color-mix(in srgb, currentColor, transparent 88%);--brick-bottom-navigation-item-background-pressed:color-mix(in srgb, currentColor, transparent 78%);--brick-bottom-navigation-selection-background:color-mix(in srgb, currentColor, transparent 80%);--brick-bottom-navigation-selection-border:currentColor;--brick-bottom-navigation-focus-ring:currentColor}.brick-bottom-navigation[data-tone=accent][data-variant=solid]{--brick-bottom-navigation-background:var(--brick-color-accent-solid);--brick-bottom-navigation-foreground:var(--brick-color-accent-on-solid);--brick-bottom-navigation-item-foreground:var(--brick-color-accent-on-solid);--brick-bottom-navigation-item-foreground-hover:var(--brick-color-accent-on-solid);--brick-bottom-navigation-item-foreground-active:var(--brick-color-accent-on-solid)}.brick-bottom-navigation[data-variant=soft]{--brick-bottom-navigation-background:var(--brick-color-surface-subtle);--brick-bottom-navigation-border-color:transparent}.brick-bottom-navigation[data-tone=accent][data-variant=soft]{--brick-bottom-navigation-background:var(--brick-color-accent-soft);--brick-bottom-navigation-foreground:var(--brick-color-accent-on-soft)}.brick-bottom-navigation[data-variant=outline]{border-block-start:var(--brick-border-width) solid var(--brick-bottom-navigation-border-color)}.brick-bottom-navigation[data-layout=floating][data-variant=outline]{border:var(--brick-border-width) solid var(--brick-bottom-navigation-border-color)}.brick-bottom-navigation[data-variant=ghost]{--brick-bottom-navigation-background:transparent;--brick-bottom-navigation-border-color:transparent}.brick-bottom-navigation[data-elevated]{box-shadow:var(--brick-bottom-navigation-shadow)}.brick-bottom-navigation[data-blurred]{background:var(--brick-bottom-navigation-blurred-background);backdrop-filter:blur(.75rem)saturate(1.15)}.brick-bottom-navigation[data-size=sm]{--brick-bottom-navigation-padding-inline:var(--brick-space-1);--brick-bottom-navigation-padding-block:var(--brick-space-1);--brick-bottom-navigation-item-min-inline-size:3rem;--brick-bottom-navigation-item-max-inline-size:5rem;--brick-bottom-navigation-item-min-block-size:3rem;--brick-bottom-navigation-icon-size:1.25rem;--brick-bottom-navigation-icon-indicator-inline-size:3.25rem;--brick-bottom-navigation-icon-indicator-block-size:1.75rem;--brick-bottom-navigation-resolved-block-size:4rem}.brick-bottom-navigation[data-size=lg]{--brick-bottom-navigation-padding-inline:var(--brick-space-3);--brick-bottom-navigation-padding-block:var(--brick-space-3);--brick-bottom-navigation-item-min-inline-size:4rem;--brick-bottom-navigation-item-max-inline-size:7rem;--brick-bottom-navigation-item-min-block-size:4.75rem;--brick-bottom-navigation-icon-size:1.75rem;--brick-bottom-navigation-icon-indicator-inline-size:4.5rem;--brick-bottom-navigation-icon-indicator-block-size:2.5rem;--brick-bottom-navigation-label-font-size:var(--brick-typography-body-sm-font-size);--brick-bottom-navigation-label-line-height:var(--brick-typography-body-sm-line-height);--brick-bottom-navigation-resolved-block-size:6.25rem}.brick-bottom-navigation__item{box-sizing:border-box;min-inline-size:0;min-block-size:var(--brick-bottom-navigation-item-min-block-size);justify-content:center;align-items:center;gap:var(--brick-bottom-navigation-label-gap);padding:var(--brick-space-1);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-bottom-navigation-item-radius);appearance:none;color:var(--brick-bottom-navigation-item-foreground);font:inherit;text-align:center;touch-action:manipulation;cursor:pointer;background:0 0;flex-direction:column;text-decoration:none;display:flex;position:relative}.brick-bottom-navigation__item:hover:not([data-disabled]){background:var(--brick-bottom-navigation-item-background-hover);color:var(--brick-bottom-navigation-item-foreground-hover)}.brick-bottom-navigation__item:active:not([data-disabled]){background:var(--brick-bottom-navigation-item-background-pressed)}.brick-bottom-navigation__item:focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-bottom-navigation-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-bottom-navigation__item[data-state=active]{color:var(--brick-bottom-navigation-item-foreground-active)}.brick-bottom-navigation[data-selection=item] .brick-bottom-navigation__item[data-state=active]{border-color:var(--brick-bottom-navigation-selection-border);background:var(--brick-bottom-navigation-selection-background)}.brick-bottom-navigation[data-selection=item][data-selection-shape=square] .brick-bottom-navigation__item{--brick-bottom-navigation-item-radius:0}.brick-bottom-navigation[data-selection=item][data-selection-shape=rounded] .brick-bottom-navigation__item{--brick-bottom-navigation-item-radius:var(--brick-radius-control)}.brick-bottom-navigation[data-selection=item][data-selection-shape=pill] .brick-bottom-navigation__item{--brick-bottom-navigation-item-radius:var(--brick-radius-full)}.brick-bottom-navigation__item[data-disabled]{color:var(--brick-bottom-navigation-item-foreground-disabled);cursor:not-allowed;opacity:.65}.brick-bottom-navigation__icon{box-sizing:border-box;inline-size:var(--brick-bottom-navigation-icon-indicator-inline-size);block-size:var(--brick-bottom-navigation-icon-indicator-block-size);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-radius-full);color:inherit;flex:none;justify-content:center;align-items:center;display:inline-flex}.brick-bottom-navigation__icon :where(.brick-icon,svg,img){inline-size:var(--brick-bottom-navigation-icon-size);block-size:var(--brick-bottom-navigation-icon-size)}.brick-bottom-navigation[data-selection=indicator] .brick-bottom-navigation__item[data-state=active] .brick-bottom-navigation__icon{border-color:var(--brick-bottom-navigation-selection-border);background:var(--brick-bottom-navigation-selection-background)}.brick-bottom-navigation[data-selection=indicator][data-selection-shape=circle] .brick-bottom-navigation__icon{inline-size:var(--brick-bottom-navigation-icon-indicator-block-size);border-radius:var(--brick-radius-full)}.brick-bottom-navigation[data-selection=indicator][data-selection-shape=rounded] .brick-bottom-navigation__icon{border-radius:var(--brick-radius-control)}.brick-bottom-navigation[data-selection=indicator][data-selection-shape=pill] .brick-bottom-navigation__icon{border-radius:var(--brick-radius-full)}.brick-bottom-navigation__label{min-inline-size:0;max-inline-size:100%;color:inherit;font-family:var(--brick-bottom-navigation-label-font-family);font-size:var(--brick-bottom-navigation-label-font-size);font-weight:var(--brick-bottom-navigation-label-font-weight);letter-spacing:var(--brick-bottom-navigation-label-letter-spacing);line-height:var(--brick-bottom-navigation-label-line-height);overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.brick-bottom-navigation__item[data-state=active] .brick-bottom-navigation__label{font-weight:var(--brick-bottom-navigation-label-font-weight-active)}.brick-bottom-navigation__item:not([data-label-visible]) .brick-bottom-navigation__label{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;overflow-wrap:normal;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:no-preference){.brick-bottom-navigation__item,.brick-bottom-navigation__icon{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)}}@media (prefers-reduced-transparency:reduce){.brick-bottom-navigation[data-blurred]{background:var(--brick-bottom-navigation-reduced-transparency-background);backdrop-filter:none}}@media (forced-colors:active){.brick-bottom-navigation,.brick-bottom-navigation[data-variant],.brick-bottom-navigation[data-blurred]{--brick-bottom-navigation-background:Canvas;--brick-bottom-navigation-foreground:CanvasText;--brick-bottom-navigation-border-color:CanvasText;--brick-bottom-navigation-item-foreground:LinkText;--brick-bottom-navigation-item-foreground-hover:LinkText;--brick-bottom-navigation-item-foreground-active:LinkText;--brick-bottom-navigation-item-foreground-disabled:GrayText;--brick-bottom-navigation-selection-background:Canvas;--brick-bottom-navigation-selection-border:Highlight;--brick-bottom-navigation-focus-ring:Highlight;box-shadow:none}.brick-bottom-navigation__item[data-disabled]{border-color:graytext}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=bottom-navigation.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,wmGAqDA,oIAIA,8MAKA,mNAOA,+MAOA,+DACA,mEACA,6DAEA,6GAIA,mKAMA,ojBAOA,+OAIA,wVAOA,s2BAcA,gcAQA,sKAKA,yMAKA,8IAIA,wJAIA,iJAKA,yFAEA,+IAMA,qhBAYA,qsBAcA,+kBAuBA,qLAKA,6HAEA,+LAMA,8GAIA,4NAKA,kJACA,6KACA,uKAEA,2IAMA,+WAaA,oKAKA,gQAKA,2NAKA,0JACA,oJAEA,qeAgBA,sJAEA,4QAcA,8CACE,kUAMF,6CACE,uIAOF,8BACE,ioBAgBA,sEDlVJ","sources":["home/runner/work/brick/brick/.brick-cache/production/bottom-navigation.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/bottom-navigation/bottom-navigation.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/bottom-navigation/bottom-navigation.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-bottom-navigation {\n --brick-bottom-navigation-background: var(--brick-color-surface-base);\n --brick-bottom-navigation-foreground: var(--brick-color-text-secondary);\n --brick-bottom-navigation-border-color: var(--brick-color-border-default);\n --brick-bottom-navigation-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--brick-color-shadow), transparent 38%);\n --brick-bottom-navigation-gap: var(--brick-space-1);\n --brick-bottom-navigation-outer-gutter: var(--brick-space-3);\n --brick-bottom-navigation-padding-inline: var(--brick-space-2);\n --brick-bottom-navigation-padding-block: var(--brick-space-2);\n --brick-bottom-navigation-item-min-inline-size: 3.5rem;\n --brick-bottom-navigation-item-max-inline-size: 6rem;\n --brick-bottom-navigation-item-min-block-size: 4rem;\n --brick-bottom-navigation-item-radius: var(--brick-radius-control);\n --brick-bottom-navigation-item-foreground: var(--brick-color-text-secondary);\n --brick-bottom-navigation-item-foreground-hover: var(--brick-color-text-primary);\n --brick-bottom-navigation-item-foreground-active: var(--brick-color-text-primary);\n --brick-bottom-navigation-item-foreground-disabled: var(--brick-color-text-muted);\n --brick-bottom-navigation-item-background-hover: var(--brick-color-surface-subtle);\n --brick-bottom-navigation-item-background-pressed: var(--brick-color-surface-raised);\n --brick-bottom-navigation-selection-background: var(--brick-color-surface-raised);\n --brick-bottom-navigation-selection-border: var(--brick-color-border-strong);\n --brick-bottom-navigation-focus-ring: var(--brick-color-text-primary);\n --brick-bottom-navigation-icon-size: 1.5rem;\n --brick-bottom-navigation-icon-indicator-inline-size: 4rem;\n --brick-bottom-navigation-icon-indicator-block-size: 2rem;\n --brick-bottom-navigation-label-gap: var(--brick-space-1);\n --brick-bottom-navigation-label-font-family: var(--brick-typography-caption-font-family);\n --brick-bottom-navigation-label-font-size: var(--brick-typography-caption-font-size);\n --brick-bottom-navigation-label-font-weight: var(--brick-typography-caption-font-weight);\n --brick-bottom-navigation-label-font-weight-active: var(--brick-typography-label-strong-font-weight);\n --brick-bottom-navigation-label-line-height: var(--brick-typography-caption-line-height);\n --brick-bottom-navigation-label-letter-spacing: var(--brick-typography-caption-letter-spacing);\n --brick-bottom-navigation-blurred-background: color-mix(in srgb, var(--brick-bottom-navigation-background), transparent 14%);\n --brick-bottom-navigation-reduced-transparency-background: var(--brick-bottom-navigation-background);\n --brick-bottom-navigation-z-index: calc(var(--brick-layer-overlay) - 10);\n --brick-bottom-navigation-resolved-block-size: 5rem;\n --_brick-bottom-navigation-safe-area-block-size: 0px;\n\n box-sizing: border-box;\n display: grid;\n block-size: calc(var(--brick-bottom-navigation-resolved-block-size) + var(--_brick-bottom-navigation-safe-area-block-size));\n inline-size: 100%;\n max-inline-size: 100%;\n min-inline-size: 0;\n grid-auto-flow: column;\n align-items: stretch;\n gap: var(--brick-bottom-navigation-gap);\n padding: var(--brick-bottom-navigation-padding-block) var(--brick-bottom-navigation-padding-inline);\n border: 0;\n background: var(--brick-bottom-navigation-background);\n color: var(--brick-bottom-navigation-foreground);\n }\n\n .brick-bottom-navigation[data-arrangement=\"equal\"] {\n grid-auto-columns: minmax(var(--brick-bottom-navigation-item-min-inline-size), 1fr);\n }\n\n .brick-bottom-navigation[data-arrangement=\"centered\"] {\n grid-auto-columns: minmax(var(--brick-bottom-navigation-item-min-inline-size), var(--brick-bottom-navigation-item-max-inline-size));\n justify-content: center;\n }\n\n .brick-bottom-navigation[data-layout=\"floating\"] {\n inline-size: fit-content;\n max-inline-size: calc(100% - (2 * var(--brick-bottom-navigation-outer-gutter)));\n margin-inline: auto;\n border-radius: var(--brick-radius-overlay);\n }\n\n .brick-bottom-navigation[data-position=\"sticky\"],\n .brick-bottom-navigation[data-position=\"absolute\"],\n .brick-bottom-navigation[data-position=\"fixed\"] {\n inset-block-end: 0;\n z-index: var(--brick-bottom-navigation-z-index);\n }\n\n .brick-bottom-navigation[data-position=\"sticky\"] { position: sticky; }\n .brick-bottom-navigation[data-position=\"absolute\"] { position: absolute; }\n .brick-bottom-navigation[data-position=\"fixed\"] { position: fixed; }\n\n .brick-bottom-navigation[data-layout=\"full\"]:is([data-position=\"absolute\"], [data-position=\"fixed\"]) {\n inset-inline: 0;\n }\n\n .brick-bottom-navigation[data-layout=\"floating\"]:is([data-position=\"absolute\"], [data-position=\"fixed\"]) {\n inset-inline-start: 50%;\n margin-inline: 0;\n transform: translateX(-50%);\n }\n\n .brick-bottom-navigation[data-safe-area]:not([data-layout=\"floating\"]):is([data-position=\"sticky\"], [data-position=\"absolute\"], [data-position=\"fixed\"]) {\n --_brick-bottom-navigation-safe-area-block-size: env(safe-area-max-inset-bottom, 0px);\n padding-inline-end: max(var(--brick-bottom-navigation-padding-inline), env(safe-area-max-inset-right, 0px));\n padding-block-end: calc(var(--brick-bottom-navigation-padding-block) + var(--_brick-bottom-navigation-safe-area-block-size));\n padding-inline-start: max(var(--brick-bottom-navigation-padding-inline), env(safe-area-max-inset-left, 0px));\n }\n\n .brick-bottom-navigation[data-safe-area][data-layout=\"floating\"]:is([data-position=\"sticky\"], [data-position=\"absolute\"], [data-position=\"fixed\"]) {\n inset-block-end: max(var(--brick-bottom-navigation-outer-gutter), env(safe-area-max-inset-bottom, 0px));\n }\n\n .brick-bottom-navigation[data-tone=\"accent\"] {\n --brick-bottom-navigation-item-foreground-active: var(--brick-color-accent-text);\n --brick-bottom-navigation-selection-background: var(--brick-color-accent-soft);\n --brick-bottom-navigation-selection-border: var(--brick-color-accent-border);\n --brick-bottom-navigation-focus-ring: var(--brick-color-focus-ring);\n }\n\n .brick-bottom-navigation[data-variant=\"solid\"] {\n --brick-bottom-navigation-background: var(--brick-color-text-primary);\n --brick-bottom-navigation-foreground: var(--brick-color-text-inverse);\n --brick-bottom-navigation-border-color: transparent;\n --brick-bottom-navigation-item-foreground: var(--brick-color-text-inverse);\n --brick-bottom-navigation-item-foreground-hover: var(--brick-color-text-inverse);\n --brick-bottom-navigation-item-foreground-active: var(--brick-color-text-inverse);\n --brick-bottom-navigation-item-background-hover: color-mix(in srgb, currentColor, transparent 88%);\n --brick-bottom-navigation-item-background-pressed: color-mix(in srgb, currentColor, transparent 78%);\n --brick-bottom-navigation-selection-background: color-mix(in srgb, currentColor, transparent 80%);\n --brick-bottom-navigation-selection-border: currentColor;\n --brick-bottom-navigation-focus-ring: currentColor;\n }\n\n .brick-bottom-navigation[data-tone=\"accent\"][data-variant=\"solid\"] {\n --brick-bottom-navigation-background: var(--brick-color-accent-solid);\n --brick-bottom-navigation-foreground: var(--brick-color-accent-on-solid);\n --brick-bottom-navigation-item-foreground: var(--brick-color-accent-on-solid);\n --brick-bottom-navigation-item-foreground-hover: var(--brick-color-accent-on-solid);\n --brick-bottom-navigation-item-foreground-active: var(--brick-color-accent-on-solid);\n }\n\n .brick-bottom-navigation[data-variant=\"soft\"] {\n --brick-bottom-navigation-background: var(--brick-color-surface-subtle);\n --brick-bottom-navigation-border-color: transparent;\n }\n\n .brick-bottom-navigation[data-tone=\"accent\"][data-variant=\"soft\"] {\n --brick-bottom-navigation-background: var(--brick-color-accent-soft);\n --brick-bottom-navigation-foreground: var(--brick-color-accent-on-soft);\n }\n\n .brick-bottom-navigation[data-variant=\"outline\"] {\n border-block-start: var(--brick-border-width) solid var(--brick-bottom-navigation-border-color);\n }\n\n .brick-bottom-navigation[data-layout=\"floating\"][data-variant=\"outline\"] {\n border: var(--brick-border-width) solid var(--brick-bottom-navigation-border-color);\n }\n\n .brick-bottom-navigation[data-variant=\"ghost\"] {\n --brick-bottom-navigation-background: transparent;\n --brick-bottom-navigation-border-color: transparent;\n }\n\n .brick-bottom-navigation[data-elevated] { box-shadow: var(--brick-bottom-navigation-shadow); }\n\n .brick-bottom-navigation[data-blurred] {\n background: var(--brick-bottom-navigation-blurred-background);\n -webkit-backdrop-filter: blur(0.75rem) saturate(1.15);\n backdrop-filter: blur(0.75rem) saturate(1.15);\n }\n\n .brick-bottom-navigation[data-size=\"sm\"] {\n --brick-bottom-navigation-padding-inline: var(--brick-space-1);\n --brick-bottom-navigation-padding-block: var(--brick-space-1);\n --brick-bottom-navigation-item-min-inline-size: 3rem;\n --brick-bottom-navigation-item-max-inline-size: 5rem;\n --brick-bottom-navigation-item-min-block-size: 3rem;\n --brick-bottom-navigation-icon-size: 1.25rem;\n --brick-bottom-navigation-icon-indicator-inline-size: 3.25rem;\n --brick-bottom-navigation-icon-indicator-block-size: 1.75rem;\n --brick-bottom-navigation-resolved-block-size: 4rem;\n }\n\n .brick-bottom-navigation[data-size=\"lg\"] {\n --brick-bottom-navigation-padding-inline: var(--brick-space-3);\n --brick-bottom-navigation-padding-block: var(--brick-space-3);\n --brick-bottom-navigation-item-min-inline-size: 4rem;\n --brick-bottom-navigation-item-max-inline-size: 7rem;\n --brick-bottom-navigation-item-min-block-size: 4.75rem;\n --brick-bottom-navigation-icon-size: 1.75rem;\n --brick-bottom-navigation-icon-indicator-inline-size: 4.5rem;\n --brick-bottom-navigation-icon-indicator-block-size: 2.5rem;\n --brick-bottom-navigation-label-font-size: var(--brick-typography-body-sm-font-size);\n --brick-bottom-navigation-label-line-height: var(--brick-typography-body-sm-line-height);\n --brick-bottom-navigation-resolved-block-size: 6.25rem;\n }\n\n .brick-bottom-navigation__item {\n position: relative;\n display: flex;\n box-sizing: border-box;\n min-inline-size: 0;\n min-block-size: var(--brick-bottom-navigation-item-min-block-size);\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--brick-bottom-navigation-label-gap);\n padding: var(--brick-space-1);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-bottom-navigation-item-radius);\n appearance: none;\n background: transparent;\n color: var(--brick-bottom-navigation-item-foreground);\n font: inherit;\n text-align: center;\n text-decoration: none;\n touch-action: manipulation;\n cursor: pointer;\n }\n\n .brick-bottom-navigation__item:hover:not([data-disabled]) {\n background: var(--brick-bottom-navigation-item-background-hover);\n color: var(--brick-bottom-navigation-item-foreground-hover);\n }\n\n .brick-bottom-navigation__item:active:not([data-disabled]) { background: var(--brick-bottom-navigation-item-background-pressed); }\n\n .brick-bottom-navigation__item:focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-bottom-navigation-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-bottom-navigation__item[data-state=\"active\"] {\n color: var(--brick-bottom-navigation-item-foreground-active);\n }\n\n .brick-bottom-navigation[data-selection=\"item\"] .brick-bottom-navigation__item[data-state=\"active\"] {\n border-color: var(--brick-bottom-navigation-selection-border);\n background: var(--brick-bottom-navigation-selection-background);\n }\n\n .brick-bottom-navigation[data-selection=\"item\"][data-selection-shape=\"square\"] .brick-bottom-navigation__item { --brick-bottom-navigation-item-radius: 0; }\n .brick-bottom-navigation[data-selection=\"item\"][data-selection-shape=\"rounded\"] .brick-bottom-navigation__item { --brick-bottom-navigation-item-radius: var(--brick-radius-control); }\n .brick-bottom-navigation[data-selection=\"item\"][data-selection-shape=\"pill\"] .brick-bottom-navigation__item { --brick-bottom-navigation-item-radius: var(--brick-radius-full); }\n\n .brick-bottom-navigation__item[data-disabled] {\n color: var(--brick-bottom-navigation-item-foreground-disabled);\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n .brick-bottom-navigation__icon {\n display: inline-flex;\n box-sizing: border-box;\n inline-size: var(--brick-bottom-navigation-icon-indicator-inline-size);\n block-size: var(--brick-bottom-navigation-icon-indicator-block-size);\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-radius-full);\n color: inherit;\n }\n\n .brick-bottom-navigation__icon :where(.brick-icon, svg, img) {\n inline-size: var(--brick-bottom-navigation-icon-size);\n block-size: var(--brick-bottom-navigation-icon-size);\n }\n\n .brick-bottom-navigation[data-selection=\"indicator\"] .brick-bottom-navigation__item[data-state=\"active\"] .brick-bottom-navigation__icon {\n border-color: var(--brick-bottom-navigation-selection-border);\n background: var(--brick-bottom-navigation-selection-background);\n }\n\n .brick-bottom-navigation[data-selection=\"indicator\"][data-selection-shape=\"circle\"] .brick-bottom-navigation__icon {\n inline-size: var(--brick-bottom-navigation-icon-indicator-block-size);\n border-radius: var(--brick-radius-full);\n }\n\n .brick-bottom-navigation[data-selection=\"indicator\"][data-selection-shape=\"rounded\"] .brick-bottom-navigation__icon { border-radius: var(--brick-radius-control); }\n .brick-bottom-navigation[data-selection=\"indicator\"][data-selection-shape=\"pill\"] .brick-bottom-navigation__icon { border-radius: var(--brick-radius-full); }\n\n .brick-bottom-navigation__label {\n display: block;\n min-inline-size: 0;\n max-inline-size: 100%;\n overflow: hidden;\n color: inherit;\n font-family: var(--brick-bottom-navigation-label-font-family);\n font-size: var(--brick-bottom-navigation-label-font-size);\n font-weight: var(--brick-bottom-navigation-label-font-weight);\n letter-spacing: var(--brick-bottom-navigation-label-letter-spacing);\n line-height: var(--brick-bottom-navigation-label-line-height);\n overflow-wrap: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .brick-bottom-navigation__item[data-state=\"active\"] .brick-bottom-navigation__label { font-weight: var(--brick-bottom-navigation-label-font-weight-active); }\n\n .brick-bottom-navigation__item:not([data-label-visible]) .brick-bottom-navigation__label {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n clip: rect(0, 0, 0, 0);\n clip-path: inset(50%);\n white-space: nowrap;\n overflow-wrap: normal;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .brick-bottom-navigation__item,\n .brick-bottom-navigation__icon {\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), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n }\n\n @media (prefers-reduced-transparency: reduce) {\n .brick-bottom-navigation[data-blurred] {\n background: var(--brick-bottom-navigation-reduced-transparency-background);\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n }\n }\n\n @media (forced-colors: active) {\n .brick-bottom-navigation,\n .brick-bottom-navigation[data-variant],\n .brick-bottom-navigation[data-blurred] {\n --brick-bottom-navigation-background: Canvas;\n --brick-bottom-navigation-foreground: CanvasText;\n --brick-bottom-navigation-border-color: CanvasText;\n --brick-bottom-navigation-item-foreground: LinkText;\n --brick-bottom-navigation-item-foreground-hover: LinkText;\n --brick-bottom-navigation-item-foreground-active: LinkText;\n --brick-bottom-navigation-item-foreground-disabled: GrayText;\n --brick-bottom-navigation-selection-background: Canvas;\n --brick-bottom-navigation-selection-border: Highlight;\n --brick-bottom-navigation-focus-ring: Highlight;\n box-shadow: none;\n }\n\n .brick-bottom-navigation__item[data-disabled] { border-color: GrayText; }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,wmGAqDA,oIAIA,8MAKA,mNAOA,+MAOA,+DACA,mEACA,6DAEA,6GAIA,mKAMA,ojBAOA,+OAIA,wVAOA,s2BAcA,gcAQA,sKAKA,yMAKA,8IAIA,wJAIA,iJAKA,yFAEA,+IAMA,qhBAYA,qsBAcA,+kBAuBA,qLAKA,6HAEA,+LAMA,8GAIA,4NAKA,kJACA,6KACA,uKAEA,2IAMA,+WAaA,oKAKA,gQAKA,2NAKA,0JACA,oJAEA,qeAgBA,sJAEA,4QAcA,8CACE,kUAMF,6CACE,uIAOF,8BACE,ioBAgBA,sEDlVJ","sources":["home/runner/work/brick/brick/.brick-cache/production/bottom-navigation.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/bottom-navigation/bottom-navigation.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/bottom-navigation/bottom-navigation.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-bottom-navigation {\n --brick-bottom-navigation-background: var(--brick-color-surface-base);\n --brick-bottom-navigation-foreground: var(--brick-color-text-secondary);\n --brick-bottom-navigation-border-color: var(--brick-color-border-default);\n --brick-bottom-navigation-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--brick-color-shadow), transparent 38%);\n --brick-bottom-navigation-gap: var(--brick-space-1);\n --brick-bottom-navigation-outer-gutter: var(--brick-space-3);\n --brick-bottom-navigation-padding-inline: var(--brick-space-2);\n --brick-bottom-navigation-padding-block: var(--brick-space-2);\n --brick-bottom-navigation-item-min-inline-size: 3.5rem;\n --brick-bottom-navigation-item-max-inline-size: 6rem;\n --brick-bottom-navigation-item-min-block-size: 4rem;\n --brick-bottom-navigation-item-radius: var(--brick-radius-control);\n --brick-bottom-navigation-item-foreground: var(--brick-color-text-secondary);\n --brick-bottom-navigation-item-foreground-hover: var(--brick-color-text-primary);\n --brick-bottom-navigation-item-foreground-active: var(--brick-color-text-primary);\n --brick-bottom-navigation-item-foreground-disabled: var(--brick-color-text-muted);\n --brick-bottom-navigation-item-background-hover: var(--brick-color-surface-subtle);\n --brick-bottom-navigation-item-background-pressed: var(--brick-color-surface-raised);\n --brick-bottom-navigation-selection-background: var(--brick-color-surface-raised);\n --brick-bottom-navigation-selection-border: var(--brick-color-border-strong);\n --brick-bottom-navigation-focus-ring: var(--brick-color-text-primary);\n --brick-bottom-navigation-icon-size: 1.5rem;\n --brick-bottom-navigation-icon-indicator-inline-size: 4rem;\n --brick-bottom-navigation-icon-indicator-block-size: 2rem;\n --brick-bottom-navigation-label-gap: var(--brick-space-1);\n --brick-bottom-navigation-label-font-family: var(--brick-typography-caption-font-family);\n --brick-bottom-navigation-label-font-size: var(--brick-typography-caption-font-size);\n --brick-bottom-navigation-label-font-weight: var(--brick-typography-caption-font-weight);\n --brick-bottom-navigation-label-font-weight-active: var(--brick-typography-label-strong-font-weight);\n --brick-bottom-navigation-label-line-height: var(--brick-typography-caption-line-height);\n --brick-bottom-navigation-label-letter-spacing: var(--brick-typography-caption-letter-spacing);\n --brick-bottom-navigation-blurred-background: color-mix(in srgb, var(--brick-bottom-navigation-background), transparent 14%);\n --brick-bottom-navigation-reduced-transparency-background: var(--brick-bottom-navigation-background);\n --brick-bottom-navigation-z-index: calc(var(--brick-layer-overlay) - 10);\n --brick-bottom-navigation-resolved-block-size: 5rem;\n --_brick-bottom-navigation-safe-area-block-size: 0px;\n\n box-sizing: border-box;\n display: grid;\n block-size: calc(var(--brick-bottom-navigation-resolved-block-size) + var(--_brick-bottom-navigation-safe-area-block-size));\n inline-size: 100%;\n max-inline-size: 100%;\n min-inline-size: 0;\n grid-auto-flow: column;\n align-items: stretch;\n gap: var(--brick-bottom-navigation-gap);\n padding: var(--brick-bottom-navigation-padding-block) var(--brick-bottom-navigation-padding-inline);\n border: 0;\n background: var(--brick-bottom-navigation-background);\n color: var(--brick-bottom-navigation-foreground);\n }\n\n .brick-bottom-navigation[data-arrangement=\"equal\"] {\n grid-auto-columns: minmax(var(--brick-bottom-navigation-item-min-inline-size), 1fr);\n }\n\n .brick-bottom-navigation[data-arrangement=\"centered\"] {\n grid-auto-columns: minmax(var(--brick-bottom-navigation-item-min-inline-size), var(--brick-bottom-navigation-item-max-inline-size));\n justify-content: center;\n }\n\n .brick-bottom-navigation[data-layout=\"floating\"] {\n inline-size: fit-content;\n max-inline-size: calc(100% - (2 * var(--brick-bottom-navigation-outer-gutter)));\n margin-inline: auto;\n border-radius: var(--brick-radius-overlay);\n }\n\n .brick-bottom-navigation[data-position=\"sticky\"],\n .brick-bottom-navigation[data-position=\"absolute\"],\n .brick-bottom-navigation[data-position=\"fixed\"] {\n inset-block-end: 0;\n z-index: var(--brick-bottom-navigation-z-index);\n }\n\n .brick-bottom-navigation[data-position=\"sticky\"] { position: sticky; }\n .brick-bottom-navigation[data-position=\"absolute\"] { position: absolute; }\n .brick-bottom-navigation[data-position=\"fixed\"] { position: fixed; }\n\n .brick-bottom-navigation[data-layout=\"full\"]:is([data-position=\"absolute\"], [data-position=\"fixed\"]) {\n inset-inline: 0;\n }\n\n .brick-bottom-navigation[data-layout=\"floating\"]:is([data-position=\"absolute\"], [data-position=\"fixed\"]) {\n inset-inline-start: 50%;\n margin-inline: 0;\n transform: translateX(-50%);\n }\n\n .brick-bottom-navigation[data-safe-area]:not([data-layout=\"floating\"]):is([data-position=\"sticky\"], [data-position=\"absolute\"], [data-position=\"fixed\"]) {\n --_brick-bottom-navigation-safe-area-block-size: env(safe-area-max-inset-bottom, 0px);\n padding-inline-end: max(var(--brick-bottom-navigation-padding-inline), env(safe-area-max-inset-right, 0px));\n padding-block-end: calc(var(--brick-bottom-navigation-padding-block) + var(--_brick-bottom-navigation-safe-area-block-size));\n padding-inline-start: max(var(--brick-bottom-navigation-padding-inline), env(safe-area-max-inset-left, 0px));\n }\n\n .brick-bottom-navigation[data-safe-area][data-layout=\"floating\"]:is([data-position=\"sticky\"], [data-position=\"absolute\"], [data-position=\"fixed\"]) {\n inset-block-end: max(var(--brick-bottom-navigation-outer-gutter), env(safe-area-max-inset-bottom, 0px));\n }\n\n .brick-bottom-navigation[data-tone=\"accent\"] {\n --brick-bottom-navigation-item-foreground-active: var(--brick-color-accent-text);\n --brick-bottom-navigation-selection-background: var(--brick-color-accent-soft);\n --brick-bottom-navigation-selection-border: var(--brick-color-accent-border);\n --brick-bottom-navigation-focus-ring: var(--brick-color-focus-ring);\n }\n\n .brick-bottom-navigation[data-variant=\"solid\"] {\n --brick-bottom-navigation-background: var(--brick-color-text-primary);\n --brick-bottom-navigation-foreground: var(--brick-color-text-inverse);\n --brick-bottom-navigation-border-color: transparent;\n --brick-bottom-navigation-item-foreground: var(--brick-color-text-inverse);\n --brick-bottom-navigation-item-foreground-hover: var(--brick-color-text-inverse);\n --brick-bottom-navigation-item-foreground-active: var(--brick-color-text-inverse);\n --brick-bottom-navigation-item-background-hover: color-mix(in srgb, currentColor, transparent 88%);\n --brick-bottom-navigation-item-background-pressed: color-mix(in srgb, currentColor, transparent 78%);\n --brick-bottom-navigation-selection-background: color-mix(in srgb, currentColor, transparent 80%);\n --brick-bottom-navigation-selection-border: currentColor;\n --brick-bottom-navigation-focus-ring: currentColor;\n }\n\n .brick-bottom-navigation[data-tone=\"accent\"][data-variant=\"solid\"] {\n --brick-bottom-navigation-background: var(--brick-color-accent-solid);\n --brick-bottom-navigation-foreground: var(--brick-color-accent-on-solid);\n --brick-bottom-navigation-item-foreground: var(--brick-color-accent-on-solid);\n --brick-bottom-navigation-item-foreground-hover: var(--brick-color-accent-on-solid);\n --brick-bottom-navigation-item-foreground-active: var(--brick-color-accent-on-solid);\n }\n\n .brick-bottom-navigation[data-variant=\"soft\"] {\n --brick-bottom-navigation-background: var(--brick-color-surface-subtle);\n --brick-bottom-navigation-border-color: transparent;\n }\n\n .brick-bottom-navigation[data-tone=\"accent\"][data-variant=\"soft\"] {\n --brick-bottom-navigation-background: var(--brick-color-accent-soft);\n --brick-bottom-navigation-foreground: var(--brick-color-accent-on-soft);\n }\n\n .brick-bottom-navigation[data-variant=\"outline\"] {\n border-block-start: var(--brick-border-width) solid var(--brick-bottom-navigation-border-color);\n }\n\n .brick-bottom-navigation[data-layout=\"floating\"][data-variant=\"outline\"] {\n border: var(--brick-border-width) solid var(--brick-bottom-navigation-border-color);\n }\n\n .brick-bottom-navigation[data-variant=\"ghost\"] {\n --brick-bottom-navigation-background: transparent;\n --brick-bottom-navigation-border-color: transparent;\n }\n\n .brick-bottom-navigation[data-elevated] { box-shadow: var(--brick-bottom-navigation-shadow); }\n\n .brick-bottom-navigation[data-blurred] {\n background: var(--brick-bottom-navigation-blurred-background);\n -webkit-backdrop-filter: blur(0.75rem) saturate(1.15);\n backdrop-filter: blur(0.75rem) saturate(1.15);\n }\n\n .brick-bottom-navigation[data-size=\"sm\"] {\n --brick-bottom-navigation-padding-inline: var(--brick-space-1);\n --brick-bottom-navigation-padding-block: var(--brick-space-1);\n --brick-bottom-navigation-item-min-inline-size: 3rem;\n --brick-bottom-navigation-item-max-inline-size: 5rem;\n --brick-bottom-navigation-item-min-block-size: 3rem;\n --brick-bottom-navigation-icon-size: 1.25rem;\n --brick-bottom-navigation-icon-indicator-inline-size: 3.25rem;\n --brick-bottom-navigation-icon-indicator-block-size: 1.75rem;\n --brick-bottom-navigation-resolved-block-size: 4rem;\n }\n\n .brick-bottom-navigation[data-size=\"lg\"] {\n --brick-bottom-navigation-padding-inline: var(--brick-space-3);\n --brick-bottom-navigation-padding-block: var(--brick-space-3);\n --brick-bottom-navigation-item-min-inline-size: 4rem;\n --brick-bottom-navigation-item-max-inline-size: 7rem;\n --brick-bottom-navigation-item-min-block-size: 4.75rem;\n --brick-bottom-navigation-icon-size: 1.75rem;\n --brick-bottom-navigation-icon-indicator-inline-size: 4.5rem;\n --brick-bottom-navigation-icon-indicator-block-size: 2.5rem;\n --brick-bottom-navigation-label-font-size: var(--brick-typography-body-sm-font-size);\n --brick-bottom-navigation-label-line-height: var(--brick-typography-body-sm-line-height);\n --brick-bottom-navigation-resolved-block-size: 6.25rem;\n }\n\n .brick-bottom-navigation__item {\n position: relative;\n display: flex;\n box-sizing: border-box;\n min-inline-size: 0;\n min-block-size: var(--brick-bottom-navigation-item-min-block-size);\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--brick-bottom-navigation-label-gap);\n padding: var(--brick-space-1);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-bottom-navigation-item-radius);\n appearance: none;\n background: transparent;\n color: var(--brick-bottom-navigation-item-foreground);\n font: inherit;\n text-align: center;\n text-decoration: none;\n touch-action: manipulation;\n cursor: pointer;\n }\n\n .brick-bottom-navigation__item:hover:not([data-disabled]) {\n background: var(--brick-bottom-navigation-item-background-hover);\n color: var(--brick-bottom-navigation-item-foreground-hover);\n }\n\n .brick-bottom-navigation__item:active:not([data-disabled]) { background: var(--brick-bottom-navigation-item-background-pressed); }\n\n .brick-bottom-navigation__item:focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-bottom-navigation-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-bottom-navigation__item[data-state=\"active\"] {\n color: var(--brick-bottom-navigation-item-foreground-active);\n }\n\n .brick-bottom-navigation[data-selection=\"item\"] .brick-bottom-navigation__item[data-state=\"active\"] {\n border-color: var(--brick-bottom-navigation-selection-border);\n background: var(--brick-bottom-navigation-selection-background);\n }\n\n .brick-bottom-navigation[data-selection=\"item\"][data-selection-shape=\"square\"] .brick-bottom-navigation__item { --brick-bottom-navigation-item-radius: 0; }\n .brick-bottom-navigation[data-selection=\"item\"][data-selection-shape=\"rounded\"] .brick-bottom-navigation__item { --brick-bottom-navigation-item-radius: var(--brick-radius-control); }\n .brick-bottom-navigation[data-selection=\"item\"][data-selection-shape=\"pill\"] .brick-bottom-navigation__item { --brick-bottom-navigation-item-radius: var(--brick-radius-full); }\n\n .brick-bottom-navigation__item[data-disabled] {\n color: var(--brick-bottom-navigation-item-foreground-disabled);\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n .brick-bottom-navigation__icon {\n display: inline-flex;\n box-sizing: border-box;\n inline-size: var(--brick-bottom-navigation-icon-indicator-inline-size);\n block-size: var(--brick-bottom-navigation-icon-indicator-block-size);\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-radius-full);\n color: inherit;\n }\n\n .brick-bottom-navigation__icon :where(.brick-icon, svg, img) {\n inline-size: var(--brick-bottom-navigation-icon-size);\n block-size: var(--brick-bottom-navigation-icon-size);\n }\n\n .brick-bottom-navigation[data-selection=\"indicator\"] .brick-bottom-navigation__item[data-state=\"active\"] .brick-bottom-navigation__icon {\n border-color: var(--brick-bottom-navigation-selection-border);\n background: var(--brick-bottom-navigation-selection-background);\n }\n\n .brick-bottom-navigation[data-selection=\"indicator\"][data-selection-shape=\"circle\"] .brick-bottom-navigation__icon {\n inline-size: var(--brick-bottom-navigation-icon-indicator-block-size);\n border-radius: var(--brick-radius-full);\n }\n\n .brick-bottom-navigation[data-selection=\"indicator\"][data-selection-shape=\"rounded\"] .brick-bottom-navigation__icon { border-radius: var(--brick-radius-control); }\n .brick-bottom-navigation[data-selection=\"indicator\"][data-selection-shape=\"pill\"] .brick-bottom-navigation__icon { border-radius: var(--brick-radius-full); }\n\n .brick-bottom-navigation__label {\n display: block;\n min-inline-size: 0;\n max-inline-size: 100%;\n overflow: hidden;\n color: inherit;\n font-family: var(--brick-bottom-navigation-label-font-family);\n font-size: var(--brick-bottom-navigation-label-font-size);\n font-weight: var(--brick-bottom-navigation-label-font-weight);\n letter-spacing: var(--brick-bottom-navigation-label-letter-spacing);\n line-height: var(--brick-bottom-navigation-label-line-height);\n overflow-wrap: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .brick-bottom-navigation__item[data-state=\"active\"] .brick-bottom-navigation__label { font-weight: var(--brick-bottom-navigation-label-font-weight-active); }\n\n .brick-bottom-navigation__item:not([data-label-visible]) .brick-bottom-navigation__label {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n clip: rect(0, 0, 0, 0);\n clip-path: inset(50%);\n white-space: nowrap;\n overflow-wrap: normal;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .brick-bottom-navigation__item,\n .brick-bottom-navigation__icon {\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), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n }\n\n @media (prefers-reduced-transparency: reduce) {\n .brick-bottom-navigation[data-blurred] {\n background: var(--brick-bottom-navigation-reduced-transparency-background);\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n }\n }\n\n @media (forced-colors: active) {\n .brick-bottom-navigation,\n .brick-bottom-navigation[data-variant],\n .brick-bottom-navigation[data-blurred] {\n --brick-bottom-navigation-background: Canvas;\n --brick-bottom-navigation-foreground: CanvasText;\n --brick-bottom-navigation-border-color: CanvasText;\n --brick-bottom-navigation-item-foreground: LinkText;\n --brick-bottom-navigation-item-foreground-hover: LinkText;\n --brick-bottom-navigation-item-foreground-active: LinkText;\n --brick-bottom-navigation-item-foreground-disabled: GrayText;\n --brick-bottom-navigation-selection-background: Canvas;\n --brick-bottom-navigation-selection-border: Highlight;\n --brick-bottom-navigation-focus-ring: Highlight;\n box-shadow: none;\n }\n\n .brick-bottom-navigation__item[data-disabled] { border-color: GrayText; }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-breadcrumb{--brick-breadcrumb-foreground:var(--brick-color-text-secondary);--brick-breadcrumb-foreground-hover:var(--brick-color-text-primary);--brick-breadcrumb-foreground-active:var(--brick-color-accent-text);--brick-breadcrumb-current-foreground:var(--brick-color-text-primary);--brick-breadcrumb-separator-foreground:var(--brick-color-text-secondary);--brick-breadcrumb-ellipsis-foreground:var(--brick-color-text-secondary);--brick-breadcrumb-ellipsis-hover-background:var(--brick-color-surface-subtle);--brick-breadcrumb-focus-ring:var(--brick-color-focus-ring);--brick-breadcrumb-list-gap:var(--brick-space-1);--brick-breadcrumb-item-gap:var(--brick-space-1);--brick-breadcrumb-target-size:var(--brick-control-target-min);--brick-breadcrumb-font-family:var(--brick-typography-body-md-font-family);--brick-breadcrumb-font-size:var(--brick-typography-body-md-font-size);--brick-breadcrumb-font-weight:var(--brick-typography-body-md-font-weight);--brick-breadcrumb-line-height:var(--brick-typography-body-md-line-height);--brick-breadcrumb-letter-spacing:var(--brick-typography-body-md-letter-spacing);--brick-breadcrumb-current-font-weight:var(--brick-typography-label-md-font-weight);--brick-breadcrumb-decoration-thickness:.08em;--brick-breadcrumb-decoration-offset:.16em;--brick-breadcrumb-separator-size:1em;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;color:var(--brick-breadcrumb-foreground);font-family:var(--brick-breadcrumb-font-family);font-size:var(--brick-breadcrumb-font-size);font-weight:var(--brick-breadcrumb-font-weight);letter-spacing:var(--brick-breadcrumb-letter-spacing);line-height:var(--brick-breadcrumb-line-height);display:block}.brick-breadcrumb[data-size=sm]{--brick-breadcrumb-font-family:var(--brick-typography-body-sm-font-family);--brick-breadcrumb-font-size:var(--brick-typography-body-sm-font-size);--brick-breadcrumb-font-weight:var(--brick-typography-body-sm-font-weight);--brick-breadcrumb-line-height:var(--brick-typography-body-sm-line-height);--brick-breadcrumb-letter-spacing:var(--brick-typography-body-sm-letter-spacing);--brick-breadcrumb-list-gap:.1875rem;--brick-breadcrumb-item-gap:.1875rem;--brick-breadcrumb-separator-size:.875em}.brick-breadcrumb[data-size=lg]{--brick-breadcrumb-font-family:var(--brick-typography-body-lg-font-family);--brick-breadcrumb-font-size:var(--brick-typography-body-lg-font-size);--brick-breadcrumb-font-weight:var(--brick-typography-body-lg-font-weight);--brick-breadcrumb-line-height:var(--brick-typography-body-lg-line-height);--brick-breadcrumb-letter-spacing:var(--brick-typography-body-lg-letter-spacing);--brick-breadcrumb-list-gap:var(--brick-space-2);--brick-breadcrumb-item-gap:var(--brick-space-2);--brick-breadcrumb-separator-size:1.125em}.brick-breadcrumb-list{box-sizing:border-box;align-items:center;gap:var(--brick-breadcrumb-list-gap);flex-wrap:wrap;min-inline-size:0;max-inline-size:100%;margin:0;padding:0;list-style:none;display:flex}.brick-breadcrumb-item{box-sizing:border-box;align-items:center;gap:var(--brick-breadcrumb-item-gap);min-inline-size:0;max-inline-size:100%;display:inline-flex}.brick-breadcrumb-link{box-sizing:border-box;min-inline-size:0;min-block-size:var(--brick-breadcrumb-target-size);max-inline-size:100%;color:var(--brick-breadcrumb-foreground);overflow-wrap:anywhere;text-decoration-line:none;text-decoration-color:currentColor;text-decoration-thickness:var(--brick-breadcrumb-decoration-thickness);text-underline-offset:var(--brick-breadcrumb-decoration-offset);touch-action:manipulation;align-items:center;display:inline-flex}.brick-breadcrumb[data-variant=underline] .brick-breadcrumb-link,.brick-breadcrumb-link:is(:hover,:focus-visible,:active){text-decoration-line:underline}.brick-breadcrumb-link:hover{color:var(--brick-breadcrumb-foreground-hover)}.brick-breadcrumb-link:active{color:var(--brick-breadcrumb-foreground-active)}.brick-breadcrumb-link:focus-visible,.brick-breadcrumb-ellipsis:is(button,[role=button],a):focus-visible{border-radius:var(--brick-radius-subtle);outline:var(--brick-border-focus-width) solid var(--brick-breadcrumb-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-breadcrumb-page{min-inline-size:0;max-inline-size:100%;color:var(--brick-breadcrumb-current-foreground);font-weight:var(--brick-breadcrumb-current-font-weight);overflow-wrap:anywhere}.brick-breadcrumb-separator{box-sizing:border-box;color:var(--brick-breadcrumb-separator-foreground);inline-size:var(--brick-breadcrumb-separator-size);block-size:var(--brick-breadcrumb-separator-size);-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;display:inline-flex}.brick-breadcrumb-separator>:where(svg,img){block-size:100%;inline-size:100%}.brick-breadcrumb-ellipsis{box-sizing:border-box;min-inline-size:1.5em;color:var(--brick-breadcrumb-ellipsis-foreground);font:inherit;justify-content:center;align-items:center;display:inline-flex}.brick-breadcrumb-ellipsis:is(button,[role=button],a){min-inline-size:var(--brick-breadcrumb-target-size);min-block-size:var(--brick-breadcrumb-target-size);border-radius:var(--brick-radius-subtle);cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}.brick-breadcrumb-ellipsis:is(button,[role=button],a):hover{background:var(--brick-breadcrumb-ellipsis-hover-background);color:var(--brick-breadcrumb-foreground-hover)}@media (forced-colors:active){.brick-breadcrumb-link{color:linktext;forced-color-adjust:auto}.brick-breadcrumb-page,.brick-breadcrumb-separator,.brick-breadcrumb-ellipsis{color:canvastext}.brick-breadcrumb-link:focus-visible,.brick-breadcrumb-ellipsis:is(button,[role=button],a):focus-visible{outline-color:highlight}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-breadcrumb{--brick-breadcrumb-foreground:var(--brick-color-text-secondary);--brick-breadcrumb-foreground-hover:var(--brick-color-text-primary);--brick-breadcrumb-foreground-active:var(--brick-color-accent-text);--brick-breadcrumb-current-foreground:var(--brick-color-text-primary);--brick-breadcrumb-separator-foreground:var(--brick-color-text-secondary);--brick-breadcrumb-ellipsis-foreground:var(--brick-color-text-secondary);--brick-breadcrumb-ellipsis-hover-background:var(--brick-color-surface-subtle);--brick-breadcrumb-focus-ring:var(--brick-color-focus-ring);--brick-breadcrumb-list-gap:var(--brick-space-1);--brick-breadcrumb-item-gap:var(--brick-space-1);--brick-breadcrumb-target-size:var(--brick-control-target-min);--brick-breadcrumb-font-family:var(--brick-typography-body-md-font-family);--brick-breadcrumb-font-size:var(--brick-typography-body-md-font-size);--brick-breadcrumb-font-weight:var(--brick-typography-body-md-font-weight);--brick-breadcrumb-line-height:var(--brick-typography-body-md-line-height);--brick-breadcrumb-letter-spacing:var(--brick-typography-body-md-letter-spacing);--brick-breadcrumb-current-font-weight:var(--brick-typography-label-md-font-weight);--brick-breadcrumb-decoration-thickness:.08em;--brick-breadcrumb-decoration-offset:.16em;--brick-breadcrumb-separator-size:1em;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;color:var(--brick-breadcrumb-foreground);font-family:var(--brick-breadcrumb-font-family);font-size:var(--brick-breadcrumb-font-size);font-weight:var(--brick-breadcrumb-font-weight);letter-spacing:var(--brick-breadcrumb-letter-spacing);line-height:var(--brick-breadcrumb-line-height);display:block}.brick-breadcrumb[data-size=sm]{--brick-breadcrumb-font-family:var(--brick-typography-body-sm-font-family);--brick-breadcrumb-font-size:var(--brick-typography-body-sm-font-size);--brick-breadcrumb-font-weight:var(--brick-typography-body-sm-font-weight);--brick-breadcrumb-line-height:var(--brick-typography-body-sm-line-height);--brick-breadcrumb-letter-spacing:var(--brick-typography-body-sm-letter-spacing);--brick-breadcrumb-list-gap:.1875rem;--brick-breadcrumb-item-gap:.1875rem;--brick-breadcrumb-separator-size:.875em}.brick-breadcrumb[data-size=lg]{--brick-breadcrumb-font-family:var(--brick-typography-body-lg-font-family);--brick-breadcrumb-font-size:var(--brick-typography-body-lg-font-size);--brick-breadcrumb-font-weight:var(--brick-typography-body-lg-font-weight);--brick-breadcrumb-line-height:var(--brick-typography-body-lg-line-height);--brick-breadcrumb-letter-spacing:var(--brick-typography-body-lg-letter-spacing);--brick-breadcrumb-list-gap:var(--brick-space-2);--brick-breadcrumb-item-gap:var(--brick-space-2);--brick-breadcrumb-separator-size:1.125em}.brick-breadcrumb-list{box-sizing:border-box;align-items:center;gap:var(--brick-breadcrumb-list-gap);flex-wrap:wrap;min-inline-size:0;max-inline-size:100%;margin:0;padding:0;list-style:none;display:flex}.brick-breadcrumb-item{box-sizing:border-box;align-items:center;gap:var(--brick-breadcrumb-item-gap);min-inline-size:0;max-inline-size:100%;display:inline-flex}.brick-breadcrumb-link{box-sizing:border-box;min-inline-size:0;min-block-size:var(--brick-breadcrumb-target-size);max-inline-size:100%;color:var(--brick-breadcrumb-foreground);overflow-wrap:anywhere;text-decoration-line:none;text-decoration-color:currentColor;text-decoration-thickness:var(--brick-breadcrumb-decoration-thickness);text-underline-offset:var(--brick-breadcrumb-decoration-offset);touch-action:manipulation;align-items:center;display:inline-flex}.brick-breadcrumb[data-variant=underline] .brick-breadcrumb-link,.brick-breadcrumb-link:is(:hover,:focus-visible,:active){text-decoration-line:underline}.brick-breadcrumb-link:hover{color:var(--brick-breadcrumb-foreground-hover)}.brick-breadcrumb-link:active{color:var(--brick-breadcrumb-foreground-active)}.brick-breadcrumb-link:focus-visible,.brick-breadcrumb-ellipsis:is(button,[role=button],a):focus-visible{border-radius:var(--brick-radius-subtle);outline:var(--brick-border-focus-width) solid var(--brick-breadcrumb-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-breadcrumb-page{min-inline-size:0;max-inline-size:100%;color:var(--brick-breadcrumb-current-foreground);font-weight:var(--brick-breadcrumb-current-font-weight);overflow-wrap:anywhere}.brick-breadcrumb-separator{box-sizing:border-box;color:var(--brick-breadcrumb-separator-foreground);inline-size:var(--brick-breadcrumb-separator-size);block-size:var(--brick-breadcrumb-separator-size);-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;display:inline-flex}.brick-breadcrumb-separator>:where(svg,img){block-size:100%;inline-size:100%}.brick-breadcrumb-ellipsis{box-sizing:border-box;min-inline-size:1.5em;color:var(--brick-breadcrumb-ellipsis-foreground);font:inherit;justify-content:center;align-items:center;display:inline-flex}.brick-breadcrumb-ellipsis:is(button,[role=button],a){min-inline-size:var(--brick-breadcrumb-target-size);min-block-size:var(--brick-breadcrumb-target-size);border-radius:var(--brick-radius-subtle);cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}.brick-breadcrumb-ellipsis:is(button,[role=button],a):hover{background:var(--brick-breadcrumb-ellipsis-hover-background);color:var(--brick-breadcrumb-foreground-hover)}@media (forced-colors:active){.brick-breadcrumb-link{color:linktext;forced-color-adjust:auto}.brick-breadcrumb-page,.brick-breadcrumb-separator,.brick-breadcrumb-ellipsis{color:canvastext}.brick-breadcrumb-link:focus-visible,.brick-breadcrumb-ellipsis:is(button,[role=button],a):focus-visible{outline-color:highlight}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=breadcrumb.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,ipDAkCA,4gBAWA,qiBAWA,2MAaA,gKASA,4cAgBA,yJAKA,4EACA,8EAEA,mRAOA,8LAQA,4TAYA,6EAKA,oMAUA,iRAWA,wKAKA,8BACE,+DAKA,+FAIA,mID3KJ","sources":["home/runner/work/brick/brick/.brick-cache/production/breadcrumb.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/breadcrumb/breadcrumb.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/breadcrumb/breadcrumb.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-breadcrumb {\n --brick-breadcrumb-foreground: var(--brick-color-text-secondary);\n --brick-breadcrumb-foreground-hover: var(--brick-color-text-primary);\n --brick-breadcrumb-foreground-active: var(--brick-color-accent-text);\n --brick-breadcrumb-current-foreground: var(--brick-color-text-primary);\n --brick-breadcrumb-separator-foreground: var(--brick-color-text-secondary);\n --brick-breadcrumb-ellipsis-foreground: var(--brick-color-text-secondary);\n --brick-breadcrumb-ellipsis-hover-background: var(--brick-color-surface-subtle);\n --brick-breadcrumb-focus-ring: var(--brick-color-focus-ring);\n --brick-breadcrumb-list-gap: var(--brick-space-1);\n --brick-breadcrumb-item-gap: var(--brick-space-1);\n --brick-breadcrumb-target-size: var(--brick-control-target-min);\n --brick-breadcrumb-font-family: var(--brick-typography-body-md-font-family);\n --brick-breadcrumb-font-size: var(--brick-typography-body-md-font-size);\n --brick-breadcrumb-font-weight: var(--brick-typography-body-md-font-weight);\n --brick-breadcrumb-line-height: var(--brick-typography-body-md-line-height);\n --brick-breadcrumb-letter-spacing: var(--brick-typography-body-md-letter-spacing);\n --brick-breadcrumb-current-font-weight: var(--brick-typography-label-md-font-weight);\n --brick-breadcrumb-decoration-thickness: 0.08em;\n --brick-breadcrumb-decoration-offset: 0.16em;\n --brick-breadcrumb-separator-size: 1em;\n\n display: block;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n color: var(--brick-breadcrumb-foreground);\n font-family: var(--brick-breadcrumb-font-family);\n font-size: var(--brick-breadcrumb-font-size);\n font-weight: var(--brick-breadcrumb-font-weight);\n letter-spacing: var(--brick-breadcrumb-letter-spacing);\n line-height: var(--brick-breadcrumb-line-height);\n }\n\n .brick-breadcrumb[data-size=\"sm\"] {\n --brick-breadcrumb-font-family: var(--brick-typography-body-sm-font-family);\n --brick-breadcrumb-font-size: var(--brick-typography-body-sm-font-size);\n --brick-breadcrumb-font-weight: var(--brick-typography-body-sm-font-weight);\n --brick-breadcrumb-line-height: var(--brick-typography-body-sm-line-height);\n --brick-breadcrumb-letter-spacing: var(--brick-typography-body-sm-letter-spacing);\n --brick-breadcrumb-list-gap: 0.1875rem;\n --brick-breadcrumb-item-gap: 0.1875rem;\n --brick-breadcrumb-separator-size: 0.875em;\n }\n\n .brick-breadcrumb[data-size=\"lg\"] {\n --brick-breadcrumb-font-family: var(--brick-typography-body-lg-font-family);\n --brick-breadcrumb-font-size: var(--brick-typography-body-lg-font-size);\n --brick-breadcrumb-font-weight: var(--brick-typography-body-lg-font-weight);\n --brick-breadcrumb-line-height: var(--brick-typography-body-lg-line-height);\n --brick-breadcrumb-letter-spacing: var(--brick-typography-body-lg-letter-spacing);\n --brick-breadcrumb-list-gap: var(--brick-space-2);\n --brick-breadcrumb-item-gap: var(--brick-space-2);\n --brick-breadcrumb-separator-size: 1.125em;\n }\n\n .brick-breadcrumb-list {\n display: flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--brick-breadcrumb-list-gap);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .brick-breadcrumb-item {\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-breadcrumb-item-gap);\n }\n\n .brick-breadcrumb-link {\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n min-block-size: var(--brick-breadcrumb-target-size);\n max-inline-size: 100%;\n align-items: center;\n color: var(--brick-breadcrumb-foreground);\n overflow-wrap: anywhere;\n text-decoration-color: currentColor;\n text-decoration-line: none;\n text-decoration-thickness: var(--brick-breadcrumb-decoration-thickness);\n text-underline-offset: var(--brick-breadcrumb-decoration-offset);\n touch-action: manipulation;\n }\n\n .brick-breadcrumb[data-variant=\"underline\"] .brick-breadcrumb-link,\n .brick-breadcrumb-link:is(:hover, :focus-visible, :active) {\n text-decoration-line: underline;\n }\n\n .brick-breadcrumb-link:hover { color: var(--brick-breadcrumb-foreground-hover); }\n .brick-breadcrumb-link:active { color: var(--brick-breadcrumb-foreground-active); }\n\n .brick-breadcrumb-link:focus-visible,\n .brick-breadcrumb-ellipsis:is(button, [role=\"button\"], a):focus-visible {\n border-radius: var(--brick-radius-subtle);\n outline: var(--brick-border-focus-width) solid var(--brick-breadcrumb-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-breadcrumb-page {\n min-inline-size: 0;\n max-inline-size: 100%;\n color: var(--brick-breadcrumb-current-foreground);\n font-weight: var(--brick-breadcrumb-current-font-weight);\n overflow-wrap: anywhere;\n }\n\n .brick-breadcrumb-separator {\n display: inline-flex;\n box-sizing: border-box;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n color: var(--brick-breadcrumb-separator-foreground);\n inline-size: var(--brick-breadcrumb-separator-size);\n block-size: var(--brick-breadcrumb-separator-size);\n user-select: none;\n }\n\n .brick-breadcrumb-separator > :where(svg, img) {\n inline-size: 100%;\n block-size: 100%;\n }\n\n .brick-breadcrumb-ellipsis {\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 1.5em;\n align-items: center;\n justify-content: center;\n color: var(--brick-breadcrumb-ellipsis-foreground);\n font: inherit;\n }\n\n .brick-breadcrumb-ellipsis:is(button, [role=\"button\"], a) {\n min-inline-size: var(--brick-breadcrumb-target-size);\n min-block-size: var(--brick-breadcrumb-target-size);\n padding: 0;\n border: 0;\n border-radius: var(--brick-radius-subtle);\n background: transparent;\n cursor: pointer;\n touch-action: manipulation;\n }\n\n .brick-breadcrumb-ellipsis:is(button, [role=\"button\"], a):hover {\n background: var(--brick-breadcrumb-ellipsis-hover-background);\n color: var(--brick-breadcrumb-foreground-hover);\n }\n\n @media (forced-colors: active) {\n .brick-breadcrumb-link {\n color: LinkText;\n forced-color-adjust: auto;\n }\n\n .brick-breadcrumb-page { color: CanvasText; }\n .brick-breadcrumb-separator,\n .brick-breadcrumb-ellipsis { color: CanvasText; }\n\n .brick-breadcrumb-link:focus-visible,\n .brick-breadcrumb-ellipsis:is(button, [role=\"button\"], a):focus-visible {\n outline-color: Highlight;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,ipDAkCA,4gBAWA,qiBAWA,2MAaA,gKASA,4cAgBA,yJAKA,4EACA,8EAEA,mRAOA,8LAQA,4TAYA,6EAKA,oMAUA,iRAWA,wKAKA,8BACE,+DAKA,+FAIA,mID3KJ","sources":["home/runner/work/brick/brick/.brick-cache/production/breadcrumb.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/breadcrumb/breadcrumb.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/breadcrumb/breadcrumb.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-breadcrumb {\n --brick-breadcrumb-foreground: var(--brick-color-text-secondary);\n --brick-breadcrumb-foreground-hover: var(--brick-color-text-primary);\n --brick-breadcrumb-foreground-active: var(--brick-color-accent-text);\n --brick-breadcrumb-current-foreground: var(--brick-color-text-primary);\n --brick-breadcrumb-separator-foreground: var(--brick-color-text-secondary);\n --brick-breadcrumb-ellipsis-foreground: var(--brick-color-text-secondary);\n --brick-breadcrumb-ellipsis-hover-background: var(--brick-color-surface-subtle);\n --brick-breadcrumb-focus-ring: var(--brick-color-focus-ring);\n --brick-breadcrumb-list-gap: var(--brick-space-1);\n --brick-breadcrumb-item-gap: var(--brick-space-1);\n --brick-breadcrumb-target-size: var(--brick-control-target-min);\n --brick-breadcrumb-font-family: var(--brick-typography-body-md-font-family);\n --brick-breadcrumb-font-size: var(--brick-typography-body-md-font-size);\n --brick-breadcrumb-font-weight: var(--brick-typography-body-md-font-weight);\n --brick-breadcrumb-line-height: var(--brick-typography-body-md-line-height);\n --brick-breadcrumb-letter-spacing: var(--brick-typography-body-md-letter-spacing);\n --brick-breadcrumb-current-font-weight: var(--brick-typography-label-md-font-weight);\n --brick-breadcrumb-decoration-thickness: 0.08em;\n --brick-breadcrumb-decoration-offset: 0.16em;\n --brick-breadcrumb-separator-size: 1em;\n\n display: block;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n color: var(--brick-breadcrumb-foreground);\n font-family: var(--brick-breadcrumb-font-family);\n font-size: var(--brick-breadcrumb-font-size);\n font-weight: var(--brick-breadcrumb-font-weight);\n letter-spacing: var(--brick-breadcrumb-letter-spacing);\n line-height: var(--brick-breadcrumb-line-height);\n }\n\n .brick-breadcrumb[data-size=\"sm\"] {\n --brick-breadcrumb-font-family: var(--brick-typography-body-sm-font-family);\n --brick-breadcrumb-font-size: var(--brick-typography-body-sm-font-size);\n --brick-breadcrumb-font-weight: var(--brick-typography-body-sm-font-weight);\n --brick-breadcrumb-line-height: var(--brick-typography-body-sm-line-height);\n --brick-breadcrumb-letter-spacing: var(--brick-typography-body-sm-letter-spacing);\n --brick-breadcrumb-list-gap: 0.1875rem;\n --brick-breadcrumb-item-gap: 0.1875rem;\n --brick-breadcrumb-separator-size: 0.875em;\n }\n\n .brick-breadcrumb[data-size=\"lg\"] {\n --brick-breadcrumb-font-family: var(--brick-typography-body-lg-font-family);\n --brick-breadcrumb-font-size: var(--brick-typography-body-lg-font-size);\n --brick-breadcrumb-font-weight: var(--brick-typography-body-lg-font-weight);\n --brick-breadcrumb-line-height: var(--brick-typography-body-lg-line-height);\n --brick-breadcrumb-letter-spacing: var(--brick-typography-body-lg-letter-spacing);\n --brick-breadcrumb-list-gap: var(--brick-space-2);\n --brick-breadcrumb-item-gap: var(--brick-space-2);\n --brick-breadcrumb-separator-size: 1.125em;\n }\n\n .brick-breadcrumb-list {\n display: flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--brick-breadcrumb-list-gap);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .brick-breadcrumb-item {\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-breadcrumb-item-gap);\n }\n\n .brick-breadcrumb-link {\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n min-block-size: var(--brick-breadcrumb-target-size);\n max-inline-size: 100%;\n align-items: center;\n color: var(--brick-breadcrumb-foreground);\n overflow-wrap: anywhere;\n text-decoration-color: currentColor;\n text-decoration-line: none;\n text-decoration-thickness: var(--brick-breadcrumb-decoration-thickness);\n text-underline-offset: var(--brick-breadcrumb-decoration-offset);\n touch-action: manipulation;\n }\n\n .brick-breadcrumb[data-variant=\"underline\"] .brick-breadcrumb-link,\n .brick-breadcrumb-link:is(:hover, :focus-visible, :active) {\n text-decoration-line: underline;\n }\n\n .brick-breadcrumb-link:hover { color: var(--brick-breadcrumb-foreground-hover); }\n .brick-breadcrumb-link:active { color: var(--brick-breadcrumb-foreground-active); }\n\n .brick-breadcrumb-link:focus-visible,\n .brick-breadcrumb-ellipsis:is(button, [role=\"button\"], a):focus-visible {\n border-radius: var(--brick-radius-subtle);\n outline: var(--brick-border-focus-width) solid var(--brick-breadcrumb-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-breadcrumb-page {\n min-inline-size: 0;\n max-inline-size: 100%;\n color: var(--brick-breadcrumb-current-foreground);\n font-weight: var(--brick-breadcrumb-current-font-weight);\n overflow-wrap: anywhere;\n }\n\n .brick-breadcrumb-separator {\n display: inline-flex;\n box-sizing: border-box;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n color: var(--brick-breadcrumb-separator-foreground);\n inline-size: var(--brick-breadcrumb-separator-size);\n block-size: var(--brick-breadcrumb-separator-size);\n user-select: none;\n }\n\n .brick-breadcrumb-separator > :where(svg, img) {\n inline-size: 100%;\n block-size: 100%;\n }\n\n .brick-breadcrumb-ellipsis {\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 1.5em;\n align-items: center;\n justify-content: center;\n color: var(--brick-breadcrumb-ellipsis-foreground);\n font: inherit;\n }\n\n .brick-breadcrumb-ellipsis:is(button, [role=\"button\"], a) {\n min-inline-size: var(--brick-breadcrumb-target-size);\n min-block-size: var(--brick-breadcrumb-target-size);\n padding: 0;\n border: 0;\n border-radius: var(--brick-radius-subtle);\n background: transparent;\n cursor: pointer;\n touch-action: manipulation;\n }\n\n .brick-breadcrumb-ellipsis:is(button, [role=\"button\"], a):hover {\n background: var(--brick-breadcrumb-ellipsis-hover-background);\n color: var(--brick-breadcrumb-foreground-hover);\n }\n\n @media (forced-colors: active) {\n .brick-breadcrumb-link {\n color: LinkText;\n forced-color-adjust: auto;\n }\n\n .brick-breadcrumb-page { color: CanvasText; }\n .brick-breadcrumb-separator,\n .brick-breadcrumb-ellipsis { color: CanvasText; }\n\n .brick-breadcrumb-link:focus-visible,\n .brick-breadcrumb-ellipsis:is(button, [role=\"button\"], a):focus-visible {\n outline-color: Highlight;\n }\n }\n}\n"],"names":[]}
|
package/dist/styles/button.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-button,.brick-icon-button)[data-loading]:after{inline-size:var(--brick-action-spinner-size);block-size:var(--brick-action-spinner-size);border:.125rem solid #0000;border-block-start-color:var(--brick-action-spinner-color);border-inline-end-color:var(--brick-action-spinner-color);border-radius:var(--brick-radius-full);content:"";animation:.7s linear infinite brick-action-spinner-spin;position:absolute;inset-block-start:50%;inset-inline-start:50%}:where([dir=rtl]) :where(.brick-button,.brick-icon-button)[data-loading]:after{animation-name:brick-action-spinner-spin-rtl}@media (prefers-reduced-motion:reduce){:where(.brick-button,.brick-icon-button)[data-loading]:after{animation-duration:1.4s}}@media (forced-colors:active){:where(.brick-button,.brick-icon-button)[data-loading]:after{border-block-start-color:buttontext;border-inline-end-color:buttontext}}@keyframes brick-action-spinner-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes brick-action-spinner-spin-rtl{0%{transform:translate(50%,-50%)rotate(0)}to{transform:translate(50%,-50%)rotate(360deg)}}.brick-button{--brick-button-background:var(--brick-button-tone-solid);--brick-button-background-hover:var(--brick-button-tone-solid-hover);--brick-button-background-pressed:var(--brick-button-tone-solid-pressed);--brick-button-foreground:var(--brick-button-tone-on-solid);--brick-button-border-color:var(--brick-button-background);--brick-button-focus-ring:var(--brick-color-focus-ring);--brick-button-min-block-size:var(--brick-control-min-block-size-md);--brick-button-padding-block:.5rem;--brick-button-padding-inline:1rem;--brick-button-gap:.5rem;--brick-button-radius:var(--brick-radius-control);--brick-button-font-family:var(--brick-typography-control-md-font-family);--brick-button-font-size:var(--brick-typography-control-md-font-size);--brick-button-font-weight:var(--brick-typography-control-md-font-weight);--brick-button-line-height:var(--brick-typography-control-md-line-height);--brick-button-letter-spacing:var(--brick-typography-control-md-letter-spacing);--brick-button-icon-size:1.125rem;--brick-action-spinner-size:1em;--brick-action-spinner-color:var(--brick-button-spinner-color,var(--brick-button-foreground));box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-button-min-block-size);justify-content:center;align-items:center;gap:var(--brick-button-gap);padding-block:var(--brick-button-padding-block);padding-inline:var(--brick-button-padding-inline);border:var(--brick-border-width) solid var(--brick-button-border-color);border-radius:var(--brick-button-radius);appearance:none;background:var(--brick-button-background);color:var(--brick-button-foreground);font-family:var(--brick-button-font-family);font-size:var(--brick-button-font-size);font-weight:var(--brick-button-font-weight);letter-spacing:var(--brick-button-letter-spacing);line-height:var(--brick-button-line-height);text-align:center;overflow-wrap:anywhere;-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;position:relative}.brick-button:not([data-disabled],[data-loading]){cursor:pointer}.brick-button:focus-visible{outline:var(--brick-border-focus-width) solid var(--brick-button-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-button:not([data-disabled],[data-loading]):active{background:var(--brick-button-background-pressed);border-color:var(--brick-button-background-pressed)}.brick-button[data-variant=soft]:not([data-disabled],[data-loading]):active,.brick-button[data-variant=outline]:not([data-disabled],[data-loading]):active{border-color:var(--brick-button-tone-border)}.brick-button[data-variant=ghost]:not([data-disabled],[data-loading]):active{border-color:#0000}.brick-button[data-disabled]{border-color:var(--brick-color-border-default);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-secondary);cursor:not-allowed}.brick-button[data-loading]{cursor:progress;color:#0000}.brick-button[data-loading]>*{opacity:0}.brick-button[data-disabled][data-loading]{--brick-button-spinner-color:var(--brick-color-text-secondary)}.brick-button__content{min-inline-size:0}.brick-button__icon{flex:none;justify-content:center;align-items:center;display:inline-flex}.brick-button__icon>:where(svg,img){inline-size:var(--brick-button-icon-size);block-size:var(--brick-button-icon-size)}.brick-button[data-full-width]{inline-size:100%}.brick-button[data-shape=sharp]{--brick-button-radius:0}.brick-button[data-shape=pill]{--brick-button-radius:var(--brick-radius-full)}.brick-button[data-size=xs]{--brick-button-min-block-size:var(--brick-control-min-block-size-xs);--brick-button-padding-block:.25rem;--brick-button-padding-inline:.625rem;--brick-button-gap:.375rem;--brick-button-font-size:var(--brick-typography-control-xs-font-size);--brick-button-icon-size:.875rem}.brick-button[data-size=sm]{--brick-button-min-block-size:var(--brick-control-min-block-size-sm);--brick-button-padding-block:.375rem;--brick-button-padding-inline:.75rem;--brick-button-gap:.375rem;--brick-button-font-size:var(--brick-typography-control-sm-font-size);--brick-button-icon-size:1rem}.brick-button[data-size=lg]{--brick-button-min-block-size:var(--brick-control-min-block-size-lg);--brick-button-padding-block:.625rem;--brick-button-padding-inline:1.25rem;--brick-button-gap:.625rem;--brick-button-font-size:var(--brick-typography-control-lg-font-size);--brick-button-icon-size:1.25rem}.brick-button[data-size=xl]{--brick-button-min-block-size:var(--brick-control-min-block-size-xl);--brick-button-padding-block:.75rem;--brick-button-padding-inline:1.5rem;--brick-button-gap:.75rem;--brick-button-font-size:var(--brick-typography-control-xl-font-size);--brick-button-icon-size:1.5rem}.brick-button[data-tone=neutral]{--brick-button-tone-solid:var(--brick-color-text-primary);--brick-button-tone-solid-hover:var(--brick-color-text-secondary);--brick-button-tone-solid-pressed:color-mix(in srgb, var(--brick-color-text-primary), var(--brick-color-text-secondary) 35%);--brick-button-tone-on-solid:var(--brick-color-text-inverse);--brick-button-tone-soft:var(--brick-color-surface-subtle);--brick-button-tone-soft-hover:var(--brick-color-surface-base);--brick-button-tone-soft-pressed:var(--brick-color-border-subtle);--brick-button-tone-on-soft:var(--brick-color-text-primary);--brick-button-tone-border:var(--brick-color-border-strong);--brick-button-tone-text:var(--brick-color-text-primary)}.brick-button[data-tone=accent]{--brick-button-tone-solid:var(--brick-color-accent-solid);--brick-button-tone-solid-hover:var(--brick-color-accent-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-accent-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-accent-on-solid);--brick-button-tone-soft:var(--brick-color-accent-soft);--brick-button-tone-soft-hover:var(--brick-color-accent-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-accent-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-accent-on-soft);--brick-button-tone-border:var(--brick-color-accent-border);--brick-button-tone-text:var(--brick-color-accent-text)}.brick-button[data-tone=info]{--brick-button-tone-solid:var(--brick-color-info-solid);--brick-button-tone-solid-hover:var(--brick-color-info-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-info-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-info-on-solid);--brick-button-tone-soft:var(--brick-color-info-soft);--brick-button-tone-soft-hover:var(--brick-color-info-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-info-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-info-on-soft);--brick-button-tone-border:var(--brick-color-info-border);--brick-button-tone-text:var(--brick-color-info-text)}.brick-button[data-tone=success]{--brick-button-tone-solid:var(--brick-color-success-solid);--brick-button-tone-solid-hover:var(--brick-color-success-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-success-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-success-on-solid);--brick-button-tone-soft:var(--brick-color-success-soft);--brick-button-tone-soft-hover:var(--brick-color-success-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-success-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-success-on-soft);--brick-button-tone-border:var(--brick-color-success-border);--brick-button-tone-text:var(--brick-color-success-text)}.brick-button[data-tone=warning]{--brick-button-tone-solid:var(--brick-color-warning-solid);--brick-button-tone-solid-hover:var(--brick-color-warning-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-warning-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-warning-on-solid);--brick-button-tone-soft:var(--brick-color-warning-soft);--brick-button-tone-soft-hover:var(--brick-color-warning-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-warning-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-warning-on-soft);--brick-button-tone-border:var(--brick-color-warning-border);--brick-button-tone-text:var(--brick-color-warning-text)}.brick-button[data-tone=danger]{--brick-button-tone-solid:var(--brick-color-danger-solid);--brick-button-tone-solid-hover:var(--brick-color-danger-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-danger-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-danger-on-solid);--brick-button-tone-soft:var(--brick-color-danger-soft);--brick-button-tone-soft-hover:var(--brick-color-danger-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-danger-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-danger-on-soft);--brick-button-tone-border:var(--brick-color-danger-border);--brick-button-tone-text:var(--brick-color-danger-text)}.brick-button[data-variant=soft]{--brick-button-background:var(--brick-button-tone-soft);--brick-button-background-hover:var(--brick-button-tone-soft-hover);--brick-button-background-pressed:var(--brick-button-tone-soft-pressed);--brick-button-foreground:var(--brick-button-tone-on-soft);--brick-button-border-color:var(--brick-button-tone-border)}.brick-button[data-variant=outline]{--brick-button-background:transparent;--brick-button-background-hover:var(--brick-button-tone-soft);--brick-button-background-pressed:var(--brick-button-tone-soft-hover);--brick-button-foreground:var(--brick-button-tone-text);--brick-button-border-color:var(--brick-button-tone-border)}.brick-button[data-variant=ghost]{--brick-button-background:transparent;--brick-button-background-hover:var(--brick-button-tone-soft);--brick-button-background-pressed:var(--brick-button-tone-soft-hover);--brick-button-foreground:var(--brick-button-tone-text);--brick-button-border-color:transparent}@media (hover:hover) and (pointer:fine){.brick-button:not([data-disabled],[data-loading]):hover{background:var(--brick-button-background-hover);border-color:var(--brick-button-background-hover)}.brick-button[data-variant=soft]:not([data-disabled],[data-loading]):hover,.brick-button[data-variant=outline]:not([data-disabled],[data-loading]):hover{border-color:var(--brick-button-tone-border)}.brick-button[data-variant=ghost]:not([data-disabled],[data-loading]):hover{border-color:#0000}}@media (prefers-reduced-motion:reduce){.brick-button{transition-duration:0s}}@media (forced-colors:active){.brick-button{color:buttontext;background:buttonface;border-color:buttontext}.brick-button:focus-visible{outline-color:highlight}.brick-button[data-disabled]{color:graytext;opacity:1;border-color:graytext}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-button,.brick-icon-button)[data-loading]:after{inline-size:var(--brick-action-spinner-size);block-size:var(--brick-action-spinner-size);border:.125rem solid #0000;border-block-start-color:var(--brick-action-spinner-color);border-inline-end-color:var(--brick-action-spinner-color);border-radius:var(--brick-radius-full);content:"";animation:.7s linear infinite brick-action-spinner-spin;position:absolute;inset-block-start:50%;inset-inline-start:50%}:where([dir=rtl]) :where(.brick-button,.brick-icon-button)[data-loading]:after{animation-name:brick-action-spinner-spin-rtl}@media (prefers-reduced-motion:reduce){:where(.brick-button,.brick-icon-button)[data-loading]:after{animation-duration:1.4s}}@media (forced-colors:active){:where(.brick-button,.brick-icon-button)[data-loading]:after{border-block-start-color:buttontext;border-inline-end-color:buttontext}}@keyframes brick-action-spinner-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes brick-action-spinner-spin-rtl{0%{transform:translate(50%,-50%)rotate(0)}to{transform:translate(50%,-50%)rotate(360deg)}}.brick-button{--brick-button-background:var(--brick-button-tone-solid);--brick-button-background-hover:var(--brick-button-tone-solid-hover);--brick-button-background-pressed:var(--brick-button-tone-solid-pressed);--brick-button-foreground:var(--brick-button-tone-on-solid);--brick-button-border-color:var(--brick-button-background);--brick-button-focus-ring:var(--brick-color-focus-ring);--brick-button-min-block-size:var(--brick-control-min-block-size-md);--brick-button-padding-block:.5rem;--brick-button-padding-inline:1rem;--brick-button-gap:.5rem;--brick-button-radius:var(--brick-radius-control);--brick-button-font-family:var(--brick-typography-control-md-font-family);--brick-button-font-size:var(--brick-typography-control-md-font-size);--brick-button-font-weight:var(--brick-typography-control-md-font-weight);--brick-button-line-height:var(--brick-typography-control-md-line-height);--brick-button-letter-spacing:var(--brick-typography-control-md-letter-spacing);--brick-button-icon-size:1.125rem;--brick-action-spinner-size:1em;--brick-action-spinner-color:var(--brick-button-spinner-color,var(--brick-button-foreground));box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-button-min-block-size);justify-content:center;align-items:center;gap:var(--brick-button-gap);padding-block:var(--brick-button-padding-block);padding-inline:var(--brick-button-padding-inline);border:var(--brick-border-width) solid var(--brick-button-border-color);border-radius:var(--brick-button-radius);appearance:none;background:var(--brick-button-background);color:var(--brick-button-foreground);font-family:var(--brick-button-font-family);font-size:var(--brick-button-font-size);font-weight:var(--brick-button-font-weight);letter-spacing:var(--brick-button-letter-spacing);line-height:var(--brick-button-line-height);text-align:center;overflow-wrap:anywhere;-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;position:relative}.brick-button:not([data-disabled],[data-loading]){cursor:pointer}.brick-button:focus-visible{outline:var(--brick-border-focus-width) solid var(--brick-button-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-button:not([data-disabled],[data-loading]):active{background:var(--brick-button-background-pressed);border-color:var(--brick-button-background-pressed)}.brick-button[data-variant=soft]:not([data-disabled],[data-loading]):active,.brick-button[data-variant=outline]:not([data-disabled],[data-loading]):active{border-color:var(--brick-button-tone-border)}.brick-button[data-variant=ghost]:not([data-disabled],[data-loading]):active{border-color:#0000}.brick-button[data-disabled]{border-color:var(--brick-color-border-default);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-secondary);cursor:not-allowed}.brick-button[data-loading]{cursor:progress;color:#0000}.brick-button[data-loading]>*{opacity:0}.brick-button[data-disabled][data-loading]{--brick-button-spinner-color:var(--brick-color-text-secondary)}.brick-button__content{min-inline-size:0}.brick-button__icon{flex:none;justify-content:center;align-items:center;display:inline-flex}.brick-button__icon>:where(svg,img){inline-size:var(--brick-button-icon-size);block-size:var(--brick-button-icon-size)}.brick-button[data-full-width]{inline-size:100%}.brick-button[data-shape=sharp]{--brick-button-radius:0}.brick-button[data-shape=pill]{--brick-button-radius:var(--brick-radius-full)}.brick-button[data-size=xs]{--brick-button-min-block-size:var(--brick-control-min-block-size-xs);--brick-button-padding-block:.25rem;--brick-button-padding-inline:.625rem;--brick-button-gap:.375rem;--brick-button-font-size:var(--brick-typography-control-xs-font-size);--brick-button-icon-size:.875rem}.brick-button[data-size=sm]{--brick-button-min-block-size:var(--brick-control-min-block-size-sm);--brick-button-padding-block:.375rem;--brick-button-padding-inline:.75rem;--brick-button-gap:.375rem;--brick-button-font-size:var(--brick-typography-control-sm-font-size);--brick-button-icon-size:1rem}.brick-button[data-size=lg]{--brick-button-min-block-size:var(--brick-control-min-block-size-lg);--brick-button-padding-block:.625rem;--brick-button-padding-inline:1.25rem;--brick-button-gap:.625rem;--brick-button-font-size:var(--brick-typography-control-lg-font-size);--brick-button-icon-size:1.25rem}.brick-button[data-size=xl]{--brick-button-min-block-size:var(--brick-control-min-block-size-xl);--brick-button-padding-block:.75rem;--brick-button-padding-inline:1.5rem;--brick-button-gap:.75rem;--brick-button-font-size:var(--brick-typography-control-xl-font-size);--brick-button-icon-size:1.5rem}.brick-button[data-tone=neutral]{--brick-button-tone-solid:var(--brick-color-text-primary);--brick-button-tone-solid-hover:var(--brick-color-text-secondary);--brick-button-tone-solid-pressed:color-mix(in srgb, var(--brick-color-text-primary), var(--brick-color-text-secondary) 35%);--brick-button-tone-on-solid:var(--brick-color-text-inverse);--brick-button-tone-soft:var(--brick-color-surface-subtle);--brick-button-tone-soft-hover:var(--brick-color-surface-base);--brick-button-tone-soft-pressed:var(--brick-color-border-subtle);--brick-button-tone-on-soft:var(--brick-color-text-primary);--brick-button-tone-border:var(--brick-color-border-strong);--brick-button-tone-text:var(--brick-color-text-primary)}.brick-button[data-tone=accent]{--brick-button-tone-solid:var(--brick-color-accent-solid);--brick-button-tone-solid-hover:var(--brick-color-accent-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-accent-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-accent-on-solid);--brick-button-tone-soft:var(--brick-color-accent-soft);--brick-button-tone-soft-hover:var(--brick-color-accent-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-accent-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-accent-on-soft);--brick-button-tone-border:var(--brick-color-accent-border);--brick-button-tone-text:var(--brick-color-accent-text)}.brick-button[data-tone=info]{--brick-button-tone-solid:var(--brick-color-info-solid);--brick-button-tone-solid-hover:var(--brick-color-info-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-info-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-info-on-solid);--brick-button-tone-soft:var(--brick-color-info-soft);--brick-button-tone-soft-hover:var(--brick-color-info-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-info-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-info-on-soft);--brick-button-tone-border:var(--brick-color-info-border);--brick-button-tone-text:var(--brick-color-info-text)}.brick-button[data-tone=success]{--brick-button-tone-solid:var(--brick-color-success-solid);--brick-button-tone-solid-hover:var(--brick-color-success-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-success-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-success-on-solid);--brick-button-tone-soft:var(--brick-color-success-soft);--brick-button-tone-soft-hover:var(--brick-color-success-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-success-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-success-on-soft);--brick-button-tone-border:var(--brick-color-success-border);--brick-button-tone-text:var(--brick-color-success-text)}.brick-button[data-tone=warning]{--brick-button-tone-solid:var(--brick-color-warning-solid);--brick-button-tone-solid-hover:var(--brick-color-warning-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-warning-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-warning-on-solid);--brick-button-tone-soft:var(--brick-color-warning-soft);--brick-button-tone-soft-hover:var(--brick-color-warning-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-warning-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-warning-on-soft);--brick-button-tone-border:var(--brick-color-warning-border);--brick-button-tone-text:var(--brick-color-warning-text)}.brick-button[data-tone=danger]{--brick-button-tone-solid:var(--brick-color-danger-solid);--brick-button-tone-solid-hover:var(--brick-color-danger-solid-hover);--brick-button-tone-solid-pressed:var(--brick-color-danger-solid-pressed);--brick-button-tone-on-solid:var(--brick-color-danger-on-solid);--brick-button-tone-soft:var(--brick-color-danger-soft);--brick-button-tone-soft-hover:var(--brick-color-danger-soft-hover);--brick-button-tone-soft-pressed:var(--brick-color-danger-soft-pressed);--brick-button-tone-on-soft:var(--brick-color-danger-on-soft);--brick-button-tone-border:var(--brick-color-danger-border);--brick-button-tone-text:var(--brick-color-danger-text)}.brick-button[data-variant=soft]{--brick-button-background:var(--brick-button-tone-soft);--brick-button-background-hover:var(--brick-button-tone-soft-hover);--brick-button-background-pressed:var(--brick-button-tone-soft-pressed);--brick-button-foreground:var(--brick-button-tone-on-soft);--brick-button-border-color:var(--brick-button-tone-border)}.brick-button[data-variant=outline]{--brick-button-background:transparent;--brick-button-background-hover:var(--brick-button-tone-soft);--brick-button-background-pressed:var(--brick-button-tone-soft-hover);--brick-button-foreground:var(--brick-button-tone-text);--brick-button-border-color:var(--brick-button-tone-border)}.brick-button[data-variant=ghost]{--brick-button-background:transparent;--brick-button-background-hover:var(--brick-button-tone-soft);--brick-button-background-pressed:var(--brick-button-tone-soft-hover);--brick-button-foreground:var(--brick-button-tone-text);--brick-button-border-color:transparent}@media (hover:hover) and (pointer:fine){.brick-button:not([data-disabled],[data-loading]):hover{background:var(--brick-button-background-hover);border-color:var(--brick-button-background-hover)}.brick-button[data-variant=soft]:not([data-disabled],[data-loading]):hover,.brick-button[data-variant=outline]:not([data-disabled],[data-loading]):hover{border-color:var(--brick-button-tone-border)}.brick-button[data-variant=ghost]:not([data-disabled],[data-loading]):hover{border-color:#0000}}@media (prefers-reduced-motion:reduce){.brick-button{transition-duration:0s}}@media (forced-colors:active){.brick-button{color:buttontext;background:buttonface;border-color:buttontext}.brick-button:focus-visible{outline-color:highlight}.brick-button[data-disabled]{color:graytext;opacity:1;border-color:graytext}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=button.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,+cAcA,4HAKA,uCACE,sFAKF,8BACE,qIAMF,iIAUA,mIC1CA,0tEAwDA,iEAIA,yJAKA,+JAKA,wMAKA,gGAIA,oLAOA,wDAKA,wCAIA,0GAIA,yCAIA,4FAOA,uHAKA,gDAIA,wDAIA,8EAIA,6SASA,0SASA,8SASA,0SASA,osBAiBA,gqBAaA,0oBAaA,2qBAaA,2qBAaA,gqBAaA,4VAQA,kUAQA,4SAQA,wCACE,0JAKA,sMAKA,gGAKF,uCACE,sCAKF,8BACE,6EAMA,oDAIA,8EF/SJ","sources":["home/runner/work/brick/brick/.brick-cache/production/button.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/_action-spinner/action-spinner.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/button/button.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/_action-spinner/action-spinner.css\";\n@import \"../../src/components/button/button.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n :where(.brick-button, .brick-icon-button)[data-loading]::after {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n inline-size: var(--brick-action-spinner-size);\n block-size: var(--brick-action-spinner-size);\n border: 0.125rem solid transparent;\n border-block-start-color: var(--brick-action-spinner-color);\n border-inline-end-color: var(--brick-action-spinner-color);\n border-radius: var(--brick-radius-full);\n content: \"\";\n animation: brick-action-spinner-spin 700ms linear infinite;\n }\n\n :where([dir=\"rtl\"])\n :where(.brick-button, .brick-icon-button)[data-loading]::after {\n animation-name: brick-action-spinner-spin-rtl;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-button, .brick-icon-button)[data-loading]::after {\n animation-duration: 1400ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-button, .brick-icon-button)[data-loading]::after {\n border-block-start-color: ButtonText;\n border-inline-end-color: ButtonText;\n }\n }\n\n @keyframes brick-action-spinner-spin {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n }\n\n @keyframes brick-action-spinner-spin-rtl {\n from {\n transform: translate(50%, -50%) rotate(0deg);\n }\n\n to {\n transform: translate(50%, -50%) rotate(360deg);\n }\n }\n}\n","@layer brick.components {\n .brick-button {\n --brick-button-background: var(--brick-button-tone-solid);\n --brick-button-background-hover: var(--brick-button-tone-solid-hover);\n --brick-button-background-pressed: var(--brick-button-tone-solid-pressed);\n --brick-button-foreground: var(--brick-button-tone-on-solid);\n --brick-button-border-color: var(--brick-button-background);\n --brick-button-focus-ring: var(--brick-color-focus-ring);\n --brick-button-min-block-size: var(--brick-control-min-block-size-md);\n --brick-button-padding-block: 0.5rem;\n --brick-button-padding-inline: 1rem;\n --brick-button-gap: 0.5rem;\n --brick-button-radius: var(--brick-radius-control);\n --brick-button-font-family: var(--brick-typography-control-md-font-family);\n --brick-button-font-size: var(--brick-typography-control-md-font-size);\n --brick-button-font-weight: var(--brick-typography-control-md-font-weight);\n --brick-button-line-height: var(--brick-typography-control-md-line-height);\n --brick-button-letter-spacing: var(--brick-typography-control-md-letter-spacing);\n --brick-button-icon-size: 1.125rem;\n --brick-action-spinner-size: 1em;\n --brick-action-spinner-color: var(\n --brick-button-spinner-color,\n var(--brick-button-foreground)\n );\n\n position: relative;\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-button-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-button-gap);\n padding-block: var(--brick-button-padding-block);\n padding-inline: var(--brick-button-padding-inline);\n border: var(--brick-border-width) solid var(--brick-button-border-color);\n border-radius: var(--brick-button-radius);\n appearance: none;\n background: var(--brick-button-background);\n color: var(--brick-button-foreground);\n font-family: var(--brick-button-font-family);\n font-size: var(--brick-button-font-size);\n font-weight: var(--brick-button-font-weight);\n letter-spacing: var(--brick-button-letter-spacing);\n line-height: var(--brick-button-line-height);\n text-align: center;\n text-decoration: none;\n overflow-wrap: anywhere;\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 .brick-button:not([data-disabled], [data-loading]) {\n cursor: pointer;\n }\n\n .brick-button:focus-visible {\n outline: var(--brick-border-focus-width) solid var(--brick-button-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-button:not([data-disabled], [data-loading]):active {\n background: var(--brick-button-background-pressed);\n border-color: var(--brick-button-background-pressed);\n }\n\n .brick-button[data-variant=\"soft\"]:not([data-disabled], [data-loading]):active,\n .brick-button[data-variant=\"outline\"]:not([data-disabled], [data-loading]):active {\n border-color: var(--brick-button-tone-border);\n }\n\n .brick-button[data-variant=\"ghost\"]:not([data-disabled], [data-loading]):active {\n border-color: transparent;\n }\n\n .brick-button[data-disabled] {\n border-color: var(--brick-color-border-default);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n cursor: not-allowed;\n }\n\n .brick-button[data-loading] {\n cursor: progress;\n color: transparent;\n }\n\n .brick-button[data-loading] > * {\n opacity: 0;\n }\n\n .brick-button[data-disabled][data-loading] {\n --brick-button-spinner-color: var(--brick-color-text-secondary);\n }\n\n .brick-button__content {\n min-inline-size: 0;\n }\n\n .brick-button__icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n }\n\n .brick-button__icon > :where(svg, img) {\n inline-size: var(--brick-button-icon-size);\n block-size: var(--brick-button-icon-size);\n }\n\n .brick-button[data-full-width] {\n inline-size: 100%;\n }\n\n .brick-button[data-shape=\"sharp\"] {\n --brick-button-radius: 0;\n }\n\n .brick-button[data-shape=\"pill\"] {\n --brick-button-radius: var(--brick-radius-full);\n }\n\n .brick-button[data-size=\"xs\"] {\n --brick-button-min-block-size: var(--brick-control-min-block-size-xs);\n --brick-button-padding-block: 0.25rem;\n --brick-button-padding-inline: 0.625rem;\n --brick-button-gap: 0.375rem;\n --brick-button-font-size: var(--brick-typography-control-xs-font-size);\n --brick-button-icon-size: 0.875rem;\n }\n\n .brick-button[data-size=\"sm\"] {\n --brick-button-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-button-padding-block: 0.375rem;\n --brick-button-padding-inline: 0.75rem;\n --brick-button-gap: 0.375rem;\n --brick-button-font-size: var(--brick-typography-control-sm-font-size);\n --brick-button-icon-size: 1rem;\n }\n\n .brick-button[data-size=\"lg\"] {\n --brick-button-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-button-padding-block: 0.625rem;\n --brick-button-padding-inline: 1.25rem;\n --brick-button-gap: 0.625rem;\n --brick-button-font-size: var(--brick-typography-control-lg-font-size);\n --brick-button-icon-size: 1.25rem;\n }\n\n .brick-button[data-size=\"xl\"] {\n --brick-button-min-block-size: var(--brick-control-min-block-size-xl);\n --brick-button-padding-block: 0.75rem;\n --brick-button-padding-inline: 1.5rem;\n --brick-button-gap: 0.75rem;\n --brick-button-font-size: var(--brick-typography-control-xl-font-size);\n --brick-button-icon-size: 1.5rem;\n }\n\n .brick-button[data-tone=\"neutral\"] {\n --brick-button-tone-solid: var(--brick-color-text-primary);\n --brick-button-tone-solid-hover: var(--brick-color-text-secondary);\n --brick-button-tone-solid-pressed: color-mix(\n in srgb,\n var(--brick-color-text-primary),\n var(--brick-color-text-secondary) 35%\n );\n --brick-button-tone-on-solid: var(--brick-color-text-inverse);\n --brick-button-tone-soft: var(--brick-color-surface-subtle);\n --brick-button-tone-soft-hover: var(--brick-color-surface-base);\n --brick-button-tone-soft-pressed: var(--brick-color-border-subtle);\n --brick-button-tone-on-soft: var(--brick-color-text-primary);\n --brick-button-tone-border: var(--brick-color-border-strong);\n --brick-button-tone-text: var(--brick-color-text-primary);\n }\n\n .brick-button[data-tone=\"accent\"] {\n --brick-button-tone-solid: var(--brick-color-accent-solid);\n --brick-button-tone-solid-hover: var(--brick-color-accent-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-accent-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-accent-on-solid);\n --brick-button-tone-soft: var(--brick-color-accent-soft);\n --brick-button-tone-soft-hover: var(--brick-color-accent-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-accent-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-accent-on-soft);\n --brick-button-tone-border: var(--brick-color-accent-border);\n --brick-button-tone-text: var(--brick-color-accent-text);\n }\n\n .brick-button[data-tone=\"info\"] {\n --brick-button-tone-solid: var(--brick-color-info-solid);\n --brick-button-tone-solid-hover: var(--brick-color-info-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-info-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-info-on-solid);\n --brick-button-tone-soft: var(--brick-color-info-soft);\n --brick-button-tone-soft-hover: var(--brick-color-info-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-info-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-info-on-soft);\n --brick-button-tone-border: var(--brick-color-info-border);\n --brick-button-tone-text: var(--brick-color-info-text);\n }\n\n .brick-button[data-tone=\"success\"] {\n --brick-button-tone-solid: var(--brick-color-success-solid);\n --brick-button-tone-solid-hover: var(--brick-color-success-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-success-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-success-on-solid);\n --brick-button-tone-soft: var(--brick-color-success-soft);\n --brick-button-tone-soft-hover: var(--brick-color-success-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-success-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-success-on-soft);\n --brick-button-tone-border: var(--brick-color-success-border);\n --brick-button-tone-text: var(--brick-color-success-text);\n }\n\n .brick-button[data-tone=\"warning\"] {\n --brick-button-tone-solid: var(--brick-color-warning-solid);\n --brick-button-tone-solid-hover: var(--brick-color-warning-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-warning-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-warning-on-solid);\n --brick-button-tone-soft: var(--brick-color-warning-soft);\n --brick-button-tone-soft-hover: var(--brick-color-warning-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-warning-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-warning-on-soft);\n --brick-button-tone-border: var(--brick-color-warning-border);\n --brick-button-tone-text: var(--brick-color-warning-text);\n }\n\n .brick-button[data-tone=\"danger\"] {\n --brick-button-tone-solid: var(--brick-color-danger-solid);\n --brick-button-tone-solid-hover: var(--brick-color-danger-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-danger-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-danger-on-solid);\n --brick-button-tone-soft: var(--brick-color-danger-soft);\n --brick-button-tone-soft-hover: var(--brick-color-danger-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-danger-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-danger-on-soft);\n --brick-button-tone-border: var(--brick-color-danger-border);\n --brick-button-tone-text: var(--brick-color-danger-text);\n }\n\n .brick-button[data-variant=\"soft\"] {\n --brick-button-background: var(--brick-button-tone-soft);\n --brick-button-background-hover: var(--brick-button-tone-soft-hover);\n --brick-button-background-pressed: var(--brick-button-tone-soft-pressed);\n --brick-button-foreground: var(--brick-button-tone-on-soft);\n --brick-button-border-color: var(--brick-button-tone-border);\n }\n\n .brick-button[data-variant=\"outline\"] {\n --brick-button-background: transparent;\n --brick-button-background-hover: var(--brick-button-tone-soft);\n --brick-button-background-pressed: var(--brick-button-tone-soft-hover);\n --brick-button-foreground: var(--brick-button-tone-text);\n --brick-button-border-color: var(--brick-button-tone-border);\n }\n\n .brick-button[data-variant=\"ghost\"] {\n --brick-button-background: transparent;\n --brick-button-background-hover: var(--brick-button-tone-soft);\n --brick-button-background-pressed: var(--brick-button-tone-soft-hover);\n --brick-button-foreground: var(--brick-button-tone-text);\n --brick-button-border-color: transparent;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-button:not([data-disabled], [data-loading]):hover {\n background: var(--brick-button-background-hover);\n border-color: var(--brick-button-background-hover);\n }\n\n .brick-button[data-variant=\"soft\"]:not([data-disabled], [data-loading]):hover,\n .brick-button[data-variant=\"outline\"]:not([data-disabled], [data-loading]):hover {\n border-color: var(--brick-button-tone-border);\n }\n\n .brick-button[data-variant=\"ghost\"]:not([data-disabled], [data-loading]):hover {\n border-color: transparent;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-button {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n .brick-button {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n .brick-button:focus-visible {\n outline-color: Highlight;\n }\n\n .brick-button[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,+cAcA,4HAKA,uCACE,sFAKF,8BACE,qIAMF,iIAUA,mIC1CA,0tEAwDA,iEAIA,yJAKA,+JAKA,wMAKA,gGAIA,oLAOA,wDAKA,wCAIA,0GAIA,yCAIA,4FAOA,uHAKA,gDAIA,wDAIA,8EAIA,6SASA,0SASA,8SASA,0SASA,osBAiBA,gqBAaA,0oBAaA,2qBAaA,2qBAaA,gqBAaA,4VAQA,kUAQA,4SAQA,wCACE,0JAKA,sMAKA,gGAKF,uCACE,sCAKF,8BACE,6EAMA,oDAIA,8EF/SJ","sources":["home/runner/work/brick/brick/.brick-cache/production/button.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/_action-spinner/action-spinner.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/button/button.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/_action-spinner/action-spinner.css\";\n@import \"../../src/components/button/button.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n :where(.brick-button, .brick-icon-button)[data-loading]::after {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n inline-size: var(--brick-action-spinner-size);\n block-size: var(--brick-action-spinner-size);\n border: 0.125rem solid transparent;\n border-block-start-color: var(--brick-action-spinner-color);\n border-inline-end-color: var(--brick-action-spinner-color);\n border-radius: var(--brick-radius-full);\n content: \"\";\n animation: brick-action-spinner-spin 700ms linear infinite;\n }\n\n :where([dir=\"rtl\"])\n :where(.brick-button, .brick-icon-button)[data-loading]::after {\n animation-name: brick-action-spinner-spin-rtl;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-button, .brick-icon-button)[data-loading]::after {\n animation-duration: 1400ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-button, .brick-icon-button)[data-loading]::after {\n border-block-start-color: ButtonText;\n border-inline-end-color: ButtonText;\n }\n }\n\n @keyframes brick-action-spinner-spin {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n }\n\n @keyframes brick-action-spinner-spin-rtl {\n from {\n transform: translate(50%, -50%) rotate(0deg);\n }\n\n to {\n transform: translate(50%, -50%) rotate(360deg);\n }\n }\n}\n","@layer brick.components {\n .brick-button {\n --brick-button-background: var(--brick-button-tone-solid);\n --brick-button-background-hover: var(--brick-button-tone-solid-hover);\n --brick-button-background-pressed: var(--brick-button-tone-solid-pressed);\n --brick-button-foreground: var(--brick-button-tone-on-solid);\n --brick-button-border-color: var(--brick-button-background);\n --brick-button-focus-ring: var(--brick-color-focus-ring);\n --brick-button-min-block-size: var(--brick-control-min-block-size-md);\n --brick-button-padding-block: 0.5rem;\n --brick-button-padding-inline: 1rem;\n --brick-button-gap: 0.5rem;\n --brick-button-radius: var(--brick-radius-control);\n --brick-button-font-family: var(--brick-typography-control-md-font-family);\n --brick-button-font-size: var(--brick-typography-control-md-font-size);\n --brick-button-font-weight: var(--brick-typography-control-md-font-weight);\n --brick-button-line-height: var(--brick-typography-control-md-line-height);\n --brick-button-letter-spacing: var(--brick-typography-control-md-letter-spacing);\n --brick-button-icon-size: 1.125rem;\n --brick-action-spinner-size: 1em;\n --brick-action-spinner-color: var(\n --brick-button-spinner-color,\n var(--brick-button-foreground)\n );\n\n position: relative;\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-button-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-button-gap);\n padding-block: var(--brick-button-padding-block);\n padding-inline: var(--brick-button-padding-inline);\n border: var(--brick-border-width) solid var(--brick-button-border-color);\n border-radius: var(--brick-button-radius);\n appearance: none;\n background: var(--brick-button-background);\n color: var(--brick-button-foreground);\n font-family: var(--brick-button-font-family);\n font-size: var(--brick-button-font-size);\n font-weight: var(--brick-button-font-weight);\n letter-spacing: var(--brick-button-letter-spacing);\n line-height: var(--brick-button-line-height);\n text-align: center;\n text-decoration: none;\n overflow-wrap: anywhere;\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 .brick-button:not([data-disabled], [data-loading]) {\n cursor: pointer;\n }\n\n .brick-button:focus-visible {\n outline: var(--brick-border-focus-width) solid var(--brick-button-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-button:not([data-disabled], [data-loading]):active {\n background: var(--brick-button-background-pressed);\n border-color: var(--brick-button-background-pressed);\n }\n\n .brick-button[data-variant=\"soft\"]:not([data-disabled], [data-loading]):active,\n .brick-button[data-variant=\"outline\"]:not([data-disabled], [data-loading]):active {\n border-color: var(--brick-button-tone-border);\n }\n\n .brick-button[data-variant=\"ghost\"]:not([data-disabled], [data-loading]):active {\n border-color: transparent;\n }\n\n .brick-button[data-disabled] {\n border-color: var(--brick-color-border-default);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n cursor: not-allowed;\n }\n\n .brick-button[data-loading] {\n cursor: progress;\n color: transparent;\n }\n\n .brick-button[data-loading] > * {\n opacity: 0;\n }\n\n .brick-button[data-disabled][data-loading] {\n --brick-button-spinner-color: var(--brick-color-text-secondary);\n }\n\n .brick-button__content {\n min-inline-size: 0;\n }\n\n .brick-button__icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n }\n\n .brick-button__icon > :where(svg, img) {\n inline-size: var(--brick-button-icon-size);\n block-size: var(--brick-button-icon-size);\n }\n\n .brick-button[data-full-width] {\n inline-size: 100%;\n }\n\n .brick-button[data-shape=\"sharp\"] {\n --brick-button-radius: 0;\n }\n\n .brick-button[data-shape=\"pill\"] {\n --brick-button-radius: var(--brick-radius-full);\n }\n\n .brick-button[data-size=\"xs\"] {\n --brick-button-min-block-size: var(--brick-control-min-block-size-xs);\n --brick-button-padding-block: 0.25rem;\n --brick-button-padding-inline: 0.625rem;\n --brick-button-gap: 0.375rem;\n --brick-button-font-size: var(--brick-typography-control-xs-font-size);\n --brick-button-icon-size: 0.875rem;\n }\n\n .brick-button[data-size=\"sm\"] {\n --brick-button-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-button-padding-block: 0.375rem;\n --brick-button-padding-inline: 0.75rem;\n --brick-button-gap: 0.375rem;\n --brick-button-font-size: var(--brick-typography-control-sm-font-size);\n --brick-button-icon-size: 1rem;\n }\n\n .brick-button[data-size=\"lg\"] {\n --brick-button-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-button-padding-block: 0.625rem;\n --brick-button-padding-inline: 1.25rem;\n --brick-button-gap: 0.625rem;\n --brick-button-font-size: var(--brick-typography-control-lg-font-size);\n --brick-button-icon-size: 1.25rem;\n }\n\n .brick-button[data-size=\"xl\"] {\n --brick-button-min-block-size: var(--brick-control-min-block-size-xl);\n --brick-button-padding-block: 0.75rem;\n --brick-button-padding-inline: 1.5rem;\n --brick-button-gap: 0.75rem;\n --brick-button-font-size: var(--brick-typography-control-xl-font-size);\n --brick-button-icon-size: 1.5rem;\n }\n\n .brick-button[data-tone=\"neutral\"] {\n --brick-button-tone-solid: var(--brick-color-text-primary);\n --brick-button-tone-solid-hover: var(--brick-color-text-secondary);\n --brick-button-tone-solid-pressed: color-mix(\n in srgb,\n var(--brick-color-text-primary),\n var(--brick-color-text-secondary) 35%\n );\n --brick-button-tone-on-solid: var(--brick-color-text-inverse);\n --brick-button-tone-soft: var(--brick-color-surface-subtle);\n --brick-button-tone-soft-hover: var(--brick-color-surface-base);\n --brick-button-tone-soft-pressed: var(--brick-color-border-subtle);\n --brick-button-tone-on-soft: var(--brick-color-text-primary);\n --brick-button-tone-border: var(--brick-color-border-strong);\n --brick-button-tone-text: var(--brick-color-text-primary);\n }\n\n .brick-button[data-tone=\"accent\"] {\n --brick-button-tone-solid: var(--brick-color-accent-solid);\n --brick-button-tone-solid-hover: var(--brick-color-accent-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-accent-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-accent-on-solid);\n --brick-button-tone-soft: var(--brick-color-accent-soft);\n --brick-button-tone-soft-hover: var(--brick-color-accent-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-accent-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-accent-on-soft);\n --brick-button-tone-border: var(--brick-color-accent-border);\n --brick-button-tone-text: var(--brick-color-accent-text);\n }\n\n .brick-button[data-tone=\"info\"] {\n --brick-button-tone-solid: var(--brick-color-info-solid);\n --brick-button-tone-solid-hover: var(--brick-color-info-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-info-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-info-on-solid);\n --brick-button-tone-soft: var(--brick-color-info-soft);\n --brick-button-tone-soft-hover: var(--brick-color-info-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-info-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-info-on-soft);\n --brick-button-tone-border: var(--brick-color-info-border);\n --brick-button-tone-text: var(--brick-color-info-text);\n }\n\n .brick-button[data-tone=\"success\"] {\n --brick-button-tone-solid: var(--brick-color-success-solid);\n --brick-button-tone-solid-hover: var(--brick-color-success-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-success-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-success-on-solid);\n --brick-button-tone-soft: var(--brick-color-success-soft);\n --brick-button-tone-soft-hover: var(--brick-color-success-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-success-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-success-on-soft);\n --brick-button-tone-border: var(--brick-color-success-border);\n --brick-button-tone-text: var(--brick-color-success-text);\n }\n\n .brick-button[data-tone=\"warning\"] {\n --brick-button-tone-solid: var(--brick-color-warning-solid);\n --brick-button-tone-solid-hover: var(--brick-color-warning-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-warning-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-warning-on-solid);\n --brick-button-tone-soft: var(--brick-color-warning-soft);\n --brick-button-tone-soft-hover: var(--brick-color-warning-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-warning-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-warning-on-soft);\n --brick-button-tone-border: var(--brick-color-warning-border);\n --brick-button-tone-text: var(--brick-color-warning-text);\n }\n\n .brick-button[data-tone=\"danger\"] {\n --brick-button-tone-solid: var(--brick-color-danger-solid);\n --brick-button-tone-solid-hover: var(--brick-color-danger-solid-hover);\n --brick-button-tone-solid-pressed: var(--brick-color-danger-solid-pressed);\n --brick-button-tone-on-solid: var(--brick-color-danger-on-solid);\n --brick-button-tone-soft: var(--brick-color-danger-soft);\n --brick-button-tone-soft-hover: var(--brick-color-danger-soft-hover);\n --brick-button-tone-soft-pressed: var(--brick-color-danger-soft-pressed);\n --brick-button-tone-on-soft: var(--brick-color-danger-on-soft);\n --brick-button-tone-border: var(--brick-color-danger-border);\n --brick-button-tone-text: var(--brick-color-danger-text);\n }\n\n .brick-button[data-variant=\"soft\"] {\n --brick-button-background: var(--brick-button-tone-soft);\n --brick-button-background-hover: var(--brick-button-tone-soft-hover);\n --brick-button-background-pressed: var(--brick-button-tone-soft-pressed);\n --brick-button-foreground: var(--brick-button-tone-on-soft);\n --brick-button-border-color: var(--brick-button-tone-border);\n }\n\n .brick-button[data-variant=\"outline\"] {\n --brick-button-background: transparent;\n --brick-button-background-hover: var(--brick-button-tone-soft);\n --brick-button-background-pressed: var(--brick-button-tone-soft-hover);\n --brick-button-foreground: var(--brick-button-tone-text);\n --brick-button-border-color: var(--brick-button-tone-border);\n }\n\n .brick-button[data-variant=\"ghost\"] {\n --brick-button-background: transparent;\n --brick-button-background-hover: var(--brick-button-tone-soft);\n --brick-button-background-pressed: var(--brick-button-tone-soft-hover);\n --brick-button-foreground: var(--brick-button-tone-text);\n --brick-button-border-color: transparent;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-button:not([data-disabled], [data-loading]):hover {\n background: var(--brick-button-background-hover);\n border-color: var(--brick-button-background-hover);\n }\n\n .brick-button[data-variant=\"soft\"]:not([data-disabled], [data-loading]):hover,\n .brick-button[data-variant=\"outline\"]:not([data-disabled], [data-loading]):hover {\n border-color: var(--brick-button-tone-border);\n }\n\n .brick-button[data-variant=\"ghost\"]:not([data-disabled], [data-loading]):hover {\n border-color: transparent;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-button {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n .brick-button {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n .brick-button:focus-visible {\n outline-color: Highlight;\n }\n\n .brick-button[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n"],"names":[]}
|
package/dist/styles/card.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-card{--brick-card-space:var(--brick-space-5);--brick-card-radius:var(--brick-radius-surface);--brick-card-shadow:0 .75rem 2rem color-mix(in srgb, var(--brick-color-shadow), transparent 18%);--brick-card-background:var(--brick-color-surface-raised);--brick-card-border-color:var(--brick-color-border-subtle);--brick-card-title-size:var(--brick-typography-surface-title-md-font-size);box-sizing:border-box;border:var(--brick-border-width) solid var(--brick-card-border-color);border-radius:var(--brick-card-radius);background:var(--brick-card-background);min-inline-size:0;max-inline-size:100%;box-shadow:none;color:var(--brick-color-text-primary);overflow-wrap:anywhere;flex-direction:column;display:flex;overflow:clip}.brick-card[data-variant=elevated]{--brick-card-background:color-mix(in srgb, var(--brick-color-surface-raised), white 6%);--brick-card-border-color:color-mix(in srgb, var(--brick-color-border-subtle), transparent 45%);box-shadow:var(--brick-card-shadow)}.brick-card[data-variant=subtle]{--brick-card-background:var(--brick-color-surface-subtle);--brick-card-border-color:transparent}.brick-card[data-size=sm]{--brick-card-space:var(--brick-space-3);--brick-card-title-size:var(--brick-typography-surface-title-sm-font-size)}.brick-card[data-size=lg]{--brick-card-space:var(--brick-space-6);--brick-card-title-size:var(--brick-typography-surface-title-lg-font-size)}.brick-card-header{gap:var(--brick-space-1) var(--brick-space-3);min-inline-size:0;padding:var(--brick-card-space);grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row;align-items:start;display:grid}.brick-card-title,.brick-card-description{grid-column:1;min-inline-size:0;margin:0}.brick-card-title{color:var(--brick-color-text-primary);font-family:var(--brick-typography-surface-title-md-font-family);font-size:var(--brick-card-title-size);font-weight:var(--brick-typography-surface-title-md-font-weight);letter-spacing:var(--brick-typography-surface-title-md-letter-spacing);line-height:var(--brick-typography-surface-title-md-line-height)}.brick-card-description{color:var(--brick-color-text-secondary);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)}.brick-card-action{grid-area:1/2/-1;justify-content:end;align-items:start;min-inline-size:0;max-inline-size:100%;display:flex}.brick-card-content{min-inline-size:0;padding-inline:var(--brick-card-space);color:var(--brick-color-text-primary);line-height:var(--brick-typography-body-md-line-height);padding-block-end:var(--brick-card-space)}.brick-card>.brick-card-content:first-child{padding-block-start:var(--brick-card-space)}.brick-card-footer{align-items:center;gap:var(--brick-space-2);min-inline-size:0;padding-inline:var(--brick-card-space);flex-wrap:wrap;padding-block-end:var(--brick-card-space);display:flex}.brick-card>.brick-card-footer:first-child{padding-block-start:var(--brick-card-space)}.brick-card>:where(img,picture,video){inline-size:100%;max-inline-size:100%;display:block}.brick-card>:where(img,video),.brick-card>picture>img{block-size:auto}@media (forced-colors:active){.brick-card,.brick-card[data-variant=elevated],.brick-card[data-variant=subtle]{box-shadow:none;border-color:canvastext}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-card{--brick-card-space:var(--brick-space-5);--brick-card-radius:var(--brick-radius-surface);--brick-card-shadow:0 .75rem 2rem color-mix(in srgb, var(--brick-color-shadow), transparent 18%);--brick-card-background:var(--brick-color-surface-raised);--brick-card-border-color:var(--brick-color-border-subtle);--brick-card-border-width:var(--brick-border-width);--brick-card-title-size:var(--brick-typography-surface-title-md-font-size);box-sizing:border-box;border:var(--brick-card-border-width) solid var(--brick-card-border-color);border-radius:var(--brick-card-radius);background:var(--brick-card-background);min-inline-size:0;max-inline-size:100%;box-shadow:none;color:var(--brick-color-text-primary);overflow-wrap:anywhere;flex-direction:column;display:flex;overflow:clip}.brick-card[data-variant=elevated]{--brick-card-background:color-mix(in srgb, var(--brick-color-surface-raised), white 6%);--brick-card-border-color:color-mix(in srgb, var(--brick-color-border-subtle), transparent 45%);box-shadow:var(--brick-card-shadow)}.brick-card[data-variant=subtle]{--brick-card-background:var(--brick-color-surface-subtle);--brick-card-border-color:transparent}.brick-card[data-bordered=false]{--brick-card-border-width:0}.brick-card[data-size=sm]{--brick-card-space:var(--brick-space-3);--brick-card-title-size:var(--brick-typography-surface-title-sm-font-size)}.brick-card[data-size=lg]{--brick-card-space:var(--brick-space-6);--brick-card-title-size:var(--brick-typography-surface-title-lg-font-size)}.brick-card-header{gap:var(--brick-space-1) var(--brick-space-3);min-inline-size:0;padding:var(--brick-card-space);grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row;align-items:start;display:grid}.brick-card-title,.brick-card-description{grid-column:1;min-inline-size:0;margin:0}.brick-card-title{color:var(--brick-color-text-primary);font-family:var(--brick-typography-surface-title-md-font-family);font-size:var(--brick-card-title-size);font-weight:var(--brick-typography-surface-title-md-font-weight);letter-spacing:var(--brick-typography-surface-title-md-letter-spacing);line-height:var(--brick-typography-surface-title-md-line-height)}.brick-card-description{color:var(--brick-color-text-secondary);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)}.brick-card-action{grid-area:1/2/-1;justify-content:end;align-items:start;min-inline-size:0;max-inline-size:100%;display:flex}.brick-card-content{min-inline-size:0;padding-inline:var(--brick-card-space);color:var(--brick-color-text-primary);line-height:var(--brick-typography-body-md-line-height);padding-block-end:var(--brick-card-space)}.brick-card>.brick-card-content:first-child{padding-block-start:var(--brick-card-space)}.brick-card-footer{align-items:center;gap:var(--brick-space-2);min-inline-size:0;padding-inline:var(--brick-card-space);flex-wrap:wrap;padding-block-end:var(--brick-card-space);display:flex}.brick-card>.brick-card-footer:first-child{padding-block-start:var(--brick-card-space)}.brick-card>:where(img,picture,video){inline-size:100%;max-inline-size:100%;display:block}.brick-card>:where(img,video),.brick-card>picture>img{block-size:auto}@media (forced-colors:active){.brick-card,.brick-card[data-variant=elevated],.brick-card[data-variant=subtle]{box-shadow:none;border-color:canvastext}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=card.css.map */
|
package/dist/styles/card.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,8wBA2BA,+PAeA,iIAKA,6DAIA,6IAKA,6IAKA,8MAUA,mFAOA,yWASA,wXASA,8HAUA,qNAQA,wFAIA,8LAUA,uFAIA,0FAMA,sEAKA,8BACE,0HDjJJ","sources":["home/runner/work/brick/brick/.brick-cache/production/card.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/card/card.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/card/card.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-card {\n --brick-card-space: var(--brick-space-5);\n --brick-card-radius: var(--brick-radius-surface);\n --brick-card-shadow: 0 0.75rem 2rem color-mix(\n in srgb,\n var(--brick-color-shadow),\n transparent 18%\n );\n --brick-card-background: var(--brick-color-surface-raised);\n --brick-card-border-color: var(--brick-color-border-subtle);\n --brick-card-border-width: var(--brick-border-width);\n --brick-card-title-size: var(--brick-typography-surface-title-md-font-size);\n\n display: flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n flex-direction: column;\n overflow: clip;\n border: var(--brick-card-border-width) solid var(--brick-card-border-color);\n border-radius: var(--brick-card-radius);\n background: var(--brick-card-background);\n box-shadow: none;\n color: var(--brick-color-text-primary);\n overflow-wrap: anywhere;\n }\n\n .brick-card[data-variant=\"elevated\"] {\n --brick-card-background: color-mix(\n in srgb,\n var(--brick-color-surface-raised),\n white 6%\n );\n --brick-card-border-color: color-mix(\n in srgb,\n var(--brick-color-border-subtle),\n transparent 45%\n );\n\n box-shadow: var(--brick-card-shadow);\n }\n\n .brick-card[data-variant=\"subtle\"] {\n --brick-card-background: var(--brick-color-surface-subtle);\n --brick-card-border-color: transparent;\n }\n\n .brick-card[data-bordered=\"false\"] {\n --brick-card-border-width: 0;\n }\n\n .brick-card[data-size=\"sm\"] {\n --brick-card-space: var(--brick-space-3);\n --brick-card-title-size: var(--brick-typography-surface-title-sm-font-size);\n }\n\n .brick-card[data-size=\"lg\"] {\n --brick-card-space: var(--brick-space-6);\n --brick-card-title-size: var(--brick-typography-surface-title-lg-font-size);\n }\n\n .brick-card-header {\n display: grid;\n min-inline-size: 0;\n grid-template-columns: minmax(0, 1fr) auto;\n grid-auto-flow: row;\n gap: var(--brick-space-1) var(--brick-space-3);\n align-items: start;\n padding: var(--brick-card-space);\n }\n\n .brick-card-title,\n .brick-card-description {\n min-inline-size: 0;\n grid-column: 1;\n margin: 0;\n }\n\n .brick-card-title {\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-surface-title-md-font-family);\n font-size: var(--brick-card-title-size);\n font-weight: var(--brick-typography-surface-title-md-font-weight);\n letter-spacing: var(--brick-typography-surface-title-md-letter-spacing);\n line-height: var(--brick-typography-surface-title-md-line-height);\n }\n\n .brick-card-description {\n color: var(--brick-color-text-secondary);\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 .brick-card-action {\n display: flex;\n min-inline-size: 0;\n max-inline-size: 100%;\n grid-column: 2;\n grid-row: 1 / -1;\n align-items: start;\n justify-content: end;\n }\n\n .brick-card-content {\n min-inline-size: 0;\n padding-inline: var(--brick-card-space);\n padding-block-end: var(--brick-card-space);\n color: var(--brick-color-text-primary);\n line-height: var(--brick-typography-body-md-line-height);\n }\n\n .brick-card > .brick-card-content:first-child {\n padding-block-start: var(--brick-card-space);\n }\n\n .brick-card-footer {\n display: flex;\n min-inline-size: 0;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--brick-space-2);\n padding-inline: var(--brick-card-space);\n padding-block-end: var(--brick-card-space);\n }\n\n .brick-card > .brick-card-footer:first-child {\n padding-block-start: var(--brick-card-space);\n }\n\n .brick-card > :where(img, picture, video) {\n display: block;\n inline-size: 100%;\n max-inline-size: 100%;\n }\n\n .brick-card > :where(img, video),\n .brick-card > picture > img {\n block-size: auto;\n }\n\n @media (forced-colors: active) {\n .brick-card,\n .brick-card[data-variant=\"elevated\"],\n .brick-card[data-variant=\"subtle\"] {\n border-color: CanvasText;\n box-shadow: none;\n }\n }\n}\n"],"names":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-icon{--brick-icon-size-2xs:.75rem;--brick-icon-size-xs:1rem;--brick-icon-size-sm:1.25rem;--brick-icon-size-md:1.5rem;--brick-icon-size-lg:2rem;--brick-icon-size-xl:2.5rem;--brick-icon-size:var(--brick-icon-size-md);--brick-icon-color:currentcolor;--brick-icon-vertical-align:middle;--brick-icon-direction-scale:1;box-sizing:border-box;flex:0 0 var(--brick-icon-size);inline-size:var(--brick-icon-size);block-size:var(--brick-icon-size);vertical-align:var(--brick-icon-vertical-align);color:var(--brick-icon-color);transform:scaleX(var(--brick-icon-direction-scale));justify-content:center;align-items:center;display:inline-flex}.brick-icon>svg{block-size:100%;inline-size:100%;display:block}svg.brick-icon{display:block}.brick-icon[data-size="2xs"]{--brick-icon-size:var(--brick-icon-size-2xs)}.brick-icon[data-size=xs]{--brick-icon-size:var(--brick-icon-size-xs)}.brick-icon[data-size=sm]{--brick-icon-size:var(--brick-icon-size-sm)}.brick-icon[data-size=lg]{--brick-icon-size:var(--brick-icon-size-lg)}.brick-icon[data-size=xl]{--brick-icon-size:var(--brick-icon-size-xl)}.brick-icon[data-tone=primary]{--brick-icon-color:var(--brick-color-text-primary)}.brick-icon[data-tone=secondary]{--brick-icon-color:var(--brick-color-text-secondary)}.brick-icon[data-tone=muted]{--brick-icon-color:var(--brick-color-text-muted)}.brick-icon[data-tone=accent]{--brick-icon-color:var(--brick-color-accent-text)}.brick-icon[data-tone=info]{--brick-icon-color:var(--brick-color-info-text)}.brick-icon[data-tone=success]{--brick-icon-color:var(--brick-color-success-text)}.brick-icon[data-tone=warning]{--brick-icon-color:var(--brick-color-warning-text)}.brick-icon[data-tone=danger]{--brick-icon-color:var(--brick-color-danger-text)}[dir=rtl] .brick-icon[data-directional]{--brick-icon-direction-scale:-1}@media (forced-colors:active){.brick-icon:not([data-tone=inherit]){--brick-icon-color:CanvasText}}.brick-carousel{--brick-carousel-gap:var(--brick-space-3);--brick-carousel-radius:var(--brick-radius-surface);--brick-carousel-control-size:2.75rem;--brick-carousel-control-radius:var(--brick-radius-full);--brick-carousel-control-foreground:var(--brick-color-text-primary);--brick-carousel-control-background:var(--brick-color-surface-raised);--brick-carousel-control-border-color:var(--brick-color-border-subtle);--brick-carousel-control-hover-background:var(--brick-color-surface-subtle);--brick-carousel-control-shadow:var(--brick-shadow-sm);--brick-carousel-control-disabled-opacity:.65;--brick-carousel-focus-ring:var(--brick-color-focus-ring);--brick-carousel-picker-gap:var(--brick-space-1);--brick-carousel-picker-target-size:2.75rem;--brick-carousel-picker-background:color-mix(in srgb, var(--brick-color-surface-raised) 86%, transparent);--brick-carousel-picker-padding:var(--brick-space-1);--brick-carousel-picker-radius:var(--brick-radius-full);--brick-carousel-dot-size:.5rem;--brick-carousel-dot-background:var(--brick-color-text-muted);--brick-carousel-dot-active-background:var(--brick-color-accent-solid);--brick-carousel-transition-duration:var(--brick-motion-duration-fast);--brick-carousel-transition-easing:var(--brick-motion-easing-standard);--brick-carousel-navigation-block-start:50%;--brick-carousel-navigation-block-end:auto;--brick-carousel-navigation-inline:var(--brick-carousel-gap);--brick-carousel-navigation-transform:translateY(-50%);--brick-carousel-controls-block-end:var(--brick-carousel-gap);box-sizing:border-box;min-block-size:0;inline-size:100%;position:relative}.brick-carousel[data-fill]{block-size:100%;display:grid}.brick-carousel[data-fill]>.brick-carousel__viewport,.brick-carousel[data-fill]>.brick-carousel__viewport>.brick-carousel__track,.brick-carousel[data-fill]>.brick-carousel__viewport>.brick-carousel__track>.brick-carousel__slide{block-size:100%;min-block-size:0}.brick-carousel[data-size=sm]{--brick-carousel-control-size:2.25rem;--brick-carousel-dot-size:.375rem}.brick-carousel[data-size=lg]{--brick-carousel-control-size:3.25rem;--brick-carousel-dot-size:.625rem}.brick-carousel[data-radius=none]{--brick-carousel-radius:0rem}.brick-carousel[data-control-shape=rounded]{--brick-carousel-control-radius:var(--brick-radius-control)}.brick-carousel[data-control-shape=circle]{--brick-carousel-control-radius:var(--brick-radius-full)}.brick-carousel[data-control-variant=solid]{--brick-carousel-control-background:var(--brick-color-text-primary);--brick-carousel-control-hover-background:var(--brick-color-text-secondary);--brick-carousel-control-foreground:var(--brick-color-text-inverse);--brick-carousel-control-border-color:var(--brick-color-text-primary);--brick-carousel-control-shadow:none}.brick-carousel[data-control-variant=outline]{--brick-carousel-control-background:transparent;--brick-carousel-control-hover-background:color-mix(in srgb, var(--brick-color-surface-raised) 18%, transparent);--brick-carousel-control-border-color:var(--brick-color-border-default);--brick-carousel-control-shadow:none}.brick-carousel[data-control-variant=ghost]{--brick-carousel-control-background:transparent;--brick-carousel-control-hover-background:color-mix(in srgb, var(--brick-color-surface-raised) 18%, transparent);--brick-carousel-control-border-color:transparent;--brick-carousel-control-shadow:none}.brick-carousel__viewport{box-sizing:border-box;border-radius:var(--brick-carousel-radius);scroll-behavior:auto;scroll-snap-type:inline mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;inline-size:100%;overflow:auto hidden}.brick-carousel__viewport::-webkit-scrollbar{display:none}.brick-carousel__viewport:focus-visible{outline:var(--brick-border-focus-width) solid var(--brick-carousel-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-carousel[data-control-placement=overlay]:has(>.brick-carousel__viewport:focus-visible):after{z-index:3;border:var(--brick-border-focus-width) solid var(--brick-carousel-focus-ring);border-radius:var(--brick-carousel-radius);content:"";pointer-events:none;position:absolute;inset:0}.brick-carousel[data-control-placement=overlay]>.brick-carousel__viewport:focus-visible{outline:none}.brick-carousel[data-initialized]>.brick-carousel__viewport{scroll-behavior:smooth}.brick-carousel__track{box-sizing:border-box;inline-size:100%;display:flex}.brick-carousel__track>[data-slot=carousel-loop-boundary]{flex:0 0 100%}.brick-carousel__slide{box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%;min-inline-size:100%}.brick-carousel__slide[data-loop-position=before]{transform:translateX(calc(-1 * var(--atom-carousel-count) * 100%))}.brick-carousel__slide[data-loop-position=after],.brick-carousel[dir=rtl] .brick-carousel__slide[data-loop-position=before]{transform:translateX(calc(var(--atom-carousel-count) * 100%))}.brick-carousel[dir=rtl] .brick-carousel__slide[data-loop-position=after]{transform:translateX(calc(-1 * var(--atom-carousel-count) * 100%))}.brick-carousel__navigation{z-index:2;inset-block-start:var(--brick-carousel-navigation-block-start);inset-block-end:var(--brick-carousel-navigation-block-end);inset-inline:var(--brick-carousel-navigation-inline);pointer-events:none;transform:var(--brick-carousel-navigation-transform);transition:opacity var(--brick-carousel-transition-duration) var(--brick-carousel-transition-easing);justify-content:space-between;align-items:center;display:flex;position:absolute}.brick-carousel__navigation[data-visibility=interaction]{opacity:0}.brick-carousel__navigation[data-visibility=interaction]>:is(.brick-carousel__previous,.brick-carousel__next){pointer-events:none}.brick-carousel:focus-within>.brick-carousel__navigation[data-visibility=interaction],.brick-carousel[data-touch-navigation=visible]>.brick-carousel__navigation[data-visibility=interaction]{opacity:1}.brick-carousel:focus-within>.brick-carousel__navigation[data-visibility=interaction]>:is(.brick-carousel__previous,.brick-carousel__next),.brick-carousel[data-touch-navigation=visible]>.brick-carousel__navigation[data-visibility=interaction]>:is(.brick-carousel__previous,.brick-carousel__next){pointer-events:auto}.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control{--brick-carousel-part-control-size:var(--brick-carousel-control-size);--brick-carousel-part-control-radius:var(--brick-carousel-control-radius);box-sizing:border-box;inline-size:var(--brick-carousel-part-control-size);block-size:var(--brick-carousel-part-control-size);border:1px solid var(--brick-carousel-control-border-color);border-radius:var(--brick-carousel-part-control-radius);color:var(--brick-carousel-control-foreground);background:var(--brick-carousel-control-background);box-shadow:var(--brick-carousel-control-shadow);cursor:pointer;pointer-events:auto;touch-action:manipulation;transition:background-color var(--brick-carousel-transition-duration) var(--brick-carousel-transition-easing), border-color var(--brick-carousel-transition-duration) var(--brick-carousel-transition-easing), color var(--brick-carousel-transition-duration) var(--brick-carousel-transition-easing), opacity var(--brick-carousel-transition-duration) var(--brick-carousel-transition-easing);flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-size=xs]{--brick-carousel-part-control-size:var(--brick-control-min-block-size-xs)}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-size=sm]{--brick-carousel-part-control-size:var(--brick-control-min-block-size-sm)}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-size=md]{--brick-carousel-part-control-size:var(--brick-control-min-block-size-md)}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-size=lg]{--brick-carousel-part-control-size:var(--brick-control-min-block-size-lg)}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-size=xl]{--brick-carousel-part-control-size:var(--brick-control-min-block-size-xl)}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-shape=rounded]{--brick-carousel-part-control-radius:var(--brick-radius-control)}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-shape=circle]{--brick-carousel-part-control-radius:var(--brick-radius-full)}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-variant=solid]{border-color:var(--brick-color-text-primary);background:var(--brick-color-text-primary);color:var(--brick-color-text-inverse);box-shadow:none}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-variant=outline]{border-color:var(--brick-color-border-default);box-shadow:none;background:0 0}:is(.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control)[data-variant=ghost]{box-shadow:none;background:0 0;border-color:#0000}.brick-carousel__previous:hover:not(:disabled),.brick-carousel__next:hover:not(:disabled),.brick-carousel__rotation-control:hover:not(:disabled){background:var(--brick-carousel-control-hover-background)}.brick-carousel__previous:focus-visible,.brick-carousel__next:focus-visible,.brick-carousel__rotation-control:focus-visible,.brick-carousel__picker-item:focus-visible{outline:var(--brick-border-focus-width) solid var(--brick-carousel-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-carousel__previous:disabled,.brick-carousel__next:disabled{opacity:var(--brick-carousel-control-disabled-opacity);cursor:not-allowed}.brick-carousel__control-icon,.brick-carousel__rotation-icon{block-size:1rem;inline-size:1rem}.brick-carousel__rotation-icon--play{display:inline-flex}.brick-carousel__rotation-icon--pause,.brick-carousel__rotation-control[data-state=playing] .brick-carousel__rotation-icon--play{display:none}.brick-carousel__rotation-control[data-state=playing] .brick-carousel__rotation-icon--pause{display:inline-flex}.brick-carousel__controls{z-index:2;align-items:center;gap:var(--brick-carousel-picker-gap);display:flex;position:absolute;inset-block-end:var(--brick-carousel-controls-block-end);inset-inline-start:50%;transform:translate(-50%)}.brick-carousel__picker{align-items:center;gap:var(--brick-carousel-picker-gap);padding:var(--brick-carousel-picker-padding);border-radius:var(--brick-carousel-picker-radius);background:var(--brick-carousel-picker-background);display:inline-flex}.brick-carousel__picker[data-variant=bare]{background:0 0;padding:0}.brick-carousel__picker-item{box-sizing:border-box;inline-size:var(--brick-carousel-picker-target-size);block-size:var(--brick-carousel-picker-target-size);border-radius:var(--brick-radius-full);color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.brick-carousel__picker-dot{inline-size:var(--brick-carousel-dot-size);block-size:var(--brick-carousel-dot-size);border-radius:var(--brick-radius-full);background:var(--brick-carousel-dot-background);transition:inline-size var(--brick-carousel-transition-duration), background-color var(--brick-carousel-transition-duration)}.brick-carousel__picker-item[data-state=active] .brick-carousel__picker-dot{inline-size:calc(var(--brick-carousel-dot-size) * 2.5);background:var(--brick-carousel-dot-active-background)}.brick-carousel[data-control-placement=outside]{gap:var(--brick-carousel-gap);grid-template-columns:1fr;display:grid}.brick-carousel[data-control-placement=outside] .brick-carousel__navigation,.brick-carousel[data-control-placement=outside] .brick-carousel__controls{position:static;transform:none}.brick-carousel[data-control-placement=outside] .brick-carousel__navigation{padding-inline:var(--brick-carousel-gap);grid-row:2}.brick-carousel[data-control-placement=outside] .brick-carousel__controls{grid-row:3;justify-self:center}@media (prefers-reduced-motion:reduce){.brick-carousel__viewport{scroll-behavior:auto}.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control,.brick-carousel__picker-dot{transition-duration:0s}}@media (hover:hover) and (pointer:fine){.brick-carousel:hover>.brick-carousel__navigation[data-visibility=interaction]{opacity:1}.brick-carousel:hover>.brick-carousel__navigation[data-visibility=interaction]>:is(.brick-carousel__previous,.brick-carousel__next){pointer-events:auto}}@media (forced-colors:active){.brick-carousel__viewport:focus-visible{outline-color:highlight}.brick-carousel[data-control-placement=overlay]:has(>.brick-carousel__viewport:focus-visible):after{border-color:highlight}.brick-carousel__previous,.brick-carousel__next,.brick-carousel__rotation-control{border-color:buttontext}.brick-carousel__picker-dot{background:buttontext}.brick-carousel__picker-item[data-state=active] .brick-carousel__picker-dot{background:highlight}}}@layer brick.utilities,brick.effects;
|
|
2
|
+
/*# sourceMappingURL=carousel.css.map */
|