@itcase/ui 1.8.179 → 1.9.0

package/dist/css/components/Avatar/Avatar.css

@@ -1,326 +0,0 @@
-.avatar {
-  &__wrapper {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ^&__image {
-      position: relative;
-      overflow: hidden;
-    }
-    ^&__icon {
-      position: absolute;
-      right: var(--avatar-icon-right);
-      bottom: var(--avatar-icon-bottom);
-    }
-    ^&__badge {
-      position: absolute;
-    }
-  }
-  div&__dropdown {
-    margin: 10px 0 0 0;
-    position: absolute;
-    left: 0;
-    top: 100%;
-    z-index: 100;
-  }
-}
-.avatar {
-  &&_skeleton {
-    ^&__wrapper {
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-fill-secondary),
-        var(--color-surface-fill-tertiary),
-        var(--color-surface-fill-secondary)
-      );
-      background-size: 200%;
-      animation: avatarSkeleton 3s infinite linear;
-      & * {
-        opacity: 0%;
-      }
-    }
-  }
-}
-@keyframes avatarSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-/* stylelint-disable prettier/prettier */
-.avatar {
-  &_size {
-      &_16 {
-        ^^&__wrapper {
-          width: 16px;
-          height: 16px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-16-position-right);
-            bottom: var(--avatar-badge-16-position-bottom);
-          }
-          ^^^&__image {
-            width: 16px;
-            height: 16px;
-            & .image__item {
-              width: 16px;
-              height: 16px;
-            }
-          }
-        }
-      }
-      &_20 {
-        ^^&__wrapper {
-          width: 20px;
-          height: 20px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-20-position-right);
-            bottom: var(--avatar-badge-20-position-bottom);
-          }
-          ^^^&__image {
-            width: 20px;
-            height: 20px;
-            & .image__item {
-              width: 20px;
-              height: 20px;
-            }
-          }
-        }
-      }
-      &_24 {
-        ^^&__wrapper {
-          width: 24px;
-          height: 24px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-24-position-right);
-            bottom: var(--avatar-badge-24-position-bottom);
-          }
-          ^^^&__image {
-            width: 24px;
-            height: 24px;
-            & .image__item {
-              width: 24px;
-              height: 24px;
-            }
-          }
-        }
-      }
-      &_32 {
-        ^^&__wrapper {
-          width: 32px;
-          height: 32px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-32-position-right);
-            bottom: var(--avatar-badge-32-position-bottom);
-          }
-          ^^^&__image {
-            width: 32px;
-            height: 32px;
-            & .image__item {
-              width: 32px;
-              height: 32px;
-            }
-          }
-        }
-      }
-      &_40 {
-        ^^&__wrapper {
-          width: 40px;
-          height: 40px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-40-position-right);
-            bottom: var(--avatar-badge-40-position-bottom);
-          }
-          ^^^&__image {
-            width: 40px;
-            height: 40px;
-            & .image__item {
-              width: 40px;
-              height: 40px;
-            }
-          }
-        }
-      }
-      &_48 {
-        ^^&__wrapper {
-          width: 48px;
-          height: 48px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-48-position-right);
-            bottom: var(--avatar-badge-48-position-bottom);
-          }
-          ^^^&__image {
-            width: 48px;
-            height: 48px;
-            & .image__item {
-              width: 48px;
-              height: 48px;
-            }
-          }
-        }
-      }
-      &_56 {
-        ^^&__wrapper {
-          width: 56px;
-          height: 56px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-56-position-right);
-            bottom: var(--avatar-badge-56-position-bottom);
-          }
-          ^^^&__image {
-            width: 56px;
-            height: 56px;
-            & .image__item {
-              width: 56px;
-              height: 56px;
-            }
-          }
-        }
-      }
-      &_96 {
-        ^^&__wrapper {
-          width: 96px;
-          height: 96px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-96-position-right);
-            bottom: var(--avatar-badge-96-position-bottom);
-          }
-          ^^^&__image {
-            width: 96px;
-            height: 96px;
-            & .image__item {
-              width: 96px;
-              height: 96px;
-            }
-          }
-        }
-      }
-      &_144 {
-        ^^&__wrapper {
-          width: 144px;
-          height: 144px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-144-position-right);
-            bottom: var(--avatar-badge-144-position-bottom);
-          }
-          ^^^&__image {
-            width: 144px;
-            height: 144px;
-            & .image__item {
-              width: 144px;
-              height: 144px;
-            }
-          }
-        }
-      }
-      &_240 {
-        ^^&__wrapper {
-          width: 240px;
-          height: 240px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-240-position-right);
-            bottom: var(--avatar-badge-240-position-bottom);
-          }
-          ^^^&__image {
-            width: 240px;
-            height: 240px;
-            & .image__item {
-              width: 240px;
-              height: 240px;
-            }
-          }
-        }
-      }
-      &_240 {
-        ^^&__wrapper {
-          width: 240px;
-          height: 240px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__badge {
-            right: var(--avatar-badge-240-position-right);
-            bottom: var(--avatar-badge-240-position-bottom);
-          }
-          ^^^&__image {
-            width: 240px;
-            height: 240px;
-            & .image__item {
-              width: 240px;
-              height: 240px;
-            }
-          }
-        }
-      }
-  }
-}
-.avatar_status {
-  position: relative;
-}
-:root {
-  --avatar-icon-right: -4px;
-  --avatar-icon-bottom: -3px;
-  
-  --avatar-badge-16-position-right: 0;
-  --avatar-badge-16-position-bottom: 0;
-
-  --avatar-badge-20-position-right: 0;
-  --avatar-badge-20-position-bottom: 0;
-
-  --avatar-badge-24-position-right: 0;
-  --avatar-badge-24-position-bottom: 0;
-
-  --avatar-badge-32-position-right: 0;
-  --avatar-badge-32-position-bottom: 0;
-
-  --avatar-badge-40-position-right: 0;
-  --avatar-badge-40-position-bottom: 0;
-
-  --avatar-badge-48-position-right: 0;
-  --avatar-badge-48-position-bottom: 0;
-
-  --avatar-badge-56-position-right: 0;
-  --avatar-badge-56-position-bottom: 0;
-
-  --avatar-badge-96-position-right: 0;
-  --avatar-badge-96-position-bottom: 0;
-
-  --avatar-badge-144-position-right: 0;
-  --avatar-badge-144-position-bottom: 0;
-
-  --avatar-badge-240-position-right: 0;
-  --avatar-badge-240-position-bottom: 0;
-
-}

package/dist/css/components/AvatarStack/AvatarStack.css

@@ -1,135 +0,0 @@
-div.avatar {
-  &-stack {
-    display: flex;
-    align-items: center;
-    &__item {
-      position: relative;
-      transition: all 0.3s ease;
-      cursor: pointer;
-      &:hover {
-        z-index: 10;
-        transition: all 0.3s ease;
-      }
-      &-text {
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-}
-.avatar-stack {
-  &_direction {
-    &_horizontal {
-      display: flex;
-      flex-direction: row;
-      align-items: flex-start;
-      &-reverse {
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: flex-start;
-      }
-    }
-    &_vertical {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      &-reverse {
-        display: flex;
-        flex-direction: column-reverse;
-        align-items: flex-start;
-      }
-    }
-      &_row {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-      }
-      &_row-reverse {
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: flex-start;
-      }
-      &_column {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-      &_column-reverse {
-        display: flex;
-        flex-direction: column-reverse;
-        align-items: flex-start;
-      }
-  }
-}
-div.avatar-stack {
-  &_size {
-      &_56 {
-        & .avatar-stack__item {
-          &:not(:first-child) {
-            margin: 0 0 0 var(--avatar-stack-size-56-gap);
-          }
-        }
-      }
-      &_40 {
-        & .avatar-stack__item {
-          &:not(:first-child) {
-            margin: 0 0 0 var(--avatar-stack-size-40-gap);
-          }
-        }
-      }
-      &_32 {
-        & .avatar-stack__item {
-          &:not(:first-child) {
-            margin: 0 0 0 var(--avatar-stack-size-32-gap);
-          }
-        }
-      }
-      &_24 {
-        & .avatar-stack__item {
-          &:not(:first-child) {
-            margin: 0 0 0 var(--avatar-stack-size-24-gap);
-          }
-        }
-      }
-      &_20 {
-        & .avatar-stack__item {
-          &:not(:first-child) {
-            margin: 0 0 0 var(--avatar-stack-size-20-gap);
-          }
-        }
-      }
-      &_16 {
-        & .avatar-stack__item {
-          &:not(:first-child) {
-            margin: 0 0 0 var(--avatar-stack-size-16-gap);
-          }
-        }
-      }
-  }
-}
-.avatar-stack {
-  &&-skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: avatarStackSkeleton 3s infinite linear !important;
-    background-image: linear-gradient(
-      90deg,
-      var(--color-surface-fill-secondary),
-      var(--color-surface-fill-tertiary),
-      var(--color-surface-fill-secondary)
-    ) !important;
-    & * {
-      opacity: 0%;
-    }
-  }
-}
-@keyframes avatarStackSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}