UNPKG

@postenbring/hedwig-css

Version:

Styles for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

1 lines 5.65 kB
{"version":3,"sourceRoot":null,"mappings":"AAGA,61EA8DE,yBAAkB,2VAUlB,yBAAmB,kWAUnB,yBAAkB,2VAUlB,0BAAmB","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/stack/stack.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/stack/../../_custom-media.css"],"sourcesContent":["/* stylelint-disable declaration-block-no-redundant-longhand-properties -- `flex-flow` resets `wrap` when direction is `initial` */\n@import url(\"../../_custom-media.css\");\n\n.hds-stack {\n /* Gap */\n --hds-stack-gap-initial: initial;\n --hds-stack-gap-small: var(--hds-stack-gap-initial);\n --hds-stack-gap-medium: var(--hds-stack-gap-small);\n --hds-stack-gap-large: var(--hds-stack-gap-medium);\n --hds-stack-gap-xlarge: var(--hds-stack-gap-large);\n --hds-stack-gap: var(--hds-stack-gap-initial);\n --hds-stack-gap-x-initial: var(--hds-stack-gap);\n --hds-stack-gap-x-small: var(--hds-stack-gap-x-initial);\n --hds-stack-gap-x-medium: var(--hds-stack-gap-x-small);\n --hds-stack-gap-x-large: var(--hds-stack-gap-x-medium);\n --hds-stack-gap-x-xlarge: var(--hds-stack-gap-x-large);\n --hds-stack-gap-x: var(--hds-stack-gap-x-initial);\n --hds-stack-gap-y-initial: var(--hds-stack-gap);\n --hds-stack-gap-y-small: var(--hds-stack-gap-y-initial);\n --hds-stack-gap-y-medium: var(--hds-stack-gap-y-small);\n --hds-stack-gap-y-large: var(--hds-stack-gap-y-medium);\n --hds-stack-gap-y-xlarge: var(--hds-stack-gap-y-large);\n --hds-stack-gap-y: var(--hds-stack-gap-y-initial);\n\n /* Direction */\n --hds-stack-direction-initial: initial;\n --hds-stack-direction-small: var(--hds-stack-direction-initial);\n --hds-stack-direction-medium: var(--hds-stack-direction-small);\n --hds-stack-direction-large: var(--hds-stack-direction-medium);\n --hds-stack-direction-xlarge: var(--hds-stack-direction-large);\n --hds-stack-direction: var(--hds-stack-direction-initial);\n\n /* Wrap */\n --hds-stack-wrap-initial: nowrap;\n --hds-stack-wrap-small: var(--hds-stack-wrap-initial);\n --hds-stack-wrap-medium: var(--hds-stack-wrap-small);\n --hds-stack-wrap-large: var(--hds-stack-wrap-medium);\n --hds-stack-wrap-xlarge: var(--hds-stack-wrap-large);\n --hds-stack-wrap: var(--hds-stack-wrap-initial);\n\n /* Item align */\n --hds-stack-align-initial: initial;\n --hds-stack-align-small: var(--hds-stack-align-initial);\n --hds-stack-align-medium: var(--hds-stack-align-small);\n --hds-stack-align-large: var(--hds-stack-align-medium);\n --hds-stack-align-xlarge: var(--hds-stack-align-large);\n --hds-stack-align: var(--hds-stack-align-initial);\n\n /* Justify */\n --hds-stack-justify-initial: initial;\n --hds-stack-justify-small: var(--hds-stack-justify-initial);\n --hds-stack-justify-medium: var(--hds-stack-justify-small);\n --hds-stack-justify-large: var(--hds-stack-justify-medium);\n --hds-stack-justify-xlarge: var(--hds-stack-justify-large);\n --hds-stack-justify: var(--hds-stack-justify-initial);\n\n display: flex;\n column-gap: var(--hds-stack-gap-x);\n row-gap: var(--hds-stack-gap-y);\n flex-direction: var(--hds-stack-direction);\n flex-wrap: var(--hds-stack-wrap);\n align-items: var(--hds-stack-align);\n justify-content: var(--hds-stack-justify);\n\n /* Responsive */\n @media (--small) {\n --hds-stack-gap: var(--hds-stack-gap-small);\n --hds-stack-gap-x: var(--hds-stack-gap-x-small);\n --hds-stack-gap-y: var(--hds-stack-gap-y-small);\n --hds-stack-direction: var(--hds-stack-direction-small);\n --hds-stack-wrap: var(--hds-stack-wrap-small);\n --hds-stack-align: var(--hds-stack-align-small);\n --hds-stack-justify: var(--hds-stack-justify-small);\n }\n\n @media (--medium) {\n --hds-stack-gap: var(--hds-stack-gap-medium);\n --hds-stack-gap-x: var(--hds-stack-gap-x-medium);\n --hds-stack-gap-y: var(--hds-stack-gap-y-medium);\n --hds-stack-direction: var(--hds-stack-direction-medium);\n --hds-stack-wrap: var(--hds-stack-wrap-medium);\n --hds-stack-align: var(--hds-stack-align-medium);\n --hds-stack-justify: var(--hds-stack-justify-medium);\n }\n\n @media (--large) {\n --hds-stack-gap: var(--hds-stack-gap-large);\n --hds-stack-gap-x: var(--hds-stack-gap-x-large);\n --hds-stack-gap-y: var(--hds-stack-gap-y-large);\n --hds-stack-direction: var(--hds-stack-direction-large);\n --hds-stack-wrap: var(--hds-stack-wrap-large);\n --hds-stack-align: var(--hds-stack-align-large);\n --hds-stack-justify: var(--hds-stack-justify-large);\n }\n\n @media (--xlarge) {\n --hds-stack-gap: var(--hds-stack-gap-xlarge);\n --hds-stack-gap-x: var(--hds-stack-gap-x-xlarge);\n --hds-stack-gap-y: var(--hds-stack-gap-y-xlarge);\n --hds-stack-direction: var(--hds-stack-direction-xlarge);\n --hds-stack-wrap: var(--hds-stack-wrap-xlarge);\n --hds-stack-align: var(--hds-stack-align-xlarge);\n --hds-stack-justify: var(--hds-stack-justify-xlarge);\n }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}