@occmundial/occ-atomic 2.0.1 → 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,10 @@
|
|
|
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
|
+
|
|
1
8
|
## [2.0.1](https://github.com/occmundial/occ-atomic/compare/v2.0.0...v2.0.1) (2024-06-12)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -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 [
|
|
@@ -197,29 +192,29 @@ Object {
|
|
|
197
192
|
],
|
|
198
193
|
},
|
|
199
194
|
"primary": Object {
|
|
200
|
-
"&
|
|
201
|
-
"
|
|
195
|
+
"& $icon, & $iconRight": Object {
|
|
196
|
+
"fill": "#fff",
|
|
202
197
|
},
|
|
203
198
|
"&$disabled": Object {
|
|
199
|
+
"& $icon, & $iconRight": Object {
|
|
200
|
+
"fill": "rgba(255,255,255,0.3)",
|
|
201
|
+
},
|
|
204
202
|
"background": "#F6809E",
|
|
205
203
|
"color": "rgba(255,255,255,0.7)",
|
|
206
204
|
"cursor": "not-allowed",
|
|
207
205
|
},
|
|
208
|
-
"&$disabled span span": Object {
|
|
209
|
-
"background": [Function],
|
|
210
|
-
},
|
|
211
206
|
"&:active": Object {
|
|
212
207
|
"background": "#821C36",
|
|
213
208
|
},
|
|
214
209
|
"&:focus": Object {
|
|
215
210
|
"outline": "2px solid rgba(255,255,255,0.2)",
|
|
216
211
|
},
|
|
212
|
+
"&:focus-visible": Object {
|
|
213
|
+
"boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
|
|
214
|
+
},
|
|
217
215
|
"&:hover": Object {
|
|
218
216
|
"background": "#A32444",
|
|
219
217
|
},
|
|
220
|
-
"&:not(:active):focus-visible": Object {
|
|
221
|
-
"boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
|
|
222
|
-
},
|
|
223
218
|
"background": "#D32E58",
|
|
224
219
|
"color": "#fff",
|
|
225
220
|
"outline": "2px solid rgba(255,255,255,0.2)",
|
|
@@ -229,45 +224,45 @@ Object {
|
|
|
229
224
|
"borderRadius": "50%",
|
|
230
225
|
},
|
|
231
226
|
"secondary": Object {
|
|
232
|
-
"& $
|
|
227
|
+
"& $icon, & $iconRight": Object {
|
|
233
228
|
"fill": "#083CAE",
|
|
234
229
|
},
|
|
235
|
-
"&
|
|
236
|
-
"
|
|
230
|
+
"& $loadIcon": Object {
|
|
231
|
+
"fill": "#083CAE",
|
|
237
232
|
},
|
|
238
233
|
"&$disabled": Object {
|
|
234
|
+
"& $icon, & $iconRight": Object {
|
|
235
|
+
"fill": "#8DA5DA",
|
|
236
|
+
},
|
|
239
237
|
"background": "hsl(221 91.2% 35.7% / 0.1)",
|
|
240
238
|
"color": "#486EC3",
|
|
241
239
|
},
|
|
242
|
-
"&$disabled span span": Object {
|
|
243
|
-
"background": [Function],
|
|
244
|
-
},
|
|
245
240
|
"&:active": Object {
|
|
246
241
|
"background": "hsl(221 91.2% 35.7% / 0.2)",
|
|
247
242
|
},
|
|
243
|
+
"&:focus-visible": Object {
|
|
244
|
+
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
|
245
|
+
},
|
|
248
246
|
"&:hover": Object {
|
|
249
247
|
"background": "hsl(221 91.2% 35.7% / 0.1)",
|
|
250
248
|
},
|
|
251
|
-
"&:not(:active):focus-visible": Object {
|
|
252
|
-
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
|
253
|
-
},
|
|
254
249
|
"background": "hsl(221 91.2% 35.7% / 0.05)",
|
|
255
250
|
"color": "#083CAE",
|
|
256
251
|
},
|
|
257
252
|
"tertiary": Object {
|
|
258
|
-
"& $
|
|
253
|
+
"& $icon, & $iconRight": Object {
|
|
259
254
|
"fill": "#083CAE",
|
|
260
255
|
},
|
|
261
|
-
"&
|
|
262
|
-
"
|
|
256
|
+
"& $loadIcon": Object {
|
|
257
|
+
"fill": "#083CAE",
|
|
263
258
|
},
|
|
264
259
|
"&$disabled": Object {
|
|
260
|
+
"& $icon, & $iconRight": Object {
|
|
261
|
+
"fill": "#8DA5DA",
|
|
262
|
+
},
|
|
265
263
|
"background": "transparent",
|
|
266
264
|
"color": "#486EC3",
|
|
267
|
-
"
|
|
268
|
-
},
|
|
269
|
-
"&$disabled span span": Object {
|
|
270
|
-
"background": [Function],
|
|
265
|
+
"outlineColor": "#8DA5DA",
|
|
271
266
|
},
|
|
272
267
|
"&:active": Object {
|
|
273
268
|
"background": "hsl(221 91.2% 35.7% / 0.1)",
|
|
@@ -275,27 +270,28 @@ Object {
|
|
|
275
270
|
"&:focus": Object {
|
|
276
271
|
"outline": "2px solid #083CAE",
|
|
277
272
|
},
|
|
273
|
+
"&:focus-visible": Object {
|
|
274
|
+
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
|
275
|
+
},
|
|
278
276
|
"&:hover": Object {
|
|
279
277
|
"background": "hsl(221 91.2% 35.7% / 0.05)",
|
|
280
278
|
},
|
|
281
|
-
"&:not(:active):focus-visible": Object {
|
|
282
|
-
"boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
|
|
283
|
-
},
|
|
284
279
|
"background": "transparent",
|
|
285
280
|
"color": "#083CAE",
|
|
286
281
|
"outline": "2px solid #083CAE",
|
|
287
282
|
"outlineOffset": "-2px",
|
|
288
283
|
},
|
|
289
284
|
"tertiaryWhite": Object {
|
|
290
|
-
"&
|
|
291
|
-
"
|
|
285
|
+
"& $icon, & $iconRight": Object {
|
|
286
|
+
"fill": "#fff",
|
|
292
287
|
},
|
|
293
288
|
"&$disabled": Object {
|
|
289
|
+
"& $icon, & $iconRight": Object {
|
|
290
|
+
"fill": "rgba(255,255,255,0.3)",
|
|
291
|
+
},
|
|
294
292
|
"background": "transparent",
|
|
295
293
|
"color": "rgba(255,255,255,0.7)",
|
|
296
|
-
|
|
297
|
-
"&$disabled span span": Object {
|
|
298
|
-
"background": [Function],
|
|
294
|
+
"outlineColor": "rgba(255,255,255,0.2)",
|
|
299
295
|
},
|
|
300
296
|
"&:active": Object {
|
|
301
297
|
"background": "rgba(255,255,255,0.1)",
|
|
@@ -303,12 +299,12 @@ Object {
|
|
|
303
299
|
"&:focus": Object {
|
|
304
300
|
"outline": "2px solid #fff",
|
|
305
301
|
},
|
|
302
|
+
"&:focus-visible": Object {
|
|
303
|
+
"boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
|
|
304
|
+
},
|
|
306
305
|
"&:hover": Object {
|
|
307
306
|
"background": "rgba(255,255,255,0.05)",
|
|
308
307
|
},
|
|
309
|
-
"&:not(:active):focus-visible": Object {
|
|
310
|
-
"boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
|
|
311
|
-
},
|
|
312
308
|
"background": "transparent",
|
|
313
309
|
"color": "#fff",
|
|
314
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
|
},
|
|
@@ -353,7 +319,8 @@ var _default = {
|
|
|
353
319
|
iconOnly: {
|
|
354
320
|
padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']],
|
|
355
321
|
'& span span, & svg': {
|
|
356
|
-
marginRight: 0
|
|
322
|
+
marginRight: 0,
|
|
323
|
+
marginLeft: 0
|
|
357
324
|
}
|
|
358
325
|
},
|
|
359
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