@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/base.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>
@@ -17544,10 +17544,10 @@ a.sheet-subtitle:hover {
17544
17544
  z-index: 1;
17545
17545
  }
17546
17546
  .c-slideout .tbar-stacked.c-slideout-show {
17547
- display: block;
17547
+ display: flex;
17548
17548
  }
17549
17549
  .c-slideout .tbar-stacked.c-slideout-transition {
17550
- display: block;
17550
+ display: flex;
17551
17551
  }
17552
17552
  @media (max-width: 767.98px) {
17553
17553
  .c-slideout .sidebar {
@@ -20494,10 +20494,6 @@ ul.autofit-row {
20494
20494
  .inline-item .lexicon-icon {
20495
20495
  margin-top: -0.1em;
20496
20496
  }
20497
- .inline-item .loading-animation {
20498
- font-size: 1.25em;
20499
- }
20500
-
20501
20497
  .inline-item-before {
20502
20498
  margin-right: 0.5rem;
20503
20499
  }
@@ -27894,9 +27890,13 @@ a.text-dark:hover, a.text-dark:focus {
27894
27890
  visibility: hidden !important;
27895
27891
  }
27896
27892
 
27893
+ @keyframes loading-animation-circle {
27894
+ 100% {
27895
+ transform: rotate(360deg);
27896
+ }
27897
+ }
27897
27898
  .loading-animation {
27898
27899
  display: block;
27899
- font-size: 2.5rem;
27900
27900
  height: 1em;
27901
27901
  margin-left: auto;
27902
27902
  margin-right: auto;
@@ -27905,73 +27905,147 @@ a.text-dark:hover, a.text-dark:focus {
27905
27905
  vertical-align: middle;
27906
27906
  width: 1em;
27907
27907
  }
27908
-
27909
- .loading-animation:after {
27910
- animation: 1.2s ease-out infinite;
27911
- animation-name: loading-animation;
27908
+ .loading-animation::before {
27909
+ animation: loading-animation-circle 1s linear infinite;
27910
+ border-radius: 50%;
27911
+ box-shadow: -0.03125em -0.375em 0 0 currentColor;
27912
+ content: "";
27913
+ height: 0.25em;
27914
+ left: 50%;
27915
+ margin-left: -0.125em;
27916
+ margin-top: -0.125em;
27917
+ position: absolute;
27918
+ top: 50%;
27919
+ width: 0.25em;
27920
+ }
27921
+ .loading-animation::after {
27922
+ animation: loading-animation-circle 1s linear infinite;
27923
+ background-color: currentColor;
27912
27924
  border-radius: 50%;
27913
- color: #212529;
27914
27925
  content: "";
27915
27926
  display: block;
27916
27927
  height: 1em;
27917
- left: 0;
27918
- position: absolute;
27919
- top: 0;
27920
- transform: scale(0.33334);
27928
+ -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
27929
+ -webkit-mask-composite: source-out;
27930
+ mask-composite: subtract;
27931
+ padding: 0.25em;
27921
27932
  width: 1em;
27922
- box-shadow: 0 -1em 0 0em #212529, 1em -0.5em 0 -0.35em rgba(33, 37, 41, 0.1), 1em 0.5em 0 -0.25em rgba(33, 37, 41, 0.2), 0 1em 0 -0.2em rgba(33, 37, 41, 0.4), -1em 0.5em 0 -0.15em rgba(33, 37, 41, 0.6), -1em -0.5em 0 -0.1em rgba(33, 37, 41, 0.8);
27923
27933
  }
27924
- @keyframes loading-animation {
27925
- 0%, 100% {
27926
- box-shadow: 0 -1em 0 0em #212529, 1em -0.5em 0 -0.35em rgba(33, 37, 41, 0.1), 1em 0.5em 0 -0.25em rgba(33, 37, 41, 0.2), 0 1em 0 -0.2em rgba(33, 37, 41, 0.4), -1em 0.5em 0 -0.15em rgba(33, 37, 41, 0.6), -1em -0.5em 0 -0.1em rgba(33, 37, 41, 0.8);
27927
- }
27928
- 16.6% {
27929
- box-shadow: 0 -1em 0 -0.1em rgba(33, 37, 41, 0.8), 1em -0.5em 0 0em #212529, 1em 0.5em 0 -0.35em rgba(33, 37, 41, 0.1), 0 1em 0 -0.25em rgba(33, 37, 41, 0.2), -1em 0.5em 0 -0.2em rgba(33, 37, 41, 0.4), -1em -0.5em 0 -0.15em rgba(33, 37, 41, 0.6);
27934
+
27935
+ @keyframes loading-animation-squares-box-1 {
27936
+ 0% {
27937
+ left: 0;
27938
+ opacity: 0.4;
27939
+ top: 0;
27940
+ transform: scale(1);
27930
27941
  }
27931
- 33.3% {
27932
- box-shadow: 0 -1em 0 -0.15em rgba(33, 37, 41, 0.6), 1em -0.5em 0 -0.1em rgba(33, 37, 41, 0.8), 1em 0.5em 0 0em #212529, 0 1em 0 -0.35em rgba(33, 37, 41, 0.1), -1em 0.5em 0 -0.25em rgba(33, 37, 41, 0.2), -1em -0.5em 0 -0.2em rgba(33, 37, 41, 0.4);
27942
+ 25% {
27943
+ left: calc(100% - 1em);
27944
+ opacity: 0.4;
27945
+ top: 0;
27946
+ transform: scale(1);
27933
27947
  }
27934
27948
  50% {
27935
- box-shadow: 0 -1em 0 -0.2em rgba(33, 37, 41, 0.4), 1em -0.5em 0 -0.15em rgba(33, 37, 41, 0.6), 1em 0.5em 0 -0.1em rgba(33, 37, 41, 0.8), 0 1em 0 0em #212529, -1em 0.5em 0 -0.35em rgba(33, 37, 41, 0.1), -1em -0.5em 0 -0.25em rgba(33, 37, 41, 0.2);
27936
- }
27937
- 66.6% {
27938
- box-shadow: 0 -1em 0 -0.25em rgba(33, 37, 41, 0.2), 1em -0.5em 0 -0.2em rgba(33, 37, 41, 0.4), 1em 0.5em 0 -0.15em rgba(33, 37, 41, 0.6), 0 1em 0 -0.1em rgba(33, 37, 41, 0.8), -1em 0.5em 0 0em #212529, -1em -0.5em 0 -0.35em rgba(33, 37, 41, 0.1);
27949
+ left: calc(100% - 1.5em);
27950
+ opacity: 1;
27951
+ top: calc(100% - 1.5em);
27952
+ transform: scale(2);
27939
27953
  }
27940
- 83% {
27941
- box-shadow: 0 -1em 0 -0.35em rgba(33, 37, 41, 0.1), 1em -0.5em 0 -0.25em rgba(33, 37, 41, 0.2), 1em 0.5em 0 -0.2em rgba(33, 37, 41, 0.4), 0 1em 0 -0.15em rgba(33, 37, 41, 0.6), -1em 0.5em 0 -0.1em rgba(33, 37, 41, 0.8), -1em -0.5em 0 0em #212529;
27954
+ 75% {
27955
+ left: 0.5em;
27956
+ opacity: 1;
27957
+ top: calc(100% - 1.5em);
27958
+ transform: scale(2);
27942
27959
  }
27943
27960
  }
27944
-
27945
- .loading-animation-light:after, .btn-primary .loading-animation:after, .btn-secondary .loading-animation:after, .btn-success .loading-animation:after, .btn-info .loading-animation:after, .btn-danger .loading-animation:after, .btn-dark .loading-animation:after {
27946
- animation-name: loading-animation-light;
27947
- color: #fff;
27948
- 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);
27949
- }
27950
- @keyframes loading-animation-light {
27951
- 0%, 100% {
27952
- 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);
27953
- }
27954
- 16.6% {
27955
- 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);
27961
+ @keyframes loading-animation-squares-box-2 {
27962
+ 0% {
27963
+ left: calc(100% - 1.5em);
27964
+ opacity: 1;
27965
+ top: calc(100% - 1.5em);
27966
+ transform: scale(2);
27956
27967
  }
27957
- 33.3% {
27958
- 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);
27968
+ 25% {
27969
+ left: 0.5em;
27970
+ opacity: 1;
27971
+ top: calc(100% - 1.5em);
27972
+ transform: scale(2);
27959
27973
  }
27960
27974
  50% {
27961
- 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);
27962
- }
27963
- 66.6% {
27964
- 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);
27975
+ left: 0;
27976
+ opacity: 0.4;
27977
+ top: 0;
27978
+ transform: scale(1);
27965
27979
  }
27966
- 83% {
27967
- 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;
27980
+ 75% {
27981
+ left: calc(100% - 1em);
27982
+ opacity: 0.4;
27983
+ top: 0;
27984
+ transform: scale(1);
27968
27985
  }
27969
27986
  }
27970
-
27971
- .loading-animation.loading-animation-sm {
27972
- font-size: 1.25rem;
27987
+ .loading-animation-squares {
27988
+ display: block;
27989
+ height: 1em;
27990
+ margin-left: auto;
27991
+ margin-right: auto;
27992
+ position: relative;
27993
+ text-align: left;
27994
+ vertical-align: middle;
27995
+ width: 1em;
27996
+ }
27997
+ .loading-animation-squares::before {
27998
+ animation: loading-animation-squares-box-1 2.4s ease-in-out infinite;
27999
+ background-color: currentColor;
28000
+ border-radius: 0.2em;
28001
+ content: "";
28002
+ display: block;
28003
+ font-size: 0.3125em;
28004
+ height: 1em;
28005
+ left: 0;
28006
+ opacity: 0.4;
28007
+ position: absolute;
28008
+ top: 0;
28009
+ transform: scale(1);
28010
+ width: 1em;
28011
+ }
28012
+ .loading-animation-squares::after {
28013
+ animation: loading-animation-squares-box-2 2.4s ease-in-out infinite;
28014
+ background-color: currentColor;
28015
+ border-radius: 0.2em;
28016
+ content: "";
28017
+ display: block;
28018
+ font-size: 0.3125em;
28019
+ height: 1em;
28020
+ left: calc(100% - 1.5em);
28021
+ opacity: 1;
28022
+ position: absolute;
28023
+ top: calc(100% - 1.5em);
28024
+ transform: scale(2);
28025
+ width: 1em;
27973
28026
  }
27974
28027
 
28028
+ .loading-animation-xs {
28029
+ font-size: 0.625rem;
28030
+ }
28031
+ .loading-animation-sm {
28032
+ font-size: 1rem;
28033
+ }
28034
+ .loading-animation-md {
28035
+ font-size: 2rem;
28036
+ }
28037
+ .loading-animation-lg {
28038
+ font-size: 4rem;
28039
+ }
28040
+ .loading-animation-primary {
28041
+ color: #007bff;
28042
+ }
28043
+ .loading-animation-secondary {
28044
+ color: #6c757d;
28045
+ }
28046
+ .loading-animation-light {
28047
+ color: #fff;
28048
+ }
27975
28049
  /* REUSE-Snippet-Begin
27976
28050
  * SPDX-License-Identifier: MIT
27977
28051
  * SPDX-FileCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>