@clayui/css 3.46.0 → 3.47.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 (35) hide show
  1. package/lib/css/atlas.css +143 -74
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +107 -56
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css.map +1 -1
  6. package/lib/css/cadmin.css +123 -64
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/icons.svg +1 -1
  9. package/package.json +2 -2
  10. package/src/scss/atlas/variables/_cards.scss +12 -0
  11. package/src/scss/atlas/variables/_list-group.scss +28 -12
  12. package/src/scss/cadmin/components/_cards.scss +10 -120
  13. package/src/scss/cadmin/components/_empty-state.scss +36 -0
  14. package/src/scss/cadmin/components/_links.scss +0 -8
  15. package/src/scss/cadmin/components/_treeview.scss +58 -1
  16. package/src/scss/cadmin/variables/_cards.scss +164 -1
  17. package/src/scss/cadmin/variables/_empty-state.scss +23 -0
  18. package/src/scss/cadmin/variables/_links.scss +14 -0
  19. package/src/scss/cadmin/variables/_list-group.scss +32 -16
  20. package/src/scss/cadmin/variables/_sidebar.scss +1 -1
  21. package/src/scss/cadmin/variables/_treeview.scss +17 -1
  22. package/src/scss/components/_cards.scss +28 -122
  23. package/src/scss/components/_empty-state.scss +30 -0
  24. package/src/scss/components/_links.scss +1 -9
  25. package/src/scss/components/_tables.scss +0 -8
  26. package/src/scss/components/_treeview.scss +58 -1
  27. package/src/scss/mixins/_cards.scss +59 -25
  28. package/src/scss/mixins/_links.scss +22 -2
  29. package/src/scss/variables/_cards.scss +158 -4
  30. package/src/scss/variables/_empty-state.scss +23 -0
  31. package/src/scss/variables/_links.scss +21 -3
  32. package/src/scss/variables/_list-group.scss +22 -12
  33. package/src/scss/variables/_sidebar.scss +3 -3
  34. package/src/scss/variables/_tables.scss +14 -0
  35. package/src/scss/variables/_treeview.scss +21 -1
package/lib/css/base.css CHANGED
@@ -4402,6 +4402,20 @@ input[type=button].btn-block {
4402
4402
  word-wrap: break-word;
4403
4403
  }
4404
4404
 
4405
+ .c-empty-state-sm.c-empty-state-animation {
4406
+ margin: 2.5rem auto 2rem;
4407
+ max-width: 268px;
4408
+ }
4409
+ .c-empty-state-sm .c-empty-state-image {
4410
+ max-width: 120px;
4411
+ }
4412
+ .c-empty-state-sm .c-empty-state-title {
4413
+ font-size: 1rem;
4414
+ line-height: 1.5;
4415
+ }
4416
+ .c-empty-state-sm .c-empty-state-text {
4417
+ font-size: 0.875rem;
4418
+ }
4405
4419
  .label {
4406
4420
  border-color: #212529;
4407
4421
  border-radius: 0.25rem;
@@ -5070,33 +5084,16 @@ input[type=button].btn-block {
5070
5084
  .card-horizontal {
5071
5085
  background-color: #fff;
5072
5086
  border-color: rgba(0, 0, 0, 0.125);
5087
+ border-radius: 0.25rem;
5073
5088
  border-style: solid;
5074
5089
  border-width: 0.0625rem;
5075
- border-radius: 0.25rem;
5076
5090
  display: block;
5077
5091
  margin-bottom: 1.5rem;
5078
5092
  min-width: 0;
5079
5093
  position: relative;
5094
+ overflow-wrap: break-word;
5080
5095
  word-wrap: break-word;
5081
5096
  }
5082
- .card .autofit-col:first-child,
5083
- .card-horizontal .autofit-col:first-child {
5084
- border-bottom-left-radius: calc(
5085
- 0.25rem - 0.0625rem
5086
- );
5087
- border-top-left-radius: calc(
5088
- 0.25rem - 0.0625rem
5089
- );
5090
- }
5091
- .card .autofit-col:last-child,
5092
- .card-horizontal .autofit-col:last-child {
5093
- border-bottom-right-radius: calc(
5094
- 0.25rem - 0.0625rem
5095
- );
5096
- border-top-right-radius: calc(
5097
- 0.25rem - 0.0625rem
5098
- );
5099
- }
5100
5097
  .card .aspect-ratio .label,
5101
5098
  .card-horizontal .aspect-ratio .label {
5102
5099
  display: block;
@@ -5142,6 +5139,24 @@ input[type=button].btn-block {
5142
5139
  margin-left: 0;
5143
5140
  margin-right: 0;
5144
5141
  }
5142
+ .card .autofit-col:first-child,
5143
+ .card-horizontal .autofit-col:first-child {
5144
+ border-bottom-left-radius: calc(
5145
+ 0.25rem - 0.0625rem
5146
+ );
5147
+ border-top-left-radius: calc(
5148
+ 0.25rem - 0.0625rem
5149
+ );
5150
+ }
5151
+ .card .autofit-col:last-child,
5152
+ .card-horizontal .autofit-col:last-child {
5153
+ border-bottom-right-radius: calc(
5154
+ 0.25rem - 0.0625rem
5155
+ );
5156
+ border-top-right-radius: calc(
5157
+ 0.25rem - 0.0625rem
5158
+ );
5159
+ }
5145
5160
  .card > .list-group:first-child .list-group-item:first-child,
5146
5161
  .card-horizontal > .list-group:first-child .list-group-item:first-child {
5147
5162
  border-top-left-radius: 0.25rem;
@@ -5185,16 +5200,17 @@ input[type=button].btn-block {
5185
5200
  margin-bottom: 0;
5186
5201
  margin-top: 0;
5187
5202
  }
5188
- .card-subtitle a {
5203
+ .card-subtitle[href],
5204
+ .card-subtitle [href] {
5189
5205
  color: #6c757d;
5190
5206
  }
5191
- .card-subtitle a:hover {
5207
+ .card-subtitle[href]:hover,
5208
+ .card-subtitle [href]:hover {
5192
5209
  color: #494f54;
5193
5210
  }
5194
5211
  .card-text:last-child {
5195
5212
  margin-bottom: 0;
5196
5213
  }
5197
-
5198
5214
  .card-link {
5199
5215
  color: #007bff;
5200
5216
  }
@@ -5223,11 +5239,7 @@ input[type=button].btn-block {
5223
5239
  padding: 0.75rem 1.25rem;
5224
5240
  }
5225
5241
  .card-header:first-child {
5226
- border-radius: calc(
5227
- 0.25rem - 0.0625rem
5228
- ) calc(
5229
- 0.25rem - 0.0625rem
5230
- ) 0 0;
5242
+ border-radius: calc( 0.25rem - 0.0625rem ) calc( 0.25rem - 0.0625rem ) 0 0;
5231
5243
  }
5232
5244
  .card-header + .list-group .list-group-item:first-child {
5233
5245
  border-top: 0;
@@ -5251,13 +5263,8 @@ input[type=button].btn-block {
5251
5263
  padding: 0.75rem 1.25rem;
5252
5264
  }
5253
5265
  .card-footer:last-child {
5254
- border-radius: 0 0 calc(
5255
- 0.25rem - 0.0625rem
5256
- ) calc(
5257
- 0.25rem - 0.0625rem
5258
- );
5266
+ border-radius: 0 0 calc( 0.25rem - 0.0625rem ) calc( 0.25rem - 0.0625rem );
5259
5267
  }
5260
-
5261
5268
  .card-img-overlay {
5262
5269
  bottom: 0;
5263
5270
  left: 0;
@@ -7842,20 +7849,24 @@ button.link-outline {
7842
7849
  margin-bottom: calc(( 1.9375rem - (1em * 1.2) ) / 2);
7843
7850
  margin-top: calc(( 1.9375rem - (1em * 1.2) ) / 2);
7844
7851
  }
7845
- .component-title a {
7852
+ .component-title[href],
7853
+ .component-title [href] {
7846
7854
  color: #212529;
7847
7855
  }
7848
- .component-title a:hover {
7856
+ .component-title[href]:hover,
7857
+ .component-title [href]:hover {
7849
7858
  color: black;
7850
7859
  }
7851
7860
  .component-subtitle {
7852
7861
  color: #6c757d;
7853
7862
  margin-bottom: 0;
7854
7863
  }
7855
- .component-subtitle a {
7864
+ .component-subtitle[href],
7865
+ .component-subtitle [href] {
7856
7866
  color: #6c757d;
7857
7867
  }
7858
- .component-subtitle a:hover {
7868
+ .component-subtitle[href]:hover,
7869
+ .component-subtitle [href]:hover {
7859
7870
  color: #494f54;
7860
7871
  }
7861
7872
  .component-action {
@@ -10461,41 +10472,49 @@ label.custom-control-label {
10461
10472
  margin-bottom: 0;
10462
10473
  margin-top: -0.25rem;
10463
10474
  }
10464
- .list-group-title a {
10475
+ .list-group-title[href],
10476
+ .list-group-title [href] {
10465
10477
  color: #212529;
10466
10478
  max-width: 100%;
10467
10479
  }
10468
- .list-group-title a:hover {
10480
+ .list-group-title[href]:hover,
10481
+ .list-group-title [href]:hover {
10469
10482
  color: black;
10470
10483
  }
10471
10484
  .list-group-subtitle {
10472
10485
  color: #6c757d;
10473
10486
  margin-bottom: 0;
10474
10487
  }
10475
- .list-group-subtitle a {
10488
+ .list-group-subtitle[href],
10489
+ .list-group-subtitle [href] {
10476
10490
  color: #6c757d;
10477
10491
  }
10478
- .list-group-subtitle a:hover {
10492
+ .list-group-subtitle[href]:hover,
10493
+ .list-group-subtitle [href]:hover {
10479
10494
  color: #494f54;
10480
10495
  }
10481
10496
  .list-group-text {
10482
10497
  color: #212529;
10483
10498
  margin-bottom: 0;
10484
10499
  }
10485
- .list-group-text a {
10500
+ .list-group-text[href],
10501
+ .list-group-text [href] {
10486
10502
  color: #212529;
10487
10503
  }
10488
- .list-group-text a:hover {
10504
+ .list-group-text[href]:hover,
10505
+ .list-group-text [href]:hover {
10489
10506
  color: black;
10490
10507
  }
10491
10508
  .list-group-subtext {
10492
10509
  color: #6c757d;
10493
10510
  margin-bottom: 0;
10494
10511
  }
10495
- .list-group-subtext a {
10512
+ .list-group-subtext[href],
10513
+ .list-group-subtext [href] {
10496
10514
  color: #6c757d;
10497
10515
  }
10498
- .list-group-subtext a:hover {
10516
+ .list-group-subtext[href]:hover,
10517
+ .list-group-subtext [href]:hover {
10499
10518
  color: #494f54;
10500
10519
  }
10501
10520
  .show-dropdown-action-on-active .list-group-item.active .dropdown-action .dropdown-menu {
@@ -16751,7 +16770,8 @@ a.sheet-subtitle:hover {
16751
16770
  font-size: 1.5rem;
16752
16771
  font-weight: 500;
16753
16772
  }
16754
- .sidebar-header .component-title a {
16773
+ .sidebar-header .component-title[href],
16774
+ .sidebar-header .component-title [href] {
16755
16775
  color: #212529;
16756
16776
  }
16757
16777
  .sidebar-header .component-subtitle {
@@ -16843,13 +16863,15 @@ a.sheet-subtitle:hover {
16843
16863
  .sidebar-light .sidebar-list-group .list-group-title {
16844
16864
  font-size: 1rem;
16845
16865
  }
16846
- .sidebar-light .sidebar-list-group .list-group-title a {
16866
+ .sidebar-light .sidebar-list-group .list-group-title[href],
16867
+ .sidebar-light .sidebar-list-group .list-group-title [href] {
16847
16868
  color: #212529;
16848
16869
  }
16849
16870
  .sidebar-light .sidebar-panel {
16850
16871
  background-color: #e9ecef;
16851
16872
  }
16852
- .sidebar-light .sidebar-dd a {
16873
+ .sidebar-light .sidebar-dd[href],
16874
+ .sidebar-light .sidebar-dd [href] {
16853
16875
  color: #212529;
16854
16876
  }
16855
16877
  .sidebar-light .component-navigation-bar {
@@ -16917,13 +16939,15 @@ a.sheet-subtitle:hover {
16917
16939
  .sidebar-dark .sidebar-header .component-title {
16918
16940
  color: inherit;
16919
16941
  }
16920
- .sidebar-dark .sidebar-header .component-title a {
16942
+ .sidebar-dark .sidebar-header .component-title[href],
16943
+ .sidebar-dark .sidebar-header .component-title [href] {
16921
16944
  color: inherit;
16922
16945
  }
16923
16946
  .sidebar-dark .sidebar-header .component-subtitle {
16924
16947
  color: inherit;
16925
16948
  }
16926
- .sidebar-dark .sidebar-header .component-subtitle a {
16949
+ .sidebar-dark .sidebar-header .component-subtitle[href],
16950
+ .sidebar-dark .sidebar-header .component-subtitle [href] {
16927
16951
  color: inherit;
16928
16952
  }
16929
16953
  .sidebar-dark .nav-nested .nav-link {
@@ -17481,10 +17505,12 @@ caption {
17481
17505
  line-height: 1.5;
17482
17506
  margin-bottom: 0;
17483
17507
  }
17484
- .table-title a {
17508
+ .table-title[href],
17509
+ .table-title [href] {
17485
17510
  color: #212529;
17486
17511
  }
17487
- .table-title a:hover {
17512
+ .table-title[href]:hover,
17513
+ .table-title [href]:hover {
17488
17514
  color: #212529;
17489
17515
  }
17490
17516
  .table-link {
@@ -17763,10 +17789,12 @@ caption {
17763
17789
  line-height: 1.2;
17764
17790
  margin-bottom: 0;
17765
17791
  }
17766
- .table-list-title a {
17792
+ .table-list-title[href],
17793
+ .table-list-title [href] {
17767
17794
  color: #212529;
17768
17795
  }
17769
- .table-list-title a:hover {
17796
+ .table-list-title[href]:hover,
17797
+ .table-list-title [href]:hover {
17770
17798
  color: #212529;
17771
17799
  }
17772
17800
  .table-list-link {
@@ -19533,6 +19561,7 @@ caption {
19533
19561
  word-wrap: break-word;
19534
19562
  }
19535
19563
  .treeview-link {
19564
+ background-color: transparent;
19536
19565
  cursor: pointer;
19537
19566
  display: block;
19538
19567
  border-color: transparent;
@@ -19543,6 +19572,7 @@ caption {
19543
19572
  min-width: 100%;
19544
19573
  padding: 0;
19545
19574
  position: relative;
19575
+ text-align: left;
19546
19576
  -ms-user-select: none;
19547
19577
  -moz-user-select: none;
19548
19578
  -webkit-user-select: none;
@@ -19555,6 +19585,9 @@ caption {
19555
19585
  box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
19556
19586
  outline: 0;
19557
19587
  }
19588
+ .treeview-link:disabled, .treeview-link.disabled {
19589
+ cursor: not-allowed;
19590
+ }
19558
19591
  .treeview-link.treeview-dropping-bottom {
19559
19592
  box-shadow: 0 2px 0 0 #75b8ff;
19560
19593
  }
@@ -19566,7 +19599,10 @@ caption {
19566
19599
  box-shadow: 0 -2px 0 0 #75b8ff;
19567
19600
  }
19568
19601
  .treeview-link.hover .component-action, .treeview-link:hover .component-action, .treeview-link.focus .component-action, .treeview-link:focus .component-action {
19569
- display: block;
19602
+ display: flex;
19603
+ }
19604
+ .treeview-link:disabled .component-action, .treeview-link.disabled .component-action {
19605
+ display: none;
19570
19606
  }
19571
19607
  .treeview-link.show .component-expander .component-expanded-d-none, .treeview-link[aria-expanded=true] .component-expander .component-expanded-d-none {
19572
19608
  display: none;
@@ -19607,6 +19643,10 @@ caption {
19607
19643
  .treeview-light .component-expander:hover {
19608
19644
  color: #007bff;
19609
19645
  }
19646
+ .treeview-light .component-expander:disabled, .treeview-light .component-expander.disabled {
19647
+ color: #6c757d;
19648
+ opacity: 0.5;
19649
+ }
19610
19650
  .treeview-light .component-expander.btn-secondary {
19611
19651
  background-color: #fff;
19612
19652
  }
@@ -19625,12 +19665,20 @@ caption {
19625
19665
  background-color: #e9ecef;
19626
19666
  color: #212529;
19627
19667
  }
19668
+ .treeview-light .treeview-link:disabled, .treeview-light .treeview-link.disabled {
19669
+ background-color: transparent;
19670
+ color: rgba(108, 117, 125, 0.5);
19671
+ }
19628
19672
  .treeview-dark .component-expander {
19629
19673
  color: #a9afb5;
19630
19674
  }
19631
19675
  .treeview-dark .component-expander:hover {
19632
19676
  color: #75b8ff;
19633
19677
  }
19678
+ .treeview-dark .component-expander:disabled, .treeview-dark .component-expander.disabled {
19679
+ color: #a9afb5;
19680
+ opacity: 0.5;
19681
+ }
19634
19682
  .treeview-dark .treeview-link {
19635
19683
  color: #a9afb5;
19636
19684
  }
@@ -19643,11 +19691,14 @@ caption {
19643
19691
  }
19644
19692
  .treeview-dark .treeview-link:disabled, .treeview-dark .treeview-link.disabled {
19645
19693
  background-color: transparent;
19646
- color: rgba(169, 175, 181, 0.04);
19694
+ color: rgba(169, 175, 181, 0.5);
19647
19695
  }
19648
19696
  .treeview-dark .component-action {
19649
19697
  color: #a9afb5;
19650
19698
  }
19699
+ .treeview-dark .component-action:disabled, .treeview-dark .component-action.disabled {
19700
+ color: #a9afb5;
19701
+ }
19651
19702
  .bg-checkered {
19652
19703
  background-image: linear-gradient(45deg, #e9ecef 25%, transparent 25%), linear-gradient(-45deg, #e9ecef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9ecef 75%), linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
19653
19704
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;