camigomezdev#8 Create color variables

josemariogutierrez · Oct 27, 2019 · 2a09ca4 · 2a09ca4
1 parent 0b69462
commit 2a09ca4
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/src/components/CharacterCard.vue b/src/components/CharacterCard.vue
@@ -70,7 +70,7 @@ export default {
   &__avatar {
     margin: 0 auto;
     height: 200px;
-    border-bottom: 5px solid red;
+    border-bottom: 5px solid $red;
   }
 
   &__avatar-img {
@@ -99,7 +99,7 @@ export default {
   &__nickname-container::before {
     content: "";
     position: absolute;
-    background: red;
+    background: $red;
     height: 100%;
     transform: scaleY(0);
     transform-origin: top;

diff --git a/src/components/ComicCard.vue b/src/components/ComicCard.vue
@@ -27,13 +27,13 @@ export default {
   flex-wrap: wrap;
   margin: 0 5px;
   width: 200px;
-  background: black;
+  background: $black;
   cursor: pointer;
 
   &__avatar {
     height: 200px;
     overflow: hidden;
-    border-bottom: 5px solid red;
+    border-bottom: 5px solid $red;
   }
 
   &__avatar-img {

diff --git a/src/components/ComicsCarousel.vue b/src/components/ComicsCarousel.vue
@@ -148,7 +148,7 @@ export default {
     transition: opacity 0.5s ease-in-out;
     cursor: pointer;
     font-size: 30px;
-    color: #5bf3ae;
+    color: $aquamarine;
 
     &--disabled {
       opacity: 0.3;

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -27,7 +27,7 @@
   align-items: center;
   width: 100%;
   height: 20vh;
-  background: black;
+  background: $black;
   bottom: 0;
 
   &__social {
@@ -38,7 +38,7 @@
     font-size: 30px;
     padding: 5px;
     text-decoration: none;
-    color: white;
+    color: $white;
   }
 }
 </style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -27,7 +27,7 @@ export default {
 .nav {
   position: relative;
   width: 100%;
-  background: black;
+  background: $black;
   z-index: 2;
 
   &__items {
@@ -37,13 +37,13 @@ export default {
 
   &__link {
     font-weight: bold;
-    color: white;
+    color: $white;
     padding: 0 5px;
     text-transform: uppercase;
     text-decoration: none;
 
     &.router-link-exact-active {
-      color: #5bf3ae;
+      color: $aquamarine;
     }
   }
 }

diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
@@ -1 +1,5 @@
 // Variables
+$red: #ff0000;
+$white: #ffffff;
+$black: #000000;
+$aquamarine: #5BF3AE;