feat: export indents mixin (#626)

gravity-ui · Oct 12, 2023 · 2609ca9 · 2609ca9
1 parent 12608ad
commit 2609ca9
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 53 deletions.
diff --git a/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.scss b/src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.scss
@@ -4,57 +4,5 @@
 $block: '.#{$ns}constructor-block';
 
 #{$block} {
-    @include add-specificity(&) {
-        &_indentTop {
-            &_0 {
-                margin-top: 0;
-            }
-
-            &_xs {
-                margin-top: $indentXS;
-            }
-
-            &_s {
-                margin-top: $indentSM;
-            }
-
-            &_m {
-                margin-top: $indentM;
-            }
-
-            &_l {
-                margin-top: $indentL;
-            }
-
-            &_xl {
-                margin-top: $indentXL;
-            }
-        }
-
-        &_indentBottom {
-            &_0 {
-                padding-bottom: 0;
-            }
-
-            &_xs {
-                padding-bottom: $indentXS;
-            }
-
-            &_s {
-                padding-bottom: $indentSM;
-            }
-
-            &_m {
-                padding-bottom: $indentM;
-            }
-
-            &_l {
-                padding-bottom: $indentL;
-            }
-
-            &_xl {
-                padding-bottom: $indentXL;
-            }
-        }
-    }
+    @include indents(&);
 }
diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -537,3 +537,60 @@ unpredictable css rules order in build */
         padding-right: $indentXS;
     }
 }
+
+// indent system for blocks
+@mixin indents($class) {
+    @include add-specificity($class) {
+        &_indentTop {
+            &_0 {
+                margin-top: 0;
+            }
+
+            &_xs {
+                margin-top: $indentXS;
+            }
+
+            &_s {
+                margin-top: $indentSM;
+            }
+
+            &_m {
+                margin-top: $indentM;
+            }
+
+            &_l {
+                margin-top: $indentL;
+            }
+
+            &_xl {
+                margin-top: $indentXL;
+            }
+        }
+
+        &_indentBottom {
+            &_0 {
+                padding-bottom: 0;
+            }
+
+            &_xs {
+                padding-bottom: $indentXS;
+            }
+
+            &_s {
+                padding-bottom: $indentSM;
+            }
+
+            &_m {
+                padding-bottom: $indentM;
+            }
+
+            &_l {
+                padding-bottom: $indentL;
+            }
+
+            &_xl {
+                padding-bottom: $indentXL;
+            }
+        }
+    }
+}