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}
194