@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.
package/lib/css/atlas.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>
@@ -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,13 @@ 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 {
30329
30330
  display: block;
30330
- font-size: 2.5rem;
30331
30331
  height: 1em;
30332
30332
  margin-left: auto;
30333
30333
  margin-right: auto;
@@ -30336,73 +30336,147 @@ a.text-dark:hover, a.text-dark:focus {
30336
30336
  vertical-align: middle;
30337
30337
  width: 1em;
30338
30338
  }
30339
-
30340
- .loading-animation:after {
30341
- animation: 1.2s ease-out infinite;
30342
- animation-name: loading-animation;
30339
+ .loading-animation::before {
30340
+ animation: loading-animation-circle 1s linear infinite;
30341
+ border-radius: 50%;
30342
+ box-shadow: -0.03125em -0.375em 0 0 currentColor;
30343
+ content: "";
30344
+ height: 0.25em;
30345
+ left: 50%;
30346
+ margin-left: -0.125em;
30347
+ margin-top: -0.125em;
30348
+ position: absolute;
30349
+ top: 50%;
30350
+ width: 0.25em;
30351
+ }
30352
+ .loading-animation::after {
30353
+ animation: loading-animation-circle 1s linear infinite;
30354
+ background-color: currentColor;
30343
30355
  border-radius: 50%;
30344
- color: #6b6c7e;
30345
30356
  content: "";
30346
30357
  display: block;
30347
30358
  height: 1em;
30348
- left: 0;
30349
- position: absolute;
30350
- top: 0;
30351
- transform: scale(0.33334);
30359
+ -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
30360
+ -webkit-mask-composite: source-out;
30361
+ mask-composite: subtract;
30362
+ padding: 0.25em;
30352
30363
  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
30364
  }
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);
30365
+
30366
+ @keyframes loading-animation-squares-box-1 {
30367
+ 0% {
30368
+ left: 0;
30369
+ opacity: 0.4;
30370
+ top: 0;
30371
+ transform: scale(1);
30361
30372
  }
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);
30373
+ 25% {
30374
+ left: calc(100% - 1em);
30375
+ opacity: 0.4;
30376
+ top: 0;
30377
+ transform: scale(1);
30364
30378
  }
30365
30379
  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);
30380
+ left: calc(100% - 1.5em);
30381
+ opacity: 1;
30382
+ top: calc(100% - 1.5em);
30383
+ transform: scale(2);
30370
30384
  }
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;
30385
+ 75% {
30386
+ left: 0.5em;
30387
+ opacity: 1;
30388
+ top: calc(100% - 1.5em);
30389
+ transform: scale(2);
30373
30390
  }
30374
30391
  }
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);
30392
+ @keyframes loading-animation-squares-box-2 {
30393
+ 0% {
30394
+ left: calc(100% - 1.5em);
30395
+ opacity: 1;
30396
+ top: calc(100% - 1.5em);
30397
+ transform: scale(2);
30387
30398
  }
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);
30399
+ 25% {
30400
+ left: 0.5em;
30401
+ opacity: 1;
30402
+ top: calc(100% - 1.5em);
30403
+ transform: scale(2);
30390
30404
  }
30391
30405
  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);
30406
+ left: 0;
30407
+ opacity: 0.4;
30408
+ top: 0;
30409
+ transform: scale(1);
30396
30410
  }
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;
30411
+ 75% {
30412
+ left: calc(100% - 1em);
30413
+ opacity: 0.4;
30414
+ top: 0;
30415
+ transform: scale(1);
30399
30416
  }
30400
30417
  }
30401
-
30402
- .loading-animation.loading-animation-sm {
30403
- font-size: 1.25rem;
30418
+ .loading-animation-squares {
30419
+ display: block;
30420
+ height: 1em;
30421
+ margin-left: auto;
30422
+ margin-right: auto;
30423
+ position: relative;
30424
+ text-align: left;
30425
+ vertical-align: middle;
30426
+ width: 1em;
30427
+ }
30428
+ .loading-animation-squares::before {
30429
+ animation: loading-animation-squares-box-1 2.4s ease-in-out infinite;
30430
+ background-color: currentColor;
30431
+ border-radius: 0.2em;
30432
+ content: "";
30433
+ display: block;
30434
+ font-size: 0.3125em;
30435
+ height: 1em;
30436
+ left: 0;
30437
+ opacity: 0.4;
30438
+ position: absolute;
30439
+ top: 0;
30440
+ transform: scale(1);
30441
+ width: 1em;
30442
+ }
30443
+ .loading-animation-squares::after {
30444
+ animation: loading-animation-squares-box-2 2.4s ease-in-out infinite;
30445
+ background-color: currentColor;
30446
+ border-radius: 0.2em;
30447
+ content: "";
30448
+ display: block;
30449
+ font-size: 0.3125em;
30450
+ height: 1em;
30451
+ left: calc(100% - 1.5em);
30452
+ opacity: 1;
30453
+ position: absolute;
30454
+ top: calc(100% - 1.5em);
30455
+ transform: scale(2);
30456
+ width: 1em;
30404
30457
  }
30405
30458
 
30459
+ .loading-animation-xs {
30460
+ font-size: 0.625rem;
30461
+ }
30462
+ .loading-animation-sm {
30463
+ font-size: 1rem;
30464
+ }
30465
+ .loading-animation-md {
30466
+ font-size: 2rem;
30467
+ }
30468
+ .loading-animation-lg {
30469
+ font-size: 4rem;
30470
+ }
30471
+ .loading-animation-primary {
30472
+ color: #0b5fff;
30473
+ }
30474
+ .loading-animation-secondary {
30475
+ color: #6b6c7e;
30476
+ }
30477
+ .loading-animation-light {
30478
+ color: #fff;
30479
+ }
30406
30480
  /* REUSE-Snippet-Begin
30407
30481
  * SPDX-License-Identifier: MIT
30408
30482
  * SPDX-FileCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>