Commit b3e4c6e7 authored by f's avatar f
Browse files

Merge branch 'sassdoc'

parents 8a125f01 f6c490a4
......@@ -15,3 +15,4 @@ node_modules/
.env
*.ttf
*.otf
_sassdoc/
theme: herman
herman:
sass:
jsonFile: 'sutty.json'
includePaths:
- 'node_modules'
- '_sass'
......@@ -32,6 +32,8 @@ build: ## Compilar el sitio (env=production)
make bundle args="exec jekyll build --profile --trace"
@echo -e "\a"
sassdoc: _sassdoc/index.html ## Genera la documentación de SCSS
hain: ## Correr comandos con hain (args="comandos")
$(hainish) '$(args)'
......@@ -112,4 +114,8 @@ latin_unicode := "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02D
%-subset.woff2: %.otf
make hain args="pyftsubset $< --output-file=$@ --unicodes=$(latin_unicode) --layout-features='*' --flavor=woff2"
sass_files := $(wildcard _sass/*.scss) assets/css/styles.scss .sassdocrc
_sassdoc/index.html: yarn $(sass_files)
./node_modules/.bin/sassdoc _sass/ assets/css/ --dest ./_sassdoc
.PHONY: always
<div
data-controller="floating-alert"
class="pointer-event-none floating-alert floating-alert-bottom d-flex justify-content-center w-100 position-fixed fade hide"
class="floating-alert floating-alert-bottom floating-alert-default"
role="status" aria-live="polite" aria-atomic="true">
<div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
</div>
* {
scroll-behavior: smooth;
}
////
/// Accesibilidad
/// @group Accesibilidad
////
/// La navegación es suave. Esto hace que al navegar a elementos dentro
/// de la misma página no haga un salto, sino que haya una transición.
///
/// Es especialmente útil en sliders.
///
/// Sin embargo puede producir mareos a algunas personas.
* { scroll-behavior: smooth; }
/*
* Deshabilita animaciones si la usuaria las tiene deshabilitadas
*/
/// Aquí se aplica la opción `prefers-reduced-motion: reduce`, pero
/// SassDoc no la estaría mostrando.
@media (prefers-reduced-motion: reduce) {
/// Si les usuaries prefirieron reducir las animaciones de los sitios,
/// deshabilitamos la navegación suavizada y las animaciones.
* {
scroll-behavior: auto;
scroll-behavior: auto !important;
animation: none !important;
}
}
/// Utilizamos Axe para poder marcarnos cuáles elementos no cumplen con
/// parámetros de accesibilidad durante el desarrollo. Esta clase
/// muestra un borde rojo alrededor de los elementos inaccesibles y al
/// obtener el foco, muestra los mensajes de error generados por Axe.js.
///
/// @link _packs/entry.js
.inaccesible {
outline: $red 1px solid;
......@@ -32,6 +48,7 @@
line-break: auto;
white-space: pre-line;
/// El contenido se trae desde el ariaLabel del elemento.
content: attr(aria-label);
}
}
/*
* Estilos del editor de Sutty
*/
////
/// Estilos del editor de Sutty
/// @group Editor
///
// Alineación
div[data-align="left"] { text-align: left; }
div[data-align="center"] { text-align: center; }
div[data-align="right"] { text-align: right; }
/// Alineaciones soportadas. No soportamos justificado porque es
/// difícil que quede bien en web.
$aligns: (left,center,right);
/// Recorrer las alineaciones.
/// @name Alineaciones
@each $align in $aligns {
/// El editor coloca la alineación en un atributo data-align,
/// recorriendo cada una de las alineaciones disponibles.
/// @todo Lograr que SassDoc muestre el código completo.
div[data-align="#{$align}"] { text-align: $align; }
}
////
/// Recursos externos
/// @group Recursos externos
///
/// Los `<iframe>` ocupan todo el ancho del contenedor y tienen un alto
/// mínimo de 480px.
/// @link jekyll-embed-urls
iframe {
border: 0;
width: 100%;
......
////
/// Alertas flotantes
/// @group Alertas flotantes
////
/// Posiciones posibles
$positions: (top, right, bottom, left);
/// Las alertas flotantes son notificaciones emergentes que desaparecen
/// por su cuenta, como los "Toast" de Android. Tienen opciones de
/// accesibilidad para que los lectores de pantalla también las
/// notifiquen.
/// @link _packs/controllers/notification_controller.js
/// @link _includes/floating_alert.html
/// @example html
/// <div class="floating-alert floating-alert-default floating-alert-bottom">
/// <div class="floating-alert-content"></div>
/// </div>
.floating-alert {
&.floating-alert-bottom {
bottom: 2rem;
/// No se puede interactuar
@extend .pointer-event-none;
/// El estilo por defecto las coloca centradas y con una transición al
/// aparecer o desaparecer. Si no usamos esta clase podemos darle
/// nuestro propio estilo.
&.floating-alert-default {
@extend .d-flex;
@extend .justify-content-center;
@extend .w-100;
@extend .position-fixed;
@extend .fade;
@extend .hide;
}
@each $position in $positions {
/// Pueden tener una posición fija
&.floating-alert-#{$position} {
#{$position}: 2rem;
}
}
/// Tienen un borde redondeado y un padding para parecerse a un toast.
/// El color de fondo se lo da una clase background-*
.floating-alert-content {
border-radius: 2rem;
padding: .5rem 1rem;
......
// En este archivo colocamos todos las herramientas que nos hagan falta,
// de forma que podamos generar clases específicas que sean combinables
// con otras, en lugar de escribir clases específicas para cada
// elemento.
//
// Cada clase tiene su versión responsive de acuerdo a los parámetros de
// Bootstrap.
// Ocultar la barra de scroll, útil para sliders horizontales.
.no-scrollbar {
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar { display: none; }
}
////
/// @group Utilidades
////
// Mismo alto que ancho
.square {
@extend .position-relative;
padding-bottom: 100%;
/// Direcciones posibles
$directions: (top, right, bottom, left);
& > * {
@extend .position-absolute;
@extend .top-0;
@extend .left-0;
@extend .h-100;
/// 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;
}
}
// Eventos del cursor
@each $event in (none, auto) {
.pointer-event-#{$event} {
pointer-events: $event;
}
@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);
/// 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; }
}
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
.pointer-event-#{$grid-breakpoint}-#{$event} {
pointer-events: $event;
/// Un elemento cuadrado
///
/// @example html
/// <div class="square-lg"></div>
.square#{$infix} {
@extend .position-relative;
padding-bottom: 100%;
& > * {
@extend .position-absolute;
@extend .top-0;
@extend .left-0;
@extend .h-100;
}
}
}
}
// Agrega una transición a cualquier modificación de atributos
.transition {
@include transition($transition-base);
}
// Ajustes de imagen y video con respecto al contenedor
@each $keyword in (contain, cover, fill, none, scale-down) {
.fit-#{$keyword} {
object-fit: #{$keyword};
}
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
.fit-#{$grid-breakpoint}-#{$keyword} {
object-fit: #{$keyword};
/// 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;
}
}
}
}
// Cursores
@each $cursor in (pointer none) {
.cursor-#{$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;
}
}
// Overflow
@each $value in (auto, hidden, scroll) {
.overflow-#{$value} {
overflow: $value !important;
}
/// Agrega una transición a cualquier modificación de atributos
.transition#{$infix} {
@include transition($transition-base);
}
@each $axis in (y, x) {
.overflow-#{$axis}-#{$value} {
overflow-#{$axis}: $value !important;
/// 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};
}
}
}
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
.overflow-#{$grid-breakpoint}-#{$value} {
overflow: $value !important;
/// _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 (y, x) {
.overflow-#{$grid-breakpoint}-#{$axis}-#{$value} {
overflow-#{$axis}: $value !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
.f-#{$spacer} {
font-size: $length !important;
}
// Columnas de texto
.text-column-#{$spacer} {
column-count: $spacer;
}
// Limitar la cantidad de líneas de un bloque de texto
.line-clamp-#{$spacer} {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: $spacer;
-webkit-box-orient: vertical;
}
// Ubicación absoluta, usar con position-*
@each $direction in (top, right, bottom, left) {
.#{$direction}-#{$spacer} {
#{$direction}: $length
}
}
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
// Poder aumentar o disminuir el alto de la tipografía
.f-#{$grid-breakpoint}-#{$spacer} {
@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
.text-column-#{$grid-breakpoint}-#{$spacer} {
/// 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
.line-clamp-#{$grid-breakpoint}-#{$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;
}
// Ubicación absoluta, usar con position-*
@each $direction in (top, right, bottom, left) {
.#{$direction}-#{$grid-breakpoint}-#{$spacer} {
@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
@each $prop, $abbrev in (width: w, height: h) {
@each $size, $length in $sizes {
.#{$abbrev}-#{$size} { #{$prop}: $length; }
.#{$abbrev}-#{$size} { #{$prop}: $length; }
.min-#{$abbrev}-#{$size} { min-#{$prop}: $length; }
.max-#{$abbrev}-#{$size} { max-#{$prop}: $length; }
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
.#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length; }
.min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length; }
.max-#{$abbrev}-#{$grid-breakpoint}-#{$size} { max-#{$prop}: $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; }
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length; }
.min-#{$abbrev}#{$infix}-#{$size} { min-#{$prop}: $length; }
.max-#{$abbrev}#{$infix}-#{$size} { max-#{$prop}: $length; }
}
}
}
}
@each $scroll in (auto, smooth) {
.scroll-#{$scroll} {
scroll-behavior: #{$scroll};
}
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
.scroll-#{$grid-breakpoint}-#{$scroll} {
/// 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};
}
}
}
}
// Versiones responsive de utilidades Bootstrap
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
// Bordes
// node_modules/bootstrap/scss/utilities/_borders.scss
.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; }
// Posicionamiento
@each $position in $positions {
.position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
/// 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; }
}
// Anchos y altos
@each $prop, $abbrev in (width: w, height: h) {
@each $size, $length in $sizes {
.#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length !important; }
.min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length !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; }
}
}
}
// Crea una propiedad con prefijos de navegador
@mixin vendor-prefix($property, $definition...) {
@each $prefix in $vendor-prefixes {
#{$prefix}$property: $definition;
}
}
// Colores
@each $color, $rgb in $colors {
.background-#{$color} {
background-color: var(--#{$color});
&:focus {
background-color: var(--#{$color});
@each $position in $positions {
/// Posicionamiento
///
/// @example html
/// <div class="position-relative position-md-absolute"></div>
.position#{$infix}-#{$position} { position: $position !important; }
}
}
@each $opacity, $degree in $opacities {
.background-#{$color}-t#{$opacity} {
background-color: scale-color($rgb, $alpha: $degree);
}
}
@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 $attr in (stroke, fill) {
.#{$attr}-#{$color} {
svg {
* {
#{$attr}: 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);
}
}
}
}
// Barras de scroll de colores
.scrollbar-#{$color} {
scrollbar-color: var(--#{$color}) transparent;
scrollbar-width: thin;
/// Atributos de SVG
$svg-attributes: (stroke, fill);