1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
$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_normal($color) {
@return shade($color, $contrast);
}
@function border_focus($color) {
@return if($variant == 'light', mix($selected_bg_color, $color, .3), darken($selected_bg_color, 20%));
}
@function border_active($color) {
@return shade($color, ($contrast - .1));
}
@function border_insensitive($color) {
@return shade($color, ($contrast + .05));
}
@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 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); }
}
@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);
}
}
|
