Mercurial > wikked
comparison static/bootstrap/less/modals.less @ 61:130eccd396d8
Now using Boostrap with LESS.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Wed, 06 Feb 2013 08:22:31 -0800 |
parents | |
children | d29e2f337b00 |
comparison
equal
deleted
inserted
replaced
60:8250c977bc50 | 61:130eccd396d8 |
---|---|
1 // | |
2 // Modals | |
3 // -------------------------------------------------- | |
4 | |
5 // Background | |
6 .modal-backdrop { | |
7 position: fixed; | |
8 top: 0; | |
9 right: 0; | |
10 bottom: 0; | |
11 left: 0; | |
12 z-index: @zindexModalBackdrop; | |
13 background-color: @black; | |
14 // Fade for backdrop | |
15 &.fade { opacity: 0; } | |
16 } | |
17 | |
18 .modal-backdrop, | |
19 .modal-backdrop.fade.in { | |
20 .opacity(80); | |
21 } | |
22 | |
23 // Base modal | |
24 .modal { | |
25 position: fixed; | |
26 top: 10%; | |
27 left: 50%; | |
28 z-index: @zindexModal; | |
29 width: 560px; | |
30 margin-left: -280px; | |
31 background-color: @white; | |
32 border: 1px solid #999; | |
33 border: 1px solid rgba(0,0,0,.3); | |
34 *border: 1px solid #999; /* IE6-7 */ | |
35 .border-radius(6px); | |
36 .box-shadow(0 3px 7px rgba(0,0,0,0.3)); | |
37 .background-clip(padding-box); | |
38 // Remove focus outline from opened modal | |
39 outline: none; | |
40 | |
41 &.fade { | |
42 .transition(e('opacity .3s linear, top .3s ease-out')); | |
43 top: -25%; | |
44 } | |
45 &.fade.in { top: 10%; } | |
46 } | |
47 .modal-header { | |
48 padding: 9px 15px; | |
49 border-bottom: 1px solid #eee; | |
50 // Close icon | |
51 .close { margin-top: 2px; } | |
52 // Heading | |
53 h3 { | |
54 margin: 0; | |
55 line-height: 30px; | |
56 } | |
57 } | |
58 | |
59 // Body (where all modal content resides) | |
60 .modal-body { | |
61 position: relative; | |
62 overflow-y: auto; | |
63 max-height: 400px; | |
64 padding: 15px; | |
65 } | |
66 // Remove bottom margin if need be | |
67 .modal-form { | |
68 margin-bottom: 0; | |
69 } | |
70 | |
71 // Footer (for actions) | |
72 .modal-footer { | |
73 padding: 14px 15px 15px; | |
74 margin-bottom: 0; | |
75 text-align: right; // right align buttons | |
76 background-color: #f5f5f5; | |
77 border-top: 1px solid #ddd; | |
78 .border-radius(0 0 6px 6px); | |
79 .box-shadow(inset 0 1px 0 @white); | |
80 .clearfix(); // clear it in case folks use .pull-* classes on buttons | |
81 | |
82 // Properly space out buttons | |
83 .btn + .btn { | |
84 margin-left: 5px; | |
85 margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs | |
86 } | |
87 // but override that for button groups | |
88 .btn-group .btn + .btn { | |
89 margin-left: -1px; | |
90 } | |
91 // and override it for block buttons as well | |
92 .btn-block + .btn-block { | |
93 margin-left: 0; | |
94 } | |
95 } |