@clayui/css 3.58.1 → 3.60.1

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 (29) hide show
  1. package/lib/css/atlas.css +129 -55
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +129 -55
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css +0 -0
  6. package/lib/css/bootstrap.css.map +1 -1
  7. package/lib/css/cadmin.css +132 -55
  8. package/lib/css/cadmin.css.map +1 -1
  9. package/lib/images/icons/icons.svg +1 -1
  10. package/package.json +2 -2
  11. package/src/scss/_license-text.scss +1 -1
  12. package/src/scss/atlas/variables/_buttons.scss +0 -2
  13. package/src/scss/atlas/variables/_loaders.scss +0 -9
  14. package/src/scss/cadmin/components/_base.scss +1 -1
  15. package/src/scss/cadmin/components/_loaders.scss +101 -21
  16. package/src/scss/cadmin/components/_multi-step-nav.scss +3 -3
  17. package/src/scss/cadmin/components/_utilities.scss +4 -6
  18. package/src/scss/cadmin/variables/_buttons.scss +0 -6
  19. package/src/scss/cadmin/variables/_loaders.scss +121 -11
  20. package/src/scss/cadmin/variables/_utilities.scss +22 -1
  21. package/src/scss/components/_loaders.scss +101 -21
  22. package/src/scss/components/_utilities.scss +4 -6
  23. package/src/scss/mixins/_globals.scss +20 -0
  24. package/src/scss/mixins/_loaders.scss +48 -8
  25. package/src/scss/mixins/_slideout.scss +10 -18
  26. package/src/scss/variables/_buttons.scss +0 -6
  27. package/src/scss/variables/_loaders.scss +119 -11
  28. package/src/scss/variables/_slideout.scss +2 -2
  29. 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.1
3
+ * Clay 3.60.1
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.1
19
+ * Clay 3.60.1
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,13 @@ 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 {
25244
25246
  display: block;
25245
- font-size: 40px;
25246
25247
  height: 1em;
25247
25248
  margin-left: auto;
25248
25249
  margin-right: auto;
@@ -25251,68 +25252,144 @@ html:not(#__):not(#___) .cadmin .loading-animation {
25251
25252
  vertical-align: middle;
25252
25253
  width: 1em;
25253
25254
  }
25254
- html:not(#__):not(#___) .cadmin .loading-animation:after {
25255
- animation: 1.2s ease-out infinite;
25256
- animation-name: loading-animation;
25255
+ html:not(#__):not(#___) .cadmin .loading-animation::before {
25256
+ animation: cadmin-loading-animation-circle 1s linear infinite;
25257
+ border-radius: 50%;
25258
+ box-shadow: -0.03125em -0.375em 0 0 currentColor;
25259
+ content: "";
25260
+ height: 0.25em;
25261
+ left: 50%;
25262
+ margin-left: -0.125em;
25263
+ margin-top: -0.125em;
25264
+ position: absolute;
25265
+ top: 50%;
25266
+ width: 0.25em;
25267
+ }
25268
+ html:not(#__):not(#___) .cadmin .loading-animation::after {
25269
+ animation: cadmin-loading-animation-circle 1s linear infinite;
25270
+ background-color: currentColor;
25257
25271
  border-radius: 50%;
25258
- color: #6b6c7e;
25259
25272
  content: "";
25260
25273
  display: block;
25261
25274
  height: 1em;
25262
- left: 0;
25263
- position: absolute;
25264
- top: 0;
25265
- transform: scale(0.33334);
25275
+ -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
25276
+ -webkit-mask-composite: source-out;
25277
+ mask-composite: subtract;
25278
+ padding: 0.25em;
25266
25279
  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
25280
  }
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);
25281
+ @keyframes cadmin-loading-animation-squares-box-1 {
25282
+ 0% {
25283
+ left: 0;
25284
+ opacity: 0.4;
25285
+ top: 0;
25286
+ transform: scale(1);
25275
25287
  }
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);
25288
+ 25% {
25289
+ left: calc(100% - 1em);
25290
+ opacity: 0.4;
25291
+ top: 0;
25292
+ transform: scale(1);
25278
25293
  }
25279
25294
  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);
25295
+ left: calc(100% - 1.5em);
25296
+ opacity: 1;
25297
+ top: calc(100% - 1.5em);
25298
+ transform: scale(2);
25299
+ }
25300
+ 75% {
25301
+ left: 0.5em;
25302
+ opacity: 1;
25303
+ top: calc(100% - 1.5em);
25304
+ transform: scale(2);
25305
+ }
25306
+ }
25307
+ @keyframes cadmin-loading-animation-squares-box-2 {
25308
+ 0% {
25309
+ left: calc(100% - 1.5em);
25310
+ opacity: 1;
25311
+ top: calc(100% - 1.5em);
25312
+ transform: scale(2);
25313
+ }
25314
+ 25% {
25315
+ left: 0.5em;
25316
+ opacity: 1;
25317
+ top: calc(100% - 1.5em);
25318
+ transform: scale(2);
25281
25319
  }
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);
25320
+ 50% {
25321
+ left: 0;
25322
+ opacity: 0.4;
25323
+ top: 0;
25324
+ transform: scale(1);
25284
25325
  }
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;
25326
+ 75% {
25327
+ left: calc(100% - 1em);
25328
+ opacity: 0.4;
25329
+ top: 0;
25330
+ transform: scale(1);
25287
25331
  }
25288
25332
  }
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);
25333
+ html:not(#__):not(#___) .cadmin .loading-animation-squares {
25334
+ display: block;
25335
+ height: 1em;
25336
+ margin-left: auto;
25337
+ margin-right: auto;
25338
+ position: relative;
25339
+ text-align: left;
25340
+ vertical-align: middle;
25341
+ width: 1em;
25293
25342
  }
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
- }
25343
+ html:not(#__):not(#___) .cadmin .loading-animation-squares::before {
25344
+ animation: cadmin-loading-animation-squares-box-1 2.4s ease-in-out infinite;
25345
+ background-color: currentColor;
25346
+ border-radius: 0.2em;
25347
+ content: "";
25348
+ display: block;
25349
+ font-size: 0.3125em;
25350
+ height: 1em;
25351
+ left: 0;
25352
+ opacity: 0.4;
25353
+ position: absolute;
25354
+ top: 0;
25355
+ transform: scale(1);
25356
+ width: 1em;
25313
25357
  }
25314
- html:not(#__):not(#___) .cadmin .loading-animation.loading-animation-sm {
25315
- font-size: 20px;
25358
+ html:not(#__):not(#___) .cadmin .loading-animation-squares::after {
25359
+ animation: cadmin-loading-animation-squares-box-2 2.4s ease-in-out infinite;
25360
+ background-color: currentColor;
25361
+ border-radius: 0.2em;
25362
+ content: "";
25363
+ display: block;
25364
+ font-size: 0.3125em;
25365
+ height: 1em;
25366
+ left: calc(100% - 1.5em);
25367
+ opacity: 1;
25368
+ position: absolute;
25369
+ top: calc(100% - 1.5em);
25370
+ transform: scale(2);
25371
+ width: 1em;
25372
+ }
25373
+ html:not(#__):not(#___) .cadmin .loading-animation-xs {
25374
+ font-size: 10px;
25375
+ }
25376
+ html:not(#__):not(#___) .cadmin .loading-animation-sm {
25377
+ font-size: 16px;
25378
+ }
25379
+ html:not(#__):not(#___) .cadmin .loading-animation-md {
25380
+ font-size: 32px;
25381
+ }
25382
+ html:not(#__):not(#___) .cadmin .loading-animation-lg {
25383
+ font-size: 64px;
25384
+ }
25385
+ html:not(#__):not(#___) .cadmin .loading-animation-primary {
25386
+ color: #0b5fff;
25387
+ }
25388
+ html:not(#__):not(#___) .cadmin .loading-animation-secondary {
25389
+ color: #6b6c7e;
25390
+ }
25391
+ html:not(#__):not(#___) .cadmin .loading-animation-light {
25392
+ color: #fff;
25316
25393
  }
25317
25394
  @media print {
25318
25395
  html:not(#__):not(#___) .cadmin *,