@sbb-esta/lyne-elements-dev 4.7.0-dev.1773219716 → 4.7.0-dev.1773224724
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 +15 -19
- package/core.css +44 -12
- package/custom-elements.json +1628 -1628
- package/development/header/common/header-action-common.js +7 -28
- package/development/header/header/header.component.js +11 -11
- package/development/header/header-environment/header-environment.component.js +4 -12
- package/header/common/header-action-common.js +14 -14
- package/header/header/header.component.js +1 -1
- package/header/header-environment/header-environment.component.js +4 -4
- package/off-brand-theme.css +44 -12
- package/package.json +2 -2
- package/safety-theme.css +44 -12
- package/standard-theme.css +44 -12
|
@@ -12,39 +12,18 @@ import { boxSizingStyles } from "../../core/styles.js";
|
|
|
12
12
|
import { SbbIconNameMixin } from "../../icon.js";
|
|
13
13
|
import { css } from "lit";
|
|
14
14
|
const style = css`:host {
|
|
15
|
-
|
|
16
|
-
outline: none !important;
|
|
17
|
-
--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
|
|
18
|
-
--sbb-header-action-color: var(--sbb-color-1);
|
|
19
|
-
--sbb-header-action-background-color: transparent;
|
|
20
|
-
--sbb-header-action-min-height: var(--sbb-size-element-s);
|
|
15
|
+
--sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);
|
|
21
16
|
--sbb-header-action-min-width: var(--sbb-header-action-min-height);
|
|
22
17
|
--sbb-header-action-transition-duration: var(
|
|
23
18
|
--sbb-disable-animation-duration,
|
|
24
19
|
var(--sbb-animation-duration-2x)
|
|
25
20
|
);
|
|
26
|
-
--sbb-header-action-transition-easing: var(--sbb-animation-easing);
|
|
27
|
-
--sbb-header-action-border-color: transparent;
|
|
28
|
-
--sbb-header-action-background-inset: 0;
|
|
29
|
-
--sbb-header-action-translate-y: 0;
|
|
30
|
-
--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
|
|
31
|
-
--sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
|
|
32
|
-
--sbb-header-action-active-border-width: var(--sbb-border-width-2x);
|
|
33
|
-
--sbb-header-action-active-border-color: var(--sbb-header-action-color);
|
|
34
|
-
--sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);
|
|
35
|
-
--sbb-header-action-active-border-scale: 0;
|
|
36
21
|
--_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));
|
|
37
|
-
--sbb-header-first-item-icon-shift: 0.125rem;
|
|
38
22
|
--sbb-header-first-item-margin-inline-start: calc(
|
|
39
23
|
var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift)
|
|
40
24
|
);
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
:host {
|
|
44
|
-
--sbb-header-action-border-color: CanvasText;
|
|
45
|
-
--sbb-header-action-color: LinkText;
|
|
46
|
-
--sbb-header-action-active-border-width: 0;
|
|
47
|
-
}
|
|
25
|
+
display: inline-block;
|
|
26
|
+
outline: none !important;
|
|
48
27
|
}
|
|
49
28
|
|
|
50
29
|
@media (any-hover: hover) {
|
|
@@ -110,7 +89,7 @@ const style = css`:host {
|
|
|
110
89
|
.sbb-action-base::before {
|
|
111
90
|
position: absolute;
|
|
112
91
|
content: "";
|
|
113
|
-
inset: var(--sbb-header-action-background-inset);
|
|
92
|
+
inset: var(--sbb-header-action-background-inset, 0);
|
|
114
93
|
border-radius: var(--sbb-border-radius-infinity);
|
|
115
94
|
background-color: var(--sbb-header-action-background-color);
|
|
116
95
|
transition-duration: var(--sbb-header-action-transition-duration);
|
|
@@ -133,7 +112,7 @@ const style = css`:host {
|
|
|
133
112
|
border-block-end: var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);
|
|
134
113
|
inset: auto 0 calc(-1 * var(--sbb-header-action-active-border-width));
|
|
135
114
|
margin-inline: var(--sbb-header-action-active-border-margin-inline);
|
|
136
|
-
scale: var(--sbb-header-action-active-border-scale);
|
|
115
|
+
scale: var(--sbb-header-action-active-border-scale, 0);
|
|
137
116
|
transition: scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);
|
|
138
117
|
}
|
|
139
118
|
|
|
@@ -142,7 +121,7 @@ const style = css`:host {
|
|
|
142
121
|
align-items: center;
|
|
143
122
|
gap: var(--sbb-header-action-gap);
|
|
144
123
|
white-space: nowrap;
|
|
145
|
-
transform: translateY(var(--sbb-header-action-translate-y));
|
|
124
|
+
transform: translateY(var(--sbb-header-action-translate-y, 0));
|
|
146
125
|
transition: transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);
|
|
147
126
|
will-change: transform;
|
|
148
127
|
max-width: 100%;
|
|
@@ -347,4 +326,4 @@ const SbbHeaderActionCommonElementMixin = (superClass) => {
|
|
|
347
326
|
export {
|
|
348
327
|
SbbHeaderActionCommonElementMixin
|
|
349
328
|
};
|
|
350
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLWFjdGlvbi1jb21tb24uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9oZWFkZXIvY29tbW9uL2hlYWRlci1hY3Rpb24tY29tbW9uLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB0eXBlIHsgU2JiQWN0aW9uQmFzZUVsZW1lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHR5cGUgeyBTYmJIb3Jpem9udGFsRnJvbSB9IGZyb20gJy4uLy4uL2NvcmUvaW50ZXJmYWNlcy50cyc7XG5pbXBvcnQgdHlwZSB7IEFic3RyYWN0Q29uc3RydWN0b3IgfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgeyBTYmJJY29uTmFtZU1peGluIH0gZnJvbSAnLi4vLi4vaWNvbi50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2hlYWRlci1hY3Rpb24uc2Nzcz9saXQmaW5saW5lJztcblxuZXhwb3J0IGRlY2xhcmUgY2xhc3MgU2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudE1peGluVHlwZSBleHRlbmRzIFNiYkljb25OYW1lTWl4aW4oXG4gIFNiYkFjdGlvbkJhc2VFbGVtZW50LFxuKSB7XG4gIHB1YmxpYyBhY2Nlc3NvciBleHBhbmRGcm9tOiBTYmJIb3Jpem9udGFsRnJvbTtcbn1cblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuZXhwb3J0IGNvbnN0IFNiYkhlYWRlckFjdGlvbkNvbW1vbkVsZW1lbnRNaXhpbiA9IDxcbiAgVCBleHRlbmRzIEFic3RyYWN0Q29uc3RydWN0b3I8U2JiQWN0aW9uQmFzZUVsZW1lbnQ+LFxuPihcbiAgc3VwZXJDbGFzczogVCxcbik6IEFic3RyYWN0Q29uc3RydWN0b3I8U2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudE1peGluVHlwZT4gJiBUID0+IHtcbiAgYWJzdHJhY3QgY2xhc3MgU2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudFxuICAgIGV4dGVuZHMgU2JiSWNvbk5hbWVNaXhpbihzdXBlckNsYXNzKVxuICAgIGltcGxlbWVudHMgUGFydGlhbDxTYmJIZWFkZXJBY3Rpb25Db21tb25FbGVtZW50TWl4aW5UeXBlPlxuICB7XG4gICAgcHVibGljIHN0YXRpYyBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gICAgLyoqXG4gICAgICogVXNlZCB0byBzZXQgdGhlIG1pbmltdW0gYnJlYWtwb2ludCBmcm9tIHdoaWNoIHRoZSB0ZXh0IGlzIGRpc3BsYXllZC5cbiAgICAgKiBFLmcuIGlmIHNldCB0byAnbGFyZ2UnLCB0aGUgdGV4dCB3aWxsIGJlIHZpc2libGUgZm9yIGJyZWFrcG9pbnRzIGxhcmdlIGFuZCB1bHRyYSxcbiAgICAgKiBhbmQgaGlkZGVuIGZvciBhbGwgdGhlIG90aGVycy4gSWdub3JlZCBpZiBubyBpY29uIGlzIHNldC5cbiAgICAgKi9cbiAgICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdleHBhbmQtZnJvbScsIHJlZmxlY3Q6IHRydWUgfSlcbiAgICBwdWJsaWMgYWNjZXNzb3IgZXhwYW5kRnJvbTogU2JiSG9yaXpvbnRhbEZyb20gPSAnbGFyZ2UnO1xuXG4gICAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlclRlbXBsYXRlKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICAgIHJldHVybiBodG1sYFxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi1oZWFkZXItYWN0aW9uX193cmFwcGVyXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItaGVhZGVyLWFjdGlvbl9faWNvblwiPiAke3N1cGVyLnJlbmRlckljb25TbG90KCl9IDwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi1oZWFkZXItYWN0aW9uX190ZXh0XCI+XG4gICAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L3NwYW4+
|
|
329
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLWFjdGlvbi1jb21tb24uanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9oZWFkZXIvY29tbW9uL2hlYWRlci1hY3Rpb24tY29tbW9uLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB0eXBlIHsgU2JiQWN0aW9uQmFzZUVsZW1lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHR5cGUgeyBTYmJIb3Jpem9udGFsRnJvbSB9IGZyb20gJy4uLy4uL2NvcmUvaW50ZXJmYWNlcy50cyc7XG5pbXBvcnQgdHlwZSB7IEFic3RyYWN0Q29uc3RydWN0b3IgfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgeyBTYmJJY29uTmFtZU1peGluIH0gZnJvbSAnLi4vLi4vaWNvbi50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2hlYWRlci1hY3Rpb24uc2Nzcz9saXQmaW5saW5lJztcblxuZXhwb3J0IGRlY2xhcmUgY2xhc3MgU2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudE1peGluVHlwZSBleHRlbmRzIFNiYkljb25OYW1lTWl4aW4oXG4gIFNiYkFjdGlvbkJhc2VFbGVtZW50LFxuKSB7XG4gIHB1YmxpYyBhY2Nlc3NvciBleHBhbmRGcm9tOiBTYmJIb3Jpem9udGFsRnJvbTtcbn1cblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuZXhwb3J0IGNvbnN0IFNiYkhlYWRlckFjdGlvbkNvbW1vbkVsZW1lbnRNaXhpbiA9IDxcbiAgVCBleHRlbmRzIEFic3RyYWN0Q29uc3RydWN0b3I8U2JiQWN0aW9uQmFzZUVsZW1lbnQ+LFxuPihcbiAgc3VwZXJDbGFzczogVCxcbik6IEFic3RyYWN0Q29uc3RydWN0b3I8U2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudE1peGluVHlwZT4gJiBUID0+IHtcbiAgYWJzdHJhY3QgY2xhc3MgU2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudFxuICAgIGV4dGVuZHMgU2JiSWNvbk5hbWVNaXhpbihzdXBlckNsYXNzKVxuICAgIGltcGxlbWVudHMgUGFydGlhbDxTYmJIZWFkZXJBY3Rpb25Db21tb25FbGVtZW50TWl4aW5UeXBlPlxuICB7XG4gICAgcHVibGljIHN0YXRpYyBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gICAgLyoqXG4gICAgICogVXNlZCB0byBzZXQgdGhlIG1pbmltdW0gYnJlYWtwb2ludCBmcm9tIHdoaWNoIHRoZSB0ZXh0IGlzIGRpc3BsYXllZC5cbiAgICAgKiBFLmcuIGlmIHNldCB0byAnbGFyZ2UnLCB0aGUgdGV4dCB3aWxsIGJlIHZpc2libGUgZm9yIGJyZWFrcG9pbnRzIGxhcmdlIGFuZCB1bHRyYSxcbiAgICAgKiBhbmQgaGlkZGVuIGZvciBhbGwgdGhlIG90aGVycy4gSWdub3JlZCBpZiBubyBpY29uIGlzIHNldC5cbiAgICAgKi9cbiAgICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdleHBhbmQtZnJvbScsIHJlZmxlY3Q6IHRydWUgfSlcbiAgICBwdWJsaWMgYWNjZXNzb3IgZXhwYW5kRnJvbTogU2JiSG9yaXpvbnRhbEZyb20gPSAnbGFyZ2UnO1xuXG4gICAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlclRlbXBsYXRlKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICAgIHJldHVybiBodG1sYFxuICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi1oZWFkZXItYWN0aW9uX193cmFwcGVyXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItaGVhZGVyLWFjdGlvbl9faWNvblwiPiAke3N1cGVyLnJlbmRlckljb25TbG90KCl9IDwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi1oZWFkZXItYWN0aW9uX190ZXh0XCI+XG4gICAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L3NwYW4+XG4gICAgICBgO1xuICAgIH1cbiAgfVxuICByZXR1cm4gU2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudCBhcyB1bmtub3duIGFzIEFic3RyYWN0Q29uc3RydWN0b3I8U2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudE1peGluVHlwZT4gJlxuICAgIFQ7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFtQk8sTUFBTSxvQ0FBb0MsQ0FHL0MsZUFDa0U7TUFDbkQsZ0NBQTRCLE1BQUE7O3NCQUNqQyxpQkFBaUIsVUFBVTs7OztBQUR0QixXQUFBLG1CQUNMLFlBQTRCO0FBQUE7O0FBV3BDLHlEQUFBLGtCQUFBLE1BQUEsMEJBQWdELE9BQU87Ozs7Ozs7O01BQXZELElBQWdCLGFBQVU7QUFBQSxlQUFBLG1CQUFBO0FBQUEsTUFBQTtBQUFBLE1BQTFCLElBQWdCLFdBQVUsT0FBQTtBQUFBLDJCQUFBLDhCQUFBO0FBQUEsTUFBQTtBQUFBLE1BRVAsaUJBQWM7QUFDL0IsZUFBTztBQUFBO0FBQUEsbURBRXNDLE1BQU0sZ0JBQWdCO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLE1BTXJFO0FBQUEsT0FYQTs7Z0NBREMsU0FBUyxFQUFFLFdBQVcsZUFBZSxTQUFTLEtBQUEsQ0FBTSxDQUFDO0FBQ3RELG1CQUFBLElBQUEsTUFBQSx3QkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLGNBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsZ0JBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFnQixZQUFVLEtBQUEsQ0FBQSxLQUFBLFVBQUE7QUFBQSxZQUFWLGFBQVU7QUFBQSxNQUFBLEtBQUEsVUFBQSxVQUFBLEdBQUEsMEJBQUEsNkJBQUE7O1VBUlosR0FBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLLEdBSmpEO0FBQUE7QUF5QmYsU0FBTztBQUVUOyJ9
|
|
@@ -14,16 +14,12 @@ import { forceType, idReference } from "../../core/decorators.js";
|
|
|
14
14
|
import { isLean } from "../../core/dom.js";
|
|
15
15
|
import { boxSizingStyles } from "../../core/styles.js";
|
|
16
16
|
const style = css`:host {
|
|
17
|
-
display: block;
|
|
18
|
-
height: var(--sbb-header-height);
|
|
19
17
|
--sbb-logo-height: 1rem;
|
|
20
18
|
--sbb-signet-height: 1rem;
|
|
21
|
-
--sbb-header-position: fixed;
|
|
22
19
|
--sbb-header-transition-duration: var(
|
|
23
20
|
--sbb-disable-animation-duration,
|
|
24
21
|
var(--sbb-animation-duration-6x)
|
|
25
22
|
);
|
|
26
|
-
--sbb-header-inset-inline-end: 0;
|
|
27
23
|
}
|
|
28
24
|
@media (min-width: calc(64rem)) {
|
|
29
25
|
:host {
|
|
@@ -31,6 +27,15 @@ const style = css`:host {
|
|
|
31
27
|
--sbb-signet-height: 1.25rem;
|
|
32
28
|
}
|
|
33
29
|
}
|
|
30
|
+
:host {
|
|
31
|
+
display: block;
|
|
32
|
+
height: var(--sbb-header-height);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host([size=s]) ::slotted(:is(sbb-header-button, sbb-header-link)) {
|
|
36
|
+
--sbb-header-action-min-height: var(--sbb-size-element-xs);
|
|
37
|
+
--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
38
|
+
}
|
|
34
39
|
|
|
35
40
|
:host([hide-on-scroll]) {
|
|
36
41
|
--sbb-header-position: absolute;
|
|
@@ -61,7 +66,7 @@ const style = css`:host {
|
|
|
61
66
|
.sbb-header {
|
|
62
67
|
position: var(--sbb-header-position);
|
|
63
68
|
inset: 0 var(--sbb-header-inset-inline-end) auto 0;
|
|
64
|
-
background: var(--sbb-background
|
|
69
|
+
background: var(--sbb-header-background);
|
|
65
70
|
z-index: var(--sbb-header-z-index, 10);
|
|
66
71
|
transform: var(--sbb-header-transform);
|
|
67
72
|
transition-property: box-shadow;
|
|
@@ -72,7 +77,7 @@ const style = css`:host {
|
|
|
72
77
|
animation-timing-function: var(--sbb-header-transition-timing);
|
|
73
78
|
}
|
|
74
79
|
:host(:is(:is(:state(shadow),[state--shadow]), :is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header {
|
|
75
|
-
box-shadow: var(--sbb-box-shadow
|
|
80
|
+
box-shadow: var(--sbb-header-box-shadow);
|
|
76
81
|
}
|
|
77
82
|
@media (forced-colors: active) {
|
|
78
83
|
.sbb-header {
|
|
@@ -104,11 +109,6 @@ const style = css`:host {
|
|
|
104
109
|
margin-inline-start: var(--sbb-header-first-item-margin-inline-start);
|
|
105
110
|
}
|
|
106
111
|
|
|
107
|
-
:host([size=s]) ::slotted(:is(sbb-header-button, sbb-header-link)) {
|
|
108
|
-
--sbb-header-action-min-height: var(--sbb-size-element-xs);
|
|
109
|
-
--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
112
|
::slotted(*) {
|
|
113
113
|
flex: 0 0 auto;
|
|
114
114
|
}
|
|
@@ -3,16 +3,15 @@ import { css, html } from "lit";
|
|
|
3
3
|
import { SbbElement } from "../../core/base-elements.js";
|
|
4
4
|
import { boxSizingStyles } from "../../core/styles.js";
|
|
5
5
|
const style = css`:host {
|
|
6
|
-
--sbb-header-environment-background-color: var(--sbb-color-granite);
|
|
7
|
-
--sbb-header-environment-color: var(--sbb-color-1-negative);
|
|
8
|
-
--sbb-header-environment-size: 2.375rem;
|
|
9
|
-
--sbb-header-environment-rotate: 45deg;
|
|
10
6
|
position: absolute;
|
|
11
7
|
inset-inline-end: 0;
|
|
12
8
|
inset-block-start: 0;
|
|
13
9
|
display: flex;
|
|
14
10
|
align-items: center;
|
|
15
11
|
justify-content: center;
|
|
12
|
+
font-size: var(--sbb-text-font-size-xxs);
|
|
13
|
+
font-weight: bold;
|
|
14
|
+
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
:host(:dir(rtl)) {
|
|
@@ -47,13 +46,6 @@ const style = css`:host {
|
|
|
47
46
|
}
|
|
48
47
|
|
|
49
48
|
.sbb-header-environment__text {
|
|
50
|
-
--sbb-text-font-size: var(--sbb-text-font-size-xxs);
|
|
51
|
-
font-family: var(--sbb-typo-font-family);
|
|
52
|
-
font-weight: normal;
|
|
53
|
-
line-height: var(--sbb-typo-line-height-text);
|
|
54
|
-
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
55
|
-
font-size: var(--sbb-text-font-size);
|
|
56
|
-
font-weight: bold;
|
|
57
49
|
position: absolute;
|
|
58
50
|
color: var(--sbb-header-environment-color);
|
|
59
51
|
rotate: var(--sbb-header-environment-rotate);
|
|
@@ -93,4 +85,4 @@ let SbbHeaderEnvironmentElement = _SbbHeaderEnvironmentElement;
|
|
|
93
85
|
export {
|
|
94
86
|
SbbHeaderEnvironmentElement
|
|
95
87
|
};
|
|
96
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLWVudmlyb25tZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2hlYWRlci9oZWFkZXItZW52aXJvbm1lbnQvaGVhZGVyLWVudmlyb25tZW50LmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNdXRhdGlvbkNvbnRyb2xsZXIgfSBmcm9tICdAbGl0LWxhYnMvb2JzZXJ2ZXJzL211dGF0aW9uLWNvbnRyb2xsZXIuanMnO1xuaW1wb3J0IHsgdHlwZSBDU1NSZXN1bHRHcm91cCwgaHRtbCwgdHlwZSBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9oZWFkZXItZW52aXJvbm1lbnQuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhIHJpYmJvbiBpbnNpZGUgdGhlIGhlYWRlciB0byBpbmRpY2F0ZSB0aGUgY3VycmVudCBlbnZpcm9ubWVudC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCB0aGUgZW52aXJvbm1lbnQuXG4gKlxuICogQGNzc3Byb3AgWy0tc2JiLWhlYWRlci1lbnZpcm9ubWVudC1iYWNrZ3JvdW5kLWNvbG9yPXZhcihzYmItY29sb3ItZ3Jhbml0ZSldIC0gQ2FuIGJlIHVzZWQgY2hhbmdlIHRoZSByaWJib24gY29sb3IuXG4gKiBAY3NzcHJvcCBbLS1zYmItaGVhZGVyLWVudmlyb25tZW50LWNvbG9yPXZhcihzYmItY29sb3Itd2hpdGUpXSAtIENhbiBiZSB1c2VkIGNoYW5nZSB0aGUgdGV4dCBjb2xvci5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYkhlYWRlckVudmlyb25tZW50RWxlbWVudCBleHRlbmRzIFNiYkVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IGVsZW1lbnROYW1lOiBzdHJpbmcgPSAnc2JiLWhlYWRlci1lbnZpcm9ubWVudCc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwcml2YXRlIF9lbnY6IHN0cmluZyB8IG51bGwgPSBudWxsO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMuYWRkQ29udHJvbGxlcihcbiAgICAgIG5ldyBNdXRhdGlvbkNvbnRyb2xsZXIodGhpcywge1xuICAgICAgICBjb25maWc6IHsgY2hhcmFjdGVyRGF0YTogdHJ1ZSwgc3VidHJlZTogdHJ1ZSB9LFxuICAgICAgICBjYWxsYmFjazogKCkgPT4ge1xuICAgICAgICAgIHRoaXMuX3Nsb3R0ZWRUZXh0Q2hhbmdlKCk7XG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBfc2xvdHRlZFRleHRDaGFuZ2UoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuX2Vudikge1xuICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmRlbGV0ZShgZW52LSR7dGhpcy5fZW52fWApO1xuICAgIH1cbiAgICB0aGlzLl9lbnYgPSB0aGlzLnRleHRDb250ZW50Py50cmltKCkgPz8gJyc7XG4gICAgaWYgKHRoaXMuX2Vudikge1xuICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmFkZChgZW52LSR7dGhpcy5fZW52fWApO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNwYW4gY2xhc3M9XCJzYmItaGVhZGVyLWVudmlyb25tZW50X190ZXh0XCI+
|
|
88
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLWVudmlyb25tZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2hlYWRlci9oZWFkZXItZW52aXJvbm1lbnQvaGVhZGVyLWVudmlyb25tZW50LmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNdXRhdGlvbkNvbnRyb2xsZXIgfSBmcm9tICdAbGl0LWxhYnMvb2JzZXJ2ZXJzL211dGF0aW9uLWNvbnRyb2xsZXIuanMnO1xuaW1wb3J0IHsgdHlwZSBDU1NSZXN1bHRHcm91cCwgaHRtbCwgdHlwZSBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgYm94U2l6aW5nU3R5bGVzIH0gZnJvbSAnLi4vLi4vY29yZS9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9oZWFkZXItZW52aXJvbm1lbnQuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBhIHJpYmJvbiBpbnNpZGUgdGhlIGhlYWRlciB0byBpbmRpY2F0ZSB0aGUgY3VycmVudCBlbnZpcm9ubWVudC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCB0aGUgZW52aXJvbm1lbnQuXG4gKlxuICogQGNzc3Byb3AgWy0tc2JiLWhlYWRlci1lbnZpcm9ubWVudC1iYWNrZ3JvdW5kLWNvbG9yPXZhcihzYmItY29sb3ItZ3Jhbml0ZSldIC0gQ2FuIGJlIHVzZWQgY2hhbmdlIHRoZSByaWJib24gY29sb3IuXG4gKiBAY3NzcHJvcCBbLS1zYmItaGVhZGVyLWVudmlyb25tZW50LWNvbG9yPXZhcihzYmItY29sb3Itd2hpdGUpXSAtIENhbiBiZSB1c2VkIGNoYW5nZSB0aGUgdGV4dCBjb2xvci5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYkhlYWRlckVudmlyb25tZW50RWxlbWVudCBleHRlbmRzIFNiYkVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IGVsZW1lbnROYW1lOiBzdHJpbmcgPSAnc2JiLWhlYWRlci1lbnZpcm9ubWVudCc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwcml2YXRlIF9lbnY6IHN0cmluZyB8IG51bGwgPSBudWxsO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMuYWRkQ29udHJvbGxlcihcbiAgICAgIG5ldyBNdXRhdGlvbkNvbnRyb2xsZXIodGhpcywge1xuICAgICAgICBjb25maWc6IHsgY2hhcmFjdGVyRGF0YTogdHJ1ZSwgc3VidHJlZTogdHJ1ZSB9LFxuICAgICAgICBjYWxsYmFjazogKCkgPT4ge1xuICAgICAgICAgIHRoaXMuX3Nsb3R0ZWRUZXh0Q2hhbmdlKCk7XG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBfc2xvdHRlZFRleHRDaGFuZ2UoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuX2Vudikge1xuICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmRlbGV0ZShgZW52LSR7dGhpcy5fZW52fWApO1xuICAgIH1cbiAgICB0aGlzLl9lbnYgPSB0aGlzLnRleHRDb250ZW50Py50cmltKCkgPz8gJyc7XG4gICAgaWYgKHRoaXMuX2Vudikge1xuICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmFkZChgZW52LSR7dGhpcy5fZW52fWApO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNwYW4gY2xhc3M9XCJzYmItaGVhZGVyLWVudmlyb25tZW50X190ZXh0XCI+XG4gICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgIDwvc3Bhbj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItaGVhZGVyLWVudmlyb25tZW50JzogU2JiSGVhZGVyRW52aXJvbm1lbnRFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFnQk0sTUFBTywrQkFBUCxNQUFPLHFDQUFvQyxXQUFVO0FBQUEsRUFNekQsY0FBQTtBQUNFLFVBQUE7QUFITSxTQUFBLE9BQXNCO0FBSTVCLFNBQUssY0FDSCxJQUFJLG1CQUFtQixNQUFNO0FBQUEsTUFDM0IsUUFBUSxFQUFFLGVBQWUsTUFBTSxTQUFTLEtBQUE7QUFBQSxNQUN4QyxVQUFVLE1BQUs7QUFDYixhQUFLLG1CQUFBO0FBQUEsTUFDUDtBQUFBLElBQUEsQ0FDRCxDQUFDO0FBQUEsRUFFTjtBQUFBLEVBRVEscUJBQWtCO0FBQ3hCLFFBQUksS0FBSyxNQUFNO0FBQ2IsV0FBSyxVQUFVLE9BQU8sT0FBTyxPQUFPLEtBQUssSUFBSSxFQUFFO0FBQUEsSUFDakQ7QUFDQSxTQUFLLE9BQU8sS0FBSyxhQUFhLEtBQUEsS0FBVTtBQUN4QyxRQUFJLEtBQUssTUFBTTtBQUNiLFdBQUssVUFBVSxPQUFPLElBQUksT0FBTyxLQUFLLElBQUksRUFBRTtBQUFBLElBQzlDO0FBQUEsRUFDRjtBQUFBLEVBRW1CLFNBQU07QUFDdkIsV0FBTztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsRUFLVDs7QUFqQ2dDLDZCQUFBLGNBQXNCO0FBQy9CLDZCQUFBLFNBQXlCLENBQUMsaUJBQWlCLEtBQUs7QUFGbkUsSUFBTyw4QkFBUDsifQ==
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
var
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var b = (t) => {
|
|
2
|
+
throw TypeError(t);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { __esDecorate as
|
|
4
|
+
var l = (t, e, a) => e.has(t) || b("Cannot " + a);
|
|
5
|
+
var h = (t, e, a) => (l(t, e, "read from private field"), a ? a.call(t) : e.get(t)), m = (t, e, a) => e.has(t) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), p = (t, e, a, s) => (l(t, e, "write to private field"), s ? s.call(t, a) : e.set(t, a), a);
|
|
6
|
+
import { __esDecorate as g, __runInitializers as v } from "tslib";
|
|
7
7
|
import { property as u } from "lit/decorators.js";
|
|
8
8
|
import { html as x } from "lit/static-html.js";
|
|
9
9
|
import { boxSizingStyles as w } from "../../core/styles.js";
|
|
10
10
|
import { SbbIconNameMixin as _ } from "../../icon.js";
|
|
11
11
|
import { css as y } from "lit";
|
|
12
|
-
const z = y`:host{
|
|
12
|
+
const z = y`:host{--sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-margin-inline-start: calc( var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift) );display:inline-block;outline:none!important}@media(any-hover:hover){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color: var(--sbb-background-color-3);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media(any-hover:hover)and (forced-colors:active){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color: Highlight}}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color: var(--sbb-background-color-4)}@media(forced-colors:active){:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color: Highlight}}:host(.sbb-active){--sbb-header-action-active-border-scale: 1}@media(forced-colors:active){:host(.sbb-active){--sbb-header-action-border-color: Highlight}}@media(forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-header-action-color: ButtonText}}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))){--sbb-header-first-item-margin-inline-start: var(--_sbb-header-first-item-padding-shift)}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));cursor:var(--sbb-cursor-pointer);-webkit-user-select:none;user-select:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset, 0);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media(forced-colors:active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}: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)}.sbb-action-base:after{content:"";position:absolute;border-block-end:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale, 0);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y, 0));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon{display:none}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{display:none}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}@media(max-width:37.4375rem){:host([expand-from=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:63.9375rem){:host([expand-from=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:89.9375rem){:host([expand-from=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media(max-width:98.9375rem){:host([expand-from=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0;--sbb-header-action-active-border-margin-inline: calc( .5 * (100% - var(--sbb-size-icon-ui-small)) )}:host([expand-from=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}::slotted([slot=icon]:is(sbb-image,img)){width:var(--sbb-header-action-icon-dimension);height:var(--sbb-header-action-icon-dimension);border-radius:var(--sbb-border-radius-infinity)}`, T = (t) => (() => {
|
|
13
13
|
var o, i;
|
|
14
|
-
let a = _(
|
|
14
|
+
let a = _(t), s, d = [], c = [];
|
|
15
15
|
return i = class extends a {
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
|
-
m(this, o, v(this,
|
|
19
|
-
v(this,
|
|
18
|
+
m(this, o, v(this, d, "large"));
|
|
19
|
+
v(this, c);
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
22
|
* Used to set the minimum breakpoint from which the text is displayed.
|
|
@@ -24,7 +24,7 @@ const z = y`:host{display:inline-block;outline:none!important;--sbb-header-actio
|
|
|
24
24
|
* and hidden for all the others. Ignored if no icon is set.
|
|
25
25
|
*/
|
|
26
26
|
get expandFrom() {
|
|
27
|
-
return
|
|
27
|
+
return h(this, o);
|
|
28
28
|
}
|
|
29
29
|
set expandFrom(n) {
|
|
30
30
|
p(this, o, n);
|
|
@@ -41,11 +41,11 @@ const z = y`:host{display:inline-block;outline:none!important;--sbb-header-actio
|
|
|
41
41
|
}
|
|
42
42
|
}, o = new WeakMap(), (() => {
|
|
43
43
|
const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
|
|
44
|
-
s = [u({ attribute: "expand-from", reflect: !0 })],
|
|
45
|
-
r.expandFrom =
|
|
46
|
-
} }, metadata: n },
|
|
44
|
+
s = [u({ attribute: "expand-from", reflect: !0 })], g(i, null, s, { kind: "accessor", name: "expandFrom", static: !1, private: !1, access: { has: (r) => "expandFrom" in r, get: (r) => r.expandFrom, set: (r, f) => {
|
|
45
|
+
r.expandFrom = f;
|
|
46
|
+
} }, metadata: n }, d, c), n && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
|
|
47
47
|
})(), i.styles = [w, z], i;
|
|
48
48
|
})();
|
|
49
49
|
export {
|
|
50
|
-
|
|
50
|
+
T as SbbHeaderActionCommonElementMixin
|
|
51
51
|
};
|
|
@@ -11,7 +11,7 @@ import { SbbElement as N } from "../../core/base-elements.js";
|
|
|
11
11
|
import { forceType as F, idReference as R } from "../../core/decorators.js";
|
|
12
12
|
import { isLean as Z } from "../../core/dom.js";
|
|
13
13
|
import { boxSizingStyles as M } from "../../core/styles.js";
|
|
14
|
-
const Q = A`:host{
|
|
14
|
+
const Q = A`:host{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) )}@media(min-width:64rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host{display:block;height:var(--sbb-header-height)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-header-background);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-header-box-shadow)}@media(forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a.sbb-header-logo: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(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`, V = "[aria-controls][aria-expanded='true']";
|
|
15
15
|
let se = (() => {
|
|
16
16
|
var d, h, c, b, f, a;
|
|
17
17
|
let s = N, i, r = [], m = [], v, x = [], O = [], w, y = [], S = [], z, k = [], E = [], T, C = [], L = [];
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { MutationController as
|
|
2
|
-
import { css as
|
|
1
|
+
import { MutationController as s } from "@lit-labs/observers/mutation-controller.js";
|
|
2
|
+
import { css as n, html as r } from "lit";
|
|
3
3
|
import { SbbElement as o } from "../../core/base-elements.js";
|
|
4
4
|
import { boxSizingStyles as a } from "../../core/styles.js";
|
|
5
|
-
const i =
|
|
5
|
+
const i = n`:host{position:absolute;inset-inline-end:0;inset-block-start:0;display:flex;align-items:center;justify-content:center;font-size:var(--sbb-text-font-size-xxs);font-weight:700;letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:dir(rtl)){--sbb-header-environment-rotate: -45deg}:host(:is(:state(env-dev),[state--env-dev])){--sbb-header-environment-background-color: var(--sbb-color-orange)}:host(:is(:state(env-edu),[state--env-edu])){--sbb-header-environment-background-color: var(--sbb-color-green)}:host(:is(:state(env-int),[state--env-int])),:host(:is(:state(env-inte),[state--env-inte])){--sbb-header-environment-background-color: var(--sbb-color-granite)}:host(:is(:state(env-loc),[state--env-loc])){--sbb-header-environment-background-color: var(--sbb-color-pink)}:host(:is(:state(env-test),[state--env-test])){--sbb-header-environment-background-color: var(--sbb-color-sky)}:host:before{content:"";border-block-start:var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);border-inline-start:var(--sbb-header-environment-size) solid transparent}.sbb-header-environment__text{position:absolute;color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x)}`, e = class e extends o {
|
|
6
6
|
constructor() {
|
|
7
|
-
super(), this._env = null, this.addController(new
|
|
7
|
+
super(), this._env = null, this.addController(new s(this, {
|
|
8
8
|
config: { characterData: !0, subtree: !0 },
|
|
9
9
|
callback: () => {
|
|
10
10
|
this._slottedTextChange();
|
package/off-brand-theme.css
CHANGED
|
@@ -1604,6 +1604,26 @@ summary {
|
|
|
1604
1604
|
--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
|
|
1605
1605
|
--_sbb-form-field-floating-label-transform: 0.53125rem;
|
|
1606
1606
|
--_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
|
|
1607
|
+
--sbb-header-background: var(--sbb-background-color-1);
|
|
1608
|
+
--sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
1609
|
+
--sbb-header-inset-inline-end: 0;
|
|
1610
|
+
--sbb-header-position: fixed;
|
|
1611
|
+
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
1612
|
+
--sbb-header-action-color: var(--sbb-color-1);
|
|
1613
|
+
--sbb-header-action-background-color: transparent;
|
|
1614
|
+
--sbb-header-action-min-height: var(--sbb-size-element-s);
|
|
1615
|
+
--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
|
|
1616
|
+
--sbb-header-action-transition-easing: var(--sbb-animation-easing);
|
|
1617
|
+
--sbb-header-action-border-color: transparent;
|
|
1618
|
+
--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
|
|
1619
|
+
--sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
|
|
1620
|
+
--sbb-header-action-active-border-width: var(--sbb-border-width-2x);
|
|
1621
|
+
--sbb-header-action-active-border-color: var(--sbb-header-action-color);
|
|
1622
|
+
--sbb-header-first-item-icon-shift: 0.125rem;
|
|
1623
|
+
--sbb-header-environment-background-color: var(--sbb-color-granite);
|
|
1624
|
+
--sbb-header-environment-color: var(--sbb-color-1-negative);
|
|
1625
|
+
--sbb-header-environment-size: 2.375rem;
|
|
1626
|
+
--sbb-header-environment-rotate: 45deg;
|
|
1607
1627
|
--sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
|
|
1608
1628
|
--sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
|
|
1609
1629
|
--sbb-lead-container-background-color: var(--sbb-background-color-1);
|
|
@@ -1734,6 +1754,9 @@ summary {
|
|
|
1734
1754
|
--sbb-card-border-width: var(--sbb-border-width-2x);
|
|
1735
1755
|
--sbb-card-badge-border-display: block;
|
|
1736
1756
|
--sbb-card-badge-inline-border-display: none;
|
|
1757
|
+
--sbb-header-action-border-color: CanvasText;
|
|
1758
|
+
--sbb-header-action-color: LinkText;
|
|
1759
|
+
--sbb-header-action-active-border-width: 0;
|
|
1737
1760
|
--sbb-expansion-panel-header-text-color: ButtonText;
|
|
1738
1761
|
--sbb-form-field-border-color: ButtonBorder;
|
|
1739
1762
|
--sbb-visual-checkbox-selection-color: Canvas;
|
|
@@ -1753,7 +1776,6 @@ summary {
|
|
|
1753
1776
|
--sbb-train-formation-wagon-width: 5rem;
|
|
1754
1777
|
--sbb-train-formation-wagon-height: 2.5rem;
|
|
1755
1778
|
--sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
|
|
1756
|
-
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
1757
1779
|
--sbb-time-input-max-width: 3.625rem;
|
|
1758
1780
|
--sbb-overlay-default-z-index: 1000;
|
|
1759
1781
|
--sbb-cursor-default: default;
|
|
@@ -1779,9 +1801,6 @@ summary {
|
|
|
1779
1801
|
var(--sbb-spacing-fixed-1x);
|
|
1780
1802
|
--sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
|
|
1781
1803
|
}
|
|
1782
|
-
:root:has(sbb-header[size=s]) {
|
|
1783
|
-
--sbb-header-height: 3.25rem;
|
|
1784
|
-
}
|
|
1785
1804
|
:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
|
|
1786
1805
|
--sbb-focus-outline-style: none;
|
|
1787
1806
|
}
|
|
@@ -1848,17 +1867,14 @@ summary {
|
|
|
1848
1867
|
--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
|
|
1849
1868
|
--_sbb-form-field-floating-label-transform: 0.65625rem;
|
|
1850
1869
|
--_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
|
|
1870
|
+
--sbb-header-height: var(--sbb-spacing-fixed-24x);
|
|
1851
1871
|
}
|
|
1852
1872
|
:root.sbb-lean {
|
|
1853
1873
|
--sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
|
|
1854
1874
|
}
|
|
1855
1875
|
:root {
|
|
1856
|
-
--sbb-header-height: var(--sbb-spacing-fixed-24x);
|
|
1857
1876
|
--sbb-time-input-max-width: 4.0625rem;
|
|
1858
1877
|
}
|
|
1859
|
-
:root:has(sbb-header[size=s]) {
|
|
1860
|
-
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
1861
|
-
}
|
|
1862
1878
|
}
|
|
1863
1879
|
@media (min-width: calc(90rem)) {
|
|
1864
1880
|
:root {
|
|
@@ -2111,6 +2127,26 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
|
|
|
2111
2127
|
}
|
|
2112
2128
|
}
|
|
2113
2129
|
|
|
2130
|
+
sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
|
|
2131
|
+
margin-block-start: var(--sbb-header-height);
|
|
2132
|
+
}
|
|
2133
|
+
|
|
2134
|
+
:root:has(sbb-header[size=m]) {
|
|
2135
|
+
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
2136
|
+
}
|
|
2137
|
+
|
|
2138
|
+
:root:has(sbb-header[size=s]) {
|
|
2139
|
+
--sbb-header-height: 3.25rem;
|
|
2140
|
+
}
|
|
2141
|
+
|
|
2142
|
+
@media (min-width: calc(64rem)) {
|
|
2143
|
+
:root:has(sbb-header[size=m]) {
|
|
2144
|
+
--sbb-header-height: var(--sbb-spacing-fixed-24x);
|
|
2145
|
+
}
|
|
2146
|
+
:root:has(sbb-header[size=s]) {
|
|
2147
|
+
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
2148
|
+
}
|
|
2149
|
+
}
|
|
2114
2150
|
sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
|
|
2115
2151
|
--sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
|
|
2116
2152
|
}
|
|
@@ -2361,10 +2397,6 @@ sbb-sidebar:has(sbb-sidebar-title) {
|
|
|
2361
2397
|
--sbb-sidebar__padding-block-start: 0;
|
|
2362
2398
|
}
|
|
2363
2399
|
|
|
2364
|
-
sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
|
|
2365
|
-
margin-block-start: var(--sbb-header-height);
|
|
2366
|
-
}
|
|
2367
|
-
|
|
2368
2400
|
.sbb-select-trigger {
|
|
2369
2401
|
width: 100%;
|
|
2370
2402
|
height: var(--sbb-size-element-xs);
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.7.0-dev.
|
|
3
|
+
"version": "4.7.0-dev.1773224724",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
9
|
"storybook",
|
|
10
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
10
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/8dc0bfcde786da8326367c880b4e233d2d61641f"
|
|
11
11
|
],
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1604,6 +1604,26 @@ summary {
|
|
|
1604
1604
|
--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
|
|
1605
1605
|
--_sbb-form-field-floating-label-transform: 0.53125rem;
|
|
1606
1606
|
--_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
|
|
1607
|
+
--sbb-header-background: var(--sbb-background-color-1);
|
|
1608
|
+
--sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
1609
|
+
--sbb-header-inset-inline-end: 0;
|
|
1610
|
+
--sbb-header-position: fixed;
|
|
1611
|
+
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
1612
|
+
--sbb-header-action-color: var(--sbb-color-1);
|
|
1613
|
+
--sbb-header-action-background-color: transparent;
|
|
1614
|
+
--sbb-header-action-min-height: var(--sbb-size-element-s);
|
|
1615
|
+
--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
|
|
1616
|
+
--sbb-header-action-transition-easing: var(--sbb-animation-easing);
|
|
1617
|
+
--sbb-header-action-border-color: transparent;
|
|
1618
|
+
--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
|
|
1619
|
+
--sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
|
|
1620
|
+
--sbb-header-action-active-border-width: var(--sbb-border-width-2x);
|
|
1621
|
+
--sbb-header-action-active-border-color: var(--sbb-header-action-color);
|
|
1622
|
+
--sbb-header-first-item-icon-shift: 0.125rem;
|
|
1623
|
+
--sbb-header-environment-background-color: var(--sbb-color-granite);
|
|
1624
|
+
--sbb-header-environment-color: var(--sbb-color-1-negative);
|
|
1625
|
+
--sbb-header-environment-size: 2.375rem;
|
|
1626
|
+
--sbb-header-environment-rotate: 45deg;
|
|
1607
1627
|
--sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
|
|
1608
1628
|
--sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
|
|
1609
1629
|
--sbb-lead-container-background-color: var(--sbb-background-color-1);
|
|
@@ -1734,6 +1754,9 @@ summary {
|
|
|
1734
1754
|
--sbb-card-border-width: var(--sbb-border-width-2x);
|
|
1735
1755
|
--sbb-card-badge-border-display: block;
|
|
1736
1756
|
--sbb-card-badge-inline-border-display: none;
|
|
1757
|
+
--sbb-header-action-border-color: CanvasText;
|
|
1758
|
+
--sbb-header-action-color: LinkText;
|
|
1759
|
+
--sbb-header-action-active-border-width: 0;
|
|
1737
1760
|
--sbb-expansion-panel-header-text-color: ButtonText;
|
|
1738
1761
|
--sbb-form-field-border-color: ButtonBorder;
|
|
1739
1762
|
--sbb-visual-checkbox-selection-color: Canvas;
|
|
@@ -1753,7 +1776,6 @@ summary {
|
|
|
1753
1776
|
--sbb-train-formation-wagon-width: 5rem;
|
|
1754
1777
|
--sbb-train-formation-wagon-height: 2.5rem;
|
|
1755
1778
|
--sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
|
|
1756
|
-
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
1757
1779
|
--sbb-time-input-max-width: 3.625rem;
|
|
1758
1780
|
--sbb-overlay-default-z-index: 1000;
|
|
1759
1781
|
--sbb-cursor-default: default;
|
|
@@ -1779,9 +1801,6 @@ summary {
|
|
|
1779
1801
|
var(--sbb-spacing-fixed-1x);
|
|
1780
1802
|
--sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
|
|
1781
1803
|
}
|
|
1782
|
-
:root:has(sbb-header[size=s]) {
|
|
1783
|
-
--sbb-header-height: 3.25rem;
|
|
1784
|
-
}
|
|
1785
1804
|
:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
|
|
1786
1805
|
--sbb-focus-outline-style: none;
|
|
1787
1806
|
}
|
|
@@ -1848,17 +1867,14 @@ summary {
|
|
|
1848
1867
|
--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
|
|
1849
1868
|
--_sbb-form-field-floating-label-transform: 0.65625rem;
|
|
1850
1869
|
--_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
|
|
1870
|
+
--sbb-header-height: var(--sbb-spacing-fixed-24x);
|
|
1851
1871
|
}
|
|
1852
1872
|
:root.sbb-lean {
|
|
1853
1873
|
--sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
|
|
1854
1874
|
}
|
|
1855
1875
|
:root {
|
|
1856
|
-
--sbb-header-height: var(--sbb-spacing-fixed-24x);
|
|
1857
1876
|
--sbb-time-input-max-width: 4.0625rem;
|
|
1858
1877
|
}
|
|
1859
|
-
:root:has(sbb-header[size=s]) {
|
|
1860
|
-
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
1861
|
-
}
|
|
1862
1878
|
}
|
|
1863
1879
|
@media (min-width: calc(90rem)) {
|
|
1864
1880
|
:root {
|
|
@@ -2111,6 +2127,26 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
|
|
|
2111
2127
|
}
|
|
2112
2128
|
}
|
|
2113
2129
|
|
|
2130
|
+
sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
|
|
2131
|
+
margin-block-start: var(--sbb-header-height);
|
|
2132
|
+
}
|
|
2133
|
+
|
|
2134
|
+
:root:has(sbb-header[size=m]) {
|
|
2135
|
+
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
2136
|
+
}
|
|
2137
|
+
|
|
2138
|
+
:root:has(sbb-header[size=s]) {
|
|
2139
|
+
--sbb-header-height: 3.25rem;
|
|
2140
|
+
}
|
|
2141
|
+
|
|
2142
|
+
@media (min-width: calc(64rem)) {
|
|
2143
|
+
:root:has(sbb-header[size=m]) {
|
|
2144
|
+
--sbb-header-height: var(--sbb-spacing-fixed-24x);
|
|
2145
|
+
}
|
|
2146
|
+
:root:has(sbb-header[size=s]) {
|
|
2147
|
+
--sbb-header-height: var(--sbb-spacing-fixed-14x);
|
|
2148
|
+
}
|
|
2149
|
+
}
|
|
2114
2150
|
sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
|
|
2115
2151
|
--sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
|
|
2116
2152
|
}
|
|
@@ -2361,10 +2397,6 @@ sbb-sidebar:has(sbb-sidebar-title) {
|
|
|
2361
2397
|
--sbb-sidebar__padding-block-start: 0;
|
|
2362
2398
|
}
|
|
2363
2399
|
|
|
2364
|
-
sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
|
|
2365
|
-
margin-block-start: var(--sbb-header-height);
|
|
2366
|
-
}
|
|
2367
|
-
|
|
2368
2400
|
.sbb-select-trigger {
|
|
2369
2401
|
width: 100%;
|
|
2370
2402
|
height: var(--sbb-size-element-xs);
|