@swisspost/design-system-styles 9.7.0 → 9.8.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.
Files changed (14) hide show
  1. package/components/dialog.css +1 -1
  2. package/components/dialog.scss +21 -5
  3. package/index.css +1 -1
  4. package/intranet.css +1 -1
  5. package/package.json +3 -3
  6. package/post-external.css +1 -1
  7. package/post-internal.css +1 -1
  8. package/tokens/temp/_channel.scss +1 -1
  9. package/tokens/temp/_components.scss +1 -1
  10. package/tokens/temp/_core.scss +1 -1
  11. package/tokens/temp/_device.scss +1 -1
  12. package/tokens/temp/_index.scss +1 -1
  13. package/tokens/temp/_mode.scss +1 -1
  14. package/tokens/temp/_theme.scss +1 -1
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
  }