-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuttons.import.less
134 lines (101 loc) · 4.37 KB
/
buttons.import.less
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
:root {
--button-light-text: var(--lighter);
--button-dark-text: var(--darker);
}
.button {
font-size: 12pt;
color: var(--dark);
background-color: var(--neutral-lighter);
border: 2px solid var(--neutral-light);
border-radius: 5px;
font-weight: 600;
text-decoration: none;
min-width: 42px;
min-height: 42px;
cursor: pointer;
padding: 4px 8px;
&:hover {
opacity: 0.8;
}
&-positive {
background-color: var(--positive); color: var(--button-light-text);
border: 2px solid var(--positive);
&-lighter { background-color: var(--positive-lighter); color: var(--button-dark-text); }
&-light { background-color: var(--positive-light); color: var(--button-dark-text); }
&-dark { background-color: var(--positive-dark); color: var(--button-light-text); }
&-darker { background-color: var(--positive-darker); color: var(--button-light-text); }
&-ghost {
background-color: var(--lighter);
color: var(--positive);
}
&-transparent {
background-color: transparent;
}
}
&-balanced {
background-color: var(--balanced); color: var(--button-light-text);
border: 2px solid var(--balanced);
&-lighter { background-color: var(--balanced-lighter); color: var(--button-dark-text); }
&-light { background-color: var(--balanced-light); color: var(--button-dark-text); }
&-dark { background-color: var(--balanced-dark); color: var(--button-light-text); }
&-darker { background-color: var(--balanced-darker); color: var(--button-light-text); }
&-ghost {
color: var(--balanced);
background-color: var(--lighter);
}
&-transparent {background-color: transparent;}
}
&-assertive {
background-color: var(--assertive); color: var(--button-light-text);
border: 2px solid var(--assertive);
&-lighter { background-color: var(--assertive-lighter); color: var(--button-dark-text); }
&-light { background-color: var(--assertive-light); color: var(--button-dark-text); }
&-dark { background-color: var(--assertive-dark); color: var(--button-light-text); }
&-darker { background-color: var(--assertive-darker); color: var(--button-light-text); }
&-ghost {
color: var(--assertive);
background-color: var(--lighter);
}
&-transparent {background-color: transparent;}
}
&-energized {
background-color: var(--energized); color: var(--button-dark-text);
border: 2px solid var(--energized);
&-lighter { background-color: var(--energized-lighter); color: var(--button-dark-text); }
&-light { background-color: var(--energized-light); color: var(--button-dark-text); }
&-dark { background-color: var(--energized-dark); color: var(--button-light-text); }
&-darker { background-color: var(--energized-darker); color: var(--button-light-text); }
&-ghost {
color: var(--energized);
background-color: var(--lighter);
}
&-transparent {background-color: transparent;}
}
&-juicy {
background-color: var(--juicy); color: var(--button-light-text);
border: 2px solid var(--juicy);
&-lighter { background-color: var(--juicy-lighter); color: var(--button-dark-text); }
&-light { background-color: var(--juicy-light); color: var(--button-dark-text); }
&-dark { background-color: var(--juicy-dark); color: var(--button-light-text); }
&-darker { background-color: var(--juicy-darker); color: var(--button-light-text); }
&-ghost {
color: var(--juicy);
background-color: var(--lighter);
}
&-transparent {background-color: transparent;}
}
&-neutral {
background-color: var(--neutral); color: var(--button-light-text);
border: 2px solid var(--neutral);
&-lighter { background-color: var(--neutral-lighter); color: var(--button-dark-text); }
&-light { background-color: var(--neutral-light); color: var(--button-dark-text); }
&-dark { background-color: var(--neutral-dark); color: var(--button-light-text); }
&-darker { background-color: var(--neutral-darker); color: var(--button-light-text); }
&-ghost {
color: var(--neutral);
background-color: var(--lighter);
}
&-transparent {background-color: transparent;}
}
&-padded {padding: 8px 16px;}
}