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