Mercurial > wikked

comparison static/bootstrap/less/modals.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents 130eccd396d8
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Modals 2 // Modals
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 // Background 5 // .modal-open - body class for killing the scroll
6 // .modal - container to scroll within
7 // .modal-dialog - positioning shell for the actual modal
8 // .modal-content - actual modal w/ bg and corners and shit
9
10 // Kill the scroll on the body
11 .modal-open {
12 overflow: hidden;
13 }
14
15 // Container that the modal scrolls within
16 .modal {
17 display: none;
18 overflow: auto;
19 overflow-y: scroll;
20 position: fixed;
21 top: 0;
22 right: 0;
23 bottom: 0;
24 left: 0;
25 z-index: @zindex-modal-background;
26
27 // When fading in the modal, animate it to slide down
28 &.fade .modal-dialog {
29 .translate(0, -25%);
30 .transition-transform(~"0.3s ease-out");
31 }
32 &.in .modal-dialog { .translate(0, 0)}
33 }
34
35 // Shell div to position the modal with bottom padding
36 .modal-dialog {
37 position: relative;
38 width: auto;
39 margin: 10px;
40 z-index: (@zindex-modal-background + 10);
41 }
42
43 // Actual modal
44 .modal-content {
45 position: relative;
46 background-color: @modal-content-bg;
47 border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
48 border: 1px solid @modal-content-border-color;
49 border-radius: @border-radius-large;
50 .box-shadow(0 3px 9px rgba(0,0,0,.5));
51 background-clip: padding-box;
52 // Remove focus outline from opened modal
53 outline: none;
54 }
55
56 // Modal background
6 .modal-backdrop { 57 .modal-backdrop {
7 position: fixed; 58 position: fixed;
8 top: 0; 59 top: 0;
9 right: 0; 60 right: 0;
10 bottom: 0; 61 bottom: 0;
11 left: 0; 62 left: 0;
12 z-index: @zindexModalBackdrop; 63 z-index: (@zindex-modal-background - 10);
13 background-color: @black; 64 background-color: @modal-backdrop-bg;
14 // Fade for backdrop 65 // Fade for backdrop
15 &.fade { opacity: 0; } 66 &.fade { .opacity(0); }
67 &.in { .opacity(.5); }
16 } 68 }
17 69
18 .modal-backdrop, 70 // Modal header
19 .modal-backdrop.fade.in { 71 // Top section of the modal w/ title and dismiss
20 .opacity(80); 72 .modal-header {
73 padding: @modal-title-padding;
74 border-bottom: 1px solid @modal-header-border-color;
75 min-height: (@modal-title-padding + @modal-title-line-height);
76 }
77 // Close icon
78 .modal-header .close {
79 margin-top: -2px;
21 } 80 }
22 81
23 // Base modal 82 // Title text within header
24 .modal { 83 .modal-title {
25 position: fixed; 84 margin: 0;
26 top: 10%; 85 line-height: @modal-title-line-height;
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 } 86 }
58 87
59 // Body (where all modal content resides) 88 // Modal body
89 // Where all modal content resides (sibling of .modal-header and .modal-footer)
60 .modal-body { 90 .modal-body {
61 position: relative; 91 position: relative;
62 overflow-y: auto; 92 padding: @modal-inner-padding;
63 max-height: 400px;
64 padding: 15px;
65 }
66 // Remove bottom margin if need be
67 .modal-form {
68 margin-bottom: 0;
69 } 93 }
70 94
71 // Footer (for actions) 95 // Footer (for actions)
72 .modal-footer { 96 .modal-footer {
73 padding: 14px 15px 15px; 97 margin-top: 15px;
74 margin-bottom: 0; 98 padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
75 text-align: right; // right align buttons 99 text-align: right; // right align buttons
76 background-color: #f5f5f5; 100 border-top: 1px solid @modal-footer-border-color;
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 101 .clearfix(); // clear it in case folks use .pull-* classes on buttons
81 102
82 // Properly space out buttons 103 // Properly space out buttons
83 .btn + .btn { 104 .btn + .btn {
84 margin-left: 5px; 105 margin-left: 5px;
91 // and override it for block buttons as well 112 // and override it for block buttons as well
92 .btn-block + .btn-block { 113 .btn-block + .btn-block {
93 margin-left: 0; 114 margin-left: 0;
94 } 115 }
95 } 116 }
117
118 // Scale up the modal
119 @media screen and (min-width: @screen-sm-min) {
120
121 .modal-dialog {
122 width: 600px;
123 margin: 30px auto;
124 }
125 .modal-content {
126 .box-shadow(0 5px 15px rgba(0,0,0,.5));
127 }
128
129 }