skeleton-element.scss 1.4 KB
Newer Older
1
@include b(skeleton-element) {
2 3
  @include set-component-css-var('skeleton', $skeleton);
  
4 5 6 7 8 9 10 11 12
  display: block;
  width: 100%;
  height: 100%;

  @include b(skeleton-input) {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 100%;
13
    background: getCssVar('skeleton', 'bg-color');
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

    @include m(large) {
      width: 200px;
      min-width: 200px;
      height: 40px;
      line-height: 40px;
    }

    @include m(medium) {
      width: 160px;
      min-width: 160px;
      height: 32px;
      line-height: 32px;
    }

    @include m(small) {
      width: 120px;
      min-width: 120px;
      height: 24px;
      line-height: 24px;
    }
  }

  @include m(active) {
    @include b(skeleton-input) {
      position: relative;
      z-index: 0;
      overflow: hidden;
      background: transparent;

      &::after {
        position: absolute;
        top: 0;
        right: -150%;
        bottom: 0;
        left: -150%;
50
        content: '';
51 52
        background: linear-gradient(
          90deg,
53 54 55
          getCssVar('skeleton', 'bg-color') 25%,
          getCssVar('skeleton', 'transition-color') 37%,
          getCssVar('skeleton', 'bg-color') 63%
56
        );
57
        animation: skeleton-element-loading 1.4s ease infinite;
58 59 60 61
      }
    }
  }

62
  @keyframes skeleton-element-loading {
63 64 65 66 67 68 69 70 71
    0% {
      transform: translateX(-37.5%);
    }

    100% {
      transform: translateX(37.5%);
    }
  }
}