packages/pass/styles/_skeletons.scss

   1 @import '~@proton/styles/scss/lib/config';
   2 @import '~@proton/styles/scss/lib/easing';
   3 @import '~@proton/styles/scss/specifics/placeholder-loading';
   4
   5 .pass {
   6         &-skeleton {
   7                 &::before {
   8                         @extend %item-loading-pseudo;
   9                         @extend %placeholder-loading;
  10                 }
  11
  12                 &--box {
  13                         &::before {
  14                                 inline-size: 100%;
  15                                 block-size: var(--skeleton-height, inherit);
  16                         }
  17                 }
  18
  19                 &--select {
  20                         &::before {
  21                                 inline-size: 80%;
  22                         }
  23                 }
  24
  25                 &--item-heading {
  26                         &::before {
  27                                 inline-size: 90%;
  28                         }
  29                 }
  30
  31                 &--item-subheading,
  32                 &--table-cell {
  33                         &::before {
  34                                 inline-size: 65%;
  35                         }
  36                 }
  37
  38                 &--item-icon {
  39                         &::before {
  40                                 inline-size: em(16);
  41                                 block-size: em(16);
  42                         }
  43                 }
  44
  45                 &--alias-preview,
  46                 &--value {
  47                         &::before {
  48                                 inline-size: 80%;
  49                         }
  50                 }
  51
  52                 &--alias-mailbox {
  53                         &::before {
  54                                 inline-size: 50%;
  55                         }
  56                 }
  57         }
  58 }