提交 | 用户 | 时间
|
58d006
|
1 |
//tooltips and popovers |
A |
2 |
|
|
3 |
.enable_tooltips() when(@enable-tooltips = true) { |
|
4 |
|
|
5 |
.tooltip.in { |
|
6 |
.opacity(1); |
|
7 |
} |
|
8 |
|
|
9 |
.tooltip-inner { |
|
10 |
background-color: @tooltip-color; |
|
11 |
color: #FFF; |
|
12 |
font-size: @font-size-tooltip; |
|
13 |
//white-space: nowrap; |
|
14 |
|
|
15 |
text-shadow: 1px 1px 0 rgba(42,45,50,0.5); |
|
16 |
.border-radius(0); |
|
17 |
|
|
18 |
padding: 5px 9px; |
|
19 |
} |
|
20 |
|
|
21 |
.tooltip.top .tooltip-arrow { |
|
22 |
border-bottom-width: 0; |
|
23 |
border-top-color: @tooltip-color; |
|
24 |
-moz-border-top-colors: @tooltip-color; |
|
25 |
} |
|
26 |
.tooltip.right .tooltip-arrow { |
|
27 |
border-left-width: 0; |
|
28 |
border-right-color: @tooltip-color; |
|
29 |
-moz-border-right-colors: @tooltip-color; |
|
30 |
} |
|
31 |
.tooltip.left .tooltip-arrow { |
|
32 |
border-right-width: 0; |
|
33 |
border-left-color: @tooltip-color; |
|
34 |
-moz-border-left-colors: @tooltip-color; |
|
35 |
} |
|
36 |
.tooltip.bottom .tooltip-arrow { |
|
37 |
border-top-width: 0; |
|
38 |
border-bottom-color: @tooltip-color; |
|
39 |
-moz-border-bottom-colors: @tooltip-color; |
|
40 |
} |
|
41 |
|
|
42 |
|
|
43 |
|
|
44 |
.tooltip(@color , @shadow) { |
|
45 |
@tooltip_name : ~`".tooltip-@{color}"`; |
|
46 |
@tooltip_color : ~`"tooltip-@{color}-color"`; |
|
47 |
|
|
48 |
@{tooltip_name} + .tooltip , .tooltip@{tooltip_name} { |
|
49 |
> .tooltip-inner { |
|
50 |
background-color: @@tooltip_color; |
|
51 |
text-shadow: @shadow; |
|
52 |
} |
|
53 |
&.top .tooltip-arrow { |
|
54 |
border-top-color: @@tooltip_color; |
|
55 |
-moz-border-top-colors: @@tooltip_color; |
|
56 |
} |
|
57 |
&.right .tooltip-arrow { |
|
58 |
border-right-color: @@tooltip_color; |
|
59 |
-moz-border-right-colors: @@tooltip_color; |
|
60 |
} |
|
61 |
&.left .tooltip-arrow { |
|
62 |
border-left-color: @@tooltip_color; |
|
63 |
-moz-border-left-colors: @@tooltip_color; |
|
64 |
} |
|
65 |
&.bottom .tooltip-arrow { |
|
66 |
border-bottom-color: @@tooltip_color; |
|
67 |
-moz-border-bottom-colors: @@tooltip_color; |
|
68 |
} |
|
69 |
} |
|
70 |
} |
|
71 |
|
|
72 |
.tooltip(error , ~"1px 1px 0 rgba(100,60,20,0.3)"); |
|
73 |
.tooltip(success , ~"1px 1px 0 rgba(60,100,20,0.3)"); |
|
74 |
.tooltip(warning , ~"1px 1px 0 rgba(100,90,10,0.3)"); |
|
75 |
.tooltip(info , ~"1px 1px 0 rgba(40,50,100,0.3)"); |
|
76 |
|
|
77 |
} |
|
78 |
.enable_tooltips(); |
|
79 |
|
|
80 |
|
|
81 |
.enable_popovers() when(@enable-popovers = true) { |
|
82 |
@popover-color: #EFF3F8; |
|
83 |
@popover-error-color: #F7F0EF; |
|
84 |
@popover-warning-color: #F4EEE3; |
|
85 |
@popover-success-color: #E8F2E3; |
|
86 |
@popover-info-color: #E5EDF8; |
|
87 |
|
|
88 |
|
|
89 |
/* popover */ |
|
90 |
.popover { |
|
91 |
.border-radius(0); |
|
92 |
padding:0; |
|
93 |
border-color: #ccc; |
|
94 |
border-width: 1px; |
|
95 |
|
|
96 |
.box-shadow(~"0 0 4px 2px rgba(0,0,0,0.2)"); |
|
97 |
//color: #4D6883; |
|
98 |
color: #4D5C73; |
|
99 |
} |
|
100 |
.popover-title { |
|
101 |
border-radius: 0; |
|
102 |
background-color: @popover-color; |
|
103 |
color: #555; |
|
104 |
border-bottom: 1px solid darken(@popover-color, 5%); |
|
105 |
|
|
106 |
text-shadow: 1px 1px 1px rgba(220,220,220,0.2); |
|
107 |
} |
|
108 |
.popover.bottom > .arrow:after { |
|
109 |
top: 1px; |
|
110 |
margin-left: -10px; |
|
111 |
|
|
112 |
border-bottom-color: @popover-color; |
|
113 |
-moz-border-bottom-colors: @popover-color; |
|
114 |
|
|
115 |
border-top-width: 0; |
|
116 |
} |
|
117 |
.popover.left > .arrow:after { |
|
118 |
-moz-border-left-colors: #FFF; |
|
119 |
} |
|
120 |
.popover.right > .arrow:after { |
|
121 |
-moz-border-right-colors: #FFF; |
|
122 |
} |
|
123 |
.popover.top > .arrow:after { |
|
124 |
-moz-border-top-colors: #FFF; |
|
125 |
} |
|
126 |
|
|
127 |
|
|
128 |
.popover(@color , @text-color) { |
|
129 |
@popover_name : ~`".popover-@{color}"`; |
|
130 |
@popover_color : ~`"popover-@{color}-color"`; |
|
131 |
|
|
132 |
@{popover_name} + .popover , .popover@{popover_name} { |
|
133 |
border-color: @@popover_color; |
|
134 |
.popover-title { |
|
135 |
background-color: @@popover_color; |
|
136 |
border-bottom-color: darken(@@popover_color, 5%); |
|
137 |
color: @text-color; |
|
138 |
text-shadow: none; |
|
139 |
} |
|
140 |
|
|
141 |
&.top .arrow:after { |
|
142 |
border-top-color: @@popover_color; |
|
143 |
-moz-border-top-colors: @@popover_color; |
|
144 |
} |
|
145 |
&.bottom .arrow:after { |
|
146 |
border-bottom-color: @@popover_color; |
|
147 |
-moz-border-bottom-colors: @@popover_color; |
|
148 |
} |
|
149 |
&.right .arrow:after { |
|
150 |
border-right-color: @@popover_color; |
|
151 |
-moz-border-right-colors: @@popover_color; |
|
152 |
} |
|
153 |
&.left .arrow:after { |
|
154 |
border-left-color: @@popover_color; |
|
155 |
-moz-border-left-colors: @@popover_color; |
|
156 |
} |
|
157 |
|
|
158 |
} |
|
159 |
} |
|
160 |
|
|
161 |
|
|
162 |
.popover(error , #B75445); |
|
163 |
.popover(warning , #D67E31); |
|
164 |
.popover(success , @tooltip-success-color); |
|
165 |
.popover(info , #3F79B6); |
|
166 |
|
|
167 |
.popover-notitle + .popover , .popover.popover-notitle { |
|
168 |
.popover-title { |
|
169 |
display:none; |
|
170 |
} |
|
171 |
&.top .arrow:after { |
|
172 |
border-top-color: #FFF; |
|
173 |
-moz-border-top-colors: #FFF; |
|
174 |
} |
|
175 |
&.bottom .arrow:after { |
|
176 |
border-bottom-color: #FFF; |
|
177 |
-moz-border-bottom-colors: #FFF; |
|
178 |
} |
|
179 |
&.left .arrow:after { |
|
180 |
border-left-color: #FFF; |
|
181 |
-moz-border-left-colors: #FFF; |
|
182 |
} |
|
183 |
&.right .arrow:after { |
|
184 |
border-right-color: #FFF; |
|
185 |
-moz-border-right-colors: #FFF; |
|
186 |
} |
|
187 |
} |
|
188 |
|
|
189 |
} |
|
190 |
.enable_popovers(); |
|
191 |
|