@sb1/ffe-buttons 18.0.4 → 18.0.6
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/less/base-button.less +27 -3
- package/less/inline-base-button.less +18 -5
- package/package.json +4 -4
package/less/base-button.less
CHANGED
|
@@ -71,6 +71,10 @@
|
|
|
71
71
|
background-color: var(--ffe-v-button-action-color);
|
|
72
72
|
color: var(--ffe-v-button-text-color);
|
|
73
73
|
|
|
74
|
+
.ffe-button__icon {
|
|
75
|
+
color: var(--ffe-v-button-text-color);
|
|
76
|
+
}
|
|
77
|
+
|
|
74
78
|
.native & {
|
|
75
79
|
@media (prefers-color-scheme: dark) {
|
|
76
80
|
border: 2px solid transparent;
|
|
@@ -89,6 +93,10 @@
|
|
|
89
93
|
background-color: var(--ffe-v-button-primary-color);
|
|
90
94
|
color: var(--ffe-v-button-text-color);
|
|
91
95
|
|
|
96
|
+
.ffe-button__icon {
|
|
97
|
+
color: var(--ffe-v-button-text-color);
|
|
98
|
+
}
|
|
99
|
+
|
|
92
100
|
&:focus {
|
|
93
101
|
background-color: var(--ffe-v-button-primary-color);
|
|
94
102
|
}
|
|
@@ -105,6 +113,10 @@
|
|
|
105
113
|
border: solid 2px var(--ffe-v-button-secondary-border-color);
|
|
106
114
|
color: var(--ffe-v-button-secondary-color);
|
|
107
115
|
|
|
116
|
+
.ffe-button__icon {
|
|
117
|
+
color: var(--ffe-v-button-secondary-color);
|
|
118
|
+
}
|
|
119
|
+
|
|
108
120
|
&:active,
|
|
109
121
|
&:focus,
|
|
110
122
|
&:visited {
|
|
@@ -120,6 +132,10 @@
|
|
|
120
132
|
background-color: var(--ffe-v-button-secondary-color);
|
|
121
133
|
border-color: var(--ffe-v-button-secondary-color);
|
|
122
134
|
color: var(--ffe-v-button-secondary-color-bg);
|
|
135
|
+
|
|
136
|
+
.ffe-button__icon {
|
|
137
|
+
color: var(--ffe-v-button-secondary-color-bg);
|
|
138
|
+
}
|
|
123
139
|
.native & {
|
|
124
140
|
@media (prefers-color-scheme: dark) {
|
|
125
141
|
background-color: var(--ffe-v-button-secondary-border-color);
|
|
@@ -152,9 +168,17 @@
|
|
|
152
168
|
transition: all @ffe-transition-duration @ffe-ease;
|
|
153
169
|
width: auto;
|
|
154
170
|
|
|
171
|
+
.ffe-button__icon > .ffe-icons {
|
|
172
|
+
color: var(--ffe-v-button-task-primary-color);
|
|
173
|
+
}
|
|
174
|
+
|
|
155
175
|
&:hover {
|
|
156
176
|
color: var(--ffe-v-button-task-text-color-hover);
|
|
157
177
|
box-shadow: none;
|
|
178
|
+
|
|
179
|
+
.ffe-button__icon > .ffe-icons {
|
|
180
|
+
color: var(--ffe-v-button-primary-color-text);
|
|
181
|
+
}
|
|
158
182
|
}
|
|
159
183
|
|
|
160
184
|
&:focus {
|
|
@@ -216,13 +240,13 @@
|
|
|
216
240
|
}
|
|
217
241
|
|
|
218
242
|
.ffe-button--expand & {
|
|
219
|
-
|
|
243
|
+
color: var(--ffe-v-button-task-primary-color);
|
|
220
244
|
}
|
|
221
245
|
.ffe-button--expand:hover & {
|
|
222
|
-
|
|
246
|
+
color: @ffe-farge-hvit;
|
|
223
247
|
.native & {
|
|
224
248
|
@media (prefers-color-scheme: dark) {
|
|
225
|
-
|
|
249
|
+
color: @ffe-farge-svart;
|
|
226
250
|
}
|
|
227
251
|
}
|
|
228
252
|
}
|
|
@@ -57,7 +57,11 @@
|
|
|
57
57
|
border-bottom: 1px solid transparent;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
.ffe-inline-button__icon {
|
|
61
|
+
color: var(--ffe-v-button-primary-color);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&:hover .ffe-inline-button__icon {
|
|
61
65
|
color: var(--ffe-v-button-primary-color-hover);
|
|
62
66
|
}
|
|
63
67
|
|
|
@@ -73,7 +77,12 @@
|
|
|
73
77
|
margin: 0;
|
|
74
78
|
align-items: center;
|
|
75
79
|
|
|
76
|
-
|
|
80
|
+
.ffe-inline-button__icon {
|
|
81
|
+
color: var(--ffe-v-button-primary-color);
|
|
82
|
+
transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
|
|
83
|
+
}
|
|
84
|
+
&:hover .ffe-inline-button__icon,
|
|
85
|
+
&:hover .ffe-inline-button__label {
|
|
77
86
|
color: var(--ffe-v-button-primary-color-hover);
|
|
78
87
|
}
|
|
79
88
|
}
|
|
@@ -85,6 +94,10 @@
|
|
|
85
94
|
padding: @ffe-spacing-xs (@ffe-spacing-sm + 1);
|
|
86
95
|
border: 2px solid transparent;
|
|
87
96
|
|
|
97
|
+
.ffe-inline-button__icon {
|
|
98
|
+
color: var(--ffe-v-button-tertiary-color);
|
|
99
|
+
}
|
|
100
|
+
|
|
88
101
|
.ffe-inline-button__label {
|
|
89
102
|
&::after {
|
|
90
103
|
border-bottom: solid 1px currentColor;
|
|
@@ -114,6 +127,9 @@
|
|
|
114
127
|
&:hover {
|
|
115
128
|
color: var(--ffe-v-button-tertiary-color-hover);
|
|
116
129
|
|
|
130
|
+
.ffe-inline-button__icon {
|
|
131
|
+
color: var(--ffe-v-button-tertiary-color-hover);
|
|
132
|
+
}
|
|
117
133
|
.native & {
|
|
118
134
|
@media (prefers-color-scheme: dark) {
|
|
119
135
|
color: @ffe-farge-hvit;
|
|
@@ -126,9 +142,6 @@
|
|
|
126
142
|
margin-bottom: -2px;
|
|
127
143
|
will-change: transform, opacity;
|
|
128
144
|
|
|
129
|
-
.ffe-inline-button--expand & {
|
|
130
|
-
transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
|
|
131
|
-
}
|
|
132
145
|
.ffe-inline-button--expanded & {
|
|
133
146
|
transform: rotateZ(180deg);
|
|
134
147
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-buttons",
|
|
3
|
-
"version": "18.0.
|
|
3
|
+
"version": "18.0.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank1",
|
|
6
6
|
"files": [
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
"test": "npm run lint"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@sb1/ffe-core": "^27.
|
|
18
|
+
"@sb1/ffe-core": "^27.3.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@sb1/ffe-buildtool": "^0.5.
|
|
21
|
+
"@sb1/ffe-buildtool": "^0.5.1"
|
|
22
22
|
},
|
|
23
23
|
"publishConfig": {
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "e9f8ba0eb329a7b2fc1aa21512c67ad440b74bb0"
|
|
27
27
|
}
|