52 lines
859 B
SCSS
52 lines
859 B
SCSS
|
.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%;
|
||
|
|
}
|
||
|
|
}
|