@sb1/ffe-accordion 12.1.5 → 13.1.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.
Files changed (3) hide show
  1. package/css/ffe-accordion.css +19 -13
  2. package/less/ffe-accordion.less +23 -14
  3. 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: all var(--ffe-transition-duration) var(--ffe-ease);
20
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
21
- transition: all var(--ffe-transition-duration) var(--ffe-ease);
22
- border-radius: 16px;
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-v-accordion-border-hover-color);
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,13 @@
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);
100
+ .ffe-accordion .ffe-accordion-item__body--no-padding {
101
+ padding: 0;
92
102
  }
93
103
  .ffe-accordion .ffe-accordion-item--open .ffe-accordion-item__heading-icon {
94
104
  -webkit-transform: rotateZ(180deg);
95
105
  transform: rotateZ(180deg);
96
106
  }
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
107
  @media (hover: hover) and (pointer: fine) {
102
108
  .ffe-accordion .ffe-accordion-item--focus:hover {
103
109
  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: all var(--ffe-transition-duration) var(--ffe-ease);
26
- border-radius: 16px;
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-v-accordion-border-hover-color);
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
 
@@ -90,22 +102,19 @@
90
102
  padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm)
91
103
  var(--ffe-spacing-md);
92
104
  color: var(--ffe-v-accordion-body-text-color);
93
- }
94
105
 
95
- &--open {
96
- &:not(:last-of-type) {
97
- margin-bottom: var(--ffe-spacing-md);
106
+ &--no-padding {
107
+ padding: 0;
98
108
  }
109
+ }
99
110
 
111
+ &--open {
100
112
  .ffe-accordion-item__heading-icon {
101
113
  transform: rotateZ(180deg);
102
114
  }
103
115
  }
104
116
 
105
117
  &--focus {
106
- box-shadow: 0 0 0 2px
107
- var(--ffe-v-accordion-border-focus-color);
108
-
109
118
  @media (hover: hover) and (pointer: fine) {
110
119
  &:hover {
111
120
  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": "12.1.5",
3
+ "version": "13.1.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": "^32.0.5"
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": "12c17b17efaecc8943ccaef202c7243e43083d52"
31
+ "gitHead": "53d120387a01828ca01a3c4e9d14d3b5345a724e"
32
32
  }