@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/variables/_pagination.scss CHANGED
@@ -82,39 +82,12 @@ $pagination-disabled-opacity: 1 !default;
82
82
 
83
83
  $pagination-disabled-pointer-events: auto !default;
84
84
 
85
- // Pagination Link
86
-
87
- $pagination-link: () !default;
88
- $pagination-link: map-deep-merge(
89
- (
90
- align-items: center,
91
- bg: $pagination-bg,
92
- border-radius: $pagination-link-border-radius,
93
- border-color: $pagination-border-color,
94
- border-style: solid,
95
- border-width: $pagination-border-width,
96
- color: $pagination-color,
97
- cursor: $pagination-link-cursor,
98
- display: inline-flex,
99
- height: $pagination-item-height,
100
- justify-content: center,
101
- line-height: $pagination-line-height,
102
- margin-left: 0,
103
- padding-bottom: $pagination-padding-y,
104
- padding-left: $pagination-padding-x,
105
- padding-right: $pagination-padding-x,
106
- padding-top: $pagination-padding-y,
107
- position: relative,
108
- transition: $pagination-link-transition,
109
- lexicon-icon-margin-top: 0,
110
- ),
111
- $pagination-link
112
- );
85
+ // .page-link
113
86
 
114
87
  $pagination-link-hover: () !default;
115
88
  $pagination-link-hover: map-deep-merge(
116
89
  (
117
- bg: $pagination-hover-bg,
90
+ background-color: $pagination-hover-bg,
118
91
  border-color: $pagination-hover-border-color,
119
92
  color: $pagination-hover-color,
120
93
  text-decoration: none,
@@ -136,7 +109,7 @@ $pagination-link-focus: map-deep-merge(
136
109
  $pagination-link-active: () !default;
137
110
  $pagination-link-active: map-deep-merge(
138
111
  (
139
- bg: $pagination-active-bg,
112
+ background-color: $pagination-active-bg,
140
113
  border-color: $pagination-active-border-color,
141
114
  color: $pagination-active-color,
142
115
  cursor: default,
@@ -148,7 +121,7 @@ $pagination-link-active: map-deep-merge(
148
121
  $pagination-link-disabled: () !default;
149
122
  $pagination-link-disabled: map-deep-merge(
150
123
  (
151
- bg: $pagination-disabled-bg,
124
+ background-color: $pagination-disabled-bg,
152
125
  border-color: $pagination-disabled-border-color,
153
126
  box-shadow: none,
154
127
  color: $pagination-disabled-color,
@@ -156,10 +129,103 @@ $pagination-link-disabled: map-deep-merge(
156
129
  opacity: $pagination-disabled-opacity,
157
130
  pointer-events: $pagination-disabled-pointer-events,
158
131
  z-index: $zindex-pagination-link-disabled,
132
+ active: (
133
+ pointer-events: none,
134
+ ),
159
135
  ),
160
136
  $pagination-link-disabled
161
137
  );
162
138
 
139
+ $pagination-link: () !default;
140
+ $pagination-link: map-deep-merge(
141
+ (
142
+ align-items: center,
143
+ background-color: $pagination-bg,
144
+ border-radius: $pagination-link-border-radius,
145
+ border-color: $pagination-border-color,
146
+ border-style: solid,
147
+ border-width: $pagination-border-width,
148
+ color: $pagination-color,
149
+ cursor: $pagination-link-cursor,
150
+ display: inline-flex,
151
+ height: $pagination-item-height,
152
+ justify-content: center,
153
+ line-height: $pagination-line-height,
154
+ margin-left: 0,
155
+ padding-bottom: $pagination-padding-y,
156
+ padding-left: $pagination-padding-x,
157
+ padding-right: $pagination-padding-x,
158
+ padding-top: $pagination-padding-y,
159
+ position: relative,
160
+ transition: $pagination-link-transition,
161
+ hover: $pagination-link-hover,
162
+ focus: $pagination-link-focus,
163
+ active: $pagination-link-active,
164
+ disabled: $pagination-link-disabled,
165
+ lexicon-icon: (
166
+ margin-top: 0,
167
+ ),
168
+ ),
169
+ $pagination-link
170
+ );
171
+
172
+ // .page-link-first
173
+
174
+ $pagination-link-first: () !default;
175
+ $pagination-link-first: map-deep-merge(
176
+ (
177
+ border-radius: clay-enable-rounded($pagination-link-first-border-radius),
178
+ ),
179
+ $pagination-link-first
180
+ );
181
+
182
+ // .page-link-last
183
+
184
+ $pagination-link-last: () !default;
185
+ $pagination-link-last: map-deep-merge(
186
+ (
187
+ border-radius: clay-enable-rounded($pagination-link-last-border-radius),
188
+ ),
189
+ $pagination-link-last
190
+ );
191
+
192
+ // .pagination
193
+
194
+ $pagination: () !default;
195
+ $pagination: map-deep-merge(
196
+ (
197
+ border-radius: clay-enable-rounded($border-radius),
198
+ display: flex,
199
+ flex-wrap: wrap,
200
+ font-size: $pagination-font-size,
201
+ list-style: none,
202
+ margin-bottom: $pagination-margin-bottom,
203
+ padding-left: 0,
204
+ ),
205
+ $pagination
206
+ );
207
+
208
+ // .pagination-bar
209
+
210
+ $pagination-bar: () !default;
211
+ $pagination-bar: map-deep-merge(
212
+ (
213
+ align-items: center,
214
+ display: flex,
215
+ flex-wrap: wrap,
216
+ media-breakpoint-down: (
217
+ sm: (
218
+ flex-direction: column,
219
+ justify-content: center,
220
+ pagination: (
221
+ margin-top: $pagination-margin-top-mobile,
222
+ ),
223
+ ),
224
+ ),
225
+ ),
226
+ $pagination-bar
227
+ );
228
+
163
229
  // Pagination Dropdown Menu
164
230
 
165
231
  $pagination-dropdown-menu-spacer-y: null !default;
@@ -217,38 +283,10 @@ $pagination-items-per-page-lexicon-icon-margin-top: 0.125rem !default; // 2px
217
283
 
218
284
  // Pagination Items Per Page Link
219
285
 
220
- $pagination-items-per-page-link: () !default;
221
- $pagination-items-per-page-link: map-deep-merge(
222
- (
223
- align-items: center,
224
- bg: $pagination-items-per-page-bg,
225
- border-color: $pagination-items-per-page-border-color,
226
- border-radius: $pagination-items-per-page-border-radius,
227
- border-style: solid,
228
- border-width: $pagination-border-width,
229
- color: $pagination-items-per-page-color,
230
- display: inline-flex,
231
- height: $pagination-item-height,
232
- justify-content: center,
233
- line-height: $pagination-line-height,
234
- padding-bottom: $pagination-padding-y,
235
- padding-left: $pagination-padding-x,
236
- padding-right: $pagination-padding-x,
237
- padding-top: $pagination-padding-y,
238
- text-decoration: none,
239
- transition: $pagination-items-per-page-transition,
240
- lexicon-icon-margin-left:
241
- $pagination-items-per-page-lexicon-icon-margin-left,
242
- lexicon-icon-margin-top:
243
- $pagination-items-per-page-lexicon-icon-margin-top,
244
- ),
245
- $pagination-items-per-page-link
246
- );
247
-
248
286
  $pagination-items-per-page-link-hover: () !default;
249
287
  $pagination-items-per-page-link-hover: map-deep-merge(
250
288
  (
251
- bg: $pagination-items-per-page-hover-bg,
289
+ background-color: $pagination-items-per-page-hover-bg,
252
290
  border-color: $pagination-items-per-page-hover-border-color,
253
291
  color: $pagination-items-per-page-hover-color,
254
292
  ),
@@ -267,7 +305,7 @@ $pagination-items-per-page-link-focus: map-deep-merge(
267
305
  $pagination-items-per-page-link-active: () !default;
268
306
  $pagination-items-per-page-link-active: map-deep-merge(
269
307
  (
270
- bg: $pagination-active-bg,
308
+ background-color: $pagination-active-bg,
271
309
  border-color: $pagination-active-border-color,
272
310
  color: $pagination-active-color,
273
311
  ),
@@ -277,7 +315,7 @@ $pagination-items-per-page-link-active: map-deep-merge(
277
315
  $pagination-items-per-page-link-disabled: () !default;
278
316
  $pagination-items-per-page-link-disabled: map-deep-merge(
279
317
  (
280
- bg: $pagination-disabled-bg,
318
+ background-color: $pagination-disabled-bg,
281
319
  border-color: $pagination-disabled-border-color,
282
320
  box-shadow: none,
283
321
  color: $pagination-disabled-color,
@@ -288,11 +326,82 @@ $pagination-items-per-page-link-disabled: map-deep-merge(
288
326
  $pagination-items-per-page-link-disabled
289
327
  );
290
328
 
291
- // Pagination Results
329
+ // .pagination-items-per-page > a, .pagination-items-per-page > button
330
+
331
+ $pagination-items-per-page-link: () !default;
332
+ $pagination-items-per-page-link: map-deep-merge(
333
+ (
334
+ align-items: center,
335
+ background-color: $pagination-items-per-page-bg,
336
+ border-color: $pagination-items-per-page-border-color,
337
+ border-radius: $pagination-items-per-page-border-radius,
338
+ border-style: solid,
339
+ border-width: $pagination-border-width,
340
+ color: $pagination-items-per-page-color,
341
+ display: inline-flex,
342
+ height: $pagination-item-height,
343
+ justify-content: center,
344
+ line-height: $pagination-line-height,
345
+ padding-bottom: $pagination-padding-y,
346
+ padding-left: $pagination-padding-x,
347
+ padding-right: $pagination-padding-x,
348
+ padding-top: $pagination-padding-y,
349
+ text-decoration: none,
350
+ transition: $pagination-items-per-page-transition,
351
+ hover: $pagination-items-per-page-link-hover,
352
+ focus: $pagination-items-per-page-link-focus,
353
+ active: $pagination-items-per-page-link-active,
354
+ disabled: $pagination-items-per-page-link-disabled,
355
+ lexicon-icon: (
356
+ margin-left: $pagination-items-per-page-lexicon-icon-margin-left,
357
+ margin-top: $pagination-items-per-page-lexicon-icon-margin-top,
358
+ ),
359
+ ),
360
+ $pagination-items-per-page-link
361
+ );
362
+
363
+ // .pagination-items-per-page
364
+
365
+ $pagination-items-per-page: () !default;
366
+ $pagination-items-per-page: map-deep-merge(
367
+ (
368
+ font-size: $pagination-items-per-page-font-size,
369
+ margin-bottom: $pagination-margin-bottom,
370
+ link: $pagination-items-per-page-link,
371
+ media-breakpoint-down: (
372
+ sm: (
373
+ pagination-results: (
374
+ margin-left: auto,
375
+ ),
376
+ ),
377
+ ),
378
+ ),
379
+ $pagination-items-per-page
380
+ );
381
+
382
+ // .pagination-results
292
383
 
293
384
  $pagination-results-color: null !default;
294
385
 
295
- // Pagination Sm
386
+ $pagination-results: () !default;
387
+ $pagination-results: map-merge(
388
+ (
389
+ border-color: transparent,
390
+ border-style: solid,
391
+ border-width: $pagination-border-width,
392
+ color: $pagination-results-color,
393
+ font-size: $pagination-font-size,
394
+ line-height: $pagination-line-height,
395
+ margin-bottom: $pagination-margin-bottom,
396
+ margin-right: auto,
397
+ max-width: 100%,
398
+ padding: $pagination-padding-y $pagination-padding-x,
399
+ word-wrap: break-word,
400
+ ),
401
+ $pagination-results
402
+ );
403
+
404
+ // .pagination-sm
296
405
 
297
406
  $pagination-font-size-sm: $font-size-sm !default;
298
407
  $pagination-line-height-sm: 1 !default;
@@ -306,7 +415,55 @@ $pagination-link-border-radius-sm: $border-radius-sm !default;
306
415
  $pagination-items-per-page-lexicon-icon-margin-left-sm: null !default;
307
416
  $pagination-items-per-page-lexicon-icon-margin-top-sm: null !default;
308
417
 
309
- // Pagination Lg
418
+ $pagination-sm: () !default;
419
+ $pagination-sm: map-deep-merge(
420
+ (
421
+ page-link: (
422
+ font-size: $pagination-font-size-sm,
423
+ height: $pagination-item-height-sm,
424
+ line-height: $pagination-line-height-sm,
425
+ padding-bottom: $pagination-padding-y-sm,
426
+ padding-right: $pagination-padding-x-sm,
427
+ padding-left: $pagination-padding-x-sm,
428
+ padding-top: $pagination-padding-y-sm,
429
+ ),
430
+ page-link-first: (
431
+ border-bottom-left-radius: $pagination-link-border-radius-sm,
432
+ border-top-left-radius: $pagination-link-border-radius-sm,
433
+ ),
434
+ page-link-last: (
435
+ border-bottom-right-radius: $pagination-link-border-radius-sm,
436
+ border-top-right-radius: $pagination-link-border-radius-sm,
437
+ ),
438
+ pagination-items-per-page: (
439
+ border-radius:
440
+ clay-enable-rounded($pagination-link-border-radius-sm),
441
+ link: (
442
+ font-size: $pagination-font-size-sm,
443
+ height: $pagination-item-height-sm,
444
+ line-height: $pagination-line-height-sm,
445
+ padding-bottom: $pagination-padding-y-sm,
446
+ padding-left: $pagination-padding-x,
447
+ padding-right: $pagination-padding-x,
448
+ padding-top: $pagination-padding-y-sm,
449
+ ),
450
+ lexicon-icon: (
451
+ margin-left:
452
+ $pagination-items-per-page-lexicon-icon-margin-left-sm,
453
+ margin-right:
454
+ $pagination-items-per-page-lexicon-icon-margin-top-sm,
455
+ ),
456
+ pagination-results: (
457
+ font-size: $pagination-font-size-sm,
458
+ line-height: $pagination-line-height-sm,
459
+ padding: $pagination-padding-y-sm $pagination-padding-x,
460
+ ),
461
+ ),
462
+ ),
463
+ $pagination-sm
464
+ );
465
+
466
+ // .pagination-lg
310
467
 
311
468
  $pagination-font-size-lg: $font-size-lg !default;
312
469
  $pagination-line-height-lg: 1 !default;
@@ -319,3 +476,48 @@ $pagination-link-border-radius-lg: $border-radius-lg !default;
319
476
 
320
477
  $pagination-items-per-page-lexicon-icon-margin-left-lg: null !default;
321
478
  $pagination-items-per-page-lexicon-icon-margin-top-lg: null !default;
479
+
480
+ $pagination-lg: () !default;
481
+ $pagination-lg: map-deep-merge(
482
+ (
483
+ page-link: (
484
+ font-size: $pagination-font-size-lg,
485
+ height: $pagination-item-height-lg,
486
+ line-height: $pagination-line-height-lg,
487
+ padding-bottom: $pagination-padding-y-lg,
488
+ padding-left: $pagination-padding-x-lg,
489
+ padding-right: $pagination-padding-x-lg,
490
+ padding-top: $pagination-padding-y-lg,
491
+ ),
492
+ page-link-first: (
493
+ border-bottom-left-radius: $pagination-link-border-radius-lg,
494
+ border-top-left-radius: $pagination-link-border-radius-lg,
495
+ ),
496
+ page-link-last: (
497
+ border-bottom-right-radius: $pagination-link-border-radius-lg,
498
+ border-top-right-radius: $pagination-link-border-radius-lg,
499
+ ),
500
+ pagination-items-per-page: (
501
+ border-radius:
502
+ clay-enable-rounded($pagination-link-border-radius-lg),
503
+ link: (
504
+ font-size: $pagination-font-size-lg,
505
+ height: $pagination-item-height-lg,
506
+ line-height: $pagination-line-height-lg,
507
+ padding: $pagination-padding-y-lg $pagination-padding-x,
508
+ ),
509
+ lexicon-icon: (
510
+ margin-left:
511
+ $pagination-items-per-page-lexicon-icon-margin-left-lg,
512
+ margin-right:
513
+ $pagination-items-per-page-lexicon-icon-margin-top-lg,
514
+ ),
515
+ pagination-results: (
516
+ font-size: $pagination-font-size-lg,
517
+ line-height: $pagination-line-height-lg,
518
+ padding: $pagination-padding-y-lg $pagination-padding-x,
519
+ ),
520
+ ),
521
+ ),
522
+ $pagination-lg
523
+ );