@postenbring/hedwig-css 0.0.2 → 0.0.4

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.
@@ -0,0 +1,2 @@
1
+ .hds-badge{background-color:var(--hds-brand-colors-lighter);border:var(--hds-stroke-default)solid var(--hds-brand-colors-lighter);border-radius:var(--hds-border-radius);padding:var(--hds-spacing-small-1)var(--hds-spacing-small-2);color:var(--hds-brand-colors-dark);text-transform:uppercase;font-size:12px;line-height:1.1;font-family:var(--hds-fonts-posten-sans-medium);-moz-osx-font-smoothing:subpixel-antialiased;-webkit-font-smoothing:subpixel-antialiased;vertical-align:10%;display:inline-block}.hds-badge--small{padding:var(--hds-spacing-small-1)var(--hds-spacing-small-2)}.hds-badge--smaller{padding:2px var(--hds-spacing-small-1)}.hds-badge--primary{background-color:var(--hds-brand-colors-lighter);border-color:var(--hds-brand-colors-lighter);color:var(--hds-brand-colors-dark)}.hds-badge--dark{background-color:var(--hds-brand-colors-darker);border-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white)}.hds-badge--white{background-color:var(--hds-ui-colors-white);border-color:var(--hds-ui-colors-white);color:var(--hds-brand-colors-dark)}.hds-badge--warning{background-color:var(--hds-ui-colors-warning-yellow);border-color:var(--hds-ui-colors-warning-yellow);color:var(--hds-brand-link-colors-text)}
2
+ /*# sourceMappingURL=badge.css.map */
@@ -0,0 +1 @@
1
+ {"mappings":"ACIA,kfAuBE,+EAIA,2DAMA,qJAOA,8IAMA,yIAMA","sources":["badge/badge.css","packages/css/src/badge/badge.scss"],"sourcesContent":[".hds-badge {\n background-color: var(--hds-brand-colors-lighter);\n border: var(--hds-stroke-default) solid var(--hds-brand-colors-lighter);\n border-radius: var(--hds-border-radius);\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n color: var(--hds-brand-colors-dark);\n text-transform: uppercase;\n font-size: 12px;\n line-height: 1.1;\n font-family: var(--hds-fonts-posten-sans-medium);\n -moz-osx-font-smoothing: subpixel-antialiased;\n -webkit-font-smoothing: subpixel-antialiased;\n vertical-align: 10%;\n display: inline-block;\n}\n\n.hds-badge--small {\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n}\n\n.hds-badge--smaller {\n padding: 2px var(--hds-spacing-small-1);\n}\n\n.hds-badge--primary {\n background-color: var(--hds-brand-colors-lighter);\n border-color: var(--hds-brand-colors-lighter);\n color: var(--hds-brand-colors-dark);\n}\n\n.hds-badge--dark {\n background-color: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n}\n\n.hds-badge--white {\n background-color: var(--hds-ui-colors-white);\n border-color: var(--hds-ui-colors-white);\n color: var(--hds-brand-colors-dark);\n}\n\n.hds-badge--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n border-color: var(--hds-ui-colors-warning-yellow);\n color: var(--hds-brand-link-colors-text);\n}\n\n/*# sourceMappingURL=badge.css.map */\n","/**\n * Block\n */\n\n.hds-badge {\n display: inline-block;\n background-color: var(--hds-brand-colors-lighter);\n border: var(--hds-stroke-default) solid var(--hds-brand-colors-lighter);\n border-radius: var(--hds-border-radius);\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n color: var(--hds-brand-colors-dark);\n text-transform: uppercase;\n line-height: 1.1;\n font-size: 12px; /* For now, this might be changed later */\n font-family: var(--hds-fonts-posten-sans-medium);\n -moz-osx-font-smoothing: subpixel-antialiased;\n -webkit-font-smoothing: subpixel-antialiased;\n vertical-align: 10%;\n\n /**\n * Modifiers\n */\n\n /* Variations */\n\n /* Size variations */\n\n &--small {\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n }\n\n &--smaller {\n padding: 2px var(--hds-spacing-small-1);\n }\n\n /* Color variations */\n\n &--primary {\n /* Default */\n background-color: var(--hds-brand-colors-lighter);\n border-color: var(--hds-brand-colors-lighter);\n color: var(--hds-brand-colors-dark);\n }\n\n &--dark {\n background-color: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n }\n\n &--white {\n background-color: var(--hds-ui-colors-white);\n border-color: var(--hds-ui-colors-white);\n color: var(--hds-brand-colors-dark);\n }\n\n &--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n border-color: var(--hds-ui-colors-warning-yellow);\n color: var(--hds-brand-link-colors-text);\n }\n}\n"],"names":[],"version":3,"file":"badge.css.map"}
package/dist/base.css CHANGED
@@ -1,2 +1,2 @@
1
- .hds-theme-posten,.hds-theme-bring{box-sizing:border-box;font:var(--hds-typography-body);fill:var(--hds-ui-colors-black);color:var(--hds-ui-colors-black);cursor:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:var(--hds-ui-colors-white);line-height:1.4}
1
+ .hds-theme-posten,.hds-theme-bring{box-sizing:border-box;font:var(--hds-typography-body);fill:var(--hds-ui-colors-black);color:var(--hds-ui-colors-black);cursor:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:1.4}:is(.hds-theme-posten,.hds-theme-bring) body{background:var(--hds-ui-colors-white)}
2
2
  /*# sourceMappingURL=base.css.map */
package/dist/base.css.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"ACOA","sources":["base.css","packages/css/base.css"],"sourcesContent":[".hds-theme-posten, .hds-theme-bring {\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 cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background: var(--hds-ui-colors-white);\n line-height: 1.4;\n}\n\n/*# sourceMappingURL=base.css.map */\n","/*\n * Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n *\n * Scoped to the theme selectors, this way the global effects are only applied\n * where they are wanted\n */\n.hds-theme-posten,\n.hds-theme-bring {\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\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background: var(--hds-ui-colors-white);\n}\n"],"names":[],"version":3,"file":"base.css.map"}
1
+ {"mappings":"ACOA,2PAWE","sources":["base.css","packages/css/src/base.css"],"sourcesContent":[".hds-theme-posten, .hds-theme-bring {\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 cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n line-height: 1.4;\n}\n\n:is(.hds-theme-posten, .hds-theme-bring) body {\n background: var(--hds-ui-colors-white);\n}\n\n/*# sourceMappingURL=base.css.map */\n","/*\n * Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n *\n * Scoped to the theme selectors, this way the global effects are only applied\n * where they are wanted\n */\n.hds-theme-posten,\n.hds-theme-bring {\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 & body {\n background: var(--hds-ui-colors-white);\n }\n}\n"],"names":[],"version":3,"file":"base.css.map"}
@@ -1,2 +1,2 @@
1
- .hds-button{-webkit-font-smoothing:antialiased;-webkit-appearance:button;box-sizing:border-box;padding:var(--hds-spacing-small-3)var(--hds-spacing-medium-2);border-radius:var(--hds-border-radius);background:var(--hds-ui-colors-grey);border-width:0;border-color:var(--hds-ui-colors-grey);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text);font:var(--hds-typography-body-small);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);text-align:center;cursor:pointer;word-break:normal;display:inline-block}.hds-button:disabled,.hds-button[disabled],.hds-button[disabled]:active{cursor:default;color:var(--hds-ui-colors-dark-grey)!important;fill:var(--hds-ui-colors-dark-grey)!important;background:var(--hds-ui-colors-grey)!important;border-color:var(--hds-ui-colors-grey)!important;box-shadow:none!important;outline:0!important}.hds-button--large{height:58px;padding:19px 24px;font-size:18px}.hds-button--large i,.hds-button--large svg{margin-right:12px}.hds-button--medium{height:50px;padding:15px 20px;font-size:18px}.hds-button--medium i,.hds-button--medium svg{margin-right:10px}.hds-button--small{height:44px;padding:12px 16px;font-size:16px}.hds-button--small i,.hds-button--small svg{margin-right:8px}.hds-button--full{width:100%}@media (max-width:720px){.hds-button--mobile-full{width:100%}}.hds-button--primary{background:var(--hds-brand-colors-signature);border-color:var(--hds-brand-colors-signature);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text)}.hds-button--primary:hover,.hds-button--primary:active{background:var(--hds-brand-colors-signature-hover);border-color:var(--hds-brand-colors-signature);outline:0px solid var(--hds-brand-colors-signature-hover)}.hds-button--primary:active{background:var(--hds-brand-colors-signature)!important}.hds-button--secondary{background:var(--hds-brand-colors-darker);border-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.hds-button--secondary:hover,.hds-button--secondary:active{background:var(--hds-ui-colors-black);outline:0px solid var(--hds-ui-colors-black)}.hds-button--secondary:active{background:var(--hds-brand-colors-darker)!important}.hds-button--outline{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark);background:0 0}.hds-button--outline:disabled,.hds-button--outline[disabled],.hds-button--outline[disabled]:active{background:0 0!important}.hds-button--outline:hover,.hds-button--outline:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black);background:0 0}.hds-button--outline:active{border-color:var(--hds-ui-colors-dark-grey)}.hds-button--outline-white{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background:0 0}.hds-button--outline-white:hover,.hds-button--outline-white:active{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.hds-button--outline-primary{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background:0 0}.hds-button--outline-primary:hover,.hds-button--outline-primary:active{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark)}.hds-button--outline-primary:disabled,.hds-button--outline-primary[disabled],.hds-button--outline-primary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.hds-button--outline-secondary,.hds-button--outline-dark{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-darker);color:var(--hds-brand-colors-darker);fill:var(--hds-brand-colors-darker);outline-offset:3px;background:0 0}.hds-button--outline-secondary:hover,.hds-button--outline-dark:hover,.hds-button--outline-secondary:active,.hds-button--outline-dark:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border:var(--hds-stroke-thick)solid var(--hds-ui-colors-black)}.hds-button--outline-secondary:disabled,.hds-button--outline-dark:disabled,.hds-button--outline-secondary[disabled],[disabled].hds-button--outline-dark,.hds-button--outline-secondary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}
1
+ .hds-button{-webkit-font-smoothing:antialiased;-webkit-appearance:button;box-sizing:border-box;padding:var(--hds-spacing-small-3)var(--hds-spacing-medium-2);border-radius:var(--hds-border-radius);background:var(--hds-ui-colors-grey);border-width:0;border-color:var(--hds-ui-colors-grey);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text);font:var(--hds-typography-body-title);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);text-align:center;cursor:pointer;word-break:normal;display:inline-block}.hds-button:disabled,.hds-button[disabled],.hds-button[disabled]:active{cursor:default;color:var(--hds-ui-colors-dark-grey)!important;fill:var(--hds-ui-colors-dark-grey)!important;background:var(--hds-ui-colors-grey)!important;border-color:var(--hds-ui-colors-grey)!important;box-shadow:none!important;outline:0!important}.hds-button--large{height:58px;padding:16px 24px;font-size:18px;line-height:26px}.hds-button--large i,.hds-button--large svg{margin-right:12px}.hds-button--medium{height:50px;padding:12px 20px;font-size:18px;line-height:26px}.hds-button--medium i,.hds-button--medium svg{margin-right:10px}.hds-button--small{height:48px;padding:12px 16px;font-size:16px;line-height:24px}.hds-button--small i,.hds-button--small svg{margin-right:8px}.hds-button--full{width:100%}@media (max-width:720px){.hds-button--mobile-full{width:100%}}.hds-button--primary{background:var(--hds-brand-colors-signature);border-color:var(--hds-brand-colors-signature);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text)}.hds-button--primary:hover,.hds-button--primary:active{background:var(--hds-brand-colors-signature-hover);border-color:var(--hds-brand-colors-signature);outline:0 solid var(--hds-brand-colors-signature-hover)}.hds-button--primary:active{background:var(--hds-brand-colors-signature)!important}.hds-button--secondary{background:var(--hds-brand-colors-darker);border-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.hds-button--secondary:hover,.hds-button--secondary:active{background:var(--hds-ui-colors-black);outline:0 solid var(--hds-ui-colors-black)}.hds-button--secondary:active{background:var(--hds-brand-colors-darker)!important}.hds-button--outline{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark);background:0 0}.hds-button--outline:disabled,.hds-button--outline[disabled],.hds-button--outline[disabled]:active{background:0 0!important}.hds-button--outline:hover,.hds-button--outline:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black);background:0 0}.hds-button--outline:active{border-color:var(--hds-ui-colors-dark-grey)}.hds-button--outline-white{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background:0 0}.hds-button--outline-white:hover,.hds-button--outline-white:active{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.hds-button--outline-primary{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background:0 0}.hds-button--outline-primary:hover,.hds-button--outline-primary:active{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark)}.hds-button--outline-primary:disabled,.hds-button--outline-primary[disabled],.hds-button--outline-primary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.hds-button--outline-secondary,.hds-button--outline-dark{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-darker);color:var(--hds-brand-colors-darker);fill:var(--hds-brand-colors-darker);outline-offset:3px;background:0 0}.hds-button--outline-secondary:hover,.hds-button--outline-secondary:active,.hds-button--outline-dark:hover,.hds-button--outline-dark:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border:var(--hds-stroke-thick)solid var(--hds-ui-colors-black)}.hds-button--outline-secondary:disabled,.hds-button--outline-secondary[disabled],.hds-button--outline-secondary[disabled]:active,.hds-button--outline-dark:disabled,.hds-button--outline-dark[disabled],.hds-button--outline-dark[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}
2
2
  /*# sourceMappingURL=button.css.map */
@@ -1 +1 @@
1
- {"mappings":"ACKA,ikBAGE,kUAgBA,gEAIE,8DAMF,iEAIE,gEAMF,gEAIE,6DAMF,6BAYE,yBAJF,qCAaA,oMAME,mNAOA,mFAKF,8KAME,8IAMA,kFAKF,0KAME,4HAMA,+KAQA,wEASF,gMAOE,0IAOF,sMAOE,6MAMA,2RAUF,uOAOE,4QAOA","sources":["button/button.css","packages/css/button/button.scss","packages/css/button/base.scss"],"sourcesContent":[".hds-button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n background: var(--hds-ui-colors-grey);\n border-width: 0;\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-small);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center;\n cursor: pointer;\n word-break: normal;\n display: inline-block;\n}\n\n.hds-button:disabled, .hds-button[disabled], .hds-button[disabled]:active {\n cursor: default;\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.hds-button--large {\n height: 58px;\n padding: 19px 24px;\n font-size: 18px;\n}\n\n.hds-button--large i, .hds-button--large svg {\n margin-right: 12px;\n}\n\n.hds-button--medium {\n height: 50px;\n padding: 15px 20px;\n font-size: 18px;\n}\n\n.hds-button--medium i, .hds-button--medium svg {\n margin-right: 10px;\n}\n\n.hds-button--small {\n height: 44px;\n padding: 12px 16px;\n font-size: 16px;\n}\n\n.hds-button--small i, .hds-button--small svg {\n margin-right: 8px;\n}\n\n.hds-button--full {\n width: 100%;\n}\n\n@media (max-width: 720px) {\n .hds-button--mobile-full {\n width: 100%;\n }\n}\n\n.hds-button--primary {\n background: var(--hds-brand-colors-signature);\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n}\n\n.hds-button--primary:hover, .hds-button--primary:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0px solid var(--hds-brand-colors-signature-hover);\n}\n\n.hds-button--primary:active {\n background: var(--hds-brand-colors-signature) !important;\n}\n\n.hds-button--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n}\n\n.hds-button--secondary:hover, .hds-button--secondary:active {\n background: var(--hds-ui-colors-black);\n outline: 0px solid var(--hds-ui-colors-black);\n}\n\n.hds-button--secondary:active {\n background: var(--hds-brand-colors-darker) !important;\n}\n\n.hds-button--outline {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n background: none;\n}\n\n.hds-button--outline:disabled, .hds-button--outline[disabled], .hds-button--outline[disabled]:active {\n background: none !important;\n}\n\n.hds-button--outline:hover, .hds-button--outline:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n background: none;\n}\n\n.hds-button--outline:active {\n border-color: var(--hds-ui-colors-dark-grey);\n}\n\n.hds-button--outline-white {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-white:hover, .hds-button--outline-white:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n}\n\n.hds-button--outline-primary {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-primary:hover, .hds-button--outline-primary:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n}\n\n.hds-button--outline-primary:disabled, .hds-button--outline-primary[disabled], .hds-button--outline-primary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.hds-button--outline-secondary, .hds-button--outline-dark {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-secondary:hover, .hds-button--outline-dark:hover, .hds-button--outline-secondary:active, .hds-button--outline-dark:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n}\n\n.hds-button--outline-secondary:disabled, .hds-button--outline-dark:disabled, .hds-button--outline-secondary[disabled], [disabled].hds-button--outline-dark, .hds-button--outline-secondary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n/*# sourceMappingURL=button.css.map */\n","@use \"base\";\n/**\n * Block\n */\n\n.hds-button {\n @include base.button;\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n\n /**\n * Modifiers: sizes\n */\n\n &--large {\n font-size: 18px;\n height: 58px;\n padding: 19px 24px;\n i,\n svg {\n margin-right: 12px;\n }\n }\n\n &--medium {\n font-size: 18px;\n height: 50px;\n padding: 15px 20px;\n i,\n svg {\n margin-right: 10px;\n }\n }\n\n &--small {\n font-size: 16px;\n height: 44px;\n padding: 12px 16px;\n i,\n svg {\n margin-right: 8px;\n }\n }\n\n &--full {\n width: 100%;\n }\n\n /**\n * Responsive modifiers\n */\n\n &--mobile-full {\n // TODO: Currently hardcoded due to css variables not available in media queries\n // Would be: --hds-breakpoints-medium\n // 🤷\n @media (max-width: 720px) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: types\n */\n\n &--primary {\n background: var(--hds-brand-colors-signature);\n border-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 &:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0px solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background: var(--hds-brand-colors-signature) !important;\n }\n }\n\n &--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover,\n &:active {\n background: var(--hds-ui-colors-black);\n outline: 0px solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background: var(--hds-brand-colors-darker) !important;\n }\n }\n\n &--outline {\n background: transparent;\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n background: none !important;\n }\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 background: none;\n }\n\n &:active {\n border-color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n &--outline-dark {\n @extend .hds-button--outline-secondary;\n }\n\n &--outline-white {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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 &--outline-primary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n }\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n\n &--outline-secondary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n /*outline: 0px solid var(--hds-ui-colors-white);*/\n }\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n}\n","@mixin button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n display: inline-block;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n border-width: 0px;\n background: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-small);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center; /* Center text when this is an <a> */\n cursor: pointer;\n word-break: normal;\n}\n"],"names":[],"version":3,"file":"button.css.map"}
1
+ {"mappings":"ACAA,ikBAmBE,kUAgBA,iFAME,8DAMF,kFAME,gEAMF,iFAME,6DAMF,6BAYE,yBAJF,qCAaA,oMAME,iNAOA,mFAKF,8KAME,4IAMA,kFAKF,0KAME,4HAMA,+KAQA,wEAKF,gMAOE,0IAOF,sMAOE,6MAOA,2RAUF,uOAQE,4QASA","sources":["button/button.css","packages/css/src/button/button.scss"],"sourcesContent":[".hds-button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n background: var(--hds-ui-colors-grey);\n border-width: 0;\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-title);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center;\n cursor: pointer;\n word-break: normal;\n display: inline-block;\n}\n\n.hds-button:disabled, .hds-button[disabled], .hds-button[disabled]:active {\n cursor: default;\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.hds-button--large {\n height: 58px;\n padding: 16px 24px;\n font-size: 18px;\n line-height: 26px;\n}\n\n.hds-button--large i, .hds-button--large svg {\n margin-right: 12px;\n}\n\n.hds-button--medium {\n height: 50px;\n padding: 12px 20px;\n font-size: 18px;\n line-height: 26px;\n}\n\n.hds-button--medium i, .hds-button--medium svg {\n margin-right: 10px;\n}\n\n.hds-button--small {\n height: 48px;\n padding: 12px 16px;\n font-size: 16px;\n line-height: 24px;\n}\n\n.hds-button--small i, .hds-button--small svg {\n margin-right: 8px;\n}\n\n.hds-button--full {\n width: 100%;\n}\n\n@media (max-width: 720px) {\n .hds-button--mobile-full {\n width: 100%;\n }\n}\n\n.hds-button--primary {\n background: var(--hds-brand-colors-signature);\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n}\n\n.hds-button--primary:hover, .hds-button--primary:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n}\n\n.hds-button--primary:active {\n background: var(--hds-brand-colors-signature) !important;\n}\n\n.hds-button--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n}\n\n.hds-button--secondary:hover, .hds-button--secondary:active {\n background: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n}\n\n.hds-button--secondary:active {\n background: var(--hds-brand-colors-darker) !important;\n}\n\n.hds-button--outline {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n background: none;\n}\n\n.hds-button--outline:disabled, .hds-button--outline[disabled], .hds-button--outline[disabled]:active {\n background: none !important;\n}\n\n.hds-button--outline:hover, .hds-button--outline:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n background: none;\n}\n\n.hds-button--outline:active {\n border-color: var(--hds-ui-colors-dark-grey);\n}\n\n.hds-button--outline-white {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-white:hover, .hds-button--outline-white:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n}\n\n.hds-button--outline-primary {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-primary:hover, .hds-button--outline-primary:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n}\n\n.hds-button--outline-primary:disabled, .hds-button--outline-primary[disabled], .hds-button--outline-primary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.hds-button--outline-secondary, .hds-button--outline-dark {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-secondary:hover, .hds-button--outline-secondary:active, .hds-button--outline-dark:hover, .hds-button--outline-dark:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n}\n\n.hds-button--outline-secondary:disabled, .hds-button--outline-secondary[disabled], .hds-button--outline-secondary[disabled]:active, .hds-button--outline-dark:disabled, .hds-button--outline-dark[disabled], .hds-button--outline-dark[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n/*# sourceMappingURL=button.css.map */\n",".hds-button {\n -webkit-font-smoothing: antialiased;\n /* stylelint-disable-next-line property-no-vendor-prefix -- Not sure if we need this or not 🤷 */\n -webkit-appearance: button;\n box-sizing: border-box;\n display: inline-block;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n border-width: 0;\n background: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-title);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center; /* Center text when this is an <a> */\n cursor: pointer;\n word-break: normal;\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n\n /**\n * Modifiers: sizes\n */\n\n &--large {\n font-size: 18px; /* TODO Token: typography-body minimum value */\n line-height: 26px;\n height: 58px;\n padding: 16px 24px;\n\n i,\n svg {\n margin-right: 12px;\n }\n }\n\n &--medium {\n font-size: 18px; /* TODO Token: typography-body minimum value */\n line-height: 26px;\n height: 50px;\n padding: 12px 20px;\n\n i,\n svg {\n margin-right: 10px;\n }\n }\n\n &--small {\n font-size: 16px; /* TODO Token: typography-body-small minimum value */\n line-height: 24px;\n height: 48px;\n padding: 12px 16px;\n\n i,\n svg {\n margin-right: 8px;\n }\n }\n\n &--full {\n width: 100%;\n }\n\n /**\n * Responsive modifiers\n */\n\n &--mobile-full {\n // TODO: Currently hardcoded due to css variables not available in media queries\n // Would be: --hds-breakpoints-medium\n // 🤷\n @media (max-width: 720px) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: types\n */\n\n &--primary {\n background: var(--hds-brand-colors-signature);\n border-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 &:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background: var(--hds-brand-colors-signature) !important;\n }\n }\n\n &--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover,\n &:active {\n background: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background: var(--hds-brand-colors-darker) !important;\n }\n }\n\n &--outline {\n background: transparent;\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n background: none !important;\n }\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 background: none;\n }\n\n &:active {\n border-color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n &--outline-white {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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 &--outline-primary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n }\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n\n &--outline-secondary,\n &--outline-dark {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n\n /* outline: 0px solid var(--hds-ui-colors-white); */\n }\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n}\n"],"names":[],"version":3,"file":"button.css.map"}
@@ -0,0 +1,52 @@
1
+ // This file is auto-generated with postcss-ts-classnames.
2
+
3
+ export type ClassNames =
4
+ | "hds-badge"
5
+ | "hds-badge--dark"
6
+ | "hds-badge--primary"
7
+ | "hds-badge--small"
8
+ | "hds-badge--smaller"
9
+ | "hds-badge--warning"
10
+ | "hds-badge--white"
11
+ | "hds-button"
12
+ | "hds-button--full"
13
+ | "hds-button--large"
14
+ | "hds-button--medium"
15
+ | "hds-button--mobile-full"
16
+ | "hds-button--outline"
17
+ | "hds-button--outline-dark"
18
+ | "hds-button--outline-primary"
19
+ | "hds-button--outline-secondary"
20
+ | "hds-button--outline-white"
21
+ | "hds-button--primary"
22
+ | "hds-button--secondary"
23
+ | "hds-button--small"
24
+ | "hds-link"
25
+ | "hds-link--inverted"
26
+ | "hds-link--large"
27
+ | "hds-link--no-underline"
28
+ | "hds-link--small"
29
+ | "hds-link--solid"
30
+ | "hds-link__text"
31
+ | "hds-theme-bring"
32
+ | "hds-theme-posten"
33
+ | "hds-typography-body"
34
+ | "hds-typography-body--spacing"
35
+ | "hds-typography-body--title"
36
+ | "hds-typography-body-small"
37
+ | "hds-typography-body-small--spacing"
38
+ | "hds-typography-body-small--title"
39
+ | "hds-typography-caption"
40
+ | "hds-typography-caption--spacing"
41
+ | "hds-typography-caption--title"
42
+ | "hds-typography-h1"
43
+ | "hds-typography-h1--spacing"
44
+ | "hds-typography-h2"
45
+ | "hds-typography-h2--spacing"
46
+ | "hds-typography-h2-display"
47
+ | "hds-typography-h3"
48
+ | "hds-typography-h3--spacing"
49
+ | "hds-typography-h3--title"
50
+ | "hds-typography-technical"
51
+ | "hds-typography-technical--spacing"
52
+ | "hds-typography-technical--title";
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
- .hds-theme-posten,.hds-theme-bring{box-sizing:border-box;font:var(--hds-typography-body);fill:var(--hds-ui-colors-black);color:var(--hds-ui-colors-black);cursor:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:var(--hds-ui-colors-white);line-height:1.4}.hds-button{-webkit-font-smoothing:antialiased;-webkit-appearance:button;box-sizing:border-box;padding:var(--hds-spacing-small-3)var(--hds-spacing-medium-2);border-radius:var(--hds-border-radius);background:var(--hds-ui-colors-grey);border-width:0;border-color:var(--hds-ui-colors-grey);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text);font:var(--hds-typography-body-small);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);text-align:center;cursor:pointer;word-break:normal;display:inline-block}.hds-button:disabled,.hds-button[disabled],.hds-button[disabled]:active{cursor:default;color:var(--hds-ui-colors-dark-grey)!important;fill:var(--hds-ui-colors-dark-grey)!important;background:var(--hds-ui-colors-grey)!important;border-color:var(--hds-ui-colors-grey)!important;box-shadow:none!important;outline:0!important}.hds-button--large{height:58px;padding:19px 24px;font-size:18px}.hds-button--large i,.hds-button--large svg{margin-right:12px}.hds-button--medium{height:50px;padding:15px 20px;font-size:18px}.hds-button--medium i,.hds-button--medium svg{margin-right:10px}.hds-button--small{height:44px;padding:12px 16px;font-size:16px}.hds-button--small i,.hds-button--small svg{margin-right:8px}.hds-button--full{width:100%}@media (max-width:720px){.hds-button--mobile-full{width:100%}}.hds-button--primary{background:var(--hds-brand-colors-signature);border-color:var(--hds-brand-colors-signature);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text)}.hds-button--primary:hover,.hds-button--primary:active{background:var(--hds-brand-colors-signature-hover);border-color:var(--hds-brand-colors-signature);outline:0px solid var(--hds-brand-colors-signature-hover)}.hds-button--primary:active{background:var(--hds-brand-colors-signature)!important}.hds-button--secondary{background:var(--hds-brand-colors-darker);border-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.hds-button--secondary:hover,.hds-button--secondary:active{background:var(--hds-ui-colors-black);outline:0px solid var(--hds-ui-colors-black)}.hds-button--secondary:active{background:var(--hds-brand-colors-darker)!important}.hds-button--outline{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark);background:0 0}.hds-button--outline:disabled,.hds-button--outline[disabled],.hds-button--outline[disabled]:active{background:0 0!important}.hds-button--outline:hover,.hds-button--outline:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black);background:0 0}.hds-button--outline:active{border-color:var(--hds-ui-colors-dark-grey)}.hds-button--outline-white{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background:0 0}.hds-button--outline-white:hover,.hds-button--outline-white:active{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.hds-button--outline-primary{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background:0 0}.hds-button--outline-primary:hover,.hds-button--outline-primary:active{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark)}.hds-button--outline-primary:disabled,.hds-button--outline-primary[disabled],.hds-button--outline-primary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.hds-button--outline-secondary,.hds-button--outline-dark{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-darker);color:var(--hds-brand-colors-darker);fill:var(--hds-brand-colors-darker);outline-offset:3px;background:0 0}.hds-button--outline-secondary:hover,.hds-button--outline-dark:hover,.hds-button--outline-secondary:active,.hds-button--outline-dark:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border:var(--hds-stroke-thick)solid var(--hds-ui-colors-black)}.hds-button--outline-secondary:disabled,.hds-button--outline-dark:disabled,.hds-button--outline-secondary[disabled],[disabled].hds-button--outline-dark,.hds-button--outline-secondary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.hds-link{border-bottom:var(--hds-stroke-default)solid var(--hds-brand-link-colors-underline);fill:var(--hds-brand-link-colors-text);color:var(--hds-brand-link-colors-text);cursor:pointer;text-decoration:none;transition:all .1s}.hds-link:hover,.hds-link:active{color:var(--hds-brand-link-colors-hover);fill:var(--hds-brand-link-colors-hover);border-color:var(--hds-brand-link-colors-underline-hover)}.hds-link:hover .hw-link__text,.hds-link:active .hw-link__text{border-color:var(--hds-brand-link-colors-underline-hover)}.hds-link--inverted{color:var(--hds-ui-colors-white);-webkit-text-decoration-color:var(--hds-brand-colors-signature);-webkit-text-decoration-color:var(--hds-brand-colors-signature);text-decoration-color:var(--hds-brand-colors-signature);border-color:currentColor}.hds-link--inverted:hover,.hds-link--inverted:active{color:var(--hds-brand-colors-light);border-color:currentColor}.hds-link--inverted:disabled{color:var(--hds-ui-colors-dark-grey);fill:currentColor;cursor:default;border-color:currentColor;box-shadow:none!important;outline:0!important}.hds-link--small{font:var(--hds-typography-body-small)}.hds-link--large{font:var(--hds-typography-header-h3)}.hds-link--no-underline{font-family:var(--hw-font-primary-medium);color:var(--hds-brand-colors-dark);border-bottom:none;text-decoration:none}.hds-link--no-underline:hover{color:var(--hds-brand-colors-dark);text-decoration:underline;-webkit-text-decoration-color:var(--hds-brand-colors-dark);-webkit-text-decoration-color:var(--hds-brand-colors-dark);text-decoration-color:var(--hds-brand-colors-dark);border-bottom:none}.hds-link--solid{color:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-link--solid:hover,.hds-link--solid:active{color:var(--hds-ui-colors-black-hover);border-color:var(--hds-ui-colors-black-hover)}
1
+ .hds-theme-posten,.hds-theme-bring{box-sizing:border-box;font:var(--hds-typography-body);fill:var(--hds-ui-colors-black);color:var(--hds-ui-colors-black);cursor:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:1.4}:is(.hds-theme-posten,.hds-theme-bring) body{background:var(--hds-ui-colors-white)}.hds-button{-webkit-font-smoothing:antialiased;-webkit-appearance:button;box-sizing:border-box;padding:var(--hds-spacing-small-3)var(--hds-spacing-medium-2);border-radius:var(--hds-border-radius);background:var(--hds-ui-colors-grey);border-width:0;border-color:var(--hds-ui-colors-grey);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text);font:var(--hds-typography-body-title);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);text-align:center;cursor:pointer;word-break:normal;display:inline-block}.hds-button:disabled,.hds-button[disabled],.hds-button[disabled]:active{cursor:default;color:var(--hds-ui-colors-dark-grey)!important;fill:var(--hds-ui-colors-dark-grey)!important;background:var(--hds-ui-colors-grey)!important;border-color:var(--hds-ui-colors-grey)!important;box-shadow:none!important;outline:0!important}.hds-button--large{height:58px;padding:16px 24px;font-size:18px;line-height:26px}.hds-button--large i,.hds-button--large svg{margin-right:12px}.hds-button--medium{height:50px;padding:12px 20px;font-size:18px;line-height:26px}.hds-button--medium i,.hds-button--medium svg{margin-right:10px}.hds-button--small{height:48px;padding:12px 16px;font-size:16px;line-height:24px}.hds-button--small i,.hds-button--small svg{margin-right:8px}.hds-button--full{width:100%}@media (max-width:720px){.hds-button--mobile-full{width:100%}}.hds-button--primary{background:var(--hds-brand-colors-signature);border-color:var(--hds-brand-colors-signature);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text)}.hds-button--primary:hover,.hds-button--primary:active{background:var(--hds-brand-colors-signature-hover);border-color:var(--hds-brand-colors-signature);outline:0 solid var(--hds-brand-colors-signature-hover)}.hds-button--primary:active{background:var(--hds-brand-colors-signature)!important}.hds-button--secondary{background:var(--hds-brand-colors-darker);border-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.hds-button--secondary:hover,.hds-button--secondary:active{background:var(--hds-ui-colors-black);outline:0 solid var(--hds-ui-colors-black)}.hds-button--secondary:active{background:var(--hds-brand-colors-darker)!important}.hds-button--outline{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark);background:0 0}.hds-button--outline:disabled,.hds-button--outline[disabled],.hds-button--outline[disabled]:active{background:0 0!important}.hds-button--outline:hover,.hds-button--outline:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black);background:0 0}.hds-button--outline:active{border-color:var(--hds-ui-colors-dark-grey)}.hds-button--outline-white{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background:0 0}.hds-button--outline-white:hover,.hds-button--outline-white:active{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.hds-button--outline-primary{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background:0 0}.hds-button--outline-primary:hover,.hds-button--outline-primary:active{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark)}.hds-button--outline-primary:disabled,.hds-button--outline-primary[disabled],.hds-button--outline-primary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.hds-button--outline-secondary,.hds-button--outline-dark{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-darker);color:var(--hds-brand-colors-darker);fill:var(--hds-brand-colors-darker);outline-offset:3px;background:0 0}.hds-button--outline-secondary:hover,.hds-button--outline-secondary:active,.hds-button--outline-dark:hover,.hds-button--outline-dark:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border:var(--hds-stroke-thick)solid var(--hds-ui-colors-black)}.hds-button--outline-secondary:disabled,.hds-button--outline-secondary[disabled],.hds-button--outline-secondary[disabled]:active,.hds-button--outline-dark:disabled,.hds-button--outline-dark[disabled],.hds-button--outline-dark[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.hds-link{border-bottom:var(--hds-stroke-default)solid var(--hds-brand-link-colors-underline);fill:var(--hds-brand-link-colors-text);color:var(--hds-brand-link-colors-text);cursor:pointer;text-decoration:none;transition:all .1s}.hds-link:hover,.hds-link:active{color:var(--hds-brand-link-colors-hover);fill:var(--hds-brand-link-colors-hover);border-color:var(--hds-brand-link-colors-underline-hover)}.hds-link:hover .hds-link__text,.hds-link:active .hds-link__text{border-color:var(--hds-brand-link-colors-underline-hover)}.hds-link--inverted{color:var(--hds-ui-colors-white);-webkit-text-decoration-color:var(--hds-brand-colors-signature);-webkit-text-decoration-color:var(--hds-brand-colors-signature);text-decoration-color:var(--hds-brand-colors-signature);border-color:currentColor}.hds-link--inverted:hover,.hds-link--inverted:active{color:var(--hds-brand-colors-light);border-color:currentColor}.hds-link--inverted:disabled{color:var(--hds-ui-colors-dark-grey);fill:currentColor;cursor:default;border-color:currentColor;box-shadow:none!important;outline:0!important}.hds-link--small{font:var(--hds-typography-body-small)}.hds-link--large{font:var(--hds-typography-header-h3)}.hds-link--no-underline{font:var(--hds-fonts-posten-sans-medium);color:var(--hds-brand-colors-dark);border-bottom:none;text-decoration:none}.hds-link--no-underline:hover{color:var(--hds-brand-colors-dark);text-decoration:underline;-webkit-text-decoration-color:var(--hds-brand-colors-dark);-webkit-text-decoration-color:var(--hds-brand-colors-dark);text-decoration-color:var(--hds-brand-colors-dark);border-bottom:none}.hds-link--solid{color:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-link--solid:hover,.hds-link--solid:active{color:var(--hds-ui-colors-black-hover);border-color:var(--hds-ui-colors-black-hover)}.hds-badge{background-color:var(--hds-brand-colors-lighter);border:var(--hds-stroke-default)solid var(--hds-brand-colors-lighter);border-radius:var(--hds-border-radius);padding:var(--hds-spacing-small-1)var(--hds-spacing-small-2);color:var(--hds-brand-colors-dark);text-transform:uppercase;font-size:12px;line-height:1.1;font-family:var(--hds-fonts-posten-sans-medium);-moz-osx-font-smoothing:subpixel-antialiased;-webkit-font-smoothing:subpixel-antialiased;vertical-align:10%;display:inline-block}.hds-badge--small{padding:var(--hds-spacing-small-1)var(--hds-spacing-small-2)}.hds-badge--smaller{padding:2px var(--hds-spacing-small-1)}.hds-badge--primary{background-color:var(--hds-brand-colors-lighter);border-color:var(--hds-brand-colors-lighter);color:var(--hds-brand-colors-dark)}.hds-badge--dark{background-color:var(--hds-brand-colors-darker);border-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white)}.hds-badge--white{background-color:var(--hds-ui-colors-white);border-color:var(--hds-ui-colors-white);color:var(--hds-brand-colors-dark)}.hds-badge--warning{background-color:var(--hds-ui-colors-warning-yellow);border-color:var(--hds-ui-colors-warning-yellow);color:var(--hds-brand-link-colors-text)}.hds-typography-h2-display{font:var(--hds-brand-typography-h1-display)}.hds-typography-h1{font:var(--hds-brand-typography-h1)}.hds-typography-h1.hds-typography-h1--spacing{margin-top:var(--hds-spacing-large-2)}.hds-typography-h2{font:var(--hds-brand-typography-h2)}.hds-typography-h2.hds-typography-h2--spacing{margin-top:var(--hds-spacing-large-2)}.hds-typography-h1~.hds-typography-h2.hds-typography-h2--spacing{margin-top:var(--hds-spacing-medium-3)}.hds-typography-h3{font:var(--hds-typography-header-h3)}.hds-typography-h3.hds-typography-h3--title{font:var(--hds-typography-header-h3-title)}.hds-typography-h3.hds-typography-h3--spacing{margin-top:var(--hds-spacing-large-2)}.hds-typography-body{font:var(--hds-typography-body)}.hds-typography-body.hds-typography-body--title{font:var(--hds-typography-body-title)}.hds-typography-body.hds-typography-body--spacing{margin-top:var(--hds-spacing-medium-2)}.hds-typography-body-small{font:var(--hds-typography-body-small)}.hds-typography-body-small.hds-typography-body-small--title{font:var(--hds-typography-body-small-title)}.hds-typography-body-small.hds-typography-body-small--spacing{margin-top:var(--hds-spacing-medium-2)}.hds-typography-caption{font:var(--hds-typography-caption)}.hds-typography-caption.hds-typography-caption--title{font:var(--hds-typography-caption-title)}.hds-typography-caption.hds-typography-caption--spacing{margin-top:var(--hds-spacing-medium-2)}.hds-typography-technical{font:var(--hds-typography-technical)}.hds-typography-technical.hds-typography-technical--title{font:var(--hds-typography-technical-title)}.hds-typography-technical.hds-typography-technical--spacing{margin-top:var(--hds-spacing-small-1)}@media (min-width:940px){.hds-typography-technical.hds-typography-technical--spacing{margin-top:var(--hds-spacing-small-2)}}
2
2
  /*# sourceMappingURL=index.css.map */
@@ -1 +1 @@
1
- {"mappings":"ACOA,iSCFA,ikBAGE,kUAgBA,gEAIE,8DAMF,iEAIE,gEAMF,gEAIE,6DAMF,6BAYE,yBAJF,qCAaA,oMAME,mNAOA,mFAKF,8KAME,8IAMA,kFAKF,0KAME,4HAMA,+KAQA,wEASF,gMAOE,0IAOF,sMAOE,6MAMA,2RAUF,uOAOE,4QAOA,wWE1LJ,oOAQE,4KAME,yHASF,uQAIE,mHAKA,2KAUF,uDAIA,sDAIA,6IAME,uRAQF,0FAGE","sources":["index.css","packages/css/base.css","packages/css/button/button.scss","packages/css/button/base.scss","packages/css/link/link.scss","packages/css/index.css"],"sourcesContent":[".hds-theme-posten, .hds-theme-bring {\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 cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background: var(--hds-ui-colors-white);\n line-height: 1.4;\n}\n\n.hds-button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n background: var(--hds-ui-colors-grey);\n border-width: 0;\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-small);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center;\n cursor: pointer;\n word-break: normal;\n display: inline-block;\n}\n\n.hds-button:disabled, .hds-button[disabled], .hds-button[disabled]:active {\n cursor: default;\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.hds-button--large {\n height: 58px;\n padding: 19px 24px;\n font-size: 18px;\n}\n\n.hds-button--large i, .hds-button--large svg {\n margin-right: 12px;\n}\n\n.hds-button--medium {\n height: 50px;\n padding: 15px 20px;\n font-size: 18px;\n}\n\n.hds-button--medium i, .hds-button--medium svg {\n margin-right: 10px;\n}\n\n.hds-button--small {\n height: 44px;\n padding: 12px 16px;\n font-size: 16px;\n}\n\n.hds-button--small i, .hds-button--small svg {\n margin-right: 8px;\n}\n\n.hds-button--full {\n width: 100%;\n}\n\n@media (max-width: 720px) {\n .hds-button--mobile-full {\n width: 100%;\n }\n}\n\n.hds-button--primary {\n background: var(--hds-brand-colors-signature);\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n}\n\n.hds-button--primary:hover, .hds-button--primary:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0px solid var(--hds-brand-colors-signature-hover);\n}\n\n.hds-button--primary:active {\n background: var(--hds-brand-colors-signature) !important;\n}\n\n.hds-button--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n}\n\n.hds-button--secondary:hover, .hds-button--secondary:active {\n background: var(--hds-ui-colors-black);\n outline: 0px solid var(--hds-ui-colors-black);\n}\n\n.hds-button--secondary:active {\n background: var(--hds-brand-colors-darker) !important;\n}\n\n.hds-button--outline {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n background: none;\n}\n\n.hds-button--outline:disabled, .hds-button--outline[disabled], .hds-button--outline[disabled]:active {\n background: none !important;\n}\n\n.hds-button--outline:hover, .hds-button--outline:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n background: none;\n}\n\n.hds-button--outline:active {\n border-color: var(--hds-ui-colors-dark-grey);\n}\n\n.hds-button--outline-white {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-white:hover, .hds-button--outline-white:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n}\n\n.hds-button--outline-primary {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-primary:hover, .hds-button--outline-primary:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n}\n\n.hds-button--outline-primary:disabled, .hds-button--outline-primary[disabled], .hds-button--outline-primary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.hds-button--outline-secondary, .hds-button--outline-dark {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-secondary:hover, .hds-button--outline-dark:hover, .hds-button--outline-secondary:active, .hds-button--outline-dark:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n}\n\n.hds-button--outline-secondary:disabled, .hds-button--outline-dark:disabled, .hds-button--outline-secondary[disabled], [disabled].hds-button--outline-dark, .hds-button--outline-secondary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.hds-link {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n cursor: pointer;\n text-decoration: none;\n transition: all .1s;\n}\n\n.hds-link:hover, .hds-link:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.hds-link:hover .hw-link__text, .hds-link:active .hw-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.hds-link--inverted {\n color: var(--hds-ui-colors-white);\n -webkit-text-decoration-color: var(--hds-brand-colors-signature);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n}\n\n.hds-link--inverted:hover, .hds-link--inverted:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n}\n\n.hds-link--inverted:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n cursor: default;\n border-color: currentColor;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.hds-link--small {\n font: var(--hds-typography-body-small);\n}\n\n.hds-link--large {\n font: var(--hds-typography-header-h3);\n}\n\n.hds-link--no-underline {\n font-family: var(--hw-font-primary-medium);\n color: var(--hds-brand-colors-dark);\n border-bottom: none;\n text-decoration: none;\n}\n\n.hds-link--no-underline:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n -webkit-text-decoration-color: var(--hds-brand-colors-dark);\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n}\n\n.hds-link--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n}\n\n.hds-link--solid:hover, .hds-link--solid:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n}\n\n\n\n/*# sourceMappingURL=index.css.map */\n","/*\n * Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n *\n * Scoped to the theme selectors, this way the global effects are only applied\n * where they are wanted\n */\n.hds-theme-posten,\n.hds-theme-bring {\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\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n background: var(--hds-ui-colors-white);\n}\n","@use \"base\";\n/**\n * Block\n */\n\n.hds-button {\n @include base.button;\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n\n /**\n * Modifiers: sizes\n */\n\n &--large {\n font-size: 18px;\n height: 58px;\n padding: 19px 24px;\n i,\n svg {\n margin-right: 12px;\n }\n }\n\n &--medium {\n font-size: 18px;\n height: 50px;\n padding: 15px 20px;\n i,\n svg {\n margin-right: 10px;\n }\n }\n\n &--small {\n font-size: 16px;\n height: 44px;\n padding: 12px 16px;\n i,\n svg {\n margin-right: 8px;\n }\n }\n\n &--full {\n width: 100%;\n }\n\n /**\n * Responsive modifiers\n */\n\n &--mobile-full {\n // TODO: Currently hardcoded due to css variables not available in media queries\n // Would be: --hds-breakpoints-medium\n // 🤷\n @media (max-width: 720px) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: types\n */\n\n &--primary {\n background: var(--hds-brand-colors-signature);\n border-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 &:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0px solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background: var(--hds-brand-colors-signature) !important;\n }\n }\n\n &--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover,\n &:active {\n background: var(--hds-ui-colors-black);\n outline: 0px solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background: var(--hds-brand-colors-darker) !important;\n }\n }\n\n &--outline {\n background: transparent;\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n background: none !important;\n }\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 background: none;\n }\n\n &:active {\n border-color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n &--outline-dark {\n @extend .hds-button--outline-secondary;\n }\n\n &--outline-white {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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 &--outline-primary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n }\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n\n &--outline-secondary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n /*outline: 0px solid var(--hds-ui-colors-white);*/\n }\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n}\n","@mixin button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n display: inline-block;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n border-width: 0px;\n background: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-small);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center; /* Center text when this is an <a> */\n cursor: pointer;\n word-break: normal;\n}\n","/**\n * Block\n */\n\n.hds-link {\n text-decoration: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n transition: all 0.1s ease;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n\n & .hw-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n }\n }\n\n /**\n * Modifers\n */\n\n &--inverted {\n color: var(--hds-ui-colors-white);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n }\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n border-color: currentColor;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n }\n\n &--small {\n font: var(--hds-typography-body-small);\n }\n\n &--large {\n font: var(--hds-typography-header-h3);\n }\n\n &--no-underline {\n font-family: var(--hw-font-primary-medium);\n color: var(--hds-brand-colors-dark);\n text-decoration: none;\n border-bottom: none;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n }\n }\n\n &--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n }\n }\n}\n","@import \"base.css\";\n@import \"button/button.scss\";\n@import \"link/link.scss\";\n"],"names":[],"version":3,"file":"index.css.map"}
1
+ {"mappings":"ACOA,2PAWE,mFClBF,ikBAmBE,kUAgBA,iFAME,8DAMF,kFAME,gEAMF,iFAME,6DAMF,6BAYE,yBAJF,qCAaA,oMAME,iNAOA,mFAKF,8KAME,4IAMA,kFAKF,0KAME,4HAMA,+KAQA,wEAKF,gMAOE,0IAOF,sMAOE,6MAOA,2RAUF,uOAQE,4QASA,mZC3MJ,oOAQE,4KAME,2HASF,uQAKE,mHAMA,2KAUF,uDAIA,sDAIA,4IAME,uRAQF,0FAIE,oICtEJ,kfAuBE,+EAIA,2DAMA,qJAOA,8IAMA,yIAMA,kKCxDF,uEAIA,uDAGE,oFAKF,uDAGE,oFAIA,wGAKF,wDAGE,uFAIA,oFAKF,qDAGE,sFAIA,yFAKF,iEAGE,wGAIA,qGAKF,2DAGE,+FAIA,+FAKF,+DAGE,qGAIA,kGAIA,yBACE","sources":["index.css","packages/css/src/base.css","packages/css/src/button/button.scss","packages/css/src/link/link.scss","packages/css/src/badge/badge.scss","packages/css/src/typography/typography.css","packages/css/src/index.css"],"sourcesContent":[".hds-theme-posten, .hds-theme-bring {\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 cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n line-height: 1.4;\n}\n\n:is(.hds-theme-posten, .hds-theme-bring) body {\n background: var(--hds-ui-colors-white);\n}\n\n.hds-button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n background: var(--hds-ui-colors-grey);\n border-width: 0;\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-title);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center;\n cursor: pointer;\n word-break: normal;\n display: inline-block;\n}\n\n.hds-button:disabled, .hds-button[disabled], .hds-button[disabled]:active {\n cursor: default;\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.hds-button--large {\n height: 58px;\n padding: 16px 24px;\n font-size: 18px;\n line-height: 26px;\n}\n\n.hds-button--large i, .hds-button--large svg {\n margin-right: 12px;\n}\n\n.hds-button--medium {\n height: 50px;\n padding: 12px 20px;\n font-size: 18px;\n line-height: 26px;\n}\n\n.hds-button--medium i, .hds-button--medium svg {\n margin-right: 10px;\n}\n\n.hds-button--small {\n height: 48px;\n padding: 12px 16px;\n font-size: 16px;\n line-height: 24px;\n}\n\n.hds-button--small i, .hds-button--small svg {\n margin-right: 8px;\n}\n\n.hds-button--full {\n width: 100%;\n}\n\n@media (max-width: 720px) {\n .hds-button--mobile-full {\n width: 100%;\n }\n}\n\n.hds-button--primary {\n background: var(--hds-brand-colors-signature);\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n}\n\n.hds-button--primary:hover, .hds-button--primary:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n}\n\n.hds-button--primary:active {\n background: var(--hds-brand-colors-signature) !important;\n}\n\n.hds-button--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n}\n\n.hds-button--secondary:hover, .hds-button--secondary:active {\n background: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n}\n\n.hds-button--secondary:active {\n background: var(--hds-brand-colors-darker) !important;\n}\n\n.hds-button--outline {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n background: none;\n}\n\n.hds-button--outline:disabled, .hds-button--outline[disabled], .hds-button--outline[disabled]:active {\n background: none !important;\n}\n\n.hds-button--outline:hover, .hds-button--outline:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n background: none;\n}\n\n.hds-button--outline:active {\n border-color: var(--hds-ui-colors-dark-grey);\n}\n\n.hds-button--outline-white {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-white:hover, .hds-button--outline-white:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n}\n\n.hds-button--outline-primary {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-primary:hover, .hds-button--outline-primary:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n}\n\n.hds-button--outline-primary:disabled, .hds-button--outline-primary[disabled], .hds-button--outline-primary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.hds-button--outline-secondary, .hds-button--outline-dark {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n background: none;\n}\n\n.hds-button--outline-secondary:hover, .hds-button--outline-secondary:active, .hds-button--outline-dark:hover, .hds-button--outline-dark:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n}\n\n.hds-button--outline-secondary:disabled, .hds-button--outline-secondary[disabled], .hds-button--outline-secondary[disabled]:active, .hds-button--outline-dark:disabled, .hds-button--outline-dark[disabled], .hds-button--outline-dark[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.hds-link {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n cursor: pointer;\n text-decoration: none;\n transition: all .1s;\n}\n\n.hds-link:hover, .hds-link:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.hds-link:hover .hds-link__text, .hds-link:active .hds-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.hds-link--inverted {\n color: var(--hds-ui-colors-white);\n -webkit-text-decoration-color: var(--hds-brand-colors-signature);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n}\n\n.hds-link--inverted:hover, .hds-link--inverted:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n}\n\n.hds-link--inverted:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n cursor: default;\n border-color: currentColor;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.hds-link--small {\n font: var(--hds-typography-body-small);\n}\n\n.hds-link--large {\n font: var(--hds-typography-header-h3);\n}\n\n.hds-link--no-underline {\n font: var(--hds-fonts-posten-sans-medium);\n color: var(--hds-brand-colors-dark);\n border-bottom: none;\n text-decoration: none;\n}\n\n.hds-link--no-underline:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n -webkit-text-decoration-color: var(--hds-brand-colors-dark);\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n}\n\n.hds-link--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n}\n\n.hds-link--solid:hover, .hds-link--solid:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n}\n\n.hds-badge {\n background-color: var(--hds-brand-colors-lighter);\n border: var(--hds-stroke-default) solid var(--hds-brand-colors-lighter);\n border-radius: var(--hds-border-radius);\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n color: var(--hds-brand-colors-dark);\n text-transform: uppercase;\n font-size: 12px;\n line-height: 1.1;\n font-family: var(--hds-fonts-posten-sans-medium);\n -moz-osx-font-smoothing: subpixel-antialiased;\n -webkit-font-smoothing: subpixel-antialiased;\n vertical-align: 10%;\n display: inline-block;\n}\n\n.hds-badge--small {\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n}\n\n.hds-badge--smaller {\n padding: 2px var(--hds-spacing-small-1);\n}\n\n.hds-badge--primary {\n background-color: var(--hds-brand-colors-lighter);\n border-color: var(--hds-brand-colors-lighter);\n color: var(--hds-brand-colors-dark);\n}\n\n.hds-badge--dark {\n background-color: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n}\n\n.hds-badge--white {\n background-color: var(--hds-ui-colors-white);\n border-color: var(--hds-ui-colors-white);\n color: var(--hds-brand-colors-dark);\n}\n\n.hds-badge--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n border-color: var(--hds-ui-colors-warning-yellow);\n color: var(--hds-brand-link-colors-text);\n}\n\n.hds-typography-h2-display {\n font: var(--hds-brand-typography-h1-display);\n}\n\n.hds-typography-h1 {\n font: var(--hds-brand-typography-h1);\n}\n\n.hds-typography-h1.hds-typography-h1--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-h2 {\n font: var(--hds-brand-typography-h2);\n}\n\n.hds-typography-h2.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-h1 ~ .hds-typography-h2.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-medium-3);\n}\n\n.hds-typography-h3 {\n font: var(--hds-typography-header-h3);\n}\n\n.hds-typography-h3.hds-typography-h3--title {\n font: var(--hds-typography-header-h3-title);\n}\n\n.hds-typography-h3.hds-typography-h3--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-body {\n font: var(--hds-typography-body);\n}\n\n.hds-typography-body.hds-typography-body--title {\n font: var(--hds-typography-body-title);\n}\n\n.hds-typography-body.hds-typography-body--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-body-small {\n font: var(--hds-typography-body-small);\n}\n\n.hds-typography-body-small.hds-typography-body-small--title {\n font: var(--hds-typography-body-small-title);\n}\n\n.hds-typography-body-small.hds-typography-body-small--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-caption {\n font: var(--hds-typography-caption);\n}\n\n.hds-typography-caption.hds-typography-caption--title {\n font: var(--hds-typography-caption-title);\n}\n\n.hds-typography-caption.hds-typography-caption--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-technical {\n font: var(--hds-typography-technical);\n}\n\n.hds-typography-technical.hds-typography-technical--title {\n font: var(--hds-typography-technical-title);\n}\n\n.hds-typography-technical.hds-typography-technical--spacing {\n margin-top: var(--hds-spacing-small-1);\n}\n\n@media (min-width: 940px) {\n .hds-typography-technical.hds-typography-technical--spacing {\n margin-top: var(--hds-spacing-small-2);\n }\n}\n\n\n\n/*# sourceMappingURL=index.css.map */\n","/*\n * Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n *\n * Scoped to the theme selectors, this way the global effects are only applied\n * where they are wanted\n */\n.hds-theme-posten,\n.hds-theme-bring {\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 & body {\n background: var(--hds-ui-colors-white);\n }\n}\n",".hds-button {\n -webkit-font-smoothing: antialiased;\n /* stylelint-disable-next-line property-no-vendor-prefix -- Not sure if we need this or not 🤷 */\n -webkit-appearance: button;\n box-sizing: border-box;\n display: inline-block;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n border-width: 0;\n background: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-title);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center; /* Center text when this is an <a> */\n cursor: pointer;\n word-break: normal;\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n\n /**\n * Modifiers: sizes\n */\n\n &--large {\n font-size: 18px; /* TODO Token: typography-body minimum value */\n line-height: 26px;\n height: 58px;\n padding: 16px 24px;\n\n i,\n svg {\n margin-right: 12px;\n }\n }\n\n &--medium {\n font-size: 18px; /* TODO Token: typography-body minimum value */\n line-height: 26px;\n height: 50px;\n padding: 12px 20px;\n\n i,\n svg {\n margin-right: 10px;\n }\n }\n\n &--small {\n font-size: 16px; /* TODO Token: typography-body-small minimum value */\n line-height: 24px;\n height: 48px;\n padding: 12px 16px;\n\n i,\n svg {\n margin-right: 8px;\n }\n }\n\n &--full {\n width: 100%;\n }\n\n /**\n * Responsive modifiers\n */\n\n &--mobile-full {\n // TODO: Currently hardcoded due to css variables not available in media queries\n // Would be: --hds-breakpoints-medium\n // 🤷\n @media (max-width: 720px) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: types\n */\n\n &--primary {\n background: var(--hds-brand-colors-signature);\n border-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 &:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background: var(--hds-brand-colors-signature) !important;\n }\n }\n\n &--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover,\n &:active {\n background: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background: var(--hds-brand-colors-darker) !important;\n }\n }\n\n &--outline {\n background: transparent;\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n background: none !important;\n }\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 background: none;\n }\n\n &:active {\n border-color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n &--outline-white {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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 &--outline-primary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n }\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n\n &--outline-secondary,\n &--outline-dark {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n\n /* outline: 0px solid var(--hds-ui-colors-white); */\n }\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n}\n","/**\n * Block\n */\n\n.hds-link {\n text-decoration: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n transition: all 0.1s ease;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n\n & .hds-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n }\n }\n\n /**\n * Modifers\n */\n\n &--inverted {\n color: var(--hds-ui-colors-white);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentcolor;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n border-color: currentcolor;\n }\n\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentcolor;\n border-color: currentcolor;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n }\n\n &--small {\n font: var(--hds-typography-body-small);\n }\n\n &--large {\n font: var(--hds-typography-header-h3);\n }\n\n &--no-underline {\n font: var(--hds-fonts-posten-sans-medium);\n color: var(--hds-brand-colors-dark);\n text-decoration: none;\n border-bottom: none;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n }\n }\n\n &--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n }\n }\n}\n","/**\n * Block\n */\n\n.hds-badge {\n display: inline-block;\n background-color: var(--hds-brand-colors-lighter);\n border: var(--hds-stroke-default) solid var(--hds-brand-colors-lighter);\n border-radius: var(--hds-border-radius);\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n color: var(--hds-brand-colors-dark);\n text-transform: uppercase;\n line-height: 1.1;\n font-size: 12px; /* For now, this might be changed later */\n font-family: var(--hds-fonts-posten-sans-medium);\n -moz-osx-font-smoothing: subpixel-antialiased;\n -webkit-font-smoothing: subpixel-antialiased;\n vertical-align: 10%;\n\n /**\n * Modifiers\n */\n\n /* Variations */\n\n /* Size variations */\n\n &--small {\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n }\n\n &--smaller {\n padding: 2px var(--hds-spacing-small-1);\n }\n\n /* Color variations */\n\n &--primary {\n /* Default */\n background-color: var(--hds-brand-colors-lighter);\n border-color: var(--hds-brand-colors-lighter);\n color: var(--hds-brand-colors-dark);\n }\n\n &--dark {\n background-color: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n }\n\n &--white {\n background-color: var(--hds-ui-colors-white);\n border-color: var(--hds-ui-colors-white);\n color: var(--hds-brand-colors-dark);\n }\n\n &--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n border-color: var(--hds-ui-colors-warning-yellow);\n color: var(--hds-brand-link-colors-text);\n }\n}\n",".hds-typography-h2-display {\n font: var(--hds-brand-typography-h1-display);\n}\n\n.hds-typography-h1 {\n font: var(--hds-brand-typography-h1);\n\n &.hds-typography-h1--spacing {\n margin-top: var(--hds-spacing-large-2);\n }\n}\n\n.hds-typography-h2 {\n font: var(--hds-brand-typography-h2);\n\n &.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-large-2);\n }\n\n .hds-typography-h1 ~ &.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-medium-3);\n }\n}\n\n.hds-typography-h3 {\n font: var(--hds-typography-header-h3);\n\n &.hds-typography-h3--title {\n font: var(--hds-typography-header-h3-title);\n }\n\n &.hds-typography-h3--spacing {\n margin-top: var(--hds-spacing-large-2);\n }\n}\n\n.hds-typography-body {\n font: var(--hds-typography-body);\n\n &.hds-typography-body--title {\n font: var(--hds-typography-body-title);\n }\n\n &.hds-typography-body--spacing {\n margin-top: var(--hds-spacing-medium-2);\n }\n}\n\n.hds-typography-body-small {\n font: var(--hds-typography-body-small);\n\n &.hds-typography-body-small--title {\n font: var(--hds-typography-body-small-title);\n }\n\n &.hds-typography-body-small--spacing {\n margin-top: var(--hds-spacing-medium-2);\n }\n}\n\n.hds-typography-caption {\n font: var(--hds-typography-caption);\n\n &.hds-typography-caption--title {\n font: var(--hds-typography-caption-title);\n }\n\n &.hds-typography-caption--spacing {\n margin-top: var(--hds-spacing-medium-2);\n }\n}\n\n.hds-typography-technical {\n font: var(--hds-typography-technical);\n\n &.hds-typography-technical--title {\n font: var(--hds-typography-technical-title);\n }\n\n &.hds-typography-technical--spacing {\n margin-top: var(--hds-spacing-small-1);\n }\n\n @media (min-width: 940px) {\n &.hds-typography-technical--spacing {\n margin-top: var(--hds-spacing-small-2);\n }\n }\n}\n","@import url(\"base.css\");\n@import url(\"button/button.scss\");\n@import url(\"link/link.scss\");\n@import url(\"badge/badge.scss\");\n@import url(\"typography/typography.css\");\n"],"names":[],"version":3,"file":"index.css.map"}
@@ -1,2 +1,2 @@
1
- .hds-link{border-bottom:var(--hds-stroke-default)solid var(--hds-brand-link-colors-underline);fill:var(--hds-brand-link-colors-text);color:var(--hds-brand-link-colors-text);cursor:pointer;text-decoration:none;transition:all .1s}.hds-link:hover,.hds-link:active{color:var(--hds-brand-link-colors-hover);fill:var(--hds-brand-link-colors-hover);border-color:var(--hds-brand-link-colors-underline-hover)}.hds-link:hover .hw-link__text,.hds-link:active .hw-link__text{border-color:var(--hds-brand-link-colors-underline-hover)}.hds-link--inverted{color:var(--hds-ui-colors-white);-webkit-text-decoration-color:var(--hds-brand-colors-signature);-webkit-text-decoration-color:var(--hds-brand-colors-signature);text-decoration-color:var(--hds-brand-colors-signature);border-color:currentColor}.hds-link--inverted:hover,.hds-link--inverted:active{color:var(--hds-brand-colors-light);border-color:currentColor}.hds-link--inverted:disabled{color:var(--hds-ui-colors-dark-grey);fill:currentColor;cursor:default;border-color:currentColor;box-shadow:none!important;outline:0!important}.hds-link--small{font:var(--hds-typography-body-small)}.hds-link--large{font:var(--hds-typography-header-h3)}.hds-link--no-underline{font-family:var(--hw-font-primary-medium);color:var(--hds-brand-colors-dark);border-bottom:none;text-decoration:none}.hds-link--no-underline:hover{color:var(--hds-brand-colors-dark);text-decoration:underline;-webkit-text-decoration-color:var(--hds-brand-colors-dark);-webkit-text-decoration-color:var(--hds-brand-colors-dark);text-decoration-color:var(--hds-brand-colors-dark);border-bottom:none}.hds-link--solid{color:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-link--solid:hover,.hds-link--solid:active{color:var(--hds-ui-colors-black-hover);border-color:var(--hds-ui-colors-black-hover)}
1
+ .hds-link{border-bottom:var(--hds-stroke-default)solid var(--hds-brand-link-colors-underline);fill:var(--hds-brand-link-colors-text);color:var(--hds-brand-link-colors-text);cursor:pointer;text-decoration:none;transition:all .1s}.hds-link:hover,.hds-link:active{color:var(--hds-brand-link-colors-hover);fill:var(--hds-brand-link-colors-hover);border-color:var(--hds-brand-link-colors-underline-hover)}.hds-link:hover .hds-link__text,.hds-link:active .hds-link__text{border-color:var(--hds-brand-link-colors-underline-hover)}.hds-link--inverted{color:var(--hds-ui-colors-white);-webkit-text-decoration-color:var(--hds-brand-colors-signature);-webkit-text-decoration-color:var(--hds-brand-colors-signature);text-decoration-color:var(--hds-brand-colors-signature);border-color:currentColor}.hds-link--inverted:hover,.hds-link--inverted:active{color:var(--hds-brand-colors-light);border-color:currentColor}.hds-link--inverted:disabled{color:var(--hds-ui-colors-dark-grey);fill:currentColor;cursor:default;border-color:currentColor;box-shadow:none!important;outline:0!important}.hds-link--small{font:var(--hds-typography-body-small)}.hds-link--large{font:var(--hds-typography-header-h3)}.hds-link--no-underline{font:var(--hds-fonts-posten-sans-medium);color:var(--hds-brand-colors-dark);border-bottom:none;text-decoration:none}.hds-link--no-underline:hover{color:var(--hds-brand-colors-dark);text-decoration:underline;-webkit-text-decoration-color:var(--hds-brand-colors-dark);-webkit-text-decoration-color:var(--hds-brand-colors-dark);text-decoration-color:var(--hds-brand-colors-dark);border-bottom:none}.hds-link--solid{color:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-link--solid:hover,.hds-link--solid:active{color:var(--hds-ui-colors-black-hover);border-color:var(--hds-ui-colors-black-hover)}
2
2
  /*# sourceMappingURL=link.css.map */
@@ -1 +1 @@
1
- {"mappings":"ACIA,oOAQE,4KAME,yHASF,uQAIE,mHAKA,2KAUF,uDAIA,sDAIA,6IAME,uRAQF,0FAGE","sources":["link/link.css","packages/css/link/link.scss"],"sourcesContent":[".hds-link {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n cursor: pointer;\n text-decoration: none;\n transition: all .1s;\n}\n\n.hds-link:hover, .hds-link:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.hds-link:hover .hw-link__text, .hds-link:active .hw-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.hds-link--inverted {\n color: var(--hds-ui-colors-white);\n -webkit-text-decoration-color: var(--hds-brand-colors-signature);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n}\n\n.hds-link--inverted:hover, .hds-link--inverted:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n}\n\n.hds-link--inverted:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n cursor: default;\n border-color: currentColor;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.hds-link--small {\n font: var(--hds-typography-body-small);\n}\n\n.hds-link--large {\n font: var(--hds-typography-header-h3);\n}\n\n.hds-link--no-underline {\n font-family: var(--hw-font-primary-medium);\n color: var(--hds-brand-colors-dark);\n border-bottom: none;\n text-decoration: none;\n}\n\n.hds-link--no-underline:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n -webkit-text-decoration-color: var(--hds-brand-colors-dark);\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n}\n\n.hds-link--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n}\n\n.hds-link--solid:hover, .hds-link--solid:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n}\n\n/*# sourceMappingURL=link.css.map */\n","/**\n * Block\n */\n\n.hds-link {\n text-decoration: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n transition: all 0.1s ease;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n\n & .hw-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n }\n }\n\n /**\n * Modifers\n */\n\n &--inverted {\n color: var(--hds-ui-colors-white);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n }\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n border-color: currentColor;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n }\n\n &--small {\n font: var(--hds-typography-body-small);\n }\n\n &--large {\n font: var(--hds-typography-header-h3);\n }\n\n &--no-underline {\n font-family: var(--hw-font-primary-medium);\n color: var(--hds-brand-colors-dark);\n text-decoration: none;\n border-bottom: none;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n }\n }\n\n &--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n }\n }\n}\n"],"names":[],"version":3,"file":"link.css.map"}
1
+ {"mappings":"ACIA,oOAQE,4KAME,2HASF,uQAKE,mHAMA,2KAUF,uDAIA,sDAIA,4IAME,uRAQF,0FAIE","sources":["link/link.css","packages/css/src/link/link.scss"],"sourcesContent":[".hds-link {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n cursor: pointer;\n text-decoration: none;\n transition: all .1s;\n}\n\n.hds-link:hover, .hds-link:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.hds-link:hover .hds-link__text, .hds-link:active .hds-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.hds-link--inverted {\n color: var(--hds-ui-colors-white);\n -webkit-text-decoration-color: var(--hds-brand-colors-signature);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n}\n\n.hds-link--inverted:hover, .hds-link--inverted:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n}\n\n.hds-link--inverted:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n cursor: default;\n border-color: currentColor;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.hds-link--small {\n font: var(--hds-typography-body-small);\n}\n\n.hds-link--large {\n font: var(--hds-typography-header-h3);\n}\n\n.hds-link--no-underline {\n font: var(--hds-fonts-posten-sans-medium);\n color: var(--hds-brand-colors-dark);\n border-bottom: none;\n text-decoration: none;\n}\n\n.hds-link--no-underline:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n -webkit-text-decoration-color: var(--hds-brand-colors-dark);\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n}\n\n.hds-link--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n}\n\n.hds-link--solid:hover, .hds-link--solid:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n}\n\n/*# sourceMappingURL=link.css.map */\n","/**\n * Block\n */\n\n.hds-link {\n text-decoration: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n transition: all 0.1s ease;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n\n & .hds-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n }\n }\n\n /**\n * Modifers\n */\n\n &--inverted {\n color: var(--hds-ui-colors-white);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentcolor;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n border-color: currentcolor;\n }\n\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentcolor;\n border-color: currentcolor;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n }\n\n &--small {\n font: var(--hds-typography-body-small);\n }\n\n &--large {\n font: var(--hds-typography-header-h3);\n }\n\n &--no-underline {\n font: var(--hds-fonts-posten-sans-medium);\n color: var(--hds-brand-colors-dark);\n text-decoration: none;\n border-bottom: none;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n }\n }\n\n &--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n }\n }\n}\n"],"names":[],"version":3,"file":"link.css.map"}
package/dist/reset.css ADDED
@@ -0,0 +1,2 @@
1
+ *,:before,:after{box-sizing:border-box;background-repeat:no-repeat}:before,:after{-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;overflow-wrap:break-word;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;line-height:1.5}:where(body){margin:0}:where(h1){margin:.67em 0;font-size:2em}:where(dl,ol,ul) :where(dl,ol,ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(nav li):before{content:"​";float:left}:where(pre){font-family:monospace;font-size:1em;overflow:auto}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,select){margin:0}:where(button,[type=button i],[type=reset i],[type=submit i]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;margin:0}:where([type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){color:#000;background-color:#fff;border:solid;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;margin:auto;padding:1em;position:absolute;left:0;right:0}:where(dialog:not([open])){display:none}:where(details>summary:first-of-type){display:list-item}:where([aria-busy=true i]){cursor:progress}:where([aria-controls]){cursor:pointer}:where([aria-disabled=true i],[disabled]){cursor:not-allowed}:where([aria-hidden=false i][hidden]){display:initial}:where([aria-hidden=false i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}
2
+ /*# sourceMappingURL=reset.css.map */
@@ -0,0 +1 @@
1
+ {"mappings":"ACQA,mEAYA,8HAeA,uJAiBA,sBASA,wCAYA,2CASA,kCASA,yDASA,+CAWA,8DAaA,8FASA,oCASA,0DASA,4BAWA,gEAQA,iCAQA,0CAaA,0EAaA,qCAQA,wFAQA,0CAQA,yCASA,0CAUA,yEASA,wCAAA,wCASA,sDASA,oDASA,oEAYA,0MAeA,wCAQA,wDAWA,2CAQA,uCASA,6DASA,sDAIA","sources":["reset.css","node_modules/sanitize.css/sanitize.css","packages/css/src/reset.css"],"sourcesContent":["*, :before, :after {\n box-sizing: border-box;\n background-repeat: no-repeat;\n}\n\n:before, :after {\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n vertical-align: inherit;\n}\n\n:where(:root) {\n cursor: default;\n overflow-wrap: break-word;\n tab-size: 4;\n -webkit-tap-highlight-color: transparent;\n -webkit-text-size-adjust: 100%;\n line-height: 1.5;\n}\n\n:where(body) {\n margin: 0;\n}\n\n:where(h1) {\n margin: .67em 0;\n font-size: 2em;\n}\n\n:where(dl, ol, ul) :where(dl, ol, ul) {\n margin: 0;\n}\n\n:where(hr) {\n color: inherit;\n height: 0;\n}\n\n:where(nav) :where(ol, ul) {\n padding: 0;\n list-style-type: none;\n}\n\n:where(nav li):before {\n content: \"​\";\n float: left;\n}\n\n:where(pre) {\n font-family: monospace;\n font-size: 1em;\n overflow: auto;\n}\n\n:where(abbr[title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n:where(b, strong) {\n font-weight: bolder;\n}\n\n:where(code, kbd, samp) {\n font-family: monospace;\n font-size: 1em;\n}\n\n:where(small) {\n font-size: 80%;\n}\n\n:where(audio, canvas, iframe, img, svg, video) {\n vertical-align: middle;\n}\n\n:where(iframe) {\n border-style: none;\n}\n\n:where(svg:not([fill])) {\n fill: currentColor;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-color: inherit;\n text-indent: 0;\n}\n\n:where(button, input, select) {\n margin: 0;\n}\n\n:where(button, [type=\"button\" i], [type=\"reset\" i], [type=\"submit\" i]) {\n -webkit-appearance: button;\n}\n\n:where(fieldset) {\n border: 1px solid #a0a0a0;\n}\n\n:where(progress) {\n vertical-align: baseline;\n}\n\n:where(textarea) {\n resize: vertical;\n margin: 0;\n}\n\n:where([type=\"search\" i]) {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n}\n\n::-webkit-inner-spin-button {\n height: auto;\n}\n\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n::-webkit-input-placeholder {\n color: inherit;\n opacity: .54;\n}\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\n:where(dialog) {\n color: #000;\n background-color: #fff;\n border: solid;\n width: -moz-fit-content;\n width: fit-content;\n height: -moz-fit-content;\n height: fit-content;\n margin: auto;\n padding: 1em;\n position: absolute;\n left: 0;\n right: 0;\n}\n\n:where(dialog:not([open])) {\n display: none;\n}\n\n:where(details > summary:first-of-type) {\n display: list-item;\n}\n\n:where([aria-busy=\"true\" i]) {\n cursor: progress;\n}\n\n:where([aria-controls]) {\n cursor: pointer;\n}\n\n:where([aria-disabled=\"true\" i], [disabled]) {\n cursor: not-allowed;\n}\n\n:where([aria-hidden=\"false\" i][hidden]) {\n display: initial;\n}\n\n:where([aria-hidden=\"false\" i][hidden]:not(:focus)) {\n clip: rect(0, 0, 0, 0);\n position: absolute;\n}\n\n\n\n/*# sourceMappingURL=reset.css.map */\n","/* Document\n * ========================================================================== */\n\n/**\n * 1. Add border box sizing in all browsers (opinionated).\n * 2. Backgrounds do not repeat by default (opinionated).\n */\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n background-repeat: no-repeat; /* 2 */\n}\n\n/**\n * 1. Add text decoration inheritance in all browsers (opinionated).\n * 2. Add vertical alignment inheritance in all browsers (opinionated).\n */\n\n::before,\n::after {\n text-decoration: inherit; /* 1 */\n vertical-align: inherit; /* 2 */\n}\n\n/**\n * 1. Use the default cursor in all browsers (opinionated).\n * 2. Change the line height in all browsers (opinionated).\n * 3. Breaks words to prevent overflow in all browsers (opinionated).\n * 4. Use a 4-space tab width in all browsers (opinionated).\n * 5. Remove the grey highlight on links in iOS (opinionated).\n * 6. Prevent adjustments of font size after orientation changes in iOS.\n */\n\n:where(:root) {\n cursor: default; /* 1 */\n line-height: 1.5; /* 2 */\n overflow-wrap: break-word; /* 3 */\n -moz-tab-size: 4; /* 4 */\n tab-size: 4; /* 4 */\n -webkit-tap-highlight-color: transparent; /* 5 */\n -webkit-text-size-adjust: 100%; /* 6 */\n}\n\n/* Sections\n * ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\n:where(body) {\n margin: 0;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Edge, Firefox, and Safari.\n */\n\n:where(h1) {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n * ========================================================================== */\n\n/**\n * Remove the margin on nested lists in Chrome, Edge, and Safari.\n */\n\n:where(dl, ol, ul) :where(dl, ol, ul) {\n margin: 0;\n}\n\n/**\n * 1. Correct the inheritance of border color in Firefox.\n * 2. Add the correct box sizing in Firefox.\n */\n\n:where(hr) {\n color: inherit; /* 1 */\n height: 0; /* 2 */\n}\n\n/**\n * Remove the list style on navigation lists in all browsers (opinionated).\n */\n\n:where(nav) :where(ol, ul) {\n list-style-type: none;\n padding: 0;\n}\n\n/**\n * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).\n */\n\n:where(nav li)::before {\n content: \"\\200B\";\n float: left;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n * 3. Prevent overflow of the container in all browsers (opinionated).\n */\n\n:where(pre) {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n overflow: auto; /* 3 */\n}\n\n/* Text-level semantics\n * ========================================================================== */\n\n/**\n * Add the correct text decoration in Safari.\n */\n\n:where(abbr[title]) {\n text-decoration: underline;\n text-decoration: underline dotted;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\n:where(b, strong) {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\n:where(code, kbd, samp) {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\n:where(small) {\n font-size: 80%;\n}\n\n/* Embedded content\n * ========================================================================== */\n\n/*\n * Change the alignment on media elements in all browsers (opinionated).\n */\n\n:where(audio, canvas, iframe, img, svg, video) {\n vertical-align: middle;\n}\n\n/**\n * Remove the border on iframes in all browsers (opinionated).\n */\n\n:where(iframe) {\n border-style: none;\n}\n\n/**\n * Change the fill color to match the text color in all browsers (opinionated).\n */\n\n:where(svg:not([fill])) {\n fill: currentColor;\n}\n\n/* Tabular data\n * ========================================================================== */\n\n/**\n * 1. Collapse border spacing in all browsers (opinionated).\n * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.\n * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.\n */\n\n:where(table) {\n border-collapse: collapse; /* 1 */\n border-color: inherit; /* 2 */\n text-indent: 0; /* 3 */\n}\n\n/* Forms\n * ========================================================================== */\n\n/**\n * Remove the margin on controls in Safari.\n */\n\n:where(button, input, select) {\n margin: 0;\n}\n\n/**\n * Correct the inability to style buttons in iOS and Safari.\n */\n\n:where(button, [type=\"button\" i], [type=\"reset\" i], [type=\"submit\" i]) {\n -webkit-appearance: button;\n}\n\n/**\n * Change the inconsistent appearance in all browsers (opinionated).\n */\n\n:where(fieldset) {\n border: 1px solid #a0a0a0;\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Edge, and Firefox.\n */\n\n:where(progress) {\n vertical-align: baseline;\n}\n\n/**\n * 1. Remove the margin in Firefox and Safari.\n * 3. Change the resize direction in all browsers (opinionated).\n */\n\n:where(textarea) {\n margin: 0; /* 1 */\n resize: vertical; /* 3 */\n}\n\n/**\n * 1. Correct the odd appearance in Chrome, Edge, and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n:where([type=\"search\" i]) {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Safari.\n */\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * Correct the text style of placeholders in Chrome, Edge, and Safari.\n */\n\n::-webkit-input-placeholder {\n color: inherit;\n opacity: 0.54;\n}\n\n/**\n * Remove the inner padding in Chrome, Edge, and Safari on macOS.\n */\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style upload buttons in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n * ========================================================================== */\n\n/*\n * Add the correct styles in Safari.\n */\n\n:where(dialog) {\n background-color: white;\n border: solid;\n color: black;\n height: -moz-fit-content;\n height: fit-content;\n left: 0;\n margin: auto;\n padding: 1em;\n position: absolute;\n right: 0;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n:where(dialog:not([open])) {\n display: none;\n}\n\n/*\n * Add the correct display in Safari.\n */\n\n:where(details > summary:first-of-type) {\n display: list-item;\n}\n\n/* Accessibility\n * ========================================================================== */\n\n/**\n * Change the cursor on busy elements in all browsers (opinionated).\n */\n\n:where([aria-busy=\"true\" i]) {\n cursor: progress;\n}\n\n/*\n * Change the cursor on control elements in all browsers (opinionated).\n */\n\n:where([aria-controls]) {\n cursor: pointer;\n}\n\n/*\n * Change the cursor on disabled, not-editable, or otherwise\n * inoperable elements in all browsers (opinionated).\n */\n\n:where([aria-disabled=\"true\" i], [disabled]) {\n cursor: not-allowed;\n}\n\n/*\n * Change the display on visually hidden accessible elements\n * in all browsers (opinionated).\n */\n\n:where([aria-hidden=\"false\" i][hidden]) {\n display: initial;\n}\n\n:where([aria-hidden=\"false\" i][hidden]:not(:focus)) {\n clip: rect(0, 0, 0, 0);\n position: absolute;\n}\n","@import url(\"../../../node_modules/sanitize.css/sanitize\");\n"],"names":[],"version":3,"file":"reset.css.map"}
package/dist/scoped.css CHANGED
@@ -1,2 +1,2 @@
1
- @import "base.css";.kp-decorator-header-and-footer .hds-button{-webkit-font-smoothing:antialiased;-webkit-appearance:button;box-sizing:border-box;padding:var(--hds-spacing-small-3)var(--hds-spacing-medium-2);border-radius:var(--hds-border-radius);background:var(--hds-ui-colors-grey);border-width:0;border-color:var(--hds-ui-colors-grey);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text);font:var(--hds-typography-body-small);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);text-align:center;cursor:pointer;word-break:normal;display:inline-block}.kp-decorator-header-and-footer .hds-button:disabled,.kp-decorator-header-and-footer .hds-button[disabled],.kp-decorator-header-and-footer .hds-button[disabled]:active{cursor:default;color:var(--hds-ui-colors-dark-grey)!important;fill:var(--hds-ui-colors-dark-grey)!important;background:var(--hds-ui-colors-grey)!important;border-color:var(--hds-ui-colors-grey)!important;box-shadow:none!important;outline:0!important}.kp-decorator-header-and-footer .hds-button--large{height:58px;padding:19px 24px;font-size:18px}.kp-decorator-header-and-footer .hds-button--large i,.kp-decorator-header-and-footer .hds-button--large svg{margin-right:12px}.kp-decorator-header-and-footer .hds-button--medium{height:50px;padding:15px 20px;font-size:18px}.kp-decorator-header-and-footer .hds-button--medium i,.kp-decorator-header-and-footer .hds-button--medium svg{margin-right:10px}.kp-decorator-header-and-footer .hds-button--small{height:44px;padding:12px 16px;font-size:16px}.kp-decorator-header-and-footer .hds-button--small i,.kp-decorator-header-and-footer .hds-button--small svg{margin-right:8px}.kp-decorator-header-and-footer .hds-button--full{width:100%}@media (max-width:720px){.kp-decorator-header-and-footer .hds-button--mobile-full{width:100%}}.kp-decorator-header-and-footer .hds-button--primary{background:var(--hds-brand-colors-signature);border-color:var(--hds-brand-colors-signature);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text)}.kp-decorator-header-and-footer .hds-button--primary:hover,.kp-decorator-header-and-footer .hds-button--primary:active{background:var(--hds-brand-colors-signature-hover);border-color:var(--hds-brand-colors-signature);outline:0px solid var(--hds-brand-colors-signature-hover)}.kp-decorator-header-and-footer .hds-button--primary:active{background:var(--hds-brand-colors-signature)!important}.kp-decorator-header-and-footer .hds-button--secondary{background:var(--hds-brand-colors-darker);border-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.kp-decorator-header-and-footer .hds-button--secondary:hover,.kp-decorator-header-and-footer .hds-button--secondary:active{background:var(--hds-ui-colors-black);outline:0px solid var(--hds-ui-colors-black)}.kp-decorator-header-and-footer .hds-button--secondary:active{background:var(--hds-brand-colors-darker)!important}.kp-decorator-header-and-footer .hds-button--outline{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark);background:0 0}.kp-decorator-header-and-footer .hds-button--outline:disabled,.kp-decorator-header-and-footer .hds-button--outline[disabled],.kp-decorator-header-and-footer .hds-button--outline[disabled]:active{background:0 0!important}.kp-decorator-header-and-footer .hds-button--outline:hover,.kp-decorator-header-and-footer .hds-button--outline:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black);background:0 0}.kp-decorator-header-and-footer .hds-button--outline:active{border-color:var(--hds-ui-colors-dark-grey)}.kp-decorator-header-and-footer .hds-button--outline-white{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background:0 0}.kp-decorator-header-and-footer .hds-button--outline-white:hover,.kp-decorator-header-and-footer .hds-button--outline-white:active{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.kp-decorator-header-and-footer .hds-button--outline-primary{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background:0 0}.kp-decorator-header-and-footer .hds-button--outline-primary:hover,.kp-decorator-header-and-footer .hds-button--outline-primary:active{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark)}.kp-decorator-header-and-footer .hds-button--outline-primary:disabled,.kp-decorator-header-and-footer .hds-button--outline-primary[disabled],.kp-decorator-header-and-footer .hds-button--outline-primary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.kp-decorator-header-and-footer .hds-button--outline-secondary,.kp-decorator-header-and-footer .hds-button--outline-dark{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-darker);color:var(--hds-brand-colors-darker);fill:var(--hds-brand-colors-darker);outline-offset:3px;background:0 0}.kp-decorator-header-and-footer .hds-button--outline-secondary:hover,.kp-decorator-header-and-footer .hds-button--outline-dark:hover,.kp-decorator-header-and-footer .hds-button--outline-secondary:active,.kp-decorator-header-and-footer .hds-button--outline-dark:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border:var(--hds-stroke-thick)solid var(--hds-ui-colors-black)}.kp-decorator-header-and-footer .hds-button--outline-secondary:disabled,.kp-decorator-header-and-footer .hds-button--outline-dark:disabled,.kp-decorator-header-and-footer .hds-button--outline-secondary[disabled],.kp-decorator-header-and-footer [disabled].hds-button--outline-dark,.kp-decorator-header-and-footer .hds-button--outline-secondary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.kp-decorator-header-and-footer .hds-link{border-bottom:var(--hds-stroke-default)solid var(--hds-brand-link-colors-underline);fill:var(--hds-brand-link-colors-text);color:var(--hds-brand-link-colors-text);cursor:pointer;text-decoration:none;transition:all .1s}.kp-decorator-header-and-footer .hds-link:hover,.kp-decorator-header-and-footer .hds-link:active{color:var(--hds-brand-link-colors-hover);fill:var(--hds-brand-link-colors-hover);border-color:var(--hds-brand-link-colors-underline-hover)}.kp-decorator-header-and-footer .hds-link:hover .hw-link__text,.kp-decorator-header-and-footer .hds-link:active .hw-link__text{border-color:var(--hds-brand-link-colors-underline-hover)}.kp-decorator-header-and-footer .hds-link--inverted{color:var(--hds-ui-colors-white);-webkit-text-decoration-color:var(--hds-brand-colors-signature);-webkit-text-decoration-color:var(--hds-brand-colors-signature);text-decoration-color:var(--hds-brand-colors-signature);border-color:currentColor}.kp-decorator-header-and-footer .hds-link--inverted:hover,.kp-decorator-header-and-footer .hds-link--inverted:active{color:var(--hds-brand-colors-light);border-color:currentColor}.kp-decorator-header-and-footer .hds-link--inverted:disabled{color:var(--hds-ui-colors-dark-grey);fill:currentColor;cursor:default;border-color:currentColor;box-shadow:none!important;outline:0!important}.kp-decorator-header-and-footer .hds-link--small{font:var(--hds-typography-body-small)}.kp-decorator-header-and-footer .hds-link--large{font:var(--hds-typography-header-h3)}.kp-decorator-header-and-footer .hds-link--no-underline{font-family:var(--hw-font-primary-medium);color:var(--hds-brand-colors-dark);border-bottom:none;text-decoration:none}.kp-decorator-header-and-footer .hds-link--no-underline:hover{color:var(--hds-brand-colors-dark);text-decoration:underline;-webkit-text-decoration-color:var(--hds-brand-colors-dark);-webkit-text-decoration-color:var(--hds-brand-colors-dark);text-decoration-color:var(--hds-brand-colors-dark);border-bottom:none}.kp-decorator-header-and-footer .hds-link--solid{color:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.kp-decorator-header-and-footer .hds-link--solid:hover,.kp-decorator-header-and-footer .hds-link--solid:active{color:var(--hds-ui-colors-black-hover);border-color:var(--hds-ui-colors-black-hover)}
1
+ .kp-decorator-header-and-footer .hds-button{-webkit-font-smoothing:antialiased;-webkit-appearance:button;box-sizing:border-box;padding:var(--hds-spacing-small-3)var(--hds-spacing-medium-2);border-radius:var(--hds-border-radius);background:var(--hds-ui-colors-grey);border-width:0;border-color:var(--hds-ui-colors-grey);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text);font:var(--hds-typography-body-title);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);text-align:center;cursor:pointer;word-break:normal;display:inline-block}.kp-decorator-header-and-footer .hds-button:disabled,.kp-decorator-header-and-footer .hds-button[disabled],.kp-decorator-header-and-footer .hds-button[disabled]:active{cursor:default;color:var(--hds-ui-colors-dark-grey)!important;fill:var(--hds-ui-colors-dark-grey)!important;background:var(--hds-ui-colors-grey)!important;border-color:var(--hds-ui-colors-grey)!important;box-shadow:none!important;outline:0!important}.kp-decorator-header-and-footer .hds-button--large{height:58px;padding:16px 24px;font-size:18px;line-height:26px}.kp-decorator-header-and-footer .hds-button--large i,.kp-decorator-header-and-footer .hds-button--large svg{margin-right:12px}.kp-decorator-header-and-footer .hds-button--medium{height:50px;padding:12px 20px;font-size:18px;line-height:26px}.kp-decorator-header-and-footer .hds-button--medium i,.kp-decorator-header-and-footer .hds-button--medium svg{margin-right:10px}.kp-decorator-header-and-footer .hds-button--small{height:48px;padding:12px 16px;font-size:16px;line-height:24px}.kp-decorator-header-and-footer .hds-button--small i,.kp-decorator-header-and-footer .hds-button--small svg{margin-right:8px}.kp-decorator-header-and-footer .hds-button--full{width:100%}@media (max-width:720px){.kp-decorator-header-and-footer .hds-button--mobile-full{width:100%}}.kp-decorator-header-and-footer .hds-button--primary{background:var(--hds-brand-colors-signature);border-color:var(--hds-brand-colors-signature);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text)}.kp-decorator-header-and-footer .hds-button--primary:hover,.kp-decorator-header-and-footer .hds-button--primary:active{background:var(--hds-brand-colors-signature-hover);border-color:var(--hds-brand-colors-signature);outline:0 solid var(--hds-brand-colors-signature-hover)}.kp-decorator-header-and-footer .hds-button--primary:active{background:var(--hds-brand-colors-signature)!important}.kp-decorator-header-and-footer .hds-button--secondary{background:var(--hds-brand-colors-darker);border-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.kp-decorator-header-and-footer .hds-button--secondary:hover,.kp-decorator-header-and-footer .hds-button--secondary:active{background:var(--hds-ui-colors-black);outline:0 solid var(--hds-ui-colors-black)}.kp-decorator-header-and-footer .hds-button--secondary:active{background:var(--hds-brand-colors-darker)!important}.kp-decorator-header-and-footer .hds-button--outline{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark);background:0 0}.kp-decorator-header-and-footer .hds-button--outline:disabled,.kp-decorator-header-and-footer .hds-button--outline[disabled],.kp-decorator-header-and-footer .hds-button--outline[disabled]:active{background:0 0!important}.kp-decorator-header-and-footer .hds-button--outline:hover,.kp-decorator-header-and-footer .hds-button--outline:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black);background:0 0}.kp-decorator-header-and-footer .hds-button--outline:active{border-color:var(--hds-ui-colors-dark-grey)}.kp-decorator-header-and-footer .hds-button--outline-white{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background:0 0}.kp-decorator-header-and-footer .hds-button--outline-white:hover,.kp-decorator-header-and-footer .hds-button--outline-white:active{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.kp-decorator-header-and-footer .hds-button--outline-primary{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background:0 0}.kp-decorator-header-and-footer .hds-button--outline-primary:hover,.kp-decorator-header-and-footer .hds-button--outline-primary:active{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border:var(--hds-stroke-thick)solid var(--hds-brand-colors-dark)}.kp-decorator-header-and-footer .hds-button--outline-primary:disabled,.kp-decorator-header-and-footer .hds-button--outline-primary[disabled],.kp-decorator-header-and-footer .hds-button--outline-primary[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.kp-decorator-header-and-footer .hds-button--outline-secondary,.kp-decorator-header-and-footer .hds-button--outline-dark{border:var(--hds-stroke-thick)solid var(--hds-brand-colors-darker);color:var(--hds-brand-colors-darker);fill:var(--hds-brand-colors-darker);outline-offset:3px;background:0 0}.kp-decorator-header-and-footer .hds-button--outline-secondary:hover,.kp-decorator-header-and-footer .hds-button--outline-secondary:active,.kp-decorator-header-and-footer .hds-button--outline-dark:hover,.kp-decorator-header-and-footer .hds-button--outline-dark:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border:var(--hds-stroke-thick)solid var(--hds-ui-colors-black)}.kp-decorator-header-and-footer .hds-button--outline-secondary:disabled,.kp-decorator-header-and-footer .hds-button--outline-secondary[disabled],.kp-decorator-header-and-footer .hds-button--outline-secondary[disabled]:active,.kp-decorator-header-and-footer .hds-button--outline-dark:disabled,.kp-decorator-header-and-footer .hds-button--outline-dark[disabled],.kp-decorator-header-and-footer .hds-button--outline-dark[disabled]:active{border:var(--hds-stroke-thick)solid var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background:0 0!important}.kp-decorator-header-and-footer .hds-link{border-bottom:var(--hds-stroke-default)solid var(--hds-brand-link-colors-underline);fill:var(--hds-brand-link-colors-text);color:var(--hds-brand-link-colors-text);cursor:pointer;text-decoration:none;transition:all .1s}.kp-decorator-header-and-footer .hds-link:hover,.kp-decorator-header-and-footer .hds-link:active{color:var(--hds-brand-link-colors-hover);fill:var(--hds-brand-link-colors-hover);border-color:var(--hds-brand-link-colors-underline-hover)}.kp-decorator-header-and-footer .hds-link:hover .hds-link__text,.kp-decorator-header-and-footer .hds-link:active .hds-link__text{border-color:var(--hds-brand-link-colors-underline-hover)}.kp-decorator-header-and-footer .hds-link--inverted{color:var(--hds-ui-colors-white);-webkit-text-decoration-color:var(--hds-brand-colors-signature);-webkit-text-decoration-color:var(--hds-brand-colors-signature);text-decoration-color:var(--hds-brand-colors-signature);border-color:currentColor}.kp-decorator-header-and-footer .hds-link--inverted:hover,.kp-decorator-header-and-footer .hds-link--inverted:active{color:var(--hds-brand-colors-light);border-color:currentColor}.kp-decorator-header-and-footer .hds-link--inverted:disabled{color:var(--hds-ui-colors-dark-grey);fill:currentColor;cursor:default;border-color:currentColor;box-shadow:none!important;outline:0!important}.kp-decorator-header-and-footer .hds-link--small{font:var(--hds-typography-body-small)}.kp-decorator-header-and-footer .hds-link--large{font:var(--hds-typography-header-h3)}.kp-decorator-header-and-footer .hds-link--no-underline{font:var(--hds-fonts-posten-sans-medium);color:var(--hds-brand-colors-dark);border-bottom:none;text-decoration:none}.kp-decorator-header-and-footer .hds-link--no-underline:hover{color:var(--hds-brand-colors-dark);text-decoration:underline;-webkit-text-decoration-color:var(--hds-brand-colors-dark);-webkit-text-decoration-color:var(--hds-brand-colors-dark);text-decoration-color:var(--hds-brand-colors-dark);border-bottom:none}.kp-decorator-header-and-footer .hds-link--solid{color:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.kp-decorator-header-and-footer .hds-link--solid:hover,.kp-decorator-header-and-footer .hds-link--solid:active{color:var(--hds-ui-colors-black-hover);border-color:var(--hds-ui-colors-black-hover)}
2
2
  /*# sourceMappingURL=scoped.css.map */
@@ -1 +1 @@
1
- {"mappings":"ACCU,mBCIV,imBAGE,kaAgBA,gGAIE,8HAMF,iGAIE,gIAMF,gGAIE,6HAMF,6DAYE,yBAJF,qEAaA,oOAME,mRAOA,mHAKF,8MAME,8MAMA,kHAKF,0MAME,4NAMA,+OAQA,wGASF,gOAOE,0MAOF,sOAOE,6QAMA,2XAUF,uSAOE,4YAOA,wgBC1LJ,oQAQE,4OAME,yLASF,uSAIE,mLAKA,2MAUF,uFAIA,sFAIA,6KAME,uTAQF,0HAGE","sources":["scoped.css","packages/css/scoped.scss","packages/css/button/button.scss","packages/css/link/link.scss","packages/css/button/base.scss"],"sourcesContent":["@import \"base.css\";\n\n.kp-decorator-header-and-footer .hds-button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n background: var(--hds-ui-colors-grey);\n border-width: 0;\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-small);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center;\n cursor: pointer;\n word-break: normal;\n display: inline-block;\n}\n\n.kp-decorator-header-and-footer .hds-button:disabled, .kp-decorator-header-and-footer .hds-button[disabled], .kp-decorator-header-and-footer .hds-button[disabled]:active {\n cursor: default;\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--large {\n height: 58px;\n padding: 19px 24px;\n font-size: 18px;\n}\n\n.kp-decorator-header-and-footer .hds-button--large i, .kp-decorator-header-and-footer .hds-button--large svg {\n margin-right: 12px;\n}\n\n.kp-decorator-header-and-footer .hds-button--medium {\n height: 50px;\n padding: 15px 20px;\n font-size: 18px;\n}\n\n.kp-decorator-header-and-footer .hds-button--medium i, .kp-decorator-header-and-footer .hds-button--medium svg {\n margin-right: 10px;\n}\n\n.kp-decorator-header-and-footer .hds-button--small {\n height: 44px;\n padding: 12px 16px;\n font-size: 16px;\n}\n\n.kp-decorator-header-and-footer .hds-button--small i, .kp-decorator-header-and-footer .hds-button--small svg {\n margin-right: 8px;\n}\n\n.kp-decorator-header-and-footer .hds-button--full {\n width: 100%;\n}\n\n@media (max-width: 720px) {\n .kp-decorator-header-and-footer .hds-button--mobile-full {\n width: 100%;\n }\n}\n\n.kp-decorator-header-and-footer .hds-button--primary {\n background: var(--hds-brand-colors-signature);\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n}\n\n.kp-decorator-header-and-footer .hds-button--primary:hover, .kp-decorator-header-and-footer .hds-button--primary:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0px solid var(--hds-brand-colors-signature-hover);\n}\n\n.kp-decorator-header-and-footer .hds-button--primary:active {\n background: var(--hds-brand-colors-signature) !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n}\n\n.kp-decorator-header-and-footer .hds-button--secondary:hover, .kp-decorator-header-and-footer .hds-button--secondary:active {\n background: var(--hds-ui-colors-black);\n outline: 0px solid var(--hds-ui-colors-black);\n}\n\n.kp-decorator-header-and-footer .hds-button--secondary:active {\n background: var(--hds-brand-colors-darker) !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline:disabled, .kp-decorator-header-and-footer .hds-button--outline[disabled], .kp-decorator-header-and-footer .hds-button--outline[disabled]:active {\n background: none !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline:hover, .kp-decorator-header-and-footer .hds-button--outline:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline:active {\n border-color: var(--hds-ui-colors-dark-grey);\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-white {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-white:hover, .kp-decorator-header-and-footer .hds-button--outline-white:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-primary {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-primary:hover, .kp-decorator-header-and-footer .hds-button--outline-primary:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-primary:disabled, .kp-decorator-header-and-footer .hds-button--outline-primary[disabled], .kp-decorator-header-and-footer .hds-button--outline-primary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-secondary, .kp-decorator-header-and-footer .hds-button--outline-dark {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-secondary:hover, .kp-decorator-header-and-footer .hds-button--outline-dark:hover, .kp-decorator-header-and-footer .hds-button--outline-secondary:active, .kp-decorator-header-and-footer .hds-button--outline-dark:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-secondary:disabled, .kp-decorator-header-and-footer .hds-button--outline-dark:disabled, .kp-decorator-header-and-footer .hds-button--outline-secondary[disabled], .kp-decorator-header-and-footer [disabled].hds-button--outline-dark, .kp-decorator-header-and-footer .hds-button--outline-secondary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.kp-decorator-header-and-footer .hds-link {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n cursor: pointer;\n text-decoration: none;\n transition: all .1s;\n}\n\n.kp-decorator-header-and-footer .hds-link:hover, .kp-decorator-header-and-footer .hds-link:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.kp-decorator-header-and-footer .hds-link:hover .hw-link__text, .kp-decorator-header-and-footer .hds-link:active .hw-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.kp-decorator-header-and-footer .hds-link--inverted {\n color: var(--hds-ui-colors-white);\n -webkit-text-decoration-color: var(--hds-brand-colors-signature);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n}\n\n.kp-decorator-header-and-footer .hds-link--inverted:hover, .kp-decorator-header-and-footer .hds-link--inverted:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n}\n\n.kp-decorator-header-and-footer .hds-link--inverted:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n cursor: default;\n border-color: currentColor;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.kp-decorator-header-and-footer .hds-link--small {\n font: var(--hds-typography-body-small);\n}\n\n.kp-decorator-header-and-footer .hds-link--large {\n font: var(--hds-typography-header-h3);\n}\n\n.kp-decorator-header-and-footer .hds-link--no-underline {\n font-family: var(--hw-font-primary-medium);\n color: var(--hds-brand-colors-dark);\n border-bottom: none;\n text-decoration: none;\n}\n\n.kp-decorator-header-and-footer .hds-link--no-underline:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n -webkit-text-decoration-color: var(--hds-brand-colors-dark);\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n}\n\n.kp-decorator-header-and-footer .hds-link--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n}\n\n.kp-decorator-header-and-footer .hds-link--solid:hover, .kp-decorator-header-and-footer .hds-link--solid:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n}\n\n/*# sourceMappingURL=scoped.css.map */\n",".kp-decorator-header-and-footer {\n @import \"base.css\";\n @import \"button/button.scss\";\n @import \"link/link.scss\";\n}\n","@use \"base\";\n/**\n * Block\n */\n\n.hds-button {\n @include base.button;\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n\n /**\n * Modifiers: sizes\n */\n\n &--large {\n font-size: 18px;\n height: 58px;\n padding: 19px 24px;\n i,\n svg {\n margin-right: 12px;\n }\n }\n\n &--medium {\n font-size: 18px;\n height: 50px;\n padding: 15px 20px;\n i,\n svg {\n margin-right: 10px;\n }\n }\n\n &--small {\n font-size: 16px;\n height: 44px;\n padding: 12px 16px;\n i,\n svg {\n margin-right: 8px;\n }\n }\n\n &--full {\n width: 100%;\n }\n\n /**\n * Responsive modifiers\n */\n\n &--mobile-full {\n // TODO: Currently hardcoded due to css variables not available in media queries\n // Would be: --hds-breakpoints-medium\n // 🤷\n @media (max-width: 720px) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: types\n */\n\n &--primary {\n background: var(--hds-brand-colors-signature);\n border-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 &:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0px solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background: var(--hds-brand-colors-signature) !important;\n }\n }\n\n &--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover,\n &:active {\n background: var(--hds-ui-colors-black);\n outline: 0px solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background: var(--hds-brand-colors-darker) !important;\n }\n }\n\n &--outline {\n background: transparent;\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n background: none !important;\n }\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 background: none;\n }\n\n &:active {\n border-color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n &--outline-dark {\n @extend .hds-button--outline-secondary;\n }\n\n &--outline-white {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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 &--outline-primary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n }\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n\n &--outline-secondary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n /*outline: 0px solid var(--hds-ui-colors-white);*/\n }\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n}\n","/**\n * Block\n */\n\n.hds-link {\n text-decoration: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n transition: all 0.1s ease;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n\n & .hw-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n }\n }\n\n /**\n * Modifers\n */\n\n &--inverted {\n color: var(--hds-ui-colors-white);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n }\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n border-color: currentColor;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n }\n\n &--small {\n font: var(--hds-typography-body-small);\n }\n\n &--large {\n font: var(--hds-typography-header-h3);\n }\n\n &--no-underline {\n font-family: var(--hw-font-primary-medium);\n color: var(--hds-brand-colors-dark);\n text-decoration: none;\n border-bottom: none;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n }\n }\n\n &--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n }\n }\n}\n","@mixin button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n display: inline-block;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n border-width: 0px;\n background: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-small);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center; /* Center text when this is an <a> */\n cursor: pointer;\n word-break: normal;\n}\n"],"names":[],"version":3,"file":"scoped.css.map"}
1
+ {"mappings":"AGAA,imBAmBE,kaAgBA,iHAME,8HAMF,kHAME,gIAMF,iHAME,6HAMF,6DAYE,yBAJF,qEAaA,oOAME,iRAOA,mHAKF,8MAME,4MAMA,kHAKF,0MAME,4NAMA,+OAQA,wGAKF,gOAOE,0MAOF,sOAOE,6QAOA,2XAUF,uSAQE,4YASA,mlBD3MJ,oQAQE,4OAME,2LASF,uSAKE,mLAMA,2MAUF,uFAIA,sFAIA,4KAME,uTAQF,0HAIE","sources":["scoped.css","packages/css/src/scoped.scss","packages/css/src/link/link.scss","packages/css/src/button/button.scss"],"sourcesContent":[".kp-decorator-header-and-footer .hds-button {\n -webkit-font-smoothing: antialiased;\n -webkit-appearance: button;\n box-sizing: border-box;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n background: var(--hds-ui-colors-grey);\n border-width: 0;\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-title);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center;\n cursor: pointer;\n word-break: normal;\n display: inline-block;\n}\n\n.kp-decorator-header-and-footer .hds-button:disabled, .kp-decorator-header-and-footer .hds-button[disabled], .kp-decorator-header-and-footer .hds-button[disabled]:active {\n cursor: default;\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--large {\n height: 58px;\n padding: 16px 24px;\n font-size: 18px;\n line-height: 26px;\n}\n\n.kp-decorator-header-and-footer .hds-button--large i, .kp-decorator-header-and-footer .hds-button--large svg {\n margin-right: 12px;\n}\n\n.kp-decorator-header-and-footer .hds-button--medium {\n height: 50px;\n padding: 12px 20px;\n font-size: 18px;\n line-height: 26px;\n}\n\n.kp-decorator-header-and-footer .hds-button--medium i, .kp-decorator-header-and-footer .hds-button--medium svg {\n margin-right: 10px;\n}\n\n.kp-decorator-header-and-footer .hds-button--small {\n height: 48px;\n padding: 12px 16px;\n font-size: 16px;\n line-height: 24px;\n}\n\n.kp-decorator-header-and-footer .hds-button--small i, .kp-decorator-header-and-footer .hds-button--small svg {\n margin-right: 8px;\n}\n\n.kp-decorator-header-and-footer .hds-button--full {\n width: 100%;\n}\n\n@media (max-width: 720px) {\n .kp-decorator-header-and-footer .hds-button--mobile-full {\n width: 100%;\n }\n}\n\n.kp-decorator-header-and-footer .hds-button--primary {\n background: var(--hds-brand-colors-signature);\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n}\n\n.kp-decorator-header-and-footer .hds-button--primary:hover, .kp-decorator-header-and-footer .hds-button--primary:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n}\n\n.kp-decorator-header-and-footer .hds-button--primary:active {\n background: var(--hds-brand-colors-signature) !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n}\n\n.kp-decorator-header-and-footer .hds-button--secondary:hover, .kp-decorator-header-and-footer .hds-button--secondary:active {\n background: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n}\n\n.kp-decorator-header-and-footer .hds-button--secondary:active {\n background: var(--hds-brand-colors-darker) !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline:disabled, .kp-decorator-header-and-footer .hds-button--outline[disabled], .kp-decorator-header-and-footer .hds-button--outline[disabled]:active {\n background: none !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline:hover, .kp-decorator-header-and-footer .hds-button--outline:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline:active {\n border-color: var(--hds-ui-colors-dark-grey);\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-white {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-white:hover, .kp-decorator-header-and-footer .hds-button--outline-white:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-primary {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-primary:hover, .kp-decorator-header-and-footer .hds-button--outline-primary:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-primary:disabled, .kp-decorator-header-and-footer .hds-button--outline-primary[disabled], .kp-decorator-header-and-footer .hds-button--outline-primary[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-secondary, .kp-decorator-header-and-footer .hds-button--outline-dark {\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n background: none;\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-secondary:hover, .kp-decorator-header-and-footer .hds-button--outline-secondary:active, .kp-decorator-header-and-footer .hds-button--outline-dark:hover, .kp-decorator-header-and-footer .hds-button--outline-dark:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n}\n\n.kp-decorator-header-and-footer .hds-button--outline-secondary:disabled, .kp-decorator-header-and-footer .hds-button--outline-secondary[disabled], .kp-decorator-header-and-footer .hds-button--outline-secondary[disabled]:active, .kp-decorator-header-and-footer .hds-button--outline-dark:disabled, .kp-decorator-header-and-footer .hds-button--outline-dark[disabled], .kp-decorator-header-and-footer .hds-button--outline-dark[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: none !important;\n}\n\n.kp-decorator-header-and-footer .hds-link {\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n cursor: pointer;\n text-decoration: none;\n transition: all .1s;\n}\n\n.kp-decorator-header-and-footer .hds-link:hover, .kp-decorator-header-and-footer .hds-link:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.kp-decorator-header-and-footer .hds-link:hover .hds-link__text, .kp-decorator-header-and-footer .hds-link:active .hds-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n}\n\n.kp-decorator-header-and-footer .hds-link--inverted {\n color: var(--hds-ui-colors-white);\n -webkit-text-decoration-color: var(--hds-brand-colors-signature);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentColor;\n}\n\n.kp-decorator-header-and-footer .hds-link--inverted:hover, .kp-decorator-header-and-footer .hds-link--inverted:active {\n color: var(--hds-brand-colors-light);\n border-color: currentColor;\n}\n\n.kp-decorator-header-and-footer .hds-link--inverted:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentColor;\n cursor: default;\n border-color: currentColor;\n box-shadow: none !important;\n outline: 0 !important;\n}\n\n.kp-decorator-header-and-footer .hds-link--small {\n font: var(--hds-typography-body-small);\n}\n\n.kp-decorator-header-and-footer .hds-link--large {\n font: var(--hds-typography-header-h3);\n}\n\n.kp-decorator-header-and-footer .hds-link--no-underline {\n font: var(--hds-fonts-posten-sans-medium);\n color: var(--hds-brand-colors-dark);\n border-bottom: none;\n text-decoration: none;\n}\n\n.kp-decorator-header-and-footer .hds-link--no-underline:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n -webkit-text-decoration-color: var(--hds-brand-colors-dark);\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n}\n\n.kp-decorator-header-and-footer .hds-link--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n}\n\n.kp-decorator-header-and-footer .hds-link--solid:hover, .kp-decorator-header-and-footer .hds-link--solid:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n}\n\n/*# sourceMappingURL=scoped.css.map */\n","/* stylelint-disable no-invalid-position-at-import-rule -- It's fine */\n/* stylelint-disable scss/at-import-partial-extension -- It's fine */\n.kp-decorator-header-and-footer {\n @import \"button/button.scss\";\n @import \"link/link.scss\";\n}\n","/**\n * Block\n */\n\n.hds-link {\n text-decoration: none;\n border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);\n fill: var(--hds-brand-link-colors-text);\n color: var(--hds-brand-link-colors-text);\n transition: all 0.1s ease;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--hds-brand-link-colors-hover);\n fill: var(--hds-brand-link-colors-hover);\n border-color: var(--hds-brand-link-colors-underline-hover);\n\n & .hds-link__text {\n border-color: var(--hds-brand-link-colors-underline-hover);\n }\n }\n\n /**\n * Modifers\n */\n\n &--inverted {\n color: var(--hds-ui-colors-white);\n text-decoration-color: var(--hds-brand-colors-signature);\n border-color: currentcolor;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n border-color: currentcolor;\n }\n\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n fill: currentcolor;\n border-color: currentcolor;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n }\n\n &--small {\n font: var(--hds-typography-body-small);\n }\n\n &--large {\n font: var(--hds-typography-header-h3);\n }\n\n &--no-underline {\n font: var(--hds-fonts-posten-sans-medium);\n color: var(--hds-brand-colors-dark);\n text-decoration: none;\n border-bottom: none;\n\n &:hover {\n color: var(--hds-brand-colors-dark);\n text-decoration: underline;\n text-decoration-color: var(--hds-brand-colors-dark);\n border-bottom: none;\n }\n }\n\n &--solid {\n color: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black-hover);\n border-color: var(--hds-ui-colors-black-hover);\n }\n }\n}\n",".hds-button {\n -webkit-font-smoothing: antialiased;\n /* stylelint-disable-next-line property-no-vendor-prefix -- Not sure if we need this or not 🤷 */\n -webkit-appearance: button;\n box-sizing: border-box;\n display: inline-block;\n padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);\n border-radius: var(--hds-border-radius);\n border-width: 0;\n background: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n font: var(--hds-typography-body-title);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n text-align: center; /* Center text when this is an <a> */\n cursor: pointer;\n word-break: normal;\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n color: var(--hds-ui-colors-dark-grey) !important;\n fill: var(--hds-ui-colors-dark-grey) !important;\n background: var(--hds-ui-colors-grey) !important;\n border-color: var(--hds-ui-colors-grey) !important;\n outline: 0 !important;\n box-shadow: none !important;\n cursor: default;\n }\n\n /**\n * Modifiers: sizes\n */\n\n &--large {\n font-size: 18px; /* TODO Token: typography-body minimum value */\n line-height: 26px;\n height: 58px;\n padding: 16px 24px;\n\n i,\n svg {\n margin-right: 12px;\n }\n }\n\n &--medium {\n font-size: 18px; /* TODO Token: typography-body minimum value */\n line-height: 26px;\n height: 50px;\n padding: 12px 20px;\n\n i,\n svg {\n margin-right: 10px;\n }\n }\n\n &--small {\n font-size: 16px; /* TODO Token: typography-body-small minimum value */\n line-height: 24px;\n height: 48px;\n padding: 12px 16px;\n\n i,\n svg {\n margin-right: 8px;\n }\n }\n\n &--full {\n width: 100%;\n }\n\n /**\n * Responsive modifiers\n */\n\n &--mobile-full {\n // TODO: Currently hardcoded due to css variables not available in media queries\n // Would be: --hds-breakpoints-medium\n // 🤷\n @media (max-width: 720px) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: types\n */\n\n &--primary {\n background: var(--hds-brand-colors-signature);\n border-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 &:active {\n background: var(--hds-brand-colors-signature-hover);\n border-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background: var(--hds-brand-colors-signature) !important;\n }\n }\n\n &--secondary {\n background: var(--hds-brand-colors-darker);\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover,\n &:active {\n background: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background: var(--hds-brand-colors-darker) !important;\n }\n }\n\n &--outline {\n background: transparent;\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n background: none !important;\n }\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 background: none;\n }\n\n &:active {\n border-color: var(--hds-ui-colors-dark-grey);\n }\n }\n\n &--outline-white {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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 &--outline-primary {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);\n }\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n\n &--outline-secondary,\n &--outline-dark {\n background: transparent;\n border: var(--hds-stroke-thick) solid 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: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);\n\n /* outline: 0px solid var(--hds-ui-colors-white); */\n }\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background: transparent !important;\n }\n }\n}\n"],"names":[],"version":3,"file":"scoped.css.map"}
@@ -0,0 +1,2 @@
1
+ .hds-typography-h2-display{font:var(--hds-brand-typography-h1-display)}.hds-typography-h1{font:var(--hds-brand-typography-h1)}.hds-typography-h1.hds-typography-h1--spacing{margin-top:var(--hds-spacing-large-2)}.hds-typography-h2{font:var(--hds-brand-typography-h2)}.hds-typography-h2.hds-typography-h2--spacing{margin-top:var(--hds-spacing-large-2)}.hds-typography-h1~.hds-typography-h2.hds-typography-h2--spacing{margin-top:var(--hds-spacing-medium-3)}.hds-typography-h3{font:var(--hds-typography-header-h3)}.hds-typography-h3.hds-typography-h3--title{font:var(--hds-typography-header-h3-title)}.hds-typography-h3.hds-typography-h3--spacing{margin-top:var(--hds-spacing-large-2)}.hds-typography-body{font:var(--hds-typography-body)}.hds-typography-body.hds-typography-body--title{font:var(--hds-typography-body-title)}.hds-typography-body.hds-typography-body--spacing{margin-top:var(--hds-spacing-medium-2)}.hds-typography-body-small{font:var(--hds-typography-body-small)}.hds-typography-body-small.hds-typography-body-small--title{font:var(--hds-typography-body-small-title)}.hds-typography-body-small.hds-typography-body-small--spacing{margin-top:var(--hds-spacing-medium-2)}.hds-typography-caption{font:var(--hds-typography-caption)}.hds-typography-caption.hds-typography-caption--title{font:var(--hds-typography-caption-title)}.hds-typography-caption.hds-typography-caption--spacing{margin-top:var(--hds-spacing-medium-2)}.hds-typography-technical{font:var(--hds-typography-technical)}.hds-typography-technical.hds-typography-technical--title{font:var(--hds-typography-technical-title)}.hds-typography-technical.hds-typography-technical--spacing{margin-top:var(--hds-spacing-small-1)}@media (min-width:940px){.hds-typography-technical.hds-typography-technical--spacing{margin-top:var(--hds-spacing-small-2)}}
2
+ /*# sourceMappingURL=typography.css.map */
@@ -0,0 +1 @@
1
+ {"mappings":"ACAA,uEAIA,uDAGE,oFAKF,uDAGE,oFAIA,wGAKF,wDAGE,uFAIA,oFAKF,qDAGE,sFAIA,yFAKF,iEAGE,wGAIA,qGAKF,2DAGE,+FAIA,+FAKF,+DAGE,qGAIA,kGAIA,yBACE","sources":["typography/typography.css","packages/css/src/typography/typography.css"],"sourcesContent":[".hds-typography-h2-display {\n font: var(--hds-brand-typography-h1-display);\n}\n\n.hds-typography-h1 {\n font: var(--hds-brand-typography-h1);\n}\n\n.hds-typography-h1.hds-typography-h1--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-h2 {\n font: var(--hds-brand-typography-h2);\n}\n\n.hds-typography-h2.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-h1 ~ .hds-typography-h2.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-medium-3);\n}\n\n.hds-typography-h3 {\n font: var(--hds-typography-header-h3);\n}\n\n.hds-typography-h3.hds-typography-h3--title {\n font: var(--hds-typography-header-h3-title);\n}\n\n.hds-typography-h3.hds-typography-h3--spacing {\n margin-top: var(--hds-spacing-large-2);\n}\n\n.hds-typography-body {\n font: var(--hds-typography-body);\n}\n\n.hds-typography-body.hds-typography-body--title {\n font: var(--hds-typography-body-title);\n}\n\n.hds-typography-body.hds-typography-body--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-body-small {\n font: var(--hds-typography-body-small);\n}\n\n.hds-typography-body-small.hds-typography-body-small--title {\n font: var(--hds-typography-body-small-title);\n}\n\n.hds-typography-body-small.hds-typography-body-small--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-caption {\n font: var(--hds-typography-caption);\n}\n\n.hds-typography-caption.hds-typography-caption--title {\n font: var(--hds-typography-caption-title);\n}\n\n.hds-typography-caption.hds-typography-caption--spacing {\n margin-top: var(--hds-spacing-medium-2);\n}\n\n.hds-typography-technical {\n font: var(--hds-typography-technical);\n}\n\n.hds-typography-technical.hds-typography-technical--title {\n font: var(--hds-typography-technical-title);\n}\n\n.hds-typography-technical.hds-typography-technical--spacing {\n margin-top: var(--hds-spacing-small-1);\n}\n\n@media (min-width: 940px) {\n .hds-typography-technical.hds-typography-technical--spacing {\n margin-top: var(--hds-spacing-small-2);\n }\n}\n\n/*# sourceMappingURL=typography.css.map */\n",".hds-typography-h2-display {\n font: var(--hds-brand-typography-h1-display);\n}\n\n.hds-typography-h1 {\n font: var(--hds-brand-typography-h1);\n\n &.hds-typography-h1--spacing {\n margin-top: var(--hds-spacing-large-2);\n }\n}\n\n.hds-typography-h2 {\n font: var(--hds-brand-typography-h2);\n\n &.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-large-2);\n }\n\n .hds-typography-h1 ~ &.hds-typography-h2--spacing {\n margin-top: var(--hds-spacing-medium-3);\n }\n}\n\n.hds-typography-h3 {\n font: var(--hds-typography-header-h3);\n\n &.hds-typography-h3--title {\n font: var(--hds-typography-header-h3-title);\n }\n\n &.hds-typography-h3--spacing {\n margin-top: var(--hds-spacing-large-2);\n }\n}\n\n.hds-typography-body {\n font: var(--hds-typography-body);\n\n &.hds-typography-body--title {\n font: var(--hds-typography-body-title);\n }\n\n &.hds-typography-body--spacing {\n margin-top: var(--hds-spacing-medium-2);\n }\n}\n\n.hds-typography-body-small {\n font: var(--hds-typography-body-small);\n\n &.hds-typography-body-small--title {\n font: var(--hds-typography-body-small-title);\n }\n\n &.hds-typography-body-small--spacing {\n margin-top: var(--hds-spacing-medium-2);\n }\n}\n\n.hds-typography-caption {\n font: var(--hds-typography-caption);\n\n &.hds-typography-caption--title {\n font: var(--hds-typography-caption-title);\n }\n\n &.hds-typography-caption--spacing {\n margin-top: var(--hds-spacing-medium-2);\n }\n}\n\n.hds-typography-technical {\n font: var(--hds-typography-technical);\n\n &.hds-typography-technical--title {\n font: var(--hds-typography-technical-title);\n }\n\n &.hds-typography-technical--spacing {\n margin-top: var(--hds-spacing-small-1);\n }\n\n @media (min-width: 940px) {\n &.hds-typography-technical--spacing {\n margin-top: var(--hds-spacing-small-2);\n }\n }\n}\n"],"names":[],"version":3,"file":"typography.css.map"}
package/package.json CHANGED
@@ -1,27 +1,41 @@
1
1
  {
2
2
  "name": "@postenbring/hedwig-css",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "",
5
- "source": [
6
- "index.css",
7
- "base.css",
8
- "scoped.scss",
9
- "button/button.scss",
10
- "link/link.scss"
11
- ],
12
5
  "scripts": {
13
- "build": "parcel build",
14
- "dev": "parcel watch",
6
+ "build": "npm-run-all build:*",
7
+ "build:css": "parcel build --no-cache 'src/*.css' 'src/**/*.css' 'src/*.scss' 'src/**/*.scss'",
8
+ "build:typed-classname": "postcss dist/index.css --config ./typed-classname --no-map > /dev/null",
9
+ "dev": "npm-run-all -p dev:*",
10
+ "dev:css": "parcel watch --no-cache 'src/*.css' 'src/**/*.css' 'src/*.scss' 'src/**/*.scss'",
11
+ "dev:typed-classname": "chokidar 'dist/index.css' -c 'npm run build:typed-classname'",
12
+ "lint": "stylelint 'src/**/*.css' 'src/**/*.scss' --cache",
13
+ "lint:fix": "npm run lint -- --fix",
15
14
  "clean": "rm -rf .turbo && rm -rf .parcel-cache && rm -rf node_modules && rm -rf dist"
16
15
  },
16
+ "files": [
17
+ "dist/**",
18
+ "typed-classname.mjs",
19
+ "typed-classname.d.mts"
20
+ ],
17
21
  "license": "MIT",
18
22
  "devDependencies": {
19
- "@parcel/transformer-sass": "2.10.2",
23
+ "@parcel/transformer-sass": "2.10.3",
20
24
  "autoprefixer": "10.4.16",
21
- "parcel": "2.10.2",
25
+ "chokidar-cli": "3.0.0",
26
+ "npm-run-all": "4.1.5",
27
+ "parcel": "2.10.3",
22
28
  "postcss": "8.4.31",
29
+ "postcss-cli": "10.1.0",
30
+ "postcss-custom-properties": "13.3.2",
23
31
  "postcss-import": "15.1.0",
24
- "postcss-nested": "6.0.1"
32
+ "postcss-nested": "6.0.1",
33
+ "postcss-ts-classnames": "0.3.0",
34
+ "sanitize.css": "^13.0.0",
35
+ "stylelint": "15.11.0",
36
+ "stylelint-config-standard": "34.0.0",
37
+ "stylelint-config-standard-scss": "11.1.0",
38
+ "stylelint-value-no-unknown-custom-properties": "5.0.0"
25
39
  },
26
40
  "publishConfig": {
27
41
  "access": "public"
@@ -1,24 +0,0 @@
1
-
2
- > @postenbring/hedwig-css@0.0.2 build
3
- > parcel build
4
-
5
- Building...
6
-
7
- @parcel/transformer-css: Unknown at rule: @import
8
-
9
- /home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/scoped.scss:2:11
10
- 1 | .kp-decorator-header-and-footer {
11
- > 2 | @import "base.css";
12
- > | ^
13
- 3 | @import "button/button.scss";
14
- 4 | @import "link/link.scss";
15
-
16
- Bundling...
17
- Packaging & Optimizing...
18
- ✨ Built in 1.64s
19
-
20
- dist/index.css 6.66 KB 48ms
21
- dist/base.css 327 B 44ms
22
- dist/scoped.css 8.46 KB 47ms
23
- dist/button/button.css 4.6 KB 48ms
24
- dist/link/link.css 1.82 KB 45ms
package/CHANGELOG.md DELETED
@@ -1,15 +0,0 @@
1
- # @postenbring/hedwig-css
2
-
3
- ## 0.0.2
4
-
5
- ### Patch Changes
6
-
7
- - 1d84f3c: :sparkles: add Link component
8
- - 9d31ff5: fix font, transition, and responsive mobile width for button
9
- - a0a4916: use updated tokens and add base styling
10
-
11
- ## 0.0.1
12
-
13
- ### Patch Changes
14
-
15
- - start publishing
package/base.css DELETED
@@ -1,20 +0,0 @@
1
- /*
2
- * Based on hedwig global css
3
- * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css
4
- *
5
- * Scoped to the theme selectors, this way the global effects are only applied
6
- * where they are wanted
7
- */
8
- .hds-theme-posten,
9
- .hds-theme-bring {
10
- box-sizing: border-box;
11
- font: var(--hds-typography-body);
12
- fill: var(--hds-ui-colors-black);
13
- color: var(--hds-ui-colors-black);
14
- line-height: 1.4;
15
- cursor: auto;
16
-
17
- -moz-osx-font-smoothing: grayscale;
18
- -webkit-font-smoothing: antialiased;
19
- background: var(--hds-ui-colors-white);
20
- }
package/button/base.scss DELETED
@@ -1,18 +0,0 @@
1
- @mixin button {
2
- -webkit-font-smoothing: antialiased;
3
- -webkit-appearance: button;
4
- box-sizing: border-box;
5
- display: inline-block;
6
- padding: var(--hds-spacing-small-3) var(--hds-spacing-medium-2);
7
- border-radius: var(--hds-border-radius);
8
- border-width: 0px;
9
- background: var(--hds-ui-colors-grey);
10
- border-color: var(--hds-ui-colors-grey);
11
- color: var(--hds-brand-button-colors-text);
12
- fill: var(--hds-brand-button-colors-text);
13
- font: var(--hds-typography-body-small);
14
- transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);
15
- text-align: center; /* Center text when this is an <a> */
16
- cursor: pointer;
17
- word-break: normal;
18
- }
@@ -1,200 +0,0 @@
1
- @use "base";
2
- /**
3
- * Block
4
- */
5
-
6
- .hds-button {
7
- @include base.button;
8
-
9
- &:disabled,
10
- &[disabled],
11
- &[disabled]:active {
12
- color: var(--hds-ui-colors-dark-grey) !important;
13
- fill: var(--hds-ui-colors-dark-grey) !important;
14
- background: var(--hds-ui-colors-grey) !important;
15
- border-color: var(--hds-ui-colors-grey) !important;
16
- outline: 0 !important;
17
- box-shadow: none !important;
18
- cursor: default;
19
- }
20
-
21
- /**
22
- * Modifiers: sizes
23
- */
24
-
25
- &--large {
26
- font-size: 18px;
27
- height: 58px;
28
- padding: 19px 24px;
29
- i,
30
- svg {
31
- margin-right: 12px;
32
- }
33
- }
34
-
35
- &--medium {
36
- font-size: 18px;
37
- height: 50px;
38
- padding: 15px 20px;
39
- i,
40
- svg {
41
- margin-right: 10px;
42
- }
43
- }
44
-
45
- &--small {
46
- font-size: 16px;
47
- height: 44px;
48
- padding: 12px 16px;
49
- i,
50
- svg {
51
- margin-right: 8px;
52
- }
53
- }
54
-
55
- &--full {
56
- width: 100%;
57
- }
58
-
59
- /**
60
- * Responsive modifiers
61
- */
62
-
63
- &--mobile-full {
64
- // TODO: Currently hardcoded due to css variables not available in media queries
65
- // Would be: --hds-breakpoints-medium
66
- // 🤷
67
- @media (max-width: 720px) {
68
- width: 100%;
69
- }
70
- }
71
-
72
- /**
73
- * Modifiers: types
74
- */
75
-
76
- &--primary {
77
- background: var(--hds-brand-colors-signature);
78
- border-color: var(--hds-brand-colors-signature);
79
- color: var(--hds-brand-button-colors-text);
80
- fill: var(--hds-brand-button-colors-text);
81
-
82
- &:hover,
83
- &:active {
84
- background: var(--hds-brand-colors-signature-hover);
85
- border-color: var(--hds-brand-colors-signature);
86
- outline: 0px solid var(--hds-brand-colors-signature-hover);
87
- }
88
-
89
- &:active {
90
- background: var(--hds-brand-colors-signature) !important;
91
- }
92
- }
93
-
94
- &--secondary {
95
- background: var(--hds-brand-colors-darker);
96
- border-color: var(--hds-brand-colors-darker);
97
- color: var(--hds-ui-colors-white);
98
- fill: var(--hds-ui-colors-white);
99
-
100
- &:hover,
101
- &:active {
102
- background: var(--hds-ui-colors-black);
103
- outline: 0px solid var(--hds-ui-colors-black);
104
- }
105
-
106
- &:active {
107
- background: var(--hds-brand-colors-darker) !important;
108
- }
109
- }
110
-
111
- &--outline {
112
- background: transparent;
113
- color: var(--hds-brand-colors-dark);
114
- fill: var(--hds-brand-colors-dark);
115
- border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);
116
-
117
- &:disabled,
118
- &[disabled],
119
- &[disabled]:active {
120
- background: none !important;
121
- }
122
-
123
- &:hover,
124
- &:active {
125
- color: var(--hds-ui-colors-black);
126
- fill: var(--hds-ui-colors-black);
127
- border-color: var(--hds-ui-colors-black);
128
- background: none;
129
- }
130
-
131
- &:active {
132
- border-color: var(--hds-ui-colors-dark-grey);
133
- }
134
- }
135
-
136
- &--outline-dark {
137
- @extend .hds-button--outline-secondary;
138
- }
139
-
140
- &--outline-white {
141
- background: transparent;
142
- border: var(--hds-stroke-thick) solid var(--hds-brand-colors-light);
143
- color: var(--hds-ui-colors-white);
144
- fill: var(--hds-ui-colors-white);
145
- outline-offset: 3px;
146
-
147
- &:hover,
148
- &:active {
149
- color: var(--hds-brand-colors-light);
150
- fill: var(--hds-brand-colors-light);
151
- }
152
- }
153
-
154
- &--outline-primary {
155
- background: transparent;
156
- border: var(--hds-stroke-thick) solid var(--hds-brand-colors-signature);
157
- color: var(--hds-ui-colors-black);
158
- fill: var(--hds-ui-colors-black);
159
- outline-offset: 3px;
160
-
161
- &:hover,
162
- &:active {
163
- color: var(--hds-brand-colors-dark);
164
- fill: var(--hds-brand-colors-dark);
165
- border: var(--hds-stroke-thick) solid var(--hds-brand-colors-dark);
166
- }
167
- &:disabled,
168
- &[disabled],
169
- &[disabled]:active {
170
- border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);
171
- color: var(--hds-ui-colors-dark-grey);
172
- fill: var(--hds-ui-colors-dark-grey);
173
- background: transparent !important;
174
- }
175
- }
176
-
177
- &--outline-secondary {
178
- background: transparent;
179
- border: var(--hds-stroke-thick) solid var(--hds-brand-colors-darker);
180
- color: var(--hds-brand-colors-darker);
181
- fill: var(--hds-brand-colors-darker);
182
- outline-offset: 3px;
183
-
184
- &:hover,
185
- &:active {
186
- color: var(--hds-ui-colors-black);
187
- fill: var(--hds-ui-colors-black);
188
- border: var(--hds-stroke-thick) solid var(--hds-ui-colors-black);
189
- /*outline: 0px solid var(--hds-ui-colors-white);*/
190
- }
191
- &:disabled,
192
- &[disabled],
193
- &[disabled]:active {
194
- border: var(--hds-stroke-thick) solid var(--hds-ui-colors-grey);
195
- color: var(--hds-ui-colors-dark-grey);
196
- fill: var(--hds-ui-colors-dark-grey);
197
- background: transparent !important;
198
- }
199
- }
200
- }
package/index.css DELETED
@@ -1,3 +0,0 @@
1
- @import "base.css";
2
- @import "button/button.scss";
3
- @import "link/link.scss";
package/link/link.scss DELETED
@@ -1,78 +0,0 @@
1
- /**
2
- * Block
3
- */
4
-
5
- .hds-link {
6
- text-decoration: none;
7
- border-bottom: var(--hds-stroke-default) solid var(--hds-brand-link-colors-underline);
8
- fill: var(--hds-brand-link-colors-text);
9
- color: var(--hds-brand-link-colors-text);
10
- transition: all 0.1s ease;
11
- cursor: pointer;
12
-
13
- &:hover,
14
- &:active {
15
- color: var(--hds-brand-link-colors-hover);
16
- fill: var(--hds-brand-link-colors-hover);
17
- border-color: var(--hds-brand-link-colors-underline-hover);
18
-
19
- & .hw-link__text {
20
- border-color: var(--hds-brand-link-colors-underline-hover);
21
- }
22
- }
23
-
24
- /**
25
- * Modifers
26
- */
27
-
28
- &--inverted {
29
- color: var(--hds-ui-colors-white);
30
- text-decoration-color: var(--hds-brand-colors-signature);
31
- border-color: currentColor;
32
- &:hover,
33
- &:active {
34
- color: var(--hds-brand-colors-light);
35
- border-color: currentColor;
36
- }
37
- &:disabled {
38
- color: var(--hds-ui-colors-dark-grey);
39
- fill: currentColor;
40
- border-color: currentColor;
41
- outline: 0 !important;
42
- box-shadow: none !important;
43
- cursor: default;
44
- }
45
- }
46
-
47
- &--small {
48
- font: var(--hds-typography-body-small);
49
- }
50
-
51
- &--large {
52
- font: var(--hds-typography-header-h3);
53
- }
54
-
55
- &--no-underline {
56
- font-family: var(--hw-font-primary-medium);
57
- color: var(--hds-brand-colors-dark);
58
- text-decoration: none;
59
- border-bottom: none;
60
-
61
- &:hover {
62
- color: var(--hds-brand-colors-dark);
63
- text-decoration: underline;
64
- text-decoration-color: var(--hds-brand-colors-dark);
65
- border-bottom: none;
66
- }
67
- }
68
-
69
- &--solid {
70
- color: var(--hds-ui-colors-black);
71
- border-color: var(--hds-ui-colors-black);
72
- &:hover,
73
- &:active {
74
- color: var(--hds-ui-colors-black-hover);
75
- border-color: var(--hds-ui-colors-black-hover);
76
- }
77
- }
78
- }
package/scoped.scss DELETED
@@ -1,5 +0,0 @@
1
- .kp-decorator-header-and-footer {
2
- @import "base.css";
3
- @import "button/button.scss";
4
- @import "link/link.scss";
5
- }