move button styles to mixin
move button styles to mixin

--- a/style/main.css
+++ b/style/main.css
@@ -130,6 +130,16 @@
 
   100% {
     opacity: 1; } }
+
+.game-container .game-message a {
+  display: inline-block;
+  background: #8f7a66;
+  border-radius: 3px;
+  padding: 0 20px;
+  text-decoration: none;
+  color: #f9f6f2;
+  height: 40px;
+  line-height: 42px; }
 
 .game-container {
   margin-top: 40px;
@@ -170,14 +180,6 @@
       display: block;
       margin-top: 59px; }
     .game-container .game-message a {
-      display: inline-block;
-      background: #8f7a66;
-      border-radius: 3px;
-      padding: 0 20px;
-      text-decoration: none;
-      color: #f9f6f2;
-      height: 40px;
-      line-height: 42px;
       margin-left: 9px; }
     .game-container .game-message.game-won {
       background: rgba(237, 194, 46, 0.5);
@@ -502,14 +504,6 @@
         display: block;
         margin-top: 59px; }
       .game-container .game-message a {
-        display: inline-block;
-        background: #8f7a66;
-        border-radius: 3px;
-        padding: 0 20px;
-        text-decoration: none;
-        color: #f9f6f2;
-        height: 40px;
-        line-height: 42px;
         margin-left: 9px; }
       .game-container .game-message.game-won {
         background: rgba(237, 194, 46, 0.5);

--- a/style/main.scss
+++ b/style/main.scss
@@ -141,6 +141,18 @@
   }
 }
 
+// Styles for buttons
+@mixin button {
+  display: inline-block;
+  background: darken($game-container-background, 20%);
+  border-radius: 3px;
+  padding: 0 20px;
+  text-decoration: none;
+  color: $bright-text-color;
+  height: 40px;
+  line-height: 42px;
+}
+
 // Game field mixin used to render CSS at different width
 @mixin game-field {
   .game-container {
@@ -190,14 +202,7 @@
       }
 
       a {
-        display: inline-block;
-        background: darken($game-container-background, 20%);
-        border-radius: 3px;
-        padding: 0 20px;
-        text-decoration: none;
-        color: $bright-text-color;
-        height: 40px;
-        line-height: 42px;
+        @include button;
         margin-left: 9px;
         // margin-top: 59px;
       }

comments