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;
//       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() {
//   position: relative;
//   overflow: hidden;
//   background: transparent;

//   &::after {
//     position: absolute;
//     top: 0;
//     right: -150%;
//     bottom: 0;
//     left: -150%;
//     background: linear-gradient(
//       90deg,
//       @skeleton-color 25%,
//       @skeleton-to-color 37%,
//       @skeleton-color 63%
//     );
//     animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
//     content: '';
//   }
// }

// @keyframes ~"@{skeleton-prefix-cls}-loading" {
//   0% {
//     transform: translateX(-37.5%);
//   }

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

// @import './rtl';