@clayui/css 3.124.0 → 3.127.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 (40) hide show
  1. package/lib/css/atlas.css +116 -16
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +115 -15
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +382 -277
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/gallery.svg +7 -0
  8. package/lib/images/icons/icons.svg +1 -1
  9. package/package.json +2 -2
  10. package/src/images/icons/gallery.svg +7 -0
  11. package/src/scss/_license-text.scss +1 -1
  12. package/src/scss/atlas/variables/_globals.scss +17 -1
  13. package/src/scss/cadmin/components/_multi-step-nav.scss +77 -8
  14. package/src/scss/cadmin/variables/_dropdowns.scss +15 -6
  15. package/src/scss/cadmin/variables/_globals.scss +23 -11
  16. package/src/scss/cadmin/variables/_menubar.scss +0 -1
  17. package/src/scss/cadmin/variables/_multi-step-nav.scss +28 -2
  18. package/src/scss/cadmin/variables/_stickers.scss +110 -0
  19. package/src/scss/cadmin/variables/_toggle-switch.scss +2 -3
  20. package/src/scss/components/_multi-step-nav.scss +70 -8
  21. package/src/scss/functions/_global-functions.scss +8 -2
  22. package/src/scss/functions/_lx-icons-generated.scss +2 -0
  23. package/src/scss/mixins/_buttons.scss +4 -29
  24. package/src/scss/mixins/_cards.scss +1 -26
  25. package/src/scss/mixins/_close.scss +2 -27
  26. package/src/scss/mixins/_custom-forms.scss +3 -28
  27. package/src/scss/mixins/_dropdown-menu.scss +18 -24
  28. package/src/scss/mixins/_forms.scss +4 -79
  29. package/src/scss/mixins/_links.scss +6 -31
  30. package/src/scss/mixins/_modals.scss +1 -26
  31. package/src/scss/mixins/_popovers.scss +1 -26
  32. package/src/scss/mixins/_sidebar.scss +3 -28
  33. package/src/scss/mixins/_slideout.scss +1 -26
  34. package/src/scss/mixins/_toggle-switch.scss +6 -31
  35. package/src/scss/variables/_dropdowns.scss +15 -6
  36. package/src/scss/variables/_globals.scss +16 -0
  37. package/src/scss/variables/_menubar.scss +0 -1
  38. package/src/scss/variables/_multi-step-nav.scss +28 -2
  39. package/src/scss/variables/_stickers.scss +110 -0
  40. package/src/scss/variables/_toggle-switch.scss +2 -3
package/lib/css/base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.124.0
3
+ * Clay 3.127.0
4
4
  *
5
5
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
6
6
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -5461,6 +5461,56 @@ input[type=button].btn-block {
5461
5461
  background-color: #343a40;
5462
5462
  color: #fff;
5463
5463
  }
5464
+ .sticker-outline-0 {
5465
+ background-color: #f8f9fa;
5466
+ border: 1px solid #343a40;
5467
+ color: #343a40;
5468
+ }
5469
+ .sticker-outline-1 {
5470
+ background-color: #f2e5ff;
5471
+ border: 1px solid #6f42c1;
5472
+ color: #6f42c1;
5473
+ }
5474
+ .sticker-outline-2 {
5475
+ background-color: #fff8e5;
5476
+ border: 1px solid #b38900;
5477
+ color: #b38900;
5478
+ }
5479
+ .sticker-outline-3 {
5480
+ background-color: #f1fce9;
5481
+ border: 1px solid #28a745;
5482
+ color: #28a745;
5483
+ }
5484
+ .sticker-outline-4 {
5485
+ background-color: #ffe5e5;
5486
+ border: 1px solid #dc3545;
5487
+ color: #dc3545;
5488
+ }
5489
+ .sticker-outline-5 {
5490
+ background-color: #fff0e5;
5491
+ border: 1px solid #fd7e14;
5492
+ color: #fd7e14;
5493
+ }
5494
+ .sticker-outline-6 {
5495
+ background-color: #eafbf8;
5496
+ border: 1px solid #20c997;
5497
+ color: #20c997;
5498
+ }
5499
+ .sticker-outline-7 {
5500
+ background-color: #e5f6ff;
5501
+ border: 1px solid #17a2b8;
5502
+ color: #17a2b8;
5503
+ }
5504
+ .sticker-outline-8 {
5505
+ background-color: #ffe5f4;
5506
+ border: 1px solid #e83e8c;
5507
+ color: #800048;
5508
+ }
5509
+ .sticker-outline-9 {
5510
+ background-color: #fff;
5511
+ border: 1px solid #828e9a;
5512
+ color: #828e9a;
5513
+ }
5464
5514
  .sticker-circle {
5465
5515
  border-radius: 5000px;
5466
5516
  }
@@ -6669,6 +6719,7 @@ input[type=button].btn-block {
6669
6719
  width: auto;
6670
6720
  }
6671
6721
  .dropdown-item.autofit-row {
6722
+ align-items: center;
6672
6723
  padding-left: calc(1.5rem - 0.25rem);
6673
6724
  padding-right: calc(1.5rem - 0.25rem);
6674
6725
  }
@@ -6677,6 +6728,7 @@ input[type=button].btn-block {
6677
6728
  padding-right: 0.25rem;
6678
6729
  }
6679
6730
  .dropdown-item .autofit-row {
6731
+ align-items: center;
6680
6732
  margin-left: -0.25rem;
6681
6733
  margin-right: -0.25rem;
6682
6734
  width: auto;
@@ -6694,6 +6746,17 @@ input[type=button].btn-block {
6694
6746
  .dropdown-item .custom-control-label {
6695
6747
  font-weight: 400;
6696
6748
  }
6749
+ .dropdown-item .inline-item {
6750
+ line-height: 1;
6751
+ }
6752
+ .dropdown-item .inline-item .lexicon-icon {
6753
+ font-size: 1rem;
6754
+ margin-top: 0;
6755
+ }
6756
+ .dropdown-item .label {
6757
+ margin-bottom: 0;
6758
+ margin-top: 0.3125rem;
6759
+ }
6697
6760
  .dropdown-item .form-check {
6698
6761
  margin-bottom: 0;
6699
6762
  }
@@ -6827,10 +6890,6 @@ input[type=button].btn-block {
6827
6890
  margin-top: -0.3125rem;
6828
6891
  width: auto;
6829
6892
  }
6830
- .dropdown-menu-select.dropdown-menu .dropdown-item.autofit-row {
6831
- padding-left: 1.5rem;
6832
- padding-right: 0.5rem;
6833
- }
6834
6893
  .dropdown-menu-select.dropdown-menu .dropdown-item-scroll {
6835
6894
  font-size: 1rem;
6836
6895
  height: 2rem;
@@ -6907,11 +6966,9 @@ input[type=button].btn-block {
6907
6966
  }
6908
6967
  .dropdown-menu-select.dropdown-menu.dropdown-menu-indicator-start .dropdown-item-indicator-start {
6909
6968
  left: 0.5rem;
6910
- top: 0.5rem;
6911
6969
  }
6912
6970
  .dropdown-menu-select.dropdown-menu.dropdown-menu-indicator-end .dropdown-item-indicator-end {
6913
6971
  right: 0.5rem;
6914
- top: 0.5rem;
6915
6972
  }
6916
6973
  .dropdown-menu-select.dropdown-menu-height-lg .inline-scroller {
6917
6974
  max-height: 432px;
@@ -7079,6 +7136,7 @@ input[type=button].btn-block {
7079
7136
  width: 1rem;
7080
7137
  }
7081
7138
  .dropdown-item-indicator-start .lexicon-icon {
7139
+ font-size: 1rem;
7082
7140
  margin-top: 0;
7083
7141
  }
7084
7142
 
@@ -7134,6 +7192,7 @@ input[type=button].btn-block {
7134
7192
  width: 1rem;
7135
7193
  }
7136
7194
  .dropdown-item-indicator-end .lexicon-icon {
7195
+ font-size: 16px;
7137
7196
  margin-top: 0;
7138
7197
  }
7139
7198
 
@@ -12539,6 +12598,9 @@ label.custom-control-label {
12539
12598
  margin-bottom: 10px;
12540
12599
  position: relative;
12541
12600
  }
12601
+ .multi-step-item:last-child .multi-step-divider {
12602
+ display: none;
12603
+ }
12542
12604
  .multi-step-item.active .multi-step-icon {
12543
12605
  background-color: #007bff;
12544
12606
  background-position: center;
@@ -12594,9 +12656,10 @@ label.custom-control-label {
12594
12656
  cursor: not-allowed;
12595
12657
  opacity: 1;
12596
12658
  }
12597
- .multi-step-item.disabled .multi-step-icon:focus {
12659
+ .multi-step-item.disabled .multi-step-icon.focus, .multi-step-item.disabled .multi-step-icon:focus-visible, .c-prefers-focus .multi-step-item.disabled .multi-step-icon:focus {
12598
12660
  box-shadow: none;
12599
12661
  }
12662
+
12600
12663
  .multi-step-item.disabled .multi-step-indicator-label {
12601
12664
  color: #ced4da;
12602
12665
  }
@@ -12667,6 +12730,7 @@ label.custom-control-label {
12667
12730
  padding-left: 0;
12668
12731
  padding-right: 0;
12669
12732
  padding-top: 0;
12733
+ position: relative;
12670
12734
  transition: box-shadow 0.15s ease-in-out;
12671
12735
  width: 2rem;
12672
12736
  }
@@ -12684,13 +12748,12 @@ label.custom-control-label {
12684
12748
  color: rgba(0, 0, 0, 0.7);
12685
12749
  text-decoration: none;
12686
12750
  }
12687
- .multi-step-icon:focus {
12688
- background-color: #e9ecef;
12751
+ .multi-step-icon.focus, .multi-step-icon:focus-visible, .c-prefers-focus .multi-step-icon:focus {
12689
12752
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
12690
- color: rgba(0, 0, 0, 0.7);
12691
12753
  outline: 0;
12692
12754
  text-decoration: none;
12693
12755
  }
12756
+
12694
12757
  .multi-step-icon[data-multi-step-icon]::before {
12695
12758
  content: '\FEFF' attr(data-multi-step-icon);
12696
12759
  height: 2rem;
@@ -12720,6 +12783,28 @@ label.custom-control-label {
12720
12783
  width: 150px;
12721
12784
  }
12722
12785
 
12786
+ .multi-step-nav-center {
12787
+ padding: 0;
12788
+ text-align: center;
12789
+ }
12790
+ .multi-step-nav-center .multi-step-item {
12791
+ flex-grow: 1;
12792
+ width: 75px;
12793
+ }
12794
+ .multi-step-nav-center .multi-step-divider {
12795
+ left: 50%;
12796
+ margin-left: 1rem;
12797
+ width: calc(100% - 2rem);
12798
+ }
12799
+ .multi-step-nav-center .multi-step-indicator {
12800
+ left: 50%;
12801
+ transform: translateX(-50%);
12802
+ }
12803
+ .multi-step-nav-center .multi-step-title {
12804
+ margin-left: 12.5%;
12805
+ max-width: 75%;
12806
+ }
12807
+
12723
12808
  @media (max-width: 767.98px) {
12724
12809
  .multi-step-nav-collapse-sm {
12725
12810
  flex-wrap: nowrap;
@@ -12737,6 +12822,23 @@ label.custom-control-label {
12737
12822
  max-width: none;
12738
12823
  transform: none;
12739
12824
  }
12825
+ .multi-step-nav-collapse-sm.multi-step-nav-center .multi-step-item {
12826
+ flex-grow: 0;
12827
+ width: auto;
12828
+ }
12829
+ .multi-step-nav-collapse-sm.multi-step-nav-center .multi-step-item-expand {
12830
+ flex-grow: 1;
12831
+ width: 75px;
12832
+ }
12833
+ .multi-step-nav-collapse-sm.multi-step-nav-center .multi-step-divider {
12834
+ left: auto;
12835
+ margin-left: 2rem;
12836
+ width: auto;
12837
+ }
12838
+ .multi-step-nav-collapse-sm.multi-step-nav-center .multi-step-indicator {
12839
+ left: auto;
12840
+ transform: none;
12841
+ }
12740
12842
  .multi-step-nav-collapse-sm .active.multi-step-item {
12741
12843
  position: static;
12742
12844
  }
@@ -13260,7 +13362,6 @@ label.custom-control-label {
13260
13362
  color: rgba(0, 0, 0, 0.3);
13261
13363
  box-shadow: none;
13262
13364
  font-weight: 400;
13263
- letter-spacing: 0.016rem;
13264
13365
  }
13265
13366
  .menubar-primary .nav-link:disabled::before, .menubar-primary .nav-link.disabled::before {
13266
13367
  content: none;
@@ -21584,7 +21685,7 @@ td.table-focus {
21584
21685
  margin-right: 0.5rem;
21585
21686
  }
21586
21687
  .toggle-switch-sm .simple-toggle-switch .toggle-switch-label, .simple-toggle-switch.toggle-switch-sm .toggle-switch-label {
21587
- max-width: calc(100% - 38px);
21688
+ max-width: calc(100% - 34px);
21588
21689
  }
21589
21690
  .toggle-switch-sm .toggle-switch-check {
21590
21691
  height: 16px;
@@ -21603,10 +21704,9 @@ td.table-focus {
21603
21704
  }
21604
21705
  .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle {
21605
21706
  min-width: 30px;
21606
- max-width: 30px;
21607
21707
  }
21608
21708
  .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
21609
- margin-left: 38px;
21709
+ margin-left: 34px;
21610
21710
  }
21611
21711
  .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
21612
21712
  font-size: 0.6875rem;