Sutty/sutty-base-jekyll-theme
5
0
Fork 0
Code Issues Pull requests Projects Releases Activity

herramientas de css

Browse source
This commit is contained in:
f 2021-01-12 13:33:21 -03:00
parent 5752070368
commit d751c8dd53
3 changed files with 171 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

232
_sass/helpers.scss
View file

@ -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});
}
}
}

2
_sass/snap.scss
View file

@ -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};
}

4
assets/css/styles.scss
View file

@ -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