diff --git a/_sass/helpers.scss b/_sass/helpers.scss index 2796eed..d4ff5d0 100644 --- a/_sass/helpers.scss +++ b/_sass/helpers.scss @@ -1,5 +1,71 @@ +/* + * 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; } +} + +/* + * 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; + } +} + +/* + * 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; + } + } + } +} + /* * Crea una propiedad con prefijos de navegador */ @@ -16,10 +82,18 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-"); @each $color, $_ in $colors { .background-#{$color} { background-color: var(--#{$color}); + + &:focus { + background-color: var(--#{$color}); + } } .#{$color} { - color: var(--#{$color}); + color: var(--#{$color}) !important; + + &:focus { + color: var(--#{$color}) !important; + } ::-moz-selection, ::selection { diff --git a/assets/css/styles.scss b/assets/css/styles.scss index e0cc316..63d1be0 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -2,12 +2,15 @@ # Ponemos un frontmatter porque queremos que Jekyll procese este archivo --- +/* + * Redefinir variables de Boostrap acá. Se las puede ver en + * node_modules/bootstrap/scss/_variables.scss + */ + /* * XXX: Solo importar los archivos necesarios de bootstrap para * facilitar la reducción de CSS. Por ahora pedimos todo para poder * empezar a trabajar en el HTML sin pensar en CSS. - * - * Los archivos se encuentran en node_modules/bootstrap/scss */ @import "bootstrap/scss/bootstrap"; @import "fork-awesome/scss/fork-awesome";