60 lines
954 B
SCSS
60 lines
954 B
SCSS
@import "src/scss/variables";
|
|
|
|
// Loading placeholder styling
|
|
@mixin nth-children($points...) {
|
|
@each $point in $points {
|
|
&:nth-child(#{$point}) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-input__loading {
|
|
width: 100%;
|
|
|
|
&--line {
|
|
height: 10px;
|
|
margin: 10px 0;
|
|
animation: pulse 1s infinite ease-in-out;
|
|
|
|
&.short {
|
|
width: 60px !important;
|
|
}
|
|
|
|
&.fullwidth {
|
|
width: 100% !important;
|
|
}
|
|
|
|
&.nomargin {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
div {
|
|
@include nth-children(1, 5, 9) {
|
|
width: 150px;
|
|
}
|
|
@include nth-children(2, 6, 10) {
|
|
width: 250px;
|
|
}
|
|
@include nth-children(3, 7) {
|
|
width: 120px;
|
|
}
|
|
@include nth-children(4, 8) {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
background-color: rgba(165, 165, 165, 0.1);
|
|
}
|
|
50% {
|
|
background-color: rgba(165, 165, 165, 0.3);
|
|
}
|
|
100% {
|
|
background-color: rgba(165, 165, 165, 0.1);
|
|
}
|
|
}
|
|
}
|