add adaptive elements

consta-design-system · Dec 5, 2024 · 135c207 · 135c207
1 parent 7cd604b
commit 135c207
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 25 deletions.
diff --git a/src/components/Loader/Loader.css b/src/components/Loader/Loader.css
@@ -1,34 +1,55 @@
+/* --loader-size-prop - задайте для указания размера */
 .Loader {
   --loader-color: var(--loaderBackgroundColor, var(--color-control-bg-primary));
 
   /* major:  убрать --loader-color-finally, оставить --loader-color-prop для определения своего цвета */
   --loader-color-finally: var(--loader-color-prop, var(--loader-color));
+  --loader-type-circle-size-var:
+    max(
+      var(--loader-size-prop, var(--loader-type-circle-size)),
+      var(--space-s)
+    );
+  --loader-type-dot-size-var:
+    max(
+      var(--loader-size-prop, var(--loader-type-dot-size)),
+      calc(var(--space-l) - var(--space-3xs))
+    );
   display: inline-flex;
+  box-sizing: border-box;
 
   &_size {
     &_xs {
-      --loader-circle-size: var(--space-s);
-      --loader-dot-size: var(--space-2xs);
-      --loader-dot-gap: var(--space-3xs);
+      --loader-type-circle-size: var(--space-s);
+      --loader-type-dot-size: calc(var(--space-l) - var(--space-3xs));
     }
 
     &_s {
-      --loader-circle-size: var(--space-m);
-      --loader-dot-size: var(--space-2xs);
-      --loader-dot-gap: var(--space-2xs);
+      --loader-type-circle-size: var(--space-m);
+      --loader-type-dot-size: calc(var(--space-xl) - var(--space-3xs));
     }
 
     &_m {
-      --loader-circle-size: var(--space-xl);
-      --loader-dot-size: var(--space-xs);
-      --loader-dot-gap: calc(var(--space-xs) - var(--space-3xs));
+      --loader-type-circle-size: var(--space-xl);
+      --loader-type-dot-size: var(--space-3xl);
     }
   }
 
   &_type {
     &_dots {
-      padding: calc(var(--loader-dot-size) * 0.25);
-      gap: var(--loader-dot-gap);
+      --loader-dot-padding:
+        round(
+          down,
+          calc(var(--loader-type-dot-size-var) / 12),
+          1px
+        );
+      --loader-dot-size:
+        round(
+          down,
+          calc(var(--loader-type-dot-size-var) / 3 - var(--loader-dot-padding)),
+          2px
+        );
+      padding: max(calc(var(--loader-dot-padding) / 2), 1px);
+      gap: max(var(--loader-dot-padding), var(--space-3xs));
 
       &::before,
       &::after,
@@ -38,8 +59,8 @@
         background: var(--loader-color-finally);
         border-radius: 50%;
         animation:
-          Loader_Animate_type_dots 1s var(--loader-dot-animation-delay)
-          ease infinite;
+          Loader_Animate_type_dots 1s
+          var(--loader-type-dot-animation-delay) ease infinite;
       }
 
       &::before,
@@ -48,39 +69,39 @@
       }
 
       &::before {
-        --loader-dot-animation-delay: 0s;
+        --loader-type-dot-animation-delay: 0s;
       }
 
       &::after {
-        --loader-dot-animation-delay: 0.36s;
+        --loader-type-dot-animation-delay: 0.36s;
       }
 
       .Loader-Dot {
-        --loader-dot-animation-delay: 0.18s;
+        --loader-type-dot-animation-delay: 0.18s;
       }
     }
 
     &_circle {
-      --loader-circle-mask:
+      --loader-type-circle-mask:
         conic-gradient(#0000 2%, #000),
         linear-gradient(#000 0 0) content-box;
-      width: var(--loader-circle-size);
-      height: var(--loader-circle-size);
-      padding: 2px;
+      width: var(--loader-type-circle-size-var);
+      height: var(--loader-type-circle-size-var);
+      padding: round(up, calc(var(--loader-type-circle-size-var) / 10), 1px);
       background: var(--loader-color-finally);
       border-radius: 50%;
       animation: Loader_Animate_type_circle 1.2s infinite linear;
-      mask: var(--loader-circle-mask);
+      mask: var(--loader-type-circle-mask);
       mask-composite: subtract;
     }
   }
 }
 
-@keyframes Loader_Animate_type_dots {
+/* @keyframes Loader_Animate_type_dots {
   50% {
-    transform: scale(1.5);
+    transform: scale(1.3);
   }
-}
+} */
 
 @keyframes Loader_Animate_type_circle {
   to {

diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
@@ -12,7 +12,7 @@ export const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
     const {
       className,
       size = 'm',
-      type = 'circle',
+      type = 'dots',
       view = 'primary',
       ...otherProps
     } = props;