UNPKG

@postenbring/hedwig-css

Version:

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

1 lines 3.18 kB
{"version":3,"sourceRoot":null,"mappings":"AAEA,2GAUI,yBAAmB,0CAMnB,yBAAkB,iEANlB,yBAAmB,iEAMnB,yBAAkB,wFAQlB,yBAAmB,8DAMnB,yBAAkB,oFAWpB,mEAIA,sEAIA,kEAIA,qEAKA,yBACE,mEAIA,sEAIA,kEAIA,sEAMF,yBACE,kEAIA,sEAMF,0BACE,mEAIA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/container/container.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/container/../../_custom-media.css"],"sourcesContent":["@import url(\"../../_custom-media.css\");\n\n.hds-container {\n display: block;\n margin-right: auto;\n margin-left: auto;\n padding: 0 var(--hds-spacing-16);\n width: 100%;\n\n &, /* Default */\n &.hds-container--default {\n /* 720px - max-width: 590px */\n @media (--medium) {\n max-width: 590px;\n padding: 0;\n }\n\n /* 940px - max-width: 1200px 36px gutters */\n @media (--large) {\n max-width: 1200px;\n padding: 0 var(--hds-spacing-32);\n }\n }\n\n &.hds-container--slim {\n /* 720px - max-width: 590px */\n @media (--medium) {\n max-width: 590px;\n padding: 0;\n }\n\n /* 940px - max-width: 762px 36px gutters */\n @media (--large) {\n max-width: 762px;\n padding: 0 var(--hds-spacing-32);\n }\n }\n\n /**\n * Vertical spacing\n * padding and margin\n */\n\n &.hds-container--pt {\n padding-top: var(--hds-spacing-12);\n }\n\n &.hds-container--pb {\n padding-bottom: var(--hds-spacing-12);\n }\n\n &.hds-container--mt {\n margin-top: var(--hds-spacing-12);\n }\n\n &.hds-container--mb {\n margin-bottom: var(--hds-spacing-12);\n }\n\n /* 720px - max-width: 590px */\n @media (--medium) {\n &.hds-container--pt {\n padding-top: var(--hds-spacing-32);\n }\n\n &.hds-container--pb {\n padding-bottom: var(--hds-spacing-32);\n }\n\n &.hds-container--mt {\n margin-top: var(--hds-spacing-32);\n }\n\n &.hds-container--mb {\n margin-bottom: var(--hds-spacing-32);\n }\n }\n\n /* 940px - max-width: 762px 36px gutters */\n @media (--large) {\n &.hds-container--mt {\n margin-top: var(--hds-spacing-48);\n }\n\n &.hds-container--mb {\n margin-bottom: var(--hds-spacing-48);\n }\n }\n\n /* 1200px - max-width: 762px 36px gutters */\n @media (--xlarge) {\n &.hds-container--pt {\n padding-top: var(--hds-spacing-40);\n }\n\n &.hds-container--pb {\n padding-bottom: var(--hds-spacing-40);\n }\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":[]}