@danske/sapphire-css 32.1.2 → 32.2.0
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.
|
@@ -29,6 +29,11 @@
|
|
|
29
29
|
font-family: var(--sapphire-accordion-font-name);
|
|
30
30
|
background-color: var(--sapphire-accordion-color-background-item);
|
|
31
31
|
color: var(--sapphire-accordion-color-content);
|
|
32
|
+
box-shadow: 0 -1px 0 0 var(--sapphire-accordion-color-border);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Adds bottom border to the last accordion item as default */
|
|
36
|
+
.sapphire-accordion__item:last-child {
|
|
32
37
|
border-bottom: var(--sapphire-accordion-size-width-border) solid
|
|
33
38
|
var(--sapphire-accordion-color-border);
|
|
34
39
|
}
|
|
@@ -66,7 +71,7 @@
|
|
|
66
71
|
width: 100%;
|
|
67
72
|
}
|
|
68
73
|
|
|
69
|
-
/* Hover header*/
|
|
74
|
+
/* Hover header */
|
|
70
75
|
|
|
71
76
|
.sapphire-accordion__item:not(.is-disabled)
|
|
72
77
|
.sapphire-accordion__item-header:not(:active):not(.is-active):not(
|
|
@@ -88,7 +93,7 @@
|
|
|
88
93
|
background-color: var(--sapphire-accordion-color-background-header-active);
|
|
89
94
|
}
|
|
90
95
|
|
|
91
|
-
/* Focus header*/
|
|
96
|
+
/* Focus header */
|
|
92
97
|
|
|
93
98
|
.sapphire-accordion__item-header:focus {
|
|
94
99
|
outline: none;
|
|
@@ -105,15 +110,34 @@
|
|
|
105
110
|
border-radius: var(--sapphire-accordion-size-radius);
|
|
106
111
|
}
|
|
107
112
|
|
|
108
|
-
/* Remove
|
|
113
|
+
/* Remove the top box-shadow border (divider) from:
|
|
114
|
+
- first item of the accordion
|
|
115
|
+
- the focused item itself when the accordion is opened and header is focused
|
|
116
|
+
- the accordion item that is immediately preceded by a closed focused item
|
|
117
|
+
- the focused item itself when the accordion is closed and header is focused
|
|
118
|
+
*/
|
|
119
|
+
.sapphire-accordion__item:first-child,
|
|
120
|
+
.sapphire-accordion__item.sapphire-accordion__item--open:has(
|
|
121
|
+
.sapphire-accordion__item-header.is-focus
|
|
122
|
+
),
|
|
109
123
|
.sapphire-accordion__item:not(.sapphire-accordion__item--open):has(
|
|
110
124
|
.sapphire-accordion__item-header.is-focus,
|
|
111
125
|
.sapphire-accordion__item-header:not(.js-focus):focus-visible
|
|
112
|
-
)
|
|
113
|
-
|
|
126
|
+
)
|
|
127
|
+
+ .sapphire-accordion__item {
|
|
128
|
+
box-shadow: none;
|
|
114
129
|
}
|
|
115
130
|
|
|
116
|
-
/*
|
|
131
|
+
/* Remove closed item's box-shadow & bottom border if header is focused
|
|
132
|
+
The border-bottom removal is intended if the last accordion item is focused
|
|
133
|
+
*/
|
|
134
|
+
.sapphire-accordion__item:not(.sapphire-accordion__item--open):has(
|
|
135
|
+
.sapphire-accordion__item-header.is-focus,
|
|
136
|
+
.sapphire-accordion__item-header:not(.js-focus):focus-visible
|
|
137
|
+
) {
|
|
138
|
+
box-shadow: none;
|
|
139
|
+
border-bottom: none;
|
|
140
|
+
}
|
|
117
141
|
|
|
118
142
|
.sapphire-accordion__item-heading {
|
|
119
143
|
font-size: var(--sapphire-accordion-size-font-heading);
|
|
@@ -170,3 +194,12 @@
|
|
|
170
194
|
padding-bottom: var(--sapphire-accordion-size-spacing-body-bottom);
|
|
171
195
|
visibility: visible;
|
|
172
196
|
}
|
|
197
|
+
|
|
198
|
+
.sapphire-accordion--negative-margin-self {
|
|
199
|
+
margin-left: calc(
|
|
200
|
+
var(--sapphire-accordion-size-spacing-body-horizontal) * -1
|
|
201
|
+
);
|
|
202
|
+
width: calc(
|
|
203
|
+
100% + (var(--sapphire-accordion-size-spacing-body-horizontal) * 2)
|
|
204
|
+
);
|
|
205
|
+
}
|
|
@@ -14,6 +14,7 @@ declare const styles: {
|
|
|
14
14
|
readonly "sapphire-accordion__item-heading": string;
|
|
15
15
|
readonly "sapphire-accordion__item-arrow": string;
|
|
16
16
|
readonly "sapphire-accordion__item-content": string;
|
|
17
|
+
readonly "sapphire-accordion--negative-margin-self": string;
|
|
17
18
|
};
|
|
18
19
|
export = styles;
|
|
19
20
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-css",
|
|
3
|
-
"version": "32.
|
|
3
|
+
"version": "32.2.0",
|
|
4
4
|
"description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"@danske/sapphire-design-tokens": "^40.0.1"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "fd750fe463ba6d4f8a15c35e6f660fd6e46d0ec7"
|
|
72
72
|
}
|