button.variables
2.27 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*******************************
Button
*******************************/
/*-------------------
Element
--------------------*/
@googleFontName : 'Roboto';
@pageFont : 'Roboto', Arial, sans-serif;
@medium: 13px;
@verticalPadding : 0.8em;
@horizontalPadding : 0.8em;
@borderRadius : @relative3px;
@color : #222222;
@fontWeight : normal;
@textTransform : none;
@backgroundColor : @white;
@backgroundImage : linear-gradient(transparent, rgba(0, 0, 0, 0.02));
@solidBorderColor: #DDDDDD;
@borderBoxShadowColor: @solidBorderColor;
@borderBoxShadow: 0px 0px 0px 1px @solidBorderColor inset;
@shadowBoxShadow: 0px 0px 0px 0px transparent;
@transition:
opacity 0.3s @defaultEasing,
background-color 0.3s @defaultEasing,
color 0.3s @defaultEasing,
box-shadow 0.3s @defaultEasing,
background 0.3s @defaultEasing
;
/*-------------------
State
--------------------*/
@hoverBackgroundColor: @white;
@hoverBoxShadow:
@borderBoxShadow,
0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important
;
@downBackgroundColor: @white;
@downBackgroundImage: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
@downTextColor: #222222;
@downBoxShadow: @borderBoxShadow;
@activeBackgroundColor: #F0F0F0;
@activeBoxShadow: 0px 0px 0px 1px #DDDDDD;
/*-------------------
Variations
--------------------*/
/* Basic */
@basicBorderSize: 0px;
@basicBorderRadius: 4px;
@basicColoredBorderSize: 1px;
@basicHoverBackground: @white;
@basicHoverBoxShadow: @hoverBoxShadow;
@basicDownBackground: @white;
@basicDownBoxShadow: @downBoxShadow;
@basicActiveBackground: #FFFFFF;
@basicActiveBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
/* Labeled */
@labeledIconBackgroundColor: transparent;
@labeledIconWidth: 2em;
@labeledLabelBorderOffset: 0px;
/* Colored */
@coloredBackgroundImage : @subtleGradient;
@coloredBoxShadow : 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
/* Primary */
@primaryColor : #4184F3;
@primaryBoxShadow : 0px 0px 0px 1px #0157E4 inset;
/* Secondary */
@secondaryColor : #EEEEEE;
@secondaryBackgroundImage : @backgroundImage;
@secondaryTextColor : @textColor;
@secondaryBoxShadow : @borderBoxShadow;
/* Emotive */
@positiveColor: #3D9400;
@negativeColor: #D34836;
/* Inverted */
@invertedBorderSize: 1px;