@sbb-esta/lyne-elements-dev 5.10.0-dev.1791795903 → 5.11.0-dev.1791814905
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/button/_button.global.scss +6 -5
- package/button.pure.js +1 -1
- package/development/button.pure.js +1 -1
- package/lean-off-brand-theme.css +6 -5
- package/lean-safety-theme.css +6 -5
- package/lean-theme.css +6 -5
- package/off-brand-theme.css +6 -5
- package/package.json +2 -2
- package/safety-theme.css +6 -5
- package/standard-theme.css +6 -5
|
@@ -61,8 +61,8 @@ $loading: '[loading], .sbb-loading';
|
|
|
61
61
|
--sbb-button-color-active-background: Canvas !important;
|
|
62
62
|
--sbb-button-color-disabled-background: Canvas !important;
|
|
63
63
|
--sbb-button-color-disabled-text: GrayText !important;
|
|
64
|
-
--sbb-button-color-loading-border:
|
|
65
|
-
--
|
|
64
|
+
--sbb-button-color-loading-border: CanvasText !important;
|
|
65
|
+
--sbb-button-color-loading-snake-color: Canvas;
|
|
66
66
|
|
|
67
67
|
// For static cases, button and link roles will override it.
|
|
68
68
|
--sbb-button-color-default-text: CanvasText !important;
|
|
@@ -98,6 +98,7 @@ $loading: '[loading], .sbb-loading';
|
|
|
98
98
|
border: var(--_border-action);
|
|
99
99
|
transition-duration: var(--sbb-button-transition-duration);
|
|
100
100
|
transition-timing-function: var(--sbb-button-transition-easing-function);
|
|
101
|
+
forced-color-adjust: var(--_forced-colors-adjust, auto);
|
|
101
102
|
|
|
102
103
|
// When using padding-block as transition-property, it doesn't work in Safari
|
|
103
104
|
transition-property: color, background-color, padding-top, padding-bottom;
|
|
@@ -247,7 +248,7 @@ $loading: '[loading], .sbb-loading';
|
|
|
247
248
|
50%,
|
|
248
249
|
var(--sbb-button-color-loading-border) 0deg,
|
|
249
250
|
var(--sbb-button-color-loading-border) 300deg,
|
|
250
|
-
var(--sbb-button-color-active-text) 360deg
|
|
251
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
|
|
251
252
|
),
|
|
252
253
|
var(--_background-color);
|
|
253
254
|
}
|
|
@@ -257,8 +258,7 @@ $loading: '[loading], .sbb-loading';
|
|
|
257
258
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
258
259
|
);
|
|
259
260
|
--_border: none;
|
|
260
|
-
--_border-action: var(--sbb-button-loading-border-width) dotted
|
|
261
|
-
var(--_sbb-button-loading-hidden-border-color, transparent);
|
|
261
|
+
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
262
262
|
--_padding-block: calc(
|
|
263
263
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
264
264
|
);
|
|
@@ -266,6 +266,7 @@ $loading: '[loading], .sbb-loading';
|
|
|
266
266
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
267
267
|
);
|
|
268
268
|
--_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
269
|
+
--_forced-colors-adjust: none;
|
|
269
270
|
}
|
|
270
271
|
|
|
271
272
|
@mixin variables--primary {
|
package/button.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{SbbActionBaseElement as e,SbbButtonBaseElement as t,SbbDisabledInteractiveMixin as n,SbbDisabledMixin as r,SbbDisabledTabIndexActionMixin as i,SbbElement as a,SbbLinkBaseElement as o,SbbNamedSlotListMixin as s,SbbNegativeMixin as c,forceType as l}from"./core.js";import{__esDecorate as u,__runInitializers as d}from"tslib";import{html as f,unsafeCSS as p}from"lit";import{property as m}from"lit/decorators.js";import{html as h}from"lit/static-html.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{--sbb-button-color-active-background:var(--sbb-background-color-1-inverted);--sbb-button-color-active-border:var(--sbb-border-color-1);--sbb-button-color-active-text:light-dark(var(--sbb-color-cloud),var(--sbb-color-anthracite));--sbb-button-color-default-background:var(--sbb-background-color-3-inverted);--sbb-button-color-default-border:var(--sbb-border-color-3);--sbb-button-color-default-text:var(--sbb-color-1-inverted);--sbb-button-color-hover-background:var(--sbb-background-color-3-inverted);--sbb-button-color-hover-border:var(--sbb-border-color-3);--sbb-button-color-hover-text:var(--sbb-color-3-inverted);--sbb-button-color-loading-border:light-dark(var(--sbb-color-iron),var(--sbb-color-silver));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),color-mix(in srgb, var(--sbb-color-black) 30%, transparent))}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-1-negative-inverted);--sbb-button-color-active-border:var(--sbb-border-color-1-negative);--sbb-button-color-active-text:var(--sbb-color-anthracite);--sbb-button-color-default-background:var(--sbb-background-color-3-negative-inverted);--sbb-button-color-default-border:var(--sbb-border-color-3-negative);--sbb-button-color-default-text:var(--sbb-color-1-negative-inverted);--sbb-button-color-hover-background:var(--sbb-background-color-3-negative-inverted);--sbb-button-color-hover-border:var(--sbb-border-color-3-negative);--sbb-button-color-hover-text:var(--sbb-color-4-negative-inverted);--sbb-button-color-loading-border:var(--sbb-color-silver);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
|
|
2
|
-
`,v=`:host{--sbb-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-button-box-shadow-definition:var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--_width:unset;--_border-color:var(--sbb-button-color-default-border);--_background-color:var(--sbb-button-color-default-background);--_background:var(--_background-color);--_color:var(--sbb-button-color-default-text);--_button-inset:0;--_hover-offset:.0625rem;--_padding-block:var(--sbb-button-padding-block-min);--_padding-inline:var(--sbb-button-padding-inline);--_border:calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix,1px)) solid var(--_border-color);--_animation-loading-delay:var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay));--_animation-loading-duration:var(--sbb-disable-animation-duration,3s);--_animation-loading-rotate-function:linear(0, .25 12.5% 37.5%, .75 62.5% 87.5%, 1);--_animation-loading-rotate:sbb-button-rotate var(--_animation-loading-duration) var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);--_animation-loading-move:sbb-button-move calc(var(--_animation-loading-duration) / 2) var(--_animation-loading-delay) alternate infinite linear;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-button-border-overlap-fix:0rem;--sbb-button-color-default-border:CanvasText!important;--sbb-button-color-active-border:Highlight!important;--sbb-button-color-default-background:Canvas!important;--sbb-button-color-hover-background:Canvas!important;--sbb-button-color-active-background:Canvas!important;--sbb-button-color-disabled-background:Canvas!important;--sbb-button-color-disabled-text:GrayText!important;--sbb-button-color-loading-border:
|
|
2
|
+
`,v=`:host{--sbb-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-button-box-shadow-definition:var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--_width:unset;--_border-color:var(--sbb-button-color-default-border);--_background-color:var(--sbb-button-color-default-background);--_background:var(--_background-color);--_color:var(--sbb-button-color-default-text);--_button-inset:0;--_hover-offset:.0625rem;--_padding-block:var(--sbb-button-padding-block-min);--_padding-inline:var(--sbb-button-padding-inline);--_border:calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix,1px)) solid var(--_border-color);--_animation-loading-delay:var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay));--_animation-loading-duration:var(--sbb-disable-animation-duration,3s);--_animation-loading-rotate-function:linear(0, .25 12.5% 37.5%, .75 62.5% 87.5%, 1);--_animation-loading-rotate:sbb-button-rotate var(--_animation-loading-duration) var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);--_animation-loading-move:sbb-button-move calc(var(--_animation-loading-duration) / 2) var(--_animation-loading-delay) alternate infinite linear;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-button-color-loading-snake-color:Canvas;--sbb-button-border-overlap-fix:0rem;--sbb-button-color-default-border:CanvasText!important;--sbb-button-color-active-border:Highlight!important;--sbb-button-color-default-background:Canvas!important;--sbb-button-color-hover-background:Canvas!important;--sbb-button-color-active-background:Canvas!important;--sbb-button-color-disabled-background:Canvas!important;--sbb-button-color-disabled-text:GrayText!important;--sbb-button-color-loading-border:CanvasText!important;--sbb-button-color-default-text:CanvasText!important;--sbb-button-color-hover-text:CanvasText!important;--sbb-button-color-active-text:CanvasText!important}:host(:is(:state(button),[state--button])){--sbb-button-color-default-text:ButtonText!important;--sbb-button-color-hover-text:ButtonText!important;--sbb-button-color-active-text:ButtonText!important}:host(:is(:state(link),[state--link])){--sbb-button-color-default-text:LinkText!important;--sbb-button-color-hover-text:LinkText!important;--sbb-button-color-active-text:LinkText!important}}:host([negative]){--sbb-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text:var(--sbb-color-aluminium)}:host([size=l]){--sbb-button-min-height:var(--sbb-button-min-height-size-l);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-l)}:host([size=m]){--sbb-button-min-height:var(--sbb-button-min-height-size-m);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-m)}:host([size=s]){--sbb-button-min-height:var(--sbb-button-min-height-size-s);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-s);--sbb-button-gap:var(--sbb-spacing-fixed-1x)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-button-padding-inline:0;--_width:var(--sbb-button-min-height);--_animation-loading-rotate-function:linear}@media (any-hover:hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-translate-y-content-hover:-.0625rem;--sbb-button-shadow-1-offset-y:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y));--sbb-button-shadow-1-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor:var(--sbb-cursor-pointer);--_border-color:var(--sbb-button-color-hover-border);--_color:var(--sbb-button-color-hover-text);--_background-color:var(--sbb-button-color-hover-background);--_button-inset:calc(var(--sbb-button-border-width) * -1)}}@media (forced-colors:active){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border:Highlight!important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor:var(--sbb-cursor-default);--_color:var(--sbb-button-color-disabled-text);--_background-color:var(--sbb-button-color-disabled-background);--_border-color:var(--sbb-button-color-disabled-border);--_border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,:is(:state(active),[state--active]),[loading])){--_color:var(--sbb-button-color-active-text);--_background-color:var(--sbb-button-color-active-background);--_border-color:var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_loading-outline-offset:calc(var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width));--_border:none;--_border-action:var(--sbb-button-loading-border-width) dotted transparent;--_padding-block:calc(var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width));--_padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));--_animation:var(--_animation-loading-rotate), var(--_animation-loading-move);--_forced-colors-adjust:none}.sbb-action-base{gap:var(--sbb-button-gap);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);font-weight:700;line-height:var(--sbb-typo-line-height-text);text-align:left;white-space:nowrap;min-height:var(--sbb-button-min-height);width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);user-select:none;background:var(--_background);border:var(--_border-action);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);forced-color-adjust:var(--_forced-colors-adjust,auto);animation:var(--_animation);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);outline:none;justify-content:center;align-items:center;text-decoration:none;transition-property:color,background-color,padding-top,padding-bottom;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow;position:absolute}:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--_loading-outline-offset,var(--sbb-focus-outline-offset))}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{--_background:border-box padding-box linear-gradient(var(--_background-color)), border-box conic-gradient(from var(--sbb-button-loading-angle) at clamp(calc(var(--sbb-button-min-height) / 2), var(--sbb-button-loading-offset), calc(100% - var(--sbb-button-min-height) / 2)) 50%, var(--sbb-button-color-loading-border) 0deg, var(--sbb-button-color-loading-border) 300deg, var(--sbb-button-color-loading-snake-color,var(--sbb-button-color-active-text)) 360deg), var(--_background-color)}.sbb-button__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover,0)}@keyframes sbb-button-rotate{0%{--sbb-button-loading-angle:-90deg}to{--sbb-button-loading-angle:270deg}}@keyframes sbb-button-move{0%{--sbb-button-loading-offset:0%}to{--sbb-button-loading-offset:100%}}
|
|
3
3
|
`,y=`:host{-webkit-tap-highlight-color:transparent;--sbb-mini-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-mini-button-color-background:var(--sbb-mini-button-color-default-background);--sbb-mini-button-color:var(--sbb-mini-button-color-text);height:fit-content;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-mini-button-color-text:ButtonText!important;--sbb-mini-button-color-hover-background:Highlight!important;--sbb-mini-button-color-active-background:Highlight!important;--sbb-mini-button-color-disabled-background:Canvas!important;--sbb-mini-button-color-disabled-border:GrayText!important;--sbb-mini-button-color-disabled-text:GrayText!important}}:host([negative]){--sbb-mini-button-color-text:var(--sbb-color-3-negative);--sbb-mini-button-color-default-background:transparent;--sbb-mini-button-color-hover-background:var(--sbb-background-color-3-negative);--sbb-mini-button-color-active-background:var(--sbb-background-color-4-negative);--sbb-mini-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-mini-button-color-disabled-border:var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text:var(--sbb-color-5)}@media (any-hover:hover){:host(:is(:hover,:is(:state(force-hover),[state--force-hover])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]),:active,:is(:state(active),[state--active]))){--sbb-mini-button-translate-y-content-hover:-.0625rem;--sbb-mini-button-color-background:var(--sbb-mini-button-color-hover-background)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background:var(--sbb-mini-button-color-active-background)}:host(:is([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background:var(--sbb-mini-button-color-disabled-background);--sbb-mini-button-border:var(--sbb-border-width-1x) dashed var(--sbb-mini-button-color-disabled-border);--sbb-mini-button-color:var(--sbb-mini-button-color-disabled-text);--sbb-mini-button-pointer-events:none;--sbb-mini-button-cursor:var(--sbb-cursor-default)}:host(:is(:state(focus-visible),[state--focus-visible])){--sbb-focus-outline-style:initial}.sbb-action-base{color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);user-select:none;pointer-events:var(--sbb-mini-button-pointer-events,auto);cursor:var(--sbb-mini-button-cursor,var(--sbb-cursor-pointer));transition:color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);outline:none;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";border-radius:var(--sbb-mini-button-border-radius);background-color:var(--sbb-mini-button-color-background);transition-duration:var(--sbb-mini-button-transition-duration);transition-timing-function:var(--sbb-mini-button-transition-easing-function);border:var(--sbb-mini-button-border);transition-property:inset,background-color;position:absolute;inset:0}.sbb-action-base:focus-visible:before,:host(:is(:is(:state(focus-visible),[state--focus-visible]),:focus-visible)) .sbb-action-base:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}::slotted(sbb-icon),sbb-icon{transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover,0);min-width:var(--_sbb-mini-button-image-size,var(--sbb-size-icon-ui-small));min-height:var(--_sbb-mini-button-image-size,var(--sbb-size-icon-ui-small));justify-content:center;align-items:center;display:flex}
|
|
4
4
|
`,b=`:host{--sbb-mini-button-gap:.125rem;--sbb-mini-button-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display:block;--sbb-mini-button-label-height:var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline:0;--sbb-mini-button-label-display:none;--sbb-mini-button-label-height:unset}.sbb-action-base{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);padding-inline:var(--sbb-mini-button-padding-inline);justify-content:center;align-items:center}.sbb-mini-button__label{white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover,0);overflow:hidden}
|
|
5
5
|
`,x=`:host{--sbb-button-color-active-background:var(--sbb-color-primary150);--sbb-button-color-active-border:var(--sbb-color-primary150);--sbb-button-color-active-text:var(--sbb-color-4-negative);--sbb-button-color-default-background:var(--sbb-color-primary);--sbb-button-color-default-border:var(--sbb-color-primary);--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-color-primary125);--sbb-button-color-hover-border:var(--sbb-color-primary125);--sbb-button-color-hover-text:var(--sbb-color-3-negative);--sbb-button-color-loading-border:light-dark(color-mix(in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text)),color-mix(in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text)));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-primary) 20%, transparent),color-mix(in srgb, var(--sbb-color-primary) 40%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent),color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent))}:host([negative]){--sbb-button-color-active-background:var(--sbb-color-primary150);--sbb-button-color-active-border:var(--sbb-color-primary150);--sbb-button-color-active-text:var(--sbb-color-4-negative);--sbb-button-color-default-background:var(--sbb-color-primary);--sbb-button-color-default-border:var(--sbb-color-primary);--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-color-primary125);--sbb-button-color-hover-border:var(--sbb-color-primary125);--sbb-button-color-hover-text:var(--sbb-color-3-negative);--sbb-button-color-loading-border:color-mix(in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text));--sbb-button-shadow-1-color:light-dark(color-mix(in srgb, var(--sbb-color-primary) 60%, transparent),color-mix(in srgb, var(--sbb-color-primary) 40%, transparent));--sbb-button-shadow-2-color:light-dark(color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent),color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent))}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}
|
|
@@ -10,7 +10,7 @@ var accent_button_default = ":host {\n --sbb-button-color-active-background: va
|
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/elements/button/common/button-common.scss?inline
|
|
13
|
-
var button_common_default = ":host {\n display: inline-block;\n outline: none !important;\n --sbb-button-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-button-box-shadow-definition:\n var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)\n var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)\n var(--sbb-button-shadow-2-color),\n var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)\n var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)\n var(--sbb-button-shadow-1-color);\n --_width: unset;\n --_border-color: var(--sbb-button-color-default-border);\n --_background-color: var(--sbb-button-color-default-background);\n --_background: var(--_background-color);\n --_color: var(--sbb-button-color-default-text);\n --_button-inset: 0;\n --_hover-offset: 0.0625rem;\n --_padding-block: var(--sbb-button-padding-block-min);\n --_padding-inline: var(--sbb-button-padding-inline);\n --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n var(--_border-color);\n --_animation-loading-delay: var(\n --sbb-disable-animation-duration,\n var(--sbb-button-loading-delay)\n );\n --_animation-loading-duration: var(--sbb-disable-animation-duration, 3s);\n --_animation-loading-rotate-function: linear(0, 0.25 12.5% 37.5%, 0.75 62.5% 87.5%, 1);\n --_animation-loading-rotate: sbb-button-rotate var(--_animation-loading-duration)\n var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);\n --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)\n var(--_animation-loading-delay) alternate infinite linear;\n}\n@media (forced-colors: active) {\n :host {\n --sbb-button-color-default-border: CanvasText !important;\n --sbb-button-color-active-border: Highlight !important;\n --sbb-button-color-default-background: Canvas !important;\n --sbb-button-color-hover-background: Canvas !important;\n --sbb-button-color-active-background: Canvas !important;\n --sbb-button-color-disabled-background: Canvas !important;\n --sbb-button-color-disabled-text: GrayText !important;\n --sbb-button-color-loading-border: Highlight !important;\n --_sbb-button-loading-hidden-border-color: Canvas !important;\n --sbb-button-color-default-text: CanvasText !important;\n --sbb-button-color-hover-text: CanvasText !important;\n --sbb-button-color-active-text: CanvasText !important;\n --sbb-button-border-overlap-fix: 0rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-button-color-default-text: ButtonText !important;\n --sbb-button-color-hover-text: ButtonText !important;\n --sbb-button-color-active-text: ButtonText !important;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(link),[state--link])) {\n --sbb-button-color-default-text: LinkText !important;\n --sbb-button-color-hover-text: LinkText !important;\n --sbb-button-color-active-text: LinkText !important;\n }\n}\n\n:host([negative]) {\n --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);\n --sbb-button-color-disabled-text: var(--sbb-color-aluminium);\n}\n\n:host([size=l]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-l);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);\n}\n\n:host([size=m]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-m);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);\n}\n\n:host([size=s]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-s);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);\n --sbb-button-gap: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-button-padding-inline: 0;\n --_width: var(--sbb-button-min-height);\n --_animation-loading-rotate-function: linear;\n}\n\n@media (any-hover: hover) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-translate-y-content-hover: -0.0625rem;\n --sbb-button-shadow-1-offset-y: calc(\n 0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)\n );\n --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));\n --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));\n --sbb-button-cursor: var(--sbb-cursor-pointer);\n --_border-color: var(--sbb-button-color-hover-border);\n --_color: var(--sbb-button-color-hover-text);\n --_background-color: var(--sbb-button-color-hover-background);\n --_button-inset: calc(var(--sbb-button-border-width) * -1);\n }\n}\n@media (forced-colors: active) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-color-hover-border: Highlight !important;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-button-cursor: var(--sbb-cursor-default);\n --_color: var(--sbb-button-color-disabled-text);\n --_background-color: var(--sbb-button-color-disabled-background);\n --_border-color: var(--sbb-button-color-disabled-border);\n --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)\n var(--_border-color);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive]):is(:active, :is(:state(active),[state--active]), [loading])) {\n --_color: var(--sbb-button-color-active-text);\n --_background-color: var(--sbb-button-color-active-background);\n --_border-color: var(--sbb-button-color-active-border);\n}\n\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n --_loading-outline-offset: calc(\n var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n );\n --_border: none;\n --_border-action: var(--sbb-button-loading-border-width) dotted\n var(--_sbb-button-loading-hidden-border-color, transparent);\n --_padding-block: calc(\n var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)\n );\n --_padding-inline: calc(\n var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)\n );\n --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);\n}\n\n.sbb-action-base {\n display: flex;\n gap: var(--sbb-button-gap);\n align-items: center;\n justify-content: center;\n font-size: var(--sbb-text-font-size-xs);\n font-weight: bold;\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n text-align: left;\n white-space: nowrap;\n text-decoration: none;\n min-height: var(--sbb-button-min-height);\n outline: none;\n width: var(--_width);\n border-radius: var(--sbb-button-border-radius);\n color: var(--_color);\n cursor: var(--sbb-button-cursor);\n user-select: none;\n background: var(--_background);\n border: var(--_border-action);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: color, background-color, padding-top, padding-bottom;\n animation: var(--_animation);\n padding-block: var(--_padding-block);\n padding-inline: var(--_padding-inline);\n position: relative;\n}\n.sbb-action-base::before {\n content: \"\";\n position: absolute;\n inset: var(--_button-inset);\n border: var(--_border);\n border-radius: var(--sbb-button-border-radius);\n pointer-events: none;\n box-shadow: var(--sbb-button-box-shadow);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: inset, border, box-shadow;\n}\n:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base::before, :host(:focus-visible) .sbb-action-base::before, .sbb-action-base:focus-visible::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--_loading-outline-offset, var(--sbb-focus-outline-offset));\n}\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) .sbb-action-base {\n --_background:\n border-box padding-box linear-gradient(var(--_background-color)),\n border-box\n conic-gradient(\n from var(--sbb-button-loading-angle) at\n clamp(\n calc(var(--sbb-button-min-height) / 2),\n var(--sbb-button-loading-offset),\n calc(100% - var(--sbb-button-min-height) / 2)\n )\n 50%,\n var(--sbb-button-color-loading-border) 0deg,\n var(--sbb-button-color-loading-border) 300deg,\n var(--sbb-button-color-active-text) 360deg\n ),\n var(--_background-color);\n}\n\n.sbb-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label {\n display: none;\n}\n\n.sbb-button__label,\n::slotted([slot=icon]),\nsbb-icon {\n transition: translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);\n translate: 0 var(--sbb-button-translate-y-content-hover, 0);\n}\n\n@keyframes sbb-button-rotate {\n from {\n --sbb-button-loading-angle: -90deg;\n }\n to {\n --sbb-button-loading-angle: 270deg;\n }\n}\n@keyframes sbb-button-move {\n from {\n --sbb-button-loading-offset: 0%;\n }\n to {\n --sbb-button-loading-offset: 100%;\n }\n}\n";
|
|
13
|
+
var button_common_default = ":host {\n display: inline-block;\n outline: none !important;\n --sbb-button-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-button-box-shadow-definition:\n var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)\n var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)\n var(--sbb-button-shadow-2-color),\n var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)\n var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)\n var(--sbb-button-shadow-1-color);\n --_width: unset;\n --_border-color: var(--sbb-button-color-default-border);\n --_background-color: var(--sbb-button-color-default-background);\n --_background: var(--_background-color);\n --_color: var(--sbb-button-color-default-text);\n --_button-inset: 0;\n --_hover-offset: 0.0625rem;\n --_padding-block: var(--sbb-button-padding-block-min);\n --_padding-inline: var(--sbb-button-padding-inline);\n --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n var(--_border-color);\n --_animation-loading-delay: var(\n --sbb-disable-animation-duration,\n var(--sbb-button-loading-delay)\n );\n --_animation-loading-duration: var(--sbb-disable-animation-duration, 3s);\n --_animation-loading-rotate-function: linear(0, 0.25 12.5% 37.5%, 0.75 62.5% 87.5%, 1);\n --_animation-loading-rotate: sbb-button-rotate var(--_animation-loading-duration)\n var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);\n --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)\n var(--_animation-loading-delay) alternate infinite linear;\n}\n@media (forced-colors: active) {\n :host {\n --sbb-button-color-default-border: CanvasText !important;\n --sbb-button-color-active-border: Highlight !important;\n --sbb-button-color-default-background: Canvas !important;\n --sbb-button-color-hover-background: Canvas !important;\n --sbb-button-color-active-background: Canvas !important;\n --sbb-button-color-disabled-background: Canvas !important;\n --sbb-button-color-disabled-text: GrayText !important;\n --sbb-button-color-loading-border: CanvasText !important;\n --sbb-button-color-loading-snake-color: Canvas;\n --sbb-button-color-default-text: CanvasText !important;\n --sbb-button-color-hover-text: CanvasText !important;\n --sbb-button-color-active-text: CanvasText !important;\n --sbb-button-border-overlap-fix: 0rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-button-color-default-text: ButtonText !important;\n --sbb-button-color-hover-text: ButtonText !important;\n --sbb-button-color-active-text: ButtonText !important;\n }\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(link),[state--link])) {\n --sbb-button-color-default-text: LinkText !important;\n --sbb-button-color-hover-text: LinkText !important;\n --sbb-button-color-active-text: LinkText !important;\n }\n}\n\n:host([negative]) {\n --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);\n --sbb-button-color-disabled-text: var(--sbb-color-aluminium);\n}\n\n:host([size=l]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-l);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);\n}\n\n:host([size=m]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-m);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);\n}\n\n:host([size=s]) {\n --sbb-button-min-height: var(--sbb-button-min-height-size-s);\n --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);\n --sbb-button-gap: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n --sbb-button-padding-inline: 0;\n --_width: var(--sbb-button-min-height);\n --_animation-loading-rotate-function: linear;\n}\n\n@media (any-hover: hover) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-translate-y-content-hover: -0.0625rem;\n --sbb-button-shadow-1-offset-y: calc(\n 0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)\n );\n --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));\n --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));\n --sbb-button-cursor: var(--sbb-cursor-pointer);\n --_border-color: var(--sbb-button-color-hover-border);\n --_color: var(--sbb-button-color-hover-text);\n --_background-color: var(--sbb-button-color-hover-background);\n --_button-inset: calc(var(--sbb-button-border-width) * -1);\n }\n}\n@media (forced-colors: active) {\n :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n --sbb-button-color-hover-border: Highlight !important;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-button-cursor: var(--sbb-cursor-default);\n --_color: var(--sbb-button-color-disabled-text);\n --_background-color: var(--sbb-button-color-disabled-background);\n --_border-color: var(--sbb-button-color-disabled-border);\n --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)\n var(--_border-color);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive]):is(:active, :is(:state(active),[state--active]), [loading])) {\n --_color: var(--sbb-button-color-active-text);\n --_background-color: var(--sbb-button-color-active-background);\n --_border-color: var(--sbb-button-color-active-border);\n}\n\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n --_loading-outline-offset: calc(\n var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n );\n --_border: none;\n --_border-action: var(--sbb-button-loading-border-width) dotted transparent;\n --_padding-block: calc(\n var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)\n );\n --_padding-inline: calc(\n var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)\n );\n --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);\n --_forced-colors-adjust: none;\n}\n\n.sbb-action-base {\n display: flex;\n gap: var(--sbb-button-gap);\n align-items: center;\n justify-content: center;\n font-size: var(--sbb-text-font-size-xs);\n font-weight: bold;\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n text-align: left;\n white-space: nowrap;\n text-decoration: none;\n min-height: var(--sbb-button-min-height);\n outline: none;\n width: var(--_width);\n border-radius: var(--sbb-button-border-radius);\n color: var(--_color);\n cursor: var(--sbb-button-cursor);\n user-select: none;\n background: var(--_background);\n border: var(--_border-action);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n forced-color-adjust: var(--_forced-colors-adjust, auto);\n transition-property: color, background-color, padding-top, padding-bottom;\n animation: var(--_animation);\n padding-block: var(--_padding-block);\n padding-inline: var(--_padding-inline);\n position: relative;\n}\n.sbb-action-base::before {\n content: \"\";\n position: absolute;\n inset: var(--_button-inset);\n border: var(--_border);\n border-radius: var(--sbb-button-border-radius);\n pointer-events: none;\n box-shadow: var(--sbb-button-box-shadow);\n transition-duration: var(--sbb-button-transition-duration);\n transition-timing-function: var(--sbb-button-transition-easing-function);\n transition-property: inset, border, box-shadow;\n}\n:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base::before, :host(:focus-visible) .sbb-action-base::before, .sbb-action-base:focus-visible::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--_loading-outline-offset, var(--sbb-focus-outline-offset));\n}\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) .sbb-action-base {\n --_background:\n border-box padding-box linear-gradient(var(--_background-color)),\n border-box\n conic-gradient(\n from var(--sbb-button-loading-angle) at\n clamp(\n calc(var(--sbb-button-min-height) / 2),\n var(--sbb-button-loading-offset),\n calc(100% - var(--sbb-button-min-height) / 2)\n )\n 50%,\n var(--sbb-button-color-loading-border) 0deg,\n var(--sbb-button-color-loading-border) 300deg,\n var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg\n ),\n var(--_background-color);\n}\n\n.sbb-button__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label {\n display: none;\n}\n\n.sbb-button__label,\n::slotted([slot=icon]),\nsbb-icon {\n transition: translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);\n translate: 0 var(--sbb-button-translate-y-content-hover, 0);\n}\n\n@keyframes sbb-button-rotate {\n from {\n --sbb-button-loading-angle: -90deg;\n }\n to {\n --sbb-button-loading-angle: 270deg;\n }\n}\n@keyframes sbb-button-move {\n from {\n --sbb-button-loading-offset: 0%;\n }\n to {\n --sbb-button-loading-offset: 100%;\n }\n}\n";
|
|
14
14
|
|
|
15
15
|
//#endregion
|
|
16
16
|
//#region src/elements/button/common/mini-button-common.scss?inline
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -2509,8 +2509,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2509
2509
|
--sbb-button-color-active-background: Canvas !important;
|
|
2510
2510
|
--sbb-button-color-disabled-background: Canvas !important;
|
|
2511
2511
|
--sbb-button-color-disabled-text: GrayText !important;
|
|
2512
|
-
--sbb-button-color-loading-border:
|
|
2513
|
-
--
|
|
2512
|
+
--sbb-button-color-loading-border: CanvasText !important;
|
|
2513
|
+
--sbb-button-color-loading-snake-color: Canvas;
|
|
2514
2514
|
--sbb-button-color-default-text: CanvasText !important;
|
|
2515
2515
|
--sbb-button-color-hover-text: CanvasText !important;
|
|
2516
2516
|
--sbb-button-color-active-text: CanvasText !important;
|
|
@@ -2554,6 +2554,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2554
2554
|
border: var(--_border-action);
|
|
2555
2555
|
transition-duration: var(--sbb-button-transition-duration);
|
|
2556
2556
|
transition-timing-function: var(--sbb-button-transition-easing-function);
|
|
2557
|
+
forced-color-adjust: var(--_forced-colors-adjust, auto);
|
|
2557
2558
|
transition-property: color, background-color, padding-top, padding-bottom;
|
|
2558
2559
|
animation: var(--_animation);
|
|
2559
2560
|
padding-block: var(--_padding-block);
|
|
@@ -2796,15 +2797,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2796
2797
|
50%,
|
|
2797
2798
|
var(--sbb-button-color-loading-border) 0deg,
|
|
2798
2799
|
var(--sbb-button-color-loading-border) 300deg,
|
|
2799
|
-
var(--sbb-button-color-active-text) 360deg
|
|
2800
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
|
|
2800
2801
|
),
|
|
2801
2802
|
var(--_background-color);
|
|
2802
2803
|
--_loading-outline-offset: calc(
|
|
2803
2804
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2804
2805
|
);
|
|
2805
2806
|
--_border: none;
|
|
2806
|
-
--_border-action: var(--sbb-button-loading-border-width) dotted
|
|
2807
|
-
var(--_sbb-button-loading-hidden-border-color, transparent);
|
|
2807
|
+
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2808
2808
|
--_padding-block: calc(
|
|
2809
2809
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
2810
2810
|
);
|
|
@@ -2812,6 +2812,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2812
2812
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2813
2813
|
);
|
|
2814
2814
|
--_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2815
|
+
--_forced-colors-adjust: none;
|
|
2815
2816
|
}
|
|
2816
2817
|
:is(.sbb-button,
|
|
2817
2818
|
.sbb-button-s,
|
package/lean-safety-theme.css
CHANGED
|
@@ -2529,8 +2529,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2529
2529
|
--sbb-button-color-active-background: Canvas !important;
|
|
2530
2530
|
--sbb-button-color-disabled-background: Canvas !important;
|
|
2531
2531
|
--sbb-button-color-disabled-text: GrayText !important;
|
|
2532
|
-
--sbb-button-color-loading-border:
|
|
2533
|
-
--
|
|
2532
|
+
--sbb-button-color-loading-border: CanvasText !important;
|
|
2533
|
+
--sbb-button-color-loading-snake-color: Canvas;
|
|
2534
2534
|
--sbb-button-color-default-text: CanvasText !important;
|
|
2535
2535
|
--sbb-button-color-hover-text: CanvasText !important;
|
|
2536
2536
|
--sbb-button-color-active-text: CanvasText !important;
|
|
@@ -2574,6 +2574,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2574
2574
|
border: var(--_border-action);
|
|
2575
2575
|
transition-duration: var(--sbb-button-transition-duration);
|
|
2576
2576
|
transition-timing-function: var(--sbb-button-transition-easing-function);
|
|
2577
|
+
forced-color-adjust: var(--_forced-colors-adjust, auto);
|
|
2577
2578
|
transition-property: color, background-color, padding-top, padding-bottom;
|
|
2578
2579
|
animation: var(--_animation);
|
|
2579
2580
|
padding-block: var(--_padding-block);
|
|
@@ -2816,15 +2817,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2816
2817
|
50%,
|
|
2817
2818
|
var(--sbb-button-color-loading-border) 0deg,
|
|
2818
2819
|
var(--sbb-button-color-loading-border) 300deg,
|
|
2819
|
-
var(--sbb-button-color-active-text) 360deg
|
|
2820
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
|
|
2820
2821
|
),
|
|
2821
2822
|
var(--_background-color);
|
|
2822
2823
|
--_loading-outline-offset: calc(
|
|
2823
2824
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2824
2825
|
);
|
|
2825
2826
|
--_border: none;
|
|
2826
|
-
--_border-action: var(--sbb-button-loading-border-width) dotted
|
|
2827
|
-
var(--_sbb-button-loading-hidden-border-color, transparent);
|
|
2827
|
+
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2828
2828
|
--_padding-block: calc(
|
|
2829
2829
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
2830
2830
|
);
|
|
@@ -2832,6 +2832,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2832
2832
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2833
2833
|
);
|
|
2834
2834
|
--_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2835
|
+
--_forced-colors-adjust: none;
|
|
2835
2836
|
}
|
|
2836
2837
|
:is(.sbb-button,
|
|
2837
2838
|
.sbb-button-s,
|
package/lean-theme.css
CHANGED
|
@@ -2529,8 +2529,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2529
2529
|
--sbb-button-color-active-background: Canvas !important;
|
|
2530
2530
|
--sbb-button-color-disabled-background: Canvas !important;
|
|
2531
2531
|
--sbb-button-color-disabled-text: GrayText !important;
|
|
2532
|
-
--sbb-button-color-loading-border:
|
|
2533
|
-
--
|
|
2532
|
+
--sbb-button-color-loading-border: CanvasText !important;
|
|
2533
|
+
--sbb-button-color-loading-snake-color: Canvas;
|
|
2534
2534
|
--sbb-button-color-default-text: CanvasText !important;
|
|
2535
2535
|
--sbb-button-color-hover-text: CanvasText !important;
|
|
2536
2536
|
--sbb-button-color-active-text: CanvasText !important;
|
|
@@ -2574,6 +2574,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2574
2574
|
border: var(--_border-action);
|
|
2575
2575
|
transition-duration: var(--sbb-button-transition-duration);
|
|
2576
2576
|
transition-timing-function: var(--sbb-button-transition-easing-function);
|
|
2577
|
+
forced-color-adjust: var(--_forced-colors-adjust, auto);
|
|
2577
2578
|
transition-property: color, background-color, padding-top, padding-bottom;
|
|
2578
2579
|
animation: var(--_animation);
|
|
2579
2580
|
padding-block: var(--_padding-block);
|
|
@@ -2816,15 +2817,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2816
2817
|
50%,
|
|
2817
2818
|
var(--sbb-button-color-loading-border) 0deg,
|
|
2818
2819
|
var(--sbb-button-color-loading-border) 300deg,
|
|
2819
|
-
var(--sbb-button-color-active-text) 360deg
|
|
2820
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
|
|
2820
2821
|
),
|
|
2821
2822
|
var(--_background-color);
|
|
2822
2823
|
--_loading-outline-offset: calc(
|
|
2823
2824
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2824
2825
|
);
|
|
2825
2826
|
--_border: none;
|
|
2826
|
-
--_border-action: var(--sbb-button-loading-border-width) dotted
|
|
2827
|
-
var(--_sbb-button-loading-hidden-border-color, transparent);
|
|
2827
|
+
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2828
2828
|
--_padding-block: calc(
|
|
2829
2829
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
2830
2830
|
);
|
|
@@ -2832,6 +2832,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2832
2832
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2833
2833
|
);
|
|
2834
2834
|
--_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2835
|
+
--_forced-colors-adjust: none;
|
|
2835
2836
|
}
|
|
2836
2837
|
:is(.sbb-button,
|
|
2837
2838
|
.sbb-button-s,
|
package/off-brand-theme.css
CHANGED
|
@@ -2509,8 +2509,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2509
2509
|
--sbb-button-color-active-background: Canvas !important;
|
|
2510
2510
|
--sbb-button-color-disabled-background: Canvas !important;
|
|
2511
2511
|
--sbb-button-color-disabled-text: GrayText !important;
|
|
2512
|
-
--sbb-button-color-loading-border:
|
|
2513
|
-
--
|
|
2512
|
+
--sbb-button-color-loading-border: CanvasText !important;
|
|
2513
|
+
--sbb-button-color-loading-snake-color: Canvas;
|
|
2514
2514
|
--sbb-button-color-default-text: CanvasText !important;
|
|
2515
2515
|
--sbb-button-color-hover-text: CanvasText !important;
|
|
2516
2516
|
--sbb-button-color-active-text: CanvasText !important;
|
|
@@ -2554,6 +2554,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2554
2554
|
border: var(--_border-action);
|
|
2555
2555
|
transition-duration: var(--sbb-button-transition-duration);
|
|
2556
2556
|
transition-timing-function: var(--sbb-button-transition-easing-function);
|
|
2557
|
+
forced-color-adjust: var(--_forced-colors-adjust, auto);
|
|
2557
2558
|
transition-property: color, background-color, padding-top, padding-bottom;
|
|
2558
2559
|
animation: var(--_animation);
|
|
2559
2560
|
padding-block: var(--_padding-block);
|
|
@@ -2796,15 +2797,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2796
2797
|
50%,
|
|
2797
2798
|
var(--sbb-button-color-loading-border) 0deg,
|
|
2798
2799
|
var(--sbb-button-color-loading-border) 300deg,
|
|
2799
|
-
var(--sbb-button-color-active-text) 360deg
|
|
2800
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
|
|
2800
2801
|
),
|
|
2801
2802
|
var(--_background-color);
|
|
2802
2803
|
--_loading-outline-offset: calc(
|
|
2803
2804
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2804
2805
|
);
|
|
2805
2806
|
--_border: none;
|
|
2806
|
-
--_border-action: var(--sbb-button-loading-border-width) dotted
|
|
2807
|
-
var(--_sbb-button-loading-hidden-border-color, transparent);
|
|
2807
|
+
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2808
2808
|
--_padding-block: calc(
|
|
2809
2809
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
2810
2810
|
);
|
|
@@ -2812,6 +2812,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2812
2812
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2813
2813
|
);
|
|
2814
2814
|
--_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2815
|
+
--_forced-colors-adjust: none;
|
|
2815
2816
|
}
|
|
2816
2817
|
:is(.sbb-button,
|
|
2817
2818
|
.sbb-button-s,
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.11.0-dev.1791814905",
|
|
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/5b2d9986dd5f1c48d7c2d0ea318f52c4e10eedbb"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -2529,8 +2529,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2529
2529
|
--sbb-button-color-active-background: Canvas !important;
|
|
2530
2530
|
--sbb-button-color-disabled-background: Canvas !important;
|
|
2531
2531
|
--sbb-button-color-disabled-text: GrayText !important;
|
|
2532
|
-
--sbb-button-color-loading-border:
|
|
2533
|
-
--
|
|
2532
|
+
--sbb-button-color-loading-border: CanvasText !important;
|
|
2533
|
+
--sbb-button-color-loading-snake-color: Canvas;
|
|
2534
2534
|
--sbb-button-color-default-text: CanvasText !important;
|
|
2535
2535
|
--sbb-button-color-hover-text: CanvasText !important;
|
|
2536
2536
|
--sbb-button-color-active-text: CanvasText !important;
|
|
@@ -2574,6 +2574,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2574
2574
|
border: var(--_border-action);
|
|
2575
2575
|
transition-duration: var(--sbb-button-transition-duration);
|
|
2576
2576
|
transition-timing-function: var(--sbb-button-transition-easing-function);
|
|
2577
|
+
forced-color-adjust: var(--_forced-colors-adjust, auto);
|
|
2577
2578
|
transition-property: color, background-color, padding-top, padding-bottom;
|
|
2578
2579
|
animation: var(--_animation);
|
|
2579
2580
|
padding-block: var(--_padding-block);
|
|
@@ -2816,15 +2817,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2816
2817
|
50%,
|
|
2817
2818
|
var(--sbb-button-color-loading-border) 0deg,
|
|
2818
2819
|
var(--sbb-button-color-loading-border) 300deg,
|
|
2819
|
-
var(--sbb-button-color-active-text) 360deg
|
|
2820
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
|
|
2820
2821
|
),
|
|
2821
2822
|
var(--_background-color);
|
|
2822
2823
|
--_loading-outline-offset: calc(
|
|
2823
2824
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2824
2825
|
);
|
|
2825
2826
|
--_border: none;
|
|
2826
|
-
--_border-action: var(--sbb-button-loading-border-width) dotted
|
|
2827
|
-
var(--_sbb-button-loading-hidden-border-color, transparent);
|
|
2827
|
+
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2828
2828
|
--_padding-block: calc(
|
|
2829
2829
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
2830
2830
|
);
|
|
@@ -2832,6 +2832,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2832
2832
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2833
2833
|
);
|
|
2834
2834
|
--_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2835
|
+
--_forced-colors-adjust: none;
|
|
2835
2836
|
}
|
|
2836
2837
|
:is(.sbb-button,
|
|
2837
2838
|
.sbb-button-s,
|
package/standard-theme.css
CHANGED
|
@@ -2529,8 +2529,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2529
2529
|
--sbb-button-color-active-background: Canvas !important;
|
|
2530
2530
|
--sbb-button-color-disabled-background: Canvas !important;
|
|
2531
2531
|
--sbb-button-color-disabled-text: GrayText !important;
|
|
2532
|
-
--sbb-button-color-loading-border:
|
|
2533
|
-
--
|
|
2532
|
+
--sbb-button-color-loading-border: CanvasText !important;
|
|
2533
|
+
--sbb-button-color-loading-snake-color: Canvas;
|
|
2534
2534
|
--sbb-button-color-default-text: CanvasText !important;
|
|
2535
2535
|
--sbb-button-color-hover-text: CanvasText !important;
|
|
2536
2536
|
--sbb-button-color-active-text: CanvasText !important;
|
|
@@ -2574,6 +2574,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2574
2574
|
border: var(--_border-action);
|
|
2575
2575
|
transition-duration: var(--sbb-button-transition-duration);
|
|
2576
2576
|
transition-timing-function: var(--sbb-button-transition-easing-function);
|
|
2577
|
+
forced-color-adjust: var(--_forced-colors-adjust, auto);
|
|
2577
2578
|
transition-property: color, background-color, padding-top, padding-bottom;
|
|
2578
2579
|
animation: var(--_animation);
|
|
2579
2580
|
padding-block: var(--_padding-block);
|
|
@@ -2816,15 +2817,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2816
2817
|
50%,
|
|
2817
2818
|
var(--sbb-button-color-loading-border) 0deg,
|
|
2818
2819
|
var(--sbb-button-color-loading-border) 300deg,
|
|
2819
|
-
var(--sbb-button-color-active-text) 360deg
|
|
2820
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
|
|
2820
2821
|
),
|
|
2821
2822
|
var(--_background-color);
|
|
2822
2823
|
--_loading-outline-offset: calc(
|
|
2823
2824
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2824
2825
|
);
|
|
2825
2826
|
--_border: none;
|
|
2826
|
-
--_border-action: var(--sbb-button-loading-border-width) dotted
|
|
2827
|
-
var(--_sbb-button-loading-hidden-border-color, transparent);
|
|
2827
|
+
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2828
2828
|
--_padding-block: calc(
|
|
2829
2829
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
2830
2830
|
);
|
|
@@ -2832,6 +2832,7 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2832
2832
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2833
2833
|
);
|
|
2834
2834
|
--_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2835
|
+
--_forced-colors-adjust: none;
|
|
2835
2836
|
}
|
|
2836
2837
|
:is(.sbb-button,
|
|
2837
2838
|
.sbb-button-s,
|