95 lines
2.2 KiB
SCSS
95 lines
2.2 KiB
SCSS
@mixin pixel-text($pixelOffset: 1) {
|
|
text-align: center;
|
|
text-shadow: #{$pixelOffset}px 0 0 $white,
|
|
#{$pixelOffset}px 2px 0 $gscale4,
|
|
0 #{$pixelOffset}px 0 $limeGreen,
|
|
-#{$pixelOffset}px 0 0 $seaBlue,
|
|
0 -#{$pixelOffset}px 0 $pinkyRed;
|
|
text-decoration: none;
|
|
background: linear-gradient(90deg, #a0a0a0 0, #bebebe 46%, #dcdcdc 100%);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
@mixin pixel-text-to-right($pixelOffset: 1) {
|
|
text-align: center;
|
|
text-shadow: -#{$pixelOffset}px 0 0 $white,
|
|
-#{$pixelOffset}px #{$pixelOffset*0.5}px 0 $black,
|
|
#{$pixelOffset*2}px #{$pixelOffset}px 0 $limeGreen,
|
|
#{$pixelOffset*2}px 0 0 $seaBlue,
|
|
#{$pixelOffset*2}px -#{$pixelOffset}px 0 $pinkyRed;
|
|
text-decoration: none;
|
|
background: linear-gradient(90deg, #a0a0a0 0, #bebebe 46%, #dcdcdc 100%);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
@mixin pixel-box($pixelOffset: 1, $whiteColor: $white) {
|
|
box-shadow: #{$pixelOffset}px 0 0 $whiteColor, 0 #{$pixelOffset}px 0 $limeGreen, -#{$pixelOffset}px 0 0 $seaBlue, 0 -#{$pixelOffset}px 0 $pinkyRed;
|
|
}
|
|
|
|
@mixin generate-color-classes($color-map) {
|
|
@each $name, $color in $color-map {
|
|
.#{"#{$name}"} {
|
|
color: $color !important;
|
|
}
|
|
.bg-#{"#{$name}"} {
|
|
background-color: $color !important;;
|
|
}
|
|
.border-#{"#{$name}"} {
|
|
border-color: $color !important;;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin generate-button-classes($color-map) {
|
|
@each $name, $color in $color-map {
|
|
button,
|
|
.btn {
|
|
&.btn-#{"#{$name}"} {
|
|
background: $color;
|
|
box-shadow: 0 2px 0 0 darken($color, 20%);
|
|
|
|
&:hover {
|
|
box-shadow: 0 2px 0 1px darken($color, 20%) inset;
|
|
}
|
|
|
|
&:focus {
|
|
background: darken($color, 20%);
|
|
}
|
|
}
|
|
|
|
&.btn-wire-#{"#{$name}"} {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border: 2px solid $color;
|
|
color: rgba($gscaleF, .8);
|
|
|
|
i.btn-match {
|
|
color: $color;
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba($color, 0.05);
|
|
border-color: darken($color, 10%);
|
|
color: darken($color, 10%);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: darken($color, 20%);
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin generate-alert-classes($color-map) {
|
|
@each $name, $color in $color-map {
|
|
.alert.alert-#{"#{$name}"} {
|
|
color: $color;
|
|
background: rgba($color, .2);
|
|
}
|
|
}
|
|
} |