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

/*
 * 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
 */
$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
@mixin vendor-prefix($property, $definition...) {
  @each $prefix in $vendor-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});
    }
  }
}