@clayui/css 3.39.0 → 3.42.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.
Files changed (109) hide show
  1. package/lib/css/atlas.css +1127 -1387
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +908 -1138
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css.map +1 -1
  6. package/lib/css/cadmin.css +1021 -1148
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/filter.svg +1 -1
  9. package/lib/images/icons/icons.svg +1 -1
  10. package/package.json +2 -2
  11. package/src/images/icons/filter.svg +1 -1
  12. package/src/scss/_mixins.scss +2 -0
  13. package/src/scss/atlas/variables/_alerts.scss +10 -0
  14. package/src/scss/atlas/variables/_application-bar.scss +32 -12
  15. package/src/scss/atlas/variables/_breadcrumbs.scss +4 -2
  16. package/src/scss/atlas/variables/_cards.scss +2 -2
  17. package/src/scss/atlas/variables/_dropdowns.scss +179 -12
  18. package/src/scss/atlas/variables/_forms.scss +33 -1
  19. package/src/scss/atlas/variables/_globals.scss +13 -0
  20. package/src/scss/atlas/variables/_labels.scss +88 -56
  21. package/src/scss/atlas/variables/_management-bar.scss +53 -21
  22. package/src/scss/atlas/variables/_navigation-bar.scss +104 -18
  23. package/src/scss/atlas/variables/_navs.scss +20 -8
  24. package/src/scss/atlas/variables/_pagination.scss +4 -2
  25. package/src/scss/atlas/variables/_sheets.scss +4 -2
  26. package/src/scss/atlas/variables/_sidebar.scss +1 -1
  27. package/src/scss/atlas/variables/_tables.scss +58 -28
  28. package/src/scss/cadmin/components/_alerts.scss +1 -17
  29. package/src/scss/cadmin/components/_cards.scss +12 -14
  30. package/src/scss/cadmin/components/_dropdowns.scss +66 -196
  31. package/src/scss/cadmin/components/_form-validation.scss +10 -237
  32. package/src/scss/cadmin/components/_icons.scss +1 -6
  33. package/src/scss/cadmin/components/_input-groups.scss +17 -14
  34. package/src/scss/cadmin/components/_pagination.scss +20 -236
  35. package/src/scss/cadmin/components/_popovers.scss +31 -252
  36. package/src/scss/cadmin/components/_reboot.scss +1 -8
  37. package/src/scss/cadmin/components/_toggle-switch.scss +20 -358
  38. package/src/scss/cadmin/components/_tooltip.scss +29 -167
  39. package/src/scss/cadmin/components/_type.scss +9 -1
  40. package/src/scss/cadmin/variables/_alerts.scss +35 -11
  41. package/src/scss/cadmin/variables/_breadcrumbs.scss +10 -6
  42. package/src/scss/cadmin/variables/_cards.scss +91 -23
  43. package/src/scss/cadmin/variables/_dropdowns.scss +440 -71
  44. package/src/scss/cadmin/variables/_forms.scss +353 -2
  45. package/src/scss/cadmin/variables/_globals.scss +14 -0
  46. package/src/scss/cadmin/variables/_icons.scss +15 -2
  47. package/src/scss/cadmin/variables/_labels.scss +104 -72
  48. package/src/scss/cadmin/variables/_links.scss +9 -7
  49. package/src/scss/cadmin/variables/_management-bar.scss +70 -30
  50. package/src/scss/cadmin/variables/_navigation-bar.scss +118 -22
  51. package/src/scss/cadmin/variables/_pagination.scss +274 -68
  52. package/src/scss/cadmin/variables/_popovers.scss +410 -0
  53. package/src/scss/cadmin/variables/_sidebar.scss +17 -5
  54. package/src/scss/cadmin/variables/_toggle-switch.scss +404 -1
  55. package/src/scss/cadmin/variables/_tooltip.scss +299 -0
  56. package/src/scss/cadmin/variables/_type.scss +3 -0
  57. package/src/scss/components/_alerts.scss +5 -17
  58. package/src/scss/components/_button-groups.scss +6 -6
  59. package/src/scss/components/_cards.scss +5 -5
  60. package/src/scss/components/_dropdowns.scss +52 -200
  61. package/src/scss/components/_form-validation.scss +8 -237
  62. package/src/scss/components/_forms.scss +61 -4
  63. package/src/scss/components/_icons.scss +4 -9
  64. package/src/scss/components/_input-groups.scss +17 -14
  65. package/src/scss/components/_multi-step-nav.scss +12 -8
  66. package/src/scss/components/_pagination.scss +18 -234
  67. package/src/scss/components/_popovers.scss +30 -237
  68. package/src/scss/components/_reboot.scss +3 -39
  69. package/src/scss/components/_toggle-switch.scss +36 -351
  70. package/src/scss/components/_tooltip.scss +29 -164
  71. package/src/scss/components/_type.scss +9 -1
  72. package/src/scss/functions/_global-functions.scss +18 -0
  73. package/src/scss/functions/_lx-icons-generated.scss +1 -1
  74. package/src/scss/mixins/_alerts.scss +25 -0
  75. package/src/scss/mixins/_buttons.scss +827 -384
  76. package/src/scss/mixins/_cards.scss +610 -114
  77. package/src/scss/mixins/_close.scss +0 -1
  78. package/src/scss/mixins/_custom-forms.scss +46 -34
  79. package/src/scss/mixins/_dropdown-menu.scss +139 -53
  80. package/src/scss/mixins/_forms.scss +686 -252
  81. package/src/scss/mixins/_globals.scss +244 -234
  82. package/src/scss/mixins/_labels.scss +1 -1
  83. package/src/scss/mixins/_links.scss +795 -329
  84. package/src/scss/mixins/_navbar.scss +759 -140
  85. package/src/scss/mixins/_pagination.scss +422 -0
  86. package/src/scss/mixins/_popovers.scss +90 -0
  87. package/src/scss/mixins/_toggle-switch.scss +1140 -14
  88. package/src/scss/mixins/_tooltip.scss +70 -0
  89. package/src/scss/variables/_alerts.scss +34 -10
  90. package/src/scss/variables/_application-bar.scss +18 -6
  91. package/src/scss/variables/_breadcrumbs.scss +8 -4
  92. package/src/scss/variables/_cards.scss +40 -2
  93. package/src/scss/variables/_dropdowns.scss +570 -62
  94. package/src/scss/variables/_forms.scss +303 -1
  95. package/src/scss/variables/_globals.scss +53 -0
  96. package/src/scss/variables/_icons.scss +60 -9
  97. package/src/scss/variables/_labels.scss +120 -88
  98. package/src/scss/variables/_links.scss +15 -13
  99. package/src/scss/variables/_management-bar.scss +45 -12
  100. package/src/scss/variables/_navigation-bar.scss +95 -14
  101. package/src/scss/variables/_navs.scss +33 -13
  102. package/src/scss/variables/_pagination.scss +267 -65
  103. package/src/scss/variables/_popovers.scss +392 -0
  104. package/src/scss/variables/_sheets.scss +4 -2
  105. package/src/scss/variables/_sidebar.scss +17 -5
  106. package/src/scss/variables/_tables.scss +24 -8
  107. package/src/scss/variables/_toggle-switch.scss +404 -5
  108. package/src/scss/variables/_tooltip.scss +299 -0
  109. package/src/scss/variables/_type.scss +3 -0
package/src/scss/cadmin/components/_popovers.scss CHANGED
@@ -1,49 +1,5 @@
1
1
  .popover {
2
- background-clip: padding-box;
3
- background-color: $cadmin-popover-bg;
4
- border: $cadmin-popover-border-width solid $cadmin-popover-border-color;
5
-
6
- @include border-radius($cadmin-popover-border-radius);
7
- @include box-shadow($cadmin-popover-box-shadow);
8
-
9
- display: block;
10
- font-family: $cadmin-font-family-base;
11
- font-size: $cadmin-popover-font-size;
12
- font-style: normal;
13
- font-weight: $cadmin-font-weight-normal;
14
- left: 0;
15
- letter-spacing: normal;
16
- line-break: auto;
17
- line-height: $cadmin-line-height-base;
18
- max-width: $cadmin-popover-max-width;
19
- position: absolute;
20
- text-align: left;
21
- text-decoration: none;
22
- text-shadow: none;
23
- text-transform: none;
24
- top: 0;
25
- white-space: normal;
26
- word-break: normal;
27
- word-spacing: normal;
28
- word-wrap: break-word;
29
- z-index: $cadmin-zindex-popover;
30
-
31
- .arrow {
32
- display: block;
33
- height: $cadmin-popover-arrow-height;
34
- margin: 0 $cadmin-popover-border-radius;
35
- position: absolute;
36
- width: $cadmin-popover-arrow-width;
37
-
38
- &::before,
39
- &::after {
40
- border-color: transparent;
41
- border-style: solid;
42
- content: '';
43
- display: block;
44
- position: absolute;
45
- }
46
- }
2
+ @include clay-popover-variant($cadmin-popover);
47
3
  }
48
4
 
49
5
  %bs-popover-bottom {
@@ -184,43 +140,24 @@
184
140
  @extend %bs-popover-top !optional;
185
141
  }
186
142
 
187
- .popover {
188
- .inline-scroller {
189
- max-height: $cadmin-popover-inline-scroller-max-height;
190
- }
191
- }
192
-
193
- .popover-header {
194
- color: $cadmin-popover-header-color;
195
- background-color: $cadmin-popover-header-bg;
196
- border-bottom: $cadmin-popover-border-width solid
197
- clay-darken($cadmin-popover-header-bg, 5%);
198
- @include border-top-radius($cadmin-popover-inner-border-radius);
199
- }
200
-
201
143
  .popover-header {
202
- border-color: $cadmin-popover-header-border-color;
144
+ @include clay-css($cadmin-popover-header);
203
145
 
204
- @include border-top-radius($cadmin-popover-offset-border-width);
146
+ &::before {
147
+ @include clay-css(map-get($cadmin-popover-header, before));
148
+ }
205
149
 
206
- font-size: $cadmin-popover-header-font-size;
207
- font-weight: $cadmin-popover-header-font-weight;
208
- margin-bottom: $cadmin-popover-header-margin-y;
209
- margin-left: $cadmin-popover-header-margin-x;
210
- margin-right: $cadmin-popover-header-margin-x;
211
- margin-top: $cadmin-popover-header-margin-y;
212
- padding: $cadmin-popover-header-padding-y $cadmin-popover-header-padding-x;
150
+ &::after {
151
+ @include clay-css(map-get($cadmin-popover-header, after));
152
+ }
213
153
 
214
- &:empty {
215
- display: none;
154
+ &::empty {
155
+ @include clay-css(map-get($cadmin-popover-header, empty));
216
156
  }
217
157
  }
218
158
 
219
159
  .popover-body {
220
- @include border-bottom-radius($cadmin-popover-offset-border-width);
221
-
222
- color: $cadmin-popover-body-color;
223
- padding: $cadmin-popover-body-padding-y $cadmin-popover-body-padding-x;
160
+ @include clay-css($cadmin-popover-body);
224
161
  }
225
162
 
226
163
  // Top
@@ -228,41 +165,15 @@
228
165
  .clay-popover-top,
229
166
  .clay-popover-top-left,
230
167
  .clay-popover-top-right {
231
- margin-bottom: $cadmin-popover-arrow-height;
232
-
233
- .arrow {
234
- bottom: calc(
235
- (#{$cadmin-popover-arrow-height} + #{$cadmin-popover-border-width}) *
236
- -1
237
- );
238
- margin: 0;
239
-
240
- &::after {
241
- border-top-color: $cadmin-popover-arrow-color;
242
- border-width: $cadmin-popover-arrow-height
243
- ($cadmin-popover-arrow-width * 0.5) 0;
244
- bottom: $cadmin-popover-border-width;
245
- }
246
-
247
- &::before {
248
- border-top-color: $cadmin-popover-arrow-outer-color;
249
- border-width: $cadmin-popover-arrow-height
250
- ($cadmin-popover-arrow-width * 0.5) 0;
251
- bottom: 0;
252
- }
253
- }
254
- }
255
-
256
- .clay-popover-top .arrow::after {
257
- border-top-color: $cadmin-popover-top-arrow-color;
168
+ @include clay-popover-variant($cadmin-clay-popover-top);
258
169
  }
259
170
 
260
- .clay-popover-top-left .arrow::after {
261
- border-top-color: $cadmin-popover-top-left-arrow-color;
171
+ .clay-popover-top-left {
172
+ @include clay-popover-variant($cadmin-clay-popover-top-left);
262
173
  }
263
174
 
264
- .clay-popover-top-right .arrow::after {
265
- border-top-color: $cadmin-popover-top-right-arrow-color;
175
+ .clay-popover-top-right {
176
+ @include clay-popover-variant($cadmin-clay-popover-top-right);
266
177
  }
267
178
 
268
179
  // Right
@@ -270,45 +181,15 @@
270
181
  .clay-popover-right,
271
182
  .clay-popover-right-bottom,
272
183
  .clay-popover-right-top {
273
- margin-left: $cadmin-popover-arrow-height;
274
-
275
- .arrow {
276
- height: $cadmin-popover-arrow-width;
277
- left: calc(
278
- (#{$cadmin-popover-arrow-height} + #{$cadmin-popover-border-width}) *
279
- -1
280
- );
281
- margin: 0;
282
- width: $cadmin-popover-arrow-height;
283
-
284
- &::after {
285
- border-right-color: $cadmin-popover-arrow-color;
286
- border-width: ($cadmin-popover-arrow-width * 0.5)
287
- $cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5)
288
- 0;
289
- left: $cadmin-popover-border-width;
290
- }
291
-
292
- &::before {
293
- border-right-color: $cadmin-popover-arrow-outer-color;
294
- border-width: ($cadmin-popover-arrow-width * 0.5)
295
- $cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5)
296
- 0;
297
- left: 0;
298
- }
299
- }
300
- }
301
-
302
- .clay-popover-right .arrow::after {
303
- border-right-color: $cadmin-popover-right-arrow-color;
184
+ @include clay-popover-variant($cadmin-clay-popover-right);
304
185
  }
305
186
 
306
- .clay-popover-right-bottom .arrow::after {
307
- border-right-color: $cadmin-popover-right-bottom-arrow-color;
187
+ .clay-popover-right-bottom {
188
+ @include clay-popover-variant($cadmin-clay-popover-right-bottom);
308
189
  }
309
190
 
310
- .clay-popover-right-top .arrow::after {
311
- border-right-color: $cadmin-popover-right-top-arrow-color;
191
+ .clay-popover-right-top {
192
+ @include clay-popover-variant($cadmin-clay-popover-right-top);
312
193
  }
313
194
 
314
195
  // Bottom
@@ -316,41 +197,15 @@
316
197
  .clay-popover-bottom,
317
198
  .clay-popover-bottom-left,
318
199
  .clay-popover-bottom-right {
319
- margin-top: $cadmin-popover-arrow-height;
320
-
321
- .arrow {
322
- margin: 0;
323
- top: calc(
324
- (#{$cadmin-popover-arrow-height} + #{$cadmin-popover-border-width}) *
325
- -1
326
- );
327
-
328
- &:after {
329
- border-bottom-color: $cadmin-popover-arrow-color;
330
- border-width: 0 ($cadmin-popover-arrow-width * 0.5)
331
- $cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5);
332
- top: $cadmin-popover-border-width;
333
- }
334
-
335
- &:before {
336
- border-bottom-color: $cadmin-popover-arrow-outer-color;
337
- border-width: 0 ($cadmin-popover-arrow-width * 0.5)
338
- $cadmin-popover-arrow-height ($cadmin-popover-arrow-width * 0.5);
339
- top: 0;
340
- }
341
- }
200
+ @include clay-popover-variant($cadmin-clay-popover-bottom);
342
201
  }
343
202
 
344
- .clay-popover-bottom .arrow::after {
345
- border-bottom-color: $cadmin-popover-bottom-arrow-color;
203
+ .clay-popover-bottom-left {
204
+ @include clay-popover-variant($cadmin-clay-popover-bottom-left);
346
205
  }
347
206
 
348
- .clay-popover-bottom-left .arrow::after {
349
- border-bottom-color: $cadmin-popover-bottom-left-arrow-color;
350
- }
351
-
352
- .clay-popover-bottom-right .arrow::after {
353
- border-bottom-color: $cadmin-popover-bottom-right-arrow-color;
207
+ .clay-popover-bottom-right {
208
+ @include clay-popover-variant($cadmin-clay-popover-bottom-right);
354
209
  }
355
210
 
356
211
  // Left
@@ -358,89 +213,13 @@
358
213
  .clay-popover-left,
359
214
  .clay-popover-left-bottom,
360
215
  .clay-popover-left-top {
361
- margin-right: $cadmin-popover-arrow-height;
362
-
363
- .arrow {
364
- height: $cadmin-popover-arrow-width;
365
- margin: 0;
366
- right: calc(
367
- (#{$cadmin-popover-arrow-height} + #{$cadmin-popover-border-width}) *
368
- -1
369
- );
370
- width: $cadmin-popover-arrow-height;
371
-
372
- &::after {
373
- border-left-color: $cadmin-popover-arrow-color;
374
- border-width: ($cadmin-popover-arrow-width * 0.5) 0
375
- ($cadmin-popover-arrow-width * 0.5) $cadmin-popover-arrow-height;
376
- right: $cadmin-popover-border-width;
377
- }
378
-
379
- &::before {
380
- border-left-color: $cadmin-popover-arrow-outer-color;
381
- border-width: ($cadmin-popover-arrow-width * 0.5) 0
382
- ($cadmin-popover-arrow-width * 0.5) $cadmin-popover-arrow-height;
383
- right: 0;
384
- }
385
- }
386
- }
387
-
388
- .clay-popover-left .arrow::after {
389
- border-left-color: $cadmin-popover-left-arrow-color;
390
- }
391
-
392
- .clay-popover-left-bottom .arrow::after {
393
- border-left-color: $cadmin-popover-left-bottom-arrow-color;
394
- }
395
-
396
- .clay-popover-left-top .arrow::after {
397
- border-left-color: $cadmin-popover-left-top-arrow-color;
398
- }
399
-
400
- // Bottom / Top
401
-
402
- .clay-popover-bottom,
403
- .clay-popover-top {
404
- .arrow {
405
- left: 50%;
406
- margin-left: math-sign($cadmin-popover-arrow-width * 0.5);
407
- }
408
- }
409
-
410
- .clay-popover-bottom-left,
411
- .clay-popover-top-left {
412
- .arrow {
413
- left: $cadmin-popover-arrow-offset;
414
- }
216
+ @include clay-popover-variant($cadmin-clay-popover-left);
415
217
  }
416
218
 
417
- .clay-popover-bottom-right,
418
- .clay-popover-top-right {
419
- .arrow {
420
- right: $cadmin-popover-arrow-offset;
421
- }
422
- }
423
-
424
- // Right / Left
425
-
426
- .clay-popover-left,
427
- .clay-popover-right {
428
- .arrow {
429
- margin-top: math-sign($cadmin-popover-arrow-height * 0.5);
430
- top: 50%;
431
- }
219
+ .clay-popover-left-bottom {
220
+ @include clay-popover-variant($cadmin-clay-popover-left-bottom);
432
221
  }
433
222
 
434
- .clay-popover-left-bottom,
435
- .clay-popover-right-bottom {
436
- .arrow {
437
- bottom: $cadmin-popover-arrow-offset;
438
- }
439
- }
440
-
441
- .clay-popover-left-top,
442
- .clay-popover-right-top {
443
- .arrow {
444
- top: $cadmin-popover-arrow-offset;
445
- }
223
+ .clay-popover-left-top {
224
+ @include clay-popover-variant($cadmin-clay-popover-left-top);
446
225
  }
package/src/scss/cadmin/components/_reboot.scss CHANGED
@@ -173,14 +173,7 @@ html#{$cadmin-selector} {
173
173
  }
174
174
 
175
175
  a {
176
- color: $cadmin-link-color;
177
- cursor: $cadmin-link-cursor;
178
- text-decoration: $cadmin-link-decoration;
179
-
180
- &:hover {
181
- color: $cadmin-link-hover-color;
182
- text-decoration: $cadmin-link-hover-decoration;
183
- }
176
+ @include clay-link($cadmin-link);
184
177
  }
185
178
 
186
179
  // Code