153 lines
4.2 KiB
SCSS
153 lines
4.2 KiB
SCSS
$modules: () !default;
|
|
|
|
@mixin exports($name) {
|
|
@if (not index($modules, $name)) {
|
|
$modules: append($modules, $name) !global;
|
|
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@function alpha($color, $amount) {
|
|
@if type-of($color) == "color" {
|
|
@return fade-out($color, (1 - $amount));
|
|
} @else {
|
|
@return unquote("alpha(#{$color}," + $amount + ")");
|
|
}
|
|
}
|
|
|
|
@function shade($color, $amount) {
|
|
@if type-of($color) == "color" {
|
|
@if ($amount > 1) {
|
|
@return lighten($color, ($amount - 1) * lightness($color))
|
|
} @else {
|
|
@return darken($color, (1 - $amount) * lightness($color))
|
|
}
|
|
} @else {
|
|
@return unquote("shade(#{$color}," + $amount + ")");
|
|
}
|
|
}
|
|
|
|
@function mix($color1, $color2, $amount) {
|
|
@return unquote("mix(#{$color1},#{$color2}," + $amount + ")");
|
|
}
|
|
|
|
@function border_focus($color) {
|
|
@return mix($selected_bg_color, $color, .3);
|
|
}
|
|
|
|
@function border_normal($color) {
|
|
@return shade($color, $contrast);
|
|
}
|
|
|
|
@function border_normal_tng($fg, $bg, $base_ratio: .7) {
|
|
@return mix($fg, $bg, $contrast * ($base_ratio + if(lightness($bg) > 66%, 0, if(lightness($bg) > 33%, .1, .3))));
|
|
}
|
|
|
|
@function border_active($color) {
|
|
@return shade($color, ($contrast - .1));
|
|
}
|
|
|
|
@function border_active_tng($fg, $bg, $base_ratio: .7) {
|
|
@return mix($fg, $bg, $contrast * ($base_ratio + if(lightness($bg) > 66%, -.1, if(lightness($bg) > 33%, -.2, -.3))));
|
|
}
|
|
|
|
@function border_insensitive($color) {
|
|
@return shade($color, ($contrast + .05));
|
|
}
|
|
|
|
@function border_insensitive_tng($fg, $bg, $base_ratio: .7) {
|
|
@return mix($fg, $bg, $contrast * ($base_ratio + if(lightness($bg) > 66%, .1, if(lightness($bg) > 33%, .2, .35))));
|
|
}
|
|
|
|
@mixin linear-gradient($color, $direction: to bottom) {
|
|
@if $gradient == 0 {
|
|
background-color: $color;
|
|
background-image: none;
|
|
} @else {
|
|
$amount: $gradient / 2;
|
|
|
|
background-color: $color;
|
|
background-image: linear-gradient($direction,
|
|
shade($color, (1 + $amount)),
|
|
shade($color, (1 - $amount))
|
|
);
|
|
}
|
|
}
|
|
|
|
@mixin half-linear-gradient($color, $direction: to bottom) {
|
|
@if $gradient == 0 {
|
|
background-color: $color;
|
|
background-image: none;
|
|
} @else {
|
|
$amount: $gradient / 4;
|
|
|
|
background-color: $color;
|
|
background-image: linear-gradient($direction,
|
|
shade($color, (1 + $amount)),
|
|
shade($color, (1 - $amount))
|
|
);
|
|
}
|
|
}
|
|
|
|
@mixin border($color) {
|
|
border-color: border_normal($color);
|
|
|
|
&:focus, &:hover { border-color: border_focus($color); }
|
|
|
|
&:active, &:active:hover,
|
|
&:active:focus, &:active:hover:focus,
|
|
&:checked, &:checked:hover,
|
|
&:checked:focus, &:checked:hover:focus { border-color: border_active($color); }
|
|
|
|
&:disabled { border-color: border_insensitive($color); }
|
|
|
|
&:active:disabled, &:checked:disabled { border-color: border_normal($color); }
|
|
}
|
|
|
|
@mixin border_tng($fg, $bg, $base_ratio: .7) {
|
|
border-color: border_normal_tng($fg, $bg, $base_ratio);
|
|
|
|
&:focus, &:hover {
|
|
border-color: border_focus(mix($fg, $bg, $base_ratio));
|
|
}
|
|
|
|
&:active, &:active:hover,
|
|
&:active:focus, &:active:hover:focus,
|
|
&:checked, &:checked:hover,
|
|
&:checked:focus, &:checked:hover:focus {
|
|
border-color: border_active_tng($fg, $bg, $base_ratio);
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: border_insensitive_tng($fg, $bg, $base_ratio);
|
|
}
|
|
|
|
&:active:disabled, &:checked:disabled {
|
|
border-color: border_normal_tng($fg, $bg, $base_ratio);
|
|
}
|
|
}
|
|
|
|
@function _text_shadow_color($tc: $fg_color, $bg: $bg_color) {
|
|
//
|
|
// calculate the color of text shadows
|
|
//
|
|
// $tc is the text color
|
|
// $bg is the background color
|
|
//
|
|
$_lbg: lightness($bg) / 100%;
|
|
|
|
@if lightness($tc) < 50% {
|
|
@return transparentize($white, 1 - $_lbg / ($_lbg * 1.3));
|
|
} @else {
|
|
@return transparentize($black, $_lbg * .8);
|
|
}
|
|
}
|
|
|
|
@function choose_contrast_color($reference, $candidate1, $candidate2) {
|
|
@if abs(lightness($reference) - lightness($candidate1)) > abs(lightness($reference) - lightness($candidate2)) {
|
|
@return $candidate1;
|
|
} @else {
|
|
@return $candidate2;
|
|
}
|
|
}
|