ant-design/components/skeleton/style/index.less

//@import '../../style/themes/index';
//@import '../../style/mixins/index';
//
//@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';
//@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar';
//@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title';
//@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';
//@skeleton-button-prefix-cls: ~'@{skeleton-prefix-cls}-button';
//@skeleton-input-prefix-cls: ~'@{skeleton-prefix-cls}-input';
//@skeleton-image-prefix-cls: ~'@{skeleton-prefix-cls}-image';
//@skeleton-block-radius: 4px;
//
//.@{skeleton-prefix-cls} {
//  display: table;
//  width: 100%;
//
//  &-header {
//    display: table-cell;
//    padding-right: @padding-md;
//    vertical-align: top;
//
//    // Avatar
//    .@{skeleton-avatar-prefix-cls} {
//      .skeleton-element-avatar();
//    }
//  }
//
//  &-content {
//    display: table-cell;
//    width: 100%;
//    vertical-align: top;
//
//    // Title
//    .@{skeleton-title-prefix-cls} {
//      width: 100%;
//      height: @skeleton-title-height;
//      margin-top: @margin-md;
//      background: @skeleton-color;
//      border-radius: @skeleton-block-radius;
//
//      + .@{skeleton-paragraph-prefix-cls} {
//        margin-top: @skeleton-title-paragraph-margin-top;
//      }
//    }
//
//    // paragraph
//    .@{skeleton-paragraph-prefix-cls} {
//      padding: 0;
//
//      > li {
//        width: 100%;
//        height: @skeleton-paragraph-li-height;
//        list-style: none;
//        background: @skeleton-color;
//        border-radius: @skeleton-block-radius;
//
//        &:last-child:not(:first-child):not(:nth-child(2)) {
//          width: 61%;
//        }
//
//        + li {
//          margin-top: @skeleton-paragraph-li-margin-top;
//        }
//      }
//    }
//  }
//
//  &-with-avatar &-content {
//    // Title
//    .@{skeleton-title-prefix-cls} {
//      margin-top: @margin-sm;
//
//      + .@{skeleton-paragraph-prefix-cls} {
//        margin-top: @skeleton-paragraph-margin-top;
//      }
//    }
//  }
//
//  &-round &-content {
//    .@{skeleton-title-prefix-cls},
//    .@{skeleton-paragraph-prefix-cls} > li {
//      border-radius: 100px;
//    }
//  }
//
//  // With active animation
//  &.@{skeleton-prefix-cls}-active {
//    & .@{skeleton-prefix-cls}-content {
//      .@{skeleton-title-prefix-cls},
//      .@{skeleton-paragraph-prefix-cls} > li {
//        .skeleton-color();
//      }
//    }
//
//    .@{skeleton-avatar-prefix-cls} {
//      .skeleton-color();
//    }
//
//    .@{skeleton-button-prefix-cls} {
//      .skeleton-color();
//    }
//
//    .@{skeleton-input-prefix-cls} {
//      .skeleton-color();
//    }
//
//    .@{skeleton-image-prefix-cls} {
//      .skeleton-color();
//    }
//  }
//
//  // Skeleton Block Button, Input
//  &.@{skeleton-prefix-cls}-block {
//    width: 100%;
//
//    .@{skeleton-button-prefix-cls} {
//      width: 100%;
//    }
//
//    .@{skeleton-input-prefix-cls} {
//      width: 100%;
//    }
//  }
//
//  // Skeleton element
//  &-element {
//    display: inline-block;
//    width: auto;
//
//    .@{skeleton-button-prefix-cls} {
//      .skeleton-element-button();
//    }
//
//    .@{skeleton-avatar-prefix-cls} {
//      .skeleton-element-avatar();
//    }
//
//    .@{skeleton-input-prefix-cls} {
//      .skeleton-element-input();
//    }
//
//    .@{skeleton-image-prefix-cls} {
//      .skeleton-element-image();
//    }
//  }
//}
//// Button
//.skeleton-element-button() {
//  display: inline-block;
//  vertical-align: top;
//  background: @skeleton-color;
//  border-radius: @border-radius-base;
//
//  .skeleton-element-button-size(@btn-height-base);
//
//  &-lg {
//    .skeleton-element-button-size(@btn-height-lg);
//  }
//
//  &-sm {
//    .skeleton-element-button-size(@btn-height-sm);
//  }
//}
//// Avatar
//.skeleton-element-avatar() {
//  display: inline-block;
//  vertical-align: top;
//  background: @skeleton-color;
//
//  .skeleton-element-avatar-size(@avatar-size-base);
//
//  &-lg {
//    .skeleton-element-avatar-size(@avatar-size-lg);
//  }
//
//  &-sm {
//    .skeleton-element-avatar-size(@avatar-size-sm);
//  }
//}
//
//// Input
//.skeleton-element-input() {
//  display: inline-block;
//  vertical-align: top;
//  background: @skeleton-color;
//
//  .skeleton-element-input-size(@input-height-base);
//
//  &-lg {
//    .skeleton-element-input-size(@input-height-lg);
//  }
//
//  &-sm {
//    .skeleton-element-input-size(@input-height-sm);
//  }
//}
//
//// Image
//.skeleton-element-image() {
//  display: flex;
//  align-items: center;
//  justify-content: center;
//  vertical-align: top;
//  background: @skeleton-color;
//
//  .skeleton-element-image-size(@image-size-base*2);
//
//  &-path {
//    fill: #bfbfbf;
//  }
//
//  &-svg {
//    .skeleton-element-image-size(@image-size-base);
//    max-width: @image-size-base * 4;
//    max-height: @image-size-base * 4;
//  }
//}
//
//.skeleton-element-avatar-size(@size) {
//  width: @size;
//  .skeleton-element-common-size(@size);
//
//  &.@{skeleton-avatar-prefix-cls}-circle {
//    border-radius: 50%;
//  }
//}
//
//.skeleton-element-button-size(@size) {
//  width: @size * 2;
//  min-width: @size * 2;
//  .skeleton-element-common-size(@size);
//
//  &.@{skeleton-button-prefix-cls}-circle {
//    width: @size;
//    min-width: @size;
//    border-radius: 50%;
//  }
//
//  &.@{skeleton-button-prefix-cls}-round {
//    border-radius: @size;
//  }
//}
//
//.skeleton-element-input-size(@size) {
//  width: @size * 5;
//  min-width: @size * 5;
//  .skeleton-element-common-size(@size);
//}
//
//.skeleton-element-image-size(@size) {
//  width: @size;
//  .skeleton-element-common-size(@size);
//
//  &.@{skeleton-image-prefix-cls}-circle {
//    border-radius: 50%;
//  }
//}
//
//.skeleton-element-common-size(@size) {
//  height: @size;
//  line-height: @size;
//}
//
//.skeleton-color() {
//  background: linear-gradient(
//    90deg,
//    @skeleton-color 25%,
//    @skeleton-to-color 37%,
//    @skeleton-color 63%
//  );
//  background-size: 400% 100%;
//  animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
//}
//
//@keyframes ~"@{skeleton-prefix-cls}-loading" {
//  0% {
//    background-position: 100% 50%;
//  }
//
//  100% {
//    background-position: 0 50%;
//  }
//}
//
//@import './rtl';