rsuite/Placeholder/styles/index.less

A suite of react components

@import '../../styles/common.less';
@import './mixin.less';

//
// Placeholder
// --------------------------------------------------

.rs-placeholder {
  @placeholder-image-color: var(--rs-bg-card);

  display: flex;

  &-paragraph {
    justify-content: flex-start;
    align-items: flex-start;

    &-graph {
      flex: 0 0 auto;
      width: 60px;
      height: 60px;
      border-radius: 2px;
      margin-right: 20px;
      background-color: var(--rs-placeholder);

      &-circle {
        border-radius: 50%;
      }

      &-image {
        width: 80px;
        height: 60px;
        position: relative;
        overflow: hidden;

        &::after {
          content: '';
          width: 0;
          height: 0;
          left: 10px;
          bottom: 10px;
          position: absolute;
          border-bottom: 36px solid @placeholder-image-color;
          border-left: 20px solid transparent;
          border-right: 30px solid transparent;
        }

        &::before {
          content: '';
          width: 0;
          height: 0;
          left: 40px;
          bottom: 10px;
          position: absolute;
          border-bottom: 22px solid @placeholder-image-color;
          border-left: 16px solid transparent;
          border-right: 16px solid transparent;
        }
      }

      &-image &-inner {
        width: 12px;
        height: 12px;
        right: 18px;
        top: 10px;
        border-radius: 50%;
        background: @placeholder-image-color;
        position: absolute;
      }
    }

    &-group {
      width: 100%;
    }

    .rs-placeholder-row {
      @widths: 100% 50% 80% 65% 90% 70% 85% 60% 75%;
      .generate-row-width(@widths, length(@widths));
    }
  }

  &-row {
    background-color: var(--rs-placeholder);
    width: 100%;
  }

  &-grid {
    &-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      &:first-child {
        align-items: flex-start; //first col align left
      }

      .rs-placeholder-row {
        width: 30%;
        @widths: 50% 25% 35%;
        .generate-row-width(@widths, length(@widths));
      }
    }
  }

  &-graph {
    display: inline-block;
    width: 100%;
    background-color: var(--rs-placeholder);
  }

  &-active {
    &.rs-placeholder-graph,
    .rs-placeholder-paragraph-graph,
    .rs-placeholder-row {
      background: linear-gradient(
        -45deg,
        var(--rs-placeholder) 25%,
        var(--rs-placeholder-active) 37%,
        var(--rs-placeholder) 63%
      );
      background-size: 400% 100% !important;
      animation: placeholder-active 1.5s ease infinite;
    }
  }

  @keyframes placeholder-active {
    0% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0 50%;
    }
  }
}