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;
}