sutty-base-jekyll-theme/_sass/helpers.scss

////
/// @group Utilidades
////

/// Direcciones posibles
$directions: (top, right, bottom, left);

/// Crea una propiedad con prefijos de navegador, cuando no es
/// soportada por estándares, por ejemplo el guionado de texto.
@mixin vendor-prefix($property, $definition...) {
  @each $prefix in $vendor-prefixes {
    #{$prefix}$property: $definition;
  }
}

/// Los recursos que cargan a demanda muestran el espacio que ocupan.
[loading="lazy"] {
  background: linear-gradient(215deg, #{$white} 0%, #{$primary} 100%);
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
/// Obtiene el sufijo para cada clase responsive usando mixins de
/// Bootstrap.  Valores posibles:
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
/// `-md`, `-lg`, `-xl`.
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

/// Grilla en CSS, soporta armar una cantidad de columnas, indicar las
/// columnas que ocupan los elementos descendientes e incluso
/// solapamiento.
///
/// @example html
///   <div class="d-grid grid-cols-5">
///     <div class="grid-row-1 grid-col-1-to-2"></div>
///     <div class="grid-row-2 grid-col-2-to-3"></div>
///   </div>
    .d#{$infix}-grid {
      display: grid !important;

      @each $spacer, $_ in $spacers {
        &.grid-cols#{$infix}-#{$spacer} {
          grid-template-columns: repeat($spacer, 1fr) !important;
        }

        & > .grid-row#{$infix}-#{$spacer} {
          grid-row: $spacer !important;
        }

        & > .grid-col#{$infix}-#{$spacer} {
          grid-column: $spacer !important;
        }

        @each $spacer_to, $_ in $spacers {
          & > .grid-col#{$infix}-#{$spacer}-to-#{$spacer_to} {
            grid-column: #{$spacer} / #{$spacer_to} !important;
          }
        }
      }
    }

/// Ocultar la barra de scroll, útil para sliders horizontales.
///
/// @example html
///   <div class="no-scrollbar-md"></div>
    .no-scrollbar#{$infix} {
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar { display: none; }
    }

    :enabled {
      .show-when-disabled#{$infix} {
        display: none !important;
      }
    }

    :disabled {
      .hide-when-disabled#{$infix} {
        display: none !important;
      }
    }

/// Un elemento cuadrado
///
/// @example html
///   <div class="square-lg"></div>
    .square#{$infix} {
      position: relative !important;
      padding-bottom: 100%;

      & > * {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
      }
    }

/// Cursores
    $cursors: (pointer, none);
    @each $cursor in $cursors {
/// El elemento va a tener un cursor
///
/// @example html
///   <div class="cursor-pointer"></div>
      .cursor#{$infix}-#{$cursor} {
        cursor: $cursor;
      }
    }

/// Eventos del cursor
    $events: (none, auto);
    @each $event in $events {
/// Habilita o deshabilita recibir eventos al tocar o clickear.
///
/// @example html
///   <div class="pointer-event-none"></div>
      .pointer-event#{$infix}-#{$event} {
        pointer-events: $event;
      }
    }

/// Agrega una transición a cualquier modificación de atributos
    .transition#{$infix} {
      @include transition($transition-base);
    }

/// Valores posibles para la propiedad `object-fit`
    $objects: (contain, cover, fill, none, scale-down);
    @each $object in $objects {
/// Ajustes de imagen y video con respecto al contenedor
///
/// @example html
///   <img class="object-cover object-lg-contain"/>
      .fit#{$infix}-#{$object} {
        object-fit: #{$object};
      }
    }

/// _Overflow_, qué hacer cuando el contenido sobrepasa los límites del
/// contenedor.
    $overflows: (auto, hidden, scroll);
/// También puede ser solo dentro de un eje
    $overflow-axis: (x, y);
    @each $overflow in $overflows {
/// Manejar el contenido sobre cualquier eje
///
/// @example html
///   <div class="overflow-hidden overflow-scroll-md"></div>
      .overflow#{$infix}-#{$overflow} {
        overflow: $overflow !important;
      }

      @each $axis in $overflow-axis {
/// Manejar el contenido sobre un eje particular
///
/// @example html
///   <div class="overflow-hidden-y overflow-scroll-x"></div>
        .overflow-#{$axis}#{$infix}-#{$overflow} {
          overflow-#{$axis}: $overflow !important;
        }
      }
    }

    @each $spacer, $length in $spacers {
/// Poder aumentar o disminuir el alto de la tipografía.  Los
/// `spacers` están definidos en Bootstrap y pueden ser extendidos
/// desde styles.scss
///
/// @link assets/css/styles.scss
/// @example html
///   <h1 class="f-3"></h1>
      .f#{$infix}-#{$spacer} {
        font-size: $length !important;
      }

/// Columnas de texto
///
/// @example html
///   <div class="text-column-1 text-column-md-3"></div>
      .text-column#{$infix}-#{$spacer} {
        column-count: $spacer;
      }

/// Limitar la cantidad de líneas de un bloque de texto,
/// reemplazando el sobrante por puntos suspensivos.  Es útil cuando
/// el diseño solo pide una cantidad de líneas pero no sabemos cuál
/// va a ser el largo.
///
/// @example html
///   <h1 class="line-clamp-1"></h1>
      .line-clamp#{$infix}-#{$spacer} {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: $spacer;
        -webkit-box-orient: vertical;
      }

      @each $direction in $directions {
/// Ubicación absoluta, usar con position-*
///
/// @example html
///   <div class="position-absolute top-0 left-3"></div>
        .#{$direction}#{$infix}-#{$spacer} {
          #{$direction}: $length
        }
      }
    }

    /// Anchos y altos en base a `$sizes` definido por Bootstrap.  Para
    /// personalizar los tamaños, modificarlos o agregarlos en `styles.scss`
    ///
    /// @link assets/css/styles.scss
    @each $prop, $abbrev in (width: w, height: h) {
      @each $size, $length in $sizes {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .min-#{$abbrev}#{$infix}-#{$size} { min-#{$prop}: $length !important; }
        .max-#{$abbrev}#{$infix}-#{$size} { max-#{$prop}: $length !important; }
      }
    }

/// Tipos de _scroll_ posible
    $scrolls: (auto, smooth);
    @each $scroll in $scrolls {
/// Poder modificar el tipo de _scroll_ de forma _responsive_
///
/// @example html
///   <div class="scroll-auto scroll-md-smooth"></div>
      .scroll#{$infix}-#{$scroll} {
        scroll-behavior: #{$scroll};
      }
    }

/// Bordes.  Bootstrap no define bordes _responsive_
///
/// @link node_modules/bootstrap/scss/utilities/_borders.scss
/// @example html
///   <div class="border border-md-top-0"></div>
    .border#{$infix}   { border: $border-width solid $border-color !important; }
    .border#{$infix}-0 { border: 0 !important; }

    @each $direction in $directions {
      .border#{$infix}-#{$direction}   { border-#{$direction}: $border-width solid $border-color !important; }
      .border#{$infix}-#{$direction}-0 { border-#{$direction}: 0 !important; }
    }

    $aligns: (left,center,right);
    @each $align in $aligns {
/// Alineación _responsive_
///
/// @example html
///   <div class="text-center text-md-right"></div>
      .text#{$infix}-#{$align} { text-align: $align !important; }
    }

    @each $position in $positions {
/// Posicionamiento
///
/// @example html
///   <div class="position-relative position-md-absolute"></div>
      .position#{$infix}-#{$position} { position: $position !important; }
    }

    @each $color, $rgb in $colors {
/// Colores de fondo.  Es raro que usemos versiones _responsive_, pero
/// no está de más tenerlas.
///
/// @link assets/css/styles.scss
/// @example html
///   <div class="background-red"></div>
      .background#{$infix}-#{$color} {
        background-color: var(--#{$color});

        &:focus {
          background-color: var(--#{$color});
        }
      }

      @each $opacity, $degree in $opacities {
/// Color de fondo con transparencia (opacidad)
///
/// @example html
///   <div class="background-red-t2"></div>
        .background#{$infix}-#{$color}-t#{$opacity} {
          background-color: scale-color($rgb, $alpha: $degree);
        }
      }

/// Atributos de SVG
      $svg-attributes: (stroke, fill);
      @each $attr in $svg-attributes {
/// Poder cambiar el relleno o la línea de un SVG
///
/// @example html
///   <div class="stroke-black fill-red">
///     <svg/>
///   </div>
        .#{$attr}#{$infix}-#{$color} {
          svg {
            * {
              #{$attr}: var(--#{$color});
            }
          }
        }
      }

/// Barras de _scroll_ de colores
///
/// @example html
///   <div class="scrollbar-green"></div>
      .scrollbar#{$infix}-#{$color} {
        scrollbar-color: var(--#{$color}) transparent;
        scrollbar-width: thin;

        &::-webkit-scrollbar {
          width: 5px;
          height: 8px;
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background: var(--#{$color});
        }
      }

/// Bordes de color
///
/// @example html
///   <div class="border-red"></div>
      .border#{$infix}-#{$color} {
        border-color: var(--#{$color}) !important;
      }

/// Cambiar el fondo al pasar por encima o hacer foco
///
/// @example html
///   <div class="background-black background-hover-red"></div>
      .background-hover#{$infix}-#{$color} {
        &:hover,
        &:focus-within {
          background-color: var(--#{$color});
        }
      }

/// Cambiar el color al pasar por encima o hacer foco
///
/// @example html
///   <div class="black hover-red"></div>
      .hover-#{$color} {
        &:hover,
        &:focus-within {
          color: var(--#{$color}) !important;
        }
      }

/// Cambiar el color, también aplica a la selección de texto.
///
/// @example html
///   <div class="black hover-red"></div>
      .#{$color}#{$infix} {
        color: var(--#{$color});

        &:focus {
          color: var(--#{$color});
        }

/// Invertir el color en la selección, con el mismo color de fondo y
/// texto en blanco.
        ::-moz-selection,
        ::selection {
          background: var(--#{$color});
          color: white;
        }

/// Si el contenedor tiene un color, también aplica a los bordes de los
/// elementos de un formulario.
///
/// @todo Evaluar si es realmente necesario hacerlo así, porque no
/// aplica a las sombras.
        .form-control {
          border-color: var(--#{$color});
          color: var(--#{$color});
        }

/// Los `<hr/>` también cambian de color.
///
/// @example html
///   <div class="red">
///     <hr/>
///   </div>
        hr {
          border-color: var(--#{$color});
        }
      }
    }
  }
}