From 7007bbe1fa4fd7c04ce8183ec8376873d49639d5 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Mon, 16 Nov 2020 20:52:02 -0300
Subject: [PATCH] mover helpers a application.scss

---
 app/assets/stylesheets/application.scss | 189 +++++++++++++++++++++++-
 app/assets/stylesheets/helpers.scss     | 187 -----------------------
 2 files changed, 188 insertions(+), 188 deletions(-)
 delete mode 100644 app/assets/stylesheets/helpers.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 9f17fc6..537f57a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -22,7 +22,6 @@ $component-active-bg: $magenta;
 
 @import "bootstrap";
 @import "editor";
-@import "helpers";
 
 :root {
   --foreground: #{$black};
@@ -293,3 +292,191 @@ svg {
 .vh-100 {
   height: 100vh !important;
 }
+
+// Viene de sutty-base-jekyll-theme
+$prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+$overflows: auto, hidden, scroll;
+
+/*
+ * Usar en animaciones, empiezan rápido y desaceleran hacia el final.
+ */
+$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+
+/*
+ * Ocultar la barra de scroll, útil para sliders horizontales.
+ */
+.no-scrollbar {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-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.
+ */
+@each $size, $length in $spacers {
+  .f-#{$size} {
+    font-size: $length !important;
+  }
+
+  .text-column-#{$size} {
+    column-count: $size;
+  }
+}
+
+/*
+ * Modificadores de Bootstrap que no tienen versión responsive.
+ */
+@each $grid-breakpoint, $_ in $grid-breakpoints {
+  @include media-breakpoint-up($grid-breakpoint) {
+    // border
+    .border-#{$grid-breakpoint}         { border: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-top     { border-top: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-right   { border-right: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-bottom  { border-bottom: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-left    { border-left: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-0        { border: 0 !important; }
+    .border-#{$grid-breakpoint}-top-0    { border-top: 0 !important; }
+    .border-#{$grid-breakpoint}-right-0  { border-right: 0 !important; }
+    .border-#{$grid-breakpoint}-bottom-0 { border-bottom: 0 !important; }
+    .border-#{$grid-breakpoint}-left-0   { border-left: 0 !important; }
+
+    // alineación
+    .text-#{$grid-breakpoint}-left   { text-align: left !important; }
+    .text-#{$grid-breakpoint}-right  { text-align: right !important; }
+    .text-#{$grid-breakpoint}-center { text-align: center !important; }
+
+    // posición
+    @each $position in $positions {
+      .position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
+    }
+
+    // anchos y altos
+    @each $prop, $abbrev in (width: w, height: h) {
+      @each $size, $length in $sizes {
+        .#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length !important; }
+      }
+    }
+
+    // versión responsive de f
+    @each $size, $length in $spacers {
+      .f-#{$grid-breakpoint}-#{$size} {
+        font-size: $length !important;
+      }
+
+      .text-column-#{$grid-breakpoint}-#{$size} {
+        column-count: $size;
+      }
+    }
+  }
+}
+
+/*
+ * Crea una propiedad con prefijos de navegador
+ */
+@mixin vendor-prefix($property, $definition...) {
+  @each $prefix in $prefixes {
+    #{$prefix}$property: $definition;
+  }
+}
+
+/*
+ * Crea clases para asignar colores según la lista de colores.
+ */
+@each $color, $_ in $colors {
+  .background-#{$color} {
+    background-color: var(--#{$color});
+
+    &:focus {
+      background-color: var(--#{$color});
+    }
+  }
+
+  .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});
+
+    &:focus {
+      color: var(--#{$color});
+    }
+
+    ::-moz-selection,
+    ::selection {
+      background: var(--#{$color});
+      color: white;
+    }
+
+    svg {
+      * {
+        fill: var(--#{$color});
+      }
+    }
+
+    .form-control {
+      border-color: var(--#{$color});
+      color: var(--#{$color});
+    }
+
+    hr {
+      border-color: var(--#{$color});
+    }
+
+    a {
+      color: var(--#{$color});
+    }
+  }
+}
diff --git a/app/assets/stylesheets/helpers.scss b/app/assets/stylesheets/helpers.scss
deleted file mode 100644
index 22a1f96..0000000
--- a/app/assets/stylesheets/helpers.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-// Viene de sutty-base-jekyll-theme
-$prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
-$overflows: auto, hidden, scroll;
-
-/*
- * Usar en animaciones, empiezan rápido y desaceleran hacia el final.
- */
-$bezier: cubic-bezier(0.75, 0, 0.25, 1);
-
-/*
- * Ocultar la barra de scroll, útil para sliders horizontales.
- */
-.no-scrollbar {
-  scrollbar-width: none;
-  -webkit-overflow-scrolling: touch;
-
-  &::-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.
- */
-@each $size, $length in $spacers {
-  .f-#{$size} {
-    font-size: $length !important;
-  }
-
-  .text-column-#{$size} {
-    column-count: $size;
-  }
-}
-
-/*
- * Modificadores de Bootstrap que no tienen versión responsive.
- */
-@each $grid-breakpoint, $_ in $grid-breakpoints {
-  @include media-breakpoint-up($grid-breakpoint) {
-    // border
-    .border-#{$grid-breakpoint}         { border: $border-width solid $border-color !important; }
-    .border-#{$grid-breakpoint}-top     { border-top: $border-width solid $border-color !important; }
-    .border-#{$grid-breakpoint}-right   { border-right: $border-width solid $border-color !important; }
-    .border-#{$grid-breakpoint}-bottom  { border-bottom: $border-width solid $border-color !important; }
-    .border-#{$grid-breakpoint}-left    { border-left: $border-width solid $border-color !important; }
-    .border-#{$grid-breakpoint}-0        { border: 0 !important; }
-    .border-#{$grid-breakpoint}-top-0    { border-top: 0 !important; }
-    .border-#{$grid-breakpoint}-right-0  { border-right: 0 !important; }
-    .border-#{$grid-breakpoint}-bottom-0 { border-bottom: 0 !important; }
-    .border-#{$grid-breakpoint}-left-0   { border-left: 0 !important; }
-
-    // alineación
-    .text-#{$grid-breakpoint}-left   { text-align: left !important; }
-    .text-#{$grid-breakpoint}-right  { text-align: right !important; }
-    .text-#{$grid-breakpoint}-center { text-align: center !important; }
-
-    // posición
-    @each $position in $positions {
-      .position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
-    }
-
-    // anchos y altos
-    @each $prop, $abbrev in (width: w, height: h) {
-      @each $size, $length in $sizes {
-        .#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length !important; }
-      }
-    }
-
-    // versión responsive de f
-    @each $size, $length in $spacers {
-      .f-#{$grid-breakpoint}-#{$size} {
-        font-size: $length !important;
-      }
-
-      .text-column-#{$grid-breakpoint}-#{$size} {
-        column-count: $size;
-      }
-    }
-  }
-}
-
-/*
- * Crea una propiedad con prefijos de navegador
- */
-@mixin vendor-prefix($property, $definition...) {
-  @each $prefix in $prefixes {
-    #{$prefix}$property: $definition;
-  }
-}
-
-/*
- * Crea clases para asignar colores según la lista de colores.
- */
-@each $color, $_ in $colors {
-  .background-#{$color} {
-    background-color: var(--#{$color});
-
-    &:focus {
-      background-color: var(--#{$color});
-    }
-  }
-
-  .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});
-
-    &:focus {
-      color: var(--#{$color});
-    }
-
-    ::-moz-selection,
-    ::selection {
-      background: var(--#{$color});
-      color: white;
-    }
-
-    svg {
-      * {
-        fill: var(--#{$color});
-      }
-    }
-
-    .form-control {
-      border-color: var(--#{$color});
-      color: var(--#{$color});
-    }
-
-    hr {
-      border-color: var(--#{$color});
-    }
-
-    a {
-      color: var(--#{$color});
-    }
-  }
-}