@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/atlas.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>
@@ -553,7 +553,7 @@ strong {
553
553
  }
554
554
 
555
555
  code {
556
- color: #e50082;
556
+ color: #e60000;
557
557
  font-size: 87.5%;
558
558
  word-wrap: break-word;
559
559
  }
@@ -5592,6 +5592,56 @@ input[type=button].btn-block {
5592
5592
  background-color: #fff;
5593
5593
  color: #272833;
5594
5594
  }
5595
+ .sticker-outline-0 {
5596
+ background-color: #f1f2f5;
5597
+ border: 1px solid #272833;
5598
+ color: #272833;
5599
+ }
5600
+ .sticker-outline-1 {
5601
+ background-color: #f2e5ff;
5602
+ border: 1px solid #aa33ff;
5603
+ color: #aa33ff;
5604
+ }
5605
+ .sticker-outline-2 {
5606
+ background-color: #fff8e5;
5607
+ border: 1px solid #b38900;
5608
+ color: #b38900;
5609
+ }
5610
+ .sticker-outline-3 {
5611
+ background-color: #f1fce9;
5612
+ border: 1px solid #458613;
5613
+ color: #458613;
5614
+ }
5615
+ .sticker-outline-4 {
5616
+ background-color: #ffe5e5;
5617
+ border: 1px solid #e60000;
5618
+ color: #e60000;
5619
+ }
5620
+ .sticker-outline-5 {
5621
+ background-color: #fff0e5;
5622
+ border: 1px solid #cc4e00;
5623
+ color: #cc4e00;
5624
+ }
5625
+ .sticker-outline-6 {
5626
+ background-color: #eafbf8;
5627
+ border: 1px solid #1b7e6e;
5628
+ color: #1b7e6e;
5629
+ }
5630
+ .sticker-outline-7 {
5631
+ background-color: #e5f6ff;
5632
+ border: 1px solid #0077b3;
5633
+ color: #0077b3;
5634
+ }
5635
+ .sticker-outline-8 {
5636
+ background-color: #ffe5f4;
5637
+ border: 1px solid #e50082;
5638
+ color: #800048;
5639
+ }
5640
+ .sticker-outline-9 {
5641
+ background-color: #fff;
5642
+ border: 1px solid #393a4a;
5643
+ color: #393a4a;
5644
+ }
5595
5645
  .sticker-circle {
5596
5646
  border-radius: 5000px;
5597
5647
  }
@@ -6846,6 +6896,7 @@ input[type=button].btn-block {
6846
6896
  width: auto;
6847
6897
  }
6848
6898
  .dropdown-item.autofit-row {
6899
+ align-items: center;
6849
6900
  padding-left: calc(1rem - 0.25rem);
6850
6901
  padding-right: calc(1rem - 0.25rem);
6851
6902
  }
@@ -6854,6 +6905,7 @@ input[type=button].btn-block {
6854
6905
  padding-right: 0.25rem;
6855
6906
  }
6856
6907
  .dropdown-item .autofit-row {
6908
+ align-items: center;
6857
6909
  margin-left: -0.25rem;
6858
6910
  margin-right: -0.25rem;
6859
6911
  width: auto;
@@ -6872,6 +6924,17 @@ input[type=button].btn-block {
6872
6924
  .dropdown-item .custom-control-label {
6873
6925
  font-weight: 400;
6874
6926
  }
6927
+ .dropdown-item .inline-item {
6928
+ line-height: 1;
6929
+ }
6930
+ .dropdown-item .inline-item .lexicon-icon {
6931
+ font-size: 1rem;
6932
+ margin-top: 0;
6933
+ }
6934
+ .dropdown-item .label {
6935
+ margin-bottom: 0;
6936
+ margin-top: 0.3125rem;
6937
+ }
6875
6938
  .dropdown-item .form-check {
6876
6939
  margin-bottom: 0;
6877
6940
  }
@@ -7020,10 +7083,6 @@ input[type=button].btn-block {
7020
7083
  margin-top: -0.3125rem;
7021
7084
  width: auto;
7022
7085
  }
7023
- .dropdown-menu-select.dropdown-menu .dropdown-item.autofit-row {
7024
- padding-left: 1.5rem;
7025
- padding-right: 0.5rem;
7026
- }
7027
7086
  .dropdown-menu-select.dropdown-menu .dropdown-item-scroll {
7028
7087
  font-size: 1rem;
7029
7088
  height: 2rem;
@@ -7100,11 +7159,9 @@ input[type=button].btn-block {
7100
7159
  }
7101
7160
  .dropdown-menu-select.dropdown-menu.dropdown-menu-indicator-start .dropdown-item-indicator-start {
7102
7161
  left: 0.5rem;
7103
- top: 0.5rem;
7104
7162
  }
7105
7163
  .dropdown-menu-select.dropdown-menu.dropdown-menu-indicator-end .dropdown-item-indicator-end {
7106
7164
  right: 0.5rem;
7107
- top: 0.5rem;
7108
7165
  }
7109
7166
  .dropdown-menu-select.dropdown-menu-height-lg .inline-scroller {
7110
7167
  max-height: 432px;
@@ -7274,6 +7331,7 @@ input[type=button].btn-block {
7274
7331
  width: 1rem;
7275
7332
  }
7276
7333
  .dropdown-item-indicator-start .lexicon-icon {
7334
+ font-size: 1rem;
7277
7335
  margin-top: 0;
7278
7336
  }
7279
7337
 
@@ -7329,6 +7387,7 @@ input[type=button].btn-block {
7329
7387
  width: 1rem;
7330
7388
  }
7331
7389
  .dropdown-item-indicator-end .lexicon-icon {
7390
+ font-size: 16px;
7332
7391
  margin-top: 0;
7333
7392
  }
7334
7393
 
@@ -13299,6 +13358,9 @@ label.custom-control-label {
13299
13358
  margin-bottom: 10px;
13300
13359
  position: relative;
13301
13360
  }
13361
+ .multi-step-item:last-child .multi-step-divider {
13362
+ display: none;
13363
+ }
13302
13364
  .multi-step-item.active .multi-step-icon {
13303
13365
  background-color: #0b5fff;
13304
13366
  background-position: center;
@@ -13354,9 +13416,10 @@ label.custom-control-label {
13354
13416
  cursor: not-allowed;
13355
13417
  opacity: 1;
13356
13418
  }
13357
- .multi-step-item.disabled .multi-step-icon:focus {
13419
+ .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 {
13358
13420
  box-shadow: none;
13359
13421
  }
13422
+
13360
13423
  .multi-step-item.disabled .multi-step-indicator-label {
13361
13424
  color: #a7a9bc;
13362
13425
  }
@@ -13432,6 +13495,7 @@ label.custom-control-label {
13432
13495
  padding-left: 0;
13433
13496
  padding-right: 0;
13434
13497
  padding-top: 0;
13498
+ position: relative;
13435
13499
  transition: box-shadow 0.15s ease-in-out;
13436
13500
  width: 2rem;
13437
13501
  }
@@ -13449,13 +13513,12 @@ label.custom-control-label {
13449
13513
  color: #6b6c7e;
13450
13514
  text-decoration: none;
13451
13515
  }
13452
- .multi-step-icon:focus {
13453
- background-color: #e7e7ed;
13516
+ .multi-step-icon.focus, .multi-step-icon:focus-visible, .c-prefers-focus .multi-step-icon:focus {
13454
13517
  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
13455
- color: #6b6c7e;
13456
13518
  outline: 0;
13457
13519
  text-decoration: none;
13458
13520
  }
13521
+
13459
13522
  .multi-step-icon[data-multi-step-icon]::before {
13460
13523
  content: '\FEFF' attr(data-multi-step-icon);
13461
13524
  height: 2rem;
@@ -13485,6 +13548,28 @@ label.custom-control-label {
13485
13548
  width: 150px;
13486
13549
  }
13487
13550
 
13551
+ .multi-step-nav-center {
13552
+ padding: 0;
13553
+ text-align: center;
13554
+ }
13555
+ .multi-step-nav-center .multi-step-item {
13556
+ flex-grow: 1;
13557
+ width: 75px;
13558
+ }
13559
+ .multi-step-nav-center .multi-step-divider {
13560
+ left: 50%;
13561
+ margin-left: 1rem;
13562
+ width: calc(100% - 2rem);
13563
+ }
13564
+ .multi-step-nav-center .multi-step-indicator {
13565
+ left: 50%;
13566
+ transform: translateX(-50%);
13567
+ }
13568
+ .multi-step-nav-center .multi-step-title {
13569
+ margin-left: 12.5%;
13570
+ max-width: 75%;
13571
+ }
13572
+
13488
13573
  @media (max-width: 767.98px) {
13489
13574
  .multi-step-nav-collapse-sm {
13490
13575
  flex-wrap: nowrap;
@@ -13502,6 +13587,23 @@ label.custom-control-label {
13502
13587
  max-width: none;
13503
13588
  transform: none;
13504
13589
  }
13590
+ .multi-step-nav-collapse-sm.multi-step-nav-center .multi-step-item {
13591
+ flex-grow: 0;
13592
+ width: auto;
13593
+ }
13594
+ .multi-step-nav-collapse-sm.multi-step-nav-center .multi-step-item-expand {
13595
+ flex-grow: 1;
13596
+ width: 75px;
13597
+ }
13598
+ .multi-step-nav-collapse-sm.multi-step-nav-center .multi-step-divider {
13599
+ left: auto;
13600
+ margin-left: 2rem;
13601
+ width: auto;
13602
+ }
13603
+ .multi-step-nav-collapse-sm.multi-step-nav-center .multi-step-indicator {
13604
+ left: auto;
13605
+ transform: none;
13606
+ }
13505
13607
  .multi-step-nav-collapse-sm .active.multi-step-item {
13506
13608
  position: static;
13507
13609
  }
@@ -14066,7 +14168,6 @@ label.custom-control-label {
14066
14168
  color: #a7a9bc;
14067
14169
  box-shadow: none;
14068
14170
  font-weight: 400;
14069
- letter-spacing: 0.016rem;
14070
14171
  }
14071
14172
  .menubar-primary .nav-link:disabled::before, .menubar-primary .nav-link.disabled::before {
14072
14173
  content: none;
@@ -23253,7 +23354,7 @@ td.table-focus {
23253
23354
  margin-right: 0.5rem;
23254
23355
  }
23255
23356
  .toggle-switch-sm .simple-toggle-switch .toggle-switch-label, .simple-toggle-switch.toggle-switch-sm .toggle-switch-label {
23256
- max-width: calc(100% - 38px);
23357
+ max-width: calc(100% - 34px);
23257
23358
  }
23258
23359
  .toggle-switch-sm .toggle-switch-check {
23259
23360
  height: 16px;
@@ -23275,10 +23376,9 @@ td.table-focus {
23275
23376
  }
23276
23377
  .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle {
23277
23378
  min-width: 30px;
23278
- max-width: 30px;
23279
23379
  }
23280
23380
  .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after {
23281
- margin-left: 38px;
23381
+ margin-left: 34px;
23282
23382
  }
23283
23383
  .toggle-switch-sm .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon {
23284
23384
  font-size: 0.5rem;