-
Notifications
You must be signed in to change notification settings - Fork 1
/
btn.less
48 lines (46 loc) · 1.04 KB
/
btn.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
/**
* @name Buttons
* @description This is an ordinary button.
*
* @state btn-hover - The hover state
* @state btn-active - The active state
* @state btn-disabled - The disabled state
*
* @type success - a success button
* @type warning - used for cautions actions
* @type danger - used for dangerous actions
*/
.btn-states(@textColor, @bgColor) {
color: @textColor;
background: @bgColor;
&.btn-hover,
&:hover {
background: darken(@bgColor, 10);
}
&.btn-active,
&:active {
background: darken(@bgColor, 20);
}
&.btn-disabled,
&:disabled {
background: greyscale(@bgColor);
cursor: default;
}
}
.btn {
padding: 10px 20px;
text-align: center;
cursor: pointer;
border: none;
border-radius: 5px;
.btn-states(@colorClouds, @colorSky);
&-success {
.btn-states(@colorClouds, @colorEmerald);
}
&-warning {
.btn-states(@colorClouds, @colorOrange);
}
&-danger {
.btn-states(@colorClouds, @colorLava);
}
}