minor fix
[fnpeditor.git] / libs / bootstrap / less / responsive-767px-max.less
1 //
2 // Responsive: Landscape phone to desktop/tablet
3 // --------------------------------------------------
4
5
6 @media (max-width: 767px) {
7
8   // Padding to set content in a bit
9   body {
10     padding-left: 20px;
11     padding-right: 20px;
12   }
13   // Negative indent the now static "fixed" navbar
14   .navbar-fixed-top,
15   .navbar-fixed-bottom,
16   .navbar-static-top {
17     margin-left: -20px;
18     margin-right: -20px;
19   }
20   // Remove padding on container given explicit padding set on body
21   .container-fluid {
22     padding: 0;
23   }
24
25   // TYPOGRAPHY
26   // ----------
27   // Reset horizontal dl
28   .dl-horizontal {
29     dt {
30       float: none;
31       clear: none;
32       width: auto;
33       text-align: left;
34     }
35     dd {
36       margin-left: 0;
37     }
38   }
39
40   // GRID & CONTAINERS
41   // -----------------
42   // Remove width from containers
43   .container {
44     width: auto;
45   }
46   // Fluid rows
47   .row-fluid {
48     width: 100%;
49   }
50   // Undo negative margin on rows and thumbnails
51   .row,
52   .thumbnails {
53     margin-left: 0;
54   }
55   .thumbnails > li {
56     float: none;
57     margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
58   }
59   // Make all grid-sized elements block level again
60   [class*="span"],
61   .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
62   .row-fluid [class*="span"] {
63     float: none;
64     display: block;
65     width: 100%;
66     margin-left: 0;
67     .box-sizing(border-box);
68   }
69   .span12,
70   .row-fluid .span12 {
71     width: 100%;
72     .box-sizing(border-box);
73   }
74   .row-fluid [class*="offset"]:first-child {
75     margin-left: 0;
76   }
77
78   // FORM FIELDS
79   // -----------
80   // Make span* classes full width
81   .input-large,
82   .input-xlarge,
83   .input-xxlarge,
84   input[class*="span"],
85   select[class*="span"],
86   textarea[class*="span"],
87   .uneditable-input {
88     .input-block-level();
89   }
90   // But don't let it screw up prepend/append inputs
91   .input-prepend input,
92   .input-append input,
93   .input-prepend input[class*="span"],
94   .input-append input[class*="span"] {
95     display: inline-block; // redeclare so they don't wrap to new lines
96     width: auto;
97   }
98   .controls-row [class*="span"] + [class*="span"] {
99     margin-left: 0;
100   }
101
102   // Modals
103   .modal {
104     position: fixed;
105     top:   20px;
106     left:  20px;
107     right: 20px;
108     width: auto;
109     margin: 0;
110     &.fade  { top: -100px; }
111     &.fade.in { top: 20px; }
112   }
113
114 }
115
116
117
118 // UP TO LANDSCAPE PHONE
119 // ---------------------
120
121 @media (max-width: 480px) {
122
123   // Smooth out the collapsing/expanding nav
124   .nav-collapse {
125     -webkit-transform: translate3d(0, 0, 0); // activate the GPU
126   }
127
128   // Block level the page header small tag for readability
129   .page-header h1 small {
130     display: block;
131     line-height: @baseLineHeight;
132   }
133
134   // Update checkboxes for iOS
135   input[type="checkbox"],
136   input[type="radio"] {
137     border: 1px solid #ccc;
138   }
139
140   // Remove the horizontal form styles
141   .form-horizontal {
142     .control-label {
143       float: none;
144       width: auto;
145       padding-top: 0;
146       text-align: left;
147     }
148     // Move over all input controls and content
149     .controls {
150       margin-left: 0;
151     }
152     // Move the options list down to align with labels
153     .control-list {
154       padding-top: 0; // has to be padding because margin collaspes
155     }
156     // Move over buttons in .form-actions to align with .controls
157     .form-actions {
158       padding-left: 10px;
159       padding-right: 10px;
160     }
161   }
162
163   // Medias
164   // Reset float and spacing to stack
165   .media .pull-left,
166   .media .pull-right  {
167     float: none;
168     display: block;
169     margin-bottom: 10px;
170   }
171   // Remove side margins since we stack instead of indent
172   .media-object {
173     margin-right: 0;
174     margin-left: 0;
175   }
176
177   // Modals
178   .modal {
179     top:   10px;
180     left:  10px;
181     right: 10px;
182   }
183   .modal-header .close {
184     padding: 10px;
185     margin: -10px;
186   }
187
188   // Carousel
189   .carousel-caption {
190     position: static;
191   }
192
193 }