@postenbring/hedwig-css 0.0.36 → 0.0.38
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/dist/_custom-media.css +0 -0
- package/dist/_custom-media.css.map +1 -0
- package/dist/accordion.css +1 -2
- package/dist/accordion.css.map +1 -1
- package/dist/all-in-one.css +1 -2
- package/dist/all-in-one.css.map +1 -1
- package/dist/badge.css +1 -2
- package/dist/badge.css.map +1 -1
- package/dist/body.css +1 -2
- package/dist/body.css.map +1 -1
- package/dist/box.css +1 -2
- package/dist/box.css.map +1 -1
- package/dist/breadcrumb.css +1 -2
- package/dist/breadcrumb.css.map +1 -1
- package/dist/button.css +1 -2
- package/dist/button.css.map +1 -1
- package/dist/card.css +1 -2
- package/dist/card.css.map +1 -1
- package/dist/classnames.d.ts +4 -1
- package/dist/container.css +1 -2
- package/dist/container.css.map +1 -1
- package/dist/description-list.css +1 -2
- package/dist/description-list.css.map +1 -1
- package/dist/flex.css +1 -2
- package/dist/flex.css.map +1 -1
- package/dist/fonts.css +1 -2
- package/dist/fonts.css.map +1 -1
- package/dist/index.css +1 -2
- package/dist/index.css.map +1 -1
- package/dist/input.css +1 -2
- package/dist/input.css.map +1 -1
- package/dist/link.css +1 -2
- package/dist/link.css.map +1 -1
- package/dist/list.css +1 -2
- package/dist/list.css.map +1 -1
- package/dist/message.css +1 -2
- package/dist/message.css.map +1 -1
- package/dist/modal.css +1 -2
- package/dist/modal.css.map +1 -1
- package/dist/navbar.css +1 -2
- package/dist/navbar.css.map +1 -1
- package/dist/prose.css +1 -0
- package/dist/prose.css.map +1 -0
- package/dist/reset.css +1 -2
- package/dist/reset.css.map +1 -1
- package/dist/scoped.css +1 -1
- package/dist/select.css +1 -2
- package/dist/select.css.map +1 -1
- package/dist/tabs.css +1 -2
- package/dist/tabs.css.map +1 -1
- package/dist/textarea.css +1 -2
- package/dist/textarea.css.map +1 -1
- package/dist/tokens.css +1 -2
- package/dist/tokens.css.map +1 -1
- package/dist/typography.css +1 -2
- package/dist/typography.css.map +1 -1
- package/dist/warning-banner.css +1 -2
- package/dist/warning-banner.css.map +1 -1
- package/package.json +3 -3
package/dist/body.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAMA,8NAWA,2EAcA,uCAIA,uCAIA,wCASA","sources":["
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAMA,8NAWA,2EAcA,uCAIA,uCAIA,wCASA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/body.css"],"sourcesContent":["/*\n * All element selector, and general global styles should be defined in this file\n *\n * Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n */\n:root {\n box-sizing: border-box;\n font: var(--hds-typography-body);\n fill: var(--hds-ui-colors-black);\n color: var(--hds-ui-colors-black);\n line-height: 1.4;\n cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n background: var(--hds-ui-colors-white);\n\n /* Get specificity on the same level as the font decleration in the \n * legacy Hedwig CSS, making it possible to override by ordering */\n font: var(--hds-typography-body);\n}\n\n/**\n * Default typography for headings\n *\n * Since hedwig legacy sets default font-family\n * we need to override it to get the correct `Posten Sans`\n */\nh1 {\n font: var(--hds-brand-typography-h1);\n}\n\nh2 {\n font: var(--hds-brand-typography-h2);\n}\n\nh3 {\n font: var(--hds-typography-header-h3);\n}\n\n/*\n * Uncommon to use these levels,\n * but default to body-title.\n * The consumer should override to whatever fit's their need\n */\nh4,\nh5,\nh6 {\n font: var(--hds-typography-body-title);\n}\n"],"names":[]}
|
package/dist/box.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.hds-box{border-radius:var(--hds-border-radius);--hds-component-box-padding:var(--hds-spacing-medium-2);padding:var(--hds-component-box-padding);position:relative}.hds-box{background-color:var(--hds-ui-colors-light-grey-fill)}.hds-box.hds-box--light-grey{background-color:var(--hds-ui-colors-light-grey-fill)}.hds-box.hds-box--lighter{background-color:var(--hds-brand-colors-lighter)}.hds-box.hds-box--white{background-color:var(--hds-ui-colors-white);box-shadow:var(--hds-shadow-default)}.hds-box.hds-box--warning{background-color:var(--hds-ui-colors-warning-yellow)}@media (min-width:720px){.hds-box{--hds-component-box-padding:var(--hds-spacing-medium-3)}}.hds-box.hds-box--closed{display:none}.hds-box .hds-box__close-button{top:var(--hds-spacing-small-4);right:var(--hds-spacing-small-4);cursor:pointer;transition:filter var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>");border:none;width:24px;height:24px;padding:0;position:absolute}.hds-box .hds-box__close-button:hover{
|
|
2
|
-
/*# sourceMappingURL=./box.css.map */
|
|
1
|
+
.hds-box{border-radius:var(--hds-border-radius);--hds-component-box-padding:var(--hds-spacing-medium-2);padding:var(--hds-component-box-padding);position:relative}.hds-box{background-color:var(--hds-ui-colors-light-grey-fill)}.hds-box.hds-box--light-grey{background-color:var(--hds-ui-colors-light-grey-fill)}.hds-box.hds-box--lighter{background-color:var(--hds-brand-colors-lighter)}.hds-box.hds-box--white{background-color:var(--hds-ui-colors-white);box-shadow:var(--hds-shadow-default)}.hds-box.hds-box--warning{background-color:var(--hds-ui-colors-warning-yellow)}@media (min-width:720px){.hds-box{--hds-component-box-padding:var(--hds-spacing-medium-3)}}.hds-box.hds-box--closed{display:none}.hds-box .hds-box__close-button{top:var(--hds-spacing-small-4);right:var(--hds-spacing-small-4);cursor:pointer;transition:filter var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>");border:none;width:24px;height:24px;padding:0;position:absolute}.hds-box .hds-box__close-button:hover{filter:invert(40%)}.hds-box .hds-box__close-button:active{box-shadow:0 0 0 2px var(--hds-ui-colors-black-hover);outline:none}
|
package/dist/box.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAEA,mKAIE,+DAAA,mFAKA,2EAIA,yGAKA,+EAOA,yBAAmB,kEAOnB,sCASF,yhCAmBE,yDAKA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/box/box.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/box/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-box {\n position: relative;\n border-radius: var(--hds-border-radius);\n\n &, /* Default */\n &.hds-box--light-grey {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n\n &.hds-box--lighter {\n background-color: var(--hds-brand-colors-lighter);\n }\n\n &.hds-box--white {\n background-color: var(--hds-ui-colors-white);\n box-shadow: var(--hds-shadow-default);\n }\n\n &.hds-box--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n }\n\n /* Padding */\n --hds-component-box-padding: var(--hds-spacing-medium-2);\n\n @media (--medium) {\n --hds-component-box-padding: var(--hds-spacing-medium-3);\n }\n\n padding: var(--hds-component-box-padding);\n\n /* Closed state */\n &.hds-box--closed {\n display: none;\n }\n}\n\n/**\n * Close button\n * TODO: Styling for the hover and focus effect can be improved upon\n */\n.hds-box .hds-box__close-button {\n /* Icon */\n width: 24px;\n height: 24px;\n background: transparent;\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>');\n\n /* Positioning */\n position: absolute;\n top: var(--hds-spacing-small-4);\n right: var(--hds-spacing-small-4);\n padding: 0;\n border: none;\n cursor: pointer;\n\n /* Hover effect */\n transition: filter var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n\n &:hover {\n filter: invert(40%);\n }\n\n /* Active effect */\n &:active {\n outline: none;\n box-shadow: 0 0 0 2px var(--hds-ui-colors-black-hover);\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":[]}
|
package/dist/breadcrumb.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.hds-breadcrumbs{--hds-breadcrumb-image-left:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"> <path d=\"M11.0404 13.9322L11.3917 13.5887C11.462 13.4983 11.462 13.3537 11.3917 13.2814L8.21212 9.99096L11.3917 6.71864C11.462 6.64633 11.462 6.50169 11.3917 6.4113L11.0404 6.0678C10.9526 5.9774 10.8296 5.9774 10.7418 6.0678L7.0527 9.84633C6.98243 9.93672 6.98243 10.0633 7.0527 10.1537L10.7418 13.9322C10.8296 14.0226 10.9526 14.0226 11.0404 13.9322Z\" fill=\"black\"/></svg>");--hds-breadcrumb-image-right:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M7.9596 6.0678L7.60826 6.4113C7.53799 6.50169 7.53799 6.64633 7.60826 6.71864L10.7879 10.009L7.60826 13.2814C7.53799 13.3537 7.53799 13.4983 7.60826 13.5887L7.9596 13.9322C8.04743 14.0226 8.1704 14.0226 8.25823 13.9322L11.9473 10.1537C12.0176 10.0633 12.0176 9.93672 11.9473 9.84633L8.25823 6.0678C8.1704 5.9774 8.04743 5.9774 7.9596 6.0678Z\" fill=\"%236E6E6E\"/></svg>");padding:0;list-style-type:none;display:flex}.hds-breadcrumbs{font:var(--hds-typography-caption)}.hds-breadcrumbs a{font:var(--hds-typography-caption)}.hds-breadcrumbs li .hds-link{padding-bottom:2px}.hds-breadcrumbs li:first-child:before{display:none}.hds-breadcrumbs li:last-child{color:var(--hds-ui-colors-dark-grey)}.hds-breadcrumbs li:before{background-image:var(--hds-breadcrumb-image-right);margin:0 var(--hds-spacing-small-1);width:20px;height:20px;display:inline-block}@media (max-width:719.999px){.hds-breadcrumbs li:not(:only-child){display:none}.hds-breadcrumbs li:nth-last-of-type(2){display:inherit}.hds-breadcrumbs li:nth-last-of-type(2):before{background-image:var(--hds-breadcrumb-image-left);margin-left:0;display:inline-block}}
|
|
2
|
-
/*# sourceMappingURL=./breadcrumb.css.map */
|
|
1
|
+
.hds-breadcrumbs{--hds-breadcrumb-image-left:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"> <path d=\"M11.0404 13.9322L11.3917 13.5887C11.462 13.4983 11.462 13.3537 11.3917 13.2814L8.21212 9.99096L11.3917 6.71864C11.462 6.64633 11.462 6.50169 11.3917 6.4113L11.0404 6.0678C10.9526 5.9774 10.8296 5.9774 10.7418 6.0678L7.0527 9.84633C6.98243 9.93672 6.98243 10.0633 7.0527 10.1537L10.7418 13.9322C10.8296 14.0226 10.9526 14.0226 11.0404 13.9322Z\" fill=\"black\"/></svg>");--hds-breadcrumb-image-right:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M7.9596 6.0678L7.60826 6.4113C7.53799 6.50169 7.53799 6.64633 7.60826 6.71864L10.7879 10.009L7.60826 13.2814C7.53799 13.3537 7.53799 13.4983 7.60826 13.5887L7.9596 13.9322C8.04743 14.0226 8.1704 14.0226 8.25823 13.9322L11.9473 10.1537C12.0176 10.0633 12.0176 9.93672 11.9473 9.84633L8.25823 6.0678C8.1704 5.9774 8.04743 5.9774 7.9596 6.0678Z\" fill=\"%236E6E6E\"/></svg>");padding:0;list-style-type:none;display:flex}.hds-breadcrumbs{font:var(--hds-typography-caption)}.hds-breadcrumbs a{font:var(--hds-typography-caption)}.hds-breadcrumbs li .hds-link{padding-bottom:2px}.hds-breadcrumbs li:first-child:before{display:none}.hds-breadcrumbs li:last-child{color:var(--hds-ui-colors-dark-grey)}.hds-breadcrumbs li:before{background-image:var(--hds-breadcrumb-image-right);margin:0 var(--hds-spacing-small-1);width:20px;height:20px;display:inline-block}@media (max-width:719.999px){.hds-breadcrumbs li:not(:only-child){display:none}.hds-breadcrumbs li:nth-last-of-type(2){display:inherit}.hds-breadcrumbs li:nth-last-of-type(2):before{background-image:var(--hds-breadcrumb-image-left);margin-left:0;display:inline-block}}
|
package/dist/breadcrumb.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAEA,onCAYE,oDAAA,sDAWE,iDAKE,oDAKF,oEAIA,8JAQA,6BACE,kDAIA,wDAGE","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/breadcrumb/breadcrumb.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/breadcrumb/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-breadcrumbs {\n --hds-breadcrumb-image-left: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"> <path d=\"M11.0404 13.9322L11.3917 13.5887C11.462 13.4983 11.462 13.3537 11.3917 13.2814L8.21212 9.99096L11.3917 6.71864C11.462 6.64633 11.462 6.50169 11.3917 6.4113L11.0404 6.0678C10.9526 5.9774 10.8296 5.9774 10.7418 6.0678L7.0527 9.84633C6.98243 9.93672 6.98243 10.0633 7.0527 10.1537L10.7418 13.9322C10.8296 14.0226 10.9526 14.0226 11.0404 13.9322Z\" fill=\"black\"/></svg>');\n --hds-breadcrumb-image-right: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M7.9596 6.0678L7.60826 6.4113C7.53799 6.50169 7.53799 6.64633 7.60826 6.71864L10.7879 10.009L7.60826 13.2814C7.53799 13.3537 7.53799 13.4983 7.60826 13.5887L7.9596 13.9322C8.04743 14.0226 8.1704 14.0226 8.25823 13.9322L11.9473 10.1537C12.0176 10.0633 12.0176 9.93672 11.9473 9.84633L8.25823 6.0678C8.1704 5.9774 8.04743 5.9774 7.9596 6.0678Z\" fill=\"%236E6E6E\"/></svg>');\n\n padding: 0;\n list-style-type: none;\n display: flex;\n\n /*\n * Ensure the caption typography is used\n * Override general styling for links that sets the font-size\n */\n &,\n & a {\n font: var(--hds-typography-caption);\n }\n\n & li {\n /*\n * Design in Figma has an extra 2px distance between\n * the text and underline border on links\n * making the total height 21px\n */\n .hds-link {\n padding-bottom: 2px;\n }\n\n &:first-child {\n &::before {\n display: none;\n }\n }\n\n &:last-child {\n color: var(--hds-ui-colors-dark-grey);\n }\n\n &::before {\n display: inline-block;\n background-image: var(--hds-breadcrumb-image-right);\n width: 20px;\n height: 20px;\n margin: 0 var(--hds-spacing-small-1);\n }\n\n @media (--before-medium) {\n &:not(:only-child) {\n display: none;\n }\n\n &:nth-last-of-type(2) {\n display: inherit;\n\n &::before {\n display: inline-block;\n margin-left: 0;\n background-image: var(--hds-breadcrumb-image-left);\n }\n }\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":[]}
|
package/dist/button.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.hds-button{--hds-component-button-border-width:0px;-webkit-font-smoothing:antialiased;-webkit-appearance:button;-ms-appearance:button;appearance:button;box-sizing:border-box;border-radius:var(--hds-border-radius);border-style:solid;border-width:var(--hds-component-button-border-width);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);cursor:pointer;word-break:normal;font:var(--hds-typography-body-small-title);text-align:center;text-decoration:none;display:inline-block}.hds-button.hds-button--small{--hds-component-button-small-y-padding:10px;font-size:var(--hds-font-size-technical-title-max);line-height:var(--hds-line-height-technical-title-max);padding:calc(var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width))calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));min-height:44px}.hds-button.hds-button--medium{font-size:var(--hds-font-size-body-small-title-max);line-height:var(--hds-line-height-body-small-title-max);padding:calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));min-height:50px}.hds-button.hds-button--large{font-size:var(--hds-font-size-body-small-title-max);line-height:var(--hds-line-height-body-small-title-max);padding:calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));min-height:58px}.hds-button.hds-button--full{width:100%}
|
|
2
|
-
/*# sourceMappingURL=./button.css.map */
|
|
1
|
+
.hds-button{--hds-component-button-border-width:0px;-webkit-font-smoothing:antialiased;-webkit-appearance:button;-ms-appearance:button;appearance:button;box-sizing:border-box;border-radius:var(--hds-border-radius);border-style:solid;border-width:var(--hds-component-button-border-width);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);cursor:pointer;word-break:normal;font:var(--hds-typography-body-small-title);text-align:center;text-decoration:none;display:inline-block}.hds-button.hds-button--small{--hds-component-button-small-y-padding:10px;font-size:var(--hds-font-size-technical-title-max);line-height:var(--hds-line-height-technical-title-max);padding:calc(var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width))calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));min-height:44px}.hds-button.hds-button--medium{font-size:var(--hds-font-size-body-small-title-max);line-height:var(--hds-line-height-body-small-title-max);padding:calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));min-height:50px}.hds-button.hds-button--large{font-size:var(--hds-font-size-body-small-title-max);line-height:var(--hds-line-height-body-small-title-max);padding:calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));min-height:58px}.hds-button.hds-button--full{width:100%}@media (max-width:719.999px){.hds-button.hds-button--mobile-full{width:100%}}.hds-button.hds-button--primary{background-color:var(--hds-brand-colors-signature);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text)}.hds-button.hds-button--primary:hover{background-color:var(--hds-brand-colors-signature-hover);outline:0 solid var(--hds-brand-colors-signature-hover)}.hds-button.hds-button--primary:active{background-color:var(--hds-brand-colors-signature);outline:0 solid var(--hds-brand-colors-signature-hover)}.hds-button.hds-button--secondary{background-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.hds-button.hds-button--secondary:hover{background-color:var(--hds-ui-colors-black);outline:0 solid var(--hds-ui-colors-black)}.hds-button.hds-button--secondary:active{background-color:var(--hds-brand-colors-darker);outline:0 solid var(--hds-ui-colors-black)}.hds-button.hds-button--outline-primary{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-brand-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-primary:hover{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border-color:var(--hds-brand-colors-dark)}.hds-button.hds-button--outline-primary:active{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border-color:var(--hds-brand-colors-dark)}.hds-button.hds-button--outline-secondary{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-brand-colors-darker);color:var(--hds-brand-colors-darker);fill:var(--hds-brand-colors-darker);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-secondary:hover{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-button.hds-button--outline-secondary:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-button.hds-button--outline-white{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-brand-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-white:hover{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.hds-button.hds-button--outline-white:active{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.hds-button:disabled.hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button:disabled.hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button:disabled.hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button:disabled.hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled].hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled].hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled].hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled].hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled]:active.hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled]:active.hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled]:active.hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled]:active.hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button.hds-button--icon-only{justify-content:center;align-items:center;padding:0;display:inline-flex}.hds-button.hds-button--icon-only.hds-button--small{width:44px;height:44px}.hds-button.hds-button--icon-only.hds-button--small *{width:24px;height:24px}.hds-button.hds-button--icon-only.hds-button--medium{width:50px;height:50px}.hds-button.hds-button--icon-only.hds-button--medium *{width:32px;height:32px}.hds-button.hds-button--icon-only.hds-button--large{width:58px;height:58px}.hds-button.hds-button--icon-only.hds-button--large *{width:32px;height:32px}
|
package/dist/button.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAEA,ygBAsBE,oXAeA,2TAUA,0TAcA,wCAKE,6BAA0B,gDAS5B,sKAKE,uJAKA,kJAMF,mJAKE,+HAKA,oIAMF,sQASE,6JAAA,8JAQF,6QASE,yJAAA,0JAQF,gQASE,mHAAA,oHAcA,6OAAA,+OAWA,6MAAA,+MAXA,8OAAA,gPAWA,8MAAA,gNAXA,qPAAA,uPAWA,qNAAA,uNAeF,0GAaE,2EAIE,6EAMF,4EAIE,8EAMF,2EAIE","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/button.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-button {\n --hds-component-button-border-width: 0px;\n\n -webkit-font-smoothing: antialiased;\n appearance: button;\n box-sizing: border-box;\n display: inline-block;\n border-style: solid;\n border-radius: var(--hds-border-radius);\n border-width: var(--hds-component-button-border-width);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n cursor: pointer;\n word-break: normal;\n font: var(--hds-typography-body-small-title);\n\n /* When used as a link (<a>) */\n text-decoration: none;\n text-align: center;\n\n /**\n * Modifiers: sizes\n */\n &.hds-button--small {\n /* In figma, the actual padding for the text is 10px */\n --hds-component-button-small-y-padding: 10px;\n\n font-size: var(--hds-font-size-technical-title-max);\n line-height: var(--hds-line-height-technical-title-max);\n padding: calc(\n var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width)\n )\n calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 44px;\n }\n\n &.hds-button--medium {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 50px;\n }\n\n &.hds-button--large {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 58px;\n }\n\n /**\n * Modifiers: Width\n */\n\n &.hds-button--full {\n width: 100%;\n }\n\n &.hds-button--mobile-full {\n @media (--before-medium) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: Variants\n */\n\n &.hds-button--primary {\n background-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n\n &:hover {\n background-color: var(--hds-brand-colors-signature-hover);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n }\n\n &.hds-button--secondary {\n background-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover {\n background-color: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background-color: var(--hds-brand-colors-darker);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-primary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border-color: var(--hds-brand-colors-dark);\n }\n }\n\n &.hds-button--outline-secondary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-white {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n }\n }\n\n /**\n * State: Disabled\n */\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n &.hds-button--primary,\n &.hds-button--secondary {\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n outline: 0;\n box-shadow: none;\n cursor: default;\n }\n\n &.hds-button--outline-primary,\n &.hds-button--outline-secondary {\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: transparent;\n cursor: default;\n }\n }\n\n /**\n * Variant: Icon only\n * TODO: Support text + icon on either left or right side.\n * See button component in digdir/designsystemet and nav/aksel\n */\n &.hds-button--icon-only {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n /**\n * Modifiers: sizes\n *\n * TODO: Consider/figure out using css variables for these values\n * must make sense, not just choosing a value that matches for the sake of it\n */\n\n &.hds-button--small {\n height: 44px;\n width: 44px;\n\n & * {\n height: 24px;\n width: 24px;\n }\n }\n\n &.hds-button--medium {\n height: 50px;\n width: 50px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n\n &.hds-button--large {\n height: 58px;\n width: 58px;\n\n & * {\n height: 32px;\n width: 32px;\n }\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":[]}
|
package/dist/card.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.hds-card{background:var(--hds-brand-colors-lighter);border-radius:var(--hds-border-radius);transition:transform var(--hds-micro-animation-duration-normal);color:var(--hds-ui-colors-black);flex-direction:column;display:flex;position:relative}.hds-card:hover{box-shadow:0 1px 3px rgba(0,0,0,.12)}.hds-card:hover:after{opacity:1}.hds-card .hds-card__media{width:-
|
|
2
|
-
/*# sourceMappingURL=./card.css.map */
|
|
1
|
+
.hds-card{border-bottom:initial;-webkit-text-decoration:initial;text-decoration:initial;background:var(--hds-brand-colors-lighter);border-radius:var(--hds-border-radius);transition:transform var(--hds-micro-animation-duration-normal);color:var(--hds-ui-colors-black);flex-direction:column;display:flex;position:relative}.hds-card:hover{box-shadow:0 1px 3px rgba(0,0,0,.12)}.hds-card:hover:after{opacity:1}.hds-card .hds-card__media{width:-moz-fit-content;width:fit-content}.hds-card .hds-card__media .hds-card__media__img{width:100%}.hds-card .hds-card__body{padding:var(--hds-spacing-medium-2)}.hds-card .hds-card__body:hover{color:initial}.hds-card .hds-card__body-header{margin-top:0;margin-bottom:0}.hds-card .hds-card__body-header-overline{font-size:var(--hds-font-size-technical-title);color:var(--hds-brand-colors-dark);display:block}.hds-card .hds-card__body-header-title{font-size:var(--hds-brand-font-size-h2-min);font-weight:var(--hds-font-weight-header-h3);line-height:var(--hds-spacing-medium-4)}.hds-card .hds-card__body-action-arrow{background-image:url("data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.7891 5.25229L11.0859 5.92026C10.9102 6.09604 10.9102 6.37729 11.0859 6.51791L16.5352 11.9671H4.54688C4.30078 11.9671 4.125 12.1781 4.125 12.389V13.3734C4.125 13.6195 4.30078 13.7953 4.54688 13.7953H16.5352L11.0859 19.2796C10.9102 19.4203 10.9102 19.7015 11.0859 19.8773L11.7891 20.5453C11.9297 20.721 12.2109 20.721 12.3867 20.5453L19.7344 13.1976C19.9102 13.0218 19.9102 12.7757 19.7344 12.5999L12.3867 5.25229C12.2109 5.07651 11.9297 5.07651 11.7891 5.25229Z\" fill=\"black\"/></svg>");border-bottom:none;width:20px;height:20px;display:block}
|
package/dist/card.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AACA,
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AACA,gUAWE,qDAGE,gCAKF,oEAGE,4DAKF,8DAGE,8CAKF,8DAKA,0IAMA,wKAMA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/card.css"],"sourcesContent":["/* stylelint-disable selector-class-pattern */\n.hds-card {\n position: relative;\n border-bottom: initial;\n text-decoration: initial;\n background: var(--hds-brand-colors-lighter);\n border-radius: var(--hds-border-radius);\n transition: transform var(--hds-micro-animation-duration-normal);\n display: flex;\n flex-direction: column;\n color: var(--hds-ui-colors-black);\n\n &:hover {\n box-shadow: 0 1px 3px 0 rgba(0 0 0 / 12%);\n\n &::after {\n opacity: 1;\n }\n }\n\n .hds-card__media {\n width: fit-content;\n\n .hds-card__media__img {\n width: 100%;\n }\n }\n\n .hds-card__body {\n padding: var(--hds-spacing-medium-2);\n\n &:hover {\n color: initial;\n }\n }\n\n .hds-card__body-header {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n .hds-card__body-header-overline {\n display: block;\n font-size: var(--hds-font-size-technical-title);\n color: var(--hds-brand-colors-dark);\n }\n\n .hds-card__body-header-title {\n font-size: var(--hds-brand-font-size-h2-min);\n font-weight: var(--hds-font-weight-header-h3);\n line-height: var(--hds-spacing-medium-4);\n }\n\n .hds-card__body-action-arrow {\n background-image: url('data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.7891 5.25229L11.0859 5.92026C10.9102 6.09604 10.9102 6.37729 11.0859 6.51791L16.5352 11.9671H4.54688C4.30078 11.9671 4.125 12.1781 4.125 12.389V13.3734C4.125 13.6195 4.30078 13.7953 4.54688 13.7953H16.5352L11.0859 19.2796C10.9102 19.4203 10.9102 19.7015 11.0859 19.8773L11.7891 20.5453C11.9297 20.721 12.2109 20.721 12.3867 20.5453L19.7344 13.1976C19.9102 13.0218 19.9102 12.7757 19.7344 12.5999L12.3867 5.25229C12.2109 5.07651 11.9297 5.07651 11.7891 5.25229Z\" fill=\"black\"/></svg>');\n width: 20px;\n height: 20px;\n display: block;\n border-bottom: none;\n }\n}\n"],"names":[]}
|
package/dist/classnames.d.ts
CHANGED
|
@@ -181,4 +181,7 @@ export type ClassNames =
|
|
|
181
181
|
| "hds-warning-banner__title-trigger"
|
|
182
182
|
| "hds-warning-banner__title-trigger--icon"
|
|
183
183
|
| "hds-warning-banner__title-trigger--icon-chevron"
|
|
184
|
-
| "hds-warning-banner--closed"
|
|
184
|
+
| "hds-warning-banner--closed"
|
|
185
|
+
| "hds-prose"
|
|
186
|
+
| "hds-prose--small"
|
|
187
|
+
| "hds-prose--darkmode";
|
package/dist/container.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.hds-container{padding:0 var(--hds-spacing-small-4);width:100%;margin:0 auto;display:block}@media (min-width:720px){.hds-container{max-width:590px;padding:0}}@media (min-width:940px){.hds-container{padding:0 var(--hds-spacing-medium-3);max-width:1200px}}@media (min-width:720px){.hds-container.hds-container--default{max-width:590px;padding:0}}@media (min-width:940px){.hds-container.hds-container--default{padding:0 var(--hds-spacing-medium-3);max-width:1200px}}@media (min-width:720px){.hds-container.hds-container--slim{max-width:590px;padding:0}}@media (min-width:940px){.hds-container.hds-container--slim{padding:0 var(--hds-spacing-medium-3);max-width:762px}}.hds-container.hds-container--pt{padding-top:var(--hds-spacing-small-3)}.hds-container.hds-container--pb{padding-bottom:var(--hds-spacing-small-3)}.hds-container.hds-container--mt{margin-top:var(--hds-spacing-small-3)}.hds-container.hds-container--mb{margin-bottom:var(--hds-spacing-small-3)}@media (min-width:720px){.hds-container.hds-container--pt{padding-top:var(--hds-spacing-medium-3)}.hds-container.hds-container--pb{padding-bottom:var(--hds-spacing-medium-3)}.hds-container.hds-container--mt{margin-top:var(--hds-spacing-medium-3)}.hds-container.hds-container--mb{margin-bottom:var(--hds-spacing-medium-3)}}@media (min-width:940px){.hds-container.hds-container--mt{margin-top:var(--hds-spacing-large-1)}.hds-container.hds-container--mb{margin-bottom:var(--hds-spacing-large-1)}}@media (min-width:1200px){.hds-container.hds-container--pt{padding-top:var(--hds-spacing-medium-4)}.hds-container.hds-container--pb{padding-bottom:var(--hds-spacing-medium-4)}}
|
|
2
|
-
/*# sourceMappingURL=./container.css.map */
|
|
1
|
+
.hds-container{padding:0 var(--hds-spacing-small-4);width:100%;margin:0 auto;display:block}@media (min-width:720px){.hds-container{max-width:590px;padding:0}}@media (min-width:940px){.hds-container{padding:0 var(--hds-spacing-medium-3);max-width:1200px}}@media (min-width:720px){.hds-container.hds-container--default{max-width:590px;padding:0}}@media (min-width:940px){.hds-container.hds-container--default{padding:0 var(--hds-spacing-medium-3);max-width:1200px}}@media (min-width:720px){.hds-container.hds-container--slim{max-width:590px;padding:0}}@media (min-width:940px){.hds-container.hds-container--slim{padding:0 var(--hds-spacing-medium-3);max-width:762px}}.hds-container.hds-container--pt{padding-top:var(--hds-spacing-small-3)}.hds-container.hds-container--pb{padding-bottom:var(--hds-spacing-small-3)}.hds-container.hds-container--mt{margin-top:var(--hds-spacing-small-3)}.hds-container.hds-container--mb{margin-bottom:var(--hds-spacing-small-3)}@media (min-width:720px){.hds-container.hds-container--pt{padding-top:var(--hds-spacing-medium-3)}.hds-container.hds-container--pb{padding-bottom:var(--hds-spacing-medium-3)}.hds-container.hds-container--mt{margin-top:var(--hds-spacing-medium-3)}.hds-container.hds-container--mb{margin-bottom:var(--hds-spacing-medium-3)}}@media (min-width:940px){.hds-container.hds-container--mt{margin-top:var(--hds-spacing-large-1)}.hds-container.hds-container--mb{margin-bottom:var(--hds-spacing-large-1)}}@media (min-width:1200px){.hds-container.hds-container--pt{padding-top:var(--hds-spacing-medium-4)}.hds-container.hds-container--pb{padding-bottom:var(--hds-spacing-medium-4)}}
|
package/dist/container.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAEA,2FASI,yBAAmB,0CAMnB,yBAAkB,uEANlB,yBAAmB,iEAMnB,yBAAkB,8FAQlB,yBAAmB,8DAMnB,yBAAkB,0FAWpB,wEAIA,2EAIA,uEAIA,0EAKA,yBACE,yEAIA,4EAIA,wEAIA,4EAMF,yBACE,uEAIA,2EAMF,0BACE,yEAIA","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: 0 auto;\n padding: 0 var(--hds-spacing-small-4);\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-medium-3);\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-medium-3);\n }\n }\n\n /**\n * Vertical spacing\n * padding and margin\n */\n\n &.hds-container--pt {\n padding-top: var(--hds-spacing-small-3);\n }\n\n &.hds-container--pb {\n padding-bottom: var(--hds-spacing-small-3);\n }\n\n &.hds-container--mt {\n margin-top: var(--hds-spacing-small-3);\n }\n\n &.hds-container--mb {\n margin-bottom: var(--hds-spacing-small-3);\n }\n\n /* 720px - max-width: 590px */\n @media (--medium) {\n &.hds-container--pt {\n padding-top: var(--hds-spacing-medium-3);\n }\n\n &.hds-container--pb {\n padding-bottom: var(--hds-spacing-medium-3);\n }\n\n &.hds-container--mt {\n margin-top: var(--hds-spacing-medium-3);\n }\n\n &.hds-container--mb {\n margin-bottom: var(--hds-spacing-medium-3);\n }\n }\n\n /* 940px - max-width: 762px 36px gutters */\n @media (--large) {\n &.hds-container--mt {\n margin-top: var(--hds-spacing-large-1);\n }\n\n &.hds-container--mb {\n margin-bottom: var(--hds-spacing-large-1);\n }\n }\n\n /* 1200px - max-width: 762px 36px gutters */\n @media (--xlarge) {\n &.hds-container--pt {\n padding-top: var(--hds-spacing-medium-4);\n }\n\n &.hds-container--pb {\n padding-bottom: var(--hds-spacing-medium-4);\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":[]}
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.hds-description-list{font:var(--hds-typography-body);
|
|
2
|
-
/*# sourceMappingURL=./description-list.css.map */
|
|
1
|
+
:where(.hds-list){margin:0}.hds-description-list{font:var(--hds-typography-body);padding-left:0;list-style:none}.hds-description-list dt{font:var(--hds-typography-body-title)}.hds-description-list :is(dt,div):not(:first-of-type){margin-top:var(--hds-spacing-small-3)}.hds-description-list dd{margin-left:0}.hds-description-list dd{margin-top:2px}.hds-description-list.hds-description-list--vertical dd{margin-top:2px}.hds-description-list.hds-description-list--horizontal dt{margin-right:var(--hds-spacing-small-2);display:inline-block}.hds-description-list.hds-description-list--horizontal dd{margin-top:0;display:inline}.hds-description-list.hds-description-list--horizontal dd:after{content:"\a ";white-space:pre}.hds-description-list.hds-description-list--horizontal :is(dt,dd) *{display:inline}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AACA,2BAIA,qFAKE,+DASA,4FAIA,uCAME,wCAAA,uEAMA,uHAKA,sFAIE,8FAUF","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/list/description-list.css"],"sourcesContent":["/* Reset outer margin from the browser defaults, but let consumers easily override it */\n:where(.hds-list) {\n margin: 0;\n}\n\n.hds-description-list {\n list-style: none;\n padding-left: 0;\n font: var(--hds-typography-body);\n\n & dt {\n font: var(--hds-typography-body-title);\n }\n\n /**\n * Spacing between each item\n * a description list can either have `div` wrapping the groups of `dt` and `dd`\n * or just the `dt` and `dd` as a flat list next to each other\n */\n & :is(dt, div):not(:first-of-type) {\n margin-top: var(--hds-spacing-small-3);\n }\n\n & dd {\n margin-left: 0;\n }\n\n &, /* Default */\n &.hds-description-list--vertical {\n & dd {\n margin-top: 2px;\n }\n }\n\n &.hds-description-list--horizontal {\n & dt {\n display: inline-block;\n margin-right: var(--hds-spacing-small-2);\n }\n\n & dd {\n display: inline;\n margin-top: 0;\n\n &::after {\n content: \"\\a\";\n white-space: pre;\n }\n }\n\n /**\n * When a non-text element is inside it will mess up the layout\n * if has `display: block` and/or some margin\n */\n & :is(dt, dd) * {\n display: inline;\n }\n }\n}\n"],"names":[]}
|
package/dist/flex.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.hds-flex>*{margin-bottom:var(--hds-spacing-small-1)}@media (max-width:
|
|
2
|
-
/*# sourceMappingURL=./flex.css.map */
|
|
1
|
+
.hds-flex>*{margin-bottom:var(--hds-spacing-small-1)}@media (max-width:939.999px){.hds-flex>*:last-of-type{margin-bottom:0}}@media (max-width:939.999px){.hds-flex--gutter-large-mobile>*{margin-bottom:var(--hds-spacing-small-4)}.hds-flex--gutter-larger-mobile>*{margin-bottom:var(--hds-spacing-medium-2)}.hds-flex--gutter-largest-mobile>*{margin-bottom:var(--hds-spacing-medium-4)}}@media (min-width:940px){.hds-flex{display:flex}.hds-flex>*{margin-right:var(--hds-spacing-small-1);flex:1;margin-bottom:0}.hds-flex>*:last-of-type{margin-right:0}}.hds-flex--variable-height{align-items:flex-start}.hds-flex--gutter-large-desktop>*{margin-right:var(--hds-spacing-small-4)}.hds-flex--gutter-larger-desktop>*{margin-right:var(--hds-spacing-medium-2)}.hds-flex--gutter-largest-desktop>*{margin-right:var(--hds-spacing-medium-4)}.hds-flex--gutter-medium-desktop>*{margin-right:var(--hds-spacing-small-2)}.hds-flex--twos,.hds-flex--thirds,.hds-flex--fourths,.hds-flex--two-one,.hds-flex--one-two{flex-wrap:wrap}:is(.hds-flex--twos,.hds-flex--thirds,.hds-flex--fourths,.hds-flex--two-one,.hds-flex--one-two)>*{margin-bottom:var(--hds-spacing-small-1)}.hds-flex--twos>*{min-width:calc(50% - (var(--hds-spacing-small-1)/2));max-width:calc(50% - (var(--hds-spacing-small-1)/2))}.hds-flex--twos>*:nth-of-type(2n){margin-right:0}.hds-flex--twos>*:nth-child(odd):nth-last-child(-n+2){margin-bottom:0}.hds-flex--twos>*:nth-child(odd):nth-last-child(-n+2)~*{margin-bottom:0}.hds-flex--two-one>*{min-width:calc((200%/3) - (var(--hds-spacing-small-1)/2));max-width:calc((200%/3) - (var(--hds-spacing-small-1)/2))}.hds-flex--two-one>*:nth-of-type(2n){min-width:calc((100%/3) - (var(--hds-spacing-small-1)/2));max-width:calc((100%/3) - (var(--hds-spacing-small-1)/2));margin-right:0}.hds-flex--two-one>*:nth-child(odd):nth-last-child(-n+2){margin-bottom:0}.hds-flex--two-one>*:nth-child(odd):nth-last-child(-n+2)~*{margin-bottom:0}.hds-flex--one-two>*{min-width:calc((100%/3) - (var(--hds-spacing-small-1)/2));max-width:calc((100%/3) - (var(--hds-spacing-small-1)/2))}.hds-flex--one-two>*:nth-of-type(2n){min-width:calc((200%/3) - (var(--hds-spacing-small-1)/2));max-width:calc((200%/3) - (var(--hds-spacing-small-1)/2));margin-right:0}.hds-flex--one-two>*:nth-child(odd):nth-last-child(-n+2){margin-bottom:0}.hds-flex--one-two>*:nth-child(odd):nth-last-child(-n+2)~*{margin-bottom:0}.hds-flex--thirds>*{min-width:calc((100%/3) - (var(--hds-spacing-small-1)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-small-1)*2/3))}.hds-flex--thirds>*:nth-of-type(3n){margin-right:0}.hds-flex--thirds>*:nth-child(3n+1):nth-last-child(-n+3){margin-bottom:0}.hds-flex--thirds>*:nth-child(3n+1):nth-last-child(-n+3)~*{margin-bottom:0}.hds-flex--fourths>*{min-width:calc(25% - (var(--hds-spacing-small-1)*3/4));max-width:calc(25% - (var(--hds-spacing-small-1)*3/4))}.hds-flex--fourths>*:nth-of-type(4n){margin-right:0}.hds-flex--fourths>*:nth-child(4n+1):nth-last-child(-n+4){margin-bottom:0}.hds-flex--fourths>*:nth-child(4n+1):nth-last-child(-n+4)~*{margin-bottom:0}.hds-flex--gutter-medium-desktop.hds-flex--twos>*{min-width:calc(50% - (var(--hds-spacing-small-2)/2));max-width:calc(50% - (var(--hds-spacing-small-2)/2));margin-bottom:var(--hds-spacing-small-2)}.hds-flex--gutter-medium-desktop.hds-flex--thirds>*{min-width:calc((100%/3) - (var(--hds-spacing-small-2)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-small-2)*2/3));margin-bottom:var(--hds-spacing-small-2)}.hds-flex--gutter-medium-desktop.hds-flex--fourths>*{min-width:calc(25% - (var(--hds-spacing-small-2)*3/4));max-width:calc(25% - (var(--hds-spacing-small-2)*3/4));margin-bottom:var(--hds-spacing-small-2)}.hds-flex--gutter-medium-desktop.hds-flex--two-one>*{min-width:calc((200%/3) - (var(--hds-spacing-small-2)/3));max-width:calc((200%/3) - (var(--hds-spacing-small-2)/3));margin-bottom:var(--hds-spacing-small-2)}.hds-flex--gutter-medium-desktop.hds-flex--two-one>*:nth-of-type(2n){min-width:calc((100%/3) - (var(--hds-spacing-small-2)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-small-2)*2/3));margin-right:0}.hds-flex--gutter-medium-desktop.hds-flex--one-two>*{min-width:calc((100%/3) - (var(--hds-spacing-small-2)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-small-2)*2/3));margin-bottom:var(--hds-spacing-small-2)}.hds-flex--gutter-medium-desktop.hds-flex--one-two>*:nth-of-type(2n){min-width:calc((200%/3) - (var(--hds-spacing-small-2)/3));max-width:calc((200%/3) - (var(--hds-spacing-small-2)/3));margin-right:0}.hds-flex--gutter-large-desktop.hds-flex--twos>*{min-width:calc(50% - (var(--hds-spacing-small-4)/2));max-width:calc(50% - (var(--hds-spacing-small-4)/2));margin-bottom:var(--hds-spacing-small-4)}.hds-flex--gutter-large-desktop.hds-flex--thirds>*{min-width:calc((100%/3) - (var(--hds-spacing-small-4)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-small-4)*2/3));margin-bottom:var(--hds-spacing-small-4)}.hds-flex--gutter-large-desktop.hds-flex--fourths>*{min-width:calc(25% - (var(--hds-spacing-small-4)*3/4));max-width:calc(25% - (var(--hds-spacing-small-4)*3/4));margin-bottom:var(--hds-spacing-small-4)}.hds-flex--gutter-large-desktop.hds-flex--two-one>*{min-width:calc((200%/3) - (var(--hds-spacing-small-4)/3));max-width:calc((200%/3) - (var(--hds-spacing-small-4)/3));margin-bottom:var(--hds-spacing-small-4)}.hds-flex--gutter-large-desktop.hds-flex--two-one>*:nth-of-type(2n){min-width:calc((100%/3) - (var(--hds-spacing-small-4)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-small-4)*2/3));margin-right:0}.hds-flex--gutter-large-desktop.hds-flex--one-two>*{min-width:calc((100%/3) - (var(--hds-spacing-small-4)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-small-4)*2/3));margin-bottom:var(--hds-spacing-small-4)}.hds-flex--gutter-large-desktop.hds-flex--one-two>*:nth-of-type(2n){min-width:calc((200%/3) - (var(--hds-spacing-small-4)/3));max-width:calc((200%/3) - (var(--hds-spacing-small-4)/3));margin-right:0}.hds-flex--gutter-larger-desktop.hds-flex--twos>*{min-width:calc(50% - (var(--hds-spacing-medium-2)/2));max-width:calc(50% - (var(--hds-spacing-medium-2)/2));margin-bottom:var(--hds-spacing-medium-2)}.hds-flex--gutter-larger-desktop.hds-flex--thirds>*{min-width:calc((100%/3) - (var(--hds-spacing-medium-2)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-medium-2)*2/3));margin-bottom:var(--hds-spacing-medium-2)}.hds-flex--gutter-larger-desktop.hds-flex--fourths>*{min-width:calc(25% - (var(--hds-spacing-medium-2)*3/4));max-width:calc(25% - (var(--hds-spacing-medium-2)*3/4));margin-bottom:var(--hds-spacing-medium-2)}.hds-flex--gutter-larger-desktop.hds-flex--two-one>*{min-width:calc((200%/3) - (var(--hds-spacing-medium-2)/3));max-width:calc((200%/3) - (var(--hds-spacing-medium-2)/3));margin-bottom:var(--hds-spacing-medium-2)}.hds-flex--gutter-larger-desktop.hds-flex--two-one>*:nth-of-type(2n){min-width:calc((100%/3) - (var(--hds-spacing-medium-2)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-medium-2)*2/3));margin-right:0}.hds-flex--gutter-larger-desktop.hds-flex--one-two>*{min-width:calc((100%/3) - (var(--hds-spacing-medium-2)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-medium-2)*2/3));margin-bottom:var(--hds-spacing-medium-2)}.hds-flex--gutter-larger-desktop.hds-flex--one-two>*:nth-of-type(2n){min-width:calc((200%/3) - (var(--hds-spacing-medium-2)/3));max-width:calc((200%/3) - (var(--hds-spacing-medium-2)/3));margin-right:0}.hds-flex--gutter-largest-desktop.hds-flex--twos>*{min-width:calc(50% - (var(--hds-spacing-medium-4)/2));max-width:calc(50% - (var(--hds-spacing-medium-4)/2));margin-bottom:var(--hds-spacing-medium-4)}.hds-flex--gutter-largest-desktop.hds-flex--thirds>*{min-width:calc((100%/3) - (var(--hds-spacing-medium-4)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-medium-4)*2/3));margin-bottom:var(--hds-spacing-medium-4)}.hds-flex--gutter-largest-desktop.hds-flex--fourths>*{min-width:calc(25% - (var(--hds-spacing-medium-4)*3/4));max-width:calc(25% - (var(--hds-spacing-medium-4)*3/4));margin-bottom:var(--hds-spacing-medium-4)}.hds-flex--gutter-largest-desktop.hds-flex--two-one>*{min-width:calc((200%/3) - (var(--hds-spacing-medium-4)/3));max-width:calc((200%/3) - (var(--hds-spacing-medium-4)/3));margin-bottom:var(--hds-spacing-medium-4)}.hds-flex--gutter-largest-desktop.hds-flex--two-one>*:nth-of-type(2n){min-width:calc((100%/3) - (var(--hds-spacing-medium-4)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-medium-4)*2/3));margin-right:0}.hds-flex--gutter-largest-desktop.hds-flex--one-two>*{min-width:calc((100%/3) - (var(--hds-spacing-medium-4)*2/3));max-width:calc((100%/3) - (var(--hds-spacing-medium-4)*2/3));margin-bottom:var(--hds-spacing-medium-4)}.hds-flex--gutter-largest-desktop.hds-flex--one-two>*:nth-of-type(2n){min-width:calc((200%/3) - (var(--hds-spacing-medium-4)/3));max-width:calc((200%/3) - (var(--hds-spacing-medium-4)/3));margin-right:0}
|
package/dist/flex.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAEE,qDAGE,yBACE,0CAON,yBACE,0EAIA,4EAIA,8EAKF,yBACE,uBAGE,2EAKE,yCAON,kDAIA,0EAIA,4EAIA,6EAIA,2EAIA,0GAOE,2IAQF,4HAIE,iDAIA,sEAAA,wEAMF,yIAIE,wKAMA,yEAAA,2EAMF,yIAIE,wKAMA,yEAAA,2EAMF,4IAIE,mDAIA,yEAAA,2EAMF,mIAIE,oDAIA,0EAAA,4EAOF,qMAMA,qNAMA,4MAMA,kNAKE,4MAOF,sNAKE,wMAQF,oMAMA,oNAMA,2MAMA,iNAKE,2MAOF,qNAKE,uMAQF,wMAMA,wNAMA,+MAMA,qNAKE,8MAOF,yNAKE,0MAQF,yMAMA,yNAMA,gNAMA,sNAKE,+MAOF,0NAKE","sources":["../src/layout/flex/flex.css"],"sourcesContent":["/* stylelint-disable length-zero-no-unit */\n.hds-flex {\n & > * {\n margin-bottom: var(--hds-spacing-small-1);\n\n @media (width <=939px) {\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n }\n}\n\n@media (width <=939px) {\n .hds-flex--gutter-large-mobile > * {\n margin-bottom: var(--hds-spacing-small-4);\n }\n\n .hds-flex--gutter-larger-mobile > * {\n margin-bottom: var(--hds-spacing-medium-2);\n }\n\n .hds-flex--gutter-largest-mobile > * {\n margin-bottom: var(--hds-spacing-medium-4);\n }\n}\n\n@media (width >=940px) {\n .hds-flex {\n display: flex;\n\n & > * {\n flex: 1;\n margin-right: var(--hds-spacing-small-1);\n margin-bottom: 0;\n\n &:last-of-type {\n margin-right: 0;\n }\n }\n }\n}\n\n.hds-flex--variable-height {\n align-items: flex-start;\n}\n\n.hds-flex--gutter-large-desktop > * {\n margin-right: var(--hds-spacing-small-4);\n}\n\n.hds-flex--gutter-larger-desktop > * {\n margin-right: var(--hds-spacing-medium-2);\n}\n\n.hds-flex--gutter-largest-desktop > * {\n margin-right: var(--hds-spacing-medium-4);\n}\n\n.hds-flex--gutter-medium-desktop > * {\n margin-right: var(--hds-spacing-small-2);\n}\n\n.hds-flex--twos,\n.hds-flex--thirds,\n.hds-flex--fourths,\n.hds-flex--two-one,\n.hds-flex--one-two {\n flex-wrap: wrap;\n\n & > * {\n margin-bottom: var(--hds-spacing-small-1);\n }\n}\n\n/* Calculation on the widths follows this logic:\n Percentage of width minus (margins between items divided by number of items)\n */\n.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc(50% - (var(--hds-spacing-small-1) / 2));\n\n &:nth-of-type(2n) {\n margin-right: 0;\n }\n\n &:nth-child(2n + 1):nth-last-child(-n + 2),\n &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n margin-bottom: 0px;\n }\n}\n\n.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-1) / 2));\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-1) / 2));\n margin-right: 0;\n }\n\n &:nth-child(2n + 1):nth-last-child(-n + 2),\n &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n margin-bottom: 0px;\n }\n}\n\n.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-1) / 2));\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-1) / 2));\n margin-right: 0;\n }\n\n &:nth-child(2n + 1):nth-last-child(-n + 2),\n &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n margin-bottom: 0px;\n }\n}\n\n.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-1) * 2 / 3)); /* 3 * 2 / 3 = 2 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-1) * 2 / 3));\n\n &:nth-of-type(3n) {\n margin-right: 0;\n }\n\n &:nth-child(3n + 1):nth-last-child(-n + 3),\n &:nth-child(3n + 1):nth-last-child(-n + 3) ~ * {\n margin-bottom: 0px;\n }\n}\n\n.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-small-1) * 3 / 4)); /* 3 * 3 / 4 = 2.25 */\n max-width: calc(25% - (var(--hds-spacing-small-1) * 3 / 4));\n\n &:nth-of-type(4n) {\n margin-right: 0;\n }\n\n &:nth-child(4n + 1):nth-last-child(-n + 4),\n &:nth-child(4n + 1):nth-last-child(-n + 4) ~ * {\n margin-bottom: 0px;\n }\n}\n\n/* Medium gutter desktop calculations */\n.hds-flex--gutter-medium-desktop.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-small-2) / 2)); /* 18 / 2 = 9 */\n max-width: calc(50% - (var(--hds-spacing-small-2) / 2));\n margin-bottom: var(--hds-spacing-small-2);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3));\n max-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3));\n margin-bottom: var(--hds-spacing-small-2);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-small-2) * 3 / 4));\n max-width: calc(25% - (var(--hds-spacing-small-2) * 3 / 4));\n margin-bottom: var(--hds-spacing-small-2);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-2) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-2) / 3));\n margin-bottom: var(--hds-spacing-small-2);\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3));\n margin-right: 0;\n }\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3));\n margin-bottom: var(--hds-spacing-small-2);\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-2) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-2) / 3));\n margin-right: 0;\n }\n}\n\n/* Large gutter desktop calculations */\n.hds-flex--gutter-large-desktop.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-small-4) / 2)); /* 18 / 2 = 9 */\n max-width: calc(50% - (var(--hds-spacing-small-4) / 2));\n margin-bottom: var(--hds-spacing-small-4);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3));\n margin-bottom: var(--hds-spacing-small-4);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-small-4) * 3 / 4)); /* 18 * 3 / 4 = 13.5 */\n max-width: calc(25% - (var(--hds-spacing-small-4) * 3 / 4));\n margin-bottom: var(--hds-spacing-small-4);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-4) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-4) / 3));\n margin-bottom: var(--hds-spacing-small-4);\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3));\n margin-right: 0;\n }\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3));\n margin-bottom: var(--hds-spacing-small-4);\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-4) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-4) / 3));\n margin-right: 0;\n }\n}\n\n/* Larger gutter desktop calculations */\n.hds-flex--gutter-larger-desktop.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-medium-2) / 2)); /* 48 / 2 = 24 */\n max-width: calc(50% - (var(--hds-spacing-medium-2) / 2));\n margin-bottom: var(--hds-spacing-medium-2);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3)); /* 48 * 2 / 3 = 32 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3));\n margin-bottom: var(--hds-spacing-medium-2);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-medium-2) * 3 / 4)); /* 48 * 3 / 4 = 36 */\n max-width: calc(25% - (var(--hds-spacing-medium-2) * 3 / 4));\n margin-bottom: var(--hds-spacing-medium-2);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-medium-2) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-medium-2) / 3));\n margin-bottom: var(--hds-spacing-medium-2);\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3));\n margin-right: 0;\n }\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3));\n margin-bottom: var(--hds-spacing-medium-2);\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-medium-2) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-medium-2) / 3));\n margin-right: 0;\n }\n}\n\n/* Largest gutter desktop calculations */\n.hds-flex--gutter-largest-desktop.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-medium-4) / 2)); /* 48 / 2 = 24 */\n max-width: calc(50% - (var(--hds-spacing-medium-4) / 2));\n margin-bottom: var(--hds-spacing-medium-4);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3)); /* 48 * 2 / 3 = 32 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3));\n margin-bottom: var(--hds-spacing-medium-4);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-medium-4) * 3 / 4)); /* 48 * 3 / 4 = 36 */\n max-width: calc(25% - (var(--hds-spacing-medium-4) * 3 / 4));\n margin-bottom: var(--hds-spacing-medium-4);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-medium-4) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-medium-4) / 3));\n margin-bottom: var(--hds-spacing-medium-4);\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3));\n margin-right: 0;\n }\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3));\n margin-bottom: var(--hds-spacing-medium-4);\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-medium-4) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-medium-4) / 3));\n margin-right: 0;\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAIE,qDAGE,6BACE,0CAON,6BACE,0EAIA,4EAIA,8EAKF,yBACE,uBAGE,2EAKE,yCAON,kDAIA,0EAIA,4EAIA,6EAIA,2EAIA,0GAOE,2IAQF,4HAIE,iDAIA,sEAAA,wEAMF,yIAIE,wKAMA,yEAAA,2EAMF,yIAIE,wKAMA,yEAAA,2EAMF,4IAIE,mDAIA,yEAAA,2EAMF,mIAIE,oDAIA,0EAAA,4EAOF,qMAMA,qNAMA,4MAMA,kNAKE,4MAOF,sNAKE,wMAQF,oMAMA,oNAMA,2MAMA,iNAKE,2MAOF,qNAKE,uMAQF,wMAMA,wNAMA,+MAMA,qNAKE,8MAOF,yNAKE,0MAQF,yMAMA,yNAMA,gNAMA,sNAKE,+MAOF,0NAKE","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/flex/flex.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/layout/flex/../../_custom-media.css"],"sourcesContent":["@import url(\"../../_custom-media.css\");\n\n/* stylelint-disable length-zero-no-unit */\n.hds-flex {\n & > * {\n margin-bottom: var(--hds-spacing-small-1);\n\n @media (--before-large) {\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n }\n}\n\n@media (--before-large) {\n .hds-flex--gutter-large-mobile > * {\n margin-bottom: var(--hds-spacing-small-4);\n }\n\n .hds-flex--gutter-larger-mobile > * {\n margin-bottom: var(--hds-spacing-medium-2);\n }\n\n .hds-flex--gutter-largest-mobile > * {\n margin-bottom: var(--hds-spacing-medium-4);\n }\n}\n\n@media (--large) {\n .hds-flex {\n display: flex;\n\n & > * {\n flex: 1;\n margin-right: var(--hds-spacing-small-1);\n margin-bottom: 0;\n\n &:last-of-type {\n margin-right: 0;\n }\n }\n }\n}\n\n.hds-flex--variable-height {\n align-items: flex-start;\n}\n\n.hds-flex--gutter-large-desktop > * {\n margin-right: var(--hds-spacing-small-4);\n}\n\n.hds-flex--gutter-larger-desktop > * {\n margin-right: var(--hds-spacing-medium-2);\n}\n\n.hds-flex--gutter-largest-desktop > * {\n margin-right: var(--hds-spacing-medium-4);\n}\n\n.hds-flex--gutter-medium-desktop > * {\n margin-right: var(--hds-spacing-small-2);\n}\n\n.hds-flex--twos,\n.hds-flex--thirds,\n.hds-flex--fourths,\n.hds-flex--two-one,\n.hds-flex--one-two {\n flex-wrap: wrap;\n\n & > * {\n margin-bottom: var(--hds-spacing-small-1);\n }\n}\n\n/* Calculation on the widths follows this logic:\n Percentage of width minus (margins between items divided by number of items)\n */\n.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc(50% - (var(--hds-spacing-small-1) / 2));\n\n &:nth-of-type(2n) {\n margin-right: 0;\n }\n\n &:nth-child(2n + 1):nth-last-child(-n + 2),\n &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n margin-bottom: 0px;\n }\n}\n\n.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-1) / 2));\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-1) / 2));\n margin-right: 0;\n }\n\n &:nth-child(2n + 1):nth-last-child(-n + 2),\n &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n margin-bottom: 0px;\n }\n}\n\n.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-1) / 2));\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-1) / 2)); /* 3 / 2 = 1.5 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-1) / 2));\n margin-right: 0;\n }\n\n &:nth-child(2n + 1):nth-last-child(-n + 2),\n &:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {\n margin-bottom: 0px;\n }\n}\n\n.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-1) * 2 / 3)); /* 3 * 2 / 3 = 2 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-1) * 2 / 3));\n\n &:nth-of-type(3n) {\n margin-right: 0;\n }\n\n &:nth-child(3n + 1):nth-last-child(-n + 3),\n &:nth-child(3n + 1):nth-last-child(-n + 3) ~ * {\n margin-bottom: 0px;\n }\n}\n\n.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-small-1) * 3 / 4)); /* 3 * 3 / 4 = 2.25 */\n max-width: calc(25% - (var(--hds-spacing-small-1) * 3 / 4));\n\n &:nth-of-type(4n) {\n margin-right: 0;\n }\n\n &:nth-child(4n + 1):nth-last-child(-n + 4),\n &:nth-child(4n + 1):nth-last-child(-n + 4) ~ * {\n margin-bottom: 0px;\n }\n}\n\n/* Medium gutter desktop calculations */\n.hds-flex--gutter-medium-desktop.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-small-2) / 2)); /* 18 / 2 = 9 */\n max-width: calc(50% - (var(--hds-spacing-small-2) / 2));\n margin-bottom: var(--hds-spacing-small-2);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3));\n max-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3));\n margin-bottom: var(--hds-spacing-small-2);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-small-2) * 3 / 4));\n max-width: calc(25% - (var(--hds-spacing-small-2) * 3 / 4));\n margin-bottom: var(--hds-spacing-small-2);\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-2) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-2) / 3));\n margin-bottom: var(--hds-spacing-small-2);\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3));\n margin-right: 0;\n }\n}\n\n.hds-flex--gutter-medium-desktop.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-2) * 2 / 3));\n margin-bottom: var(--hds-spacing-small-2);\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-2) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-2) / 3));\n margin-right: 0;\n }\n}\n\n/* Large gutter desktop calculations */\n.hds-flex--gutter-large-desktop.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-small-4) / 2)); /* 18 / 2 = 9 */\n max-width: calc(50% - (var(--hds-spacing-small-4) / 2));\n margin-bottom: var(--hds-spacing-small-4);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3));\n margin-bottom: var(--hds-spacing-small-4);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-small-4) * 3 / 4)); /* 18 * 3 / 4 = 13.5 */\n max-width: calc(25% - (var(--hds-spacing-small-4) * 3 / 4));\n margin-bottom: var(--hds-spacing-small-4);\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-4) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-4) / 3));\n margin-bottom: var(--hds-spacing-small-4);\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3));\n margin-right: 0;\n }\n}\n\n.hds-flex--gutter-large-desktop.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-small-4) * 2 / 3));\n margin-bottom: var(--hds-spacing-small-4);\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-small-4) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-small-4) / 3));\n margin-right: 0;\n }\n}\n\n/* Larger gutter desktop calculations */\n.hds-flex--gutter-larger-desktop.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-medium-2) / 2)); /* 48 / 2 = 24 */\n max-width: calc(50% - (var(--hds-spacing-medium-2) / 2));\n margin-bottom: var(--hds-spacing-medium-2);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3)); /* 48 * 2 / 3 = 32 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3));\n margin-bottom: var(--hds-spacing-medium-2);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-medium-2) * 3 / 4)); /* 48 * 3 / 4 = 36 */\n max-width: calc(25% - (var(--hds-spacing-medium-2) * 3 / 4));\n margin-bottom: var(--hds-spacing-medium-2);\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-medium-2) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-medium-2) / 3));\n margin-bottom: var(--hds-spacing-medium-2);\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3));\n margin-right: 0;\n }\n}\n\n.hds-flex--gutter-larger-desktop.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-2) * 2 / 3));\n margin-bottom: var(--hds-spacing-medium-2);\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-medium-2) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-medium-2) / 3));\n margin-right: 0;\n }\n}\n\n/* Largest gutter desktop calculations */\n.hds-flex--gutter-largest-desktop.hds-flex--twos > * {\n min-width: calc(50% - (var(--hds-spacing-medium-4) / 2)); /* 48 / 2 = 24 */\n max-width: calc(50% - (var(--hds-spacing-medium-4) / 2));\n margin-bottom: var(--hds-spacing-medium-4);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--thirds > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3)); /* 48 * 2 / 3 = 32 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3));\n margin-bottom: var(--hds-spacing-medium-4);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--fourths > * {\n min-width: calc(25% - (var(--hds-spacing-medium-4) * 3 / 4)); /* 48 * 3 / 4 = 36 */\n max-width: calc(25% - (var(--hds-spacing-medium-4) * 3 / 4));\n margin-bottom: var(--hds-spacing-medium-4);\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--two-one > * {\n min-width: calc((200% / 3) - (var(--hds-spacing-medium-4) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-medium-4) / 3));\n margin-bottom: var(--hds-spacing-medium-4);\n\n &:nth-of-type(2n) {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3));\n margin-right: 0;\n }\n}\n\n.hds-flex--gutter-largest-desktop.hds-flex--one-two > * {\n min-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3)); /* 18 * 2 / 3 = 12 */\n max-width: calc((100% / 3) - (var(--hds-spacing-medium-4) * 2 / 3));\n margin-bottom: var(--hds-spacing-medium-4);\n\n &:nth-of-type(2n) {\n min-width: calc((200% / 3) - (var(--hds-spacing-medium-4) / 3)); /* 18 / 3 = 6 */\n max-width: calc((200% / 3) - (var(--hds-spacing-medium-4) / 3));\n margin-right: 0;\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":[]}
|
package/dist/fonts.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
@font-face{font-family:Posten Sans;src:url(../assets/fonts/PostenSans-Light.woff2)format("woff2");font-display:swap;font-weight:300}@font-face{font-family:Posten Sans;src:url(../assets/fonts/PostenSans-Regular.woff2)format("woff2");font-display:swap;font-weight:400}@font-face{font-family:Posten Sans;src:url(../assets/fonts/PostenSans-Medium.woff2)format("woff2");font-display:swap;font-weight:500}@font-face{font-family:Posten Sans;src:url(../assets/fonts/PostenSans-Bold.woff2)format("woff2");font-display:swap;font-weight:700}@font-face{font-family:Posten Sans Light;src:url(../assets/fonts/PostenSans-Light.woff2)format("woff2");font-display:swap}@font-face{font-family:Posten Sans Regular;src:url(../assets/fonts/PostenSans-Regular.woff2)format("woff2");font-display:swap}@font-face{font-family:Posten Sans Medium;src:url(../assets/fonts/PostenSans-Medium.woff2)format("woff2");font-display:swap}@font-face{font-family:Posten Sans Bold;src:url(../assets/fonts/PostenSans-Bold.woff2)format("woff2");font-display:swap}
|
|
2
|
-
/*# sourceMappingURL=./fonts.css.map */
|
|
1
|
+
@font-face{font-family:Posten Sans;src:url(../assets/fonts/PostenSans-Light.woff2)format("woff2");font-display:swap;font-weight:300}@font-face{font-family:Posten Sans;src:url(../assets/fonts/PostenSans-Regular.woff2)format("woff2");font-display:swap;font-weight:400}@font-face{font-family:Posten Sans;src:url(../assets/fonts/PostenSans-Medium.woff2)format("woff2");font-display:swap;font-weight:500}@font-face{font-family:Posten Sans;src:url(../assets/fonts/PostenSans-Bold.woff2)format("woff2");font-display:swap;font-weight:700}@font-face{font-family:Posten Sans Light;src:url(../assets/fonts/PostenSans-Light.woff2)format("woff2");font-display:swap}@font-face{font-family:Posten Sans Regular;src:url(../assets/fonts/PostenSans-Regular.woff2)format("woff2");font-display:swap}@font-face{font-family:Posten Sans Medium;src:url(../assets/fonts/PostenSans-Medium.woff2)format("woff2");font-display:swap}@font-face{font-family:Posten Sans Bold;src:url(../assets/fonts/PostenSans-Bold.woff2)format("woff2");font-display:swap}
|
package/dist/fonts.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAMA,oIAOA,sIAOA,qIAOA,mIAUA,0HAMA,8HAMA,4HAMA","sources":["
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAMA,oIAOA,sIAOA,qIAOA,mIAUA,0HAMA,8HAMA,4HAMA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/fonts.css"],"sourcesContent":["/* https://caniuse.com/woff2 */\n\n/*\n Font weight with style linking\n https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/\n */\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Light.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 300;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Regular.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 400;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Medium.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 500;\n}\n\n@font-face {\n font-family: \"Posten Sans\";\n src: url(\"../assets/fonts/PostenSans-Bold.woff2\") format(\"woff2\");\n font-display: swap;\n font-weight: 700;\n}\n\n/**\n * Legacy font-face with an own family for each font\n */\n@font-face {\n font-family: \"Posten Sans Light\";\n src: url(\"../assets/fonts/PostenSans-Light.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Regular\";\n src: url(\"../assets/fonts/PostenSans-Regular.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Medium\";\n src: url(\"../assets/fonts/PostenSans-Medium.woff2\") format(\"woff2\");\n font-display: swap;\n}\n\n@font-face {\n font-family: \"Posten Sans Bold\";\n src: url(\"../assets/fonts/PostenSans-Bold.woff2\") format(\"woff2\");\n font-display: swap;\n}\n"],"names":[]}
|