@clayui/css 3.128.0 → 3.130.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 (34) hide show
  1. package/lib/css/atlas.css +48 -25
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +47 -31
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +52 -26
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/lib/images/icons/send.svg +9 -0
  9. package/lib/images/icons/speed.svg +10 -0
  10. package/lib/images/icons/voice.svg +9 -0
  11. package/package.json +2 -2
  12. package/src/images/icons/send.svg +9 -0
  13. package/src/images/icons/speed.svg +10 -0
  14. package/src/images/icons/voice.svg +9 -0
  15. package/src/scss/_license-text.scss +1 -1
  16. package/src/scss/atlas/variables/_forms.scss +1 -0
  17. package/src/scss/cadmin/components/_dropdowns.scss +10 -0
  18. package/src/scss/cadmin/components/_forms.scss +16 -14
  19. package/src/scss/cadmin/components/_input-groups.scss +12 -1
  20. package/src/scss/cadmin/components/_type.scss +5 -1
  21. package/src/scss/cadmin/components/_utilities-functional-important.scss +11 -0
  22. package/src/scss/cadmin/variables/_custom-forms.scss +1 -1
  23. package/src/scss/cadmin/variables/_forms.scss +15 -0
  24. package/src/scss/cadmin/variables/_utilities.scss +16 -0
  25. package/src/scss/components/_dropdowns.scss +10 -0
  26. package/src/scss/components/_forms.scss +16 -14
  27. package/src/scss/components/_input-groups.scss +12 -1
  28. package/src/scss/components/_type.scss +5 -1
  29. package/src/scss/components/_utilities-functional-important.scss +8 -0
  30. package/src/scss/functions/_lx-icons-generated.scss +6 -0
  31. package/src/scss/mixins/_forms.scss +0 -13
  32. package/src/scss/variables/_custom-forms.scss +1 -1
  33. package/src/scss/variables/_forms.scss +10 -0
  34. package/src/scss/variables/_utilities.scss +16 -0
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.128.0
3
+ * Clay 3.130.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.128.0
19
+ * Clay 3.130.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>
@@ -493,7 +493,7 @@ html:not(#__):not(#___) .cadmin .clay-dark .mark {
493
493
  background-color: #393a4a;
494
494
  color: #fff;
495
495
  }
496
- html:not(#__):not(#___) .cadmin .list-unstyled {
496
+ html:not(#__):not(#___) .cadmin .dropdown-section-grid, html:not(#__):not(#___) .cadmin .list-unstyled {
497
497
  list-style: none;
498
498
  padding-left: 0;
499
499
  }
@@ -6447,6 +6447,13 @@ html:not(#__):not(#___) .cadmin .dropdown-section .custom-control-outside label
6447
6447
  html:not(#__):not(#___) .cadmin .dropdown-section.active .custom-control-label {
6448
6448
  color: #272833;
6449
6449
  }
6450
+ html:not(#__):not(#___) .cadmin .dropdown-section-grid {
6451
+ display: grid;
6452
+ gap: 0.5rem 0.75rem;
6453
+ grid-template-columns: repeat(9, 1fr);
6454
+ margin-bottom: 0;
6455
+ padding: 8px 16px;
6456
+ }
6450
6457
  html:not(#__):not(#___) .cadmin .dropdown-footer {
6451
6458
  box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5);
6452
6459
  padding: 8px 16px 0;
@@ -7341,7 +7348,6 @@ html:not(#__):not(#___) .cadmin select.form-control {
7341
7348
  background-size: 1.5em 1.5em;
7342
7349
  cursor: pointer;
7343
7350
  padding-right: 2em;
7344
- color: #272833;
7345
7351
  }
7346
7352
  html:not(#__):not(#___) .cadmin select.form-control.focus, html:not(#__):not(#___) .cadmin select.form-control:focus-visible,
7347
7353
  html:not(#__):not(#___) .c-prefers-focus .cadmin select.form-control:focus {
@@ -7391,7 +7397,6 @@ html:not(#__):not(#___) .cadmin select.form-control[size] {
7391
7397
  padding-left: 8px;
7392
7398
  padding-right: 8px;
7393
7399
  scrollbar-width: thin;
7394
- color: #272833;
7395
7400
  }
7396
7401
  html:not(#__):not(#___) .cadmin select.form-control[size].focus, html:not(#__):not(#___) .cadmin select.form-control[size]:focus-visible,
7397
7402
  html:not(#__):not(#___) .c-prefers-focus .cadmin select.form-control[size]:focus {
@@ -7429,7 +7434,6 @@ html:not(#__):not(#___) .cadmin select.form-control[multiple] {
7429
7434
  padding-left: 8px;
7430
7435
  padding-right: 8px;
7431
7436
  scrollbar-width: thin;
7432
- color: #272833;
7433
7437
  }
7434
7438
  html:not(#__):not(#___) .cadmin select.form-control[multiple].focus, html:not(#__):not(#___) .cadmin select.form-control[multiple]:focus-visible,
7435
7439
  html:not(#__):not(#___) .c-prefers-focus .cadmin select.form-control[multiple]:focus {
@@ -7461,8 +7465,14 @@ html:not(#__):not(#___) .c-prefers-focus .cadmin select.form-control[multiple]:f
7461
7465
  padding: 6.5px 8px;
7462
7466
  }
7463
7467
  }
7468
+ html:not(#__):not(#___) .cadmin .form-control-shrink {
7469
+ max-width: 100%;
7470
+ white-space: nowrap;
7471
+ width: min-content;
7472
+ }
7464
7473
  html:not(#__):not(#___) .cadmin .form-control-select-secondary {
7465
7474
  background-color: #fff;
7475
+ border-color: #9b92a5;
7466
7476
  color: #6b6c7e;
7467
7477
  }
7468
7478
  html:not(#__):not(#___) .cadmin .form-control-select-secondary:hover, html:not(#__):not(#___) .cadmin .form-control-select-secondary.hover {
@@ -7483,6 +7493,10 @@ html:not(#__):not(#___) .cadmin .form-control-select-secondary:disabled, html:no
7483
7493
  color: #6b6c7e;
7484
7494
  opacity: 0.4;
7485
7495
  }
7496
+ html:not(#__):not(#___) .cadmin .form-control-select-shrink {
7497
+ max-width: 100%;
7498
+ width: min-content;
7499
+ }
7486
7500
  html:not(#__):not(#___) .cadmin textarea.form-control,
7487
7501
  html:not(#__):not(#___) .cadmin textarea.form-control-plaintext,
7488
7502
  html:not(#__):not(#___) .cadmin .form-control.form-control-textarea {
@@ -9246,7 +9260,7 @@ html:not(#__):not(#___) .cadmin .custom-radio .custom-control-input:checked[disa
9246
9260
  border-color: #b3cdff;
9247
9261
  }
9248
9262
  html:not(#__):not(#___) .cadmin .custom-control-outside label {
9249
- display: block;
9263
+ display: inline-block;
9250
9264
  padding-left: calc( 16px + 8px );
9251
9265
  }
9252
9266
  html:not(#__):not(#___) .cadmin .custom-control-outside .custom-control-label-text {
@@ -9482,7 +9496,6 @@ html:not(#__):not(#___) .cadmin .date-picker-nav select.form-control {
9482
9496
  html:not(#__):not(#___) .cadmin .date-picker-nav select.form-control {
9483
9497
  font-size: 12px;
9484
9498
  height: 24px;
9485
- color: #272833;
9486
9499
  }
9487
9500
  }
9488
9501
  html:not(#__):not(#___) .cadmin .date-picker-nav select.form-control:hover, html:not(#__):not(#___) .cadmin .date-picker-nav select.form-control.hover {
@@ -9513,7 +9526,6 @@ html:not(#__):not(#___) .cadmin .date-picker-nav .form-control-select {
9513
9526
  html:not(#__):not(#___) .cadmin .date-picker-nav .form-control-select {
9514
9527
  font-size: 12px;
9515
9528
  height: 24px;
9516
- color: #272833;
9517
9529
  }
9518
9530
  }
9519
9531
  html:not(#__):not(#___) .cadmin .date-picker-nav .form-control-select:hover, html:not(#__):not(#___) .cadmin .date-picker-nav .form-control-select.hover {
@@ -9843,15 +9855,12 @@ html:not(#__):not(#___) .cadmin .has-error .form-feedback-item {
9843
9855
  }
9844
9856
  html:not(#__):not(#___) .cadmin .has-error select.form-control {
9845
9857
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-top'%20d='m347.913%20199.336-81.538-85c-5.413-5.642-14.188-5.642-19.6%200l-81.538%2085c-8.731%209.101-2.548%2024.664%209.8%2024.664h163.077c12.348%200%2018.531-15.563%209.8-24.664z'%20fill='%23f48989'/%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-bottom'%20d='m165.236%20312.664%2081.538%2085c5.412%205.642%2014.188%205.642%2019.6%200l81.538-85c8.731-9.101%202.548-24.664-9.8-24.664H175.035c-12.347%200-18.531%2015.563-9.8%2024.664z'%20fill='%23f48989'/%3E%3C/svg%3E");
9846
- color: #272833;
9847
9858
  }
9848
9859
  html:not(#__):not(#___) .cadmin .has-error select.form-control[size] {
9849
9860
  background-image: none;
9850
- color: #272833;
9851
9861
  }
9852
9862
  html:not(#__):not(#___) .cadmin .has-error select.form-control[multiple] {
9853
9863
  background-image: none;
9854
- color: #272833;
9855
9864
  }
9856
9865
  html:not(#__):not(#___) .cadmin .has-error .input-group-item.focus {
9857
9866
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5791ff;
@@ -9903,15 +9912,12 @@ html:not(#__):not(#___) .cadmin .has-warning .form-feedback-item {
9903
9912
  }
9904
9913
  html:not(#__):not(#___) .cadmin .has-warning select.form-control {
9905
9914
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-top'%20d='m347.913%20199.336-81.538-85c-5.413-5.642-14.188-5.642-19.6%200l-81.538%2085c-8.731%209.101-2.548%2024.664%209.8%2024.664h163.077c12.348%200%2018.531-15.563%209.8-24.664z'%20fill='%23ff8f39'/%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-bottom'%20d='m165.236%20312.664%2081.538%2085c5.412%205.642%2014.188%205.642%2019.6%200l81.538-85c8.731-9.101%202.548-24.664-9.8-24.664H175.035c-12.347%200-18.531%2015.563-9.8%2024.664z'%20fill='%23ff8f39'/%3E%3C/svg%3E");
9906
- color: #272833;
9907
9915
  }
9908
9916
  html:not(#__):not(#___) .cadmin .has-warning select.form-control[size] {
9909
9917
  background-image: none;
9910
- color: #272833;
9911
9918
  }
9912
9919
  html:not(#__):not(#___) .cadmin .has-warning select.form-control[multiple] {
9913
9920
  background-image: none;
9914
- color: #272833;
9915
9921
  }
9916
9922
  html:not(#__):not(#___) .cadmin .has-warning .input-group-item.focus {
9917
9923
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5791ff;
@@ -9963,15 +9969,12 @@ html:not(#__):not(#___) .cadmin .has-success .form-feedback-item {
9963
9969
  }
9964
9970
  html:not(#__):not(#___) .cadmin .has-success select.form-control {
9965
9971
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-top'%20d='m347.913%20199.336-81.538-85c-5.413-5.642-14.188-5.642-19.6%200l-81.538%2085c-8.731%209.101-2.548%2024.664%209.8%2024.664h163.077c12.348%200%2018.531-15.563%209.8-24.664z'%20fill='%235aca75'/%3E%3Cpath%20class='lexicon-icon-outline%20caret-double-l-bottom'%20d='m165.236%20312.664%2081.538%2085c5.412%205.642%2014.188%205.642%2019.6%200l81.538-85c8.731-9.101%202.548-24.664-9.8-24.664H175.035c-12.347%200-18.531%2015.563-9.8%2024.664z'%20fill='%235aca75'/%3E%3C/svg%3E");
9966
- color: #272833;
9967
9972
  }
9968
9973
  html:not(#__):not(#___) .cadmin .has-success select.form-control[size] {
9969
9974
  background-image: none;
9970
- color: #272833;
9971
9975
  }
9972
9976
  html:not(#__):not(#___) .cadmin .has-success select.form-control[multiple] {
9973
9977
  background-image: none;
9974
- color: #272833;
9975
9978
  }
9976
9979
  html:not(#__):not(#___) .cadmin .has-success .input-group-item.focus {
9977
9980
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5791ff;
@@ -10430,7 +10433,8 @@ html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .btn .lexic
10430
10433
  html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .btn .c-inner .lexicon-icon {
10431
10434
  margin-top: 0;
10432
10435
  }
10433
- html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .btn-monospaced {
10436
+ html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .btn-monospaced,
10437
+ html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .input-group-inset-icon {
10434
10438
  font-size: 16px;
10435
10439
  height: 32px;
10436
10440
  margin-bottom: -1px;
@@ -10444,6 +10448,14 @@ html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .form-file
10444
10448
  html:not(#__):not(#___) .cadmin .input-group .input-group-inset-item .form-file .btn {
10445
10449
  height: 100%;
10446
10450
  }
10451
+ html:not(#__):not(#___) .cadmin .input-group .input-group-inset-icon {
10452
+ align-items: center;
10453
+ display: flex;
10454
+ justify-content: center;
10455
+ }
10456
+ html:not(#__):not(#___) .cadmin .input-group .input-group-inset-icon .lexicon-icon {
10457
+ margin-top: 0;
10458
+ }
10447
10459
  html:not(#__):not(#___) .cadmin .input-group .input-group-item .input-group-inset-before.form-control {
10448
10460
  border-bottom-left-radius: 0;
10449
10461
  border-top-left-radius: 0;
@@ -28072,13 +28084,27 @@ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin {
28072
28084
  scroll-behavior: auto;
28073
28085
  transition: none;
28074
28086
  }
28087
+ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
28088
+ background-color: transparent;
28089
+ display: block;
28090
+ font-size: inherit;
28091
+ opacity: inherit;
28092
+ transform: none;
28093
+ }
28094
+ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
28095
+ font-size: inherit;
28096
+ left: auto;
28097
+ position: relative;
28098
+ top: auto;
28099
+ transform: none;
28100
+ }
28075
28101
 
28076
28102
  @keyframes cadmin-loading-animation-circle {
28077
28103
  100% {
28078
28104
  transform: rotate(360deg);
28079
28105
  }
28080
28106
  }
28081
- html:not(#__):not(#___) .cadmin .loading-animation {
28107
+ html:not(#__):not(#___) .cadmin .loading-animation, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares {
28082
28108
  display: block;
28083
28109
  height: 1em;
28084
28110
  margin-left: auto;
@@ -28089,7 +28115,7 @@ html:not(#__):not(#___) .cadmin .loading-animation {
28089
28115
  vertical-align: middle;
28090
28116
  width: 1em;
28091
28117
  }
28092
- html:not(#__):not(#___) .cadmin .loading-animation::before {
28118
+ html:not(#__):not(#___) .cadmin .loading-animation::before, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
28093
28119
  animation: cadmin-loading-animation-circle 1s linear infinite;
28094
28120
  border-radius: 50%;
28095
28121
  box-shadow: -0.03125em -0.375em 0 0 currentColor;
@@ -28103,15 +28129,15 @@ html:not(#__):not(#___) .cadmin .loading-animation::before {
28103
28129
  width: 0.25em;
28104
28130
  }
28105
28131
  @media (prefers-reduced-motion: reduce) {
28106
- html:not(#__):not(#___) .cadmin .loading-animation::before {
28132
+ html:not(#__):not(#___) .cadmin .loading-animation::before, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
28107
28133
  animation: none;
28108
28134
  }
28109
28135
  }
28110
- html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation::before {
28136
+ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation::before, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::before {
28111
28137
  animation: none;
28112
28138
  }
28113
28139
 
28114
- html:not(#__):not(#___) .cadmin .loading-animation::after {
28140
+ html:not(#__):not(#___) .cadmin .loading-animation::after, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
28115
28141
  animation: cadmin-loading-animation-circle 1s linear infinite;
28116
28142
  background-color: currentColor;
28117
28143
  border-radius: 50%;
@@ -28125,11 +28151,11 @@ html:not(#__):not(#___) .cadmin .loading-animation::after {
28125
28151
  width: 1em;
28126
28152
  }
28127
28153
  @media (prefers-reduced-motion: reduce) {
28128
- html:not(#__):not(#___) .cadmin .loading-animation::after {
28154
+ html:not(#__):not(#___) .cadmin .loading-animation::after, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
28129
28155
  animation: none;
28130
28156
  }
28131
28157
  }
28132
- html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation::after {
28158
+ html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation::after, html:not(#__):not(#___) .c-prefers-reduced-motion .cadmin .loading-animation-squares::after {
28133
28159
  animation: none;
28134
28160
  }
28135
28161