@sbb-esta/lyne-elements-dev 4.7.0-dev.1773208987 → 4.7.0-dev.1773213760
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 +7 -11
- package/core.css +17 -7
- package/custom-elements.json +710 -710
- package/development/lead-container/lead-container.component.d.ts.map +1 -1
- package/development/lead-container/lead-container.component.js +9 -28
- package/lead-container/lead-container.component.js +9 -11
- package/off-brand-theme.css +17 -7
- package/package.json +2 -2
- package/safety-theme.css +17 -7
- package/standard-theme.css +17 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lead-container.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/lead-container/lead-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKtD;;;;;;;GAOG;AACH,qBAAa,uBAAwB,SAAQ,UAAU;IACrD,gBAAgC,WAAW,EAAE,MAAM,CAAwB;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAA4B;cAEtD,MAAM,IAAI,cAAc;
|
|
1
|
+
{"version":3,"file":"lead-container.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/lead-container/lead-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKtD;;;;;;;GAOG;AACH,qBAAa,uBAAwB,SAAQ,UAAU;IACrD,gBAAgC,WAAW,EAAE,MAAM,CAAwB;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAA4B;cAEtD,MAAM,IAAI,cAAc;CAa5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
|
|
@@ -3,30 +3,13 @@ import { SbbElement } from "../core/base-elements.js";
|
|
|
3
3
|
import { boxSizingStyles } from "../core/styles.js";
|
|
4
4
|
const style = css`:host {
|
|
5
5
|
display: block;
|
|
6
|
-
|
|
7
|
-
--sbb-lead-container-image-ratio: 2 / 1;
|
|
8
|
-
--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
|
|
9
|
-
--sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
|
|
10
|
-
--sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
|
|
11
|
-
--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
|
|
12
|
-
--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
|
|
13
|
-
--sbb-lead-container-image-border-radius: 0;
|
|
14
|
-
}
|
|
15
|
-
@media (min-width: calc(90rem)) {
|
|
16
|
-
:host {
|
|
17
|
-
--sbb-lead-container-image-ratio: 21 / 9;
|
|
18
|
-
--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
|
|
19
|
-
}
|
|
6
|
+
padding-block: var(--sbb-lead-container-padding-block);
|
|
20
7
|
}
|
|
21
8
|
|
|
22
9
|
:host(:not(:is(:state(slotted-image),[state--slotted-image]))) {
|
|
23
10
|
--sbb-lead-container-image-overlap: 0;
|
|
24
11
|
}
|
|
25
12
|
|
|
26
|
-
.sbb-lead-container {
|
|
27
|
-
padding-block: var(--sbb-lead-container-padding-block);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
13
|
::slotted([slot=image]) {
|
|
31
14
|
display: block;
|
|
32
15
|
width: 100%;
|
|
@@ -104,15 +87,13 @@ const style = css`:host {
|
|
|
104
87
|
const _SbbLeadContainerElement = class _SbbLeadContainerElement extends SbbElement {
|
|
105
88
|
render() {
|
|
106
89
|
return html`
|
|
107
|
-
<div class="sbb-lead-container">
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<div class="sbb-lead-container-content
|
|
113
|
-
<
|
|
114
|
-
<slot></slot>
|
|
115
|
-
</div>
|
|
90
|
+
<div class="sbb-lead-container-image">
|
|
91
|
+
<slot name="image"></slot>
|
|
92
|
+
</div>
|
|
93
|
+
<!-- Content wrapper needed because grid needs to be applied but container image should not be touched by grid. -->
|
|
94
|
+
<div class="sbb-lead-container-content-wrapper">
|
|
95
|
+
<div class="sbb-lead-container-content">
|
|
96
|
+
<slot></slot>
|
|
116
97
|
</div>
|
|
117
98
|
</div>
|
|
118
99
|
`;
|
|
@@ -124,4 +105,4 @@ let SbbLeadContainerElement = _SbbLeadContainerElement;
|
|
|
124
105
|
export {
|
|
125
106
|
SbbLeadContainerElement
|
|
126
107
|
};
|
|
127
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
108
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGVhZC1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvbGVhZC1jb250YWluZXIvbGVhZC1jb250YWluZXIuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIGh0bWwsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vbGVhZC1jb250YWluZXIuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBUaGUgYHNiYi1sZWFkLWNvbnRhaW5lcmAgY2FuIGJlIHVzZWQgZm9yIHByb2R1Y3QgcGFnZXMgdG8gZGlzcGxheSBhIGxlYWQgaW1hZ2UgYW5kIGZvbGxvd2luZyBjb250ZW50LlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gYWRkIGFueSBjb250ZW50IHRvIHRoZSBjb250YWluZXIuXG4gKiBAc2xvdCBpbWFnZSAtIFVzZSB0aGUgaW1hZ2Ugc2xvdCB0byBwcm92aWRlIHRoZSBsZWFkIGltYWdlLlxuICogYHNiYi1pbWFnZWAsIGBpbWdgIGFuZCBgcGljdHVyZWAgZWxlbWVudHMgYXJlIHN1cHBvcnRlZC5cbiAqIEZvciBvdGhlciBlbGVtZW50cyB0aGUgYXNwZWN0IHJhdGlvIGhhcyB0byBiZSBzZXQgbWFudWFsbHkuXG4gKi9cbmV4cG9ydCBjbGFzcyBTYmJMZWFkQ29udGFpbmVyRWxlbWVudCBleHRlbmRzIFNiYkVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IGVsZW1lbnROYW1lOiBzdHJpbmcgPSAnc2JiLWxlYWQtY29udGFpbmVyJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi1sZWFkLWNvbnRhaW5lci1pbWFnZVwiPlxuICAgICAgICA8c2xvdCBuYW1lPVwiaW1hZ2VcIj48L3Nsb3Q+XG4gICAgICA8L2Rpdj5cbiAgICAgIDwhLS0gQ29udGVudCB3cmFwcGVyIG5lZWRlZCBiZWNhdXNlIGdyaWQgbmVlZHMgdG8gYmUgYXBwbGllZCBidXQgY29udGFpbmVyIGltYWdlIHNob3VsZCBub3QgYmUgdG91Y2hlZCBieSBncmlkLiAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItbGVhZC1jb250YWluZXItY29udGVudC13cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzYmItbGVhZC1jb250YWluZXItY29udGVudFwiPlxuICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItbGVhZC1jb250YWluZXInOiBTYmJMZWFkQ29udGFpbmVyRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBZU0sTUFBTywyQkFBUCxNQUFPLGlDQUFnQyxXQUFVO0FBQUEsRUFJbEMsU0FBTTtBQUN2QixXQUFPO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxFQVdUOztBQWZnQyx5QkFBQSxjQUFzQjtBQUMvQix5QkFBQSxTQUF5QixDQUFDLGlCQUFpQixLQUFLO0FBRm5FLElBQU8sMEJBQVA7In0=
|
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
import { css as n, html as i } from "lit";
|
|
2
2
|
import { SbbElement as r } from "../core/base-elements.js";
|
|
3
3
|
import { boxSizingStyles as s } from "../core/styles.js";
|
|
4
|
-
const
|
|
4
|
+
const o = n`:host{display:block;padding-block:var(--sbb-lead-container-padding-block)}:host(:not(:is(:state(slotted-image),[state--slotted-image]))){--sbb-lead-container-image-overlap: 0}::slotted([slot=image]){display:block;width:100%}::slotted(:is(sbb-breadcrumb-group,sbb-block-link).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-alert,sbb-alert-group).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-m)}::slotted(sbb-title.sbb-lead-container-spacing){margin-block-start:0}::slotted(sbb-notification.sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-xxxs)}::slotted(.sbb-lead-container-lead-text){margin-block:0 var(--sbb-spacing-responsive-s);color:var(--sbb-color-iron);color:light-dark(var(--sbb-color-iron),var(--sbb-color-smoke))}@media(min-width:90rem){.sbb-lead-container-image{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive));margin-inline:auto}}.sbb-lead-container-content-wrapper{background-color:var(--sbb-lead-container-background-color);display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){.sbb-lead-container-content-wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}@media(min-width:64rem){.sbb-lead-container-content-wrapper{background-color:transparent}}.sbb-lead-container-content{position:relative;border-radius:var(--sbb-lead-container-border-radius);padding-block:var(--sbb-lead-container-content-padding-block);background-color:var(--sbb-lead-container-background-color);grid-column:1/-1}@media(min-width:64rem){.sbb-lead-container-content{grid-column:2/-2;margin-block-start:calc(-1 * var(--sbb-lead-container-image-overlap));padding-inline:var(--sbb-lead-container-padding-inline);margin-inline:calc(-1 * var(--sbb-lead-container-padding-inline))}}@media(min-width:90rem){.sbb-lead-container-content{grid-column:4/-4}}`, a = class a extends r {
|
|
5
5
|
render() {
|
|
6
6
|
return i`
|
|
7
|
-
<div class="sbb-lead-container">
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<div class="sbb-lead-container-content
|
|
13
|
-
<
|
|
14
|
-
<slot></slot>
|
|
15
|
-
</div>
|
|
7
|
+
<div class="sbb-lead-container-image">
|
|
8
|
+
<slot name="image"></slot>
|
|
9
|
+
</div>
|
|
10
|
+
<!-- Content wrapper needed because grid needs to be applied but container image should not be touched by grid. -->
|
|
11
|
+
<div class="sbb-lead-container-content-wrapper">
|
|
12
|
+
<div class="sbb-lead-container-content">
|
|
13
|
+
<slot></slot>
|
|
16
14
|
</div>
|
|
17
15
|
</div>
|
|
18
16
|
`;
|
|
19
17
|
}
|
|
20
18
|
};
|
|
21
|
-
a.elementName = "sbb-lead-container", a.styles = [s,
|
|
19
|
+
a.elementName = "sbb-lead-container", a.styles = [s, o];
|
|
22
20
|
let e = a;
|
|
23
21
|
export {
|
|
24
22
|
e as SbbLeadContainerElement
|
package/off-brand-theme.css
CHANGED
|
@@ -1582,6 +1582,14 @@ summary {
|
|
|
1582
1582
|
--sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
|
|
1583
1583
|
--sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
|
|
1584
1584
|
--sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
|
|
1585
|
+
--sbb-lead-container-background-color: var(--sbb-background-color-1);
|
|
1586
|
+
--sbb-lead-container-image-ratio: 2 / 1;
|
|
1587
|
+
--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
|
|
1588
|
+
--sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
|
|
1589
|
+
--sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
|
|
1590
|
+
--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
|
|
1591
|
+
--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
|
|
1592
|
+
--sbb-lead-container-image-border-radius: 0;
|
|
1585
1593
|
--sbb-option-color: var(--sbb-color-3);
|
|
1586
1594
|
--sbb-option-background-color: inherit;
|
|
1587
1595
|
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
@@ -1837,6 +1845,8 @@ summary {
|
|
|
1837
1845
|
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
|
|
1838
1846
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
|
|
1839
1847
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
|
|
1848
|
+
--sbb-lead-container-image-ratio: 21 / 9;
|
|
1849
|
+
--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
|
|
1840
1850
|
}
|
|
1841
1851
|
}
|
|
1842
1852
|
|
|
@@ -1913,6 +1923,13 @@ sbb-icon-sidebar-content + sbb-icon-sidebar {
|
|
|
1913
1923
|
border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
|
|
1914
1924
|
}
|
|
1915
1925
|
|
|
1926
|
+
sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
|
|
1927
|
+
sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
|
|
1928
|
+
--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
|
|
1929
|
+
--sbb-image-object-fit: cover;
|
|
1930
|
+
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
1931
|
+
}
|
|
1932
|
+
|
|
1916
1933
|
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
1917
1934
|
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
1918
1935
|
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
@@ -2203,13 +2220,6 @@ img {
|
|
|
2203
2220
|
object-position: var(--sbb-image-object-position);
|
|
2204
2221
|
}
|
|
2205
2222
|
|
|
2206
|
-
sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
|
|
2207
|
-
sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
|
|
2208
|
-
--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
|
|
2209
|
-
--sbb-image-object-fit: cover;
|
|
2210
|
-
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
2211
|
-
}
|
|
2212
|
-
|
|
2213
2223
|
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2214
2224
|
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2215
2225
|
border-radius: var(--sbb-message-image-border-radius);
|
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.1773213760",
|
|
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/254f4db5cade13ff403fabf154f11c8726ced990"
|
|
11
11
|
],
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1582,6 +1582,14 @@ summary {
|
|
|
1582
1582
|
--sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
|
|
1583
1583
|
--sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
|
|
1584
1584
|
--sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
|
|
1585
|
+
--sbb-lead-container-background-color: var(--sbb-background-color-1);
|
|
1586
|
+
--sbb-lead-container-image-ratio: 2 / 1;
|
|
1587
|
+
--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
|
|
1588
|
+
--sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
|
|
1589
|
+
--sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
|
|
1590
|
+
--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
|
|
1591
|
+
--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
|
|
1592
|
+
--sbb-lead-container-image-border-radius: 0;
|
|
1585
1593
|
--sbb-option-color: var(--sbb-color-3);
|
|
1586
1594
|
--sbb-option-background-color: inherit;
|
|
1587
1595
|
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
@@ -1837,6 +1845,8 @@ summary {
|
|
|
1837
1845
|
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
|
|
1838
1846
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
|
|
1839
1847
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
|
|
1848
|
+
--sbb-lead-container-image-ratio: 21 / 9;
|
|
1849
|
+
--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
|
|
1840
1850
|
}
|
|
1841
1851
|
}
|
|
1842
1852
|
|
|
@@ -1913,6 +1923,13 @@ sbb-icon-sidebar-content + sbb-icon-sidebar {
|
|
|
1913
1923
|
border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
|
|
1914
1924
|
}
|
|
1915
1925
|
|
|
1926
|
+
sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
|
|
1927
|
+
sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
|
|
1928
|
+
--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
|
|
1929
|
+
--sbb-image-object-fit: cover;
|
|
1930
|
+
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
1931
|
+
}
|
|
1932
|
+
|
|
1916
1933
|
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
1917
1934
|
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
1918
1935
|
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
@@ -2203,13 +2220,6 @@ img {
|
|
|
2203
2220
|
object-position: var(--sbb-image-object-position);
|
|
2204
2221
|
}
|
|
2205
2222
|
|
|
2206
|
-
sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
|
|
2207
|
-
sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
|
|
2208
|
-
--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
|
|
2209
|
-
--sbb-image-object-fit: cover;
|
|
2210
|
-
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
2211
|
-
}
|
|
2212
|
-
|
|
2213
2223
|
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2214
2224
|
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2215
2225
|
border-radius: var(--sbb-message-image-border-radius);
|
package/standard-theme.css
CHANGED
|
@@ -1582,6 +1582,14 @@ summary {
|
|
|
1582
1582
|
--sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
|
|
1583
1583
|
--sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
|
|
1584
1584
|
--sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
|
|
1585
|
+
--sbb-lead-container-background-color: var(--sbb-background-color-1);
|
|
1586
|
+
--sbb-lead-container-image-ratio: 2 / 1;
|
|
1587
|
+
--sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
|
|
1588
|
+
--sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
|
|
1589
|
+
--sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
|
|
1590
|
+
--sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
|
|
1591
|
+
--sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
|
|
1592
|
+
--sbb-lead-container-image-border-radius: 0;
|
|
1585
1593
|
--sbb-option-color: var(--sbb-color-3);
|
|
1586
1594
|
--sbb-option-background-color: inherit;
|
|
1587
1595
|
--sbb-option-background-color-hover: var(--sbb-background-color-3);
|
|
@@ -1837,6 +1845,8 @@ summary {
|
|
|
1837
1845
|
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
|
|
1838
1846
|
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
|
|
1839
1847
|
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
|
|
1848
|
+
--sbb-lead-container-image-ratio: 21 / 9;
|
|
1849
|
+
--sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
|
|
1840
1850
|
}
|
|
1841
1851
|
}
|
|
1842
1852
|
|
|
@@ -1913,6 +1923,13 @@ sbb-icon-sidebar-content + sbb-icon-sidebar {
|
|
|
1913
1923
|
border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
|
|
1914
1924
|
}
|
|
1915
1925
|
|
|
1926
|
+
sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
|
|
1927
|
+
sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
|
|
1928
|
+
--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
|
|
1929
|
+
--sbb-image-object-fit: cover;
|
|
1930
|
+
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
1931
|
+
}
|
|
1932
|
+
|
|
1916
1933
|
:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
|
|
1917
1934
|
--sbb-option-min-height: var(--sbb-size-element-xxs);
|
|
1918
1935
|
--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
|
|
@@ -2203,13 +2220,6 @@ img {
|
|
|
2203
2220
|
object-position: var(--sbb-image-object-position);
|
|
2204
2221
|
}
|
|
2205
2222
|
|
|
2206
|
-
sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
|
|
2207
|
-
sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
|
|
2208
|
-
--sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
|
|
2209
|
-
--sbb-image-object-fit: cover;
|
|
2210
|
-
border-radius: var(--sbb-lead-container-image-border-radius);
|
|
2211
|
-
}
|
|
2212
|
-
|
|
2213
2223
|
sbb-message > [slot=image]:is(sbb-image, img),
|
|
2214
2224
|
sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
|
|
2215
2225
|
border-radius: var(--sbb-message-image-border-radius);
|