/src/honeynet_web/honeywall/static/twitter-bootstrap/less/responsive.less
LESS | 323 lines | 204 code | 49 blank | 70 comment | 0 complexity | b7ea4b057706aa03bd946e23d3722433 MD5 | raw file
Possible License(s): Apache-2.0, LGPL-2.1
1/*!
2 * Bootstrap Responsive v2.0.0
3 *
4 * Copyright 2012 Twitter, Inc
5 * Licensed under the Apache License v2.0
6 * http://www.apache.org/licenses/LICENSE-2.0
7 *
8 * Designed and built with all the love in the world @twitter by @mdo and @fat.
9 */
10
11// Responsive.less
12// For phone and tablet devices
13// -------------------------------------------------------------
14
15
16// REPEAT VARIABLES & MIXINS
17// -------------------------
18// Required since we compile the responsive stuff separately
19
20@import "variables.less"; // Modify this for custom colors, font-sizes, etc
21@import "mixins.less";
22
23
24// RESPONSIVE CLASSES
25// ------------------
26
27// Hide from screenreaders and browsers
28// Credit: HTML5 Boilerplate
29.hidden {
30 display: none;
31 visibility: hidden;
32}
33
34
35
36// UP TO LANDSCAPE PHONE
37// ---------------------
38
39@media (max-width: 480px) {
40
41 // Smooth out the collapsing/expanding nav
42 .nav-collapse {
43 -webkit-transform: translate3d(0, 0, 0); // activate the GPU
44 }
45
46 // Block level the page header small tag for readability
47 .page-header h1 small {
48 display: block;
49 line-height: @baseLineHeight;
50 }
51
52 // Make span* classes full width
53 input[class*="span"],
54 select[class*="span"],
55 textarea[class*="span"],
56 .uneditable-input {
57 display: block;
58 width: 100%;
59 height: 28px; /* Make inputs at least the height of their button counterpart */
60 /* Makes inputs behave like true block-level elements */
61 -webkit-box-sizing: border-box; /* Older Webkit */
62 -moz-box-sizing: border-box; /* Older FF */
63 -ms-box-sizing: border-box; /* IE8 */
64 box-sizing: border-box; /* CSS3 spec*/
65 }
66 // But don't let it screw up prepend/append inputs
67 .input-prepend input[class*="span"],
68 .input-append input[class*="span"] {
69 width: auto;
70 }
71
72 // Update checkboxes for iOS
73 input[type="checkbox"],
74 input[type="radio"] {
75 border: 1px solid #ccc;
76 }
77
78 // Remove the horizontal form styles
79 .form-horizontal .control-group > label {
80 float: none;
81 width: auto;
82 padding-top: 0;
83 text-align: left;
84 }
85 // Move over all input controls and content
86 .form-horizontal .controls {
87 margin-left: 0;
88 }
89 // Move the options list down to align with labels
90 .form-horizontal .control-list {
91 padding-top: 0; // has to be padding because margin collaspes
92 }
93 // Move over buttons in .form-actions to align with .controls
94 .form-horizontal .form-actions {
95 padding-left: 10px;
96 padding-right: 10px;
97 }
98
99 // Modals
100 .modal {
101 position: absolute;
102 top: 10px;
103 left: 10px;
104 right: 10px;
105 width: auto;
106 margin: 0;
107 &.fade.in { top: auto; }
108 }
109 .modal-header .close {
110 padding: 10px;
111 margin: -10px;
112 }
113
114 // Carousel
115 .carousel-caption {
116 position: static;
117 }
118
119}
120
121
122
123// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
124// --------------------------------------------------
125
126@media (max-width: 768px) {
127 // GRID & CONTAINERS
128 // -----------------
129 // Remove width from containers
130 .container {
131 width: auto;
132 padding: 0 20px;
133 }
134 // Fluid rows
135 .row-fluid {
136 width: 100%;
137 }
138 // Undo negative margin on rows
139 .row {
140 margin-left: 0;
141 }
142 // Make all columns even
143 .row > [class*="span"],
144 .row-fluid > [class*="span"] {
145 float: none;
146 display: block;
147 width: auto;
148 margin: 0;
149 }
150}
151
152
153
154// PORTRAIT TABLET TO DEFAULT DESKTOP
155// ----------------------------------
156
157@media (min-width: 768px) and (max-width: 980px) {
158
159 // Fixed grid
160 #gridSystem > .generate(12, 42px, 20px);
161
162 // Fluid grid
163 #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
164
165 // Input grid
166 #inputGridSystem > .generate(12, 42px, 20px);
167
168}
169
170
171
172// TABLETS AND BELOW
173// -----------------
174@media (max-width: 980px) {
175
176 // UNFIX THE TOPBAR
177 // ----------------
178 // Remove any padding from the body
179 body {
180 padding-top: 0;
181 }
182 // Unfix the navbar
183 .navbar-fixed-top {
184 position: static;
185 margin-bottom: @baseLineHeight;
186 }
187 .navbar-fixed-top .navbar-inner {
188 padding: 5px;
189 }
190 .navbar .container {
191 width: auto;
192 padding: 0;
193 }
194 // Account for brand name
195 .navbar .brand {
196 padding-left: 10px;
197 padding-right: 10px;
198 margin: 0 0 0 -5px;
199 }
200 // Nav collapse clears brand
201 .navbar .nav-collapse {
202 clear: left;
203 }
204 // Block-level the nav
205 .navbar .nav {
206 float: none;
207 margin: 0 0 (@baseLineHeight / 2);
208 }
209 .navbar .nav > li {
210 float: none;
211 }
212 .navbar .nav > li > a {
213 margin-bottom: 2px;
214 }
215 .navbar .nav > .divider-vertical {
216 display: none;
217 }
218 // Nav and dropdown links in navbar
219 .navbar .nav > li > a,
220 .navbar .dropdown-menu a {
221 padding: 6px 15px;
222 font-weight: bold;
223 color: @navbarLinkColor;
224 .border-radius(3px);
225 }
226 .navbar .dropdown-menu li + li a {
227 margin-bottom: 2px;
228 }
229 .navbar .nav > li > a:hover,
230 .navbar .dropdown-menu a:hover {
231 background-color: @navbarBackground;
232 }
233 // Dropdowns in the navbar
234 .navbar .dropdown-menu {
235 position: static;
236 top: auto;
237 left: auto;
238 float: none;
239 display: block;
240 max-width: none;
241 margin: 0 15px;
242 padding: 0;
243 background-color: transparent;
244 border: none;
245 .border-radius(0);
246 .box-shadow(none);
247 }
248 .navbar .dropdown-menu:before,
249 .navbar .dropdown-menu:after {
250 display: none;
251 }
252 .navbar .dropdown-menu .divider {
253 display: none;
254 }
255 // Forms in navbar
256 .navbar-form,
257 .navbar-search {
258 float: none;
259 padding: (@baseLineHeight / 2) 15px;
260 margin: (@baseLineHeight / 2) 0;
261 border-top: 1px solid @navbarBackground;
262 border-bottom: 1px solid @navbarBackground;
263 @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
264 .box-shadow(@shadow);
265 }
266 // Pull right (secondary) nav content
267 .navbar .nav.pull-right {
268 float: none;
269 margin-left: 0;
270 }
271 // Static navbar
272 .navbar-static .navbar-inner {
273 padding-left: 10px;
274 padding-right: 10px;
275 }
276 // Navbar button
277 .btn-navbar {
278 display: block;
279 }
280
281 // Hide everything in the navbar save .brand and toggle button */
282 .nav-collapse {
283 overflow: hidden;
284 height: 0;
285 }
286}
287
288
289
290// DEFAULT DESKTOP
291// ---------------
292
293@media (min-width: 980px) {
294 .nav-collapse.collapse {
295 height: auto !important;
296 }
297}
298
299
300
301// LARGE DESKTOP & UP
302// ------------------
303
304@media (min-width: 1200px) {
305
306 // Fixed grid
307 #gridSystem > .generate(12, 70px, 30px);
308
309 // Fluid grid
310 #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
311
312 // Input grid
313 #inputGridSystem > .generate(12, 70px, 30px);
314
315 // Thumbnails
316 .thumbnails {
317 margin-left: -30px;
318 }
319 .thumbnails > li {
320 margin-left: 30px;
321 }
322
323}