12345678910111213141516171819202122232425262728293031323334353637383940 |
- @import 'mixins/mixins';
- @import 'common/var';
- @import "./skeleton-item.scss";
- @mixin skeleton-color() {
- background: linear-gradient(
- 90deg,
- $--skeleton-color 25%,
- $--skeleton-to-color 37%,
- $--skeleton-color 63%
- );
- background-size: 400% 100%;
- animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
- }
- @keyframes #{$namespace}-skeleton-loading {
- 0% {
- background-position: 100% 50%;
- }
- 100% {
- background-position: 0 50%;
- }
- }
- @include b(skeleton) {
- width: 100%;
- @each $unit in (first-line, paragraph) {
- @include e($unit) {
- height: 16px;
- margin-top: 16px;
- background: $--skeleton-color;
- }
- }
- @include when(animated) {
- .#{$namespace}-skeleton__item {
- @include skeleton-color();
- }
- }
- }
|