@clayui/css 3.59.0 → 3.60.2

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 (40) hide show
  1. package/CHANGELOG.md +1950 -0
  2. package/LICENSES/BSD-3-Clause.txt +30 -0
  3. package/LICENSES/LicenseRef-MIT-Bootstrap.txt +22 -0
  4. package/LICENSES/MIT.txt +19 -0
  5. package/lib/css/atlas.css +189 -63
  6. package/lib/css/atlas.css.map +1 -1
  7. package/lib/css/base.css +188 -62
  8. package/lib/css/base.css.map +1 -1
  9. package/lib/css/bootstrap.css.map +1 -1
  10. package/lib/css/cadmin.css +191 -69
  11. package/lib/css/cadmin.css.map +1 -1
  12. package/lib/images/icons/icons.svg +1 -1
  13. package/package.json +2 -3
  14. package/src/scss/_license-text.scss +1 -1
  15. package/src/scss/atlas/variables/_buttons.scss +0 -2
  16. package/src/scss/atlas/variables/_loaders.scss +0 -9
  17. package/src/scss/atlas/variables/_sidebar.scss +24 -17
  18. package/src/scss/cadmin/components/_base.scss +1 -1
  19. package/src/scss/cadmin/components/_loaders.scss +101 -21
  20. package/src/scss/cadmin/components/_multi-step-nav.scss +3 -3
  21. package/src/scss/cadmin/components/_sidebar.scss +10 -10
  22. package/src/scss/cadmin/components/_utilities.scss +4 -6
  23. package/src/scss/cadmin/variables/_buttons.scss +0 -6
  24. package/src/scss/cadmin/variables/_loaders.scss +122 -11
  25. package/src/scss/cadmin/variables/_sidebar.scss +137 -54
  26. package/src/scss/cadmin/variables/_utilities.scss +22 -1
  27. package/src/scss/components/_loaders.scss +101 -21
  28. package/src/scss/components/_sidebar.scss +10 -10
  29. package/src/scss/components/_utilities.scss +4 -6
  30. package/src/scss/mixins/_globals.scss +20 -0
  31. package/src/scss/mixins/_loaders.scss +48 -8
  32. package/src/scss/mixins/_panels.scss +282 -272
  33. package/src/scss/mixins/_sidebar.scss +293 -185
  34. package/src/scss/mixins/_slideout.scss +10 -18
  35. package/src/scss/mixins/_stickers.scss +143 -134
  36. package/src/scss/variables/_buttons.scss +0 -6
  37. package/src/scss/variables/_loaders.scss +120 -11
  38. package/src/scss/variables/_sidebar.scss +123 -44
  39. package/src/scss/variables/_slideout.scss +2 -2
  40. package/src/scss/variables/_utilities.scss +22 -1
@@ -0,0 +1,30 @@
1
+ Valid-License-Identifier: LicenseRef-BSD-3-Clause-Liferay
2
+ Valid-License-Identifier: BSD-3-Clause
3
+ License-Text:
4
+
5
+ Copyright (c) 2014, Liferay Inc. All rights reserved.
6
+
7
+ Redistribution and use in source and binary forms, with or without modification,
8
+ are permitted provided that the following conditions are met:
9
+
10
+ 1. Redistributions of source code must retain the above copyright notice,
11
+ this list of conditions and the following disclaimer.
12
+
13
+ 2. Redistributions in binary form must reproduce the above copyright notice,
14
+ this list of conditions and the following disclaimer in the documentation
15
+ and/or other materials provided with the distribution.
16
+
17
+ 3. Neither the name of the copyright holder nor the names of its contributors
18
+ may be used to endorse or promote products derived from this software without
19
+ specific prior written permission.
20
+
21
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
22
+ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
23
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
24
+ ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
25
+ LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
26
+ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
27
+ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
28
+ CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
29
+ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
30
+ USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@@ -0,0 +1,22 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2011-2019 Twitter, Inc.
4
+ Copyright (c) 2011-2019 The Bootstrap Authors
5
+
6
+ Permission is hereby granted, free of charge, to any person obtaining a copy
7
+ of this software and associated documentation files (the "Software"), to deal
8
+ in the Software without restriction, including without limitation the rights
9
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
+ copies of the Software, and to permit persons to whom the Software is
11
+ furnished to do so, subject to the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be included in
14
+ all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22
+ THE SOFTWARE.
@@ -0,0 +1,19 @@
1
+ The MIT License (MIT)
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
4
+ this software and associated documentation files (the "Software"), to deal in
5
+ the Software without restriction, including without limitation the rights to
6
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7
+ of the Software, and to permit persons to whom the Software is furnished to do
8
+ so, subject to the following conditions:
9
+
10
+ The above copyright notice and this permission notice shall be included in all
11
+ copies or substantial portions of the Software.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19
+ SOFTWARE.
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.2
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>
@@ -18520,12 +18520,9 @@ a.sheet-subtitle:focus {
18520
18520
  .sidebar-light {
18521
18521
  background-color: #fff;
18522
18522
  border-color: #e7e7ed;
18523
- border-bottom-width: 0;
18524
18523
  border-left-width: 0px;
18525
- border-right-width: 0;
18526
- border-top-width: 0;
18527
- box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
18528
18524
  color: #272833;
18525
+ box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
18529
18526
  }
18530
18527
  .sidebar-light .sidebar-list-group .list-group-title {
18531
18528
  font-size: 1rem;
@@ -18597,10 +18594,6 @@ a.sheet-subtitle:focus {
18597
18594
  }
18598
18595
  .sidebar-dark {
18599
18596
  background-color: #272833;
18600
- border-bottom-width: 0;
18601
- border-left-width: 0;
18602
- border-right-width: 0;
18603
- border-top-width: 0;
18604
18597
  color: #fff;
18605
18598
  }
18606
18599
  .sidebar-dark .close {
@@ -18657,6 +18650,64 @@ a.sheet-subtitle:focus {
18657
18650
  .sidebar-dark .nav-nested .nav-link[aria-expanded=true], .sidebar-dark .nav-nested .nav-link.show {
18658
18651
  color: #fff;
18659
18652
  }
18653
+ .sidebar-dark-l2 {
18654
+ background-color: #393a4a;
18655
+ color: #fff;
18656
+ }
18657
+ .sidebar-dark-l2 .close {
18658
+ color: #a7a9bc;
18659
+ }
18660
+ .sidebar-dark-l2 .close:hover {
18661
+ color: #fff;
18662
+ }
18663
+ .sidebar-dark-l2 .sidebar-header .component-title {
18664
+ color: inherit;
18665
+ }
18666
+ .sidebar-dark-l2 .sidebar-header .component-title[href],
18667
+ .sidebar-dark-l2 .sidebar-header .component-title [href] {
18668
+ color: inherit;
18669
+ }
18670
+ .sidebar-dark-l2 .sidebar-header .component-subtitle {
18671
+ color: inherit;
18672
+ }
18673
+ .sidebar-dark-l2 .sidebar-header .component-subtitle[href],
18674
+ .sidebar-dark-l2 .sidebar-header .component-subtitle [href] {
18675
+ color: inherit;
18676
+ }
18677
+ .sidebar-dark-l2 .nav-nested .nav-link {
18678
+ border-radius: 0.25rem;
18679
+ color: #a7a9bc;
18680
+ transition: box-shadow 0.15s ease-in-out;
18681
+ }
18682
+ @media (prefers-reduced-motion: reduce) {
18683
+ .sidebar-dark-l2 .nav-nested .nav-link {
18684
+ transition: none;
18685
+ }
18686
+ }
18687
+ .sidebar-dark-l2 .nav-nested .nav-link:hover {
18688
+ color: #fff;
18689
+ }
18690
+ .sidebar-dark-l2 .nav-nested .nav-link:focus {
18691
+ box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #80acff;
18692
+ outline: 0;
18693
+ }
18694
+ .sidebar-dark-l2 .nav-nested .nav-link:active {
18695
+ color: #fff;
18696
+ }
18697
+ .sidebar-dark-l2 .nav-nested .nav-link.active {
18698
+ color: #fff;
18699
+ }
18700
+ .sidebar-dark-l2 .nav-nested .nav-link:disabled, .sidebar-dark-l2 .nav-nested .nav-link.disabled {
18701
+ box-shadow: none;
18702
+ color: #a7a9bc;
18703
+ opacity: 0.65;
18704
+ }
18705
+ .sidebar-dark-l2 .nav-nested .nav-link:disabled:active, .sidebar-dark-l2 .nav-nested .nav-link.disabled:active {
18706
+ pointer-events: none;
18707
+ }
18708
+ .sidebar-dark-l2 .nav-nested .nav-link[aria-expanded=true], .sidebar-dark-l2 .nav-nested .nav-link.show {
18709
+ color: #fff;
18710
+ }
18660
18711
  .c-slideout-transition-in {
18661
18712
  transition: all 0.3s ease-in-out;
18662
18713
  }
@@ -18712,10 +18763,10 @@ a.sheet-subtitle:focus {
18712
18763
  z-index: 1;
18713
18764
  }
18714
18765
  .c-slideout .tbar-stacked.c-slideout-show {
18715
- display: block;
18766
+ display: flex;
18716
18767
  }
18717
18768
  .c-slideout .tbar-stacked.c-slideout-transition {
18718
- display: block;
18769
+ display: flex;
18719
18770
  }
18720
18771
  @media (max-width: 767.98px) {
18721
18772
  .c-slideout .sidebar {
@@ -21813,10 +21864,6 @@ ul.autofit-row {
21813
21864
  .inline-item .lexicon-icon {
21814
21865
  margin-top: -0.1em;
21815
21866
  }
21816
- .inline-item .loading-animation {
21817
- font-size: 1.25em;
21818
- }
21819
-
21820
21867
  .inline-item-before {
21821
21868
  margin-right: 0.5rem;
21822
21869
  }
@@ -30325,84 +30372,163 @@ a.text-dark:hover, a.text-dark:focus {
30325
30372
  visibility: hidden !important;
30326
30373
  }
30327
30374
 
30375
+ @keyframes loading-animation-circle {
30376
+ 100% {
30377
+ transform: rotate(360deg);
30378
+ }
30379
+ }
30328
30380
  .loading-animation {
30329
30381
  display: block;
30330
- font-size: 2.5rem;
30331
30382
  height: 1em;
30332
30383
  margin-left: auto;
30333
30384
  margin-right: auto;
30385
+ overflow: hidden;
30334
30386
  position: relative;
30335
30387
  text-align: left;
30336
30388
  vertical-align: middle;
30337
30389
  width: 1em;
30338
30390
  }
30339
-
30340
- .loading-animation:after {
30341
- animation: 1.2s ease-out infinite;
30342
- animation-name: loading-animation;
30391
+ .loading-animation::before {
30392
+ animation: loading-animation-circle 1s linear infinite;
30393
+ border-radius: 50%;
30394
+ box-shadow: -0.03125em -0.375em 0 0 currentColor;
30395
+ content: "";
30396
+ height: 0.25em;
30397
+ left: 50%;
30398
+ margin-left: -0.125em;
30399
+ margin-top: -0.125em;
30400
+ position: absolute;
30401
+ top: 50%;
30402
+ width: 0.25em;
30403
+ }
30404
+ .loading-animation::after {
30405
+ animation: loading-animation-circle 1s linear infinite;
30406
+ background-color: currentColor;
30343
30407
  border-radius: 50%;
30344
- color: #6b6c7e;
30345
30408
  content: "";
30346
30409
  display: block;
30347
30410
  height: 1em;
30348
- left: 0;
30349
- position: absolute;
30350
- top: 0;
30351
- transform: scale(0.33334);
30411
+ -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
30412
+ -webkit-mask-composite: source-out;
30413
+ mask-composite: subtract;
30414
+ padding: 0.25em;
30352
30415
  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
30416
  }
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);
30417
+
30418
+ @keyframes loading-animation-squares-box-1 {
30419
+ 0% {
30420
+ left: 0;
30421
+ opacity: 0.4;
30422
+ top: 0;
30423
+ transform: scale(1);
30361
30424
  }
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);
30425
+ 25% {
30426
+ left: calc(100% - 1em);
30427
+ opacity: 0.4;
30428
+ top: 0;
30429
+ transform: scale(1);
30364
30430
  }
30365
30431
  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);
30432
+ left: calc(100% - 1.5em);
30433
+ opacity: 1;
30434
+ top: calc(100% - 1.5em);
30435
+ transform: scale(2);
30370
30436
  }
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;
30437
+ 75% {
30438
+ left: 0.5em;
30439
+ opacity: 1;
30440
+ top: calc(100% - 1.5em);
30441
+ transform: scale(2);
30373
30442
  }
30374
30443
  }
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);
30444
+ @keyframes loading-animation-squares-box-2 {
30445
+ 0% {
30446
+ left: calc(100% - 1.5em);
30447
+ opacity: 1;
30448
+ top: calc(100% - 1.5em);
30449
+ transform: scale(2);
30387
30450
  }
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);
30451
+ 25% {
30452
+ left: 0.5em;
30453
+ opacity: 1;
30454
+ top: calc(100% - 1.5em);
30455
+ transform: scale(2);
30390
30456
  }
30391
30457
  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);
30458
+ left: 0;
30459
+ opacity: 0.4;
30460
+ top: 0;
30461
+ transform: scale(1);
30396
30462
  }
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;
30463
+ 75% {
30464
+ left: calc(100% - 1em);
30465
+ opacity: 0.4;
30466
+ top: 0;
30467
+ transform: scale(1);
30399
30468
  }
30400
30469
  }
30401
-
30402
- .loading-animation.loading-animation-sm {
30403
- font-size: 1.25rem;
30470
+ .loading-animation-squares {
30471
+ display: block;
30472
+ height: 1em;
30473
+ margin-left: auto;
30474
+ margin-right: auto;
30475
+ position: relative;
30476
+ text-align: left;
30477
+ vertical-align: middle;
30478
+ width: 1em;
30479
+ }
30480
+ .loading-animation-squares::before {
30481
+ animation: loading-animation-squares-box-1 2.4s ease-in-out infinite;
30482
+ background-color: currentColor;
30483
+ border-radius: 0.2em;
30484
+ content: "";
30485
+ display: block;
30486
+ font-size: 0.3125em;
30487
+ height: 1em;
30488
+ left: 0;
30489
+ opacity: 0.4;
30490
+ position: absolute;
30491
+ top: 0;
30492
+ transform: scale(1);
30493
+ width: 1em;
30494
+ }
30495
+ .loading-animation-squares::after {
30496
+ animation: loading-animation-squares-box-2 2.4s ease-in-out infinite;
30497
+ background-color: currentColor;
30498
+ border-radius: 0.2em;
30499
+ content: "";
30500
+ display: block;
30501
+ font-size: 0.3125em;
30502
+ height: 1em;
30503
+ left: calc(100% - 1.5em);
30504
+ opacity: 1;
30505
+ position: absolute;
30506
+ top: calc(100% - 1.5em);
30507
+ transform: scale(2);
30508
+ width: 1em;
30404
30509
  }
30405
30510
 
30511
+ .loading-animation-xs {
30512
+ font-size: 0.625rem;
30513
+ }
30514
+ .loading-animation-sm {
30515
+ font-size: 1rem;
30516
+ }
30517
+ .loading-animation-md {
30518
+ font-size: 2rem;
30519
+ }
30520
+ .loading-animation-lg {
30521
+ font-size: 4rem;
30522
+ }
30523
+ .loading-animation-primary {
30524
+ color: #0b5fff;
30525
+ }
30526
+ .loading-animation-secondary {
30527
+ color: #6b6c7e;
30528
+ }
30529
+ .loading-animation-light {
30530
+ color: #fff;
30531
+ }
30406
30532
  /* REUSE-Snippet-Begin
30407
30533
  * SPDX-License-Identifier: MIT
30408
30534
  * SPDX-FileCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>