improve css

Qboussard · Sep 8, 2017 · 5c990f0 · 5c990f0
1 parent 8222304
commit 5c990f0
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 41 deletions.
diff --git a/src/assets/stylesheets/mixins.scss b/src/assets/stylesheets/mixins.scss
@@ -3,4 +3,9 @@
      -moz-transform: $var;
       -ms-transform: $var;
           transform: $var;
+}
+
+@mixin button-mode($primary-color, $secondary-color) {
+  background: linear-gradient(45deg, $primary-color 0%,$secondary-color 100%);
+  box-shadow: 0px 6px 0px $secondary-color, 0px 3px 15px rgba(0,0,0,.4);
 }
diff --git a/src/assets/stylesheets/variables.scss b/src/assets/stylesheets/variables.scss
@@ -1,3 +1,18 @@
 $primaryColor: #363A46;
 $secondaryColor: #fafafa;
-$scoreTrophyColor: #f5f5b8;
+$scoreTrophyColor: #f5f5b8;
+
+// COLOR MODE
+
+$easy-color-primary: #6ED69A;
+$easy-color-secondary: #28b15f;
+
+$normal-color-primary: #1fa2ff;
+$normal-color-secondary: #2E77C0;
+$normal-color-other: #0CC6FF;
+
+$hard-color-primary: #F85465;
+$hard-color-secondary: #D61834;
+
+$doom-color-primary: #ffd970;
+$doom-color-secondary: #FCC015;
diff --git a/src/pages/nav/nav.scss b/src/pages/nav/nav.scss
@@ -30,16 +30,16 @@ page-nav {
       line-height: 80px;
     }
     .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:first-child{
-      background-color: #6ED69A;
+      background-color: $easy-color-primary;
     }
     .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(2){
-      background-color: #0CC6FF;
+      background-color: $normal-color-other;
     }
     .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(3){
-      background-color: #F85465;
+      background-color: $hard-color-primary;
     }
     .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(4){
-      background-color: #FCC015;
+      background-color: $doom-color-secondary;
     }
     .swiper-pagination-bullet{
       opacity: 0.5;
@@ -121,44 +121,16 @@ page-nav {
       }
     }
   }
-  .nav1{
-    .slide-zoom{
-      .subButton{
-        .ico_block{
-          background: linear-gradient(45deg, #6ED69A 0%,#28b15f 100%);
-          box-shadow: 0px 6px 0px #28b15f, 0px 3px 15px rgba(0,0,0,.4);
-        }
-      }
-    }
+  .nav1 .slide-zoom .subButton .ico_block{
+    @include button-mode($easy-color-primary, $easy-color-secondary);
   }
-  .nav2{
-    .slide-zoom{
-      .subButton{
-        .ico_block{
-          background: linear-gradient(45deg, #1fa2ff 0%,#2E77C0 100%);
-          box-shadow: 0px 6px 0px #2E77C0, 0px 3px 15px rgba(0,0,0,.4);
-        }
-      }
-    }
+  .nav2 .slide-zoom .subButton .ico_block{
+    @include button-mode($normal-color-primary, $normal-color-secondary);
   }
-  .nav3{
-    .slide-zoom{
-      .subButton{
-        .ico_block{
-          background: linear-gradient(45deg, #F85465 0%,#D61834 100%);
-          box-shadow: 0px 6px 0px #D61834, 0px 3px 15px rgba(0,0,0,.4);
-        }
-      }
-    }
+  .nav3 .slide-zoom .subButton .ico_block{
+    @include button-mode($hard-color-primary, $hard-color-secondary);
   }
-  .nav4{
-    .slide-zoom{
-      .subButton{
-        .ico_block{
-          background: linear-gradient(45deg, #ffd970 0%,#FCC015 100%);
-          box-shadow: 0px 6px 0px #FCC015, 0px 3px 15px rgba(0,0,0,.4);
-        }
-      }
-    }
+  .nav4 .slide-zoom .subButton .ico_block{
+    @include button-mode($doom-color-primary, $doom-color-secondary);
   }
 }