source: publico/PortalInterlegis/design/bootstrap/less/responsive.less @ 6128

Última Alteração nesse arquivo desde 6128 foi 6128, incluída por mazza, 9 anos atrás

init

File size: 7.2 KB
Linha 
1/*!
2 * Bootstrap Responsive v2.0.2
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// Visibility utilities
35
36// For desktops
37.visible-phone     { display: none; }
38.visible-tablet    { display: none; }
39.visible-desktop   { display: block; }
40.hidden-phone      { display: block; }
41.hidden-tablet     { display: block; }
42.hidden-desktop    { display: none; }
43
44// Phones only
45@media (max-width: 767px) {
46  // Show
47  .visible-phone     { display: block; }
48  // Hide
49  .hidden-phone      { display: none; }
50  // Hide everything else
51  .hidden-desktop    { display: block; }
52  .visible-desktop   { display: none; }
53}
54
55// Tablets & small desktops only
56@media (min-width: 768px) and (max-width: 979px) {
57  // Show
58  .visible-tablet    { display: block; }
59  // Hide
60  .hidden-tablet     { display: none; }
61  // Hide everything else
62  .hidden-desktop    { display: block; }
63  .visible-desktop   { display: none; }
64}
65
66
67// UP TO LANDSCAPE PHONE
68// ---------------------
69
70@media (max-width: 480px) {
71
72  // Smooth out the collapsing/expanding nav
73  .nav-collapse {
74    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
75  }
76
77  // Block level the page header small tag for readability
78  .page-header h1 small {
79    display: block;
80    line-height: @baseLineHeight;
81  }
82
83  // Update checkboxes for iOS
84  input[type="checkbox"],
85  input[type="radio"] {
86    border: 1px solid #ccc;
87  }
88
89  // Remove the horizontal form styles
90  .form-horizontal .control-group > label {
91    float: none;
92    width: auto;
93    padding-top: 0;
94    text-align: left;
95  }
96  // Move over all input controls and content
97  .form-horizontal .controls {
98    margin-left: 0;
99  }
100  // Move the options list down to align with labels
101  .form-horizontal .control-list {
102    padding-top: 0; // has to be padding because margin collaspes
103  }
104  // Move over buttons in .form-actions to align with .controls
105  .form-horizontal .form-actions {
106    padding-left: 10px;
107    padding-right: 10px;
108  }
109
110  // Modals
111  .modal {
112    position: absolute;
113    top:   10px;
114    left:  10px;
115    right: 10px;
116    width: auto;
117    margin: 0;
118    &.fade.in { top: auto; }
119  }
120  .modal-header .close {
121    padding: 10px;
122    margin: -10px;
123  }
124
125  // Carousel
126  .carousel-caption {
127    position: static;
128  }
129
130}
131
132
133
134// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
135// --------------------------------------------------
136
137@media (max-width: 767px) {
138
139  // Padding to set content in a bit
140  body {
141    padding-left: 20px;
142    padding-right: 20px;
143  }
144  .navbar-fixed-top {
145    margin-left: -20px;
146    margin-right: -20px;
147  }
148
149  // GRID & CONTAINERS
150  // -----------------
151  // Remove width from containers
152  .container {
153    width: auto;
154  }
155  // Fluid rows
156  .row-fluid {
157    width: 100%;
158  }
159  // Undo negative margin on rows
160  .row {
161    margin-left: 0;
162  }
163  // Make all columns even
164  .row > [class*="span"],
165  .row-fluid > [class*="span"] {
166    float: none;
167    display: block;
168    width: auto;
169    margin: 0;
170  }
171
172  // THUMBNAILS
173  // ----------
174  .thumbnails [class*="span"] {
175    width: auto;
176  }
177
178  // FORM FIELDS
179  // -----------
180  // Make span* classes full width
181  input[class*="span"],
182  select[class*="span"],
183  textarea[class*="span"],
184  .uneditable-input {
185    .input-block-level();
186  }
187  // But don't let it screw up prepend/append inputs
188  .input-prepend input[class*="span"],
189  .input-append input[class*="span"] {
190    width: auto;
191  }
192
193}
194
195
196
197// PORTRAIT TABLET TO DEFAULT DESKTOP
198// ----------------------------------
199
200@media (min-width: 768px) and (max-width: 979px) {
201
202  // Fixed grid
203  #grid > .core(42px, 20px);
204
205  // Fluid grid
206  #grid > .fluid(5.801104972%, 2.762430939%);
207
208  // Input grid
209  #grid > .input(42px, 20px);
210
211}
212
213
214
215// TABLETS AND BELOW
216// -----------------
217@media (max-width: 979px) {
218
219  // UNFIX THE TOPBAR
220  // ----------------
221  // Remove any padding from the body
222  body {
223    padding-top: 0;
224  }
225  // Unfix the navbar
226  .navbar-fixed-top {
227    position: static;
228    margin-bottom: @baseLineHeight;
229  }
230  .navbar-fixed-top .navbar-inner {
231    padding: 5px;
232  }
233  .navbar .container {
234    width: auto;
235    padding: 0;
236  }
237  // Account for brand name
238  .navbar .brand {
239    padding-left: 10px;
240    padding-right: 10px;
241    margin: 0 0 0 -5px;
242  }
243  // Nav collapse clears brand
244  .navbar .nav-collapse {
245    clear: left;
246  }
247  // Block-level the nav
248  .navbar .nav {
249    float: none;
250    margin: 0 0 (@baseLineHeight / 2);
251  }
252  .navbar .nav > li {
253    float: none;
254  }
255  .navbar .nav > li > a {
256    margin-bottom: 2px;
257  }
258  .navbar .nav > .divider-vertical {
259    display: none;
260  }
261  .navbar .nav .nav-header {
262    color: @navbarText;
263    text-shadow: none;
264  }
265  // Nav and dropdown links in navbar
266  .navbar .nav > li > a,
267  .navbar .dropdown-menu a {
268    padding: 6px 15px;
269    font-weight: bold;
270    color: @navbarLinkColor;
271    .border-radius(3px);
272  }
273  .navbar .dropdown-menu li + li a {
274    margin-bottom: 2px;
275  }
276  .navbar .nav > li > a:hover,
277  .navbar .dropdown-menu a:hover {
278    background-color: @navbarBackground;
279  }
280  // Dropdowns in the navbar
281  .navbar .dropdown-menu {
282    position: static;
283    top: auto;
284    left: auto;
285    float: none;
286    display: block;
287    max-width: none;
288    margin: 0 15px;
289    padding: 0;
290    background-color: transparent;
291    border: none;
292    .border-radius(0);
293    .box-shadow(none);
294  }
295  .navbar .dropdown-menu:before,
296  .navbar .dropdown-menu:after {
297    display: none;
298  }
299  .navbar .dropdown-menu .divider {
300    display: none;
301  }
302  // Forms in navbar
303  .navbar-form,
304  .navbar-search {
305    float: none;
306    padding: (@baseLineHeight / 2) 15px;
307    margin: (@baseLineHeight / 2) 0;
308    border-top: 1px solid @navbarBackground;
309    border-bottom: 1px solid @navbarBackground;
310    @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
311    .box-shadow(@shadow);
312  }
313  // Pull right (secondary) nav content
314  .navbar .nav.pull-right {
315    float: none;
316    margin-left: 0;
317  }
318  // Static navbar
319  .navbar-static .navbar-inner {
320    padding-left:  10px;
321    padding-right: 10px;
322  }
323  // Navbar button
324  .btn-navbar {
325    display: block;
326  }
327
328  // Hide everything in the navbar save .brand and toggle button */
329  .nav-collapse {
330    overflow: hidden;
331    height: 0;
332  }
333}
334
335
336
337// DEFAULT DESKTOP
338// ---------------
339
340@media (min-width: 980px) {
341  .nav-collapse.collapse {
342    height: auto !important;
343    overflow: visible !important;
344  }
345}
346
347
348
349// LARGE DESKTOP & UP
350// ------------------
351
352@media (min-width: 1200px) {
353
354  // Fixed grid
355  #grid > .core(70px, 30px);
356
357  // Fluid grid
358  #grid > .fluid(5.982905983%, 2.564102564%);
359
360  // Input grid
361  #grid > .input(70px, 30px);
362
363  // Thumbnails
364  .thumbnails {
365    margin-left: -30px;
366  }
367  .thumbnails > li {
368    margin-left: 30px;
369  }
370
371}
Note: Veja TracBrowser para ajuda no uso do navegador do trac.
 

The contents and data of this website are published under license:
Creative Commons 4.0 Brasil - Atribuir Fonte - Compartilhar Igual.