@sb1/ffe-accordion 8.0.24 → 8.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 (2) hide show
  1. package/less/ffe-accordion.less +93 -82
  2. package/package.json +26 -26
package/less/ffe-accordion.less CHANGED
@@ -2,111 +2,122 @@
2
2
  width: 100%;
3
3
  border: 1px solid transparent;
4
4
  font-family: 'SpareBank1-regular', 'MuseoSans-500', arial, sans-serif;
5
+ }
5
6
 
6
- &--focus {
7
- border-color: @ffe-farge-vann;
7
+ .ffe-accordion-item {
8
+ margin-bottom: @ffe-spacing-xs;
9
+ transition: margin-bottom @ffe-transition-duration @ffe-ease-in-out-back;
10
+ box-shadow: 0 1px 4px rgb(38 38 38 / 30%);
11
+ border-radius: 16px;
12
+ border: 2px solid transparent;
13
+ background-color: @ffe-farge-hvit;
8
14
 
9
- .native & {
10
- @media (prefers-color-scheme: dark) {
11
- border-color: @ffe-farge-vann-70;
15
+ &__heading {
16
+ margin: 0;
17
+ }
18
+
19
+ &__heading-button {
20
+ width: 100%;
21
+ background: none;
22
+ border: none;
23
+ padding: @ffe-spacing-sm;
24
+ font-family: 'SpareBank1-medium', 'MuseoSansRounded-700', arial,
25
+ sans-serif;
26
+ cursor: pointer;
27
+ outline: none;
28
+ color: @ffe-farge-vann;
29
+
30
+ &:hover {
31
+ .ffe-accordion-item__heading-icon {
32
+ transition: fill @ffe-transition-duration @ffe-ease;
33
+ fill: @ffe-farge-hvit;
34
+ }
35
+
36
+ .ffe-accordion-item__heading-icon-wrapper {
37
+ transition: background-color @ffe-transition-duration @ffe-ease;
38
+ background-color: @ffe-farge-vann;
12
39
  }
13
40
  }
14
- }
15
- }
16
41
 
17
- .ffe-accordion__heading-icon {
18
- flex: 0 0 auto;
19
- fill: @ffe-farge-vann;
20
- width: @ffe-spacing-sm;
21
- height: @ffe-spacing-sm;
22
- transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
23
- .native & {
24
- @media (prefers-color-scheme: dark) {
25
- fill: @ffe-farge-vann-70;
42
+ &:focus-visible {
43
+ outline: none;
26
44
  }
27
45
  }
28
- }
29
46
 
30
- .ffe-accordion__heading-button {
31
- width: 100%;
32
- background: none;
33
- border: none;
34
- padding: @ffe-spacing-md;
35
- font-family: 'SpareBank1-medium', 'MuseoSansRounded-700', arial, sans-serif;
36
- cursor: pointer;
37
- outline: none;
38
- color: @ffe-farge-vann;
39
- transition: all @ffe-transition-duration @ffe-ease;
40
-
41
- &--open,
42
- &:hover,
43
- &:focus {
44
- color: @ffe-farge-fjell;
45
- .ffe-accordion__heading-icon {
46
- fill: @ffe-farge-fjell;
47
- }
47
+ &__heading-button-content {
48
+ width: 100%;
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: space-between;
48
52
  }
49
53
 
50
- .native & {
51
- @media (prefers-color-scheme: dark) {
52
- color: @ffe-farge-vann-70;
54
+ &__heading-icon-wrapper {
55
+ line-height: 0;
56
+ border: 1px solid @ffe-farge-vann;
57
+ border-radius: 50%;
58
+ padding: 11px;
59
+ }
53
60
 
54
- &--open,
55
- &:hover,
56
- &:focus {
57
- color: @ffe-farge-vann-30;
58
- .ffe-accordion__heading-icon {
59
- fill: @ffe-farge-vann-30;
60
- }
61
- }
62
- }
61
+ &__heading-icon {
62
+ flex: 0 0 auto;
63
+ fill: @ffe-farge-vann;
64
+ width: 11px;
65
+ height: 11px;
66
+ transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
67
+ }
68
+
69
+ &__body {
70
+ padding: @ffe-spacing-xs @ffe-spacing-sm @ffe-spacing-md;
71
+ color: @ffe-farge-svart;
63
72
  }
64
73
 
65
74
  &--open {
66
- .ffe-accordion__heading-icon {
75
+ &:not(:last-of-type) {
76
+ margin-bottom: @ffe-spacing-md;
77
+ }
78
+
79
+ .ffe-accordion-item__heading-icon {
67
80
  transform: rotateZ(180deg);
68
81
  }
69
82
  }
70
- &:focus {
71
- .ffe-accordion__heading-button-content {
72
- border-color: @ffe-farge-vann;
73
83
 
74
- .native & {
75
- @media (prefers-color-scheme: dark) {
76
- border-color: @ffe-farge-vann-70;
77
- }
78
- }
79
- }
84
+ &--focus {
85
+ border-color: @ffe-farge-vann;
80
86
  }
81
87
  }
82
88
 
83
- .ffe-accordion__heading-button-content {
84
- width: 100%;
85
- display: flex;
86
- align-items: center;
87
- justify-content: space-between;
88
- border: 2px solid transparent;
89
- border-radius: 5px;
90
- padding: @ffe-spacing-2xs;
91
- }
89
+ .native & {
90
+ @media (prefers-color-scheme: dark) {
91
+ .ffe-accordion-item {
92
+ background-color: @ffe-farge-natt;
92
93
 
93
- .ffe-accordion-body {
94
- padding: @ffe-spacing-xs @ffe-spacing-md @ffe-spacing-md;
95
- color: @ffe-farge-svart;
94
+ &__heading-button {
95
+ color: @ffe-farge-frost;
96
+ }
96
97
 
97
- .native & {
98
- @media (prefers-color-scheme: dark) {
99
- color: @ffe-farge-hvit;
100
- }
101
- }
102
- }
98
+ &__body {
99
+ color: @ffe-farge-hvit;
100
+ }
103
101
 
104
- .ffe-accordion-item {
105
- border-top: solid @ffe-farge-graa 1px;
106
- &:last-of-type {
107
- border-bottom: solid @ffe-farge-graa 1px;
108
- }
109
- .ffe-h6 {
110
- margin: 0;
102
+ .ffe-accordion-item__heading-icon {
103
+ fill: @ffe-farge-frost;
104
+ }
105
+
106
+ .ffe-accordion-item__heading-icon-wrapper {
107
+ border-color: @ffe-farge-frost;
108
+ }
109
+
110
+ &:hover {
111
+ border-color: @ffe-farge-hvit;
112
+
113
+ .ffe-accordion-item__heading-icon {
114
+ fill: @ffe-farge-frost;
115
+ }
116
+
117
+ .ffe-accordion-item__heading-icon-wrapper {
118
+ background-color: transparent;
119
+ }
120
+ }
121
+ }
111
122
  }
112
123
  }
package/package.json CHANGED
@@ -1,28 +1,28 @@
1
1
  {
2
- "name": "@sb1/ffe-accordion",
3
- "version": "8.0.24",
4
- "description": "Accordion component for FFE.",
5
- "license": "MIT",
6
- "author": "SpareBank 1",
7
- "files": [
8
- "less"
9
- ],
10
- "repository": {
11
- "type": "git",
12
- "url": "ssh://git@github.com:SpareBank1/designsystem.git"
13
- },
14
- "scripts": {
15
- "lint": "stylelint less/*.less",
16
- "test": "npm run lint"
17
- },
18
- "devDependencies": {
19
- "@sb1/ffe-core": "^24.0.0"
20
- },
21
- "peerDependencies": {
22
- "@sb1/ffe-core": "*"
23
- },
24
- "publishConfig": {
25
- "access": "public"
26
- },
27
- "gitHead": "2e94af2cd9ea842bdb55a78fae5f76fc25c66f28"
2
+ "name": "@sb1/ffe-accordion",
3
+ "version": "8.1.0",
4
+ "description": "Accordion component for FFE.",
5
+ "license": "MIT",
6
+ "author": "SpareBank 1",
7
+ "files": [
8
+ "less"
9
+ ],
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "ssh://git@github.com:SpareBank1/designsystem.git"
13
+ },
14
+ "scripts": {
15
+ "lint": "stylelint less/*.less",
16
+ "test": "npm run lint"
17
+ },
18
+ "devDependencies": {
19
+ "@sb1/ffe-core": "^24.0.0"
20
+ },
21
+ "peerDependencies": {
22
+ "@sb1/ffe-core": "*"
23
+ },
24
+ "publishConfig": {
25
+ "access": "public"
26
+ },
27
+ "gitHead": "9955a2b5fc44a9ec0481f59a4bce152c3c6f3dc7"
28
28
  }