@clayui/css 3.58.0 → 3.60.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 (27) hide show
  1. package/lib/css/atlas.css +127 -55
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +127 -55
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +130 -55
  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 +0 -2
  11. package/src/scss/atlas/variables/_loaders.scss +0 -9
  12. package/src/scss/cadmin/components/_base.scss +1 -1
  13. package/src/scss/cadmin/components/_loaders.scss +101 -21
  14. package/src/scss/cadmin/components/_multi-step-nav.scss +3 -3
  15. package/src/scss/cadmin/components/_utilities.scss +4 -6
  16. package/src/scss/cadmin/variables/_buttons.scss +0 -6
  17. package/src/scss/cadmin/variables/_loaders.scss +119 -11
  18. package/src/scss/cadmin/variables/_utilities.scss +22 -1
  19. package/src/scss/components/_loaders.scss +101 -21
  20. package/src/scss/components/_utilities.scss +4 -6
  21. package/src/scss/mixins/_globals.scss +20 -0
  22. package/src/scss/mixins/_loaders.scss +48 -8
  23. package/src/scss/mixins/_slideout.scss +10 -18
  24. package/src/scss/variables/_buttons.scss +0 -6
  25. package/src/scss/variables/_loaders.scss +117 -11
  26. package/src/scss/variables/_slideout.scss +2 -2
  27. package/src/scss/variables/_utilities.scss +22 -1
package/lib/css/cadmin.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.58.0
3
+ * Clay 3.60.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.58.0
19
+ * Clay 3.60.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>
@@ -183,7 +183,7 @@ html:not(#__):not(#___) .cadmin var, html:not(#__):not(#___) .cadmin .nav-link::
183
183
  }
184
184
 
185
185
  html:not(#__):not(#___) .cadmin .nav-link::before, html:not(#__):not(#___) .cadmin .custom-control-label::before, html:not(#__):not(#___) .cadmin .nav-link::after, html:not(#__):not(#___) .cadmin .custom-control-label::after {
186
- content: normal;
186
+ content: none;
187
187
  display: inline;
188
188
  }
189
189
 
@@ -10097,7 +10097,7 @@ html:not(#__):not(#___) .cadmin .multi-step-item.complete .multi-step-icon {
10097
10097
  background-size: 14px;
10098
10098
  }
10099
10099
  html:not(#__):not(#___) .cadmin .multi-step-item.complete .multi-step-icon[data-multi-step-icon]:before {
10100
- content: normal;
10100
+ content: none;
10101
10101
  }
10102
10102
  html:not(#__):not(#___) .cadmin .multi-step-item.complete .multi-step-icon:active {
10103
10103
  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'%20d='M192.9%20429.5c-8.3%200-16.4-3.3-22.3-9.2L44.5%20294.1C15%20263.2%2062.7%20222%2089.1%20249.5L191.5%20352l230-258.9c27.2-30.5%2074.3%2011.5%2047.1%2041.9L216.4%20418.9c-5.8%206.5-14%2010.3-22.6%2010.6h-.9z'%20fill='%23fff'/%3E%3C/svg%3E");
@@ -18545,9 +18545,6 @@ html:not(#__):not(#___) .cadmin .inline-item .inline-item {
18545
18545
  html:not(#__):not(#___) .cadmin .inline-item .lexicon-icon {
18546
18546
  margin-top: -0.1em;
18547
18547
  }
18548
- html:not(#__):not(#___) .cadmin .inline-item .loading-animation {
18549
- font-size: 1.25em;
18550
- }
18551
18548
  html:not(#__):not(#___) .cadmin .inline-item-before {
18552
18549
  margin-right: 8px;
18553
18550
  }
@@ -25240,9 +25237,14 @@ html:not(#__):not(#___) .cadmin .visible {
25240
25237
  html:not(#__):not(#___) .cadmin .invisible {
25241
25238
  visibility: hidden !important;
25242
25239
  }
25240
+ @keyframes cadmin-loading-animation-circle {
25241
+ 100% {
25242
+ transform: rotate(360deg);
25243
+ }
25244
+ }
25243
25245
  html:not(#__):not(#___) .cadmin .loading-animation {
25246
+ animation: cadmin-loading-animation-circle 1s linear infinite;
25244
25247
  display: block;
25245
- font-size: 40px;
25246
25248
  height: 1em;
25247
25249
  margin-left: auto;
25248
25250
  margin-right: auto;
@@ -25251,68 +25253,141 @@ html:not(#__):not(#___) .cadmin .loading-animation {
25251
25253
  vertical-align: middle;
25252
25254
  width: 1em;
25253
25255
  }
25254
- html:not(#__):not(#___) .cadmin .loading-animation:after {
25255
- animation: 1.2s ease-out infinite;
25256
- animation-name: loading-animation;
25256
+ html:not(#__):not(#___) .cadmin .loading-animation::before {
25257
+ border-radius: 50%;
25258
+ box-shadow: -0.03125em -0.375em 0 0 currentColor;
25259
+ content: "";
25260
+ height: 0.25em;
25261
+ left: 50%;
25262
+ position: absolute;
25263
+ top: 50%;
25264
+ transform: translate(-50%, -50%);
25265
+ width: 0.25em;
25266
+ }
25267
+ html:not(#__):not(#___) .cadmin .loading-animation::after {
25268
+ background-color: currentColor;
25257
25269
  border-radius: 50%;
25258
- color: #6b6c7e;
25259
25270
  content: "";
25260
25271
  display: block;
25261
25272
  height: 1em;
25262
- left: 0;
25263
- position: absolute;
25264
- top: 0;
25265
- transform: scale(0.33334);
25273
+ -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
25274
+ -webkit-mask-composite: source-out;
25275
+ mask-composite: subtract;
25276
+ padding: 0.25em;
25266
25277
  width: 1em;
25267
- box-shadow: 0 -1em 0 0em #6b6c7e, 1em -0.5em 0 -0.35em rgba(107, 108, 126, 0.1), 1em 0.5em 0 -0.25em rgba(107, 108, 126, 0.2), 0 1em 0 -0.2em rgba(107, 108, 126, 0.4), -1em 0.5em 0 -0.15em rgba(107, 108, 126, 0.6), -1em -0.5em 0 -0.1em rgba(107, 108, 126, 0.8);
25268
25278
  }
25269
- @keyframes loading-animation {
25270
- 0%, 100% {
25271
- box-shadow: 0 -1em 0 0em #6b6c7e, 1em -0.5em 0 -0.35em rgba(107, 108, 126, 0.1), 1em 0.5em 0 -0.25em rgba(107, 108, 126, 0.2), 0 1em 0 -0.2em rgba(107, 108, 126, 0.4), -1em 0.5em 0 -0.15em rgba(107, 108, 126, 0.6), -1em -0.5em 0 -0.1em rgba(107, 108, 126, 0.8);
25272
- }
25273
- 16.6% {
25274
- box-shadow: 0 -1em 0 -0.1em rgba(107, 108, 126, 0.8), 1em -0.5em 0 0em #6b6c7e, 1em 0.5em 0 -0.35em rgba(107, 108, 126, 0.1), 0 1em 0 -0.25em rgba(107, 108, 126, 0.2), -1em 0.5em 0 -0.2em rgba(107, 108, 126, 0.4), -1em -0.5em 0 -0.15em rgba(107, 108, 126, 0.6);
25279
+ @keyframes cadmin-loading-animation-squares-box-1 {
25280
+ 0% {
25281
+ left: 0;
25282
+ opacity: 0.4;
25283
+ top: 0;
25284
+ transform: scale(1);
25275
25285
  }
25276
- 33.3% {
25277
- box-shadow: 0 -1em 0 -0.15em rgba(107, 108, 126, 0.6), 1em -0.5em 0 -0.1em rgba(107, 108, 126, 0.8), 1em 0.5em 0 0em #6b6c7e, 0 1em 0 -0.35em rgba(107, 108, 126, 0.1), -1em 0.5em 0 -0.25em rgba(107, 108, 126, 0.2), -1em -0.5em 0 -0.2em rgba(107, 108, 126, 0.4);
25286
+ 25% {
25287
+ left: calc(100% - 1em);
25288
+ opacity: 0.4;
25289
+ top: 0;
25290
+ transform: scale(1);
25278
25291
  }
25279
25292
  50% {
25280
- box-shadow: 0 -1em 0 -0.2em rgba(107, 108, 126, 0.4), 1em -0.5em 0 -0.15em rgba(107, 108, 126, 0.6), 1em 0.5em 0 -0.1em rgba(107, 108, 126, 0.8), 0 1em 0 0em #6b6c7e, -1em 0.5em 0 -0.35em rgba(107, 108, 126, 0.1), -1em -0.5em 0 -0.25em rgba(107, 108, 126, 0.2);
25293
+ left: calc(100% - 1.5em);
25294
+ opacity: 1;
25295
+ top: calc(100% - 1.5em);
25296
+ transform: scale(2);
25297
+ }
25298
+ 75% {
25299
+ left: 0.5em;
25300
+ opacity: 1;
25301
+ top: calc(100% - 1.5em);
25302
+ transform: scale(2);
25303
+ }
25304
+ }
25305
+ @keyframes cadmin-loading-animation-squares-box-2 {
25306
+ 0% {
25307
+ left: calc(100% - 1.5em);
25308
+ opacity: 1;
25309
+ top: calc(100% - 1.5em);
25310
+ transform: scale(2);
25311
+ }
25312
+ 25% {
25313
+ left: 0.5em;
25314
+ opacity: 1;
25315
+ top: calc(100% - 1.5em);
25316
+ transform: scale(2);
25281
25317
  }
25282
- 66.6% {
25283
- box-shadow: 0 -1em 0 -0.25em rgba(107, 108, 126, 0.2), 1em -0.5em 0 -0.2em rgba(107, 108, 126, 0.4), 1em 0.5em 0 -0.15em rgba(107, 108, 126, 0.6), 0 1em 0 -0.1em rgba(107, 108, 126, 0.8), -1em 0.5em 0 0em #6b6c7e, -1em -0.5em 0 -0.35em rgba(107, 108, 126, 0.1);
25318
+ 50% {
25319
+ left: 0;
25320
+ opacity: 0.4;
25321
+ top: 0;
25322
+ transform: scale(1);
25284
25323
  }
25285
- 83% {
25286
- box-shadow: 0 -1em 0 -0.35em rgba(107, 108, 126, 0.1), 1em -0.5em 0 -0.25em rgba(107, 108, 126, 0.2), 1em 0.5em 0 -0.2em rgba(107, 108, 126, 0.4), 0 1em 0 -0.15em rgba(107, 108, 126, 0.6), -1em 0.5em 0 -0.1em rgba(107, 108, 126, 0.8), -1em -0.5em 0 0em #6b6c7e;
25324
+ 75% {
25325
+ left: calc(100% - 1em);
25326
+ opacity: 0.4;
25327
+ top: 0;
25328
+ transform: scale(1);
25287
25329
  }
25288
25330
  }
25289
- html:not(#__):not(#___) .cadmin .loading-animation-light:after, html:not(#__):not(#___) .cadmin .btn-primary .loading-animation:after, html:not(#__):not(#___) .cadmin .btn-success .loading-animation:after, html:not(#__):not(#___) .cadmin .btn-info .loading-animation:after, html:not(#__):not(#___) .cadmin .btn-warning .loading-animation:after, html:not(#__):not(#___) .cadmin .btn-danger .loading-animation:after, html:not(#__):not(#___) .cadmin .btn-dark .loading-animation:after {
25290
- animation-name: loading-animation-light;
25291
- color: #fff;
25292
- box-shadow: 0 -1em 0 0em white, 1em -0.5em 0 -0.35em rgba(255, 255, 255, 0.1), 1em 0.5em 0 -0.25em rgba(255, 255, 255, 0.2), 0 1em 0 -0.2em rgba(255, 255, 255, 0.4), -1em 0.5em 0 -0.15em rgba(255, 255, 255, 0.6), -1em -0.5em 0 -0.1em rgba(255, 255, 255, 0.8);
25331
+ html:not(#__):not(#___) .cadmin .loading-animation-squares {
25332
+ display: block;
25333
+ height: 1em;
25334
+ margin-left: auto;
25335
+ margin-right: auto;
25336
+ position: relative;
25337
+ text-align: left;
25338
+ vertical-align: middle;
25339
+ width: 1em;
25293
25340
  }
25294
- @keyframes loading-animation-light {
25295
- 0%, 100% {
25296
- box-shadow: 0 -1em 0 0em white, 1em -0.5em 0 -0.35em rgba(255, 255, 255, 0.1), 1em 0.5em 0 -0.25em rgba(255, 255, 255, 0.2), 0 1em 0 -0.2em rgba(255, 255, 255, 0.4), -1em 0.5em 0 -0.15em rgba(255, 255, 255, 0.6), -1em -0.5em 0 -0.1em rgba(255, 255, 255, 0.8);
25297
- }
25298
- 16.6% {
25299
- box-shadow: 0 -1em 0 -0.1em rgba(255, 255, 255, 0.8), 1em -0.5em 0 0em white, 1em 0.5em 0 -0.35em rgba(255, 255, 255, 0.1), 0 1em 0 -0.25em rgba(255, 255, 255, 0.2), -1em 0.5em 0 -0.2em rgba(255, 255, 255, 0.4), -1em -0.5em 0 -0.15em rgba(255, 255, 255, 0.6);
25300
- }
25301
- 33.3% {
25302
- box-shadow: 0 -1em 0 -0.15em rgba(255, 255, 255, 0.6), 1em -0.5em 0 -0.1em rgba(255, 255, 255, 0.8), 1em 0.5em 0 0em white, 0 1em 0 -0.35em rgba(255, 255, 255, 0.1), -1em 0.5em 0 -0.25em rgba(255, 255, 255, 0.2), -1em -0.5em 0 -0.2em rgba(255, 255, 255, 0.4);
25303
- }
25304
- 50% {
25305
- box-shadow: 0 -1em 0 -0.2em rgba(255, 255, 255, 0.4), 1em -0.5em 0 -0.15em rgba(255, 255, 255, 0.6), 1em 0.5em 0 -0.1em rgba(255, 255, 255, 0.8), 0 1em 0 0em white, -1em 0.5em 0 -0.35em rgba(255, 255, 255, 0.1), -1em -0.5em 0 -0.25em rgba(255, 255, 255, 0.2);
25306
- }
25307
- 66.6% {
25308
- box-shadow: 0 -1em 0 -0.25em rgba(255, 255, 255, 0.2), 1em -0.5em 0 -0.2em rgba(255, 255, 255, 0.4), 1em 0.5em 0 -0.15em rgba(255, 255, 255, 0.6), 0 1em 0 -0.1em rgba(255, 255, 255, 0.8), -1em 0.5em 0 0em white, -1em -0.5em 0 -0.35em rgba(255, 255, 255, 0.1);
25309
- }
25310
- 83% {
25311
- box-shadow: 0 -1em 0 -0.35em rgba(255, 255, 255, 0.1), 1em -0.5em 0 -0.25em rgba(255, 255, 255, 0.2), 1em 0.5em 0 -0.2em rgba(255, 255, 255, 0.4), 0 1em 0 -0.15em rgba(255, 255, 255, 0.6), -1em 0.5em 0 -0.1em rgba(255, 255, 255, 0.8), -1em -0.5em 0 0em white;
25312
- }
25341
+ html:not(#__):not(#___) .cadmin .loading-animation-squares::before {
25342
+ animation: cadmin-loading-animation-squares-box-1 2.4s ease-in-out infinite;
25343
+ background-color: currentColor;
25344
+ border-radius: 0.2em;
25345
+ content: "";
25346
+ display: block;
25347
+ font-size: 0.3125em;
25348
+ height: 1em;
25349
+ left: 0;
25350
+ opacity: 0.4;
25351
+ position: absolute;
25352
+ top: 0;
25353
+ transform: scale(1);
25354
+ width: 1em;
25313
25355
  }
25314
- html:not(#__):not(#___) .cadmin .loading-animation.loading-animation-sm {
25315
- font-size: 20px;
25356
+ html:not(#__):not(#___) .cadmin .loading-animation-squares::after {
25357
+ animation: cadmin-loading-animation-squares-box-2 2.4s ease-in-out infinite;
25358
+ background-color: currentColor;
25359
+ border-radius: 0.2em;
25360
+ content: "";
25361
+ display: block;
25362
+ font-size: 0.3125em;
25363
+ height: 1em;
25364
+ left: calc(100% - 1.5em);
25365
+ opacity: 1;
25366
+ position: absolute;
25367
+ top: calc(100% - 1.5em);
25368
+ transform: scale(2);
25369
+ width: 1em;
25370
+ }
25371
+ html:not(#__):not(#___) .cadmin .loading-animation-xs {
25372
+ font-size: 10px;
25373
+ }
25374
+ html:not(#__):not(#___) .cadmin .loading-animation-sm {
25375
+ font-size: 16px;
25376
+ }
25377
+ html:not(#__):not(#___) .cadmin .loading-animation-md {
25378
+ font-size: 32px;
25379
+ }
25380
+ html:not(#__):not(#___) .cadmin .loading-animation-lg {
25381
+ font-size: 64px;
25382
+ }
25383
+ html:not(#__):not(#___) .cadmin .loading-animation-primary {
25384
+ color: #0b5fff;
25385
+ }
25386
+ html:not(#__):not(#___) .cadmin .loading-animation-secondary {
25387
+ color: #6b6c7e;
25388
+ }
25389
+ html:not(#__):not(#___) .cadmin .loading-animation-light {
25390
+ color: #fff;
25316
25391
  }
25317
25392
  @media print {
25318
25393
  html:not(#__):not(#___) .cadmin *,