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 "editor";
|
||||
@import "helpers";
|
||||
|
||||
:root {
|
||||
--foreground: #{$black};
|
||||
|
|
@ -293,3 +292,191 @@ svg {
|
|||
.vh-100 {
|
||||
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