mover helpers a application.scss
This commit is contained in:
f
parent
903ace61de
commit
7007bbe1fa
2 changed files with 188 additions and 188 deletions
|
|
@ -22,7 +22,6 @@ $component-active-bg: $magenta;
|
||||||
|
|
||||||
@import "bootstrap";
|
@import "bootstrap";
|
||||||
@import "editor";
|
@import "editor";
|
||||||
@import "helpers";
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--foreground: #{$black};
|
--foreground: #{$black};
|
||||||
|
|
@ -293,3 +292,191 @@ svg {
|
||||||
.vh-100 {
|
.vh-100 {
|
||||||
height: 100vh !important;
|
height: 100vh !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Viene de sutty-base-jekyll-theme
|
||||||
|
$prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
||||||
|
$overflows: auto, hidden, scroll;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 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; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $cursor in (pointer none) {
|
||||||
|
.cursor-#{$cursor} {
|
||||||
|
cursor: $cursor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $direction in (top, right, bottom, left) {
|
||||||
|
.#{$direction}-0 {
|
||||||
|
#{$direction}: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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} {
|
||||||
|
font-size: $length !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-column-#{$size} {
|
||||||
|
column-count: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-column-#{$grid-breakpoint}-#{$size} {
|
||||||
|
column-count: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Crea una propiedad con prefijos de navegador
|
||||||
|
*/
|
||||||
|
@mixin vendor-prefix($property, $definition...) {
|
||||||
|
@each $prefix in $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});
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-#{$color} {
|
||||||
|
scrollbar-color: var(--#{$color}) transparent;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-#{$color} {
|
||||||
|
border-color: var(--#{$color}) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-bg-#{$color} {
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-#{$color} {
|
||||||
|
&:hover {
|
||||||
|
color: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$color} {
|
||||||
|
color: var(--#{$color});
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
color: var(--#{$color});
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection,
|
||||||
|
::selection {
|
||||||
|
background: var(--#{$color});
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
* {
|
||||||
|
fill: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
border-color: var(--#{$color});
|
||||||
|
color: var(--#{$color});
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-color: var(--#{$color});
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--#{$color});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,187 +0,0 @@
|
||||||
// Viene de sutty-base-jekyll-theme
|
|
||||||
$prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
|
|
||||||
$overflows: auto, hidden, scroll;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 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; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $cursor in (pointer none) {
|
|
||||||
.cursor-#{$cursor} {
|
|
||||||
cursor: $cursor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $direction in (top, right, bottom, left) {
|
|
||||||
.#{$direction}-0 {
|
|
||||||
#{$direction}: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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} {
|
|
||||||
font-size: $length !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-column-#{$size} {
|
|
||||||
column-count: $size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-column-#{$grid-breakpoint}-#{$size} {
|
|
||||||
column-count: $size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Crea una propiedad con prefijos de navegador
|
|
||||||
*/
|
|
||||||
@mixin vendor-prefix($property, $definition...) {
|
|
||||||
@each $prefix in $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});
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-#{$color} {
|
|
||||||
scrollbar-color: var(--#{$color}) transparent;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-#{$color} {
|
|
||||||
border-color: var(--#{$color}) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-bg-#{$color} {
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-#{$color} {
|
|
||||||
&:hover {
|
|
||||||
color: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$color} {
|
|
||||||
color: var(--#{$color});
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: var(--#{$color});
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection,
|
|
||||||
::selection {
|
|
||||||
background: var(--#{$color});
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
* {
|
|
||||||
fill: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
border-color: var(--#{$color});
|
|
||||||
color: var(--#{$color});
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border-color: var(--#{$color});
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue