@sb1/ffe-buttons 21.1.0 → 21.2.1

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/buttons.css +27 -0
  2. package/less/base-button.less +33 -0
  3. package/package.json +3 -3
package/css/buttons.css CHANGED
@@ -55,6 +55,7 @@
55
55
  --padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
56
56
  --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
57
57
  --padding-lg: calc(12px - var(--border-width));
58
+ --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
58
59
  -webkit-box-align: center;
59
60
  -ms-flex-align: center;
60
61
  align-items: center;
@@ -132,17 +133,41 @@
132
133
  .ffe-button .ffe-icons {
133
134
  display: block;
134
135
  }
136
+ .ffe-button--icon-only {
137
+ display: -webkit-box;
138
+ display: -ms-flexbox;
139
+ display: flex;
140
+ -webkit-box-align: center;
141
+ -ms-flex-align: center;
142
+ align-items: center;
143
+ -webkit-box-pack: center;
144
+ -ms-flex-pack: center;
145
+ justify-content: center;
146
+ }
147
+ .ffe-button--icon-only .ffe-icons {
148
+ background-color: var(--icon-only-color);
149
+ }
135
150
  .ffe-button--sm {
136
151
  padding: var(--padding-sm) 12px;
137
152
  font-size: var(--ffe-fontsize-button-sm);
138
153
  }
154
+ .ffe-button--sm.ffe-button--icon-only {
155
+ padding: var(--padding-sm);
156
+ }
139
157
  .ffe-button--md {
140
158
  padding: var(--padding-md) var(--ffe-spacing-sm);
141
159
  }
160
+ .ffe-button--md.ffe-button--icon-only {
161
+ padding: var(--padding-md);
162
+ }
142
163
  .ffe-button--lg {
143
164
  padding: var(--padding-lg) var(--ffe-spacing-md);
144
165
  }
166
+ .ffe-button--lg.ffe-button--icon-only {
167
+ padding: var(--padding-md);
168
+ }
145
169
  .ffe-button--action {
170
+ --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
146
171
  background-color: var(--ffe-color-component-button-action-fill-default);
147
172
  color: var(--ffe-color-component-button-action-foreground-default);
148
173
  }
@@ -162,6 +187,7 @@
162
187
  .ffe-button--primary {
163
188
  --background-color: var(--ffe-color-component-button-primary-fill-default);
164
189
  --text-color: var(--ffe-color-component-button-primary-foreground-default);
190
+ --icon-only-color: var(--ffe-color-component-button-primary-foreground-default);
165
191
  background-color: var(--background-color);
166
192
  color: var(--text-color);
167
193
  }
@@ -183,6 +209,7 @@
183
209
  --background-color: var(--ffe-color-component-button-secondary-fill-default);
184
210
  --border-color: var(--ffe-color-component-button-secondary-border-default);
185
211
  --text-color: var(--ffe-color-component-button-secondary-foreground-default);
212
+ --icon-only-color: var(--ffe-color-component-button-secondary-foreground-default);
186
213
  background-color: var(--background-color);
187
214
  border: solid 2px var(--border-color);
188
215
  color: var(--text-color);
package/less/base-button.less CHANGED
@@ -5,6 +5,7 @@
5
5
  --padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
6
6
  --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
7
7
  --padding-lg: calc(12px - var(--border-width));
8
+ --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
8
9
 
9
10
  align-items: center;
10
11
  appearance: none;
@@ -72,20 +73,46 @@
72
73
  display: block;
73
74
  }
74
75
 
76
+ &--icon-only {
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+
81
+ .ffe-icons {
82
+ background-color: var(--icon-only-color);
83
+ }
84
+ }
85
+
75
86
  &--sm {
76
87
  padding: var(--padding-sm) 12px;
77
88
  font-size: var(--ffe-fontsize-button-sm);
89
+
90
+ &.ffe-button--icon-only {
91
+ padding: var(--padding-sm);
92
+ }
78
93
  }
79
94
 
80
95
  &--md {
81
96
  padding: var(--padding-md) var(--ffe-spacing-sm);
97
+
98
+ &.ffe-button--icon-only {
99
+ padding: var(--padding-md);
100
+ }
82
101
  }
83
102
 
84
103
  &--lg {
85
104
  padding: var(--padding-lg) var(--ffe-spacing-md);
105
+
106
+ &.ffe-button--icon-only {
107
+ padding: var(--padding-md); //Md for å kompansere for hvor stort lg-ikonet er i forhold til lg-knappen
108
+ }
86
109
  }
87
110
 
88
111
  &--action {
112
+ --icon-only-color: var(
113
+ --ffe-color-component-button-action-foreground-default
114
+ );
115
+
89
116
  background-color: var(--ffe-color-component-button-action-fill-default);
90
117
  color: var(--ffe-color-component-button-action-foreground-default);
91
118
 
@@ -116,6 +143,9 @@
116
143
  --text-color: var(
117
144
  --ffe-color-component-button-primary-foreground-default
118
145
  );
146
+ --icon-only-color: var(
147
+ --ffe-color-component-button-primary-foreground-default
148
+ );
119
149
 
120
150
  background-color: var(--background-color);
121
151
  color: var(--text-color);
@@ -152,6 +182,9 @@
152
182
  --text-color: var(
153
183
  --ffe-color-component-button-secondary-foreground-default
154
184
  );
185
+ --icon-only-color: var(
186
+ --ffe-color-component-button-secondary-foreground-default
187
+ );
155
188
 
156
189
  background-color: var(--background-color);
157
190
  border: solid 2px var(--border-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-buttons",
3
- "version": "21.1.0",
3
+ "version": "21.2.1",
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": "^30.1.3"
20
+ "@sb1/ffe-core": "^31.0.1"
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": "06ff61e99e6eda9597ca92a309b37bd5b7fbcb01"
28
+ "gitHead": "e9e1f82136970a49ad5597ff0ebcbadaaef85b3c"
29
29
  }