From bfbf488f77ff0823ea9df8e9110a3c12df689e6c Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Thu, 4 Jun 2020 21:36:49 -0400
Subject: [PATCH] Aprovechando scss para simplificar el codigo

Aprovecho que se pueden poner selectores dentro de selectores para
transformarlos en una especie de arbol de propiedades css :3

Es para lo unico que uso scss XD
---
 src/styles/main.scss | 157 +++++++++++++++++++++----------------------
 1 file changed, 76 insertions(+), 81 deletions(-)

diff --git a/src/styles/main.scss b/src/styles/main.scss
index d7fb912..1bbf1e8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,4 +1,4 @@
-/*Colorscheme*/
+/* Colorscheme */
 :root {
   --white: hsl(0, 0%, 99%);
   --gray-1: hsl(0, 0%, 95%);
@@ -10,11 +10,10 @@
   --accent: hsl(354, 81%, 56%);
 }
 
-
-/*Modificacion basica de elementos*/
+/* Modificación básica de elementos*/
 body {
   max-width: 75rem;
-  margin: 0 auto ;
+  margin: 0 auto;
   padding: 0 1rem 1em 1em;
   font-family: sans-serif;
   color: var(--black);
@@ -28,23 +27,23 @@ input {
 
 button {
   border: 1px var(--gray-2) solid;
-}
 
-button.link {
-  display: inline;
-  border: none;
-  background-color: inherit;
-  padding: 0;
-  cursor: pointer;
+  &.link {
+    display: inline;
+    border: none;
+    background-color: inherit;
+    padding: 0;
+    cursor: pointer;
+  }
 }
 
 a, button.link {
   color: var(--accent);
   text-decoration: none;
-}
 
-a:hover, button.link:hover {
-  text-decoration: underline;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 h1, h2, h3, h4 {
@@ -52,78 +51,71 @@ h1, h2, h3, h4 {
   margin-bottom: 1rem;
 }
 
-img {
-}
-
-/*Navbar*/
+/* Navbar */
 .nav {
   display: flex;
   min-height: 3.25rem;
   position: relative;
   justify-content: space-between;
   align-items: center;
+
+  .branding {
+    margin: 0;
+  }
+
+  .nav-links {
+    display: flex;
+
+    .link {
+      margin-left: 1rem;
+    }
+  }
 }
 
-.nav .branding {
-  margin: 0;
-}
-
-.nav-links {
-  display: flex;
-}
-
-.nav-links .link {
-  margin-left: 1rem;
-}
-
-/*Pagination*/
+/* Pagination */
 ul.pagination {
   display: flex;
   margin: 1rem auto;
   justify-content: center;
-}
 
-.page-item {
-  border: 1px solid var(--gray-2);
-}
+  .page-item {
+    border: 1px solid var(--gray-2);
 
-.page-link {
-  color: var(--black);
-  text-decoration: none;
-  padding: 0 1rem;
-}
+    &.active {
+      background-color: var(--accent);
+
+      a {
+        color: white;
+      }
+    }
+  }
 
-@media (max-width: 767px) {
   .page-link {
-    padding: 0 .4rem;
+    color: var(--black);
+    text-decoration: none;
+    padding: 0 1rem;
+
+    @media (max-width: 767px) {
+      padding: 0 .4rem;
+    }
   }
 }
 
-.page-item.active {
-  background-color: var(--accent);
-}
-
-.page-item.active a {
-  color: white;
-}
-
-
-/*Input with icon*/
+/* Input with icon */
 .input-with-icon {
   display: flex;
+
+  input {
+    border-right: none;
+  }
+
+  button {
+    border-left: none;
+    background: white;
+  }
 }
 
-.input-with-icon input {
-  border-right: none;
-}
-
-.input-with-icon button {
-  border-left: none;
-  background: white;
-}
-
-
-/*Lista de entidades*/
+/* Lista de entidades */
 ul.entity_list {
   display: flex;
   flex-direction: column;
@@ -200,30 +192,29 @@ ul.entity_list {
   }
 }
 
-
 /* Tabs */
 ul.tabs {
   display: flex;
   align-items: stretch;
   border-bottom: 2px var(--gray-1) solid;
   margin: 1rem 0;
+
+  li.tab {
+    padding: .5rem 1rem;
+    margin-bottom: -2px;
+    cursor: pointer;
+
+    &:hover {
+      border-bottom: 2px var(--gray-2) solid;
+    }
+
+    &.selected {
+      border-bottom: 2px var(--accent) solid;
+    }
+  }
 }
 
-ul.tabs li.tab {
-  padding: .5rem 1rem;
-  margin-bottom: -2px;
-  cursor: pointer;
-}
-
-ul.tabs li.tab:hover {
-  border-bottom: 2px var(--gray-2) solid;
-}
-
-ul.tabs li.tab.selected {
-  border-bottom: 2px var(--accent) solid;
-}
-
-/*Utils*/
+/* Utils */
 .full-width {
   width: 100%;
 }
@@ -232,9 +223,13 @@ ul.tabs li.tab.selected {
   animation: pulsating 1s infinite alternate ease-in-out;
 
   @keyframes pulsating {
-    from { background-color: var(--white);}
+    from {
+      background-color: var(--white);
+    }
 
-    to { background-color: var(--gray-2);}
+    to {
+      background-color: var(--gray-2);
+    }
   }
 }