fix: use flex column-gap instead of margins in buttons element (#701)

Kyzyl-ool · web-flow · commit c9fa48aafe75 · 2023-11-17T14:38:43.000+01:00
diff --git a/src/sub-blocks/Content/Content.scss b/src/sub-blocks/Content/Content.scss
@@ -43,15 +43,10 @@ $darkSecondary: var(--g-color-text-dark-secondary);
         }
     }
 
-    &__button {
-        @include add-specificity(&) {
-            margin-top: 0;
-            margin-right: $indentXXS;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
+    &__buttons {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: $indentXXS;
     }
 
     &__links {
@@ -70,6 +65,10 @@ $darkSecondary: var(--g-color-text-dark-secondary);
             text-align: center;
         }
 
+        #{$block}__buttons {
+            justify-content: center;
+        }
+
         #{$block}__links {
             align-items: center;
         }

Original file line number	Diff line number	Diff line change
`@@ -43,15 +43,10 @@ $darkSecondary: var(--g-color-text-dark-secondary);`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`
`46`		`- &__button {`
`47`		`- @include add-specificity(&) {`
`48`		`- margin-top: 0;`
`49`		`- margin-right: $indentXXS;`
`50`		`-`
`51`		`- &:last-child {`
`52`		`- margin-right: 0;`
`53`		`- }`
`54`		`- }`
	`46`	`+ &__buttons {`
	`47`	`+ display: flex;`
	`48`	`+ flex-wrap: wrap;`
	`49`	`+ column-gap: $indentXXS;`
`55`	`50`	`}`
`56`	`51`
`57`	`52`	`&__links {`
`@@ -70,6 +65,10 @@ $darkSecondary: var(--g-color-text-dark-secondary);`
`70`	`65`	`text-align: center;`
`71`	`66`	`}`
`72`	`67`
	`68`	`+ #{$block}__buttons {`
	`69`	`+ justify-content: center;`
	`70`	`+ }`
	`71`	`+`
`73`	`72`	`#{$block}__links {`
`74`	`73`	`align-items: center;`
`75`	`74`	`}`