@itcase/ui 1.9.52 → 1.9.53

package/dist/css/styles/bundles.css

@@ -62003,6 +62003,210 @@ h2.react-datepicker__current-month {
     opacity: 0%;
   }
 }
+.dropzone {
+  flex-direction: column;
+  &__dropzone {
+    width: 100%;
+    box-shadow: none;
+    z-index: 1;
+    outline: 0;
+    @mixin easing easeOutQuart, all, 0.2s;
+    &_size {
+        &_xl {
+          ^^&-wrapper {
+            padding: var(--dropzone-size-xl-padding);
+          }
+        }
+        &_l {
+          ^^&-wrapper {
+            padding: var(--dropzone-size-l-padding);
+          }
+        }
+        &_m {
+          ^^&-wrapper {
+            padding: var(--dropzone-size-m-padding);
+          }
+        }
+        &_s {
+          ^^&-wrapper {
+            padding: var(--dropzone-size-s-padding);
+          }
+        }
+    }
+    &-wrapper {
+      display: grid;
+      gap: 16px;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      transition: var(--dropzone-transition);
+    }
+    ^&__hint {
+      width: 100%;
+      min-height: 120px;
+      text-align: center;
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      cursor: pointer;
+      place-content: center center;
+      &-title {
+        padding: 0 0 8px 0;
+        margin: 0;
+        @media (--mobile) {
+          padding: 0 0 4px 0;
+        }
+        & span {
+          @media (--mobile) {
+            display: none;
+          }
+        }
+      }
+      &-text {
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+  &__thumb {
+    padding: 8px 16px 8px 8px;
+    position: relative;
+    &_direction {
+      &_vertical {
+        display: flex;
+        flex-flow: column nowrap;
+        ^^&-image {
+          width: 100%;
+        }
+      }
+      &_horizontal {
+        column-gap: 8px;
+        display: grid;
+        grid-template-columns: min-content 1fr;
+        grid-template-rows: auto 1fr;
+        ^^&-image {
+          width: 160px;
+          height: 160px;
+        }
+      }
+    }
+    &-loader {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      display: flex;
+      left: 0;
+      top: 0;
+    }
+    &-image {
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      grid-column-start: 1;
+      grid-row-start: span 2;
+      &-inner {
+        height: auto;
+        max-width: 100%;
+      }
+    }
+    &-name {
+      width: 100%;
+      white-space: wrap;
+      padding: 12px 0 0 0;
+      align-self: flex-start;
+      grid-column-start: 2;
+      &-inner {
+        display: inline-block;
+        @mixin word-wrap;
+      }
+    }
+    &-remove {
+      width: 100%;
+      grid-column-start: 2;
+      align-self: flex-start;
+      cursor: pointer;
+    }
+  }
+  &_state_focus {
+    ^&__dropzone {
+      border: solid 2px red;
+    }
+  }
+}
+.dropzone {
+  &&_type_avatar {
+    width: 144px;
+    height: 144px;
+    border-radius: 50%;
+    overflow: hidden;
+    & .dropzone {
+      &__dropzone {
+        padding: 0;
+      }
+    }
+  }
+}
+.dropzone {
+  &__dropzone-wrapper_column {
+      &_1 {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+        & .dropzone__hint {
+          grid-column: span 1;
+        }
+      }
+      &_2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        & .dropzone__hint {
+          grid-column: span 2;
+        }
+      }
+      &_3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        & .dropzone__hint {
+          grid-column: span 3;
+        }
+      }
+      &_4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        & .dropzone__hint {
+          grid-column: span 4;
+        }
+      }
+      &_5 {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        & .dropzone__hint {
+          grid-column: span 5;
+        }
+      }
+  }
+}
+.dropzone {
+  &&_skeleton {
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    );
+    background-size: 200%;
+    animation: dropzoneSkeleton 3s infinite linear;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes dropzoneSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+:root {
+  --dropzone-size-normal-padding: 16px 16px;
+  --dropzone-transition: all 0.2s ease 0s;
+}
 .flex {
   width: 100%;
   display: flex;
@@ -80342,8 +80546,30 @@ div.label {
     position: relative;
     display: flex;
   }
-  &__text {
-  }
+    &_size_l {
+      ^&__text {
+        text-align: center;
+        margin: var(--loader-text-l-margin) 0 0 0;
+        position: absolute;
+        top: 100%;
+      }
+    }
+    &_size_m {
+      ^&__text {
+        text-align: center;
+        margin: var(--loader-text-m-margin) 0 0 0;
+        position: absolute;
+        top: 100%;
+      }
+    }
+    &_size_s {
+      ^&__text {
+        text-align: center;
+        margin: var(--loader-text-s-margin) 0 0 0;
+        position: absolute;
+        top: 100%;
+      }
+    }
 }
 .loader {
   &&_skeleton {
@@ -80371,7 +80597,7 @@ div.label {
 }
 .loader {
   &_type {
-    &_simple {
+    &_dot {
       ^^&__inner {
         width: auto;
         height: auto;
@@ -80382,9 +80608,10 @@ div.label {
         transform: translate(-50%, -50%);
       }
       ^^&__item {
-        border-radius: 100%;
+        border-radius: 50%;
         display: inline-block;
-        animation: loaderSimple 1.4s infinite ease-in-out both;
+        user-select: none;
+        animation: loaderDot 1.4s infinite ease-in-out both;
         &:first-child {
           animation-delay: -0.32s;
         }
@@ -80395,7 +80622,7 @@ div.label {
     }
   }
 }
-@keyframes loaderSimple {
+@keyframes loaderDot {
   0%,
   80%,
   100% {
@@ -80407,141 +80634,142 @@ div.label {
 }
 .loader {
   &_type {
-    &_hug {
+    &_circular {
       ^^&__inner {
         width: auto;
         height: auto;
         position: absolute;
         display: flex;
-        left: 12px;
+        left: 50%;
         top: 50%;
-        transform: translate(0%, -50%);
+        transform: translate(-50%, -50%);
       }
       ^^&__item {
+        border-width: 2px;
         border-radius: 50%;
+        border-top: 2px solid transparent;
         display: inline-block;
-        animation: loaderHug 1.4s infinite ease-in-out both;
-        &:first-child {
-          animation-delay: -0.32s;
-        }
-        &:nth-child(2) {
-          animation-delay: -0.16s;
+        animation: loaderCircular 1.4s linear infinite;
+        background-color: transparent;
+        user-select: none;
+        &:not(:first-child) {
+          display: none;
         }
       }
     }
   }
 }
-@keyframes loaderHug {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
+@keyframes loaderCircular {
+  0% {
+    transform: rotate(0deg);
   }
-  40% {
-    transform: scale(1);
+  100% {
+    transform: rotate(360deg);
   }
 }
 .loader {
-    &_size_xxl {
-      min-width: var(--loader-xxl-min-width);
-      min-height: var(--loader-xxl-min-height);
-      padding: var(--loader-xxl-padding);
-      ^&__inner {
-        gap: var(--loader-xxl-gap);
-        ^^&__item {
-          width: var(--loader-xxl-item);
-          height: var(--loader-xxl-item);
-        }
-      }
-    }
-    &_size_xl {
-      min-width: var(--loader-xl-min-width);
-      min-height: var(--loader-xl-min-height);
-      padding: var(--loader-xl-padding);
-      ^&__inner {
-        gap: var(--loader-xl-gap);
-        ^^&__item {
-          width: var(--loader-xl-item);
-          height: var(--loader-xl-item);
+    &_type_circular {
+        &^&_size_l {
+          min-width: var(--loader-circular-l-min-width);
+          min-height: var(--loader-circular-l-min-height);
+          ^^&__inner {
+            gap: var(--loader-circular-l-gap);
+            ^^^&__item {
+              width: var(--loader-circular-l-item);
+              height: var(--loader-circular-l-item);
+            }
+          }
         }
-      }
-    }
-    &_size_l {
-      min-width: var(--loader-l-min-width);
-      min-height: var(--loader-l-min-height);
-      padding: var(--loader-l-padding);
-      ^&__inner {
-        gap: var(--loader-l-gap);
-        ^^&__item {
-          width: var(--loader-l-item);
-          height: var(--loader-l-item);
+        &^&_size_m {
+          min-width: var(--loader-circular-m-min-width);
+          min-height: var(--loader-circular-m-min-height);
+          ^^&__inner {
+            gap: var(--loader-circular-m-gap);
+            ^^^&__item {
+              width: var(--loader-circular-m-item);
+              height: var(--loader-circular-m-item);
+            }
+          }
         }
-      }
-    }
-    &_size_m {
-      min-width: var(--loader-m-min-width);
-      min-height: var(--loader-m-min-height);
-      padding: var(--loader-m-padding);
-      ^&__inner {
-        gap: var(--loader-m-gap);
-        ^^&__item {
-          width: var(--loader-m-item);
-          height: var(--loader-m-item);
+        &^&_size_s {
+          min-width: var(--loader-circular-s-min-width);
+          min-height: var(--loader-circular-s-min-height);
+          ^^&__inner {
+            gap: var(--loader-circular-s-gap);
+            ^^^&__item {
+              width: var(--loader-circular-s-item);
+              height: var(--loader-circular-s-item);
+            }
+          }
         }
-      }
     }
-    &_size_s {
-      min-width: var(--loader-s-min-width);
-      min-height: var(--loader-s-min-height);
-      padding: var(--loader-s-padding);
-      ^&__inner {
-        gap: var(--loader-s-gap);
-        ^^&__item {
-          width: var(--loader-s-item);
-          height: var(--loader-s-item);
+    &_type_dot {
+        &^&_size_l {
+          min-width: var(--loader-dot-l-min-width);
+          min-height: var(--loader-dot-l-min-height);
+          ^^&__inner {
+            gap: var(--loader-dot-l-gap);
+            ^^^&__item {
+              width: var(--loader-dot-l-item);
+              height: var(--loader-dot-l-item);
+            }
+          }
         }
-      }
-    }
-    &_size_xs {
-      min-width: var(--loader-xs-min-width);
-      min-height: var(--loader-xs-min-height);
-      padding: var(--loader-xs-padding);
-      ^&__inner {
-        gap: var(--loader-xs-gap);
-        ^^&__item {
-          width: var(--loader-xs-item);
-          height: var(--loader-xs-item);
+        &^&_size_m {
+          min-width: var(--loader-dot-m-min-width);
+          min-height: var(--loader-dot-m-min-height);
+          ^^&__inner {
+            gap: var(--loader-dot-m-gap);
+            ^^^&__item {
+              width: var(--loader-dot-m-item);
+              height: var(--loader-dot-m-item);
+            }
+          }
         }
-      }
-    }
-    &_size_xxs {
-      min-width: var(--loader-xxs-min-width);
-      min-height: var(--loader-xxs-min-height);
-      padding: var(--loader-xxs-padding);
-      ^&__inner {
-        gap: var(--loader-xxs-gap);
-        ^^&__item {
-          width: var(--loader-xxs-item);
-          height: var(--loader-xxs-item);
+        &^&_size_s {
+          min-width: var(--loader-dot-s-min-width);
+          min-height: var(--loader-dot-s-min-height);
+          ^^&__inner {
+            gap: var(--loader-dot-s-gap);
+            ^^^&__item {
+              width: var(--loader-dot-s-item);
+              height: var(--loader-dot-s-item);
+            }
+          }
         }
-      }
     }
 }
 :root {
-  --loader-l-min-width: 112px;
-  --loader-l-min-height: 56px;
-  --loader-l-item: 16px;
-  --loader-l-gap: 16px;
+  --loader-dot-l-min-width: 112px;
+  --loader-dot-l-min-height: 56px;
+  --loader-dot-l-item: 16px;
+  --loader-dot-l-gap: 16px;
+
+  --loader-dot-m-min-width: 88px;
+  --loader-dot-m-min-height: 40px;
+  --loader-dot-m-item: 12px;
+  --loader-dot-m-gap: 12px;
+
+  --loader-dot-s-min-width: 60px;
+  --loader-dot-s-min-height: 24px;
+  --loader-dot-s-item: 6px;
+  --loader-dot-s-gap: 8px;
+
+  --loader-circular-l-min-width: 54px;
+  --loader-circular-l-min-height: 62px;
+  --loader-circular-l-item: 22px;
+
+  --loader-circular-m-min-width: 42px;
+  --loader-circular-m-min-height: 42px;
+  --loader-circular-m-item: 14px;
 
-  --loader-m-min-width: 88px;
-  --loader-m-min-height: 40px;
-  --loader-m-item: 12px;
-  --loader-m-gap: 12px;
+  --loader-circular-s-min-width: 32px;
+  --loader-circular-s-min-height: 24px;
+  --loader-circular-s-item: 8px;
 
-  --loader-s-min-width: 60px;
-  --loader-s-min-height: 24px;
-  --loader-s-item: 6px;
-  --loader-s-gap: 8px;
+  --loader-text-l-margin: 12px;
+  --loader-text-m-margin: 8px;
+  --loader-text-s-margin: 8px;
 }
 .logo {
   display: flex;