source: pro-violet-viettel/www/deploy/20150304/assets/css/less/buttons.less @ 780

Last change on this file since 780 was 780, checked in by dungnv, 10 years ago
File size: 9.8 KB
Line 
1/** buttons */
2.btn {
3 display:inline-block;
4
5 color:#FFF !important;
6 text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25) !important;
7
8 background-image:none !important;
9 border:5px solid #FFF;
10 border-radius:0;
11 box-shadow:none !important;
12
13 .transition(~"all ease .15s");
14
15 cursor:pointer;
16
17 vertical-align:middle;
18 margin:0;
19
20 position:relative;
21 
22}
23
24.btn-lg {
25        border-width:5px;
26        line-height: 1.35;
27    padding: 7px 16px;
28}
29.btn-sm {
30        border-width:4px;
31        font-size:13px;
32        padding: 4px 9px;
33        line-height:1.39;
34}
35.btn-xs {
36        border-width:3px;
37}
38.btn-minier {
39        padding: 0 4px;
40        line-height: 18px;
41        border-width: 2px;
42        font-size: 12px;
43}
44
45button.btn:active  {
46        top: 1px;
47        left: 1px;
48}
49
50
51
52
53
54//button color
55.btn-color(@color1, @color2) {
56  & , &:focus {
57        background-color:@color1 !important;
58        border-color:@color1;
59  }
60
61  &:hover , .open &.dropdown-toggle {
62        background-color:@color2 !important;
63        border-color:@color1;
64  }
65  &.no-border:hover {
66        border-color:@color2;
67  }
68  &.no-hover:hover {
69        background-color:@color1 !important;
70  }
71  &.active {
72        background-color: mix(@color1,@color2) !important;
73        border-color: darken(mix(@color1,@color2),7%);
74  }
75  &.no-border.active {
76    background-color: darken(mix(@color1,@color2),3%) !important;
77        border-color: darken(mix(@color1,@color2),3%);
78  }
79  &.disabled, &[disabled], fieldset[disabled] & {
80        &,
81    &:hover,
82    &:focus,
83    &:active,
84    &.active {
85                background-color:@color1 !important;
86                border-color:@color1;
87        }
88  }
89}
90
91.btn-color(@color-name) {
92 @color1-name : ~`"btn-@{color-name}"`;
93 @color2-name : ~`"btn-@{color-name}-hover"`;
94
95 .btn-color(@@color1-name, @@color2-name);
96}
97
98
99.btn , .btn-default {
100        .btn-color(~"default");
101}
102.btn-primary {
103        .btn-color(~"primary");
104}
105.btn-info {
106        .btn-color(~"info");
107}
108.btn-success {
109        .btn-color(~"success");
110}
111.btn-warning {
112        .btn-color(~"warning");
113}
114.btn-danger {
115        .btn-color(~"danger");
116}
117.btn-inverse {
118        .btn-color(~"inverse");
119}
120.btn-pink {
121        .btn-color(~"pink");
122}
123.btn-purple {
124        .btn-color(~"purple");
125}
126.btn-grey {
127 .btn-color(~"grey");
128}
129
130.btn-yellow {
131 .btn-color(~"yellow");
132 color:@btn-yellow-color !important;
133 text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4) !important;
134}
135
136.btn-light {
137 .btn-color(~"light");
138 color:@btn-light-color !important;
139 text-shadow:0 -1px 0 rgba(250, 250, 250, 0.25) !important;
140}
141
142.btn-light.btn-xs:after {
143 left:-2px; right:-2px; top:-2px; bottom:-2px;
144}
145.btn-light.btn-sm:after {
146 left:-4px; right:-4px; top:-4px; bottom:-4px;
147}
148.btn-light.btn-large:after {
149 left:-6px; right:-6px; top:-6px; bottom:-6px;
150}
151
152.btn.btn-white {
153 border-width:1px;
154 border-color:#CCC;
155 color:#444 !important;
156 text-shadow:none !important;
157 background-color:#FFF !important;
158
159 &:hover, &:focus {
160        background-color:#EBEBEB !important;
161 }
162 &.no-border {
163        border-color: #CCC;
164 }
165}
166
167
168.btn.disabled, .btn[disabled] {
169 &.active, &:focus, &:active {
170        outline:none;
171 }
172 &:active {
173        top:0; left:0;
174 }
175}
176
177
178
179/* active buttons */
180.btn.active {
181 color:@btn-active-color;
182 &:after {
183        display:inline-block;
184        content:"";
185        position:absolute;
186        border-bottom:1px solid @btn-active-color;
187        left:-4px; right:-4px; bottom:-4px;
188 }
189 &.btn-sm:after {
190        left:-3px; right:-3px; bottom:-3px;
191        //border-bottom-width:1px;
192 }
193 &.btn-large:after {
194        left:-5px; right:-5px; bottom:-5px;
195        //border-bottom-width:1px;
196 }
197 &.btn-xs:after ,  &.btn-minier:after {
198        left:-1px; right:-1px; bottom:-2px;
199        //border-bottom-width:1px;
200 }
201 &.btn-minier:after {
202        bottom:-1px;
203 }
204 
205  &.btn-yellow:after {
206        border-bottom-color:@btn-yellow-active-border;
207 }
208 &.btn-light { 
209        color:#515151;
210        &:after {
211                border-bottom-color:#B5B5B5;
212        }
213 }
214}
215
216
217
218
219/* icons inside buttons */
220.btn {
221        > [class*="icon-"] {
222                display:inline;
223                margin-right:4px;
224                //min-width:12px;
225               
226                &.icon-on-right {
227                        margin-right:0;
228                        margin-left:4px;
229                }
230        }
231        > .icon-only[class*="icon-"] {
232                margin:0;
233                vertical-align:middle;
234                text-align:center;
235                padding:0;
236                //min-width:24px;
237        }
238}
239
240.btn-large > [class*="icon-"] {
241        margin-right:6px;
242       
243        &.icon-on-right {
244                margin-right:0;
245                margin-left:6px;
246        }
247}
248.btn-sm > [class*="icon-"] {
249        margin-right:3px;
250       
251        &.icon-on-right {
252                margin-right:0;
253                margin-left:3px;
254        }
255}
256.btn-xs > [class*="icon-"] , &.btn-minier > [class*="icon-"] {
257        margin-right:2px;
258
259        &.icon-on-right {
260                margin-right:0;
261                margin-left:2px;
262        }
263}
264
265
266
267
268
269.btn.btn-link {
270  border:none !important;
271  background:transparent none !important;
272  color:@btn-link-color !important;
273  text-shadow:none !important;
274  padding:4px 12px !important;
275  line-height:20px !important;
276 
277 &:hover {
278        background:none !important;
279        text-shadow:none !important;
280 }
281 &.active {
282        background:none !important;
283        text-decoration:underline;
284        color:lighten(@btn-link-color , 6%) !important;
285        &:after {
286                display:none;
287        }
288 }
289 &.disabled , &[disabled]{
290        background:none;
291        .opacity(0.65);
292        &:hover {
293                background:none !important;
294                text-decoration:none !important;
295        }
296 }
297}
298
299.btn.btn-no-border {
300 border-width:0 !important;
301}
302
303
304
305
306
307
308/* button groups */
309.btn-group {
310  > .btn {
311          & , + .btn {
312                 margin:0 1px 0 0;
313          }
314          &:first-child {
315                margin:0 1px 0 0;
316          }
317          &:first-child , &:last-child {
318                border-radius:0;
319          }
320         
321          /* caret inside buttons */
322          > .caret {
323                 margin-top:15px;
324                 margin-left:1px;
325                 border-width:5px;
326                 border-top-color:#FFF;
327          }
328
329         &.btn-sm > .caret {
330                margin-top:10px;
331                border-width:4px;
332         }
333         &.btn-large > .caret {
334                margin-top:18px;
335                border-width:6px;
336         }
337         &.btn-xs > .caret {
338                margin-top:9px;
339                border-width:4px;
340         }
341         &.btn-minier > .caret {
342                margin-top:7px;
343                border-width:3px;
344         }
345         
346         /* dropdown toggle */
347         + .btn.dropdown-toggle {
348                padding-right:3px;
349                padding-left:3px;
350        }
351        + .btn-large.dropdown-toggle {
352                padding-right:4px;
353                padding-left:4px;
354        }
355
356  }
357  .dropdown-toggle {
358        border-radius:0;
359  }
360
361
362
363  .btn-group-active-state(@left, @right, @bottom, @width) {/* the border under an active button in button groups */
364                &.active:after {
365                        left:unit(@left, px); right:unit(@right, px); bottom:unit(@bottom, px);
366                        border-bottom-width:unit(@width, px);
367                }
368  }
369   > .btn  , + .btn{
370                margin:0 1px 0 0;
371                border-width:3px;// !important;
372                .btn-group-active-state(-2, -2, -2, 1);
373   }
374   > .btn-large  , + .btn-large{
375                border-width:4px;// !important;
376                .btn-group-active-state(-3, -3, -3, 1);
377   }
378   > .btn-sm  , + .btn-sm{
379                border-width:2px;// !important;
380                .btn-group-active-state(-1, -1, -1, 1);
381   }
382   > .btn-xs  , + .btn-xs{
383                border-width:1px;// !important;
384                .btn-group-active-state(0, 0, 0, 1);
385   }
386   > .btn-minier  , + .btn-minier{
387                border-width:1px;// !important;
388                .btn-group-active-state(0, 0, 0, 1);
389   }
390}
391
392.btn-group > .btn {
393  border-radius:0 !important;
394}
395.btn-group-vertical > .btn , .btn-group-vertical > .btn + .btn {
396 margin:1px 0 0;
397}
398.btn-group-vertical > .btn:first-child {
399        margin-right:0;
400}
401
402
403
404
405
406
407
408
409
410
411/* application buttons */
412.btn.btn-app {
413 display: inline-block;
414 width: 100px;
415
416 font-size: 18px;
417 font-weight: normal;
418 color: #FFF;
419 
420 text-align: center;
421 text-shadow: 0 -1px -1px rgba(0,0,0,0.2) !important;
422 
423 border: none;
424 border-radius: 12px;
425 
426 padding: 12px 0 8px;
427 margin: 2px;
428 
429 line-height: 1.7;
430
431 position: relative;
432}
433
434
435//button color
436.btn-app-color(@color1, @color2, @percent) {
437  & , &.no-hover:hover , &.disabled:hover {
438        background: average(@color1, @color2) !important;
439        #gradient > .vertical(@color1 , @color2) !important;
440  }
441  &:hover {
442        background: average(darken(@color1,@percent), darken(@color2,@percent)) !important;
443        #gradient > .vertical(darken(@color1,@percent) , darken(@color2,@percent)) !important;
444  }
445}
446
447.btn-app-color(@color-name, @percent:10%) {
448 @color1-name : ~`"btn-app-@{color-name}-1"`;
449 @color2-name : ~`"btn-app-@{color-name}-2"`;
450 
451 .btn-app-color(@@color1-name, @@color2-name , @percent);
452}
453
454.btn-app, .btn-app.btn-default {
455        .btn-app-color(~"default" , 8%);
456}
457.btn-app.btn-primary {
458        .btn-app-color(~"primary");
459}
460.btn-app.btn-info {
461        .btn-app-color(~"info");
462}
463.btn-app.btn-success {
464        .btn-app-color(~"success");
465}
466.btn-app.btn-danger {
467        .btn-app-color(~"danger");
468}
469.btn-app.btn-warning {
470        .btn-app-color(~"warning");
471}
472.btn-app.btn-purple {
473        .btn-app-color(~"purple");
474}
475.btn-app.btn-pink {
476        .btn-app-color(~"pink");
477}
478.btn-app.btn-inverse {
479        .btn-app-color(~"inverse");
480}
481.btn-app.btn-grey {
482        .btn-app-color(~"grey" , 5%);
483}
484
485.btn.btn-app.btn-light {
486 .btn-app-color(~"light" , 5%);
487
488 color: @btn-app-light-color !important;
489 text-shadow: 0 1px 1px #EEE !important;
490}
491
492.btn.btn-app.btn-yellow {
493 .btn-app-color(~"yellow" , 5%);
494 
495 color:@btn-app-yellow-color !important;
496 text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4) !important;
497}
498
499
500.btn.btn-app {
501        &.btn-sm {
502                width:80px;
503                font-size:16px;
504                border-radius:10px ;
505               
506                line-height: 1.5;
507        }
508        &.btn-xs {
509                width:64px;
510                font-size:15px;
511                border-radius:8px;
512                padding-bottom:7px;
513                padding-top:8px;
514               
515                line-height: 1.45;
516        }
517       
518       
519
520   > [class*=icon] {
521                display:block;
522                font-size:42px;
523         
524                margin:0 0 4px;
525                line-height:36px;
526                min-width:0;
527         
528                padding:0;
529   }
530   &.btn-sm > [class*=icon] {
531                display:block;
532                font-size:32px;
533                line-height:30px;
534                margin:0 0 3px;
535        }
536   &.btn-xs > [class*=icon] {
537                display:block;
538                font-size:24px;
539                line-height:24px;
540                margin:0;
541        }
542       
543        &.no-radius {
544                border-radius:0;
545        }
546        &.radius-4 {
547                border-radius:4px;
548        }
549       
550        /* badge & label inside buttons */
551        > .badge , > .label {
552                position:absolute !important;
553                top:-2px; right:-2px;
554                padding:1px 3px;
555                text-align:center;
556                font-size:12px;
557               
558                &.badge-left , &.label-left{
559                        right:auto;
560                        left:-2px;
561                }
562        }
563        > .label {
564                padding:1px 6px 3px;
565                font-size:13px;
566        }
567        &.radius-4 , &.no-radius {
568                > .badge {
569                        border-radius:3px;
570                        &.no-radius {// > .badge.no-radius
571                                border-radius:0;
572                        }
573                }
574        }
575       
576        /* active state */
577        &.active {
578                color:@btn-app-active;
579                &:after {
580                        display:none;
581                }
582                &.btn-yellow {
583                        color:@btn-app-yellow-color;
584                        border-color:@btn-app-yellow-border;
585                }
586                &.btn-light {
587                        color:@btn-app-light-active;
588                }
589        }
590}
591
592
593.btn.btn-app {
594 &.btn-light, &.btn-yellow {
595        .box-shadow(~"0 0 0 1px rgba(0, 0, 0, 0.08) inset") !important;
596 }
597}
598
599
600
Note: See TracBrowser for help on using the repository browser.