@postenbring/hedwig-css/dist/modal.css.map

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

{"version":3,"sourceRoot":null,"mappings":"AAEA,4EAQE,2HAAA,uHAaA,6HAMA,6BAAwB,+EAKxB,uFAOA,gEAIA,+DASF,uCAOA,iEAUA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/modal/modal.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/modal/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-modal {\n  /* Reset `dialog` element border */\n  border: none;\n  max-width: var(--hds-breakpoint-small);\n\n  /* Make the dialog appear in the middle of the viewport where the user opened the modal */\n  position: fixed;\n\n  &::backdrop {\n    /**\n     * Cannot use css variables in ::backdrop, need to hardcode values in css for now.\n     * https://stackoverflow.com/questions/58818299/css-variables-not-working-in-dialogbackdrop\n     *\n     * See\n     * --hds-micro-animation-duration-normal\n     * --hds-micro-animation-easing-out\n     */\n    background-color: rgba(0 0 0 / 40%);\n    animation: hds-modal-backdrop-fade-in 0.3s cubic-bezier(0, 0.45, 0.1, 1);\n  }\n\n  &[open] {\n    animation: hds-modal-fade-in var(--hds-micro-animation-duration-normal)\n      var(--hds-micro-animation-easing-out);\n  }\n\n  /* small (460px) + 8px + 8px = 476px */\n  @media (width < 476px) {\n    margin-left: var(--hds-spacing-8);\n    margin-right: var(--hds-spacing-8);\n  }\n\n  .hds-modal__header {\n    font: var(--hds-typography-body-title);\n\n    /* Make sure text is not overlapping or is right next to the close (x) button */\n    padding-right: 16px;\n  }\n\n  .hds-modal__content {\n    margin-top: var(--hds-spacing-24);\n  }\n\n  .hds-modal__footer {\n    margin-top: var(--hds-spacing-24);\n  }\n}\n\n/*\n * When the modal is open we don't want the rest of the page to be scrollable\n * Apply this class to the body when the modal is open\n */\n.hds-modal-scroll-lock {\n  overflow: hidden;\n}\n\n/**\n * Animation\n */\n@keyframes hds-modal-backdrop-fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes hds-modal-fade-in {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, calc(5% + 4px), 0);\n  }\n\n  50% {\n    opacity: 1;\n  }\n\n  100% {\n    transform: none;\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":[]}