Refactor button to btn (for acf)

Author: cedric07

index.php

@@ -223,7 +223,8 @@ class="has-black-background-color has-background-dim-100 wp-block-cover__gradien
 			</select>
 		</div>
 		<div>
-			<button class="button-block">Button submit</button>
+			<button class="btn-block">Button submit</button>
+			<button class="btn-outline">Button submit outline</button>
 			<input type="submit" value="Input submit">
 			<input type="reset" value="Input reset">
 		</div>

src/scss/02-tools/_m-button.scss renamed to src/scss/02-tools/_m-btn.scss

@@ -2,7 +2,7 @@
  * Button
  */
 
-@mixin button {
+@mixin btn {
     display: inline;
     padding: 0;
     font-family: inherit;
@@ -18,7 +18,7 @@
 // button block
 // ----
 
-@mixin button-block {
+@mixin btn-block {
     position: relative;
     z-index: 1;
     display: inline-block;
@@ -33,20 +33,20 @@
     border-radius: 10px;
 
     @include hover {
-        @include button-block-hover;
+        @include btn-block-hover;
     }
 }
 
 // hover of the button block
 
-@mixin button-block-hover {
+@mixin btn-block-hover {
     color: $color-primary;
     background-color: $color-dark;
 }
 
 // Coloring
 
-@mixin button-block-colored($background-color, $color) {
+@mixin btn-block-colored($background-color, $color) {
     color: $color;
     background-color: $background-color;
 
@@ -58,16 +58,16 @@
 
 // Outline style
 
-@mixin button-block-outline {
+@mixin btn-block-outline {
     padding: 13px 23px;
     background-color: transparent;
     border: 2px solid currentColor; // Force button width VS Gutenberg CSS
 
     @include hover {
-        @include button-block-outline-hover;
+        @include btn-block-outline-hover;
     }
 }
 
-@mixin button-block-outline-hover {
+@mixin btn-block-outline-hover {
     background-color: transparent;
 }

src/scss/02-tools/tools.scss

@@ -15,7 +15,7 @@
 @import "./m-align";
 @import "./m-autofill";
 @import "./m-breakpoint";
-@import "./m-button";
+@import "./m-btn";
 @import "./m-checkbox-custom";
 @import "./m-clearflex";
 @import "./m-container";

src/scss/03-base/_forms.scss

@@ -94,10 +94,10 @@ $all-text-inputs: assign-inputs($text-inputs-list);
     }
 
     input[type="submit"] {
-        @extend %button-block;
+        @extend %btn-block;
     }
 
     input[type="reset"] {
-        @extend %button-block-outline;
+        @extend %btn-block-outline;
     }
 }

src/scss/05-components/_btn.scss

@@ -0,0 +1,25 @@
+%btn {
+    @include btn;
+}
+
+%btn-block {
+    @extend %btn;
+    @include btn-block;
+}
+
+%btn-block-outline {
+    @extend %btn-block;
+    @include btn-block-outline;
+}
+
+.btn {
+    @extend %btn;
+}
+
+.btn-block {
+    @extend %btn-block;
+}
+
+.btn-outline {
+    @extend %btn-block-outline;
+}

src/scss/05-components/_button.scss

@@ -2,6 +2,6 @@
  * Elements folder entry file
  */
 
-@import "./button";
+@import "./btn";
 @import "./searchform";
 @import "./skip-links";

src/scss/05-components/components.scss

@@ -10,11 +10,11 @@
     // ----
     &-button {
         .wp-block-button__link {
-            @extend %button-block;
+            @extend %btn-block;
         }
 
         &.is-style-outline .wp-block-button__link {
-            @extend %button-block-outline;
+            @extend %btn-block-outline;
         }
 
         &.has-custom-font-size .wp-block-button__link {

src/scss/06-blocks/core/_buttons.scss

@@ -2,6 +2,6 @@
     $el: &;
 
     #{$el}__button {
-        @extend %button-block;
+        @extend %btn-block;
     }
 }

src/scss/06-blocks/core/_file.scss

@@ -6,6 +6,6 @@
     }
 
     &__button {
-        @extend %button-block;
+        @extend %btn-block;
     }
 }