mirror of
https://github.com/picocss/pico.git
synced 2025-04-27 11:36:14 -04:00
1 line
4.6 KiB
Text
1 line
4.6 KiB
Text
|
{"version":3,"sources":["_modal.scss"],"names":[],"mappings":"AAAA;;EAEE;;AAEF;EACE,sBAAsB;AACxB;;AAEA;EACE,aAAa;EACb,YAAY;EACZ,eAAe;EACf,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;EACP,mBAAmB;EACnB,uBAAuB;EACvB,cAAc;EACd,eAAe;EACf,eAAe;EACf,gBAAgB;EAChB,uBAAuB;EACvB,SAAS;EACT,qDAAqD;EACrD,uDAAuD;EACvD,mBAAmB;;EAEnB,SAAS;EACT;IACE,4CAA4C;IAC5C,cAAc;;IAEd;MACE;QACE,oCAAoC;MACtC;IACF;;IAEA;MACE;QACE,oCAAoC;MACtC;IACF;;IAEA;;MAEE;uCACiC;IACnC;;IAEA;MACE;QACE,SAAS;QACT,2BAA2B;QAC3B,YAAY;MACd;IACF;;IAEA;MACE,iBAAiB;;MAEjB;QACE,gBAAgB;;QAEhB;UACE,uCAAuC;QACzC;MACF;IACF;;IAEA;MACE;QACE,SAAS;MACX;IACF;;IAEA,YAAY;IACZ;MACE;QACE,cAAc;QACd,WAAW;QACX,YAAY;QACZ,sDAAsD;QACtD,iDAAiD;QACjD,iBAAiB;QACjB,mCAAmC;QACnC,2BAA2B;QAC3B,0BAA0B;QAC1B,4BAA4B;QAC5B,YAAY;;QAEZ;UACE,qCAAqC;QACvC;;QAEA;UACE,UAAU;QACZ;MACF;IACF;EACF;;EAEA,cAAc;EACd;;IAEE,aAAa;EACf;AACF;;AAEA,WAAW;AACX;EACE;IACE,0CAA0C;IAC1C,gBAAgB;IAChB,oBAAoB;;IAEpB;MACE,oBAAoB;IACtB;EACF;AACF;;AAEA,YAAY;AACZ;EACE,yBAAyB;;EAEzB;IACE;;MAEE,uCAAuC;MACvC,sCAAsC;MACtC,yBAAyB;IAC3B;;IAEA;MACE,6CAA6C;MAC7C,8BAA8B;;MAE9B;QACE,oCAAoC;QACpC,qBAAqB;MACvB;IACF;EACF;;EAEA;IACE;;MAEE,mBAAmB;MACnB,4BAA4B;IAC9B;EACF;;EAEA;IACE;MACE,qBAAqB;MACrB,6BAA6B;IAC/B;EACF;;EAEA;IACE;MACE,4BAA4B;MAC5B,UAAU;IACZ;EACF;AACF","file":"_modal.scss","sourcesContent":["/**\n * Modal (<dialog>)\n */\n\n:root {\n --scrollbar-width: 0px;\n}\n\ndialog {\n display: flex;\n z-index: 999;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n width: inherit;\n min-width: 100%;\n height: inherit;\n min-height: 100%;\n padding: var(--spacing);\n border: 0;\n backdrop-filter: var(--modal-overlay-backdrop-filter);\n background-color: var(--modal-overlay-background-color);\n color: var(--color);\n\n // Content\n article {\n max-height: calc(100vh - var(--spacing) * 2);\n overflow: auto;\n\n @if map-get($breakpoints, \"sm\") {\n @media (min-width: map-get($breakpoints, \"sm\")) {\n max-width: map-get($viewports, \"sm\");\n }\n }\n\n @if map-get($breakpoints, \"md\") {\n @media (min-width: map-get($breakpoints, \"md\")) {\n max-width: map-get($viewports, \"md\");\n }\n }\n\n > header,\n > footer {\n padding: calc(var(--block-spacing-vertical) * 0.5)\n var(--block-spacing-horizontal);\n }\n\n > header {\n .close {\n margin: 0;\n margin-left: var(--spacing);\n float: right;\n }\n }\n\n > footer {\n text-align: right;\n\n [role=\"button\"] {\n margin-bottom: 0;\n\n &:not(:first-of-type) {\n margin-left: calc(var(--spacing) * 0.5);\n }\n }\n }\n\n p {\n &:last-of-type {\n margin: 0;\n }\n }\n\n // Close icon\n @if $enable-classes {\n .close {\n display: block;\n width: 1rem;\n height: 1rem;\n margin-top: calc(var(--block-spacing-vertical) * -0.5);\n margin-bottom: var(--typography-spacing-vertical);\n margin-left: auto;\n background-image: var(--icon-close);\n background-position: center;\n background-size: auto 1rem;\n background-repeat: no-repeat;\n opacity: 0.5;\n\n @if $enable-transitions {\n transition: opacity var(--transition);\n }\n\n &:is([aria-current], :hover, :active, :focus) {\n opacity: 1;\n }\n }\n }\n }\n\n // Closed state\n &:not([open]),\n &[open=\"false\"] {\n display: none;\n }\n}\n\n// Utilities\n@if $enable-classes {\n .modal-is-open {\n padding-right: var(--scrollbar-width, 0px);\n overflow: hidden;\n pointer-events: none;\n\n dialog {\n pointer-events: auto;\n }\n }\n}\n\n// Animations\n@if ($enable-classes and $enable-transitions) {\n $animation-duration: 0.2s;\n\n :where(.modal-is-opening, .modal-is-closing) {\n dialog,\n dialog > article {\n animation-duration: $animation-duration;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n }\n\n
|