]>
Commit | Line | Data |
---|---|---|
59c06b17 CS |
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 | .row-fluid [class*="span"] { | |
62 | float: none; | |
63 | display: block; | |
64 | width: 100%; | |
65 | margin-left: 0; | |
66 | .box-sizing(border-box); | |
67 | } | |
68 | .span12, | |
69 | .row-fluid .span12 { | |
70 | width: 100%; | |
71 | .box-sizing(border-box); | |
72 | } | |
73 | ||
74 | // FORM FIELDS | |
75 | // ----------- | |
76 | // Make span* classes full width | |
77 | .input-large, | |
78 | .input-xlarge, | |
79 | .input-xxlarge, | |
80 | input[class*="span"], | |
81 | select[class*="span"], | |
82 | textarea[class*="span"], | |
83 | .uneditable-input { | |
84 | .input-block-level(); | |
85 | } | |
86 | // But don't let it screw up prepend/append inputs | |
87 | .input-prepend input, | |
88 | .input-append input, | |
89 | .input-prepend input[class*="span"], | |
90 | .input-append input[class*="span"] { | |
91 | display: inline-block; // redeclare so they don't wrap to new lines | |
92 | width: auto; | |
93 | } | |
94 | .controls-row [class*="span"] + [class*="span"] { | |
95 | margin-left: 0; | |
96 | } | |
97 | ||
98 | // Modals | |
99 | .modal { | |
100 | position: fixed; | |
101 | top: 20px; | |
102 | left: 20px; | |
103 | right: 20px; | |
104 | width: auto; | |
105 | margin: 0; | |
106 | &.fade.in { top: auto; } | |
107 | } | |
108 | ||
109 | } | |
110 | ||
111 | ||
112 | ||
113 | // UP TO LANDSCAPE PHONE | |
114 | // --------------------- | |
115 | ||
116 | @media (max-width: 480px) { | |
117 | ||
118 | // Smooth out the collapsing/expanding nav | |
119 | .nav-collapse { | |
120 | -webkit-transform: translate3d(0, 0, 0); // activate the GPU | |
121 | } | |
122 | ||
123 | // Block level the page header small tag for readability | |
124 | .page-header h1 small { | |
125 | display: block; | |
126 | line-height: @baseLineHeight; | |
127 | } | |
128 | ||
129 | // Update checkboxes for iOS | |
130 | input[type="checkbox"], | |
131 | input[type="radio"] { | |
132 | border: 1px solid #ccc; | |
133 | } | |
134 | ||
135 | // Remove the horizontal form styles | |
136 | .form-horizontal { | |
137 | .control-label { | |
138 | float: none; | |
139 | width: auto; | |
140 | padding-top: 0; | |
141 | text-align: left; | |
142 | } | |
143 | // Move over all input controls and content | |
144 | .controls { | |
145 | margin-left: 0; | |
146 | } | |
147 | // Move the options list down to align with labels | |
148 | .control-list { | |
149 | padding-top: 0; // has to be padding because margin collaspes | |
150 | } | |
151 | // Move over buttons in .form-actions to align with .controls | |
152 | .form-actions { | |
153 | padding-left: 10px; | |
154 | padding-right: 10px; | |
155 | } | |
156 | } | |
157 | ||
158 | // Modals | |
159 | .modal { | |
160 | top: 10px; | |
161 | left: 10px; | |
162 | right: 10px; | |
163 | } | |
164 | .modal-header .close { | |
165 | padding: 10px; | |
166 | margin: -10px; | |
167 | } | |
168 | ||
169 | // Carousel | |
170 | .carousel-caption { | |
171 | position: static; | |
172 | } | |
173 | ||
174 | } |