@clayui/css 3.65.1 → 3.69.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 (57) hide show
  1. package/lib/css/atlas.css +49 -94
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +31 -75
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +63 -62
  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/atlas/variables/_buttons.scss +26 -26
  11. package/src/scss/atlas/variables/_custom-forms.scss +2 -2
  12. package/src/scss/atlas/variables/_dropdowns.scss +2 -2
  13. package/src/scss/atlas/variables/_forms.scss +6 -2
  14. package/src/scss/atlas/variables/_menubar.scss +6 -6
  15. package/src/scss/atlas/variables/_utilities.scss +1 -1
  16. package/src/scss/cadmin/components/_buttons.scss +14 -22
  17. package/src/scss/cadmin/components/_dropdowns.scss +22 -14
  18. package/src/scss/cadmin/variables/_buttons.scss +6 -0
  19. package/src/scss/cadmin/variables/_dropdowns.scss +10 -10
  20. package/src/scss/cadmin/variables/_forms.scss +7 -3
  21. package/src/scss/cadmin/variables/_menubar.scss +8 -8
  22. package/src/scss/cadmin/variables/_modals.scss +3 -2
  23. package/src/scss/cadmin/variables/_popovers.scss +3 -2
  24. package/src/scss/components/_alerts.scss +28 -80
  25. package/src/scss/components/_buttons.scss +16 -24
  26. package/src/scss/components/_custom-forms.scss +4 -12
  27. package/src/scss/components/_date-picker.scss +6 -23
  28. package/src/scss/components/_dropdowns.scss +30 -35
  29. package/src/scss/components/_forms.scss +16 -53
  30. package/src/scss/components/_icons.scss +4 -4
  31. package/src/scss/components/_labels.scss +6 -10
  32. package/src/scss/components/_list-group.scss +4 -9
  33. package/src/scss/components/_modals.scss +2 -6
  34. package/src/scss/components/_progress-bars.scss +2 -6
  35. package/src/scss/components/_stickers.scss +3 -15
  36. package/src/scss/components/_type.scss +3 -3
  37. package/src/scss/mixins/_alerts.scss +10 -24
  38. package/src/scss/mixins/_aspect-ratio.scss +51 -49
  39. package/src/scss/mixins/_badges.scss +140 -140
  40. package/src/scss/mixins/_buttons.scss +2 -6
  41. package/src/scss/mixins/_cards.scss +4 -10
  42. package/src/scss/mixins/_dropdown-menu.scss +19 -31
  43. package/src/scss/mixins/_globals.scss +1 -1
  44. package/src/scss/mixins/_grid.scss +59 -51
  45. package/src/scss/mixins/_labels.scss +228 -212
  46. package/src/scss/mixins/_menubar.scss +15 -46
  47. package/src/scss/mixins/_navbar.scss +41 -43
  48. package/src/scss/mixins/_pagination.scss +35 -71
  49. package/src/scss/mixins/_sheet.scss +2 -6
  50. package/src/scss/mixins/_stickers.scss +10 -19
  51. package/src/scss/mixins/_tbar.scss +10 -30
  52. package/src/scss/mixins/_utilities.scss +1 -1
  53. package/src/scss/variables/_dropdowns.scss +4 -4
  54. package/src/scss/variables/_forms.scss +3 -1
  55. package/src/scss/variables/_menubar.scss +8 -8
  56. package/src/scss/variables/_modals.scss +3 -2
  57. package/src/scss/variables/_popovers.scss +3 -1
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.65.1
3
+ * Clay 3.69.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>
@@ -16,7 +16,7 @@
16
16
  * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
17
17
  */
18
18
  /**
19
- * Clay 3.65.1
19
+ * Clay 3.69.0
20
20
  *
21
21
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
22
22
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -957,6 +957,9 @@ html:not(#__):not(#___) .cadmin .btn .c-inner {
957
957
  html:not(#__):not(#___) .cadmin .btn .inline-item {
958
958
  font-size: 16px;
959
959
  }
960
+ html:not(#__):not(#___) .cadmin .btn .inline-item .lexicon-icon {
961
+ margin-top: 0;
962
+ }
960
963
  html:not(#__):not(#___) .cadmin .btn .btn-section {
961
964
  display: block;
962
965
  font-size: 11px;
@@ -1079,6 +1082,9 @@ html:not(#__):not(#___) .cadmin .btn-monospaced .c-inner {
1079
1082
  padding: 0;
1080
1083
  width: 100%;
1081
1084
  }
1085
+ html:not(#__):not(#___) .cadmin .btn-monospaced .lexicon-icon {
1086
+ margin-top: 0;
1087
+ }
1082
1088
  html:not(#__):not(#___) .cadmin .btn-group-vertical > .btn-monospaced.btn-lg, html:not(#__):not(#___) .cadmin .btn-group-lg .btn-monospaced, html:not(#__):not(#___) .cadmin .btn-monospaced.btn-lg {
1083
1089
  height: 48px;
1084
1090
  width: 48px;
@@ -5631,8 +5637,8 @@ html:not(#__):not(#___) .cadmin .dropdown-header {
5631
5637
  font-size: 14px;
5632
5638
  margin-top: 10px;
5633
5639
  padding-bottom: 6px;
5634
- padding-left: 20px;
5635
- padding-right: 20px;
5640
+ padding-left: 16px;
5641
+ padding-right: 16px;
5636
5642
  padding-top: 6px;
5637
5643
  position: relative;
5638
5644
  overflow-wrap: break-word;
@@ -5647,8 +5653,8 @@ html:not(#__):not(#___) .cadmin .dropdown-subheader {
5647
5653
  font-weight: 600;
5648
5654
  margin-top: 10px;
5649
5655
  padding-bottom: 6px;
5650
- padding-left: 20px;
5651
- padding-right: 20px;
5656
+ padding-left: 16px;
5657
+ padding-right: 16px;
5652
5658
  padding-top: 6px;
5653
5659
  text-transform: uppercase;
5654
5660
  white-space: normal;
@@ -5661,7 +5667,7 @@ html:not(#__):not(#___) .cadmin .dropdown-subheader:first-child {
5661
5667
  html:not(#__):not(#___) .cadmin .dropdown-caption {
5662
5668
  color: #6b6c7e;
5663
5669
  font-size: 14px;
5664
- padding: 8px 20px;
5670
+ padding: 8px 16px;
5665
5671
  white-space: normal;
5666
5672
  overflow-wrap: break-word;
5667
5673
  word-wrap: break-word;
@@ -5678,8 +5684,8 @@ html:not(#__):not(#___) .cadmin .dropdown-item {
5678
5684
  font-weight: 400;
5679
5685
  overflow: hidden;
5680
5686
  padding-bottom: 8px;
5681
- padding-left: 20px;
5682
- padding-right: 20px;
5687
+ padding-left: 16px;
5688
+ padding-right: 16px;
5683
5689
  padding-top: 8px;
5684
5690
  position: relative;
5685
5691
  text-align: inherit;
@@ -5756,27 +5762,27 @@ html:not(#__):not(#___) .cadmin .dropdown-item:disabled:active, html:not(#__):no
5756
5762
  html:not(#__):not(#___) .cadmin .dropdown-item .c-inner {
5757
5763
  flex-grow: 1;
5758
5764
  margin-bottom: -8px;
5759
- margin-left: -20px;
5760
- margin-right: -20px;
5765
+ margin-left: -16px;
5766
+ margin-right: -16px;
5761
5767
  margin-top: -8px;
5762
5768
  width: auto;
5763
5769
  }
5764
5770
  html:not(#__):not(#___) .cadmin .dropdown-item.autofit-row {
5765
- padding-left: 1rem;
5766
- padding-right: 1rem;
5771
+ padding-left: calc(16px - 4px);
5772
+ padding-right: calc(16px - 4px);
5767
5773
  }
5768
5774
  html:not(#__):not(#___) .cadmin .dropdown-item.autofit-row > .autofit-col {
5769
- padding-left: 0.25rem;
5770
- padding-right: 0.25rem;
5775
+ padding-left: 4px;
5776
+ padding-right: 4px;
5771
5777
  }
5772
5778
  html:not(#__):not(#___) .cadmin .dropdown-item .autofit-row {
5773
- margin-left: 0.25rem;
5774
- margin-right: 0.25rem;
5779
+ margin-left: -4px;
5780
+ margin-right: -4px;
5775
5781
  width: auto;
5776
5782
  }
5777
5783
  html:not(#__):not(#___) .cadmin .dropdown-item .autofit-row > .autofit-col {
5778
- padding-left: 0.25rem;
5779
- padding-right: 0.25rem;
5784
+ padding-left: 4px;
5785
+ padding-right: 4px;
5780
5786
  }
5781
5787
  html:not(#__):not(#___) .cadmin .dropdown-item .c-kbd-inline {
5782
5788
  color: #a7a9bc;
@@ -5801,12 +5807,12 @@ html:not(#__):not(#___) .cadmin .dropdown-item-text {
5801
5807
  display: block;
5802
5808
  font-weight: 400;
5803
5809
  padding-bottom: 8px;
5804
- padding-left: 20px;
5805
- padding-right: 20px;
5810
+ padding-left: 16px;
5811
+ padding-right: 16px;
5806
5812
  padding-top: 8px;
5807
5813
  }
5808
5814
  html:not(#__):not(#___) .cadmin .dropdown-section {
5809
- padding: 8px 20px;
5815
+ padding: 8px 16px;
5810
5816
  }
5811
5817
  html:not(#__):not(#___) .cadmin .dropdown-section .form-group + .form-group {
5812
5818
  margin-top: 16px;
@@ -5825,7 +5831,7 @@ html:not(#__):not(#___) .cadmin .dropdown-section.active .custom-control-label {
5825
5831
  }
5826
5832
  html:not(#__):not(#___) .cadmin .dropdown-footer {
5827
5833
  box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5);
5828
- padding: 8px 20px 0;
5834
+ padding: 8px 16px 0;
5829
5835
  position: relative;
5830
5836
  }
5831
5837
  html:not(#__):not(#___) .cadmin .dropdown-menu, html:not(#__):not(#___) .cadmin.dropdown-menu {
@@ -5863,7 +5869,7 @@ html:not(#__):not(#___) .cadmin .dropdown-menu, html:not(#__):not(#___) .cadmin.
5863
5869
  html:not(#__):not(#___) .cadmin .dropdown-menu .alert, html:not(#__):not(#___) .cadmin.dropdown-menu .alert {
5864
5870
  line-height: normal;
5865
5871
  margin: 8px;
5866
- padding: 6px 20px;
5872
+ padding: 6px 16px;
5867
5873
  }
5868
5874
  html:not(#__):not(#___) .cadmin .dropdown-menu .alert:first-child, html:not(#__):not(#___) .cadmin.dropdown-menu .alert:first-child {
5869
5875
  margin-top: 0;
@@ -5988,7 +5994,7 @@ html:not(#__):not(#___) .cadmin .dropdown-action > .dropdown-toggle .inline-item
5988
5994
  }
5989
5995
  html:not(#__):not(#___) .cadmin .dropdown-menu-indicator-start .dropdown-item-indicator, html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-start .dropdown-item-indicator {
5990
5996
  height: 16px;
5991
- left: 20px;
5997
+ left: 16px;
5992
5998
  position: absolute;
5993
5999
  top: 8px;
5994
6000
  width: 16px;
@@ -6003,10 +6009,17 @@ html:not(#__):not(#___) .cadmin .dropdown-menu-indicator-start .dropdown-item, h
6003
6009
  html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-start .dropdown-subheader,
6004
6010
  html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-start .dropdown-caption,
6005
6011
  html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-start .dropdown-item {
6006
- padding-left: 52px;
6012
+ padding-left: calc(
6013
+ 16px + 16px +
6014
+ 16px
6015
+ );
6007
6016
  }
6008
6017
  html:not(#__):not(#___) .cadmin .dropdown-menu-indicator-start .dropdown-item .c-inner, html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-start .dropdown-item .c-inner {
6009
- margin-left: -52px;
6018
+ margin-left: calc((
6019
+ 16px +
6020
+ 16px +
6021
+ 16px
6022
+ ) * -1);
6010
6023
  }
6011
6024
  html:not(#__):not(#___) .cadmin .dropdown-item-indicator-start {
6012
6025
  align-items: center;
@@ -6014,7 +6027,7 @@ html:not(#__):not(#___) .cadmin .dropdown-item-indicator-start {
6014
6027
  display: inline-flex;
6015
6028
  height: 16px;
6016
6029
  justify-content: center;
6017
- left: 20px;
6030
+ left: 16px;
6018
6031
  position: absolute;
6019
6032
  right: auto;
6020
6033
  top: calc( 8px - (( 16px - (1em * 1.5) ) / 2) );
@@ -6043,17 +6056,24 @@ html:not(#__):not(#___) .cadmin .dropdown-item-indicator-text-start > .c-inner {
6043
6056
  }
6044
6057
  html:not(#__):not(#___) .cadmin .dropdown-menu-indicator-end .dropdown-item-indicator, html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-end .dropdown-item-indicator {
6045
6058
  position: absolute;
6046
- right: 20px;
6059
+ right: 16px;
6047
6060
  top: 8px;
6048
6061
  }
6049
6062
  html:not(#__):not(#___) .cadmin .dropdown-menu-indicator-end .dropdown-item-indicator-text-end, html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-end .dropdown-item-indicator-text-end {
6050
6063
  padding-right: 0;
6051
6064
  }
6052
6065
  html:not(#__):not(#___) .cadmin .dropdown-menu-indicator-end .dropdown-item, html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-end .dropdown-item {
6053
- padding-right: 52px;
6066
+ padding-right: calc(
6067
+ 16px + 16px +
6068
+ 16px
6069
+ );
6054
6070
  }
6055
6071
  html:not(#__):not(#___) .cadmin .dropdown-menu-indicator-end .dropdown-item .c-inner, html:not(#__):not(#___) .cadmin.dropdown-menu-indicator-end .dropdown-item .c-inner {
6056
- margin-right: -52px;
6072
+ margin-right: calc((
6073
+ 16px +
6074
+ 16px +
6075
+ 16px
6076
+ ) * -1);
6057
6077
  }
6058
6078
  html:not(#__):not(#___) .cadmin .dropdown-item-indicator-end {
6059
6079
  align-items: center;
@@ -6063,7 +6083,7 @@ html:not(#__):not(#___) .cadmin .dropdown-item-indicator-end {
6063
6083
  justify-content: center;
6064
6084
  left: auto;
6065
6085
  position: absolute;
6066
- right: 20px;
6086
+ right: 16px;
6067
6087
  top: calc( 8px - (( 16px - (1em * 1.5) ) / 2) );
6068
6088
  width: 16px;
6069
6089
  }
@@ -6278,6 +6298,7 @@ html:not(#__):not(#___) .cadmin label {
6278
6298
  font-weight: 600;
6279
6299
  margin-bottom: 4px;
6280
6300
  max-width: 100%;
6301
+ position: static;
6281
6302
  overflow-wrap: break-word;
6282
6303
  word-wrap: break-word;
6283
6304
  }
@@ -9731,8 +9752,12 @@ html:not(#__):not(#___) .cadmin .modal-body-flush, html:not(#__):not(#___) .cadm
9731
9752
  html:not(#__):not(#___) .cadmin .modal-footer, html:not(#__):not(#___) .cadmin.modal-footer {
9732
9753
  align-items: center;
9733
9754
  border-top: 1px solid #e7e7ed;
9734
- border-bottom-left-radius: 5px;
9735
- border-bottom-right-radius: 5px;
9755
+ border-bottom-left-radius: calc(
9756
+ 6px - 1px
9757
+ );
9758
+ border-bottom-right-radius: calc(
9759
+ 6px - 1px
9760
+ );
9736
9761
  display: flex;
9737
9762
  flex-shrink: 0;
9738
9763
  flex-wrap: wrap;
@@ -14585,8 +14610,8 @@ html:not(#__):not(#___) .cadmin .popover-header {
14585
14610
  background-color: #fff;
14586
14611
  border-bottom: 1px solid #f2f2f2;
14587
14612
  border-color: #e7e7ed;
14588
- border-top-left-radius: 3px;
14589
- border-top-right-radius: 3px;
14613
+ border-top-left-radius: calc( 4px - 1px );
14614
+ border-top-right-radius: calc( 4px - 1px );
14590
14615
  font-size: 14px;
14591
14616
  font-weight: 600;
14592
14617
  margin-bottom: 0;
@@ -14599,8 +14624,8 @@ html:not(#__):not(#___) .cadmin .popover-header:empty {
14599
14624
  display: none;
14600
14625
  }
14601
14626
  html:not(#__):not(#___) .cadmin .popover-body {
14602
- border-bottom-left-radius: 3px;
14603
- border-bottom-right-radius: 3px;
14627
+ border-bottom-left-radius: calc( 4px - 1px );
14628
+ border-bottom-right-radius: calc( 4px - 1px );
14604
14629
  color: #6b6c7e;
14605
14630
  padding: 12px 16px;
14606
14631
  }
@@ -16942,9 +16967,6 @@ html:not(#__):not(#___) .cadmin .component-tbar {
16942
16967
  color: #6b6c7e;
16943
16968
  height: 56px;
16944
16969
  }
16945
- html:not(#__):not(#___) .cadmin .component-tbar .tbar-label {
16946
- border-width: 1px;
16947
- }
16948
16970
  html:not(#__):not(#___) .cadmin .subnav-tbar {
16949
16971
  font-size: 14px;
16950
16972
  }
@@ -17044,9 +17066,6 @@ html:not(#__):not(#___) .cadmin .subnav-tbar .component-text {
17044
17066
  html:not(#__):not(#___) .cadmin .subnav-tbar .component-label {
17045
17067
  font-weight: 400;
17046
17068
  }
17047
- html:not(#__):not(#___) .cadmin .subnav-tbar .tbar-label {
17048
- border-width: 1px;
17049
- }
17050
17069
  html:not(#__):not(#___) .cadmin .subnav-tbar-primary {
17051
17070
  background-color: #b3cdff;
17052
17071
  padding-bottom: 10px;
@@ -17109,18 +17128,12 @@ html:not(#__):not(#___) .cadmin .subnav-tbar-primary.subnav-tbar-disabled {
17109
17128
  html:not(#__):not(#___) .cadmin .subnav-tbar-primary.subnav-tbar-disabled .component-label {
17110
17129
  border-color: #8e94aa;
17111
17130
  }
17112
- html:not(#__):not(#___) .cadmin .subnav-tbar-primary.subnav-tbar-disabled .tbar-label {
17113
- border-width: 1px;
17114
- }
17115
17131
  html:not(#__):not(#___) .cadmin .subnav-tbar-light {
17116
17132
  color: #6b6c7e;
17117
17133
  background-color: white;
17118
17134
  padding-bottom: 2px;
17119
17135
  padding-top: 2px;
17120
17136
  }
17121
- html:not(#__):not(#___) .cadmin .subnav-tbar-light .tbar-label {
17122
- border-width: 1px;
17123
- }
17124
17137
  html:not(#__):not(#___) .cadmin .tbar-stacked {
17125
17138
  display: inline-flex;
17126
17139
  height: 100%;
@@ -17187,9 +17200,6 @@ html:not(#__):not(#___) .cadmin .tbar-stacked .tbar-btn-monospaced .c-inner {
17187
17200
  margin-right: 0;
17188
17201
  margin-top: 0;
17189
17202
  }
17190
- html:not(#__):not(#___) .cadmin .tbar-stacked .tbar-label {
17191
- border-width: 1px;
17192
- }
17193
17203
  html:not(#__):not(#___) .cadmin .tbar-light {
17194
17204
  background-color: #fff;
17195
17205
  box-shadow: inset 1px 0 0 0 #f1f2f5 , inset -1px 0 0 0 #f1f2f5;
@@ -17222,9 +17232,6 @@ html:not(#__):not(#___) .cadmin .tbar-light .tbar-btn-monospaced[aria-expanded=t
17222
17232
  background-color: #f1f2f5;
17223
17233
  color: #272833;
17224
17234
  }
17225
- html:not(#__):not(#___) .cadmin .tbar-light .tbar-label {
17226
- border-width: 1px;
17227
- }
17228
17235
  html:not(#__):not(#___) .cadmin .tbar-dark-l2 {
17229
17236
  background-color: #393a4a;
17230
17237
  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.06) , inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
@@ -17258,9 +17265,6 @@ html:not(#__):not(#___) .cadmin .tbar-dark-l2 .tbar-btn-monospaced[aria-expanded
17258
17265
  background-color: rgba(255, 255, 255, 0.06);
17259
17266
  color: #fff;
17260
17267
  }
17261
- html:not(#__):not(#___) .cadmin .tbar-dark-l2 .tbar-label {
17262
- border-width: 1px;
17263
- }
17264
17268
  html:not(#__):not(#___) .cadmin .tbar-dark-d1 {
17265
17269
  background-color: #1c1c24;
17266
17270
  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.06) , inset -1px 0 0 0 rgba(255, 255, 255, 0.06);
@@ -17303,9 +17307,6 @@ html:not(#__):not(#___) .cadmin .tbar-dark-d1 .tbar-btn-monospaced[aria-expanded
17303
17307
  background-color: rgba(255, 255, 255, 0.06);
17304
17308
  color: #fff;
17305
17309
  }
17306
- html:not(#__):not(#___) .cadmin .tbar-dark-d1 .tbar-label {
17307
- border-width: 1px;
17308
- }
17309
17310
  html:not(#__):not(#___) .cadmin .timeline {
17310
17311
  list-style: none;
17311
17312
  padding-left: 0;