From 0cd2c896c1719aa85945338d0246a790bc853272 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Thu, 12 Nov 2020 16:25:04 -0300
Subject: [PATCH] sass!

---
 _sass/helpers.scss     | 72 +++++++++++++++++++++++++++++++++++++-----
 assets/css/styles.scss |  2 ++
 2 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/_sass/helpers.scss b/_sass/helpers.scss
index d4ff5d0..3224eb5 100644
--- a/_sass/helpers.scss
+++ b/_sass/helpers.scss
@@ -13,6 +13,28 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
   &::-webkit-scrollbar { display: none; }
 }
 
+@each $cursor in (pointer none) {
+  .cursor-#{$cursor} {
+    cursor: $cursor;
+  }
+}
+
+@each $direction in (top, right, bottom, left) {
+  .#{$direction}-0 {
+    #{$direction}: 0
+  }
+}
+
+@each $value in $overflows {
+  .overflow-#{$value} { overflow: $value !important; }
+}
+
+@each $axis in (y, x) {
+  @each $value in $overflows {
+    .overflow-#{$axis}-#{$value} { overflow-#{$axis}: $value !important; }
+  }
+}
+
 /*
  * Poder aumentar o disminuir el alto de la tipografía, se usa de la
  * misma forma que los modificadores de padding y margin.
@@ -21,6 +43,10 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
   .f-#{$size} {
     font-size: $length !important;
   }
+
+  .text-column-#{$size} {
+    column-count: $size;
+  }
 }
 
 /*
@@ -62,6 +88,10 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
       .f-#{$grid-breakpoint}-#{$size} {
         font-size: $length !important;
       }
+
+      .text-column-#{$grid-breakpoint}-#{$size} {
+        column-count: $size;
+      }
     }
   }
 }
@@ -88,11 +118,42 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
     }
   }
 
+  .scrollbar-#{$color} {
+    scrollbar-color: var(--#{$color}) transparent;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 8px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--#{$color});
+    }
+  }
+
+  .border-#{$color} {
+    border-color: var(--#{$color}) !important;
+  }
+
+  .hover-bg-#{$color} {
+    &:hover {
+      background-color: var(--#{$color});
+    }
+  }
+
+  .hover-#{$color} {
+    &:hover {
+      color: var(--#{$color});
+    }
+  }
+
   .#{$color} {
-    color: var(--#{$color}) !important;
+    color: var(--#{$color});
 
     &:focus {
-      color: var(--#{$color}) !important;
+      color: var(--#{$color});
     }
 
     ::-moz-selection,
@@ -109,12 +170,7 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 
     .form-control {
       border-color: var(--#{$color});
-    }
-
-    .btn {
-      background-color: var(--#{$color});
-      color: white;
-      border-color: var(--#{$color});
+      color: var(--#{$color});
     }
 
     hr {
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 2e275d7..6f7685b 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -3,6 +3,8 @@
 ---
 
 $debug: {{ jekyll.environment | not: 'production' }};
+$prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+$overflows: auto, hidden, scroll;
 
 /*
  * Redefinir variables de Boostrap acá.  Se las puede ver en