herramientas de css
This commit is contained in:
parent
5752070368
commit
d751c8dd53
3 changed files with 171 additions and 67 deletions
|
@ -1,11 +1,12 @@
|
|||
/*
|
||||
* Usar en animaciones, empiezan rápido y desaceleran hacia el final.
|
||||
*/
|
||||
$bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
||||
// 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.
|
||||
*/
|
||||
// Ocultar la barra de scroll, útil para sliders horizontales.
|
||||
.no-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
@ -13,48 +14,157 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
|||
&::-webkit-scrollbar { display: none; }
|
||||
}
|
||||
|
||||
// El elemento no se puede cliquear
|
||||
.click-through {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 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
|
||||
@each $cursor in (pointer none) {
|
||||
.cursor-#{$cursor} {
|
||||
cursor: $cursor;
|
||||
}
|
||||
}
|
||||
|
||||
@each $direction in (top, right, bottom, left) {
|
||||
.#{$direction}-0 {
|
||||
#{$direction}: 0
|
||||
// Overflow
|
||||
@each $value in (auto, hidden, scroll) {
|
||||
.overflow-#{$value} {
|
||||
overflow: $value !important;
|
||||
}
|
||||
|
||||
@each $axis in (y, x) {
|
||||
.overflow-#{$axis}-#{$value} {
|
||||
overflow-#{$axis}: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
||||
@include media-breakpoint-up($grid-breakpoint) {
|
||||
.overflow-#{$grid-breakpoint}-#{$value} {
|
||||
overflow: $value !important;
|
||||
}
|
||||
|
||||
@each $axis in (y, x) {
|
||||
.overflow-#{$grid-breakpoint}-#{$axis}-#{$value} {
|
||||
overflow-#{$axis}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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} {
|
||||
@each $spacer, $length in $spacers {
|
||||
// Poder aumentar o disminuir el alto de la tipografía
|
||||
.f-#{$spacer} {
|
||||
font-size: $length !important;
|
||||
}
|
||||
|
||||
.text-column-#{$size} {
|
||||
column-count: $size;
|
||||
// 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} {
|
||||
font-size: $length !important;
|
||||
}
|
||||
|
||||
// Columnas de texto
|
||||
.text-column-#{$grid-breakpoint}-#{$spacer} {
|
||||
column-count: $spacer;
|
||||
}
|
||||
|
||||
// Limitar la cantidad de líneas de un bloque de texto
|
||||
.line-clamp-#{$grid-breakpoint}-#{$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} {
|
||||
#{$direction}: $length
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Modificadores de Bootstrap que no tienen versión responsive.
|
||||
*/
|
||||
// anchos y altos
|
||||
@each $prop, $abbrev in (width: w, height: h) {
|
||||
@each $size, $length in $sizes {
|
||||
.#{$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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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} {
|
||||
scroll-behavior: #{$scroll};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Versiones responsive de utilidades Bootstrap
|
||||
@each $grid-breakpoint, $_ in $grid-breakpoints {
|
||||
@include media-breakpoint-up($grid-breakpoint) {
|
||||
// border
|
||||
// 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; }
|
||||
|
@ -66,49 +176,34 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
|||
.border-#{$grid-breakpoint}-bottom-0 { border-bottom: 0 !important; }
|
||||
.border-#{$grid-breakpoint}-left-0 { border-left: 0 !important; }
|
||||
|
||||
// alineación
|
||||
// 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
|
||||
// Posicionamiento
|
||||
@each $position in $positions {
|
||||
.position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
|
||||
}
|
||||
|
||||
// anchos y altos
|
||||
// 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;
|
||||
.min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Crea una propiedad con prefijos de navegador
|
||||
*/
|
||||
$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
||||
// Crea una propiedad con prefijos de navegador
|
||||
@mixin vendor-prefix($property, $definition...) {
|
||||
@each $prefix in $vendor-prefixes {
|
||||
#{$prefix}$property: $definition;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Crea clases para asignar colores según la lista de colores.
|
||||
*/
|
||||
// Colores
|
||||
@each $color, $_ in $colors {
|
||||
.background-#{$color} {
|
||||
background-color: var(--#{$color});
|
||||
|
@ -118,6 +213,17 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
|||
}
|
||||
}
|
||||
|
||||
@each $attr in (stroke, fill) {
|
||||
.#{$attr}-#{$color} {
|
||||
svg {
|
||||
* {
|
||||
#{$attr}: var(--#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Barras de scroll de colores
|
||||
.scrollbar-#{$color} {
|
||||
scrollbar-color: var(--#{$color}) transparent;
|
||||
scrollbar-width: thin;
|
||||
|
@ -133,22 +239,28 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
|||
}
|
||||
}
|
||||
|
||||
// Bordes
|
||||
.border-#{$color} {
|
||||
border-color: var(--#{$color}) !important;
|
||||
}
|
||||
|
||||
// Cambiar el fondo al pasar por encima o hacer foco
|
||||
.hover-bg-#{$color} {
|
||||
&:hover {
|
||||
&:focus-within,
|
||||
background-color: var(--#{$color});
|
||||
}
|
||||
}
|
||||
|
||||
// Cambiar el color al pasar por encima o hacer foco
|
||||
.hover-#{$color} {
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
color: var(--#{$color});
|
||||
}
|
||||
}
|
||||
|
||||
// Cambiar el color
|
||||
.#{$color} {
|
||||
color: var(--#{$color});
|
||||
|
||||
|
@ -156,18 +268,14 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
|||
color: var(--#{$color});
|
||||
}
|
||||
|
||||
// Invertir el color en la selección
|
||||
::-moz-selection,
|
||||
::selection {
|
||||
background: var(--#{$color});
|
||||
color: white;
|
||||
}
|
||||
|
||||
svg {
|
||||
* {
|
||||
fill: var(--#{$color});
|
||||
}
|
||||
}
|
||||
|
||||
// Ajustes para Bootstrap
|
||||
.form-control {
|
||||
border-color: var(--#{$color});
|
||||
color: var(--#{$color});
|
||||
|
@ -176,9 +284,5 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
|||
hr {
|
||||
border-color: var(--#{$color});
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@ $snap-points: (start, end, center, none);
|
|||
.snap-#{$snap-type}-#{$snap-direction} {
|
||||
scroll-snap-points-#{$snap-direction}: repeat(100%);
|
||||
scroll-snap-destination: 0 0;
|
||||
@each $prefix in $prefixes {
|
||||
@each $prefix in $vendor-prefixes {
|
||||
#{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
|
||||
#{$prefix}scroll-snap-type: #{$snap-type};
|
||||
}
|
||||
|
|
|
@ -3,8 +3,8 @@
|
|||
---
|
||||
|
||||
$debug: {{ jekyll.environment | not: 'production' }};
|
||||
$prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
||||
$overflows: auto, hidden, scroll;
|
||||
$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
||||
$bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
||||
|
||||
/*
|
||||
* Redefinir variables de Boostrap acá. Se las puede ver en
|
||||
|
|
Loading…
Reference in a new issue