@iamgld/ui 1.21.2 → 21.1.0

package/public/styles/layers/_tools.scss

@@ -1,169 +1,169 @@
-@use './setting';
-
-/*
-  En esta capa estarán:
-    1. Herramientas que están disponible globalmente
-    2. Funciones utilitarias
-    3. Mixins
-*/
-
-// From (mayor que $breakpoint)
-@mixin from($from) {
-  @if $from == zero {
-    @media screen and (width > 0) {
-      @content;
-    }
-  }
-
-  @if $from == mobile {
-    @media screen and (width > 320px) {
-      @content;
-    }
-  }
-
-  @if $from == landscape {
-    @media screen and (width > 576px) {
-      @content;
-    }
-  }
-
-  @if $from == tablet {
-    @media screen and (width > 768px) {
-      @content;
-    }
-  }
-
-  @if $from == desktop {
-    @media screen and (width > 992px) {
-      @content;
-    }
-  }
-
-  @if $from == extra-desktop {
-    @media screen and (width > 1280px) {
-      @content;
-    }
-  }
-}
-
-// To (es menor que $to)
-@mixin to($to) {
-  @if $to == zero {
-    @media screen and (width <= 0) {
-      @content;
-    }
-  }
-
-  @if $to == mobile {
-    @media screen and (width <= 320px) {
-      @content;
-    }
-  }
-
-  @if $to == landscape {
-    @media screen and (width <= 576px) {
-      @content;
-    }
-  }
-
-  @if $to == tablet {
-    @media screen and (width <= 768px) {
-      @content;
-    }
-  }
-
-  @if $to == desktop {
-    @media screen and (width <= 992px) {
-      @content;
-    }
-  }
-
-  @if $to == extra-desktop {
-    @media screen and (width <= 1280px) {
-      @content;
-    }
-  }
-}
-
-// Styles of Scroll Bar on Chrome, Edge y Safari.
-@mixin scrollbar {
-  // Chrome, Edge y Safari.
-  &::-webkit-scrollbar {
-    width: var(--gld-spacing--xxs);
-    height: var(--gld-spacing--xxs);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent; // color of the tracking area
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: light-dark(
-      var(--gld-gray-transparent--040),
-      var(--gld-gray-transparent--020)
-    ); // color of the scroll thumb
-    will-change: background;
-    transition: background var(--gld-animation-time--150) ease;
-    border-radius: var(--gld-radius--s); // roundness of the scroll thumb
-    // border: 2px solid Palette(Primary); // creates padding around scroll thumb
-
-    &:hover {
-      background: light-dark(
-        var(--gld-gray-transparent--060),
-        var(--gld-gray-transparent--040)
-      ); // color of the scroll thumb on hover
-    }
-  }
-
-  // Firefox
-  overflow: auto;
-  scrollbar-width: thin;
-  // color of the scroll thumb, color of the tracking area
-  scrollbar-color: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020))
-    transparent;
-  scroll-behavior: smooth;
-}
-
-@mixin fontSizeHeadingOne() {
-  font-size: var(--font-size--heading-two);
-
-  @include from(desktop) {
-    font-size: var(--font-size--heading-one);
-  }
-}
-
-@mixin fontSizeHeadingTwo() {
-  font-size: var(--font-size--heading-three);
-
-  @include from(desktop) {
-    font-size: var(--font-size--heading-two);
-  }
-}
-
-@mixin fontSizeHeadingThree() {
-  font-size: var(--font-size--normal);
-
-  @include from(desktop) {
-    font-size: var(--font-size--heading-three);
-  }
-}
-
-@mixin fontSizeNormal() {
-  font-size: var(--font-size--small);
-
-  @include from(desktop) {
-    font-size: var(--font-size--normal);
-  }
-}
-
-@mixin fontSizeSmall() {
-  font-size: var(--font-size--tiny);
-
-  @include from(desktop) {
-    font-size: var(--font-size--small);
-  }
-}
-
-@mixin fontSizeTiny() {
-  font-size: var(--font-size--tiny);
-}
+@use './setting';
+
+/*
+  En esta capa estarán:
+    1. Herramientas que están disponible globalmente
+    2. Funciones utilitarias
+    3. Mixins
+*/
+
+// From (mayor que $breakpoint)
+@mixin from($from) {
+  @if $from == zero {
+    @media screen and (width > 0) {
+      @content;
+    }
+  }
+
+  @if $from == mobile {
+    @media screen and (width > 320px) {
+      @content;
+    }
+  }
+
+  @if $from == landscape {
+    @media screen and (width > 576px) {
+      @content;
+    }
+  }
+
+  @if $from == tablet {
+    @media screen and (width > 768px) {
+      @content;
+    }
+  }
+
+  @if $from == desktop {
+    @media screen and (width > 992px) {
+      @content;
+    }
+  }
+
+  @if $from == extra-desktop {
+    @media screen and (width > 1280px) {
+      @content;
+    }
+  }
+}
+
+// To (es menor que $to)
+@mixin to($to) {
+  @if $to == zero {
+    @media screen and (width <= 0) {
+      @content;
+    }
+  }
+
+  @if $to == mobile {
+    @media screen and (width <= 320px) {
+      @content;
+    }
+  }
+
+  @if $to == landscape {
+    @media screen and (width <= 576px) {
+      @content;
+    }
+  }
+
+  @if $to == tablet {
+    @media screen and (width <= 768px) {
+      @content;
+    }
+  }
+
+  @if $to == desktop {
+    @media screen and (width <= 992px) {
+      @content;
+    }
+  }
+
+  @if $to == extra-desktop {
+    @media screen and (width <= 1280px) {
+      @content;
+    }
+  }
+}
+
+// Styles of Scroll Bar on Chrome, Edge y Safari.
+@mixin scrollbar {
+  // Chrome, Edge y Safari.
+  &::-webkit-scrollbar {
+    width: var(--gld-spacing--xxs);
+    height: var(--gld-spacing--xxs);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent; // color of the tracking area
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: light-dark(
+      var(--gld-gray-transparent--040),
+      var(--gld-gray-transparent--020)
+    ); // color of the scroll thumb
+    will-change: background;
+    transition: background var(--gld-animation-time--150) ease;
+    border-radius: var(--gld-radius--s); // roundness of the scroll thumb
+    // border: 2px solid Palette(Primary); // creates padding around scroll thumb
+
+    &:hover {
+      background: light-dark(
+        var(--gld-gray-transparent--060),
+        var(--gld-gray-transparent--040)
+      ); // color of the scroll thumb on hover
+    }
+  }
+
+  // Firefox
+  overflow: auto;
+  scrollbar-width: thin;
+  // color of the scroll thumb, color of the tracking area
+  scrollbar-color: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020))
+    transparent;
+  scroll-behavior: smooth;
+}
+
+@mixin fontSizeHeadingOne() {
+  font-size: var(--font-size--heading-two);
+
+  @include from(desktop) {
+    font-size: var(--font-size--heading-one);
+  }
+}
+
+@mixin fontSizeHeadingTwo() {
+  font-size: var(--font-size--heading-three);
+
+  @include from(desktop) {
+    font-size: var(--font-size--heading-two);
+  }
+}
+
+@mixin fontSizeHeadingThree() {
+  font-size: var(--font-size--normal);
+
+  @include from(desktop) {
+    font-size: var(--font-size--heading-three);
+  }
+}
+
+@mixin fontSizeNormal() {
+  font-size: var(--font-size--small);
+
+  @include from(desktop) {
+    font-size: var(--font-size--normal);
+  }
+}
+
+@mixin fontSizeSmall() {
+  font-size: var(--font-size--tiny);
+
+  @include from(desktop) {
+    font-size: var(--font-size--small);
+  }
+}
+
+@mixin fontSizeTiny() {
+  font-size: var(--font-size--tiny);
+}

package/public/styles/layers/_trumps.scss

@@ -1,11 +1,11 @@
-@use './setting' as setting;
-@use './tools' as tools;
-
-/*
-  En esta capa estarán:
-    1. sobreescrituras de estilos
-    2. helpers o utilities
-    3. pueden usar el flag !important
-    4. solo afecta a una pieza del DOM a la vez
-    5. especificidad por lo regular alta
-*/
+@use './setting' as setting;
+@use './tools' as tools;
+
+/*
+  En esta capa estarán:
+    1. sobreescrituras de estilos
+    2. helpers o utilities
+    3. pueden usar el flag !important
+    4. solo afecta a una pieza del DOM a la vez
+    5. especificidad por lo regular alta
+*/

package/public/styles/styles.scss

@@ -1,14 +1,14 @@
-// Utils Imports
-
-/*
-  1. Piensa en la especificidad
-  2. Nunca se añaden estilos para sobre escribir otros
-  3. Cada capa en mas detallada o especifica que la anterior
-  4. Se pueden añadir o eliminar capaz de ser necesario
-*/
-
-@forward './layers/_setting';
-@forward './layers/_tools';
-@forward './layers/_base';
-@forward './layers/_objects';
-@forward './layers/_trumps';
+// Utils Imports
+
+/*
+  1. Piensa en la especificidad
+  2. Nunca se añaden estilos para sobre escribir otros
+  3. Cada capa en mas detallada o especifica que la anterior
+  4. Se pueden añadir o eliminar capaz de ser necesario
+*/
+
+@forward './layers/_setting';
+@forward './layers/_tools';
+@forward './layers/_base';
+@forward './layers/_objects';
+@forward './layers/_trumps';