@cloud-ru/ds-accordion 1.1.3 → 1.1.4
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/CHANGELOG.md +4 -0
- package/dist/cjs/components/CollapseBlock/styles.module.css +20 -20
- package/dist/cjs/helperComponents/ChevronButton/styles.module.css +1 -1
- package/dist/cjs/style.css +21 -21
- package/dist/esm/components/CollapseBlock/styles.module.css +20 -20
- package/dist/esm/helperComponents/ChevronButton/styles.module.css +1 -1
- package/dist/esm/style.css +21 -21
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 1.1.4 (2026-09-30)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @ds/accordion
|
|
9
|
+
|
|
6
10
|
## 1.1.3 (2026-09-29)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @ds/accordion
|
|
@@ -29,35 +29,35 @@
|
|
|
29
29
|
}
|
|
30
30
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
|
|
31
31
|
opacity:var(--sn-acrylic-opacityBackground, 1);
|
|
32
|
-
background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #
|
|
32
|
+
background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #f2f2f2));
|
|
33
33
|
}
|
|
34
34
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
|
|
35
35
|
backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
|
|
36
36
|
}
|
|
37
37
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
|
|
38
38
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
39
|
-
background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #
|
|
39
|
+
background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f8f8f8));
|
|
40
40
|
}
|
|
41
41
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
|
|
42
42
|
backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
|
|
43
43
|
}
|
|
44
44
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
|
|
45
45
|
opacity:var(--sn-acrylic-opacityBackground2Level, 1);
|
|
46
|
-
background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #
|
|
46
|
+
background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #ffffff));
|
|
47
47
|
}
|
|
48
48
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default]{
|
|
49
49
|
backdrop-filter:var(--sn-acrylic-backdropFilter, none);
|
|
50
50
|
}
|
|
51
51
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
|
|
52
52
|
opacity:var(--sn-acrylic-opacityBackground, 1);
|
|
53
|
-
background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #
|
|
53
|
+
background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
|
|
54
54
|
}
|
|
55
55
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
|
|
56
56
|
backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
|
|
57
57
|
}
|
|
58
58
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
|
|
59
59
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
60
|
-
background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #
|
|
60
|
+
background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
|
|
61
61
|
}
|
|
62
62
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
|
|
63
63
|
backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
|
|
@@ -225,13 +225,13 @@
|
|
|
225
225
|
}
|
|
226
226
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=decorTransparent] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=decorTransparent] .acrylic{
|
|
227
227
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
228
|
-
background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(
|
|
228
|
+
background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
|
|
229
229
|
}
|
|
230
230
|
.wrapper[data-component=accordionPrimary][data-view=elevated], .wrapper[data-component=accordionSecondary][data-view=elevated]{
|
|
231
|
-
box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(
|
|
231
|
+
box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(34, 34, 34, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(34, 34, 34, 0.0784313725)));
|
|
232
232
|
}
|
|
233
233
|
.wrapper[data-component=accordionPrimary][data-view=simple]:hover, .wrapper[data-component=accordionPrimary][data-view=simple]:focus-within, .wrapper[data-component=accordionPrimary][data-view=elevated]:hover, .wrapper[data-component=accordionPrimary][data-view=elevated]:focus-within, .wrapper[data-component=accordionSecondary][data-view=simple]:hover, .wrapper[data-component=accordionSecondary][data-view=simple]:focus-within, .wrapper[data-component=accordionSecondary][data-view=elevated]:hover, .wrapper[data-component=accordionSecondary][data-view=elevated]:focus-within{
|
|
234
|
-
box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(
|
|
234
|
+
box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(34, 34, 34, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(34, 34, 34, 0.0784313725)));
|
|
235
235
|
}
|
|
236
236
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer, .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer{
|
|
237
237
|
position:absolute;
|
|
@@ -239,15 +239,15 @@
|
|
|
239
239
|
border-radius:inherit;
|
|
240
240
|
}
|
|
241
241
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=borderOnBackground]{
|
|
242
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(
|
|
242
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
|
|
243
243
|
border-style:solid;
|
|
244
244
|
border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
|
|
245
245
|
}
|
|
246
246
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
247
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(
|
|
247
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
|
|
248
248
|
}
|
|
249
249
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=activatedOnBackground]{
|
|
250
|
-
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(
|
|
250
|
+
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
|
|
251
251
|
}
|
|
252
252
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=versionOnColor]{
|
|
253
253
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
|
|
@@ -266,13 +266,13 @@
|
|
|
266
266
|
}
|
|
267
267
|
@media (hover: hover){
|
|
268
268
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
269
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(
|
|
269
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
|
|
270
270
|
}
|
|
271
271
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
272
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(
|
|
272
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
|
|
273
273
|
}
|
|
274
274
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
275
|
-
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(
|
|
275
|
+
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
|
|
276
276
|
}
|
|
277
277
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
278
278
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
@@ -293,13 +293,13 @@
|
|
|
293
293
|
.wrapper[data-component=accordionPrimary][data-view=outline], .wrapper[data-component=accordionSecondary][data-view=outline]{
|
|
294
294
|
}
|
|
295
295
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
296
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(
|
|
296
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
|
|
297
297
|
}
|
|
298
298
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
299
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(
|
|
299
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
|
|
300
300
|
}
|
|
301
301
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
302
|
-
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(
|
|
302
|
+
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
|
|
303
303
|
}
|
|
304
304
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
305
305
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
@@ -326,17 +326,17 @@
|
|
|
326
326
|
}
|
|
327
327
|
|
|
328
328
|
.title{
|
|
329
|
-
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #
|
|
329
|
+
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
|
|
330
330
|
}
|
|
331
331
|
|
|
332
332
|
.subTitle{
|
|
333
|
-
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans
|
|
333
|
+
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
|
|
334
334
|
font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
335
335
|
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
|
|
336
336
|
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
|
|
337
337
|
letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
338
338
|
paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
|
|
339
|
-
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(
|
|
339
|
+
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
|
|
340
340
|
}
|
|
341
341
|
|
|
342
342
|
[data-component=accordionPrimary] .titleContent{
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
padding:0;
|
|
10
10
|
border-color:transparent;
|
|
11
11
|
border-style:solid;
|
|
12
|
-
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #
|
|
12
|
+
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
|
|
13
13
|
background-color:transparent;
|
|
14
14
|
min-width:var(--sn-accordion-anatomy-buttonChevron-container-minWidth, var(--sn-primitive-dimension-32, 32px));
|
|
15
15
|
min-height:var(--sn-accordion-anatomy-buttonChevron-container-minHeight, var(--sn-primitive-dimension-32, 32px));
|
package/dist/cjs/style.css
CHANGED
|
@@ -29,35 +29,35 @@
|
|
|
29
29
|
}
|
|
30
30
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
|
|
31
31
|
opacity:var(--sn-acrylic-opacityBackground, 1);
|
|
32
|
-
background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #
|
|
32
|
+
background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #f2f2f2));
|
|
33
33
|
}
|
|
34
34
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
|
|
35
35
|
backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
|
|
36
36
|
}
|
|
37
37
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
|
|
38
38
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
39
|
-
background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #
|
|
39
|
+
background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f8f8f8));
|
|
40
40
|
}
|
|
41
41
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
|
|
42
42
|
backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
|
|
43
43
|
}
|
|
44
44
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
|
|
45
45
|
opacity:var(--sn-acrylic-opacityBackground2Level, 1);
|
|
46
|
-
background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #
|
|
46
|
+
background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #ffffff));
|
|
47
47
|
}
|
|
48
48
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default]{
|
|
49
49
|
backdrop-filter:var(--sn-acrylic-backdropFilter, none);
|
|
50
50
|
}
|
|
51
51
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
|
|
52
52
|
opacity:var(--sn-acrylic-opacityBackground, 1);
|
|
53
|
-
background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #
|
|
53
|
+
background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
|
|
54
54
|
}
|
|
55
55
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
|
|
56
56
|
backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
|
|
57
57
|
}
|
|
58
58
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
|
|
59
59
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
60
|
-
background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #
|
|
60
|
+
background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
|
|
61
61
|
}
|
|
62
62
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
|
|
63
63
|
backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
|
|
@@ -225,13 +225,13 @@
|
|
|
225
225
|
}
|
|
226
226
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=decorTransparent] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=decorTransparent] .acrylic{
|
|
227
227
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
228
|
-
background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(
|
|
228
|
+
background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
|
|
229
229
|
}
|
|
230
230
|
.wrapper[data-component=accordionPrimary][data-view=elevated], .wrapper[data-component=accordionSecondary][data-view=elevated]{
|
|
231
|
-
box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(
|
|
231
|
+
box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(34, 34, 34, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(34, 34, 34, 0.0784313725)));
|
|
232
232
|
}
|
|
233
233
|
.wrapper[data-component=accordionPrimary][data-view=simple]:hover, .wrapper[data-component=accordionPrimary][data-view=simple]:focus-within, .wrapper[data-component=accordionPrimary][data-view=elevated]:hover, .wrapper[data-component=accordionPrimary][data-view=elevated]:focus-within, .wrapper[data-component=accordionSecondary][data-view=simple]:hover, .wrapper[data-component=accordionSecondary][data-view=simple]:focus-within, .wrapper[data-component=accordionSecondary][data-view=elevated]:hover, .wrapper[data-component=accordionSecondary][data-view=elevated]:focus-within{
|
|
234
|
-
box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(
|
|
234
|
+
box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(34, 34, 34, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(34, 34, 34, 0.0784313725)));
|
|
235
235
|
}
|
|
236
236
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer, .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer{
|
|
237
237
|
position:absolute;
|
|
@@ -239,15 +239,15 @@
|
|
|
239
239
|
border-radius:inherit;
|
|
240
240
|
}
|
|
241
241
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=borderOnBackground]{
|
|
242
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(
|
|
242
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
|
|
243
243
|
border-style:solid;
|
|
244
244
|
border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
|
|
245
245
|
}
|
|
246
246
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
247
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(
|
|
247
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
|
|
248
248
|
}
|
|
249
249
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=activatedOnBackground]{
|
|
250
|
-
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(
|
|
250
|
+
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
|
|
251
251
|
}
|
|
252
252
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=versionOnColor]{
|
|
253
253
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
|
|
@@ -266,13 +266,13 @@
|
|
|
266
266
|
}
|
|
267
267
|
@media (hover: hover){
|
|
268
268
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
269
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(
|
|
269
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
|
|
270
270
|
}
|
|
271
271
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
272
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(
|
|
272
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
|
|
273
273
|
}
|
|
274
274
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
275
|
-
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(
|
|
275
|
+
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
|
|
276
276
|
}
|
|
277
277
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
278
278
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
@@ -293,13 +293,13 @@
|
|
|
293
293
|
.wrapper[data-component=accordionPrimary][data-view=outline], .wrapper[data-component=accordionSecondary][data-view=outline]{
|
|
294
294
|
}
|
|
295
295
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
296
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(
|
|
296
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
|
|
297
297
|
}
|
|
298
298
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
299
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(
|
|
299
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
|
|
300
300
|
}
|
|
301
301
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
302
|
-
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(
|
|
302
|
+
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
|
|
303
303
|
}
|
|
304
304
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
305
305
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
@@ -326,17 +326,17 @@
|
|
|
326
326
|
}
|
|
327
327
|
|
|
328
328
|
.title{
|
|
329
|
-
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #
|
|
329
|
+
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
|
|
330
330
|
}
|
|
331
331
|
|
|
332
332
|
.subTitle{
|
|
333
|
-
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans
|
|
333
|
+
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
|
|
334
334
|
font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
335
335
|
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
|
|
336
336
|
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
|
|
337
337
|
letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
338
338
|
paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
|
|
339
|
-
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(
|
|
339
|
+
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
|
|
340
340
|
}
|
|
341
341
|
|
|
342
342
|
[data-component=accordionPrimary] .titleContent{
|
|
@@ -483,7 +483,7 @@
|
|
|
483
483
|
padding:0;
|
|
484
484
|
border-color:transparent;
|
|
485
485
|
border-style:solid;
|
|
486
|
-
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #
|
|
486
|
+
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
|
|
487
487
|
background-color:transparent;
|
|
488
488
|
min-width:var(--sn-accordion-anatomy-buttonChevron-container-minWidth, var(--sn-primitive-dimension-32, 32px));
|
|
489
489
|
min-height:var(--sn-accordion-anatomy-buttonChevron-container-minHeight, var(--sn-primitive-dimension-32, 32px));
|
|
@@ -29,35 +29,35 @@
|
|
|
29
29
|
}
|
|
30
30
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
|
|
31
31
|
opacity:var(--sn-acrylic-opacityBackground, 1);
|
|
32
|
-
background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #
|
|
32
|
+
background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #f2f2f2));
|
|
33
33
|
}
|
|
34
34
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
|
|
35
35
|
backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
|
|
36
36
|
}
|
|
37
37
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
|
|
38
38
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
39
|
-
background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #
|
|
39
|
+
background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f8f8f8));
|
|
40
40
|
}
|
|
41
41
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
|
|
42
42
|
backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
|
|
43
43
|
}
|
|
44
44
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
|
|
45
45
|
opacity:var(--sn-acrylic-opacityBackground2Level, 1);
|
|
46
|
-
background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #
|
|
46
|
+
background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #ffffff));
|
|
47
47
|
}
|
|
48
48
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default]{
|
|
49
49
|
backdrop-filter:var(--sn-acrylic-backdropFilter, none);
|
|
50
50
|
}
|
|
51
51
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
|
|
52
52
|
opacity:var(--sn-acrylic-opacityBackground, 1);
|
|
53
|
-
background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #
|
|
53
|
+
background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
|
|
54
54
|
}
|
|
55
55
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
|
|
56
56
|
backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
|
|
57
57
|
}
|
|
58
58
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
|
|
59
59
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
60
|
-
background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #
|
|
60
|
+
background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
|
|
61
61
|
}
|
|
62
62
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
|
|
63
63
|
backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
|
|
@@ -225,13 +225,13 @@
|
|
|
225
225
|
}
|
|
226
226
|
.wrapper[data-component=accordionPrimary][data-acrylic-appearance=decorTransparent] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=decorTransparent] .acrylic{
|
|
227
227
|
opacity:var(--sn-acrylic-opacityBackground1Level, 1);
|
|
228
|
-
background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(
|
|
228
|
+
background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
|
|
229
229
|
}
|
|
230
230
|
.wrapper[data-component=accordionPrimary][data-view=elevated], .wrapper[data-component=accordionSecondary][data-view=elevated]{
|
|
231
|
-
box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(
|
|
231
|
+
box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(34, 34, 34, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(34, 34, 34, 0.0784313725)));
|
|
232
232
|
}
|
|
233
233
|
.wrapper[data-component=accordionPrimary][data-view=simple]:hover, .wrapper[data-component=accordionPrimary][data-view=simple]:focus-within, .wrapper[data-component=accordionPrimary][data-view=elevated]:hover, .wrapper[data-component=accordionPrimary][data-view=elevated]:focus-within, .wrapper[data-component=accordionSecondary][data-view=simple]:hover, .wrapper[data-component=accordionSecondary][data-view=simple]:focus-within, .wrapper[data-component=accordionSecondary][data-view=elevated]:hover, .wrapper[data-component=accordionSecondary][data-view=elevated]:focus-within{
|
|
234
|
-
box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(
|
|
234
|
+
box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(34, 34, 34, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(34, 34, 34, 0.0784313725)));
|
|
235
235
|
}
|
|
236
236
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer, .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer{
|
|
237
237
|
position:absolute;
|
|
@@ -239,15 +239,15 @@
|
|
|
239
239
|
border-radius:inherit;
|
|
240
240
|
}
|
|
241
241
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=borderOnBackground]{
|
|
242
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(
|
|
242
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
|
|
243
243
|
border-style:solid;
|
|
244
244
|
border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
|
|
245
245
|
}
|
|
246
246
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
247
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(
|
|
247
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
|
|
248
248
|
}
|
|
249
249
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=activatedOnBackground]{
|
|
250
|
-
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(
|
|
250
|
+
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
|
|
251
251
|
}
|
|
252
252
|
.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=versionOnColor]{
|
|
253
253
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
|
|
@@ -266,13 +266,13 @@
|
|
|
266
266
|
}
|
|
267
267
|
@media (hover: hover){
|
|
268
268
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
269
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(
|
|
269
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
|
|
270
270
|
}
|
|
271
271
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
272
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(
|
|
272
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
|
|
273
273
|
}
|
|
274
274
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
275
|
-
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(
|
|
275
|
+
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
|
|
276
276
|
}
|
|
277
277
|
.wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
278
278
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
@@ -293,13 +293,13 @@
|
|
|
293
293
|
.wrapper[data-component=accordionPrimary][data-view=outline], .wrapper[data-component=accordionSecondary][data-view=outline]{
|
|
294
294
|
}
|
|
295
295
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
296
|
-
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(
|
|
296
|
+
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
|
|
297
297
|
}
|
|
298
298
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
299
|
-
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(
|
|
299
|
+
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
|
|
300
300
|
}
|
|
301
301
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
302
|
-
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(
|
|
302
|
+
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
|
|
303
303
|
}
|
|
304
304
|
.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
305
305
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
@@ -326,17 +326,17 @@
|
|
|
326
326
|
}
|
|
327
327
|
|
|
328
328
|
.title{
|
|
329
|
-
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #
|
|
329
|
+
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
|
|
330
330
|
}
|
|
331
331
|
|
|
332
332
|
.subTitle{
|
|
333
|
-
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans
|
|
333
|
+
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
|
|
334
334
|
font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
335
335
|
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
|
|
336
336
|
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
|
|
337
337
|
letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
338
338
|
paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
|
|
339
|
-
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(
|
|
339
|
+
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
|
|
340
340
|
}
|
|
341
341
|
|
|
342
342
|
[data-component=accordionPrimary] .titleContent{
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
padding:0;
|
|
10
10
|
border-color:transparent;
|
|
11
11
|
border-style:solid;
|
|
12
|
-
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #
|
|
12
|
+
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
|
|
13
13
|
background-color:transparent;
|
|
14
14
|
min-width:var(--sn-accordion-anatomy-buttonChevron-container-minWidth, var(--sn-primitive-dimension-32, 32px));
|
|
15
15
|
min-height:var(--sn-accordion-anatomy-buttonChevron-container-minHeight, var(--sn-primitive-dimension-32, 32px));
|