@sbb-esta/lyne-elements-dev 4.7.0-dev.1773743832 → 4.7.0-dev.1773755030
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/core/styles/core.scss +5 -10
- package/core.css +14 -9
- package/custom-elements.json +942 -942
- package/development/notification/notification.component.js +1 -1
- package/development/notification.component-BT3ZQhUI.js +525 -0
- package/development/notification.js +1 -1
- package/development/notification.pure.js +1 -1
- package/notification/notification.component.js +1 -1
- package/notification.component-DA7sZ3m4.js +197 -0
- package/notification.js +1 -1
- package/notification.pure.js +1 -1
- package/off-brand-theme.css +14 -9
- package/package.json +2 -2
- package/safety-theme.css +14 -9
- package/standard-theme.css +14 -9
- package/development/notification.component-B5EBKKf8.js +0 -530
- package/notification.component-DZS8z1oa.js +0 -197
package/core/styles/core.scss
CHANGED
|
@@ -160,6 +160,9 @@ $theme: 'standard' !default;
|
|
|
160
160
|
with (
|
|
161
161
|
$theme: $theme
|
|
162
162
|
);
|
|
163
|
+
@use '../../notification/notification.global' as notification with (
|
|
164
|
+
$theme: $theme
|
|
165
|
+
);
|
|
163
166
|
@use '../../option/option/option.global' as option with (
|
|
164
167
|
$theme: $theme
|
|
165
168
|
);
|
|
@@ -249,6 +252,7 @@ $theme: 'standard' !default;
|
|
|
249
252
|
@include message.base;
|
|
250
253
|
@include mini-calendar-day.base;
|
|
251
254
|
@include mini-calendar-month.base;
|
|
255
|
+
@include notification.base;
|
|
252
256
|
@include option.base;
|
|
253
257
|
@include option-hint.base;
|
|
254
258
|
@include optgroup.base;
|
|
@@ -334,6 +338,7 @@ $theme: 'standard' !default;
|
|
|
334
338
|
|
|
335
339
|
@include dialog.base-breakpoint-small;
|
|
336
340
|
@include footer.base-breakpoint-small;
|
|
341
|
+
@include notification.base-breakpoint-small;
|
|
337
342
|
}
|
|
338
343
|
|
|
339
344
|
@include mediaqueries.mq($from: large) {
|
|
@@ -661,16 +666,6 @@ sbb-toggle:has(:focus-visible) {
|
|
|
661
666
|
@include a11y.focus-outline;
|
|
662
667
|
}
|
|
663
668
|
|
|
664
|
-
sbb-notification:has(sbb-title) {
|
|
665
|
-
--_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
|
|
666
|
-
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
|
|
667
|
-
|
|
668
|
-
&[size='s'] {
|
|
669
|
-
--_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
|
|
670
|
-
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
|
|
671
|
-
}
|
|
672
|
-
}
|
|
673
|
-
|
|
674
669
|
.sbb-overlay-outlet {
|
|
675
670
|
position: fixed;
|
|
676
671
|
inset: 0;
|
package/core.css
CHANGED
|
@@ -1609,6 +1609,18 @@
|
|
|
1609
1609
|
var(--sbb-color-granite),
|
|
1610
1610
|
var(--sbb-color-silver)
|
|
1611
1611
|
);
|
|
1612
|
+
--sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
|
|
1613
|
+
--sbb-notification-border-width: var(--sbb-border-width-1x);
|
|
1614
|
+
--sbb-notification-color: var(--sbb-color-2-negative-inverted);
|
|
1615
|
+
--sbb-notification-icon-align-self: center;
|
|
1616
|
+
--sbb-notification-margin: 0;
|
|
1617
|
+
--sbb-notification-timing-function: ease-in;
|
|
1618
|
+
--sbb-notification-font-size: var(--sbb-text-font-size-s);
|
|
1619
|
+
--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);
|
|
1620
|
+
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
|
|
1621
|
+
--sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1622
|
+
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
|
|
1623
|
+
--sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
|
|
1612
1624
|
--sbb-option-color: var(--sbb-color-3);
|
|
1613
1625
|
--sbb-option-background-color: inherit;
|
|
1614
1626
|
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
@@ -1799,6 +1811,8 @@
|
|
|
1799
1811
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
|
|
1800
1812
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x);
|
|
1801
1813
|
--sbb-footer-clock-width: 7rem;
|
|
1814
|
+
--sbb-notification-icon-align-self: flex-start;
|
|
1815
|
+
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
|
|
1802
1816
|
}
|
|
1803
1817
|
}
|
|
1804
1818
|
@media (min-width: calc(64rem)) {
|
|
@@ -2392,15 +2406,6 @@ sbb-toggle:has(:focus-visible) {
|
|
|
2392
2406
|
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2393
2407
|
}
|
|
2394
2408
|
|
|
2395
|
-
sbb-notification:has(sbb-title) {
|
|
2396
|
-
--_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
|
|
2397
|
-
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
|
|
2398
|
-
}
|
|
2399
|
-
sbb-notification:has(sbb-title)[size=s] {
|
|
2400
|
-
--_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
|
|
2401
|
-
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
|
|
2402
|
-
}
|
|
2403
|
-
|
|
2404
2409
|
.sbb-overlay-outlet {
|
|
2405
2410
|
position: fixed;
|
|
2406
2411
|
inset: 0;
|