@sb1/ffe-buttons 21.2.1 → 21.3.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.
- package/css/buttons.css +36 -0
- package/less/inline-base-button.less +40 -0
- package/package.json +3 -3
package/css/buttons.css
CHANGED
|
@@ -529,6 +529,9 @@
|
|
|
529
529
|
.ffe-inline-button--tertiary {
|
|
530
530
|
--icon-size-md: 1.5rem;
|
|
531
531
|
--border-width: 2px;
|
|
532
|
+
--padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
|
|
533
|
+
--padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
|
|
534
|
+
--padding-lg: calc(12px - var(--border-width));
|
|
532
535
|
-ms-flex-line-pack: center;
|
|
533
536
|
align-content: center;
|
|
534
537
|
color: var(--ffe-color-component-button-tertiary-foreground-default);
|
|
@@ -538,6 +541,25 @@
|
|
|
538
541
|
border: 2px solid transparent;
|
|
539
542
|
line-height: calc(var(--icon-size-md) - var(--border-width));
|
|
540
543
|
}
|
|
544
|
+
.ffe-inline-button--tertiary.ffe-inline-button--sm {
|
|
545
|
+
padding: var(--padding-sm) 12px;
|
|
546
|
+
font-size: var(--ffe-fontsize-button-sm);
|
|
547
|
+
}
|
|
548
|
+
.ffe-inline-button--tertiary.ffe-inline-button--sm.ffe-inline-button--icon-only {
|
|
549
|
+
padding: var(--padding-sm);
|
|
550
|
+
}
|
|
551
|
+
.ffe-inline-button--tertiary.ffe-inline-button--md {
|
|
552
|
+
padding: var(--padding-md) var(--ffe-spacing-sm);
|
|
553
|
+
}
|
|
554
|
+
.ffe-inline-button--tertiary.ffe-inline-button--md.ffe-inline-button--icon-only {
|
|
555
|
+
padding: var(--padding-md);
|
|
556
|
+
}
|
|
557
|
+
.ffe-inline-button--tertiary.ffe-inline-button--lg {
|
|
558
|
+
padding: var(--padding-lg) var(--ffe-spacing-md);
|
|
559
|
+
}
|
|
560
|
+
.ffe-inline-button--tertiary.ffe-inline-button--lg.ffe-inline-button--icon-only {
|
|
561
|
+
padding: var(--padding-md);
|
|
562
|
+
}
|
|
541
563
|
.ffe-inline-button--tertiary .ffe-inline-button__icon {
|
|
542
564
|
color: var(--ffe-color-component-button-tertiary-foreground-default);
|
|
543
565
|
}
|
|
@@ -547,6 +569,20 @@
|
|
|
547
569
|
display: block;
|
|
548
570
|
width: 100%;
|
|
549
571
|
}
|
|
572
|
+
.ffe-inline-button--tertiary.ffe-inline-button--icon-only .ffe-inline-button__label {
|
|
573
|
+
display: -webkit-box;
|
|
574
|
+
display: -ms-flexbox;
|
|
575
|
+
display: flex;
|
|
576
|
+
-webkit-box-align: center;
|
|
577
|
+
-ms-flex-align: center;
|
|
578
|
+
align-items: center;
|
|
579
|
+
-webkit-box-pack: center;
|
|
580
|
+
-ms-flex-pack: center;
|
|
581
|
+
justify-content: center;
|
|
582
|
+
}
|
|
583
|
+
.ffe-inline-button--tertiary.ffe-inline-button--icon-only .ffe-inline-button__label::after {
|
|
584
|
+
display: none;
|
|
585
|
+
}
|
|
550
586
|
.ffe-inline-button--tertiary:focus {
|
|
551
587
|
-webkit-box-shadow: none;
|
|
552
588
|
box-shadow: none;
|
|
@@ -124,6 +124,9 @@
|
|
|
124
124
|
.ffe-inline-button--tertiary {
|
|
125
125
|
--icon-size-md: 1.5rem; // 24px
|
|
126
126
|
--border-width: 2px;
|
|
127
|
+
--padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
|
|
128
|
+
--padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
|
|
129
|
+
--padding-lg: calc(12px - var(--border-width));
|
|
127
130
|
|
|
128
131
|
align-content: center;
|
|
129
132
|
color: var(--ffe-color-component-button-tertiary-foreground-default);
|
|
@@ -132,6 +135,31 @@
|
|
|
132
135
|
border: 2px solid transparent;
|
|
133
136
|
line-height: calc(var(--icon-size-md) - var(--border-width));
|
|
134
137
|
|
|
138
|
+
&.ffe-inline-button--sm {
|
|
139
|
+
padding: var(--padding-sm) 12px;
|
|
140
|
+
font-size: var(--ffe-fontsize-button-sm);
|
|
141
|
+
|
|
142
|
+
&.ffe-inline-button--icon-only {
|
|
143
|
+
padding: var(--padding-sm);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
&.ffe-inline-button--md {
|
|
148
|
+
padding: var(--padding-md) var(--ffe-spacing-sm);
|
|
149
|
+
|
|
150
|
+
&.ffe-inline-button--icon-only {
|
|
151
|
+
padding: var(--padding-md);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&.ffe-inline-button--lg {
|
|
156
|
+
padding: var(--padding-lg) var(--ffe-spacing-md);
|
|
157
|
+
|
|
158
|
+
&.ffe-inline-button--icon-only {
|
|
159
|
+
padding: var(--padding-md); //Md for å kompansere for hvor stort lg-ikonet er i forhold til lg-knappen
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
135
163
|
.ffe-inline-button__icon {
|
|
136
164
|
color: var(--ffe-color-component-button-tertiary-foreground-default);
|
|
137
165
|
}
|
|
@@ -145,6 +173,18 @@
|
|
|
145
173
|
}
|
|
146
174
|
}
|
|
147
175
|
|
|
176
|
+
&.ffe-inline-button--icon-only {
|
|
177
|
+
.ffe-inline-button__label {
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
justify-content: center;
|
|
181
|
+
|
|
182
|
+
&::after {
|
|
183
|
+
display: none;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
148
188
|
&:focus {
|
|
149
189
|
box-shadow: none;
|
|
150
190
|
border-color: var(--ffe-color-border-interactive-focus);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-buttons",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.3.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank1",
|
|
6
6
|
"files": [
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"build": "lessc less/buttons.less css/buttons.css --autoprefix"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@sb1/ffe-core": "^31.0.
|
|
20
|
+
"@sb1/ffe-core": "^31.0.2"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@sb1/ffe-buildtool": "^0.10.0"
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"publishConfig": {
|
|
26
26
|
"access": "public"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "a8ab66b4e1bcf0fc21120329f735367fa94c0108"
|
|
29
29
|
}
|