@sb1/ffe-buttons 16.1.1 → 16.1.3
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 +3 -53
- package/less/theme.less +3 -1
- package/package.json +3 -3
package/less/base-button.less
CHANGED
|
@@ -1,47 +1,3 @@
|
|
|
1
|
-
// Buttons
|
|
2
|
-
//
|
|
3
|
-
// Base buttons with loading state support.
|
|
4
|
-
//
|
|
5
|
-
// Markup:
|
|
6
|
-
// <button class="ffe-button ffe-button{{modifier_class}}">
|
|
7
|
-
// <span class="ffe-button__label">Click bait</span>
|
|
8
|
-
// <span class="ffe-button__spinner" aria-hidden="true" aria-label="Vennligst vent"></span>
|
|
9
|
-
// </button>
|
|
10
|
-
// <button class="ffe-button ffe-button{{modifier_class}} ffe-button--loading" disabled>
|
|
11
|
-
// <span class="ffe-button__label">Click bait</span>
|
|
12
|
-
// <span class="ffe-button__spinner" aria-hidden="false" aria-label="Vennligst vent"></span>
|
|
13
|
-
// </button>
|
|
14
|
-
//
|
|
15
|
-
// --action - Action
|
|
16
|
-
// --primary - Primary
|
|
17
|
-
// --secondary - Secondary
|
|
18
|
-
//
|
|
19
|
-
// Styleguide ffe-buttons.base-button.1
|
|
20
|
-
|
|
21
|
-
// More Buttons
|
|
22
|
-
//
|
|
23
|
-
// Markup:
|
|
24
|
-
// <button class="ffe-button ffe-button{{modifier_class}}">
|
|
25
|
-
// <span class="ffe-button__label">Click bait</span>
|
|
26
|
-
// </button>
|
|
27
|
-
//
|
|
28
|
-
// --shortcut - Short cut
|
|
29
|
-
// --task - Task
|
|
30
|
-
//
|
|
31
|
-
// Styleguide ffe-buttons.base-button.2
|
|
32
|
-
|
|
33
|
-
// Expand Button
|
|
34
|
-
//
|
|
35
|
-
// Markup:
|
|
36
|
-
// <button class="ffe-button ffe-button--expand" aria-expanded="false">
|
|
37
|
-
// <span class="ffe-button__label">Vis mer</span>
|
|
38
|
-
// </button>
|
|
39
|
-
// <button class="ffe-button ffe-button--expand ffe-button--expanded" aria-expanded="true">
|
|
40
|
-
// <svg focusable="false" class="ffe-button__icon" viewBox="0 0 200 200" width="150" height="150" x="1200" y="1200" xmlns="http://www.w3.org/2000/svg"><path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path></svg>
|
|
41
|
-
// </button>
|
|
42
|
-
//
|
|
43
|
-
// Styleguide ffe-buttons.base-button.3
|
|
44
|
-
|
|
45
1
|
.ffe-button {
|
|
46
2
|
align-items: center;
|
|
47
3
|
appearance: none;
|
|
@@ -146,7 +102,7 @@
|
|
|
146
102
|
.ffe-button--shortcut,
|
|
147
103
|
.ffe-button--expand {
|
|
148
104
|
background-color: var(--ffe-v-button-secondary-color-bg);
|
|
149
|
-
border: solid 2px var(--ffe-v-button-secondary-color);
|
|
105
|
+
border: solid 2px var(--ffe-v-button-secondary-border-color);
|
|
150
106
|
color: var(--ffe-v-button-secondary-color);
|
|
151
107
|
|
|
152
108
|
&:active,
|
|
@@ -160,20 +116,14 @@
|
|
|
160
116
|
}
|
|
161
117
|
}
|
|
162
118
|
|
|
163
|
-
&:focus {
|
|
164
|
-
.native & {
|
|
165
|
-
@media (prefers-color-scheme: dark) {
|
|
166
|
-
background-color: transparent;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
119
|
&:hover {
|
|
172
120
|
background-color: var(--ffe-v-button-secondary-color);
|
|
173
121
|
border-color: var(--ffe-v-button-secondary-color);
|
|
174
122
|
color: var(--ffe-v-button-secondary-color-bg);
|
|
175
123
|
.native & {
|
|
176
124
|
@media (prefers-color-scheme: dark) {
|
|
125
|
+
background-color: var(--ffe-v-button-secondary-border-color);
|
|
126
|
+
border-color: var(--ffe-v-button-secondary-border-color);
|
|
177
127
|
color: var(--ffe-v-button-secondary-color-bg);
|
|
178
128
|
}
|
|
179
129
|
}
|
package/less/theme.less
CHANGED
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
/** Secondary buttons (+ task, back, expand, etc) are inverted */
|
|
21
21
|
--ffe-v-button-secondary-color: var(--ffe-farge-vann);
|
|
22
|
+
--ffe-v-button-secondary-border-color: var(--ffe-farge-vann);
|
|
22
23
|
--ffe-v-button-secondary-color-hover: var(--ffe-farge-fjell);
|
|
23
24
|
--ffe-v-button-secondary-color-bg: var(--ffe-farge-hvit);
|
|
24
25
|
|
|
@@ -41,7 +42,8 @@
|
|
|
41
42
|
--ffe-v-button-primary-color: var(--ffe-farge-vann-70);
|
|
42
43
|
--ffe-v-button-primary-color-hover: var(--ffe-farge-vann-30);
|
|
43
44
|
--ffe-v-button-primary-color-text: var(--ffe-farge-svart);
|
|
44
|
-
--ffe-v-button-secondary-color: var(--ffe-farge-vann-
|
|
45
|
+
--ffe-v-button-secondary-color: var(--ffe-farge-vann-30);
|
|
46
|
+
--ffe-v-button-secondary-border-color: var(--ffe-farge-vann-70);
|
|
45
47
|
--ffe-v-button-secondary-color-hover: var(--ffe-farge-vann-30);
|
|
46
48
|
--ffe-v-button-secondary-color-bg: var(--ffe-farge-svart);
|
|
47
49
|
--ffe-v-button-tertiary-color: var(--ffe-farge-vann-70);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-buttons",
|
|
3
|
-
"version": "16.1.
|
|
3
|
+
"version": "16.1.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank1",
|
|
6
6
|
"files": [
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
18
|
"@sb1/ffe-buildtool": "^0.5.0",
|
|
19
|
-
"@sb1/ffe-core": "^26.1.
|
|
19
|
+
"@sb1/ffe-core": "^26.1.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@sb1/ffe-core": "*"
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"publishConfig": {
|
|
25
25
|
"access": "public"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "96e66a3cde106a5e6057492c4b7c245f64f09e99"
|
|
28
28
|
}
|