@clayui/css 3.58.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/base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
- * Clay 3.58.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>
@@ -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,14 @@ 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 {
27899
+ animation: loading-animation-circle 1s linear infinite;
27898
27900
  display: block;
27899
- font-size: 2.5rem;
27900
27901
  height: 1em;
27901
27902
  margin-left: auto;
27902
27903
  margin-right: auto;
@@ -27905,73 +27906,144 @@ a.text-dark:hover, a.text-dark:focus {
27905
27906
  vertical-align: middle;
27906
27907
  width: 1em;
27907
27908
  }
27908
-
27909
- .loading-animation:after {
27910
- animation: 1.2s ease-out infinite;
27911
- animation-name: loading-animation;
27909
+ .loading-animation::before {
27910
+ border-radius: 50%;
27911
+ box-shadow: -0.03125em -0.375em 0 0 currentColor;
27912
+ content: "";
27913
+ height: 0.25em;
27914
+ left: 50%;
27915
+ position: absolute;
27916
+ top: 50%;
27917
+ transform: translate(-50%, -50%);
27918
+ width: 0.25em;
27919
+ }
27920
+ .loading-animation::after {
27921
+ background-color: currentColor;
27912
27922
  border-radius: 50%;
27913
- color: #212529;
27914
27923
  content: "";
27915
27924
  display: block;
27916
27925
  height: 1em;
27917
- left: 0;
27918
- position: absolute;
27919
- top: 0;
27920
- transform: scale(0.33334);
27926
+ -webkit-mask: conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box;
27927
+ -webkit-mask-composite: source-out;
27928
+ mask-composite: subtract;
27929
+ padding: 0.25em;
27921
27930
  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
27931
  }
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);
27932
+
27933
+ @keyframes loading-animation-squares-box-1 {
27934
+ 0% {
27935
+ left: 0;
27936
+ opacity: 0.4;
27937
+ top: 0;
27938
+ transform: scale(1);
27930
27939
  }
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);
27940
+ 25% {
27941
+ left: calc(100% - 1em);
27942
+ opacity: 0.4;
27943
+ top: 0;
27944
+ transform: scale(1);
27933
27945
  }
27934
27946
  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);
27947
+ left: calc(100% - 1.5em);
27948
+ opacity: 1;
27949
+ top: calc(100% - 1.5em);
27950
+ transform: scale(2);
27939
27951
  }
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;
27952
+ 75% {
27953
+ left: 0.5em;
27954
+ opacity: 1;
27955
+ top: calc(100% - 1.5em);
27956
+ transform: scale(2);
27942
27957
  }
27943
27958
  }
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);
27959
+ @keyframes loading-animation-squares-box-2 {
27960
+ 0% {
27961
+ left: calc(100% - 1.5em);
27962
+ opacity: 1;
27963
+ top: calc(100% - 1.5em);
27964
+ transform: scale(2);
27956
27965
  }
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);
27966
+ 25% {
27967
+ left: 0.5em;
27968
+ opacity: 1;
27969
+ top: calc(100% - 1.5em);
27970
+ transform: scale(2);
27959
27971
  }
27960
27972
  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);
27973
+ left: 0;
27974
+ opacity: 0.4;
27975
+ top: 0;
27976
+ transform: scale(1);
27965
27977
  }
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;
27978
+ 75% {
27979
+ left: calc(100% - 1em);
27980
+ opacity: 0.4;
27981
+ top: 0;
27982
+ transform: scale(1);
27968
27983
  }
27969
27984
  }
27970
-
27971
- .loading-animation.loading-animation-sm {
27972
- font-size: 1.25rem;
27985
+ .loading-animation-squares {
27986
+ display: block;
27987
+ height: 1em;
27988
+ margin-left: auto;
27989
+ margin-right: auto;
27990
+ position: relative;
27991
+ text-align: left;
27992
+ vertical-align: middle;
27993
+ width: 1em;
27994
+ }
27995
+ .loading-animation-squares::before {
27996
+ animation: loading-animation-squares-box-1 2.4s ease-in-out infinite;
27997
+ background-color: currentColor;
27998
+ border-radius: 0.2em;
27999
+ content: "";
28000
+ display: block;
28001
+ font-size: 0.3125em;
28002
+ height: 1em;
28003
+ left: 0;
28004
+ opacity: 0.4;
28005
+ position: absolute;
28006
+ top: 0;
28007
+ transform: scale(1);
28008
+ width: 1em;
28009
+ }
28010
+ .loading-animation-squares::after {
28011
+ animation: loading-animation-squares-box-2 2.4s ease-in-out infinite;
28012
+ background-color: currentColor;
28013
+ border-radius: 0.2em;
28014
+ content: "";
28015
+ display: block;
28016
+ font-size: 0.3125em;
28017
+ height: 1em;
28018
+ left: calc(100% - 1.5em);
28019
+ opacity: 1;
28020
+ position: absolute;
28021
+ top: calc(100% - 1.5em);
28022
+ transform: scale(2);
28023
+ width: 1em;
27973
28024
  }
27974
28025
 
28026
+ .loading-animation-xs {
28027
+ font-size: 0.625rem;
28028
+ }
28029
+ .loading-animation-sm {
28030
+ font-size: 1rem;
28031
+ }
28032
+ .loading-animation-md {
28033
+ font-size: 2rem;
28034
+ }
28035
+ .loading-animation-lg {
28036
+ font-size: 4rem;
28037
+ }
28038
+ .loading-animation-primary {
28039
+ color: #007bff;
28040
+ }
28041
+ .loading-animation-secondary {
28042
+ color: #6c757d;
28043
+ }
28044
+ .loading-animation-light {
28045
+ color: #fff;
28046
+ }
27975
28047
  /* REUSE-Snippet-Begin
27976
28048
  * SPDX-License-Identifier: MIT
27977
28049
  * SPDX-FileCopyrightText: © 2018 HTML5 Boilerplate <https://github.com/h5bp/main.css>