@clayui/css 3.41.0 → 3.44.1

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 (78) hide show
  1. package/lib/css/atlas.css +1117 -1163
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +1020 -1068
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css.map +1 -1
  6. package/lib/css/cadmin.css +875 -931
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/date-time.svg +12 -0
  9. package/lib/images/icons/filter.svg +1 -1
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/package.json +2 -2
  12. package/src/images/icons/date-time.svg +12 -0
  13. package/src/images/icons/filter.svg +1 -1
  14. package/src/scss/_mixins.scss +2 -0
  15. package/src/scss/atlas/variables/_application-bar.scss +32 -12
  16. package/src/scss/atlas/variables/_buttons.scss +2 -31
  17. package/src/scss/atlas/variables/_management-bar.scss +53 -21
  18. package/src/scss/atlas/variables/_navigation-bar.scss +104 -18
  19. package/src/scss/atlas/variables/_navs.scss +20 -15
  20. package/src/scss/atlas/variables/_pagination.scss +2 -0
  21. package/src/scss/atlas/variables/_sidebar.scss +1 -1
  22. package/src/scss/cadmin/components/_dropdowns.scss +4 -0
  23. package/src/scss/cadmin/components/_input-groups.scss +12 -312
  24. package/src/scss/cadmin/components/_navs.scss +35 -113
  25. package/src/scss/cadmin/components/_pagination.scss +20 -236
  26. package/src/scss/cadmin/components/_popovers.scss +31 -252
  27. package/src/scss/cadmin/components/_tooltip.scss +29 -167
  28. package/src/scss/cadmin/components/_utilities-functional-important.scss +4 -3
  29. package/src/scss/cadmin/variables/_alerts.scss +3 -2
  30. package/src/scss/cadmin/variables/_dropdowns.scss +31 -2
  31. package/src/scss/cadmin/variables/_forms.scss +366 -5
  32. package/src/scss/cadmin/variables/_management-bar.scss +70 -30
  33. package/src/scss/cadmin/variables/_navigation-bar.scss +118 -22
  34. package/src/scss/cadmin/variables/_navs.scss +270 -53
  35. package/src/scss/cadmin/variables/_pagination.scss +274 -68
  36. package/src/scss/cadmin/variables/_popovers.scss +410 -0
  37. package/src/scss/cadmin/variables/_sidebar.scss +17 -5
  38. package/src/scss/cadmin/variables/_tooltip.scss +299 -0
  39. package/src/scss/components/_button-groups.scss +6 -6
  40. package/src/scss/components/_buttons.scss +87 -49
  41. package/src/scss/components/_cards.scss +16 -116
  42. package/src/scss/components/_dropdowns.scss +4 -0
  43. package/src/scss/components/_input-groups.scss +12 -308
  44. package/src/scss/components/_multi-step-nav.scss +12 -8
  45. package/src/scss/components/_navs.scss +45 -128
  46. package/src/scss/components/_pagination.scss +18 -234
  47. package/src/scss/components/_popovers.scss +30 -237
  48. package/src/scss/components/_toggle-switch.scss +2 -2
  49. package/src/scss/components/_tooltip.scss +29 -164
  50. package/src/scss/functions/_lx-icons-generated.scss +3 -1
  51. package/src/scss/mixins/_buttons.scss +674 -472
  52. package/src/scss/mixins/_cards.scss +751 -557
  53. package/src/scss/mixins/_close.scss +0 -1
  54. package/src/scss/mixins/_custom-forms.scss +442 -409
  55. package/src/scss/mixins/_dropdown-menu.scss +483 -406
  56. package/src/scss/mixins/_forms.scss +332 -256
  57. package/src/scss/mixins/_input-groups.scss +405 -11
  58. package/src/scss/mixins/_labels.scss +320 -296
  59. package/src/scss/mixins/_links.scss +522 -476
  60. package/src/scss/mixins/_nav.scss +202 -131
  61. package/src/scss/mixins/_navbar.scss +791 -140
  62. package/src/scss/mixins/_pagination.scss +422 -0
  63. package/src/scss/mixins/_popovers.scss +90 -0
  64. package/src/scss/mixins/_toggle-switch.scss +64 -0
  65. package/src/scss/mixins/_tooltip.scss +70 -0
  66. package/src/scss/variables/_alerts.scss +1 -0
  67. package/src/scss/variables/_application-bar.scss +18 -6
  68. package/src/scss/variables/_buttons.scss +26 -3
  69. package/src/scss/variables/_cards.scss +273 -1
  70. package/src/scss/variables/_dropdowns.scss +31 -2
  71. package/src/scss/variables/_forms.scss +405 -22
  72. package/src/scss/variables/_management-bar.scss +45 -12
  73. package/src/scss/variables/_navigation-bar.scss +95 -14
  74. package/src/scss/variables/_navs.scss +266 -33
  75. package/src/scss/variables/_pagination.scss +261 -61
  76. package/src/scss/variables/_popovers.scss +392 -0
  77. package/src/scss/variables/_sidebar.scss +17 -5
  78. package/src/scss/variables/_tooltip.scss +299 -0
package/src/scss/variables/_pagination.scss CHANGED
@@ -82,36 +82,7 @@ $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
- background-color: $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: (
110
- margin-top: 0,
111
- ),
112
- ),
113
- $pagination-link
114
- );
85
+ // .page-link
115
86
 
116
87
  $pagination-link-hover: () !default;
117
88
  $pagination-link-hover: map-deep-merge(
@@ -158,10 +129,103 @@ $pagination-link-disabled: map-deep-merge(
158
129
  opacity: $pagination-disabled-opacity,
159
130
  pointer-events: $pagination-disabled-pointer-events,
160
131
  z-index: $zindex-pagination-link-disabled,
132
+ active: (
133
+ pointer-events: none,
134
+ ),
161
135
  ),
162
136
  $pagination-link-disabled
163
137
  );
164
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
+
165
229
  // Pagination Dropdown Menu
166
230
 
167
231
  $pagination-dropdown-menu-spacer-y: null !default;
@@ -219,34 +283,6 @@ $pagination-items-per-page-lexicon-icon-margin-top: 0.125rem !default; // 2px
219
283
 
220
284
  // Pagination Items Per Page Link
221
285
 
222
- $pagination-items-per-page-link: () !default;
223
- $pagination-items-per-page-link: map-deep-merge(
224
- (
225
- align-items: center,
226
- background-color: $pagination-items-per-page-bg,
227
- border-color: $pagination-items-per-page-border-color,
228
- border-radius: $pagination-items-per-page-border-radius,
229
- border-style: solid,
230
- border-width: $pagination-border-width,
231
- color: $pagination-items-per-page-color,
232
- display: inline-flex,
233
- height: $pagination-item-height,
234
- justify-content: center,
235
- line-height: $pagination-line-height,
236
- padding-bottom: $pagination-padding-y,
237
- padding-left: $pagination-padding-x,
238
- padding-right: $pagination-padding-x,
239
- padding-top: $pagination-padding-y,
240
- text-decoration: none,
241
- transition: $pagination-items-per-page-transition,
242
- lexicon-icon: (
243
- margin-left: $pagination-items-per-page-lexicon-icon-margin-left,
244
- margin-top: $pagination-items-per-page-lexicon-icon-margin-top,
245
- ),
246
- ),
247
- $pagination-items-per-page-link
248
- );
249
-
250
286
  $pagination-items-per-page-link-hover: () !default;
251
287
  $pagination-items-per-page-link-hover: map-deep-merge(
252
288
  (
@@ -290,11 +326,82 @@ $pagination-items-per-page-link-disabled: map-deep-merge(
290
326
  $pagination-items-per-page-link-disabled
291
327
  );
292
328
 
293
- // 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
294
383
 
295
384
  $pagination-results-color: null !default;
296
385
 
297
- // 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
298
405
 
299
406
  $pagination-font-size-sm: $font-size-sm !default;
300
407
  $pagination-line-height-sm: 1 !default;
@@ -308,7 +415,55 @@ $pagination-link-border-radius-sm: $border-radius-sm !default;
308
415
  $pagination-items-per-page-lexicon-icon-margin-left-sm: null !default;
309
416
  $pagination-items-per-page-lexicon-icon-margin-top-sm: null !default;
310
417
 
311
- // 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
312
467
 
313
468
  $pagination-font-size-lg: $font-size-lg !default;
314
469
  $pagination-line-height-lg: 1 !default;
@@ -321,3 +476,48 @@ $pagination-link-border-radius-lg: $border-radius-lg !default;
321
476
 
322
477
  $pagination-items-per-page-lexicon-icon-margin-left-lg: null !default;
323
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
+ );