@sb1/ffe-accordion 12.1.5 → 13.0.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.
- package/css/ffe-accordion.css +17 -14
- package/less/ffe-accordion.less +19 -14
- package/package.json +3 -3
package/css/ffe-accordion.css
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
.ffe-accordion {
|
|
2
2
|
--ffe-v-accordion-hover-color: var(--ffe-color-surface-primary-default-hover);
|
|
3
3
|
--ffe-v-accordion-border-color: var(--ffe-color-border-primary-subtle);
|
|
4
|
-
--ffe-v-accordion-border-hover-color: var(--ffe-color-border-primary-default-hover);
|
|
5
|
-
--ffe-v-accordion-border-focus-color: var(--ffe-color-border-interactive-focus);
|
|
6
4
|
--ffe-v-accordion-header-text-color: var(--ffe-color-foreground-emphasis);
|
|
7
5
|
--ffe-v-accordion-body-text-color: var(--ffe-color-foreground-default);
|
|
8
6
|
width: 100%;
|
|
@@ -16,15 +14,27 @@
|
|
|
16
14
|
background-color: var(--ffe-color-surface-primary-default);
|
|
17
15
|
color: var(--ffe-v-accordion-body-text-color);
|
|
18
16
|
margin-bottom: var(--ffe-spacing-xs);
|
|
19
|
-
-webkit-transition:
|
|
20
|
-
-
|
|
21
|
-
transition:
|
|
22
|
-
border-
|
|
17
|
+
-webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
|
|
18
|
+
transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
|
|
19
|
+
-o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
|
|
20
|
+
transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease);
|
|
21
|
+
transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
|
|
22
|
+
border-radius: var(--ffe-g-border-radius-lg);
|
|
23
23
|
border: var(--ffe-g-border-width) solid var(--ffe-v-accordion-border-color);
|
|
24
24
|
}
|
|
25
25
|
@media (hover: hover) and (pointer: fine) {
|
|
26
26
|
.ffe-accordion .ffe-accordion-item:hover {
|
|
27
|
-
border-color: var(--ffe-
|
|
27
|
+
border-color: var(--ffe-color-border-primary-default-hover);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
.ffe-accordion .ffe-accordion-item:focus-within {
|
|
31
|
+
-webkit-box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
|
|
32
|
+
box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
|
|
33
|
+
}
|
|
34
|
+
@media (pointer: fine) {
|
|
35
|
+
.ffe-accordion .ffe-accordion-item:focus-within {
|
|
36
|
+
outline: var(--ffe-g-outline-width) solid var(--ffe-color-border-interactive-focus);
|
|
37
|
+
outline-offset: var(--ffe-g-outline-offset);
|
|
28
38
|
}
|
|
29
39
|
}
|
|
30
40
|
.ffe-accordion .ffe-accordion-item__heading,
|
|
@@ -87,17 +97,10 @@
|
|
|
87
97
|
padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm) var(--ffe-spacing-md);
|
|
88
98
|
color: var(--ffe-v-accordion-body-text-color);
|
|
89
99
|
}
|
|
90
|
-
.ffe-accordion .ffe-accordion-item--open:not(:last-of-type) {
|
|
91
|
-
margin-bottom: var(--ffe-spacing-md);
|
|
92
|
-
}
|
|
93
100
|
.ffe-accordion .ffe-accordion-item--open .ffe-accordion-item__heading-icon {
|
|
94
101
|
-webkit-transform: rotateZ(180deg);
|
|
95
102
|
transform: rotateZ(180deg);
|
|
96
103
|
}
|
|
97
|
-
.ffe-accordion .ffe-accordion-item--focus {
|
|
98
|
-
-webkit-box-shadow: 0 0 0 2px var(--ffe-v-accordion-border-focus-color);
|
|
99
|
-
box-shadow: 0 0 0 2px var(--ffe-v-accordion-border-focus-color);
|
|
100
|
-
}
|
|
101
104
|
@media (hover: hover) and (pointer: fine) {
|
|
102
105
|
.ffe-accordion .ffe-accordion-item--focus:hover {
|
|
103
106
|
border-color: var(--ffe-v-accordion-border-color);
|
package/less/ffe-accordion.less
CHANGED
|
@@ -3,10 +3,6 @@
|
|
|
3
3
|
--ffe-color-surface-primary-default-hover
|
|
4
4
|
);
|
|
5
5
|
--ffe-v-accordion-border-color: var(--ffe-color-border-primary-subtle);
|
|
6
|
-
--ffe-v-accordion-border-hover-color: var(--ffe-color-border-primary-default-hover);
|
|
7
|
-
--ffe-v-accordion-border-focus-color: var(
|
|
8
|
-
--ffe-color-border-interactive-focus
|
|
9
|
-
);
|
|
10
6
|
--ffe-v-accordion-header-text-color: var(--ffe-color-foreground-emphasis);
|
|
11
7
|
--ffe-v-accordion-body-text-color: var(--ffe-color-foreground-default);
|
|
12
8
|
|
|
@@ -22,14 +18,30 @@
|
|
|
22
18
|
background-color: var(--ffe-color-surface-primary-default);
|
|
23
19
|
color: var(--ffe-v-accordion-body-text-color);
|
|
24
20
|
margin-bottom: var(--ffe-spacing-xs);
|
|
25
|
-
transition:
|
|
26
|
-
|
|
21
|
+
transition:
|
|
22
|
+
color var(--ffe-transition-duration) var(--ffe-ease),
|
|
23
|
+
border var(--ffe-transition-duration) var(--ffe-ease),
|
|
24
|
+
box-shadow var(--ffe-transition-duration) var(--ffe-ease),
|
|
25
|
+
background-color var(--ffe-transition-duration) var(--ffe-ease);
|
|
26
|
+
border-radius: var(--ffe-g-border-radius-lg);
|
|
27
27
|
border: var(--ffe-g-border-width) solid
|
|
28
28
|
var(--ffe-v-accordion-border-color);
|
|
29
29
|
|
|
30
30
|
@media (hover: hover) and (pointer: fine) {
|
|
31
31
|
&:hover {
|
|
32
|
-
border-color: var(--ffe-
|
|
32
|
+
border-color: var(--ffe-color-border-primary-default-hover);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:focus-within {
|
|
37
|
+
box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (pointer: fine) {
|
|
41
|
+
&:focus-within {
|
|
42
|
+
outline: var(--ffe-g-outline-width) solid
|
|
43
|
+
var(--ffe-color-border-interactive-focus);
|
|
44
|
+
outline-offset: var(--ffe-g-outline-offset);
|
|
33
45
|
}
|
|
34
46
|
}
|
|
35
47
|
|
|
@@ -93,19 +105,12 @@
|
|
|
93
105
|
}
|
|
94
106
|
|
|
95
107
|
&--open {
|
|
96
|
-
&:not(:last-of-type) {
|
|
97
|
-
margin-bottom: var(--ffe-spacing-md);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
108
|
.ffe-accordion-item__heading-icon {
|
|
101
109
|
transform: rotateZ(180deg);
|
|
102
110
|
}
|
|
103
111
|
}
|
|
104
112
|
|
|
105
113
|
&--focus {
|
|
106
|
-
box-shadow: 0 0 0 2px
|
|
107
|
-
var(--ffe-v-accordion-border-focus-color);
|
|
108
|
-
|
|
109
114
|
@media (hover: hover) and (pointer: fine) {
|
|
110
115
|
&:hover {
|
|
111
116
|
border-color: var(--ffe-v-accordion-border-color);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-accordion",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0",
|
|
4
4
|
"description": "Accordion component for FFE.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "SpareBank 1",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "lessc less/ffe-accordion.less css/ffe-accordion.css --autoprefix"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@sb1/ffe-core": "^
|
|
23
|
+
"@sb1/ffe-core": "^33.0.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@sb1/ffe-buildtool": "^0.10.1"
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
"publishConfig": {
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "0f26027df58d561ce8d5310c91033c5e62e50f51"
|
|
32
32
|
}
|