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

helpers para bootstrap

Browse source
This commit is contained in:
f 2020-10-28 20:47:44 -03:00
parent c196221489
commit 2a29ccb1b6
2 changed files with 80 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
_sass/helpers.scss
View file

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

7
assets/css/styles.scss
View file

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