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