Algunas ayudas de SASS
This commit is contained in:
parent
9966f80c27
commit
78f9b53d77
3 changed files with 68 additions and 0 deletions
13
_sass/accessibility.scss
Normal file
13
_sass/accessibility.scss
Normal 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
53
_sass/helpers.scss
Normal 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});
|
||||
}
|
||||
}
|
||||
}
|
|
@ -10,3 +10,5 @@
|
|||
* Los archivos se encuentran en node_modules/bootstrap/scss
|
||||
*/
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
@import "accessibility";
|
||||
@import "helpers";
|
||||
|
|
Loading…
Reference in a new issue