/src/honeynet_web/honeywall/static/twitter-bootstrap/less/responsive.less

  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}