@daffodil/design 0.60.0 → 0.61.0
Sign up to get free protection for your applications and to get access to all the features.
- package/accordion/examples/package.json +1 -1
- package/article/examples/package.json +1 -1
- package/atoms/button/button.component.d.ts +18 -2
- package/atoms/button/button.module.d.ts +2 -1
- package/atoms/form/error-message/error-message.component.d.ts +1 -0
- package/atoms/form/form-label/form-label.directive.d.ts +6 -0
- package/atoms/form/form-label/form-label.module.d.ts +7 -0
- package/atoms/form/form-label/public_api.d.ts +2 -0
- package/atoms/form/{select/select/select.component.d.ts → native-select/native-select.component.d.ts} +1 -1
- package/atoms/form/{select/select.module.d.ts → native-select/native-select.module.d.ts} +1 -1
- package/atoms/form/native-select/public_api.d.ts +2 -0
- package/atoms/form/quantity-field/quantity-field.module.d.ts +1 -1
- package/atoms/form/quantity-field/quantity-select/quantity-select.component.d.ts +1 -1
- package/atoms/loading-icon/loading-icon.component.d.ts +3 -3
- package/button/examples/examples.d.ts +4 -0
- package/button/examples/flat-button/flat-button.component.d.ts +7 -0
- package/button/examples/flat-button/flat-button.module.d.ts +9 -0
- package/button/examples/package.json +1 -1
- package/button/examples/public_api.d.ts +10 -9
- package/callout/examples/package.json +1 -1
- package/card/examples/package.json +1 -1
- package/checkbox/examples/package.json +1 -1
- package/container/examples/package.json +1 -1
- package/core/public_api.d.ts +2 -2
- package/core/statusable/public_api.d.ts +2 -0
- package/esm2020/atoms/button/button.component.mjs +62 -5
- package/esm2020/atoms/button/button.module.mjs +6 -2
- package/esm2020/atoms/form/error-message/error-message.component.mjs +10 -4
- package/esm2020/atoms/form/form-label/form-label.directive.mjs +19 -0
- package/esm2020/atoms/form/form-label/form-label.module.mjs +20 -0
- package/esm2020/atoms/form/form-label/public_api.mjs +3 -0
- package/esm2020/atoms/form/native-select/native-select.component.mjs +64 -0
- package/esm2020/atoms/form/{select/select.module.mjs → native-select/native-select.module.mjs} +2 -2
- package/esm2020/atoms/form/native-select/public_api.mjs +3 -0
- package/esm2020/atoms/form/quantity-field/quantity-field.module.mjs +2 -2
- package/esm2020/atoms/form/quantity-field/quantity-select/quantity-select.component.mjs +3 -3
- package/esm2020/atoms/image/image.component.mjs +2 -2
- package/esm2020/atoms/loading-icon/loading-icon.component.mjs +4 -5
- package/esm2020/button/examples/basic-button/basic-button.component.mjs +7 -6
- package/esm2020/button/examples/examples.mjs +19 -0
- package/esm2020/button/examples/flat-button/flat-button.component.mjs +24 -0
- package/esm2020/button/examples/flat-button/flat-button.module.mjs +30 -0
- package/esm2020/button/examples/icon-button/icon-button.component.mjs +6 -5
- package/esm2020/button/examples/public_api.mjs +11 -18
- package/esm2020/button/examples/raised-button/raised-button.component.mjs +7 -6
- package/esm2020/button/examples/sizeable-button/sizeable-button.component.mjs +3 -7
- package/esm2020/button/examples/statusable-button/statusable-button.component.mjs +3 -11
- package/esm2020/button/examples/stroked-button/stroked-button.component.mjs +7 -6
- package/esm2020/button/examples/underline-button/underline-button.component.mjs +7 -6
- package/esm2020/button/examples/underline-button/underline-button.module.mjs +1 -1
- package/esm2020/callout/examples/callout-text-alignment/callout-text-alignment.component.mjs +1 -1
- package/esm2020/callout/examples/callout-theming/callout-theming.component.mjs +1 -1
- package/esm2020/callout/examples/callout-with-grid/callout-with-grid.component.mjs +1 -1
- package/esm2020/callout/examples/compact-callout/compact-callout.component.mjs +1 -1
- package/esm2020/card/examples/basic-card/basic-card.component.mjs +1 -1
- package/esm2020/card/examples/card-orientation/card-orientation.component.mjs +1 -1
- package/esm2020/checkbox/examples/basic-checkbox/basic-checkbox.component.mjs +1 -1
- package/esm2020/checkbox/examples/checkbox-set/checkbox-set.component.mjs +1 -1
- package/esm2020/core/public_api.mjs +3 -3
- package/esm2020/core/statusable/public_api.mjs +3 -0
- package/esm2020/hero/examples/compact-hero/compact-hero.component.mjs +1 -1
- package/esm2020/hero/examples/hero-text-alignment/hero-text-alignment.component.mjs +1 -1
- package/esm2020/hero/examples/hero-theming/hero-theming.component.mjs +1 -1
- package/esm2020/hero/examples/hero-with-grid/hero-with-grid.component.mjs +1 -1
- package/esm2020/menu/examples/basic-menu/basic-menu.component.mjs +1 -1
- package/esm2020/modal/examples/basic-modal/basic-modal.component.mjs +1 -1
- package/esm2020/modal/examples/basic-modal/modal-content.component.mjs +1 -1
- package/esm2020/molecules/media-gallery/media-gallery.component.mjs +2 -2
- package/esm2020/molecules/qty-dropdown/qty-dropdown.component.mjs +1 -1
- package/esm2020/molecules/qty-dropdown/qty-dropdown.module.mjs +2 -2
- package/esm2020/navbar/examples/basic-navbar/basic-navbar.component.mjs +1 -1
- package/esm2020/navbar/examples/contained-navbar/contained-navbar.component.mjs +1 -1
- package/esm2020/navbar/examples/navbar-theming/navbar-theming.component.mjs +1 -1
- package/esm2020/navbar/examples/raised-navbar/raised-navbar.component.mjs +1 -1
- package/esm2020/public_api.mjs +3 -2
- package/fesm2015/daffodil-design-button-examples.mjs +160 -122
- package/fesm2015/daffodil-design-button-examples.mjs.map +1 -1
- package/fesm2015/daffodil-design-callout-examples.mjs +4 -4
- package/fesm2015/daffodil-design-callout-examples.mjs.map +1 -1
- package/fesm2015/daffodil-design-card-examples.mjs +2 -2
- package/fesm2015/daffodil-design-card-examples.mjs.map +1 -1
- package/fesm2015/daffodil-design-checkbox-examples.mjs +2 -2
- package/fesm2015/daffodil-design-checkbox-examples.mjs.map +1 -1
- package/fesm2015/daffodil-design-hero-examples.mjs +4 -4
- package/fesm2015/daffodil-design-hero-examples.mjs.map +1 -1
- package/fesm2015/daffodil-design-menu-examples.mjs +1 -1
- package/fesm2015/daffodil-design-menu-examples.mjs.map +1 -1
- package/fesm2015/daffodil-design-modal-examples.mjs +2 -2
- package/fesm2015/daffodil-design-modal-examples.mjs.map +1 -1
- package/fesm2015/daffodil-design-navbar-examples.mjs +4 -4
- package/fesm2015/daffodil-design-navbar-examples.mjs.map +1 -1
- package/fesm2015/daffodil-design.mjs +191 -94
- package/fesm2015/daffodil-design.mjs.map +1 -1
- package/fesm2020/daffodil-design-button-examples.mjs +160 -122
- package/fesm2020/daffodil-design-button-examples.mjs.map +1 -1
- package/fesm2020/daffodil-design-callout-examples.mjs +4 -4
- package/fesm2020/daffodil-design-callout-examples.mjs.map +1 -1
- package/fesm2020/daffodil-design-card-examples.mjs +2 -2
- package/fesm2020/daffodil-design-card-examples.mjs.map +1 -1
- package/fesm2020/daffodil-design-checkbox-examples.mjs +2 -2
- package/fesm2020/daffodil-design-checkbox-examples.mjs.map +1 -1
- package/fesm2020/daffodil-design-hero-examples.mjs +4 -4
- package/fesm2020/daffodil-design-hero-examples.mjs.map +1 -1
- package/fesm2020/daffodil-design-menu-examples.mjs +1 -1
- package/fesm2020/daffodil-design-menu-examples.mjs.map +1 -1
- package/fesm2020/daffodil-design-modal-examples.mjs +2 -2
- package/fesm2020/daffodil-design-modal-examples.mjs.map +1 -1
- package/fesm2020/daffodil-design-navbar-examples.mjs +4 -4
- package/fesm2020/daffodil-design-navbar-examples.mjs.map +1 -1
- package/fesm2020/daffodil-design.mjs +191 -94
- package/fesm2020/daffodil-design.mjs.map +1 -1
- package/hero/examples/package.json +1 -1
- package/image/examples/package.json +1 -1
- package/input/examples/package.json +1 -1
- package/list/examples/package.json +1 -1
- package/loading-icon/examples/package.json +1 -1
- package/media-gallery/examples/package.json +1 -1
- package/menu/examples/package.json +1 -1
- package/modal/examples/package.json +1 -1
- package/molecules/qty-dropdown/qty-dropdown.module.d.ts +1 -1
- package/navbar/examples/package.json +1 -1
- package/package.json +1 -1
- package/paginator/examples/package.json +1 -1
- package/public_api.d.ts +2 -1
- package/quantity-field/examples/package.json +1 -1
- package/radio/examples/package.json +1 -1
- package/scss/state/skeleton/_mixins.scss +1 -0
- package/scss/theme.scss +2 -2
- package/scss/theming/_color-palettes.scss +5 -5
- package/src/atoms/button/button-theme-variants/button.scss +9 -18
- package/src/atoms/button/button-theme-variants/flat.scss +25 -0
- package/src/atoms/button/button-theme-variants/raised.scss +6 -26
- package/src/atoms/button/button-theme-variants/stroked.scss +12 -20
- package/src/atoms/button/button-theme.scss +121 -117
- package/src/atoms/form/{select → native-select}/README.md +1 -1
- package/src/atoms/form/{select/select/select-theme.scss → native-select/native-select-theme.scss} +3 -3
- package/src/atoms/loading-icon/loading-icon-theme.scss +4 -0
- package/atoms/form/select/public_api.d.ts +0 -2
- package/esm2020/atoms/form/select/public_api.mjs +0 -3
- package/esm2020/atoms/form/select/select/select.component.mjs +0 -64
- package/src/atoms/button/button-theme-variants/focus.scss +0 -6
@@ -6,7 +6,7 @@
|
|
6
6
|
@use './button-theme-variants/raised';
|
7
7
|
@use './button-theme-variants/stroked';
|
8
8
|
@use './button-theme-variants/underline';
|
9
|
-
@use './button-theme-variants/
|
9
|
+
@use './button-theme-variants/flat';
|
10
10
|
|
11
11
|
@mixin daff-button-theme($theme) {
|
12
12
|
$primary: map.get($theme, primary);
|
@@ -52,8 +52,8 @@
|
|
52
52
|
&.daff-black {
|
53
53
|
@include button.daff-button-theme-variant(
|
54
54
|
$black,
|
55
|
-
theming.daff-color($gray,
|
56
|
-
theming.daff-color($gray,
|
55
|
+
theming.daff-color($gray, 90),
|
56
|
+
theming.daff-color($gray, 80)
|
57
57
|
);
|
58
58
|
}
|
59
59
|
|
@@ -81,7 +81,8 @@
|
|
81
81
|
);
|
82
82
|
}
|
83
83
|
|
84
|
-
&[disabled]
|
84
|
+
&[disabled],
|
85
|
+
&.daff-button--disabled {
|
85
86
|
@include button.daff-button-theme-variant(
|
86
87
|
theming.daff-illuminate($base, $gray, 3),
|
87
88
|
theming.daff-illuminate($base, $gray, 3),
|
@@ -121,101 +122,69 @@
|
|
121
122
|
|
122
123
|
.daff-raised-button {
|
123
124
|
@include raised.daff-raised-button-theme-variant(
|
124
|
-
theming.daff-illuminate($base, $gray, 2)
|
125
|
-
theming.daff-illuminate($base, $gray, 3),
|
126
|
-
theming.daff-color($gray)
|
125
|
+
theming.daff-illuminate($base, $gray, 2)
|
127
126
|
);
|
128
127
|
|
129
128
|
&.daff-primary {
|
130
129
|
@include raised.daff-raised-button-theme-variant(
|
131
|
-
theming.daff-color($primary),
|
132
|
-
theming.daff-color($primary, 70),
|
133
130
|
theming.daff-color($primary)
|
134
131
|
);
|
135
132
|
}
|
136
133
|
|
137
134
|
&.daff-secondary {
|
138
135
|
@include raised.daff-raised-button-theme-variant(
|
139
|
-
theming.daff-color($secondary),
|
140
|
-
theming.daff-color($secondary, 70),
|
141
136
|
theming.daff-color($secondary)
|
142
137
|
);
|
143
138
|
}
|
144
|
-
|
139
|
+
|
145
140
|
&.daff-tertiary {
|
146
141
|
@include raised.daff-raised-button-theme-variant(
|
147
|
-
theming.daff-color($tertiary),
|
148
|
-
theming.daff-color($tertiary, 70),
|
149
142
|
theming.daff-color($tertiary)
|
150
143
|
);
|
151
144
|
}
|
152
145
|
|
153
146
|
&.daff-black {
|
154
|
-
@include raised.daff-raised-button-theme-variant(
|
155
|
-
$black,
|
156
|
-
theming.daff-color($gray, 100),
|
157
|
-
theming.daff-color($gray)
|
158
|
-
);
|
147
|
+
@include raised.daff-raised-button-theme-variant($black);
|
159
148
|
}
|
160
149
|
|
161
150
|
&.daff-white {
|
162
|
-
@include raised.daff-raised-button-theme-variant(
|
163
|
-
$white,
|
164
|
-
theming.daff-color($gray, 10),
|
165
|
-
theming.daff-color($gray)
|
166
|
-
);
|
151
|
+
@include raised.daff-raised-button-theme-variant($white);
|
167
152
|
}
|
168
153
|
|
169
154
|
&.daff-theme {
|
170
|
-
@include raised.daff-raised-button-theme-variant(
|
171
|
-
$base,
|
172
|
-
theming.daff-illuminate($base, $gray, 1),
|
173
|
-
$base
|
174
|
-
);
|
155
|
+
@include raised.daff-raised-button-theme-variant($base);
|
175
156
|
}
|
176
157
|
|
177
158
|
&.daff-theme-contrast {
|
178
|
-
@include raised.daff-raised-button-theme-variant(
|
179
|
-
$base-contrast,
|
180
|
-
theming.daff-illuminate($base-contrast, $gray, 1),
|
181
|
-
$base-contrast
|
182
|
-
);
|
159
|
+
@include raised.daff-raised-button-theme-variant($base-contrast);
|
183
160
|
}
|
184
161
|
|
185
|
-
&[disabled]
|
162
|
+
&[disabled],
|
163
|
+
&.daff-button--disabled {
|
186
164
|
@include raised.daff-raised-button-theme-variant(
|
187
|
-
theming.daff-illuminate($base, $gray, 3)
|
188
|
-
theming.daff-illuminate($base, $gray, 3),
|
189
|
-
theming.daff-illuminate($base, $gray, 6)
|
165
|
+
theming.daff-illuminate($base, $gray, 3)
|
190
166
|
);
|
191
167
|
color: theming.daff-illuminate($base, $gray, 5);
|
192
168
|
|
193
|
-
&:
|
194
|
-
box-shadow:
|
195
|
-
color: theming.daff-illuminate($base, $gray, 5);
|
169
|
+
&:after {
|
170
|
+
box-shadow: none;
|
196
171
|
}
|
197
172
|
}
|
198
173
|
|
199
174
|
&.daff-warn {
|
200
175
|
@include raised.daff-raised-button-theme-variant(
|
201
|
-
theming.daff-color(theming.$daff-bronze, 60),
|
202
|
-
theming.daff-color(theming.$daff-bronze, 70),
|
203
176
|
theming.daff-color(theming.$daff-bronze, 60)
|
204
177
|
);
|
205
178
|
}
|
206
179
|
|
207
180
|
&.daff-danger {
|
208
181
|
@include raised.daff-raised-button-theme-variant(
|
209
|
-
theming.daff-color(theming.$daff-red, 60),
|
210
|
-
theming.daff-color(theming.$daff-red, 70),
|
211
182
|
theming.daff-color(theming.$daff-red, 60)
|
212
183
|
);
|
213
184
|
}
|
214
185
|
|
215
186
|
&.daff-success {
|
216
187
|
@include raised.daff-raised-button-theme-variant(
|
217
|
-
theming.daff-color(theming.$daff-green, 60),
|
218
|
-
theming.daff-color(theming.$daff-green, 70),
|
219
188
|
theming.daff-color(theming.$daff-green, 60)
|
220
189
|
);
|
221
190
|
}
|
@@ -283,8 +252,9 @@
|
|
283
252
|
theming.daff-illuminate($base-contrast, $gray, 2)
|
284
253
|
);
|
285
254
|
}
|
286
|
-
|
287
|
-
&[disabled]
|
255
|
+
|
256
|
+
&[disabled],
|
257
|
+
&.daff-button--disabled {
|
288
258
|
@include icon.daff-icon-button-theme-variant(
|
289
259
|
theming.daff-illuminate($base, $gray, 4),
|
290
260
|
theming.daff-illuminate($base, $gray, 4),
|
@@ -322,13 +292,15 @@ z
|
|
322
292
|
}
|
323
293
|
|
324
294
|
.daff-stroked-button {
|
325
|
-
background
|
295
|
+
background: transparent;
|
326
296
|
border: 1px solid theming.daff-illuminate($base, $gray, 5);
|
327
|
-
color:
|
297
|
+
color: currentColor;
|
328
298
|
|
329
|
-
&:
|
330
|
-
|
331
|
-
|
299
|
+
&:after {
|
300
|
+
background: theming.daff-illuminate($base, $gray, 2);
|
301
|
+
}
|
302
|
+
|
303
|
+
&:hover {
|
332
304
|
border: 1px solid theming.daff-illuminate($base, $gray, 2);
|
333
305
|
color: theming.daff-text-contrast(
|
334
306
|
theming.daff-illuminate($base, $gray, 2)
|
@@ -336,16 +308,18 @@ z
|
|
336
308
|
}
|
337
309
|
|
338
310
|
&:active {
|
339
|
-
background-color: theming.daff-illuminate($base, $gray, 3);
|
340
311
|
border: 1px solid theming.daff-illuminate($base, $gray, 3);
|
341
312
|
color: theming.daff-text-contrast(
|
342
313
|
theming.daff-illuminate($base, $gray, 3)
|
343
314
|
);
|
315
|
+
|
316
|
+
&:after {
|
317
|
+
background: theming.daff-illuminate($base, $gray, 3);
|
318
|
+
}
|
344
319
|
}
|
345
320
|
|
346
321
|
&.daff-primary {
|
347
322
|
@include stroked.daff-stroked-button-theme-variant(
|
348
|
-
theming.daff-color($primary),
|
349
323
|
theming.daff-color($primary),
|
350
324
|
theming.daff-color($primary, 70)
|
351
325
|
);
|
@@ -353,7 +327,6 @@ z
|
|
353
327
|
|
354
328
|
&.daff-secondary {
|
355
329
|
@include stroked.daff-stroked-button-theme-variant(
|
356
|
-
theming.daff-color($secondary),
|
357
330
|
theming.daff-color($secondary),
|
358
331
|
theming.daff-color($secondary, 70)
|
359
332
|
);
|
@@ -361,7 +334,6 @@ z
|
|
361
334
|
|
362
335
|
&.daff-tertiary {
|
363
336
|
@include stroked.daff-stroked-button-theme-variant(
|
364
|
-
theming.daff-color($tertiary),
|
365
337
|
theming.daff-color($tertiary),
|
366
338
|
theming.daff-color($tertiary, 70)
|
367
339
|
);
|
@@ -369,7 +341,6 @@ z
|
|
369
341
|
|
370
342
|
&.daff-black {
|
371
343
|
@include stroked.daff-stroked-button-theme-variant(
|
372
|
-
$black,
|
373
344
|
$black,
|
374
345
|
theming.daff-color($gray, 100)
|
375
346
|
);
|
@@ -377,7 +348,6 @@ z
|
|
377
348
|
|
378
349
|
&.daff-white {
|
379
350
|
@include stroked.daff-stroked-button-theme-variant(
|
380
|
-
$white,
|
381
351
|
$white,
|
382
352
|
theming.daff-color($gray, 20)
|
383
353
|
);
|
@@ -385,7 +355,6 @@ z
|
|
385
355
|
|
386
356
|
&.daff-theme {
|
387
357
|
@include stroked.daff-stroked-button-theme-variant(
|
388
|
-
$base,
|
389
358
|
$base,
|
390
359
|
theming.daff-illuminate($base, $gray, 2)
|
391
360
|
);
|
@@ -393,28 +362,29 @@ z
|
|
393
362
|
|
394
363
|
&.daff-theme-contrast {
|
395
364
|
@include stroked.daff-stroked-button-theme-variant(
|
396
|
-
$base-contrast,
|
397
365
|
$base-contrast,
|
398
366
|
theming.daff-illuminate($base-contrast, $gray, 2)
|
399
367
|
);
|
400
368
|
}
|
401
369
|
|
402
|
-
&[disabled]
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
);
|
370
|
+
&[disabled],
|
371
|
+
&.daff-button--disabled {
|
372
|
+
background-color: transparent;
|
373
|
+
border-color: theming.daff-illuminate($base, $gray, 3);
|
374
|
+
color: theming.daff-illuminate($base, $gray, 5);
|
408
375
|
|
409
376
|
&:hover {
|
410
|
-
background-color: transparent;
|
411
377
|
color: theming.daff-illuminate($base, $gray, 5);
|
378
|
+
|
379
|
+
&:after {
|
380
|
+
background-color: transparent;
|
381
|
+
opacity: 0;
|
382
|
+
}
|
412
383
|
}
|
413
384
|
}
|
414
385
|
|
415
386
|
&.daff-warn {
|
416
387
|
@include stroked.daff-stroked-button-theme-variant(
|
417
|
-
theming.daff-color(theming.$daff-bronze, 60),
|
418
388
|
theming.daff-color(theming.$daff-bronze, 60),
|
419
389
|
theming.daff-color(theming.$daff-bronze, 70)
|
420
390
|
);
|
@@ -422,7 +392,6 @@ z
|
|
422
392
|
|
423
393
|
&.daff-danger {
|
424
394
|
@include stroked.daff-stroked-button-theme-variant(
|
425
|
-
theming.daff-color(theming.$daff-red, 60),
|
426
395
|
theming.daff-color(theming.$daff-red, 60),
|
427
396
|
theming.daff-color(theming.$daff-red, 70)
|
428
397
|
);
|
@@ -430,139 +399,174 @@ z
|
|
430
399
|
|
431
400
|
&.daff-success {
|
432
401
|
@include stroked.daff-stroked-button-theme-variant(
|
433
|
-
theming.daff-color(theming.$daff-green, 60),
|
434
402
|
theming.daff-color(theming.$daff-green, 60),
|
435
403
|
theming.daff-color(theming.$daff-green, 70)
|
436
404
|
);
|
437
405
|
}
|
438
406
|
}
|
439
407
|
|
440
|
-
.daff-
|
441
|
-
|
442
|
-
|
443
|
-
|
408
|
+
.daff-flat-button {
|
409
|
+
color: currentColor;
|
410
|
+
|
411
|
+
&:after {
|
412
|
+
background-color: theming.daff-illuminate($base, $gray, 2);
|
413
|
+
}
|
414
|
+
|
415
|
+
&:active {
|
416
|
+
&:after {
|
417
|
+
background-color: theming.daff-illuminate($base, $gray, 3);
|
418
|
+
}
|
419
|
+
}
|
420
|
+
|
421
|
+
&:hover,
|
422
|
+
&:active {
|
423
|
+
color: theming.daff-text-contrast(theming.daff-illuminate($base, $gray, 2));
|
424
|
+
}
|
444
425
|
|
445
426
|
&.daff-primary {
|
446
|
-
@include
|
447
|
-
theming.daff-color($primary)
|
427
|
+
@include flat.daff-flat-button-theme-variant(
|
428
|
+
theming.daff-color($primary),
|
429
|
+
theming.daff-color($primary, 70)
|
448
430
|
);
|
449
431
|
}
|
450
432
|
|
451
433
|
&.daff-secondary {
|
452
|
-
@include
|
453
|
-
theming.daff-color($secondary)
|
434
|
+
@include flat.daff-flat-button-theme-variant(
|
435
|
+
theming.daff-color($secondary),
|
436
|
+
theming.daff-color($secondary, 70)
|
454
437
|
);
|
455
438
|
}
|
456
439
|
|
457
440
|
&.daff-tertiary {
|
458
|
-
@include
|
459
|
-
theming.daff-color($tertiary)
|
441
|
+
@include flat.daff-flat-button-theme-variant(
|
442
|
+
theming.daff-color($tertiary),
|
443
|
+
theming.daff-color($tertiary, 70)
|
460
444
|
);
|
461
445
|
}
|
462
446
|
|
463
447
|
&.daff-black {
|
464
|
-
@include
|
448
|
+
@include flat.daff-flat-button-theme-variant(
|
449
|
+
$black,
|
450
|
+
theming.daff-color($gray, 100)
|
451
|
+
);
|
465
452
|
}
|
466
453
|
|
467
454
|
&.daff-white {
|
468
|
-
@include
|
455
|
+
@include flat.daff-flat-button-theme-variant(
|
456
|
+
$white,
|
457
|
+
theming.daff-color($gray, 20)
|
458
|
+
);
|
469
459
|
}
|
470
460
|
|
471
461
|
&.daff-theme {
|
472
|
-
@include
|
462
|
+
@include flat.daff-flat-button-theme-variant(
|
463
|
+
$base,
|
464
|
+
theming.daff-illuminate($base, $gray, 2)
|
465
|
+
);
|
473
466
|
}
|
474
467
|
|
475
468
|
&.daff-theme-contrast {
|
476
|
-
@include
|
469
|
+
@include flat.daff-flat-button-theme-variant(
|
470
|
+
$base-contrast,
|
471
|
+
theming.daff-illuminate($base-contrast, $gray, 2)
|
472
|
+
);
|
477
473
|
}
|
478
474
|
|
479
|
-
&[disabled]
|
480
|
-
|
481
|
-
|
482
|
-
|
475
|
+
&[disabled],
|
476
|
+
&.daff-button--disabled {
|
477
|
+
color: theming.daff-illuminate($base, $gray, 5);
|
478
|
+
|
479
|
+
&:hover,
|
480
|
+
&:focus,
|
481
|
+
&:active {
|
482
|
+
&:after {
|
483
|
+
background: transparent;
|
484
|
+
}
|
485
|
+
}
|
483
486
|
}
|
484
487
|
|
485
488
|
&.daff-warn {
|
486
|
-
@include
|
487
|
-
theming.daff-color(theming.$daff-bronze, 60)
|
489
|
+
@include flat.daff-flat-button-theme-variant(
|
490
|
+
theming.daff-color(theming.$daff-bronze, 60),
|
491
|
+
theming.daff-color(theming.$daff-bronze, 70)
|
488
492
|
);
|
489
493
|
}
|
490
494
|
|
491
495
|
&.daff-danger {
|
492
|
-
@include
|
493
|
-
theming.daff-color(theming.$daff-red, 60)
|
496
|
+
@include flat.daff-flat-button-theme-variant(
|
497
|
+
theming.daff-color(theming.$daff-red, 60),
|
498
|
+
theming.daff-color(theming.$daff-red, 70)
|
494
499
|
);
|
495
500
|
}
|
496
501
|
|
497
502
|
&.daff-success {
|
498
|
-
@include
|
499
|
-
theming.daff-color(theming.$daff-green, 60)
|
503
|
+
@include flat.daff-flat-button-theme-variant(
|
504
|
+
theming.daff-color(theming.$daff-green, 60),
|
505
|
+
theming.daff-color(theming.$daff-green, 70)
|
500
506
|
);
|
501
507
|
}
|
502
508
|
}
|
503
509
|
|
504
|
-
.daff-button
|
505
|
-
|
506
|
-
|
507
|
-
.daff-icon-button {
|
508
|
-
@include focus.daff-button-focus-theme-variant(
|
509
|
-
theming.daff-color($gray)
|
510
|
+
.daff-underline-button {
|
511
|
+
@include underline.daff-underline-button-theme-variant(
|
512
|
+
theming.daff-illuminate($base, $gray, 7)
|
510
513
|
);
|
511
514
|
|
512
515
|
&.daff-primary {
|
513
|
-
@include
|
516
|
+
@include underline.daff-underline-button-theme-variant(
|
514
517
|
theming.daff-color($primary)
|
515
518
|
);
|
516
519
|
}
|
517
520
|
|
518
521
|
&.daff-secondary {
|
519
|
-
@include
|
522
|
+
@include underline.daff-underline-button-theme-variant(
|
520
523
|
theming.daff-color($secondary)
|
521
524
|
);
|
522
525
|
}
|
523
526
|
|
524
527
|
&.daff-tertiary {
|
525
|
-
@include
|
528
|
+
@include underline.daff-underline-button-theme-variant(
|
526
529
|
theming.daff-color($tertiary)
|
527
530
|
);
|
528
531
|
}
|
529
532
|
|
530
533
|
&.daff-black {
|
531
|
-
@include
|
532
|
-
theming.daff-color($gray)
|
533
|
-
);
|
534
|
+
@include underline.daff-underline-button-theme-variant($black);
|
534
535
|
}
|
535
536
|
|
536
537
|
&.daff-white {
|
537
|
-
@include
|
538
|
-
theming.daff-color($gray)
|
539
|
-
);
|
538
|
+
@include underline.daff-underline-button-theme-variant($white);
|
540
539
|
}
|
541
540
|
|
542
541
|
&.daff-theme {
|
543
|
-
@include
|
542
|
+
@include underline.daff-underline-button-theme-variant($base);
|
544
543
|
}
|
545
544
|
|
546
545
|
&.daff-theme-contrast {
|
547
|
-
@include
|
548
|
-
|
546
|
+
@include underline.daff-underline-button-theme-variant($base-contrast);
|
547
|
+
}
|
548
|
+
|
549
|
+
&[disabled],
|
550
|
+
&.daff-button--disabled {
|
551
|
+
@include underline.daff-underline-button-theme-variant(
|
552
|
+
theming.daff-illuminate($base, $gray, 4)
|
549
553
|
);
|
550
554
|
}
|
551
555
|
|
552
556
|
&.daff-warn {
|
553
|
-
@include
|
557
|
+
@include underline.daff-underline-button-theme-variant(
|
554
558
|
theming.daff-color(theming.$daff-bronze, 60)
|
555
559
|
);
|
556
560
|
}
|
557
561
|
|
558
562
|
&.daff-danger {
|
559
|
-
@include
|
563
|
+
@include underline.daff-underline-button-theme-variant(
|
560
564
|
theming.daff-color(theming.$daff-red, 60)
|
561
565
|
);
|
562
566
|
}
|
563
567
|
|
564
568
|
&.daff-success {
|
565
|
-
@include
|
569
|
+
@include underline.daff-underline-button-theme-variant(
|
566
570
|
theming.daff-color(theming.$daff-green, 60)
|
567
571
|
);
|
568
572
|
}
|
package/src/atoms/form/{select/select/select-theme.scss → native-select/native-select-theme.scss}
RENAMED
@@ -1,8 +1,8 @@
|
|
1
1
|
@use 'sass:map';
|
2
|
-
@use '
|
3
|
-
@use '
|
2
|
+
@use '../../../../scss/core';
|
3
|
+
@use '../../../../scss/theming';
|
4
4
|
|
5
|
-
@mixin daff-select-theme($theme) {
|
5
|
+
@mixin daff-native-select-theme($theme) {
|
6
6
|
$gray: core.daff-map-deep-get($theme, 'core.gray');
|
7
7
|
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
|
8
8
|
$black: core.daff-map-deep-get($theme, 'core.black');
|
@@ -1,3 +0,0 @@
|
|
1
|
-
export * from './select/select.component';
|
2
|
-
export { DaffNativeSelectModule } from './select.module';
|
3
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL3NyYy9hdG9tcy9mb3JtL3NlbGVjdC9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0saUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50JztcbmV4cG9ydCB7IERhZmZOYXRpdmVTZWxlY3RNb2R1bGUgfSBmcm9tICcuL3NlbGVjdC5tb2R1bGUnO1xuIl19
|
@@ -1,64 +0,0 @@
|
|
1
|
-
import { Component, ViewEncapsulation, Optional, Self, Input, ElementRef, HostListener, HostBinding, ChangeDetectionStrategy, } from '@angular/core';
|
2
|
-
import { NgControl } from '@angular/forms';
|
3
|
-
import { DaffFormFieldControl } from '../../form-field/form-field-control';
|
4
|
-
import * as i0 from "@angular/core";
|
5
|
-
import * as i1 from "@angular/forms";
|
6
|
-
export class DaffNativeSelectComponent {
|
7
|
-
constructor(
|
8
|
-
/**
|
9
|
-
* @docs-private
|
10
|
-
*/
|
11
|
-
ngControl, _elementRef) {
|
12
|
-
this.ngControl = ngControl;
|
13
|
-
this._elementRef = _elementRef;
|
14
|
-
/**
|
15
|
-
* @docs-private
|
16
|
-
*/
|
17
|
-
this.controlType = 'native-select';
|
18
|
-
this.class = true;
|
19
|
-
this.focused = false;
|
20
|
-
}
|
21
|
-
/**
|
22
|
-
* @docs-private
|
23
|
-
*/
|
24
|
-
focus() {
|
25
|
-
this.focused = true;
|
26
|
-
}
|
27
|
-
/**
|
28
|
-
* @docs-private
|
29
|
-
*/
|
30
|
-
blur() {
|
31
|
-
this.focused = false;
|
32
|
-
}
|
33
|
-
onFocus() {
|
34
|
-
this._elementRef.nativeElement.focus();
|
35
|
-
}
|
36
|
-
}
|
37
|
-
/** @nocollapse */ DaffNativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffNativeSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
38
|
-
/** @nocollapse */ DaffNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: { formSubmitted: "formSubmitted" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-native-select": "this.class" } }, providers: [
|
39
|
-
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
40
|
-
{ provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
|
41
|
-
], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-native-select{-webkit-appearance:none;appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffNativeSelectComponent, decorators: [{
|
43
|
-
type: Component,
|
44
|
-
args: [{ selector: 'select[daff-native-select]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
45
|
-
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
46
|
-
{ provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
|
47
|
-
], styles: [".daff-native-select{-webkit-appearance:none;appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"] }]
|
48
|
-
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
49
|
-
type: Optional
|
50
|
-
}, {
|
51
|
-
type: Self
|
52
|
-
}] }, { type: i0.ElementRef }]; }, propDecorators: { class: [{
|
53
|
-
type: HostBinding,
|
54
|
-
args: ['class.daff-native-select']
|
55
|
-
}], formSubmitted: [{
|
56
|
-
type: Input
|
57
|
-
}], focus: [{
|
58
|
-
type: HostListener,
|
59
|
-
args: ['focus']
|
60
|
-
}], blur: [{
|
61
|
-
type: HostListener,
|
62
|
-
args: ['blur']
|
63
|
-
}] } });
|
64
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL3NyYy9hdG9tcy9mb3JtL3NlbGVjdC9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULGlCQUFpQixFQUNqQixRQUFRLEVBQ1IsSUFBSSxFQUNKLEtBQUssRUFDTCxVQUFVLEVBQ1YsWUFBWSxFQUNaLFdBQVcsRUFDWCx1QkFBdUIsR0FDeEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTNDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDOzs7QUFlM0UsTUFBTSxPQUFPLHlCQUF5QjtJQTRCcEM7SUFDRTs7T0FFRztJQUN3QixTQUFvQixFQUN2QyxXQUF5QztRQUR0QixjQUFTLEdBQVQsU0FBUyxDQUFXO1FBQ3ZDLGdCQUFXLEdBQVgsV0FBVyxDQUE4QjtRQWhDbkQ7O1dBRUc7UUFDSCxnQkFBVyxHQUFHLGVBQWUsQ0FBQztRQUVXLFVBQUssR0FBRyxJQUFJLENBQUM7UUFNdEQsWUFBTyxHQUFHLEtBQUssQ0FBQztJQXNCYixDQUFDO0lBcEJKOztPQUVHO0lBQ29CLEtBQUs7UUFDM0IsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7SUFDckIsQ0FBQztJQUVEOztPQUVHO0lBQ21CLElBQUk7UUFDeEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQztJQVVELE9BQU87UUFDTCxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN6QyxDQUFDOzt5SUF0Q1UseUJBQXlCOzZIQUF6Qix5QkFBeUIsME5BTnpCO1FBQ1QsbUVBQW1FO1FBQ25FLEVBQUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFdBQVcsRUFBRSx5QkFBeUIsRUFBRTtLQUMxRSwwQkFQUywyQkFBMkI7MkZBVTFCLHlCQUF5QjtrQkFickMsU0FBUzsrQkFFRSw0QkFBNEIsWUFDNUIsMkJBQTJCLGlCQUV0QixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDO3dCQUNULG1FQUFtRTt3QkFDbkUsRUFBRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsV0FBVywyQkFBMkIsRUFBRTtxQkFDMUU7OzBCQW1DRSxRQUFROzswQkFBSSxJQUFJO3FFQTFCc0IsS0FBSztzQkFBN0MsV0FBVzt1QkFBQywwQkFBMEI7Z0JBSzlCLGFBQWE7c0JBQXJCLEtBQUs7Z0JBTWlCLEtBQUs7c0JBQTNCLFlBQVk7dUJBQUMsT0FBTztnQkFPQyxJQUFJO3NCQUF6QixZQUFZO3VCQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBPcHRpb25hbCxcbiAgU2VsZixcbiAgSW5wdXQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSG9zdEJpbmRpbmcsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgRGFmZkZvcm1GaWVsZENvbnRyb2wgfSBmcm9tICcuLi8uLi9mb3JtLWZpZWxkL2Zvcm0tZmllbGQtY29udHJvbCc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ3NlbGVjdFtkYWZmLW5hdGl2ZS1zZWxlY3RdJyxcbiAgdGVtcGxhdGU6ICc8bmctY29udGVudD48L25nLWNvbnRlbnQ+JyxcbiAgc3R5bGVVcmxzOiBbJy4vc2VsZWN0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcm92aWRlcnM6IFtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLXVzZS1iZWZvcmUtZGVmaW5lXG4gICAgeyBwcm92aWRlOiBEYWZmRm9ybUZpZWxkQ29udHJvbCwgdXNlRXhpc3Rpbmc6IERhZmZOYXRpdmVTZWxlY3RDb21wb25lbnQgfSxcbiAgXSxcbn0pXG5cbmV4cG9ydCBjbGFzcyBEYWZmTmF0aXZlU2VsZWN0Q29tcG9uZW50IGltcGxlbWVudHMgRGFmZkZvcm1GaWVsZENvbnRyb2wge1xuICAvKipcbiAgICogQGRvY3MtcHJpdmF0ZVxuICAgKi9cbiAgY29udHJvbFR5cGUgPSAnbmF0aXZlLXNlbGVjdCc7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kYWZmLW5hdGl2ZS1zZWxlY3QnKSBjbGFzcyA9IHRydWU7XG5cbiAgLyoqXG4gICAqIEhhcyB0aGUgZm9ybSBiZWVuIHN1Ym1pdHRlZC5cbiAgICovXG4gIEBJbnB1dCgpIGZvcm1TdWJtaXR0ZWQ6IGJvb2xlYW47XG4gIGZvY3VzZWQgPSBmYWxzZTtcblxuICAvKipcbiAgICogQGRvY3MtcHJpdmF0ZVxuICAgKi9cbiAgQEhvc3RMaXN0ZW5lcignZm9jdXMnKSBmb2N1cygpIHtcblx0ICB0aGlzLmZvY3VzZWQgPSB0cnVlO1xuICB9XG5cbiAgLyoqXG4gICAqIEBkb2NzLXByaXZhdGVcbiAgICovXG4gIEBIb3N0TGlzdGVuZXIoJ2JsdXInKSBibHVyKCkge1xuICAgIHRoaXMuZm9jdXNlZCA9IGZhbHNlO1xuICB9XG5cbiAgY29uc3RydWN0b3IoXG4gICAgLyoqXG4gICAgICogQGRvY3MtcHJpdmF0ZVxuICAgICAqL1xuICAgIEBPcHRpb25hbCgpIEBTZWxmKCkgcHVibGljIG5nQ29udHJvbDogTmdDb250cm9sLFxuICAgIHByaXZhdGUgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudD4sXG4gICkge31cblxuICBvbkZvY3VzKCkge1xuICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG5cbn1cbiJdfQ==
|