Mercurial > wikked

comparison static/bootstrap/less/responsive-767px-max.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
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 }