@sb1/ffe-accordion 13.1.3 → 13.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.
Files changed (3) hide show
  1. package/css/ffe-accordion.css +13 -14
  2. package/less/ffe-accordion.less +18 -30
  3. package/package.json +2 -2
package/css/ffe-accordion.css CHANGED
@@ -14,27 +14,31 @@
14
14
  background-color: var(--ffe-color-surface-primary-default);
15
15
  color: var(--ffe-v-accordion-body-text-color);
16
16
  margin-bottom: var(--ffe-spacing-xs);
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);
17
+ -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
18
+ -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
19
+ transition: all var(--ffe-transition-duration) var(--ffe-ease);
22
20
  border-radius: var(--ffe-g-border-radius-lg);
23
21
  border: var(--ffe-g-border-width) solid var(--ffe-v-accordion-border-color);
22
+ outline: var(--ffe-g-outline-width) solid transparent;
23
+ outline-offset: var(--ffe-g-outline-offset);
24
24
  }
25
25
  @media (hover: hover) and (pointer: fine) {
26
26
  .ffe-accordion .ffe-accordion-item:hover {
27
27
  border-color: var(--ffe-color-border-primary-default-hover);
28
28
  }
29
29
  }
30
- .ffe-accordion .ffe-accordion-item:focus-within {
30
+ .ffe-accordion .ffe-accordion-item--focus {
31
31
  -webkit-box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
32
32
  box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
33
33
  }
34
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);
35
+ .ffe-accordion .ffe-accordion-item--focus {
36
+ outline-color: var(--ffe-color-border-interactive-focus);
37
+ }
38
+ }
39
+ @media (pointer: fine) and (hover: hover) {
40
+ .ffe-accordion .ffe-accordion-item--focus:hover {
41
+ border-color: var(--ffe-v-accordion-border-color);
38
42
  }
39
43
  }
40
44
  .ffe-accordion .ffe-accordion-item__heading,
@@ -104,8 +108,3 @@
104
108
  -webkit-transform: rotateZ(180deg);
105
109
  transform: rotateZ(180deg);
106
110
  }
107
- @media (hover: hover) and (pointer: fine) {
108
- .ffe-accordion .ffe-accordion-item--focus:hover {
109
- border-color: var(--ffe-v-accordion-border-color);
110
- }
111
- }
package/less/ffe-accordion.less CHANGED
@@ -1,7 +1,5 @@
1
1
  .ffe-accordion {
2
- --ffe-v-accordion-hover-color: var(
3
- --ffe-color-surface-primary-default-hover
4
- );
2
+ --ffe-v-accordion-hover-color: var(--ffe-color-surface-primary-default-hover);
5
3
  --ffe-v-accordion-border-color: var(--ffe-color-border-primary-subtle);
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);
@@ -18,14 +16,11 @@
18
16
  background-color: var(--ffe-color-surface-primary-default);
19
17
  color: var(--ffe-v-accordion-body-text-color);
20
18
  margin-bottom: var(--ffe-spacing-xs);
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);
19
+ transition: all var(--ffe-transition-duration) var(--ffe-ease);
26
20
  border-radius: var(--ffe-g-border-radius-lg);
27
- border: var(--ffe-g-border-width) solid
28
- var(--ffe-v-accordion-border-color);
21
+ border: var(--ffe-g-border-width) solid var(--ffe-v-accordion-border-color);
22
+ outline: var(--ffe-g-outline-width) solid transparent;
23
+ outline-offset: var(--ffe-g-outline-offset);
29
24
 
30
25
  @media (hover: hover) and (pointer: fine) {
31
26
  &:hover {
@@ -33,15 +28,19 @@
33
28
  }
34
29
  }
35
30
 
36
- &:focus-within {
31
+ &--focus {
37
32
  box-shadow: 0 0 0 1px var(--ffe-color-border-primary-default-hover);
38
33
  }
39
34
 
40
35
  @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);
36
+ &--focus {
37
+ outline-color: var(--ffe-color-border-interactive-focus);
38
+
39
+ @media (hover: hover) {
40
+ &:hover {
41
+ border-color: var(--ffe-v-accordion-border-color);
42
+ }
43
+ }
45
44
  }
46
45
  }
47
46
 
@@ -61,8 +60,7 @@
61
60
  outline: none;
62
61
  color: var(--ffe-v-accordion-header-text-color);
63
62
  border-radius: 16px;
64
- transition: background-color var(--ffe-transition-duration)
65
- var(--ffe-ease);
63
+ transition: background-color var(--ffe-transition-duration) var(--ffe-ease);
66
64
 
67
65
  &--open {
68
66
  border-radius: 16px 16px 0 0;
@@ -93,14 +91,12 @@
93
91
  flex: 0 0 auto;
94
92
  color: var(--ffe-v-accordion-header-text-color);
95
93
  transition:
96
- transform var(--ffe-transition-duration)
97
- var(--ffe-ease-in-out-back),
94
+ transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back),
98
95
  color var(--ffe-transition-duration) var(--ffe-ease);
99
96
  }
100
97
 
101
98
  &__body {
102
- padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm)
103
- var(--ffe-spacing-md);
99
+ padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm) var(--ffe-spacing-md);
104
100
  color: var(--ffe-v-accordion-body-text-color);
105
101
 
106
102
  &--no-padding {
@@ -113,13 +109,5 @@
113
109
  transform: rotateZ(180deg);
114
110
  }
115
111
  }
116
-
117
- &--focus {
118
- @media (hover: hover) and (pointer: fine) {
119
- &:hover {
120
- border-color: var(--ffe-v-accordion-border-color);
121
- }
122
- }
123
- }
124
112
  }
125
- }
113
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-accordion",
3
- "version": "13.1.3",
3
+ "version": "13.1.4",
4
4
  "description": "Accordion component for FFE.",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -28,5 +28,5 @@
28
28
  "publishConfig": {
29
29
  "access": "public"
30
30
  },
31
- "gitHead": "ec1436a13ace3b42dd314702f4507256dfa4c017"
31
+ "gitHead": "53c34d08133242835303097e394af121b2e4fffd"
32
32
  }