1
|
// colors
|
2
|
@text_primary_color: #212121;
|
3
|
@text_secondary_color: #727272;
|
4
|
@text_muted: #aaa;
|
5
|
@site_background: #fff;
|
6
|
|
7
|
@border_color: rgba(0,0,0,0.12);
|
8
|
@border_color_hex: #e0e0e0;
|
9
|
@border_color_light: rgba(0,0,0,0.08);
|
10
|
@background_color_default: rgba(0,0,0,0.085);
|
11
|
@background_color_default_hex: #ededed;
|
12
|
@hover_bg: #f5f5f5;
|
13
|
|
14
|
@white: #fff;
|
15
|
|
16
|
@danger_color: @md-color-red-600;
|
17
|
@primary_color: @md-color-blue-500;
|
18
|
@primary_color_dark: @md-color-blue-700;
|
19
|
@success_color: @md-color-light-green-600;
|
20
|
@warning_color: @md-color-amber-700;
|
21
|
@muted_color: @md-color-grey-400;
|
22
|
|
23
|
// theme
|
24
|
@theme_primary_color: @md-color-blue-500;
|
25
|
@theme_light_color: @md-color-blue-50;
|
26
|
@theme_dark_color: @md-color-blue-700;
|
27
|
@accent_color: @md-color-light-green-600;
|
28
|
|
29
|
/* md buttons */
|
30
|
@hover_btn: rgba(153,153,153,0.2);
|
31
|
@active_btn: rgba(153,153,153,0.4);
|
32
|
|
33
|
// input colors
|
34
|
@input_on_color: @md-color-teal-500;
|
35
|
@input_off_color: rgba(0,0,0,.54);
|
36
|
@input_disabled_color: rgba(0,0,0,.26);
|
37
|
@input_disabled_color_hex: #bdbdbd;
|
38
|
|
39
|
// swiftOut easing
|
40
|
@md_easing: cubic-bezier(0.4,0,0.2,1);
|
41
|
|
42
|
// main header
|
43
|
@header_main_height: 64px;
|
44
|
@header_main_mobile_height: 48px;
|
45
|
@header_main_height_double: (@header_main_height*2)+10;
|
46
|
@header_main_zIndex: 1104;
|
47
|
|
48
|
// top bar
|
49
|
@top_bar_height: 40px;
|
50
|
|
51
|
// main sidebar
|
52
|
@sidebar_main_width: 240px;
|
53
|
@sidebar_main_width_mini: 60px;
|
54
|
|
55
|
// secondary sidebar
|
56
|
@sidebar_secondary_width: 280px;
|
57
|
|
58
|
// media queries
|
59
|
@screen_xlarge: ~"only screen and (min-width: 1220px)";
|
60
|
@screen_large: ~"only screen and (min-width: 960px)";
|
61
|
@screen_medium: ~"only screen and (min-width: 768px)";
|
62
|
@screen_small: ~"only screen and (min-width: 480px)";
|
63
|
|
64
|
@screen_xlarge_max: ~"only screen and (max-width: 1219px)";
|
65
|
@screen_large_max: ~"only screen and (max-width: 959px)";
|
66
|
@screen_medium_max: ~"only screen and (max-width: 767px)";
|
67
|
@screen_small_max: ~"only screen and (max-width: 479px)";
|
68
|
|
69
|
// box-sizing: border-box (this and all childrens)
|
70
|
.border-box() {
|
71
|
&,
|
72
|
&:before,
|
73
|
&:after,
|
74
|
*,
|
75
|
*:before,
|
76
|
*:after {
|
77
|
box-sizing: border-box;
|
78
|
}
|
79
|
}
|
80
|
|
81
|
// Retina background-image support with non-retina fall back
|
82
|
.retina_image(@file-1x, @file-2x, @width-1x, @height-1x) {
|
83
|
background-image: url("@{file-1x}");
|
84
|
background-repeat: no-repeat;
|
85
|
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
86
|
only screen and ( min--moz-device-pixel-ratio: 2),
|
87
|
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
88
|
only screen and ( min-device-pixel-ratio: 2),
|
89
|
only screen and ( min-resolution: 192dppx),
|
90
|
only screen and ( min-resolution: 2dppx) {
|
91
|
background-image: url("@{file-2x}");
|
92
|
background-size: @width-1x @height-1x;
|
93
|
}
|
94
|
}
|
95
|
|
96
|
// remove default styles for ordered/unordered list
|
97
|
.reset_list(@margin: 0, @padding: 0) {
|
98
|
margin: @margin;
|
99
|
padding: @padding;
|
100
|
list-style: none;
|
101
|
> li {
|
102
|
padding: 0;
|
103
|
margin: 0;
|
104
|
list-style: none;
|
105
|
}
|
106
|
}
|
107
|
|
108
|
// clearfix
|
109
|
.clearfix() {
|
110
|
&:before,
|
111
|
&:after {
|
112
|
content: " ";
|
113
|
display: table;
|
114
|
}
|
115
|
&:after {
|
116
|
clear: both;
|
117
|
}
|
118
|
}
|
119
|
|
120
|
// custom fonts
|
121
|
.md_font(@weight: 400, @size: 14px, @height: 20px) {
|
122
|
font: @weight @size e('/') @height "Roboto", sans-serif;
|
123
|
}
|
124
|
.code_font(@weight: 400, @size: 14px, @height: 18px) {
|
125
|
font: @weight @size e('/') @height "Source Code Pro",Consolas, Monaco, 'Andale Mono', monospace !important;
|
126
|
}
|
127
|
|
128
|
.md_font_family() {
|
129
|
font-family: "Roboto", sans-serif;
|
130
|
}
|
131
|
|
132
|
// text truncate
|
133
|
.truncate_line(@width: 100%) {
|
134
|
text-overflow: ellipsis;
|
135
|
display: inline-block;
|
136
|
vertical-align: top;
|
137
|
white-space: nowrap;
|
138
|
overflow: hidden;
|
139
|
width: @width;
|
140
|
}
|