123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- .placeholder {
- display: inline-block;
- min-height: 1em;
- vertical-align: middle;
- cursor: wait;
- background-color: currentcolor;
- opacity: $placeholder-opacity-max;
-
- &.btn::before {
- display: inline-block;
- content: "";
- }
- }
-
- // Sizing
- .placeholder-xs {
- min-height: .6em;
- }
-
- .placeholder-sm {
- min-height: .8em;
- }
-
- .placeholder-lg {
- min-height: 1.2em;
- }
-
- // Animation
- .placeholder-glow {
- .placeholder {
- animation: placeholder-glow 2s ease-in-out infinite;
- }
- }
-
- @keyframes placeholder-glow {
- 50% {
- opacity: $placeholder-opacity-min;
- }
- }
-
- .placeholder-wave {
- mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
- mask-size: 200% 100%;
- animation: placeholder-wave 2s linear infinite;
- }
-
- @keyframes placeholder-wave {
- 100% {
- mask-position: -200% 0%;
- }
- }
|