UNPKG

@postenbring/hedwig-css

Version:

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

1 lines 1.81 kB
{"version":3,"sourceRoot":null,"mappings":"AAAA,6OAQE,wDAOM,0CAEN,uDAOA,wDAMA,wCAQA,sKAkBA,qDAIA,sDAIA,2EAKF","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/skeleton/skeleton.css"],"sourcesContent":[".hds-skeleton {\n background-color: var(--hds-ui-colors-grey);\n pointer-events: none;\n user-select: none;\n\n /* Animation */\n animation: hds-skeleton-animation 1.2s var(--hds-micro-animation-easing-normal) infinite alternate;\n\n &.hds-skeleton--no-animation {\n animation: none;\n }\n\n /**\n * Hide children\n */\n color: transparent !important;\n\n > * {\n background-color: transparent !important;\n }\n\n /**\n * Auto dimensions when not set using `style`\n */\n &:not(:empty) {\n height: auto;\n width: fit-content;\n }\n\n /* Ensure some content */\n &:empty::before {\n /* stylelint-disable-next-line no-irregular-whitespace -- We want the whitespace */\n content: \" \";\n }\n\n /**\n * Variants\n */\n &.hds-skeleton--text {\n border-radius: var(--hds-border-radius);\n\n /* Emulate the whitespace in line-height */\n transform: scale(1, 0.7);\n\n /*\n * Ensure only one line of text content\n * multi-line text content does not make sense as it just becomes a block of color\n *\n * TODO: Figure out auto spacing between line breaks\n */\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n }\n\n &.hds-skeleton--circle {\n border-radius: 50%;\n }\n\n &.hds-skeleton--rectangle {\n border-radius: 0;\n }\n\n &.hds-skeleton--rounded {\n border-radius: var(--hds-border-radius);\n }\n}\n\n@keyframes hds-skeleton-animation {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0.4;\n }\n}\n"],"names":[]}