@clayui/css 3.76.0 → 3.78.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 (12) hide show
  1. package/lib/css/atlas.css +121 -484
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +105 -449
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +76 -1376
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/package.json +2 -2
  9. package/src/scss/_license-text.scss +1 -1
  10. package/src/scss/cadmin/variables/_management-bar.scss +529 -0
  11. package/src/scss/cadmin/variables/_navigation-bar.scss +246 -2
  12. package/src/scss/mixins/_navbar.scss +256 -247
package/src/scss/cadmin/variables/_management-bar.scss CHANGED
@@ -32,6 +32,7 @@ $cadmin-management-bar-size: map-deep-merge(
32
32
  min-height: 64px,
33
33
  padding-x: 0,
34
34
  padding-y: 0,
35
+ font-size-mobile: $cadmin-navbar-font-size,
35
36
  height-mobile: 48px,
36
37
  min-height-mobile: 48px,
37
38
  btn-monospaced-font-size: 16px,
@@ -44,10 +45,538 @@ $cadmin-management-bar-size: map-deep-merge(
44
45
  toggler-margin-x: 14px,
45
46
  active-border-bottom-width: 4px,
46
47
  nav-item-dropdown-margin-top: 0,
48
+ media-breakpoint-down: (),
49
+ media-breakpoint-up: (),
47
50
  ),
48
51
  $cadmin-management-bar-size
49
52
  );
50
53
 
54
+ $cadmin-management-bar-base: () !default;
55
+ $cadmin-management-bar-base: map-deep-merge(
56
+ (
57
+ border-color: transparent,
58
+ border-style: solid,
59
+ navbar-nav: (
60
+ nav-link: (
61
+ border-radius: $cadmin-border-radius,
62
+ outline: 0,
63
+ transition: box-shadow 0.15s ease-in-out,
64
+ focus: (
65
+ box-shadow: $cadmin-btn-focus-box-shadow,
66
+ ),
67
+ disabled: (
68
+ box-shadow: none,
69
+ ),
70
+ ),
71
+ ),
72
+ navbar-overlay: (
73
+ padding: 0,
74
+ ),
75
+ media-breakpoint-down: (
76
+ sm: (
77
+ navbar-expand-md: (
78
+ min-height:
79
+ map-get($cadmin-management-bar-size, min-height-mobile),
80
+ navbar-collapse-absolute: (
81
+ navbar-collapse: (
82
+ border-color: transparent,
83
+ border-style: solid,
84
+ border-width: 0
85
+ map-get(
86
+ $cadmin-management-bar-size,
87
+ border-right-width
88
+ )
89
+ map-get(
90
+ $cadmin-management-bar-size,
91
+ border-bottom-width
92
+ )
93
+ map-get(
94
+ $cadmin-management-bar-size,
95
+ border-left-width
96
+ ),
97
+ box-shadow:
98
+ clay-enable-shadows(
99
+ map-get(
100
+ $cadmin-management-bar-size,
101
+ box-shadow
102
+ )
103
+ ),
104
+ left:
105
+ math-sign(
106
+ map-get(
107
+ $cadmin-management-bar-size,
108
+ border-left-width
109
+ )
110
+ ),
111
+ margin-top:
112
+ map-get(
113
+ $cadmin-management-bar-size,
114
+ border-bottom-width
115
+ ),
116
+ padding-bottom:
117
+ map-get($cadmin-management-bar-size, padding-y),
118
+ padding-left:
119
+ map-get($cadmin-management-bar-size, padding-x),
120
+ padding-right:
121
+ map-get($cadmin-management-bar-size, padding-x),
122
+ padding-top:
123
+ map-get($cadmin-management-bar-size, padding-y),
124
+ right:
125
+ math-sign(
126
+ map-get(
127
+ $cadmin-management-bar-size,
128
+ border-right-width
129
+ )
130
+ ),
131
+ ),
132
+ ),
133
+ navbar-form: (
134
+ height:
135
+ calc(
136
+ #{map-get(
137
+ $cadmin-management-bar-size,
138
+ height-mobile
139
+ )} - #{map-get(
140
+ $cadmin-management-bar-size,
141
+ border-bottom-width
142
+ )}
143
+ ),
144
+ padding-bottom:
145
+ setter(
146
+ map-get(
147
+ $cadmin-management-bar-size,
148
+ link-padding-y-mobile
149
+ ),
150
+ calc(
151
+ (
152
+ #{map-get(
153
+ $cadmin-management-bar-size,
154
+ link-height-mobile
155
+ )} - (#{map-get(
156
+ $cadmin-management-bar-size,
157
+ font-size-mobile
158
+ )} * #{$cadmin-line-height-base})
159
+ ) * 0.5
160
+ )
161
+ ),
162
+ padding-left:
163
+ map-get(
164
+ $cadmin-management-bar-size,
165
+ link-padding-x-mobile
166
+ ),
167
+ padding-right:
168
+ map-get(
169
+ $cadmin-management-bar-size,
170
+ link-padding-x-mobile
171
+ ),
172
+ padding-top:
173
+ setter(
174
+ map-get(
175
+ $cadmin-management-bar-size,
176
+ link-padding-y-mobile
177
+ ),
178
+ calc(
179
+ (
180
+ #{map-get(
181
+ $cadmin-management-bar-size,
182
+ link-height-mobile
183
+ )} - (#{map-get(
184
+ $cadmin-management-bar-size,
185
+ font-size-mobile
186
+ )} * #{$cadmin-line-height-base})
187
+ ) * 0.5
188
+ )
189
+ ),
190
+ form-control: (
191
+ height:
192
+ map-get(
193
+ $cadmin-management-bar-size,
194
+ form-control-height-mobile
195
+ ),
196
+ padding-bottom: 0,
197
+ padding-top: 0,
198
+ ),
199
+ ),
200
+ ),
201
+ ),
202
+ ),
203
+ media-breakpoint-up: (
204
+ md: (
205
+ navbar-expand-md: (
206
+ navbar-form: (
207
+ height:
208
+ calc(
209
+ #{map-get($cadmin-management-bar-size, height)} -
210
+ #{map-get(
211
+ $cadmin-management-bar-size,
212
+ border-bottom-width
213
+ )}
214
+ ),
215
+ padding-left:
216
+ map-get($cadmin-management-bar-size, link-padding-x),
217
+ padding-right:
218
+ map-get($cadmin-management-bar-size, link-padding-x),
219
+ container: (
220
+ padding-left: 0,
221
+ padding-right: 0,
222
+ ),
223
+ container-fluid: (
224
+ padding-left: 0,
225
+ padding-right: 0,
226
+ ),
227
+ form-control: (
228
+ height:
229
+ map-get(
230
+ $cadmin-management-bar-size,
231
+ form-control-height
232
+ ),
233
+ ),
234
+ ),
235
+ navbar-nav: (
236
+ nav-item: (
237
+ custom-control: (
238
+ margin-left:
239
+ setter(
240
+ map-get(
241
+ $cadmin-management-bar-size,
242
+ btn-margin-x
243
+ ),
244
+ map-get(
245
+ $cadmin-management-bar-size,
246
+ link-padding-x
247
+ )
248
+ ),
249
+ margin-right:
250
+ setter(
251
+ map-get(
252
+ $cadmin-management-bar-size,
253
+ btn-margin-x
254
+ ),
255
+ map-get(
256
+ $cadmin-management-bar-size,
257
+ link-padding-x
258
+ )
259
+ ),
260
+ ),
261
+ ),
262
+ nav-link: (
263
+ margin-bottom:
264
+ setter(
265
+ map-get(
266
+ $cadmin-management-bar-size,
267
+ link-margin-y
268
+ ),
269
+ calc(
270
+ (
271
+ (
272
+ #{map-get(
273
+ $cadmin-management-bar-size,
274
+ height
275
+ )} - #{map-get(
276
+ $cadmin-management-bar-size,
277
+ border-bottom-width
278
+ )}
279
+ ) - #{map-get(
280
+ $cadmin-management-bar-size,
281
+ link-height
282
+ )}
283
+ ) * 0.5
284
+ )
285
+ ),
286
+ margin-left:
287
+ map-get(
288
+ $cadmin-management-bar-size,
289
+ link-margin-x
290
+ ),
291
+ margin-right:
292
+ map-get(
293
+ $cadmin-management-bar-size,
294
+ link-margin-x
295
+ ),
296
+ margin-top:
297
+ setter(
298
+ map-get(
299
+ $cadmin-management-bar-size,
300
+ link-margin-y
301
+ ),
302
+ calc(
303
+ (
304
+ (
305
+ #{map-get(
306
+ $cadmin-management-bar-size,
307
+ height
308
+ )} - #{map-get(
309
+ $cadmin-management-bar-size,
310
+ border-bottom-width
311
+ )}
312
+ ) - #{map-get(
313
+ $cadmin-management-bar-size,
314
+ link-height
315
+ )}
316
+ ) * 0.5
317
+ )
318
+ ),
319
+ padding-bottom:
320
+ setter(
321
+ map-get(
322
+ $cadmin-management-bar-size,
323
+ link-padding-y
324
+ ),
325
+ calc(
326
+ (
327
+ #{map-get(
328
+ $cadmin-management-bar-size,
329
+ link-height
330
+ )} - (#{map-get(
331
+ $cadmin-management-bar-size,
332
+ font-size
333
+ )} * #{$cadmin-line-height-base})
334
+ ) * 0.5
335
+ )
336
+ ),
337
+ padding-left:
338
+ map-get(
339
+ $cadmin-management-bar-size,
340
+ link-padding-x
341
+ ),
342
+ padding-right:
343
+ map-get(
344
+ $cadmin-management-bar-size,
345
+ link-padding-x
346
+ ),
347
+ padding-top:
348
+ setter(
349
+ map-get(
350
+ $cadmin-management-bar-size,
351
+ link-padding-y
352
+ ),
353
+ calc(
354
+ (
355
+ #{map-get(
356
+ $cadmin-management-bar-size,
357
+ link-height
358
+ )} - (#{map-get(
359
+ $cadmin-management-bar-size,
360
+ font-size
361
+ )} * #{$cadmin-line-height-base})
362
+ ) * 0.5
363
+ )
364
+ ),
365
+ ),
366
+ nav-link-monospaced: (
367
+ font-size:
368
+ map-get(
369
+ $cadmin-management-bar-size,
370
+ btn-monospaced-font-size
371
+ ),
372
+ margin-bottom:
373
+ setter(
374
+ map-get(
375
+ $cadmin-management-bar-size,
376
+ btn-margin-y
377
+ ),
378
+ calc(
379
+ (
380
+ #{map-get(
381
+ $cadmin-management-bar-size,
382
+ height
383
+ )} - #{map-get(
384
+ $cadmin-management-bar-size,
385
+ border-bottom-width
386
+ )} - #{map-get(
387
+ $cadmin-management-bar-size,
388
+ padding-y
389
+ )} * 2 - #{setter(
390
+ map-get(
391
+ $cadmin-management-bar-size,
392
+ btn-monospaced-size
393
+ ),
394
+ 2rem
395
+ )}
396
+ ) * 0.5
397
+ )
398
+ ),
399
+ margin-left:
400
+ map-get(
401
+ $cadmin-management-bar-size,
402
+ btn-margin-x
403
+ ),
404
+ margin-right:
405
+ map-get(
406
+ $cadmin-management-bar-size,
407
+ btn-margin-x
408
+ ),
409
+ margin-top:
410
+ setter(
411
+ map-get(
412
+ $cadmin-management-bar-size,
413
+ btn-margin-y
414
+ ),
415
+ calc(
416
+ (
417
+ #{map-get(
418
+ $cadmin-management-bar-size,
419
+ height
420
+ )} - #{map-get(
421
+ $cadmin-management-bar-size,
422
+ border-bottom-width
423
+ )} - #{map-get(
424
+ $cadmin-management-bar-size,
425
+ padding-y
426
+ )} * 2 - #{setter(
427
+ map-get(
428
+ $cadmin-management-bar-size,
429
+ btn-monospaced-size
430
+ ),
431
+ 2rem
432
+ )}
433
+ ) * 0.5
434
+ )
435
+ ),
436
+ padding: 0,
437
+ ),
438
+ nav-btn: (
439
+ font-size: inherit,
440
+ height:
441
+ map-get(
442
+ $cadmin-management-bar-size,
443
+ btn-monospaced-size
444
+ ),
445
+ margin-bottom:
446
+ setter(
447
+ map-get(
448
+ $cadmin-management-bar-size,
449
+ btn-margin-y
450
+ ),
451
+ calc(
452
+ (
453
+ #{map-get(
454
+ $cadmin-management-bar-size,
455
+ height
456
+ )} - #{map-get(
457
+ $cadmin-management-bar-size,
458
+ border-bottom-width
459
+ )} - #{map-get(
460
+ $cadmin-management-bar-size,
461
+ padding-y
462
+ )} * 2 - #{setter(
463
+ map-get(
464
+ $cadmin-management-bar-size,
465
+ btn-monospaced-size
466
+ ),
467
+ 2rem
468
+ )}
469
+ ) * 0.5
470
+ )
471
+ ),
472
+ margin-left:
473
+ map-get(
474
+ $cadmin-management-bar-size,
475
+ btn-margin-x
476
+ ),
477
+ margin-right:
478
+ map-get(
479
+ $cadmin-management-bar-size,
480
+ btn-margin-x
481
+ ),
482
+ margin-top:
483
+ setter(
484
+ map-get(
485
+ $cadmin-management-bar-size,
486
+ btn-margin-y
487
+ ),
488
+ calc(
489
+ (
490
+ #{map-get(
491
+ $cadmin-management-bar-size,
492
+ height
493
+ )} - #{map-get(
494
+ $cadmin-management-bar-size,
495
+ border-bottom-width
496
+ )} - #{map-get(
497
+ $cadmin-management-bar-size,
498
+ padding-y
499
+ )} * 2 - #{setter(
500
+ map-get(
501
+ $cadmin-management-bar-size,
502
+ btn-monospaced-size
503
+ ),
504
+ 2rem
505
+ )}
506
+ ) * 0.5
507
+ )
508
+ ),
509
+ min-width:
510
+ map-get(
511
+ $cadmin-management-bar-size,
512
+ btn-monospaced-size
513
+ ),
514
+ padding-bottom:
515
+ setter(
516
+ map-get(
517
+ $cadmin-management-bar-size,
518
+ btn-padding-y
519
+ ),
520
+ calc(
521
+ (
522
+ #{map-get(
523
+ $cadmin-management-bar-size,
524
+ link-height
525
+ )} - (#{map-get(
526
+ $cadmin-management-bar-size,
527
+ font-size
528
+ )} * #{$cadmin-line-height-base})
529
+ ) * 0.5
530
+ )
531
+ ),
532
+ padding-left:
533
+ map-get(
534
+ $cadmin-management-bar-size,
535
+ btn-padding-x
536
+ ),
537
+ padding-right:
538
+ map-get(
539
+ $cadmin-management-bar-size,
540
+ btn-padding-x
541
+ ),
542
+ padding-top:
543
+ setter(
544
+ map-get(
545
+ $cadmin-management-bar-size,
546
+ btn-padding-y
547
+ ),
548
+ calc(
549
+ (
550
+ #{map-get(
551
+ $cadmin-management-bar-size,
552
+ link-height
553
+ )} - (#{map-get(
554
+ $cadmin-management-bar-size,
555
+ font-size
556
+ )} * #{$cadmin-line-height-base})
557
+ ) * 0.5
558
+ )
559
+ ),
560
+ ),
561
+ nav-btn-monospaced: (
562
+ font-size:
563
+ map-get(
564
+ $cadmin-management-bar-size,
565
+ btn-monospaced-font-size
566
+ ),
567
+ padding-bottom: 0,
568
+ padding-left: 0,
569
+ padding-right: 0,
570
+ padding-top: 0,
571
+ ),
572
+ ),
573
+ ),
574
+ ),
575
+ ),
576
+ ),
577
+ $cadmin-management-bar-base
578
+ );
579
+
51
580
  $cadmin-management-bar-light: () !default;
52
581
  $cadmin-management-bar-light: map-deep-merge(
53
582
  (