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 }