@swisspost/design-system-styles 9.7.0 → 9.9.0
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.
- package/_svg-icon-map.scss +14 -0
- package/components/dialog.css +1 -1
- package/components/dialog.scss +21 -5
- package/index.css +1 -1
- package/intranet.css +1 -1
- package/package.json +3 -3
- package/post-external.css +1 -1
- package/post-internal.css +1 -1
- package/tokens/temp/_channel.scss +1 -1
- package/tokens/temp/_components.scss +1 -1
- package/tokens/temp/_core.scss +1 -1
- package/tokens/temp/_device.scss +1 -1
- package/tokens/temp/_index.scss +1 -1
- package/tokens/temp/_mode.scss +1 -1
- package/tokens/temp/_theme.scss +1 -1
package/_svg-icon-map.scss
CHANGED
|
@@ -561,6 +561,20 @@ $svg-icon-map: (
|
|
|
561
561
|
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 24h-9.7v-1.5c4-3.5 7.8-7.6 7.8-10.3 0-4.2-6.3-2.4-6.9-2l-.3-1.4c.6-.3 8.8-3.1 8.8 3.4 0 3.8-7.3 10.1-7.8 10.4h8.1z'/%3E%3C/svg%3E",
|
|
562
562
|
'3000':
|
|
563
563
|
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/svg%3E",
|
|
564
|
+
'2760':
|
|
565
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.99 15.78H32l-.01-.02v-.11l-.16-.02L17.69 4.98c.27-.39.44-.86.44-1.37 0-.93-.55-1.73-1.33-2.12V-.04h-1.33v1.29h-.42v1.34h.73c.57 0 1.03.46 1.03 1.03 0 .21-.08.39-.18.55l-.8-.6-.04-.04-.84.65a1 1 0 0 1-.19-.56h-1.33c0 .52.17 1 .46 1.39L0 15.72v13.99l9.99 2.25 22-2.25zM20.3 14.44l-9.29-.96 4.71-7.44zm1.61.17L17.48 6.5l11.77 8.87-7.35-.76Zm-8.33-7.69-4.29 6.7-6.08 1.33zM1.34 16.73l2.82-.62v13.14l-2.82-.62V16.72Zm4.15 12.82V15.82l3.79-.83v15.4l-3.79-.83Zm25.17-1.05-19.97 2.06V14.79l19.97 2.06zm-17.65-.05v-11.5h1.33v11.5zm6.03-.44h-1.33V17.35h1.33zm4.71-.46h-1.33v-9.73h1.33zm4.7-.46h-1.33v-8.81h1.33zM3.5 22.01v1.34H2.17v-1.34zm3.83 0v1.34H6v-1.34z'/%3E%3C/svg%3E",
|
|
566
|
+
'2759':
|
|
567
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.65 25.98V10.73C26.65 4.82 21.87.04 15.98.04S5.32 4.82 5.32 10.73v15.25H-.02v6.06h32v-6.06zm-20-15.25c0-5.16 4.19-9.36 9.33-9.36s9.33 4.2 9.33 9.36v15.25H6.65zm24 19.97H1.32v-3.38h29.33zM11.28 12.58h9.41v1.34h-9.41zm.9 3.63h7.62v1.34h-7.62zm-2.02-7.28h11.66v1.34H10.16z'/%3E%3C/svg%3E",
|
|
568
|
+
'2758':
|
|
569
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.24 14.45h3.05V32H4.96V15.78H.02L15.8 0l10.18 10.15-.94.95-9.24-9.22zm11.54-3.32c-1.41 0-2.93.38-3.82.81v1.88c1-.53 2.37-.96 3.61-.96 1.56 0 2.76.68 2.76 2.09 0 1.13-.75 1.84-1.75 2.56-1.47 1.09-2.18 1.97-2.18 3.65v.56h1.84v-.38c0-1.28.41-1.65 1.73-2.67 1.35-1.05 2.41-2.07 2.41-3.8 0-2.52-2.24-3.74-4.59-3.74Zm-.47 12.35c-.79 0-1.39.6-1.39 1.37s.6 1.39 1.39 1.39 1.39-.62 1.39-1.39-.6-1.37-1.39-1.37m12.82-9.37h-1.89l4.23 4.24h-8.21v1.33h8.18l-4.22 4.21h1.89L32.02 19z'/%3E%3C/svg%3E",
|
|
570
|
+
'2757':
|
|
571
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.33 18.67c2.58 0 4.67-2.09 4.67-4.67s-2.09-4.67-4.67-4.67S4.66 11.42 4.66 14s2.09 4.67 4.67 4.67m0-8c1.84 0 3.33 1.5 3.33 3.34s-1.5 3.34-3.33 3.34S6 15.85 6 14.01s1.5-3.34 3.33-3.34m17.31-4.86c0 .7-.34 1.12-1.03 1.63-.77.57-.85.7-.85 1.24v.12h-1.21v-.31c0-.86.34-1.25 1.01-1.7.44-.3.71-.57.71-.96 0-.49-.44-.76-1.09-.76-.6 0-1.31.23-1.76.45V4.3c.39-.17 1.18-.36 1.88-.36 1.21 0 2.34.59 2.34 1.86Zm-1.63 4.45c0 .46-.37.84-.85.84s-.85-.37-.85-.84.37-.83.85-.83.85.37.85.83M24.33 0c-4.23 0-7.67 3.44-7.67 7.67s3.44 7.67 7.67 7.67S32 11.9 32 7.67 28.56 0 24.33 0m0 14.02c-3.49 0-6.34-2.84-6.34-6.34s2.84-6.34 6.34-6.34 6.34 2.84 6.34 6.34-2.84 6.34-6.34 6.34M12.49 26.68h1.33v5.33h-1.33zm4.85-2.35v7.68h-1.33v-7.68c0-1.61-1.31-2.93-2.93-2.93H4.26c-1.61 0-2.93 1.31-2.93 2.93v7.68H0v-7.68c0-2.35 1.91-4.26 4.26-4.26h8.82c2.35 0 4.26 1.91 4.26 4.26M4 26.68h1.33v5.33H4z'/%3E%3C/svg%3E",
|
|
572
|
+
'2756':
|
|
573
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m29.07 24.59-.07.32.8.84v1.86l-1.58 1.08-1.03-1-1.46-.33-1.71-.61-.02-1.57-.22-.04-1.1 4.23v1.44l-2.16 1.18-1.57-1.92.22-.95-1.39-.66-.81-2.46-1.2 1 .48 1.09-2.46 2.76-2.26-.69-3.37 1.22-2.18-3.22.11-1.98-.67-.03-.73.65-1.06 2.33H.07V26.8l1.05-.78-.38-.56.41-2.04 2.22-1.95-.1-1.51L5.7 18.5l.98-1.32-.76-1.49 2.35-1.4.93.62 2.12-1.28 1.6.22 1.07-.31v1.39l-.7.2-.27.08-.28-.04-1.13-.16-1.72 1.03-.72.44-.7-.47-.23-.15-.55.33.19.38.37.73-.49.66-.98 1.32-.16.21-.23.14-1.73 1.04.05.69.05.66-.5.44-1.88 1.65-.21 1.05.07.1.72 1.05-1.02.76-.51.38v.33H2.8l.71-1.55.12-.25.21-.19.73-.65.41-.37.55.02.67.03 1.35.06-.07 1.35-.08 1.54 1.34 1.99 2.39-.86.42-.15.42.13 1.45.44 1.33-1.49-.13-.31-.4-.92.77-.64 1.2-1 1.51-1.26.61 1.87.63 1.92.87.41.98.46-.25 1.05-.07.3.45.55.49-.27v-.82l.04-.17 1.1-4.23.31-1.17 1.2.19.22.04 1.11.18.02 1.12v.65l.77.27 1.38.31.37.08.27.26.25.24.1-.07v-.63l-.43-.46-.49-.52.16-.7.07-.32.17-.75.74-.22.07-.02.66-.2.54.43.24.19.26-.49-.24-.27-.45-.51.15-.66.41-1.81-.89.75-.96.8-.87-.9-.98-1.02-1.57-.24-1.7-.26.67-1.58.66-1.55-3.38-2.04-1.5-.27-.43-.08-.3-.32-.63-.66-.48.3v-.85c0-.26.04-.51.08-.77l.62-.39 1.38 1.45 1.75.31 4.58 2.77L25.35 18l2.02.3 1.29 1.34 1.85-1.55 1.4 1.28-.6 2.64.84.96-1.43 2.72-1.5-1.18-.07.02ZM16.65 12.06c0-3.76 3.06-6.83 6.83-6.83h6.06L25.37 9.4h1.89l4.7-4.7L27.25 0h-1.89l3.9 3.9h-5.78c-4.5 0-8.17 3.66-8.17 8.16v7.01h1.33v-7.01Z'/%3E%3C/svg%3E",
|
|
574
|
+
'2755':
|
|
575
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.91 14.49h5.34V9.14H2.91zm1.33-4.01h2.67v2.68H4.24zM2.91 22.52h5.34v-5.35H2.91zm1.33-4.01h2.67v2.68H4.24zm6.54-4.02h5.34V9.14h-5.34zm1.33-4.01h2.67v2.68h-2.67zm-1.33 12.04h5.34v-5.35h-5.34zm1.33-4.01h2.67v2.68h-2.67zm6.54 4.01h5.34v-5.35h-5.34zm1.34-4.01h2.67v2.68h-2.67zM32 7.12c0-3.92-3.18-7.1-7.09-7.1-3.26 0-5.98 2.23-6.81 5.24H0v26.76h10.68v-5.35h5.34v5.35H26.7V13.96c3.04-.8 5.29-3.55 5.29-6.84ZM19.99 12.2c.37.37.8.68 1.24.95h-1.24zm5.38 18.48h-8.01v-5.35H9.35v5.35H1.34V6.59h16.55c-.01.18-.05.35-.05.53 0 1.18.31 2.27.82 3.25v4.13H24v-.37c.31.04.61.09.92.09.16 0 .3-.04.46-.05v16.51Zm-.46-17.8c-3.17 0-5.75-2.58-5.75-5.76s2.58-5.76 5.75-5.76 5.75 2.58 5.75 5.76-2.58 5.76-5.75 5.76m2.4-7.51c0 .7-.34 1.12-1.03 1.64-.77.58-.85.7-.85 1.24v.12h-1.21v-.31c0-.86.34-1.25 1.01-1.71.44-.3.71-.58.71-.96 0-.5-.44-.76-1.09-.76-.61 0-1.31.23-1.76.45V3.86c.39-.17 1.18-.36 1.89-.36 1.21 0 2.34.6 2.34 1.87Zm-1.63 4.46c0 .46-.37.84-.85.84s-.85-.37-.85-.84.37-.83.85-.83.85.37.85.83'/%3E%3C/svg%3E",
|
|
576
|
+
'2754':
|
|
577
|
+
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m29 24.54 1.5 1.18 1.43-2.74-.84-1.64.6-3.34-1.4-1.29-1.85 1.56-1.29-1.35-2.02-.31 1.11-2.64-3.47-2.12c.62-1.14.97-2.44.97-3.83 0-4.4-3.57-7.99-7.95-7.99S7.84 3.62 7.84 8.04c0 1.93.68 3.69 1.81 5.08l-.6.36-.93-.63-2.35 1.41.76 1.51-.98 1.33-2.43 1.47.1 1.52L1 22.05l-.41 2.06.38 1.9-1.05.79v2.35h3.56l1.06-2.35.73-.66.67.03-.11 2 2.18 3.25 3.37-1.23 2.26.69 2.46-2.79-.48-1.1 1.2-1 .81 2.48 1.39.66-.22.95 1.57 1.93 2.16-1.19v-1.45l1.1-4.26.22.04.02 1.59 1.71.62 1.46.33 1.03 1 1.58-1.09v-1.88l-.8-.85.07-.32.07-.02ZM15.79 1.37c3.65 0 6.62 2.99 6.62 6.67s-2.97 6.67-6.62 6.67-6.62-2.99-6.62-6.67 2.97-6.67 6.62-6.67m12.83 21.89-.07.02-.74.22-.17.76-.07.32-.16.7.49.52.44.46v.64l-.11.07-.25-.24-.27-.26-.36-.08-1.38-.31-.77-.28v-.66l-.03-1.12-1.1-.18-.22-.04-1.19-.19-.3 1.18-1.1 4.26-.04.17v.83l-.5.27-.46-.56.07-.31.25-1.05-.97-.46-.87-.41-.63-1.94-.61-1.87-1.5 1.26-1.2 1-.77.64.4.92.14.31-1.33 1.51-1.45-.44-.42-.13-.41.15-2.4.87-1.35-2.01.08-1.55.07-1.35-1.34-.06-.67-.03-.54-.02-.4.37-.73.66-.21.19-.11.25-.71 1.57H1.27v-.35l.51-.39.67-.51-.17-.83-.33-1.64.27-1.35L4.1 21.1l.5-.44-.05-.66-.05-.7 1.73-1.05.23-.14.16-.21.98-1.33.49-.66-.37-.74-.2-.39.56-.34.24.16.7.47.72-.44.87-.53a7.87 7.87 0 0 0 5.18 1.95c2.53 0 4.78-1.2 6.24-3.06l2.54 1.55-.66 1.57-.67 1.59 1.69.26 1.57.24.98 1.03.86.9.95-.81.95-.81-.47 2.6-.08.45.21.4.52 1.02-.37.7-.25-.2-.54-.43-.66.2ZM16.5 10.74c0 .49-.39.88-.88.88s-.88-.39-.88-.88.39-.87.88-.87.88.39.88.87m-.86-5.43c-.63 0-1.36.24-1.83.48V4.51c.41-.18 1.23-.38 1.96-.38 1.26 0 2.43.62 2.43 1.95 0 .73-.36 1.17-1.07 1.71-.8.6-.88.73-.88 1.3v.13h-1.26v-.33c0-.9.36-1.31 1.05-1.78.46-.32.73-.6.73-1 0-.52-.46-.79-1.13-.79Z'/%3E%3C/svg%3E",
|
|
564
578
|
'2753':
|
|
565
579
|
"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.11 12.63c2.09 0 3.75-.66 4.93-1.94 2.4-2.6 1.93-6.85 1.91-7.03l-.07-.59h-5.11c0-1.86-.17-3.07-.17-3.07H5.4s-.17 1.21-.18 3.07H.12l-.07.59c-.02.18-.49 4.42 1.91 7.03 1.18 1.27 2.82 1.92 4.88 1.94 1.22 3.12 3.3 6.13 6.82 8.08.11 1.37-.03 4.69-3.72 6.37l-.22.1H6c-1.15 0-2.07.9-2.07 2.01v2.82h24.14v-2.82c0-1.11-.93-2.01-2.07-2.01h-3.72l-.22-.1c-3.72-1.69-3.83-5.05-3.72-6.4 3.49-1.95 5.56-4.94 6.78-8.05Zm1.57 16.55v1.49H5.3v-1.49c0-.37.31-.67.7-.67h19.99c.38 0 .7.3.7.67ZM30.62 4.4c.03 1.16-.09 3.76-1.61 5.4-.82.89-1.98 1.36-3.42 1.45.77-2.45 1.07-4.88 1.15-6.86h3.88ZM3 9.8C1.48 8.16 1.36 5.56 1.39 4.4h3.86c.08 1.98.36 4.4 1.13 6.85-1.42-.1-2.56-.57-3.37-1.45Zm4.18-.88c-.67-3.13-.62-6.04-.52-7.58h18.68c.09 1.55.13 4.45-.55 7.58-1.24 5.72-4.21 9.56-8.82 11.41-.36-.14-.69-.32-1.03-.49-4.01-1.99-6.63-5.64-7.76-10.91Zm12.26 18.09h-6.9c2.05-1.77 2.47-4.11 2.5-5.63.3.13.6.26.92.37.34-.12.66-.26.97-.39.02 1.52.44 3.88 2.5 5.65ZM11.9 14.47l4.1-2.08 4.1 2.08-.78-4.41 3.32-3.12-4.58-.64-2.05-4.01-2.05 4.01-4.58.64 3.32 3.12-.78 4.41Zm.42-6.6 1.82-.26.72-.1.32-.63.81-1.59.81 1.59.32.63.72.1 1.82.26-1.32 1.24-.52.49.12.69.31 1.75-1.63-.83-.64-.33-.64.33-1.63.83.31-1.75.12-.69-.52-.49-1.32-1.24Z'/%3E%3C/svg%3E",
|
|
566
580
|
'2752':
|
package/components/dialog.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
dialog{box-shadow:1px 6px 8px rgba(0,0,0,.1),2px 8px 20px 8px rgba(0,0,0,.14);padding:0;min-width:min(389px,90vw);max-width:590px;max-height:90vh;overflow:auto;margin:revert;overscroll-behavior:contain;border:2px solid var(--post-contrast-color)}dialog::backdrop{background-color:rgba(0,0,0,.8);backdrop-filter:blur(0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){dialog{border-width:2px}dialog::backdrop{background-image:linear-gradient(135deg, CanvasText 4.55%, transparent 4.55%, transparent 50%, CanvasText 50%, CanvasText 54.55%, transparent 54.55%, transparent 100%);background-size:22px 22px;backdrop-filter:none;background-color:rgba(0,0,0,0);forced-color-adjust:none}}dialog[data-size=small]{min-width:296px;max-width:388px}dialog[data-size=large]{min-width:min(600px,90vw);max-width:792px}dialog[data-position=top]{top:2rem;bottom:auto}dialog[data-position=bottom]{top:auto;bottom:2rem}dialog>.dialog-grid{margin:1rem 1rem 0 1rem;display:grid;column-gap:1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon header close-button" "icon body close-button" "controls controls controls";background-color:inherit}:where(.dialog-icon,.dialog-header,.dialog-body,.dialog-controls,.dialog-close):empty{display:none}.dialog-grid>post-icon{grid-area:icon;display:block;width:2rem;height:2rem}@media(min-width: 600px){dialog:not([size=small]) .dialog-grid>post-icon{width:3rem;height:3rem}}.dialog-header{grid-area:header;margin-top:0}.dialog-body{grid-area:body;margin-bottom:0}.dialog-body>*:last-child{margin-bottom:0}.dialog-controls{grid-area:controls;position:sticky;bottom:0;padding-block:1rem;display:flex;flex-wrap:wrap;flex-direction:row-reverse;gap:1rem;background-color:inherit}@media(max-width: 399.98px){.dialog-controls button{width:100%}}.dialog-grid>.btn-close{position:sticky;top:0;grid-area:close-button;width:1.5rem;height:1.5rem;min-height:0}dialog:not([data-animation=none]){--_dialog-transition-duration: var(--dialog-transition-duration, 0.5s);transform:scale(0.8);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--_dialog-transition-duration);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}dialog:not([data-animation=none])::backdrop{opacity:0;transition:backdrop-filter var(--_dialog-transition-duration),opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete}dialog:not([data-animation=none])[open]{transform:scale(1);opacity:1}@starting-style{dialog:not([data-animation=none])[open]{opacity:0;transform:scale(0.8)}}dialog:not([data-animation=none])[open]::backdrop{opacity:1;backdrop-filter:blur(10px)}@starting-style{dialog:not([data-animation=none])[open]::backdrop{opacity:0;backdrop-filter:blur(0)}}@media(forced-colors: active){dialog:not([data-animation=none])[open]::backdrop{backdrop-filter:none}}dialog:not([data-animation=none])[data-animation=slide-in]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}dialog:not([data-animation=none])[data-animation=slide-in][data-position=top]{--_dialog-slide-in-offset: -3rem}dialog:not([data-animation=none])[data-animation=slide-in][data-position=bottom]{--_dialog-slide-in-offset: 3rem}dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(0)}@starting-style{dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}}
|
|
1
|
+
dialog{box-shadow:1px 6px 8px rgba(0,0,0,.1),2px 8px 20px 8px rgba(0,0,0,.14);padding:0;min-width:min(389px,90vw);max-width:590px;max-height:90vh;overflow:auto;margin:revert;overscroll-behavior:contain;border:2px solid var(--post-contrast-color)}dialog::backdrop{background-color:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){dialog{border-width:2px}dialog::backdrop{background-image:linear-gradient(135deg, CanvasText 4.55%, transparent 4.55%, transparent 50%, CanvasText 50%, CanvasText 54.55%, transparent 54.55%, transparent 100%);background-size:22px 22px;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(0,0,0,0);forced-color-adjust:none}}dialog[data-size=small]{min-width:296px;max-width:388px}dialog[data-size=large]{min-width:min(600px,90vw);max-width:792px}dialog[data-position=top]{top:2rem;bottom:auto}dialog[data-position=bottom]{top:auto;bottom:2rem}dialog>.dialog-grid{margin:1rem 1rem 0 1rem;display:grid;column-gap:1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon header close-button" "icon body close-button" "controls controls controls";background-color:inherit}:where(.dialog-icon,.dialog-header,.dialog-body,.dialog-controls,.dialog-close):empty{display:none}.dialog-grid>post-icon{grid-area:icon;display:block;width:2rem;height:2rem}@media(min-width: 600px){dialog:not([size=small]) .dialog-grid>post-icon{width:3rem;height:3rem}}.dialog-header{grid-area:header;margin-top:0}.dialog-body{grid-area:body;margin-bottom:0}.dialog-body>*:last-child{margin-bottom:0}.dialog-controls{grid-area:controls;position:sticky;bottom:0;padding-block:1rem;display:flex;flex-wrap:wrap;flex-direction:row-reverse;gap:1rem;background-color:inherit}@media(max-width: 399.98px){.dialog-controls button{width:100%}}.dialog-grid>.btn-close{position:sticky;top:0;grid-area:close-button;width:1.5rem;height:1.5rem;min-height:0}dialog:not([data-animation=none]){--_dialog-transition-duration: var(--dialog-transition-duration, 0.5s);transform:scale(0.8);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--_dialog-transition-duration);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}dialog:not([data-animation=none])::backdrop{opacity:0;transition:opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete,-webkit-backdrop-filter var(--_dialog-transition-duration);transition:backdrop-filter var(--_dialog-transition-duration),opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete;transition:backdrop-filter var(--_dialog-transition-duration),opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete,-webkit-backdrop-filter var(--_dialog-transition-duration)}dialog:not([data-animation=none])[open]{transform:scale(1);opacity:1}@starting-style{dialog:not([data-animation=none])[open]{opacity:0;transform:scale(0.8)}}dialog:not([data-animation=none])[open]::backdrop{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@starting-style{dialog:not([data-animation=none])[open]::backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}@media(forced-colors: active){dialog:not([data-animation=none])[open]::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}dialog:not([data-animation=none])[data-animation=slide-in]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}dialog:not([data-animation=none])[data-animation=slide-in][data-position=top]{--_dialog-slide-in-offset: -3rem}dialog:not([data-animation=none])[data-animation=slide-in][data-position=bottom]{--_dialog-slide-in-offset: 3rem}dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(0)}@starting-style{dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}}
|
package/components/dialog.scss
CHANGED
|
@@ -20,7 +20,8 @@ dialog {
|
|
|
20
20
|
|
|
21
21
|
&::backdrop {
|
|
22
22
|
background-color: rgba(0, 0, 0, 0.8);
|
|
23
|
-
backdrop-filter: blur(0);
|
|
23
|
+
-webkit-backdrop-filter: blur(0);
|
|
24
|
+
backdrop-filter: blur(0);
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
@include utilities.high-contrast-mode {
|
|
@@ -40,7 +41,8 @@ dialog {
|
|
|
40
41
|
transparent 100%
|
|
41
42
|
);
|
|
42
43
|
background-size: 22px 22px;
|
|
43
|
-
backdrop-filter: none;
|
|
44
|
+
-webkit-backdrop-filter: none;
|
|
45
|
+
backdrop-filter: none;
|
|
44
46
|
background-color: transparent;
|
|
45
47
|
forced-color-adjust: none;
|
|
46
48
|
}
|
|
@@ -180,11 +182,22 @@ dialog:not([data-animation='none']) {
|
|
|
180
182
|
|
|
181
183
|
&::backdrop {
|
|
182
184
|
opacity: 0;
|
|
185
|
+
transition:
|
|
186
|
+
opacity var(--_dialog-transition-duration),
|
|
187
|
+
overlay var(--_dialog-transition-duration) allow-discrete,
|
|
188
|
+
display var(--_dialog-transition-duration) allow-discrete,
|
|
189
|
+
-webkit-backdrop-filter var(--_dialog-transition-duration);
|
|
183
190
|
transition:
|
|
184
191
|
backdrop-filter var(--_dialog-transition-duration),
|
|
185
192
|
opacity var(--_dialog-transition-duration),
|
|
186
193
|
overlay var(--_dialog-transition-duration) allow-discrete,
|
|
187
194
|
display var(--_dialog-transition-duration) allow-discrete;
|
|
195
|
+
transition:
|
|
196
|
+
backdrop-filter var(--_dialog-transition-duration),
|
|
197
|
+
opacity var(--_dialog-transition-duration),
|
|
198
|
+
overlay var(--_dialog-transition-duration) allow-discrete,
|
|
199
|
+
display var(--_dialog-transition-duration) allow-discrete,
|
|
200
|
+
-webkit-backdrop-filter var(--_dialog-transition-duration);
|
|
188
201
|
}
|
|
189
202
|
|
|
190
203
|
&[open] {
|
|
@@ -198,15 +211,18 @@ dialog:not([data-animation='none']) {
|
|
|
198
211
|
|
|
199
212
|
&::backdrop {
|
|
200
213
|
opacity: 1;
|
|
201
|
-
backdrop-filter: blur(10px);
|
|
214
|
+
-webkit-backdrop-filter: blur(10px);
|
|
215
|
+
backdrop-filter: blur(10px);
|
|
202
216
|
|
|
203
217
|
@starting-style {
|
|
204
218
|
opacity: 0;
|
|
205
|
-
backdrop-filter: blur(0);
|
|
219
|
+
-webkit-backdrop-filter: blur(0);
|
|
220
|
+
backdrop-filter: blur(0);
|
|
206
221
|
}
|
|
207
222
|
|
|
208
223
|
@media (forced-colors: active) {
|
|
209
|
-
backdrop-filter: none;
|
|
224
|
+
-webkit-backdrop-filter: none;
|
|
225
|
+
backdrop-filter: none;
|
|
210
226
|
}
|
|
211
227
|
}
|
|
212
228
|
}
|