Algunas ayudas de SASS

This commit is contained in:
f 2020-06-17 16:34:42 -03:00
parent 9966f80c27
commit 78f9b53d77
3 changed files with 68 additions and 0 deletions

13
_sass/accessibility.scss Normal file
View file

@ -0,0 +1,13 @@
* {
scroll-behavior: smooth;
}
/*
* Deshabilita animaciones si la usuaria las tiene deshabilitadas
*/
@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto;
animation: none !important;
}
}

53
_sass/helpers.scss Normal file
View file

@ -0,0 +1,53 @@
/*
* Crea una propiedad con prefijos de navegador
*/
$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
@mixin vendor-prefix($property, $definition...) {
@each $prefix in $vendor-prefixes {
#{$prefix}$property: $definition;
}
}
/*
* Crea clases para asignar colores según la lista de colores.
*/
@each $color, $_ in $colors {
.background-#{$color} {
background-color: var(--#{$color});
}
.#{$color} {
color: var(--#{$color});
::-moz-selection,
::selection {
background: var(--#{$color});
color: white;
}
svg {
* {
fill: var(--#{$color});
}
}
.form-control {
border-color: var(--#{$color});
}
.btn {
background-color: var(--#{$color});
color: white;
border-color: var(--#{$color});
}
hr {
border-color: var(--#{$color});
}
a {
color: var(--#{$color});
}
}
}

View file

@ -10,3 +10,5 @@
* Los archivos se encuentran en node_modules/bootstrap/scss * Los archivos se encuentran en node_modules/bootstrap/scss
*/ */
@import "bootstrap/scss/bootstrap"; @import "bootstrap/scss/bootstrap";
@import "accessibility";
@import "helpers";