@sbb-esta/lyne-elements-dev 4.7.0-dev.1773242335 → 4.7.0-dev.1773245052
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/styles/core.scss +5 -8
- package/core.css +11 -5
- package/custom-elements.json +1237 -1237
- package/development/message/message.component.d.ts.map +1 -1
- package/development/message/message.component.js +8 -23
- package/message/message.component.js +14 -16
- package/off-brand-theme.css +11 -5
- package/package.json +2 -2
- package/safety-theme.css +11 -5
- package/standard-theme.css +11 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/message/message.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAMtD;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,gBAAgC,WAAW,EAAE,MAAM,CAAiB;IACpE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;
|
|
1
|
+
{"version":3,"file":"message.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/message/message.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAMtD;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,gBAAgC,WAAW,EAAE,MAAM,CAAiB;IACpE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
|
|
@@ -2,16 +2,7 @@ import { css, html } from "lit";
|
|
|
2
2
|
import { SbbElement } from "../core/base-elements.js";
|
|
3
3
|
import { boxSizingStyles } from "../core/styles.js";
|
|
4
4
|
const style = css`:host {
|
|
5
|
-
--sbb-message-subtitle-color: var(--sbb-color-granite);
|
|
6
|
-
--sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
|
|
7
|
-
--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
|
|
8
|
-
--sbb-message-image-border-radius: var(--sbb-border-radius-4x);
|
|
9
|
-
--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
|
|
10
|
-
--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
|
|
11
5
|
display: block;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.sbb-message__container {
|
|
15
6
|
text-align: center;
|
|
16
7
|
}
|
|
17
8
|
|
|
@@ -27,13 +18,9 @@ const style = css`:host {
|
|
|
27
18
|
}
|
|
28
19
|
|
|
29
20
|
::slotted([slot=subtitle]) {
|
|
30
|
-
--sbb-text-font-size: var(--sbb-text-font-size-s);
|
|
31
|
-
font-family: var(--sbb-typo-font-family);
|
|
32
|
-
font-weight: normal;
|
|
33
|
-
line-height: var(--sbb-typo-line-height-text);
|
|
34
|
-
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
35
|
-
font-size: var(--sbb-text-font-size);
|
|
36
21
|
color: var(--sbb-message-subtitle-color);
|
|
22
|
+
font-size: var(--sbb-text-font-size-s);
|
|
23
|
+
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
37
24
|
margin: 0;
|
|
38
25
|
}
|
|
39
26
|
|
|
@@ -63,13 +50,11 @@ const _SbbMessageElement = class _SbbMessageElement extends SbbElement {
|
|
|
63
50
|
}
|
|
64
51
|
render() {
|
|
65
52
|
return html`
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<slot name="action"></slot>
|
|
72
|
-
</div>
|
|
53
|
+
<slot name="image"></slot>
|
|
54
|
+
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
55
|
+
<slot name="subtitle"></slot>
|
|
56
|
+
<slot name="legend"></slot>
|
|
57
|
+
<slot name="action"></slot>
|
|
73
58
|
`;
|
|
74
59
|
}
|
|
75
60
|
};
|
|
@@ -79,4 +64,4 @@ let SbbMessageElement = _SbbMessageElement;
|
|
|
79
64
|
export {
|
|
80
65
|
SbbMessageElement
|
|
81
66
|
};
|
|
82
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9tZXNzYWdlLnNjc3M/
|
|
67
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9tZXNzYWdlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYSBjb21wbGV4IG1lc3NhZ2UgY29tYmluaW5nIGEgdGl0bGUsIGFuIGltYWdlLCBhbiBhY3Rpb24gYW5kIHNvbWUgY29udGVudC5cbiAqXG4gKiBAc2xvdCBpbWFnZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLWltYWdlYCBjb21wb25lbnQuXG4gKiBAc2xvdCB0aXRsZSAtIFVzZSB0aGlzIHNsb3QgdG8gcHJvdmlkZSBhbiBgc2JiLXRpdGxlYC5cbiAqIEBzbG90IHN1YnRpdGxlIC0gVXNlIHRoaXMgc2xvdCB0byBwcm92aWRlIGEgc3VidGl0bGUsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBsZWdlbmQgLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYSBsZWdlbmQsIG11c3QgYmUgYSBwYXJhZ3JhcGguXG4gKiBAc2xvdCBhY3Rpb24gLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYW4gYHNiYi1zZWNvbmRhcnktYnV0dG9uYC5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYk1lc3NhZ2VFbGVtZW50IGV4dGVuZHMgU2JiRWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItbWVzc2FnZSc7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHN0eWxlXTtcblxuICBwcml2YXRlIF9jb25maWd1cmVUaXRsZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0aXRsZSA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYlRpdGxlRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuICAgIGlmICh0aXRsZSkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZSh0aXRsZSk7XG4gICAgICB0aXRsZS52aXN1YWxMZXZlbCA9ICc1JztcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzbG90IG5hbWU9XCJpbWFnZVwiPjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJ0aXRsZVwiIEBzbG90Y2hhbmdlPSR7dGhpcy5fY29uZmlndXJlVGl0bGV9Pjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJzdWJ0aXRsZVwiPjwvc2xvdD5cbiAgICAgIDxzbG90IG5hbWU9XCJsZWdlbmRcIj48L3Nsb3Q+XG4gICAgICA8c2xvdCBuYW1lPVwiYWN0aW9uXCI+PC9zbG90PlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1tZXNzYWdlJzogU2JiTWVzc2FnZUVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFrQk0sTUFBTyxxQkFBUCxNQUFPLDJCQUEwQixXQUFVO0FBQUEsRUFJdkMsZ0JBQWdCLE9BQVk7QUFDbEMsVUFBTSxRQUFTLE1BQU0sT0FDbEIsaUJBQUEsRUFDQSxLQUFLLENBQUMsTUFBNEIsRUFBRSxjQUFjLFdBQVc7QUFDaEUsUUFBSSxPQUFPO0FBQ1QscUJBQWUsUUFBUSxLQUFLO0FBQzVCLFlBQU0sY0FBYztBQUFBLElBQ3RCO0FBQUEsRUFDRjtBQUFBLEVBRW1CLFNBQU07QUFDdkIsV0FBTztBQUFBO0FBQUEsdUNBRTRCLEtBQUssZUFBZTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsRUFLekQ7O0FBckJnQyxtQkFBQSxjQUFzQjtBQUMvQixtQkFBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLO0FBRm5FLElBQU8sb0JBQVA7In0=
|
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { SbbElement as
|
|
1
|
+
import { css as i, html as a } from "lit";
|
|
2
|
+
import { SbbElement as n } from "../core/base-elements.js";
|
|
3
3
|
import { boxSizingStyles as r } from "../core/styles.js";
|
|
4
|
-
const
|
|
4
|
+
const b = i`:host{display:block;text-align:center}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important;width:100%}::slotted([slot=subtitle]){color:var(--sbb-message-subtitle-color);font-size:var(--sbb-text-font-size-s);letter-spacing:var(--sbb-typo-letter-spacing-text);margin:0}::slotted([slot=legend]){--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);padding:0;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block)}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}`, t = class t extends n {
|
|
5
5
|
_configureTitle(o) {
|
|
6
|
-
const
|
|
7
|
-
|
|
6
|
+
const e = o.target.assignedElements().find((l) => l.localName === "sbb-title");
|
|
7
|
+
e && (customElements.upgrade(e), e.visualLevel = "5");
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<slot name="action"></slot>
|
|
17
|
-
</div>
|
|
10
|
+
return a`
|
|
11
|
+
<slot name="image"></slot>
|
|
12
|
+
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
13
|
+
<slot name="subtitle"></slot>
|
|
14
|
+
<slot name="legend"></slot>
|
|
15
|
+
<slot name="action"></slot>
|
|
18
16
|
`;
|
|
19
17
|
}
|
|
20
18
|
};
|
|
21
|
-
t.elementName = "sbb-message", t.styles = [r,
|
|
22
|
-
let
|
|
19
|
+
t.elementName = "sbb-message", t.styles = [r, b];
|
|
20
|
+
let s = t;
|
|
23
21
|
export {
|
|
24
|
-
|
|
22
|
+
s as SbbMessageElement
|
|
25
23
|
};
|
package/off-brand-theme.css
CHANGED
|
@@ -1637,6 +1637,12 @@ summary {
|
|
|
1637
1637
|
--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
|
|
1638
1638
|
--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
|
|
1639
1639
|
--sbb-lead-container-image-border-radius: 0;
|
|
1640
|
+
--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
|
|
1641
|
+
--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
|
|
1642
|
+
--sbb-message-image-border-radius: var(--sbb-border-radius-4x);
|
|
1643
|
+
--sbb-message-subtitle-color: var(--sbb-color-granite);
|
|
1644
|
+
--sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
|
|
1645
|
+
--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
|
|
1640
1646
|
--sbb-option-color: var(--sbb-color-3);
|
|
1641
1647
|
--sbb-option-background-color: inherit;
|
|
1642
1648
|
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
@@ -2166,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
|
|
|
2166
2172
|
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
2167
2173
|
}
|
|
2168
2174
|
|
|
2175
|
+
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2176
|
+
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2177
|
+
border-radius: var(--sbb-message-image-border-radius);
|
|
2178
|
+
}
|
|
2179
|
+
|
|
2169
2180
|
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
2170
2181
|
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
2171
2182
|
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
@@ -2282,11 +2293,6 @@ img {
|
|
|
2282
2293
|
object-position: var(--sbb-image-object-position);
|
|
2283
2294
|
}
|
|
2284
2295
|
|
|
2285
|
-
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2286
|
-
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2287
|
-
border-radius: var(--sbb-message-image-border-radius);
|
|
2288
|
-
}
|
|
2289
|
-
|
|
2290
2296
|
:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
|
|
2291
2297
|
--sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
|
|
2292
2298
|
--sbb-teaser-image-animation-duration: var(
|
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.1773245052",
|
|
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/e5bbc6e33b55de0c391a2e04681edba3b31ba81b"
|
|
11
11
|
],
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1637,6 +1637,12 @@ summary {
|
|
|
1637
1637
|
--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
|
|
1638
1638
|
--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
|
|
1639
1639
|
--sbb-lead-container-image-border-radius: 0;
|
|
1640
|
+
--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
|
|
1641
|
+
--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
|
|
1642
|
+
--sbb-message-image-border-radius: var(--sbb-border-radius-4x);
|
|
1643
|
+
--sbb-message-subtitle-color: var(--sbb-color-granite);
|
|
1644
|
+
--sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
|
|
1645
|
+
--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
|
|
1640
1646
|
--sbb-option-color: var(--sbb-color-3);
|
|
1641
1647
|
--sbb-option-background-color: inherit;
|
|
1642
1648
|
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
@@ -2166,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
|
|
|
2166
2172
|
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
2167
2173
|
}
|
|
2168
2174
|
|
|
2175
|
+
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2176
|
+
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2177
|
+
border-radius: var(--sbb-message-image-border-radius);
|
|
2178
|
+
}
|
|
2179
|
+
|
|
2169
2180
|
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
2170
2181
|
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
2171
2182
|
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
@@ -2282,11 +2293,6 @@ img {
|
|
|
2282
2293
|
object-position: var(--sbb-image-object-position);
|
|
2283
2294
|
}
|
|
2284
2295
|
|
|
2285
|
-
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2286
|
-
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2287
|
-
border-radius: var(--sbb-message-image-border-radius);
|
|
2288
|
-
}
|
|
2289
|
-
|
|
2290
2296
|
:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
|
|
2291
2297
|
--sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
|
|
2292
2298
|
--sbb-teaser-image-animation-duration: var(
|
package/standard-theme.css
CHANGED
|
@@ -1637,6 +1637,12 @@ summary {
|
|
|
1637
1637
|
--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
|
|
1638
1638
|
--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
|
|
1639
1639
|
--sbb-lead-container-image-border-radius: 0;
|
|
1640
|
+
--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
|
|
1641
|
+
--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
|
|
1642
|
+
--sbb-message-image-border-radius: var(--sbb-border-radius-4x);
|
|
1643
|
+
--sbb-message-subtitle-color: var(--sbb-color-granite);
|
|
1644
|
+
--sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
|
|
1645
|
+
--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
|
|
1640
1646
|
--sbb-option-color: var(--sbb-color-3);
|
|
1641
1647
|
--sbb-option-background-color: inherit;
|
|
1642
1648
|
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
@@ -2166,6 +2172,11 @@ sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-o
|
|
|
2166
2172
|
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
2167
2173
|
}
|
|
2168
2174
|
|
|
2175
|
+
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2176
|
+
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2177
|
+
border-radius: var(--sbb-message-image-border-radius);
|
|
2178
|
+
}
|
|
2179
|
+
|
|
2169
2180
|
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
2170
2181
|
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
2171
2182
|
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
@@ -2282,11 +2293,6 @@ img {
|
|
|
2282
2293
|
object-position: var(--sbb-image-object-position);
|
|
2283
2294
|
}
|
|
2284
2295
|
|
|
2285
|
-
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2286
|
-
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2287
|
-
border-radius: var(--sbb-message-image-border-radius);
|
|
2288
|
-
}
|
|
2289
|
-
|
|
2290
2296
|
:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
|
|
2291
2297
|
--sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
|
|
2292
2298
|
--sbb-teaser-image-animation-duration: var(
|