hjg
2023-11-18 bb48edb3d9faaaeab0088151c86fc24137acdb08
提交 | 用户 | 时间
58d006 1 @label-text: #FFF;
A 2 @label-yellow-text: #996633;
3 @label-light-text: #888;
4
5 //labels & badges
6 .label {
7  border-radius: 0;
8  text-shadow: none;
9  font-weight: normal;
10  color: @label-text;
11
12  display: inline-block;
13
14  background-color: @label-default;// !important;
15
16  &[class*="col-"][class*="arrow"] {
17     min-height:0;
18  }
19 }
20
21
22 @media screen and (-webkit-min-device-pixel-ratio:0) { 
23     //default display:none causes problems with Android Webview
24     ::safari-only,.label:empty {
25         display: inline-block;
26     }
27     ::safari-only,.badge:empty {
28         display: inline-block;
29     }
30 }
31
32
33
34
35 .badge {
36  text-shadow: none;
37  font-size: @font-size-badge;
38  padding-top: 1px;
39  padding-bottom: 3px;
40  font-weight: normal;
41  line-height: 15px;
42  background-color: @label-default;//!important;
43  
44  &.no-radius { border-radius: 0; }
45  &.radius-1 { border-radius: 1px; }
46  &.radius-2 { border-radius: 2px; }
47  &.radius-3 { border-radius: 3px; }
48  &.radius-4 { border-radius: 4px; }
49  &.radius-5 { border-radius: 5px; }
50  &.radius-6 { border-radius: 6px; }
51 }
52 .label.label-transparent, .label-transparent, .badge.badge-transparent, .badge-transparent {
53     background-color: transparent;//!important;
54 }
55
56
57
58 .enable_label_colors() when(@enable-label-colors = true) {
59
60 //labels
61 .label-color(@color) {
62   @label-class:~`"label-@{color}"`;
63   @badge-class:~`"badge-@{color}"`;
64   @label-color:@@label-class;
65
66  .@{label-class}, .label.@{label-class}, .badge.@{badge-class}, .@{badge-class} {
67     background-color:@label-color;//!important;
68  }
69 }
70
71
72 .label-color(~"grey");
73 .label-color(~"info");
74 .label-color(~"primary");
75 .label-color(~"success");
76 .label-color(~"danger");
77 .label-color(~"important");
78 .label-color(~"inverse");
79 .label-color(~"warning");
80 .label-color(~"pink");
81 .label-color(~"purple");
82 .label-color(~"yellow");
83 .label-color(~"light");
84
85
86 .badge-yellow, .label-yellow {
87     color: @label-yellow-text;// !important;
88     border-color: @label-yellow;
89 }
90 .badge-light, .label-light {
91     color: @label-light-text;// !important;
92 }
93
94
95
96 .label.arrowed , .label.arrowed-in {
97  position:relative;
98  z-index: 1;
99  &:before {
100     display: inline-block;
101     content: "";
102     position: absolute;
103     top: 0;
104     z-index: -1;
105     
106     border: 1px solid transparent;
107
108     border-right-color: @label-default;
109     -moz-border-right-colors: @label-default;
110  }
111 }
112 .label.arrowed-in:before {
113     border-color: @label-default;
114     border-left-color: transparent;
115     -moz-border-left-colors: none;
116 }
117
118
119 .label.arrowed-right , .label.arrowed-in-right {
120  position: relative;
121  z-index: 1;
122  &:after {
123     display: inline-block;
124     content: "";
125     position: absolute;
126     top: 0;
127     z-index: -1;
128     
129     border: 1px solid transparent;
130
131     border-left-color: @label-default;
132     -moz-border-left-colors: @label-default;
133  }
134 }
135 .label.arrowed-in-right:after {
136     border-color: @label-default;
137     border-right-color: transparent;
138     -moz-border-right-colors: none;
139 }
140
141
142
143 .label-arrow(@color) {
144    @label-class:~`"label-@{color}"`;
145    @label-color:@@label-class;
146
147   .@{label-class}{
148     &.arrowed:before {
149         border-right-color: @label-color;
150         -moz-border-right-colors: @label-color;
151     }
152     &.arrowed-in:before {
153         border-color: @label-color @label-color @label-color transparent;
154         -moz-border-right-colors: @label-color;
155     }
156     
157     &.arrowed-right:after {
158         border-left-color: @label-color;
159         -moz-border-left-colors: @label-color;
160     }
161     &.arrowed-in-right:after {
162         border-color: @label-color transparent @label-color @label-color;
163         -moz-border-left-colors: @label-color;
164     }
165   }
166 }
167 .label-arrow(~"info");
168 .label-arrow(~"primary");
169 .label-arrow(~"success");
170 .label-arrow(~"warning");
171 .label-arrow(~"important");
172 .label-arrow(~"danger");
173 .label-arrow(~"inverse");
174 .label-arrow(~"pink");
175 .label-arrow(~"purple");
176 .label-arrow(~"yellow");
177 .label-arrow(~"light");
178 .label-arrow(~"grey");
179
180
181
182
183 .label {
184  .label-size(12px, 1.15, 20px, 10px, 5px);
185 }
186 .label-lg {
187   padding:0.3em 0.6em 0.4em;
188  .label-size(13px, 1.1, 24px, 12px, 6px);
189 }
190 .label-xlg {
191   padding:0.3em 0.7em 0.4em;
192  .label-size(14px, 1.3, 28px, 14px, 7px);
193 }
194 .label-sm {
195   padding:0.2em 0.4em 0.3em;
196  .label-size(11px, 1, 18px, 9px, 4px);
197 }
198 .label > span , .label > .@{icon} {
199  line-height: 1;
200  vertical-align: bottom;
201 }
202
203
204 .label-size(@font-size, @line-height, @height, @border-height, @border-width) {
205   font-size: @font-size;
206   line-height: @line-height;
207   height: @height;
208   
209   &.arrowed {
210     margin-left: @border-width;
211     &:before {
212         left: -(@border-width * 2);
213         border-width: @border-height @border-width;
214     }
215   }
216   &.arrowed-in {
217     margin-left: (@border-width);
218     &:before {
219         left: -@border-width;
220         border-width: @border-height @border-width;
221     }
222   }
223
224   &.arrowed-right {
225     margin-right: @border-width;
226     &:after {
227         right: -(@border-width * 2);
228         border-width: @border-height @border-width;
229     }
230   }
231   &.arrowed-in-right {
232     margin-right: (@border-width);
233     &:after {
234         right: -@border-width;
235         border-width: @border-height @border-width;
236     }
237   }
238 }
239
240
241
242
243
244
245 .enable_label_white_colors() when(@enable-label-white-colors = true) {
246 .label.label-white {
247   color: darken(@label-default, 12%);
248   border:1px solid @label-default;
249   background-color: lighten(@label-default, 24%);// !important;
250   
251   border-right-width: 1px;
252   border-left-width: 2px;
253 }
254
255 .label-white(@txt-color, @border-color, @bg-hover-color) {
256   color: @txt-color;
257   border-color: @border-color;
258   background-color: @bg-hover-color;// !important;
259 }
260
261 .label-white.label-success {
262   .label-white(desaturate(darken(@label-success , 4%) , 8%), desaturate(lighten(@label-success , 10%), 2%) , desaturate(lighten(@label-success , 37.5%), 0%));
263 }
264 .label-white.label-warning {
265   .label-white(desaturate(lighten(@label-warning , 5%), 28%), desaturate(lighten(@label-warning , 14%), 25%) , desaturate(lighten(@label-warning , 46%), 5%));
266 }
267 .label-white.label-primary {
268   .label-white(desaturate(@label-primary , 30%), desaturate(lighten(@label-primary , 15%), 15%) , desaturate(lighten(@label-primary , 42%), 6%));
269 }
270 .label-white.label-danger {
271   .label-white(desaturate(lighten(@label-danger, 5%) , 25%), desaturate(lighten(@label-danger , 10%), 10%) , desaturate(lighten(@label-danger , 42%), 1%));
272 }
273 .label-white.label-info {
274   .label-white(desaturate(darken(@label-info, 2%) , 20%), desaturate(lighten(@label-info , 14%), 22%) , desaturate(lighten(@label-info , 49%), 6%));
275 }
276 .label-white.label-inverse {
277   .label-white(lighten(@label-inverse, 5%), lighten(@label-inverse , 25%) , lighten(@label-inverse , 73%));
278 }
279 .label-white.label-pink {
280   .label-white(desaturate(@label-pink , 35%), desaturate(lighten(@label-pink , 15%), 25%) , desaturate(lighten(@label-pink , 40%), 5%));
281 }
282 .label-white.label-purple {
283   .label-white(darken(desaturate(@label-purple , 10%) , 10%), desaturate(lighten(@label-purple , 10%), 15%) , desaturate(lighten(@label-purple , 31%), 5%));
284 }
285 .label-white.label-yellow {
286   .label-white(darken(desaturate(@label-yellow , 16%) , 32%), desaturate(darken(@label-yellow, 5%), 25%) , desaturate(lighten(@label-yellow , 18%), 10%));
287 }
288 .label-white.label-grey {
289   .label-white(darken(@label-grey , 10%), lighten(@label-grey , 18%) , lighten(@label-grey , 30%));
290 }
291 }
292 .enable_label_white_colors();
293
294
295
296
297
298 //fix zooming of arrowed labels
299 .label:not(.label-lg):not(.label-xlg):not(.label-sm) {
300
301
302 @media
303 screen and (-webkit-min-device-pixel-ratio: 1.08) and (-webkit-max-device-pixel-ratio: 1.15),
304 screen and (min--moz-device-pixel-ratio: 1.08) and (max--moz-device-pixel-ratio: 1.15)
305 {
306
307      &.arrowed:before {
308         border-width: 10.5px 6px 11px;
309         left: -11px;
310     }
311     &.arrowed-right:after {
312         border-width: 10.5px 6px 11px;
313         right: -11px;
314     }
315
316     &.arrowed-in:before {
317         border-width: 10.5px 5px 11px;
318         left: -6px;
319     }
320     &.arrowed-in-right:after {
321         border-width: 10.5px 5px 11px;
322         right: -6px;
323     }
324 }
325
326
327 @media
328 screen and (-webkit-min-device-pixel-ratio: 1.2) and (-webkit-max-device-pixel-ratio: 1.45),
329 screen and (min--moz-device-pixel-ratio: 1.2) and (max--moz-device-pixel-ratio: 1.45),
330 screen and (-webkit-min-device-pixel-ratio: 1.6) and (-webkit-max-device-pixel-ratio: 1.9),
331 screen and (min--moz-device-pixel-ratio: 1.6) and (max--moz-device-pixel-ratio: 1.9)
332 {
333
334      &.arrowed:before {
335         border-width: 10.5px 6px;
336         left: -11px;
337     }
338     &.arrowed-right:after {
339         border-width: 10.5px 6px;
340         right: -11px;
341     }
342
343     &.arrowed-in:before {
344         border-width: 10.5px 5px 10px;
345         left: -6px;
346     }
347     &.arrowed-in-right:after {
348         border-width: 10.5px 5px 10px;
349         right: -6px;
350     }
351 }
352
353
354 @media
355 screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.6),
356 screen and (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 1.6)
357 {
358      &.arrowed:before {
359         border-width: 10px 6px;
360         left: -12px;
361     }
362     &.arrowed-right:after {
363         border-width: 10px 6px;
364         right: -12px;
365     }
366 }
367
368 @media
369 screen and (-webkit-min-device-pixel-ratio: 1.7) and (-webkit-max-device-pixel-ratio: 1.8),
370 screen and (min--moz-device-pixel-ratio: 1.7) and (max--moz-device-pixel-ratio: 1.8)
371 {
372      &.arrowed:before {
373         border-width: 10px 6px;
374         left: -11.5px;
375     }
376     &.arrowed-right:after {
377         border-width: 10px 6px;
378         right: -11.5px;
379     }
380
381     &.arrowed-in:before {
382         border-width: 10px 5px;
383         left: -6px;
384     }
385     &.arrowed-in-right:after {
386         border-width: 10px 5px;
387         right: -6px;
388     }
389 }
390
391 @media
392 screen and (-webkit-min-device-pixel-ratio: 0.8) and (-webkit-max-device-pixel-ratio: 0.9),
393 screen and (min--moz-device-pixel-ratio: 0.8) and (max--moz-device-pixel-ratio: 0.9)
394 {
395      &.arrowed:before {
396         border-width: 11px 6px;
397         left: -11.5px;
398     }
399     &.arrowed-right:after {
400         border-width: 11px 6px;
401         right: -11.5px;
402     }
403
404     &.arrowed-in:before {
405         border-width: 11px 5px;
406         left: -6px;
407     }
408     &.arrowed-in-right:after {
409         border-width: 11px 5px;
410         right: -6px;
411     }
412 }
413
414 }//.label:not(.label-lg)
415
416
417 .label-lg {
418 @media
419 screen and (-webkit-min-device-pixel-ratio: 1.08) and (-webkit-max-device-pixel-ratio: 1.15),
420 screen and (min--moz-device-pixel-ratio: 1.08) and (max--moz-device-pixel-ratio: 1.15)
421 {
422      &.arrowed:before {
423         left: -11px;
424     }
425     &.arrowed-right:after {
426         right: -11px;
427     }
428 }
429
430 @media
431 screen and (-webkit-min-device-pixel-ratio: 1.7) and (-webkit-max-device-pixel-ratio: 1.8),
432 screen and (min--moz-device-pixel-ratio: 1.7) and (max--moz-device-pixel-ratio: 1.8)
433 {
434      &.arrowed:before {
435         left: -11.5px;
436     }
437     &.arrowed-right:after {
438         right: -11.5px;
439     }
440
441     &.arrowed-in:before {
442         border-width: 12.5px 6px 12px;
443         left: -6px;
444     }
445     &.arrowed-in-right:after {
446         border-width: 12.5px 6px 12px;
447         right: -6px;
448     }
449 }
450
451
452 }//.label-lg
453
454
455
456 .label-xlg {
457 @media
458 screen and (-webkit-min-device-pixel-ratio: 1.08) and (-webkit-max-device-pixel-ratio: 1.15),
459 screen and (min--moz-device-pixel-ratio: 1.08) and (max--moz-device-pixel-ratio: 1.15)
460 {
461      &.arrowed:before {
462         left: -13px;
463     }
464     &.arrowed-right:after {
465         right: -13px;
466     }
467     &.arrowed-in:before {
468         border-width: 14px 7px 14.5px;
469     }
470     &.arrowed-in-right:after {
471         border-width: 14px 7px 14.5px;
472     }
473 }
474
475 @media
476 screen and (-webkit-min-device-pixel-ratio: 1.2) and (-webkit-max-device-pixel-ratio: 1.3),
477 screen and (min--moz-device-pixel-ratio: 1.2) and (max--moz-device-pixel-ratio: 1.3)
478 {
479      &.arrowed:before {
480         border-width: 14.5px 7px;
481         left: -13.5px;
482     }
483     &.arrowed-right:after {
484         border-width: 14.5px 7px;
485         right: -13.5px;
486     }
487     &.arrowed-in:before {
488         border-width: 14.5px 7px 14.5px;
489     }
490     &.arrowed-in-right:after {
491         border-width: 14.5px 7px 14.5px;
492     }
493 }
494
495
496 @media
497 screen and (-webkit-min-device-pixel-ratio: 1.3) and (-webkit-max-device-pixel-ratio: 1.4),
498 screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.6),
499 screen and (min--moz-device-pixel-ratio: 1.3) and (max--moz-device-pixel-ratio: 1.4),
500 screen and (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 1.6)
501 {
502      &.arrowed:before {
503         border-width: 14.5px 7.5px;
504         left: -14.5px;
505     }
506     &.arrowed-right:after {
507         border-width: 14.5px 7.5px;
508         right: -14.5px;
509     }
510     &.arrowed-in:before {
511         border-width: 14.5px 7px;
512     }
513     &.arrowed-in-right:after {
514         border-width: 14.5px 7px;
515     }
516 }
517
518 }//.label-xlg
519
520
521
522 .label-sm {
523 @media
524 screen and (-webkit-min-device-pixel-ratio: 1.08) and (-webkit-max-device-pixel-ratio: 1.15),
525 screen and (min--moz-device-pixel-ratio: 1.08) and (max--moz-device-pixel-ratio: 1.15)
526 {
527      &.arrowed:before {
528         border-width: 9px 5px;
529         left: -9px;
530     }
531     &.arrowed-right:after {
532         border-width: 9px 5px;
533         right: -9px;
534     }
535     &.arrowed-in:before {
536         border-width: 10px 4px;
537     }
538     &.arrowed-in-right:after {
539         border-width: 10px 4px;
540     }
541 }
542
543
544 @media
545 screen and (-webkit-min-device-pixel-ratio: 1.2) and (-webkit-max-device-pixel-ratio: 1.3),
546 screen and (min--moz-device-pixel-ratio: 1.2) and (max--moz-device-pixel-ratio: 1.3)
547 {
548      &.arrowed:before {
549         border-width: 9.5px 5px;
550         left: -10px;
551     }
552     &.arrowed-right:after {
553         border-width: 9.5px 5px;
554         right: -10px;
555     }
556     &.arrowed-in:before {
557         border-width: 9.5px 4px;
558     }
559     &.arrowed-in-right:after {
560         border-width: 9.5px 4px;
561     }
562 }
563
564
565 }//.label-sm
566
567
568
569
570 }
571 .enable_label_colors();