@clayui/css 3.59.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.
package/lib/css/atlas.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.59.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>
@@ -18712,10 +18712,10 @@ a.sheet-subtitle:focus {
18712
18712
  z-index: 1;
18713
18713
  }
18714
18714
  .c-slideout .tbar-stacked.c-slideout-show {
18715
- display: block;
18715
+ display: flex;
18716
18716
  }
18717
18717
  .c-slideout .tbar-stacked.c-slideout-transition {
18718
- display: block;
18718
+ display: flex;
18719
18719
  }
18720
18720
  @media (max-width: 767.98px) {
18721
18721
  .c-slideout .sidebar {
@@ -21813,10 +21813,6 @@ ul.autofit-row {
21813
21813
  .inline-item .lexicon-icon {
21814
21814
  margin-top: -0.1em;
21815
21815
  }
21816
- .inline-item .loading-animation {
21817
- font-size: 1.25em;
21818
- }
21819
-
21820
21816
  .inline-item-before {
21821
21817
  margin-right: 0.5rem;
21822
21818
  }
@@ -30325,9 +30321,14 @@ a.text-dark:hover, a.text-dark:focus {
30325
30321
  visibility: hidden !important;
30326
30322
  }
30327
30323
 
30324
+ @keyframes loading-animation-circle {
30325
+ 100% {
30326
+ transform: rotate(360deg);
30327
+ }
30328
+ }
30328
30329
  .loading-animation {
30330
+ animation: loading-animation-circle 1s linear infinite;
30329
30331
  display: block;
30330
- font-size: 2.5rem;
30331
30332
  height: 1em;
30332
30333
  margin-left: auto;
30333
30334
  margin-right: auto;
@@ -30336,73 +30337,144 @@ a.text-dark:hover, a.text-dark:focus {
30336
30337
  vertical-align: middle;
30337
30338
  width: 1em;
30338
30339
  }
30339
-
30340
- .loading-animation:after {
30341
- animation: 1.2s ease-out infinite;
30342
- animation-name: loading-animation;
30340
+ .loading-animation::before {
30341
+ border-radius: 50%;
30342
+ box-shadow: -0.03125em -0.375em 0 0 currentColor;
30343
+ content: "";
30344
+ height: 0.25em;
30345
+ left: 50%;
30346
+ position: absolute;
30347
+ top: 50%;
30348
+ transform: translate(-50%, -50%);
30349
+ width: 0.25em;
30350
+ }
30351
+ .loading-animation::after {
30352
+ background-color: currentColor;
30343
30353
  border-radius: 50%;
30344
- color: #6b6c7e;
30345
30354
  content: "";
30346
30355
  display: block;
30347
30356
  height: 1em;
30348
- left: 0;
30349
- position: absolute;
30350
- top: 0;
30351
- transform: scale(0.33334);
30357
+ -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
30358
+ -webkit-mask-composite: source-out;
30359
+ mask-composite: subtract;
30360
+ padding: 0.25em;
30352
30361
  width: 1em;
30353
- 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);
30354
30362
  }
30355
- @keyframes loading-animation {
30356
- 0%, 100% {
30357
- 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);
30358
- }
30359
- 16.6% {
30360
- 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);
30363
+
30364
+ @keyframes loading-animation-squares-box-1 {
30365
+ 0% {
30366
+ left: 0;
30367
+ opacity: 0.4;
30368
+ top: 0;
30369
+ transform: scale(1);
30361
30370
  }
30362
- 33.3% {
30363
- 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);
30371
+ 25% {
30372
+ left: calc(100% - 1em);
30373
+ opacity: 0.4;
30374
+ top: 0;
30375
+ transform: scale(1);
30364
30376
  }
30365
30377
  50% {
30366
- 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);
30367
- }
30368
- 66.6% {
30369
- 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);
30378
+ left: calc(100% - 1.5em);
30379
+ opacity: 1;
30380
+ top: calc(100% - 1.5em);
30381
+ transform: scale(2);
30370
30382
  }
30371
- 83% {
30372
- 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;
30383
+ 75% {
30384
+ left: 0.5em;
30385
+ opacity: 1;
30386
+ top: calc(100% - 1.5em);
30387
+ transform: scale(2);
30373
30388
  }
30374
30389
  }
30375
-
30376
- .loading-animation-light:after, .btn-primary .loading-animation:after, .btn-success .loading-animation:after, .btn-info .loading-animation:after, .btn-warning .loading-animation:after, .btn-danger .loading-animation:after, .btn-dark .loading-animation:after {
30377
- animation-name: loading-animation-light;
30378
- color: #fff;
30379
- 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);
30380
- }
30381
- @keyframes loading-animation-light {
30382
- 0%, 100% {
30383
- 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);
30384
- }
30385
- 16.6% {
30386
- 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);
30390
+ @keyframes loading-animation-squares-box-2 {
30391
+ 0% {
30392
+ left: calc(100% - 1.5em);
30393
+ opacity: 1;
30394
+ top: calc(100% - 1.5em);
30395
+ transform: scale(2);
30387
30396
  }
30388
- 33.3% {
30389
- 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);
30397
+ 25% {
30398
+ left: 0.5em;
30399
+ opacity: 1;
30400
+ top: calc(100% - 1.5em);
30401
+ transform: scale(2);
30390
30402
  }
30391
30403
  50% {
30392
- 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);
30393
- }
30394
- 66.6% {
30395
- 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);
30404
+ left: 0;
30405
+ opacity: 0.4;
30406
+ top: 0;
30407
+ transform: scale(1);
30396
30408
  }
30397
- 83% {
30398
- 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;
30409
+ 75% {
30410
+ left: calc(100% - 1em);
30411
+ opacity: 0.4;
30412
+ top: 0;
30413
+ transform: scale(1);
30399
30414
  }
30400
30415
  }
30401
-
30402
- .loading-animation.loading-animation-sm {
30403
- font-size: 1.25rem;
30416
+ .loading-animation-squares {
30417
+ display: block;
30418
+ height: 1em;
30419
+ margin-left: auto;
30420
+ margin-right: auto;
30421
+ position: relative;
30422
+ text-align: left;
30423
+ vertical-align: middle;
30424
+ width: 1em;
30425
+ }
30426
+ .loading-animation-squares::before {
30427
+ animation: loading-animation-squares-box-1 2.4s ease-in-out infinite;
30428
+ background-color: currentColor;
30429
+ border-radius: 0.2em;
30430
+ content: "";
30431
+ display: block;
30432
+ font-size: 0.3125em;
30433
+ height: 1em;
30434
+ left: 0;
30435
+ opacity: 0.4;
30436
+ position: absolute;
30437
+ top: 0;
30438
+ transform: scale(1);
30439
+ width: 1em;
30440
+ }
30441
+ .loading-animation-squares::after {
30442
+ animation: loading-animation-squares-box-2 2.4s ease-in-out infinite;
30443
+ background-color: currentColor;
30444
+ border-radius: 0.2em;
30445
+ content: "";
30446
+ display: block;
30447
+ font-size: 0.3125em;
30448
+ height: 1em;
30449
+ left: calc(100% - 1.5em);
30450
+ opacity: 1;
30451
+ position: absolute;
30452
+ top: calc(100% - 1.5em);
30453
+ transform: scale(2);
30454
+ width: 1em;
30404
30455
  }
30405
30456
 
30457
+ .loading-animation-xs {
30458
+ font-size: 0.625rem;
30459
+ }
30460
+ .loading-animation-sm {
30461
+ font-size: 1rem;
30462
+ }
30463
+ .loading-animation-md {
30464
+ font-size: 2rem;
30465
+ }
30466
+ .loading-animation-lg {
30467
+ font-size: 4rem;
30468
+ }
30469
+ .loading-animation-primary {
30470
+ color: #0b5fff;
30471
+ }
30472
+ .loading-animation-secondary {
30473
+ color: #6b6c7e;
30474
+ }
30475
+ .loading-animation-light {
30476
+ color: #fff;
30477
+ }
30406
30478
  /* REUSE-Snippet-Begin
30407
30479
  * SPDX-License-Identifier: MIT
30408
30480
  * SPDX-FileCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>