@sbb-esta/lyne-elements-dev 5.13.0-dev.1793608592 → 5.13.0-dev.1793626084
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/alert/_alert.global.scss +25 -4
- package/alert.pure.js +1 -1
- package/development/alert.pure.js +1 -1
- package/lean-off-brand-theme.css +17 -2
- package/lean-safety-theme.css +17 -2
- package/lean-theme.css +17 -2
- package/off-brand-theme.css +17 -2
- package/package.json +2 -2
- package/safety-theme.css +17 -2
- package/standard-theme.css +17 -2
package/alert/_alert.global.scss
CHANGED
|
@@ -14,17 +14,34 @@ $theme: 'standard' !default;
|
|
|
14
14
|
--sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
|
|
15
15
|
--sbb-alert-title-margin-block: 0;
|
|
16
16
|
--sbb-alert-font-size: var(--sbb-text-font-size-s);
|
|
17
|
+
--sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
18
|
+
--sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
19
|
+
--sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
17
20
|
--sbb-alert-gap: #{sbb.theme-pattern-select(
|
|
18
21
|
(
|
|
19
|
-
'standard': var(--sbb-
|
|
20
|
-
'lean': var(--sbb-
|
|
22
|
+
'standard': var(--sbb-alert-gap-m),
|
|
23
|
+
'lean': var(--sbb-alert-gap-s),
|
|
21
24
|
),
|
|
22
25
|
$theme
|
|
23
26
|
)};
|
|
27
|
+
--sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
|
|
28
|
+
--sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
|
|
29
|
+
--sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
|
|
24
30
|
--sbb-alert-close-icon-margin: #{sbb.theme-pattern-select(
|
|
25
31
|
(
|
|
26
|
-
'standard': var(--sbb-
|
|
27
|
-
'lean': var(--sbb-
|
|
32
|
+
'standard': var(--sbb-alert-close-icon-margin-m),
|
|
33
|
+
'lean': var(--sbb-alert-close-icon-margin-s),
|
|
34
|
+
),
|
|
35
|
+
$theme
|
|
36
|
+
)};
|
|
37
|
+
--sbb-alert-grid-template-columns: 1fr auto;
|
|
38
|
+
--sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
|
|
39
|
+
--sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
|
|
40
|
+
--sbb-alert-icon-padding-block-l: #{sbb.px-to-rem-build(10)};
|
|
41
|
+
--sbb-alert-icon-padding-block: #{sbb.theme-pattern-select(
|
|
42
|
+
(
|
|
43
|
+
'standard': var(--sbb-alert-icon-padding-block-m),
|
|
44
|
+
'lean': var(--sbb-alert-icon-padding-block-s),
|
|
28
45
|
),
|
|
29
46
|
$theme
|
|
30
47
|
)};
|
|
@@ -39,6 +56,10 @@ $theme: 'standard' !default;
|
|
|
39
56
|
|
|
40
57
|
@mixin breakpoint-small {
|
|
41
58
|
--sbb-alert-close-button-divider-display: block;
|
|
59
|
+
--sbb-alert-grid-template-columns: auto 1fr auto;
|
|
60
|
+
--sbb-alert-icon-padding-block-s: 0;
|
|
61
|
+
--sbb-alert-icon-padding-block-m: 0;
|
|
62
|
+
--sbb-alert-icon-padding-block-l: 0;
|
|
42
63
|
}
|
|
43
64
|
|
|
44
65
|
@mixin breakpoint-large {
|
package/alert.pure.js
CHANGED
|
@@ -4,7 +4,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
|
|
|
4
4
|
<slot name="accessibility-title">${this.accessibilityTitle}</slot>
|
|
5
5
|
</${c(e)}>`:r}
|
|
6
6
|
<slot @slotchange=${e=>this._slotChanged(e)}></slot>
|
|
7
|
-
`}}})();var w=`:host{--sbb-alert-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));opacity:0;border-radius:var(--sbb-alert-forced-color-border-radius);outline:var(--sbb-alert-outline);grid-template-rows:0fr;display:grid}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])){--sbb-disable-animation-duration:0s}:host([size=s]){--sbb-alert-gap:var(--sbb-
|
|
7
|
+
`}}})();var w=`:host{--sbb-alert-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));opacity:0;border-radius:var(--sbb-alert-forced-color-border-radius);outline:var(--sbb-alert-outline);grid-template-rows:0fr;display:grid}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])){--sbb-disable-animation-duration:0s}:host([size=s]){--sbb-alert-gap:var(--sbb-alert-gap-s);--sbb-alert-close-icon-margin:var(--sbb-alert-close-icon-margin-s);--sbb-alert-icon-padding-block:var(--sbb-alert-icon-padding-block-s)}:host([size=m]){--sbb-alert-gap:var(--sbb-alert-gap-m);--sbb-alert-close-icon-margin:var(--sbb-alert-close-icon-margin-m);--sbb-alert-icon-padding-block:var(--sbb-alert-icon-padding-block-m)}:host([size=l]){--sbb-alert-gap:var(--sbb-alert-gap-l);--sbb-alert-close-icon-margin:var(--sbb-alert-close-icon-margin-l);--sbb-alert-icon-padding-block:var(--sbb-alert-icon-padding-block-l);--sbb-alert-icon-size:var(--sbb-alert-icon-size-l);--sbb-alert-title-margin-block:0 var(--sbb-spacing-fixed-1x)}:host(:not(:is(:state(dark),[state--dark]))){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])){animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s, var(--sbb-alert-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])){animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s, var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x))}.sbb-alert__transition-wrapper{overflow:hidden}.sbb-alert{grid-template-columns:var(--sbb-alert-grid-template-columns);align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius);font-size:var(--sbb-alert-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:grid;overflow:hidden}.sbb-alert__icon{min-width:var(--sbb-alert-icon-size);padding-block:var(--sbb-alert-icon-padding-block);--sbb-icon-svg-width:var(--sbb-alert-icon-size);--sbb-icon-svg-height:var(--sbb-alert-icon-size);align-self:start;align-items:center;min-height:1lh;display:flex}@media (width>=37.5rem){:host(:is(:state(slotted-title),[state--slotted-title])) .sbb-alert__icon{padding-block:var(--sbb-spacing-fixed-1x)}}.sbb-alert__content{color-scheme:light only;order:3;grid-column:1/3}@media (width>=37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{margin:0;padding:0;display:inline}.sbb-alert__close-button-wrapper{color-scheme:light only;justify-content:flex-end;align-items:center;height:100%;display:flex}.sbb-alert__close-button{margin-block:calc(-1 * var(--sbb-spacing-fixed-8x))}@media (width>=37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:var(--sbb-alert-close-button-divider-display,none);height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}::slotted(sbb-title){margin-block:var(--sbb-alert-title-margin-block)}
|
|
8
8
|
`;let T=(()=>{let o=x(p(f)),s,c=[],u=[],m,g=[],v=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[a({reflect:!0})],m=[a({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},c,u),e(this,null,m,{kind:`accessor`,name:`animation`,static:!1,private:!1,access:{has:e=>`animation`in e,get:e=>e.animation,set:(e,t)=>{e.animation=t}},metadata:t},g,v),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-alert`}static{this.elementDependencies=[y,b]}static{this.styles=[i(w)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get animation(){return this.#t}set animation(e){this.#t=e}constructor(){super(),this.#e=t(this,c,null),this.#t=(t(this,u),t(this,g,`all`)),this._language=(t(this,v),new d(this)),this._darkModeController=new l(this,()=>{this._syncLinks(),this._configureTitle(),this.requestUpdate()}),this.addEventListener(`animationend`,e=>this._onAnimationEnd(e))}open(){this.state=`opening`,this.dispatchBeforeOpenEvent()&&this._isZeroAnimationDuration()&&this._handleOpening()}close(){this.state===`opened`&&this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}firstUpdated(e){super.firstUpdated(e),this.open()}willUpdate(e){super.willUpdate(e),e.has(`size`)&&this._configureTitle()}_isZeroAnimationDuration(){return _(this,`--sbb-alert-animation-duration`)}_onAnimationEnd(e){this.state===`opening`&&e.animationName===`open-opacity`?this._handleOpening():this.state===`closing`&&e.animationName===`close`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.dispatchCloseEvent(),setTimeout(()=>this.remove())}_handleSlotchange(){this._syncLinks();let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}_syncLinks(){Array.from(this.querySelectorAll?.(`sbb-link`)??[]).forEach(e=>{customElements.upgrade(e),e.negative=this._isLightMode()})}_configureTitle(){let e=this.querySelector?.(`sbb-title`);e&&(customElements.upgrade(e),e.negative=this._isLightMode(),e.visualLevel=this.size===`l`?`3`:`5`)}_isLightMode(){return!this._darkModeController.matches()}renderIconName(){return super.renderIconName()||`info`}render(){return n`
|
|
9
9
|
<!-- wrapper needed to properly support fade in animation -->
|
|
10
10
|
<div class="sbb-alert__transition-wrapper">
|
|
@@ -186,7 +186,7 @@ let SbbAlertGroupElement = (() => {
|
|
|
186
186
|
})();
|
|
187
187
|
|
|
188
188
|
// src/elements/alert/alert/alert.scss?inline
|
|
189
|
-
var alert_default = ":host {\n --sbb-alert-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n display: grid;\n grid-template-rows: 0fr;\n opacity: 0;\n border-radius: var(--sbb-alert-forced-color-border-radius);\n outline: var(--sbb-alert-outline);\n}\n\n:host(:is(:state(state-opening),[state--state-opening]):not([animation=open], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(state-closing),[state--state-closing]):not([animation=close], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host([size=s]) {\n --sbb-alert-gap: var(--sbb-
|
|
189
|
+
var alert_default = ":host {\n --sbb-alert-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n display: grid;\n grid-template-rows: 0fr;\n opacity: 0;\n border-radius: var(--sbb-alert-forced-color-border-radius);\n outline: var(--sbb-alert-outline);\n}\n\n:host(:is(:state(state-opening),[state--state-opening]):not([animation=open], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(state-closing),[state--state-closing]):not([animation=close], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host([size=s]) {\n --sbb-alert-gap: var(--sbb-alert-gap-s);\n --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-s);\n --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-s);\n}\n\n:host([size=m]) {\n --sbb-alert-gap: var(--sbb-alert-gap-m);\n --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-m);\n --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-m);\n}\n\n:host([size=l]) {\n --sbb-alert-gap: var(--sbb-alert-gap-l);\n --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-l);\n --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-l);\n --sbb-alert-icon-size: var(--sbb-alert-icon-size-l);\n --sbb-alert-title-margin-block: 0 var(--sbb-spacing-fixed-1x);\n}\n\n:host(:not(:is(:state(dark),[state--dark]))) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n grid-template-rows: 1fr;\n opacity: 1;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n animation-name: open, open-opacity;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-alert-animation-duration);\n animation-timing-function: var(--sbb-alert-timing-function);\n animation-delay: 0s, var(--sbb-alert-animation-duration);\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n animation-name: close-opacity, close;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-alert-animation-duration);\n animation-timing-function: var(--sbb-alert-timing-function);\n animation-delay: 0s, var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n}\n\n.sbb-alert__transition-wrapper {\n overflow: hidden;\n}\n\n.sbb-alert {\n display: grid;\n grid-template-columns: var(--sbb-alert-grid-template-columns);\n align-items: center;\n gap: var(--sbb-alert-gap);\n min-width: fit-content;\n padding: var(--sbb-alert-padding);\n overflow: hidden;\n color: var(--sbb-alert-color);\n background-color: var(--sbb-alert-background-color);\n border-radius: var(--sbb-alert-border-radius);\n font-size: var(--sbb-alert-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n.sbb-alert__icon {\n display: flex;\n align-self: start;\n align-items: center;\n min-width: var(--sbb-alert-icon-size);\n padding-block: var(--sbb-alert-icon-padding-block);\n min-height: 1lh;\n --sbb-icon-svg-width: var(--sbb-alert-icon-size);\n --sbb-icon-svg-height: var(--sbb-alert-icon-size);\n}\n@media (min-width: calc(37.5rem)) {\n :host(:is(:state(slotted-title),[state--slotted-title])) .sbb-alert__icon {\n padding-block: var(--sbb-spacing-fixed-1x);\n }\n}\n\n.sbb-alert__content {\n color-scheme: only light;\n order: 3;\n grid-column: 1/3;\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-alert__content {\n order: initial;\n grid-column-start: initial;\n grid-column-end: initial;\n }\n}\n\n.sbb-alert__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n.sbb-alert__close-button-wrapper {\n color-scheme: only light;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n height: 100%;\n}\n\n.sbb-alert__close-button {\n margin-block: calc(-1 * var(--sbb-spacing-fixed-8x));\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-alert__close-button {\n margin-inline-start: var(--sbb-alert-close-icon-margin);\n }\n}\n\n.sbb-alert__close-button-divider {\n display: var(--sbb-alert-close-button-divider-display, none);\n height: calc(100% - var(--sbb-spacing-fixed-1x) * 2);\n}\n\n@keyframes open {\n from {\n grid-template-rows: 0fr;\n }\n to {\n grid-template-rows: 1fr;\n }\n}\n@keyframes open-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n grid-template-rows: 1fr;\n }\n to {\n grid-template-rows: 0fr;\n }\n}\n@keyframes close-opacity {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n::slotted(sbb-title) {\n margin-block: var(--sbb-alert-title-margin-block);\n}\n";
|
|
190
190
|
|
|
191
191
|
// src/elements/alert/alert/alert.component.ts
|
|
192
192
|
/**
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -1082,8 +1082,19 @@ summary {
|
|
|
1082
1082
|
--sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
|
|
1083
1083
|
--sbb-alert-title-margin-block: 0;
|
|
1084
1084
|
--sbb-alert-font-size: var(--sbb-text-font-size-s);
|
|
1085
|
-
--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1086
|
-
--sbb-alert-
|
|
1085
|
+
--sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1086
|
+
--sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1087
|
+
--sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1088
|
+
--sbb-alert-gap: var(--sbb-alert-gap-s);
|
|
1089
|
+
--sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
|
|
1090
|
+
--sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
|
|
1091
|
+
--sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
|
|
1092
|
+
--sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-s);
|
|
1093
|
+
--sbb-alert-grid-template-columns: 1fr auto;
|
|
1094
|
+
--sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
|
|
1095
|
+
--sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
|
|
1096
|
+
--sbb-alert-icon-padding-block-l: 0.625rem;
|
|
1097
|
+
--sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-s);
|
|
1087
1098
|
--sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
|
|
1088
1099
|
--sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
|
|
1089
1100
|
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
@@ -2226,6 +2237,10 @@ summary {
|
|
|
2226
2237
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
|
|
2227
2238
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
|
|
2228
2239
|
--sbb-alert-close-button-divider-display: block;
|
|
2240
|
+
--sbb-alert-grid-template-columns: auto 1fr auto;
|
|
2241
|
+
--sbb-alert-icon-padding-block-s: 0;
|
|
2242
|
+
--sbb-alert-icon-padding-block-m: 0;
|
|
2243
|
+
--sbb-alert-icon-padding-block-l: 0;
|
|
2229
2244
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2230
2245
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2231
2246
|
--_sbb-dialog-max-height: calc(
|
package/lean-safety-theme.css
CHANGED
|
@@ -1102,8 +1102,19 @@ summary {
|
|
|
1102
1102
|
--sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
|
|
1103
1103
|
--sbb-alert-title-margin-block: 0;
|
|
1104
1104
|
--sbb-alert-font-size: var(--sbb-text-font-size-s);
|
|
1105
|
-
--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1106
|
-
--sbb-alert-
|
|
1105
|
+
--sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1106
|
+
--sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1107
|
+
--sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1108
|
+
--sbb-alert-gap: var(--sbb-alert-gap-s);
|
|
1109
|
+
--sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
|
|
1110
|
+
--sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
|
|
1111
|
+
--sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
|
|
1112
|
+
--sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-s);
|
|
1113
|
+
--sbb-alert-grid-template-columns: 1fr auto;
|
|
1114
|
+
--sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
|
|
1115
|
+
--sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
|
|
1116
|
+
--sbb-alert-icon-padding-block-l: 0.625rem;
|
|
1117
|
+
--sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-s);
|
|
1107
1118
|
--sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
|
|
1108
1119
|
--sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
|
|
1109
1120
|
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
@@ -2246,6 +2257,10 @@ summary {
|
|
|
2246
2257
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
|
|
2247
2258
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
|
|
2248
2259
|
--sbb-alert-close-button-divider-display: block;
|
|
2260
|
+
--sbb-alert-grid-template-columns: auto 1fr auto;
|
|
2261
|
+
--sbb-alert-icon-padding-block-s: 0;
|
|
2262
|
+
--sbb-alert-icon-padding-block-m: 0;
|
|
2263
|
+
--sbb-alert-icon-padding-block-l: 0;
|
|
2249
2264
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2250
2265
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2251
2266
|
--_sbb-dialog-max-height: calc(
|
package/lean-theme.css
CHANGED
|
@@ -1102,8 +1102,19 @@ summary {
|
|
|
1102
1102
|
--sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
|
|
1103
1103
|
--sbb-alert-title-margin-block: 0;
|
|
1104
1104
|
--sbb-alert-font-size: var(--sbb-text-font-size-s);
|
|
1105
|
-
--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1106
|
-
--sbb-alert-
|
|
1105
|
+
--sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1106
|
+
--sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1107
|
+
--sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1108
|
+
--sbb-alert-gap: var(--sbb-alert-gap-s);
|
|
1109
|
+
--sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
|
|
1110
|
+
--sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
|
|
1111
|
+
--sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
|
|
1112
|
+
--sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-s);
|
|
1113
|
+
--sbb-alert-grid-template-columns: 1fr auto;
|
|
1114
|
+
--sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
|
|
1115
|
+
--sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
|
|
1116
|
+
--sbb-alert-icon-padding-block-l: 0.625rem;
|
|
1117
|
+
--sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-s);
|
|
1107
1118
|
--sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
|
|
1108
1119
|
--sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
|
|
1109
1120
|
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
@@ -2246,6 +2257,10 @@ summary {
|
|
|
2246
2257
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
|
|
2247
2258
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
|
|
2248
2259
|
--sbb-alert-close-button-divider-display: block;
|
|
2260
|
+
--sbb-alert-grid-template-columns: auto 1fr auto;
|
|
2261
|
+
--sbb-alert-icon-padding-block-s: 0;
|
|
2262
|
+
--sbb-alert-icon-padding-block-m: 0;
|
|
2263
|
+
--sbb-alert-icon-padding-block-l: 0;
|
|
2249
2264
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2250
2265
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2251
2266
|
--_sbb-dialog-max-height: calc(
|
package/off-brand-theme.css
CHANGED
|
@@ -1082,8 +1082,19 @@ summary {
|
|
|
1082
1082
|
--sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
|
|
1083
1083
|
--sbb-alert-title-margin-block: 0;
|
|
1084
1084
|
--sbb-alert-font-size: var(--sbb-text-font-size-s);
|
|
1085
|
-
--sbb-alert-gap: var(--sbb-spacing-fixed-
|
|
1086
|
-
--sbb-alert-
|
|
1085
|
+
--sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1086
|
+
--sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1087
|
+
--sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1088
|
+
--sbb-alert-gap: var(--sbb-alert-gap-m);
|
|
1089
|
+
--sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
|
|
1090
|
+
--sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
|
|
1091
|
+
--sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
|
|
1092
|
+
--sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-m);
|
|
1093
|
+
--sbb-alert-grid-template-columns: 1fr auto;
|
|
1094
|
+
--sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
|
|
1095
|
+
--sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
|
|
1096
|
+
--sbb-alert-icon-padding-block-l: 0.625rem;
|
|
1097
|
+
--sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-m);
|
|
1087
1098
|
--sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
|
|
1088
1099
|
--sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
|
|
1089
1100
|
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
@@ -2226,6 +2237,10 @@ summary {
|
|
|
2226
2237
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
|
|
2227
2238
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
|
|
2228
2239
|
--sbb-alert-close-button-divider-display: block;
|
|
2240
|
+
--sbb-alert-grid-template-columns: auto 1fr auto;
|
|
2241
|
+
--sbb-alert-icon-padding-block-s: 0;
|
|
2242
|
+
--sbb-alert-icon-padding-block-m: 0;
|
|
2243
|
+
--sbb-alert-icon-padding-block-l: 0;
|
|
2229
2244
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2230
2245
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2231
2246
|
--_sbb-dialog-max-height: calc(
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.13.0-dev.
|
|
3
|
+
"version": "5.13.0-dev.1793626084",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/b48040bb5308b445c67e9227023db8f28ffc1b9d"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1102,8 +1102,19 @@ summary {
|
|
|
1102
1102
|
--sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
|
|
1103
1103
|
--sbb-alert-title-margin-block: 0;
|
|
1104
1104
|
--sbb-alert-font-size: var(--sbb-text-font-size-s);
|
|
1105
|
-
--sbb-alert-gap: var(--sbb-spacing-fixed-
|
|
1106
|
-
--sbb-alert-
|
|
1105
|
+
--sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1106
|
+
--sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1107
|
+
--sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1108
|
+
--sbb-alert-gap: var(--sbb-alert-gap-m);
|
|
1109
|
+
--sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
|
|
1110
|
+
--sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
|
|
1111
|
+
--sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
|
|
1112
|
+
--sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-m);
|
|
1113
|
+
--sbb-alert-grid-template-columns: 1fr auto;
|
|
1114
|
+
--sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
|
|
1115
|
+
--sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
|
|
1116
|
+
--sbb-alert-icon-padding-block-l: 0.625rem;
|
|
1117
|
+
--sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-m);
|
|
1107
1118
|
--sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
|
|
1108
1119
|
--sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
|
|
1109
1120
|
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
@@ -2246,6 +2257,10 @@ summary {
|
|
|
2246
2257
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
|
|
2247
2258
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
|
|
2248
2259
|
--sbb-alert-close-button-divider-display: block;
|
|
2260
|
+
--sbb-alert-grid-template-columns: auto 1fr auto;
|
|
2261
|
+
--sbb-alert-icon-padding-block-s: 0;
|
|
2262
|
+
--sbb-alert-icon-padding-block-m: 0;
|
|
2263
|
+
--sbb-alert-icon-padding-block-l: 0;
|
|
2249
2264
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2250
2265
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2251
2266
|
--_sbb-dialog-max-height: calc(
|
package/standard-theme.css
CHANGED
|
@@ -1102,8 +1102,19 @@ summary {
|
|
|
1102
1102
|
--sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
|
|
1103
1103
|
--sbb-alert-title-margin-block: 0;
|
|
1104
1104
|
--sbb-alert-font-size: var(--sbb-text-font-size-s);
|
|
1105
|
-
--sbb-alert-gap: var(--sbb-spacing-fixed-
|
|
1106
|
-
--sbb-alert-
|
|
1105
|
+
--sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
|
|
1106
|
+
--sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1107
|
+
--sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
|
|
1108
|
+
--sbb-alert-gap: var(--sbb-alert-gap-m);
|
|
1109
|
+
--sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
|
|
1110
|
+
--sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
|
|
1111
|
+
--sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
|
|
1112
|
+
--sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-m);
|
|
1113
|
+
--sbb-alert-grid-template-columns: 1fr auto;
|
|
1114
|
+
--sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
|
|
1115
|
+
--sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
|
|
1116
|
+
--sbb-alert-icon-padding-block-l: 0.625rem;
|
|
1117
|
+
--sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-m);
|
|
1107
1118
|
--sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
|
|
1108
1119
|
--sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
|
|
1109
1120
|
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
@@ -2246,6 +2257,10 @@ summary {
|
|
|
2246
2257
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
|
|
2247
2258
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
|
|
2248
2259
|
--sbb-alert-close-button-divider-display: block;
|
|
2260
|
+
--sbb-alert-grid-template-columns: auto 1fr auto;
|
|
2261
|
+
--sbb-alert-icon-padding-block-s: 0;
|
|
2262
|
+
--sbb-alert-icon-padding-block-m: 0;
|
|
2263
|
+
--sbb-alert-icon-padding-block-l: 0;
|
|
2249
2264
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2250
2265
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2251
2266
|
--_sbb-dialog-max-height: calc(
|