UNPKG

blexar

Version:

CSS framework to establish your favorite websites in mints, with user experience in mind.

78 lines (70 loc) • 2.07 kB
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
/** * styling mixins */ _icon-color(color) fill: color stroke-width: 0 _button-color(accent, text) border-color: accent background-color: accent color: text _icon-color: text &.is-inverse background-color: transparent color: accent _icon-color: accent &:hover &:active &.is-active border-color: darken(accent, 15%) background-color: darken(accent, 15%) color: text _icon-color: text &:focus box-shadow: 0 0 0 $outline alpha(accent, $outline-opacity) &[disabled] border-color: accent background-color: accent color: text _icon-color: text _textarea-color(primary, secondary = primary) border-color: primary &:focus border-color: darken(secondary, 15%) box-shadow: 0 0 0 $outline alpha(secondary, $outline-opacity) _input-color(primary, secondary = primary) border-color: primary &:focus border-color: darken(secondary, 15%) box-shadow: 0 0 0 $outline alpha(secondary, $outline-opacity) _select-color(primary, secondary = primary) border-color: primary background-image: linear-gradient(45deg, transparent 50%, primary 50%), linear-gradient(135deg, primary 50%, transparent 50%) color: secondary .select-label, .select-item.is-selected, .select-childItem.is-selected background-color: secondary color: $white .select-item:not(.is-group):hover, .select-childItem:hover background-color: darken(secondary, 15%) color: $white &:focus border-color: darken(primary, 15%) box-shadow: 0 0 0 $outline alpha(primary, $outline-opacity) _modal-color(accent, textColor) background-color: lighten(accent, 90%) color: textColor _icon-color: textColor &.is-outline border-color: accent color: accent _icon-color: accent &:focus border-color: darken(accent, 15%) box-shadow: 0 0 0 $outline alpha(accent, $outline-opacity) _label-color(accent, textColor) background-color: accent color: textColor _icon-color: textColor