UNPKG

@postenbring/hedwig-css

Version:

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

github.com/bring/hedwig-design-system

bring/hedwig-design-system

1 lines • 6.46 kB
1
{"version":3,"sourceRoot":null,"mappings":"AAEA,u1BAgCE,8OAQE,qIAKA,0FAIA,4FAIA,yHAIE,kFAMJ,iNAME,qIAKA,0FAIA,4FAIA,2HAIE,kFAUJ,wCAKE,6BAA0B,gDAS5B,6LAME,wIAKA,oFAIA,gKAOF,yKAME,oJAMA,uGAKA,uHAIE,8EAMJ,uFAIE,+GAKA,sGAKA,+EAII,mFAON,wIAKE,0GAKA,qHAKA,iHAIE","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/button.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-button {\n --hds-component-button-border-width: 1px;\n --hds-component-button-height-large: 58px;\n --hds-component-button-height-small: 44px;\n --hds-component-button-icon-size-large: 24px;\n --hds-component-button-icon-size-small: 20px;\n\n -webkit-font-smoothing: antialiased;\n appearance: button;\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--hds-spacing-12);\n border-style: solid;\n border-radius: var(--hds-border-radius-8);\n border-width: var(--hds-component-button-border-width);\n transition-duration: var(--hds-micro-animation-duration-quick);\n transition-timing-function: var(--hds-micro-animation-easing-normal);\n transition-property: color, background-color, border-color, fill, outline;\n cursor: pointer;\n word-break: normal;\n font: var(--hds-typography-body-small-title);\n align-items: center;\n justify-content: center;\n\n /* When used as a link (<a>) */\n text-decoration: none;\n text-align: center;\n outline-offset: 2px;\n\n /**\n * Modifiers: sizes\n */\n &.hds-button--small {\n font-size: var(--hds-font-size-technical-title-max);\n line-height: var(--hds-line-height-technical-title-max);\n padding: var(--hds-spacing-8) var(--hds-spacing-16);\n\n /* The height can be more if the text inside the button wraps */\n min-height: var(--hds-component-button-height-small);\n\n & * {\n width: var(--hds-component-button-icon-size-small);\n height: var(--hds-component-button-icon-size-small);\n }\n\n &.hds-button--leading-icon {\n padding-left: var(--hds-spacing-12);\n }\n\n &.hds-button--trailing-icon {\n padding-right: var(--hds-spacing-12);\n }\n\n &.hds-button--only-icon {\n padding-left: var(--hds-spacing-8);\n padding-right: var(--hds-spacing-8);\n\n & * {\n width: var(--hds-spacing-24);\n }\n }\n }\n\n &.hds-button--large {\n min-height: var(--hds-component-button-height-large);\n font-size: var(--hds-font-size-body);\n line-height: var(--hds-line-height-body);\n padding: var(--hds-spacing-12) var(--hds-spacing-20);\n\n & * {\n height: var(--hds-component-button-icon-size-large);\n width: var(--hds-component-button-icon-size-large);\n }\n\n &.hds-button--leading-icon {\n padding-left: var(--hds-spacing-16);\n }\n\n &.hds-button--trailing-icon {\n padding-right: var(--hds-spacing-16);\n }\n\n &.hds-button--only-icon {\n padding-left: var(--hds-spacing-12);\n padding-right: var(--hds-spacing-12);\n\n & * {\n width: var(--hds-spacing-32);\n }\n }\n }\n\n /**\n * Modifiers: Width\n */\n\n &.hds-button--full {\n width: 100%;\n }\n\n &.hds-button--mobile-full {\n @media (--before-medium) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: Variants\n */\n\n &.hds-button--primary {\n background-color: var(--hds-colors-signature);\n border-color: var(--hds-colors-signature);\n color: var(--hds-button-colors-text);\n fill: var(--hds-button-colors-text);\n\n &:hover {\n background-color: var(--hds-colors-signature-hover);\n border-color: var(--hds-colors-signature-hover);\n }\n\n &:active {\n background-color: var(--hds-colors-signature);\n }\n\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n }\n }\n\n &.hds-button--secondary {\n background-color: transparent;\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-colors-signature);\n\n &:hover {\n color: var(--hds-colors-dark);\n background-color: var(--hds-colors-lighter);\n border-color: var(--hds-colors-dark);\n }\n\n &:active {\n color: var(--hds-ui-colors-black);\n background-color: transparent;\n }\n\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n border-color: var(--hds-ui-colors-grey);\n\n &:hover {\n background-color: transparent;\n }\n }\n }\n\n &.hds-button--tertiary {\n background-color: transparent;\n border-color: transparent;\n\n &:hover {\n color: var(--hds-colors-dark);\n background-color: var(--hds-colors-lighter);\n }\n\n &:active {\n color: var(--hds-ui-colors-black);\n background-color: transparent;\n }\n\n &:disabled {\n color: var(--hds-ui-colors-dark-grey);\n\n &:hover {\n &:hover {\n background-color: transparent;\n }\n }\n }\n }\n\n &.hds-button--inverted {\n background-color: transparent;\n border-color: var(--hds-colors-signature);\n color: var(--hds-ui-colors-white);\n\n &:hover {\n color: var(--hds-colors-light);\n border-color: var(--hds-colors-light);\n }\n\n &:active {\n color: var(--hds-button-colors-text);\n border-color: var(--hds-colors-signature);\n }\n\n &:disabled {\n color: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n\n &:hover {\n color: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n }\n }\n }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}