@occmundial/occ-atomic 2.0.0 → 2.0.2
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [2.0.2](https://github.com/occmundial/occ-atomic/compare/v2.0.1...v2.0.2) (2024-07-26)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* Icon disabled styles ([cee2a23](https://github.com/occmundial/occ-atomic/commit/cee2a2352b8a2e410fbe56c5106b88ba9c8b0487))
|
|
7
|
+
|
|
8
|
+
## [2.0.1](https://github.com/occmundial/occ-atomic/compare/v2.0.0...v2.0.1) (2024-06-12)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* Remove fixed size for right-side icon in button ([1228467](https://github.com/occmundial/occ-atomic/commit/1228467ba0d107bba0e70603c28a3ccffaec306b))
|
|
14
|
+
|
|
1
15
|
# [2.0.0](https://github.com/occmundial/occ-atomic/compare/v1.39.1...v2.0.0) (2024-05-27)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -134,15 +134,4 @@ describe("Button styles", function () {
|
|
|
134
134
|
it('matches the snapshot', function () {
|
|
135
135
|
expect(_styles["default"]).toMatchSnapshot();
|
|
136
136
|
});
|
|
137
|
-
it('returns the right icons', function () {
|
|
138
|
-
var props = {
|
|
139
|
-
icon: 'testing'
|
|
140
|
-
};
|
|
141
|
-
expect(_styles["default"].primary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
|
|
142
|
-
expect(_styles["default"].secondary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
|
|
143
|
-
expect(_styles["default"].tertiary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
|
|
144
|
-
expect(_styles["default"].ghostPink['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMTM0NjU=)');
|
|
145
|
-
expect(_styles["default"].ghostGrey['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICM1QTVEN0I=)');
|
|
146
|
-
expect(_styles["default"].ghostWhite['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
|
|
147
|
-
});
|
|
148
137
|
});
|
|
@@ -48,28 +48,28 @@ Object {
|
|
|
48
48
|
"pointerEvents": "none",
|
|
49
49
|
},
|
|
50
50
|
"ghostGrey": Object {
|
|
51
|
-
"& $
|
|
51
|
+
"& $icon, & $iconRight": Object {
|
|
52
52
|
"fill": "#5A5D7B",
|
|
53
53
|
},
|
|
54
|
-
"&
|
|
55
|
-
"
|
|
54
|
+
"& $loadIcon": Object {
|
|
55
|
+
"fill": "#5A5D7B",
|
|
56
56
|
},
|
|
57
57
|
"&$disabled": Object {
|
|
58
|
+
"& $icon, & $iconRight": Object {
|
|
59
|
+
"fill": "#D3D4DC",
|
|
60
|
+
},
|
|
58
61
|
"background": "transparent",
|
|
59
62
|
"color": "#878A9F",
|
|
60
63
|
},
|
|
61
|
-
"&$disabled span span": Object {
|
|
62
|
-
"background": [Function],
|
|
63
|
-
},
|
|
64
64
|
"&:active": Object {
|
|
65
65
|
"background": "hsl(234 75.4% 12.7% / 0.1)",
|
|
66
66
|
},
|
|
67
|
+
"&:focus-visible": Object {
|
|
68
|
+
"boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
|
|
69
|
+
},
|
|
67
70
|
"&:hover": Object {
|
|
68
71
|
"background": "hsl(234 75.4% 12.7% / 0.05)",
|
|
69
72
|
},
|
|
70
|
-
"&:not(:active):focus-visible": Object {
|
|
71
|
-
"boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
|
|
72
|
-
},
|
|
73
73
|
"background": "transparent",
|
|
74
74
|
"color": "#5A5D7B",
|
|
75
75
|
},
|
|
@@ -77,13 +77,7 @@ Object {
|
|
|
77
77
|
"& $loadIcon": Object {
|
|
78
78
|
"fill": "#f13465",
|
|
79
79
|
},
|
|
80
|
-
"& span span": Object {
|
|
81
|
-
"background": [Function],
|
|
82
|
-
},
|
|
83
80
|
"&$disabled": Object {
|
|
84
|
-
"& span span": Object {
|
|
85
|
-
"background": [Function],
|
|
86
|
-
},
|
|
87
81
|
"background": "transparent !important",
|
|
88
82
|
"border": "none !important",
|
|
89
83
|
"color": "#fa90ac !important",
|
|
@@ -107,25 +101,25 @@ Object {
|
|
|
107
101
|
],
|
|
108
102
|
},
|
|
109
103
|
"ghostWhite": Object {
|
|
110
|
-
"&
|
|
111
|
-
"
|
|
104
|
+
"& $icon, & $iconRight": Object {
|
|
105
|
+
"fill": "#fff",
|
|
112
106
|
},
|
|
113
107
|
"&$disabled": Object {
|
|
108
|
+
"& $icon, & $iconRight": Object {
|
|
109
|
+
"fill": "rgba(255,255,255,0.3)",
|
|
110
|
+
},
|
|
114
111
|
"background": "transparent",
|
|
115
112
|
"color": "rgba(255,255,255,0.7)",
|
|
116
113
|
},
|
|
117
|
-
"&$disabled span span": Object {
|
|
118
|
-
"background": [Function],
|
|
119
|
-
},
|
|
120
114
|
"&:active": Object {
|
|
121
115
|
"background": "rgba(255,255,255,0.1)",
|
|
122
116
|
},
|
|
117
|
+
"&:focus-visible": Object {
|
|
118
|
+
"boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
|
|
119
|
+
},
|
|
123
120
|
"&:hover": Object {
|
|
124
121
|
"background": "rgba(255,255,255,0.05)",
|
|
125
122
|
},
|
|
126
|
-
"&:not(:active):focus-visible": Object {
|
|
127
|
-
"boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
|
|
128
|
-
},
|
|
129
123
|
"background": "transparent",
|
|
130
124
|
"color": "#fff",
|
|
131
125
|
},
|
|
@@ -136,6 +130,7 @@ Object {
|
|
|
136
130
|
},
|
|
137
131
|
"iconOnly": Object {
|
|
138
132
|
"& span span, & svg": Object {
|
|
133
|
+
"marginLeft": 0,
|
|
139
134
|
"marginRight": 0,
|
|
140
135
|
},
|
|
141
136
|
"padding": Array [
|
|
@@ -145,10 +140,8 @@ Object {
|
|
|
145
140
|
},
|
|
146
141
|
"iconRight": Object {
|
|
147
142
|
"display": "inline-block",
|
|
148
|
-
"height": 16,
|
|
149
143
|
"marginLeft": "8px",
|
|
150
144
|
"transition": "0.3s all",
|
|
151
|
-
"width": 16,
|
|
152
145
|
},
|
|
153
146
|
"lg": Object {
|
|
154
147
|
"&$iconOnly": Object {
|
|
@@ -199,29 +192,29 @@ Object {
|
|
|
199
192
|
],
|
|
200
193
|
},
|
|
201
194
|
"primary": Object {
|
|
202
|
-
"&
|
|
203
|
-
"
|
|
195
|
+
"& $icon, & $iconRight": Object {
|
|
196
|
+
"fill": "#fff",
|
|
204
197
|
},
|
|
205
198
|
"&$disabled": Object {
|
|
199
|
+
"& $icon, & $iconRight": Object {
|
|
200
|
+
"fill": "rgba(255,255,255,0.3)",
|
|
201
|
+
},
|
|
206
202
|
"background": "#F6809E",
|
|
207
203
|
"color": "rgba(255,255,255,0.7)",
|
|
208
204
|
"cursor": "not-allowed",
|
|
209
205
|
},
|
|
210
|
-
"&$disabled span span": Object {
|
|
211
|
-
"background": [Function],
|
|
212
|
-
},
|
|
213
206
|
"&:active": Object {
|
|
214
207
|
"background": "#821C36",
|
|
215
208
|
},
|
|
216
209
|
"&:focus": Object {
|
|
217
210
|
"outline": "2px solid rgba(255,255,255,0.2)",
|
|
218
211
|
},
|
|
212
|
+
"&:focus-visible": Object {
|
|
213
|
+
"boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
|
|
214
|
+
},
|
|
219
215
|
"&:hover": Object {
|
|
220
216
|
"background": "#A32444",
|
|
221
217
|
},
|
|
222
|
-
"&:not(:active):focus-visible": Object {
|
|
223
|
-
"boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
|
|
224
|
-
},
|
|
225
218
|
"background": "#D32E58",
|
|
226
219
|
"color": "#fff",
|
|
227
220
|
"outline": "2px solid rgba(255,255,255,0.2)",
|
|
@@ -231,45 +224,45 @@ Object {
|
|
|
231
224
|
"borderRadius": "50%",
|
|
232
225
|
},
|
|
233
226
|
"secondary": Object {
|
|
234
|
-
"& $
|
|
227
|
+
"& $icon, & $iconRight": Object {
|
|
235
228
|
"fill": "#083CAE",
|
|
236
229
|
},
|
|
237
|
-
"&
|
|
238
|
-
"
|
|
230
|
+
"& $loadIcon": Object {
|
|
231
|
+
"fill": "#083CAE",
|
|
239
232
|
},
|
|
240
233
|
"&$disabled": Object {
|
|
234
|
+
"& $icon, & $iconRight": Object {
|
|
235
|
+
"fill": "#8DA5DA",
|
|
236
|
+
},
|
|
241
237
|
"background": "hsl(221 91.2% 35.7% / 0.1)",
|
|
242
238
|
"color": "#486EC3",
|
|
243
239
|
},
|
|
244
|
-
"&$disabled span span": Object {
|
|
245
|
-
"background": [Function],
|
|
246
|
-
},
|
|
247
240
|
"&:active": Object {
|
|
248
241
|
"background": "hsl(221 91.2% 35.7% / 0.2)",
|
|
249
242
|
},
|
|
243
|
+
"&:focus-visible": Object {
|
|
244
|
+
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
|
245
|
+
},
|
|
250
246
|
"&:hover": Object {
|
|
251
247
|
"background": "hsl(221 91.2% 35.7% / 0.1)",
|
|
252
248
|
},
|
|
253
|
-
"&:not(:active):focus-visible": Object {
|
|
254
|
-
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
|
255
|
-
},
|
|
256
249
|
"background": "hsl(221 91.2% 35.7% / 0.05)",
|
|
257
250
|
"color": "#083CAE",
|
|
258
251
|
},
|
|
259
252
|
"tertiary": Object {
|
|
260
|
-
"& $
|
|
253
|
+
"& $icon, & $iconRight": Object {
|
|
261
254
|
"fill": "#083CAE",
|
|
262
255
|
},
|
|
263
|
-
"&
|
|
264
|
-
"
|
|
256
|
+
"& $loadIcon": Object {
|
|
257
|
+
"fill": "#083CAE",
|
|
265
258
|
},
|
|
266
259
|
"&$disabled": Object {
|
|
260
|
+
"& $icon, & $iconRight": Object {
|
|
261
|
+
"fill": "#8DA5DA",
|
|
262
|
+
},
|
|
267
263
|
"background": "transparent",
|
|
268
264
|
"color": "#486EC3",
|
|
269
|
-
"
|
|
270
|
-
},
|
|
271
|
-
"&$disabled span span": Object {
|
|
272
|
-
"background": [Function],
|
|
265
|
+
"outlineColor": "#8DA5DA",
|
|
273
266
|
},
|
|
274
267
|
"&:active": Object {
|
|
275
268
|
"background": "hsl(221 91.2% 35.7% / 0.1)",
|
|
@@ -277,27 +270,28 @@ Object {
|
|
|
277
270
|
"&:focus": Object {
|
|
278
271
|
"outline": "2px solid #083CAE",
|
|
279
272
|
},
|
|
273
|
+
"&:focus-visible": Object {
|
|
274
|
+
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
|
275
|
+
},
|
|
280
276
|
"&:hover": Object {
|
|
281
277
|
"background": "hsl(221 91.2% 35.7% / 0.05)",
|
|
282
278
|
},
|
|
283
|
-
"&:not(:active):focus-visible": Object {
|
|
284
|
-
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
|
285
|
-
},
|
|
286
279
|
"background": "transparent",
|
|
287
280
|
"color": "#083CAE",
|
|
288
281
|
"outline": "2px solid #083CAE",
|
|
289
282
|
"outlineOffset": "-2px",
|
|
290
283
|
},
|
|
291
284
|
"tertiaryWhite": Object {
|
|
292
|
-
"&
|
|
293
|
-
"
|
|
285
|
+
"& $icon, & $iconRight": Object {
|
|
286
|
+
"fill": "#fff",
|
|
294
287
|
},
|
|
295
288
|
"&$disabled": Object {
|
|
289
|
+
"& $icon, & $iconRight": Object {
|
|
290
|
+
"fill": "rgba(255,255,255,0.3)",
|
|
291
|
+
},
|
|
296
292
|
"background": "transparent",
|
|
297
293
|
"color": "rgba(255,255,255,0.7)",
|
|
298
|
-
|
|
299
|
-
"&$disabled span span": Object {
|
|
300
|
-
"background": [Function],
|
|
294
|
+
"outlineColor": "rgba(255,255,255,0.2)",
|
|
301
295
|
},
|
|
302
296
|
"&:active": Object {
|
|
303
297
|
"background": "rgba(255,255,255,0.1)",
|
|
@@ -305,12 +299,12 @@ Object {
|
|
|
305
299
|
"&:focus": Object {
|
|
306
300
|
"outline": "2px solid #fff",
|
|
307
301
|
},
|
|
302
|
+
"&:focus-visible": Object {
|
|
303
|
+
"boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
|
|
304
|
+
},
|
|
308
305
|
"&:hover": Object {
|
|
309
306
|
"background": "rgba(255,255,255,0.05)",
|
|
310
307
|
},
|
|
311
|
-
"&:not(:active):focus-visible": Object {
|
|
312
|
-
"boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
|
|
313
|
-
},
|
|
314
308
|
"background": "transparent",
|
|
315
309
|
"color": "#fff",
|
|
316
310
|
"outline": "2px solid #fff",
|
package/build/Button/styles.js
CHANGED
|
@@ -27,7 +27,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
27
27
|
|
|
28
28
|
var sec = _colors["default"].sec,
|
|
29
29
|
secDark = _colors["default"].secDark,
|
|
30
|
-
grey500 = _colors["default"].grey500,
|
|
31
30
|
secLight = _colors["default"].secLight;
|
|
32
31
|
var sm = _fonts2["default"]['button-small'];
|
|
33
32
|
var md = _fonts2["default"]['button-medium'];
|
|
@@ -102,22 +101,18 @@ var _default = {
|
|
|
102
101
|
'&:focus': {
|
|
103
102
|
outline: "2px solid ".concat(_colors2["default"].button.primary.border["default"])
|
|
104
103
|
},
|
|
105
|
-
'&:
|
|
104
|
+
'&:focus-visible': {
|
|
106
105
|
boxShadow: _shadows["default"]['focus-pink']
|
|
107
106
|
},
|
|
107
|
+
'& $icon, & $iconRight': {
|
|
108
|
+
fill: _colors2["default"].icon.inverse["default"]
|
|
109
|
+
},
|
|
108
110
|
'&$disabled': {
|
|
109
111
|
background: _colors2["default"].button.primary.bg.disabled,
|
|
110
112
|
color: _colors2["default"].text.white.secondary,
|
|
111
|
-
cursor: 'not-allowed'
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
background: function background(props) {
|
|
115
|
-
return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
'&$disabled span span': {
|
|
119
|
-
background: function background(props) {
|
|
120
|
-
return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
|
|
113
|
+
cursor: 'not-allowed',
|
|
114
|
+
'& $icon, & $iconRight': {
|
|
115
|
+
fill: _colors2["default"].icon.inverse.disabled
|
|
121
116
|
}
|
|
122
117
|
}
|
|
123
118
|
},
|
|
@@ -130,21 +125,17 @@ var _default = {
|
|
|
130
125
|
'&:active': {
|
|
131
126
|
background: _colors2["default"].button.secondary.bg.active
|
|
132
127
|
},
|
|
133
|
-
'&:
|
|
128
|
+
'&:focus-visible': {
|
|
134
129
|
boxShadow: _shadows["default"]['focus-indigo']
|
|
135
130
|
},
|
|
131
|
+
'& $icon, & $iconRight': {
|
|
132
|
+
fill: _colors2["default"].icon.brand["default"]
|
|
133
|
+
},
|
|
136
134
|
'&$disabled': {
|
|
137
135
|
background: _colors2["default"].button.secondary.bg.disabled,
|
|
138
|
-
color: _colors2["default"].text.indigo.secondary
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
background: function background(props) {
|
|
142
|
-
return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
|
|
143
|
-
}
|
|
144
|
-
},
|
|
145
|
-
'&$disabled span span': {
|
|
146
|
-
background: function background(props) {
|
|
147
|
-
return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
|
|
136
|
+
color: _colors2["default"].text.indigo.secondary,
|
|
137
|
+
'& $icon, & $iconRight': {
|
|
138
|
+
fill: _colors2["default"].icon.brand.disabled
|
|
148
139
|
}
|
|
149
140
|
},
|
|
150
141
|
'& $loadIcon': {
|
|
@@ -165,22 +156,18 @@ var _default = {
|
|
|
165
156
|
'&:focus': {
|
|
166
157
|
outline: "2px solid ".concat(_colors2["default"].button.tertiary.border["default"])
|
|
167
158
|
},
|
|
168
|
-
'&:
|
|
159
|
+
'&:focus-visible': {
|
|
169
160
|
boxShadow: _shadows["default"]['focus-indigo']
|
|
170
161
|
},
|
|
171
|
-
'&
|
|
172
|
-
|
|
173
|
-
return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
|
|
174
|
-
}
|
|
162
|
+
'& $icon, & $iconRight': {
|
|
163
|
+
fill: _colors2["default"].icon.brand["default"]
|
|
175
164
|
},
|
|
176
165
|
'&$disabled': {
|
|
177
166
|
background: 'transparent',
|
|
178
167
|
color: _colors2["default"].text.indigo.secondary,
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
background: function background(props) {
|
|
183
|
-
return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
|
|
168
|
+
outlineColor: _colors2["default"].button.tertiary.border.disabled,
|
|
169
|
+
'& $icon, & $iconRight': {
|
|
170
|
+
fill: _colors2["default"].icon.brand.disabled
|
|
184
171
|
}
|
|
185
172
|
},
|
|
186
173
|
'& $loadIcon': {
|
|
@@ -201,21 +188,18 @@ var _default = {
|
|
|
201
188
|
'&:focus': {
|
|
202
189
|
outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.inverse["default"])
|
|
203
190
|
},
|
|
204
|
-
'&:
|
|
191
|
+
'&:focus-visible': {
|
|
205
192
|
boxShadow: _shadows["default"]['focus-white']
|
|
206
193
|
},
|
|
207
|
-
'&
|
|
208
|
-
|
|
209
|
-
return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
|
|
210
|
-
}
|
|
194
|
+
'& $icon, & $iconRight': {
|
|
195
|
+
fill: _colors2["default"].icon.inverse["default"]
|
|
211
196
|
},
|
|
212
197
|
'&$disabled': {
|
|
213
198
|
background: 'transparent',
|
|
214
|
-
color: _colors2["default"].text.white.secondary
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
|
|
199
|
+
color: _colors2["default"].text.white.secondary,
|
|
200
|
+
outlineColor: _colors2["default"].button.tertiary.border.inverse.disabled,
|
|
201
|
+
'& $icon, & $iconRight': {
|
|
202
|
+
fill: _colors2["default"].icon.inverse.disabled
|
|
219
203
|
}
|
|
220
204
|
}
|
|
221
205
|
},
|
|
@@ -233,20 +217,10 @@ var _default = {
|
|
|
233
217
|
}
|
|
234
218
|
}
|
|
235
219
|
},
|
|
236
|
-
'& span span': {
|
|
237
|
-
background: function background(props) {
|
|
238
|
-
return renderIcon(props, [sec]);
|
|
239
|
-
}
|
|
240
|
-
},
|
|
241
220
|
'&$disabled': {
|
|
242
221
|
background: "transparent !important",
|
|
243
222
|
color: "".concat(secLight, " !important"),
|
|
244
|
-
border: "none !important"
|
|
245
|
-
'& span span': {
|
|
246
|
-
background: function background(props) {
|
|
247
|
-
return renderIcon(props, [grey500]);
|
|
248
|
-
}
|
|
249
|
-
}
|
|
223
|
+
border: "none !important"
|
|
250
224
|
},
|
|
251
225
|
'& $loadIcon': {
|
|
252
226
|
fill: sec
|
|
@@ -261,21 +235,17 @@ var _default = {
|
|
|
261
235
|
'&:active': {
|
|
262
236
|
background: _colors2["default"].button.ghost.bg.active
|
|
263
237
|
},
|
|
264
|
-
'&:
|
|
238
|
+
'&:focus-visible': {
|
|
265
239
|
boxShadow: _shadows["default"]['focus-corp']
|
|
266
240
|
},
|
|
267
|
-
'&
|
|
268
|
-
|
|
269
|
-
return renderIcon(props, [_colors2["default"].icon["default"]["default"]]);
|
|
270
|
-
}
|
|
241
|
+
'& $icon, & $iconRight': {
|
|
242
|
+
fill: _colors2["default"].icon["default"]["default"]
|
|
271
243
|
},
|
|
272
244
|
'&$disabled': {
|
|
273
245
|
background: 'transparent',
|
|
274
|
-
color: _colors2["default"].text.corp.disabled
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
background: function background(props) {
|
|
278
|
-
return renderIcon(props, [_colors2["default"].icon["default"].disabled]);
|
|
246
|
+
color: _colors2["default"].text.corp.disabled,
|
|
247
|
+
'& $icon, & $iconRight': {
|
|
248
|
+
fill: _colors2["default"].icon["default"].disabled
|
|
279
249
|
}
|
|
280
250
|
},
|
|
281
251
|
'& $loadIcon': {
|
|
@@ -291,21 +261,17 @@ var _default = {
|
|
|
291
261
|
'&:active': {
|
|
292
262
|
background: _colors2["default"].button.ghost.bg.inverse.active
|
|
293
263
|
},
|
|
294
|
-
'&:
|
|
264
|
+
'&:focus-visible': {
|
|
295
265
|
boxShadow: _shadows["default"]['focus-white']
|
|
296
266
|
},
|
|
297
|
-
'&
|
|
298
|
-
|
|
299
|
-
return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
|
|
300
|
-
}
|
|
267
|
+
'& $icon, & $iconRight': {
|
|
268
|
+
fill: _colors2["default"].icon.inverse["default"]
|
|
301
269
|
},
|
|
302
270
|
'&$disabled': {
|
|
303
271
|
background: 'transparent',
|
|
304
|
-
color: _colors2["default"].text.white.secondary
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
background: function background(props) {
|
|
308
|
-
return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
|
|
272
|
+
color: _colors2["default"].text.white.secondary,
|
|
273
|
+
'& $icon, & $iconRight': {
|
|
274
|
+
fill: _colors2["default"].icon.inverse.disabled
|
|
309
275
|
}
|
|
310
276
|
}
|
|
311
277
|
},
|
|
@@ -346,8 +312,6 @@ var _default = {
|
|
|
346
312
|
transition: '0.3s all'
|
|
347
313
|
},
|
|
348
314
|
iconRight: {
|
|
349
|
-
width: 16,
|
|
350
|
-
height: 16,
|
|
351
315
|
marginLeft: _spacing["default"]['size-2'],
|
|
352
316
|
display: 'inline-block',
|
|
353
317
|
transition: '0.3s all'
|
|
@@ -355,7 +319,8 @@ var _default = {
|
|
|
355
319
|
iconOnly: {
|
|
356
320
|
padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']],
|
|
357
321
|
'& span span, & svg': {
|
|
358
|
-
marginRight: 0
|
|
322
|
+
marginRight: 0,
|
|
323
|
+
marginLeft: 0
|
|
359
324
|
}
|
|
360
325
|
},
|
|
361
326
|
loadIcon: {
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`FAB matches the snapshot 1`] = `
|
|
4
4
|
<button
|
|
5
|
-
className="Button-btn-0-1-
|
|
5
|
+
className="Button-btn-0-1-22 Button-btn-0-1-1 Button-tertiary-0-1-27 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
|
|
6
6
|
>
|
|
7
7
|
<span
|
|
8
|
-
className="Button-cont-0-1-
|
|
8
|
+
className="Button-cont-0-1-23 Button-cont-0-1-2"
|
|
9
9
|
>
|
|
10
10
|
<span
|
|
11
11
|
className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"
|
package/package.json
CHANGED