Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 615 lines (533 sloc) 19.115 kb
3157de8 @fat clean up comments for better built files
fat authored
1 // Mixins.less
2 // Snippets of reusable CSS to develop faster and keep code readable
3 // -----------------------------------------------------------------
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
4
6d0b083 @fat update whitspace and comment styles
fat authored
5
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
6 // UTILITY MIXINS
7 // --------------------------------------------------
8
9 // Clearfix
7e72eb5 @mdo new tab focus style and mixin
mdo authored
10 // --------
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
11 // For clearing floats like a boss h5bp.com/q
6f6adfb @mdo change clearfix mixin to drop parens that prevent it from being a class,...
mdo authored
12 .clearfix {
25ac318 @necolas Remove unnecessary CSS properties from the clearfix mixin.
necolas authored
13 *zoom: 1;
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
14 &:before,
99ede58 @mdo adding code and .label sections to type section
mdo authored
15 &:after {
73f1bcf @fat Simpler clearfix #2 http://nicolasgallagher.com/micro-clearfix-hack/
fat authored
16 display: table;
17 content: "";
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
18 }
19 &:after {
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
20 clear: both;
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
21 }
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
22 }
23
7e72eb5 @mdo new tab focus style and mixin
mdo authored
24 // Webkit-style focus
25 // ------------------
26 .tab-focus() {
27 // Default
61e2201 @mdo fix buttons focus state and swap a buttons for button buttons
mdo authored
28 outline: thin dotted #333;
7e72eb5 @mdo new tab focus style and mixin
mdo authored
29 // Webkit
30 outline: 5px auto -webkit-focus-ring-color;
31 outline-offset: -2px;
32 }
33
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
34 // Center-align a block level element
7e72eb5 @mdo new tab focus style and mixin
mdo authored
35 // ----------------------------------
206334b @mdo remove theme.less and split preboot.less to mixins.less and variables.le...
mdo authored
36 .center-block() {
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
37 display: block;
c4481b5 @mdo improve CSS properties for centering content, the container, and fluid c...
mdo authored
38 margin-left: auto;
39 margin-right: auto;
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
40 }
41
3426877 @mdo add ie7 inline block mixin and add ability to center pagination
mdo authored
42 // IE7 inline-block
7e72eb5 @mdo new tab focus style and mixin
mdo authored
43 // ----------------
3426877 @mdo add ie7 inline block mixin and add ability to center pagination
mdo authored
44 .ie7-inline-block() {
45 *display: inline; /* IE7 inline-block hack */
46 *zoom: 1;
47 }
48
347a15b @phopkins Cleans up IE7 inline margins for buttons and adds them for sprites, also...
phopkins authored
49 // IE7 likes to collapse whitespace on either side of the inline-block elements.
50 // Ems because we're attempting to match the width of a space character. Left
51 // version is for form buttons, which typically come after other elements, and
52 // right version is for icons, which come before. Applying both is ok, but it will
53 // mean that space between those elements will be .6em (~2 space characters) in IE7,
54 // instead of the 1 space in other browsers.
55 .ie7-restore-left-whitespace() {
56 *margin-left: .3em;
57
58 &:first-child {
59 *margin-left: 0;
60 }
61 }
62
63 .ie7-restore-right-whitespace() {
64 *margin-right: .3em;
65
66 &:last-child {
67 *margin-left: 0;
68 }
69 }
70
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
71 // Sizing shortcuts
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
72 // -------------------------
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
73 .size(@height: 5px, @width: 5px) {
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
74 width: @width;
4e6275d @mdo update property order and do some misc cleanup
mdo authored
75 height: @height;
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
76 }
77 .square(@size: 5px) {
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
78 .size(@size, @size);
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
79 }
80
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
81 // Placeholder text
82 // -------------------------
40e9222 @mdo revamp alert message and error state color/text/bg to be variables
mdo authored
83 .placeholder(@color: @placeholderText) {
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
84 :-moz-placeholder {
85 color: @color;
86 }
87 ::-webkit-input-placeholder {
88 color: @color;
89 }
90 }
91
53da88e @mdo add mixin for text-overflow
mdo authored
92 // Text overflow
93 // -------------------------
94 // Requires inline-block or block for proper styling
95 .text-overflow() {
96 overflow: hidden;
97 text-overflow: ellipsis;
98 white-space: nowrap;
99 }
100
c8f4325 @mdo remove text indent on carets (not needed) and add inline replacement mix...
mdo authored
101 // New image replacement
102 // -------------------------
103 // Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
104 .hide-text {
105 overflow: hidden;
106 text-indent: 100%;
107 white-space: nowrap;
108 }
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
109
ee5d2ec @mdo add block level input mixin for border-box box-sizing
mdo authored
110
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
111 // FONTS
112 // --------------------------------------------------
113
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
114 #font {
1609705 @mdo updated font mixins courtesy of @apancutt
mdo authored
115 #family {
116 .serif() {
550879c @mdo fix quotes in font-family usage
mdo authored
117 font-family: Georgia, "Times New Roman", Times, serif;
1609705 @mdo updated font mixins courtesy of @apancutt
mdo authored
118 }
119 .sans-serif() {
120 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
121 }
122 .monospace() {
0c3bf72 @fat add quotes to courier new
fat authored
123 font-family: Menlo, Monaco, "Courier New", monospace;
1609705 @mdo updated font mixins courtesy of @apancutt
mdo authored
124 }
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
125 }
1609705 @mdo updated font mixins courtesy of @apancutt
mdo authored
126 .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
127 font-size: @size;
128 font-weight: @weight;
129 line-height: @lineHeight;
130 }
1609705 @mdo updated font mixins courtesy of @apancutt
mdo authored
131 .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
132 #font > #family > .serif;
133 #font > .shorthand(@size, @weight, @lineHeight);
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
134 }
1609705 @mdo updated font mixins courtesy of @apancutt
mdo authored
135 .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
136 #font > #family > .sans-serif;
137 #font > .shorthand(@size, @weight, @lineHeight);
138 }
139 .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
140 #font > #family > .monospace;
141 #font > .shorthand(@size, @weight, @lineHeight);
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
142 }
143 }
144
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
145
ee5d2ec @mdo add block level input mixin for border-box box-sizing
mdo authored
146 // FORMS
2d9b3c4 @mdo move formfieldstate mixin to mixins.less for #1785
mdo authored
147 // --------------------------------------------------
148
ee5d2ec @mdo add block level input mixin for border-box box-sizing
mdo authored
149 // Block level inputs
150 .input-block-level {
151 display: block;
152 width: 100%;
153 min-height: 28px; /* Make inputs at least the height of their button counterpart */
154 /* Makes inputs behave like true block-level elements */
155 .box-sizing(border-box);
156 }
157
158
2d9b3c4 @mdo move formfieldstate mixin to mixins.less for #1785
mdo authored
159 // Mixin for form field states
160 .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
161 // Set the text color
162 > label,
163 .help-block,
164 .help-inline {
165 color: @textColor;
166 }
167 // Style inputs accordingly
168 input,
169 select,
170 textarea {
171 color: @textColor;
172 border-color: @borderColor;
173 &:focus {
174 border-color: darken(@borderColor, 10%);
175 .box-shadow(0 0 6px lighten(@borderColor, 20%));
176 }
177 }
178 // Give a small background color for input-prepend/-append
179 .input-prepend .add-on,
180 .input-append .add-on {
181 color: @textColor;
182 background-color: @backgroundColor;
183 border-color: @textColor;
184 }
185 }
186
187
188
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
189 // CSS3 PROPERTIES
190 // --------------------------------------------------
191
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
192 // Border Radius
193 .border-radius(@radius: 5px) {
194 -webkit-border-radius: @radius;
0ef4b64 @mdo overhaul frontpage jumbotron, add js for twitter buttons back in, fix up...
mdo authored
195 -moz-border-radius: @radius;
aaf9f75 @mdo docs spacing, spare divs in a few places, updating css spacing
mdo authored
196 border-radius: @radius;
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
197 }
198
199 // Drop shadows
200 .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
201 -webkit-box-shadow: @shadow;
0ef4b64 @mdo overhaul frontpage jumbotron, add js for twitter buttons back in, fix up...
mdo authored
202 -moz-box-shadow: @shadow;
aaf9f75 @mdo docs spacing, spare divs in a few places, updating css spacing
mdo authored
203 box-shadow: @shadow;
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
204 }
205
206 // Transitions
207 .transition(@transition) {
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
208 -webkit-transition: @transition;
209 -moz-transition: @transition;
210 -ms-transition: @transition;
211 -o-transition: @transition;
212 transition: @transition;
213 }
214
028726a @mdo add user-select mixin
mdo authored
215 // Transformations
b6b7d13 @mdo finish the rest of the less page mixins docs
mdo authored
216 .rotate(@degrees) {
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
217 -webkit-transform: rotate(@degrees);
218 -moz-transform: rotate(@degrees);
bdbc352 @mdo adding new mixins
mdo authored
219 -ms-transform: rotate(@degrees);
220 -o-transform: rotate(@degrees);
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
221 transform: rotate(@degrees);
222 }
b6b7d13 @mdo finish the rest of the less page mixins docs
mdo authored
223 .scale(@ratio) {
224 -webkit-transform: scale(@ratio);
225 -moz-transform: scale(@ratio);
226 -ms-transform: scale(@ratio);
227 -o-transform: scale(@ratio);
228 transform: scale(@ratio);
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
229 }
bdbc352 @mdo adding new mixins
mdo authored
230 .translate(@x: 0, @y: 0) {
231 -webkit-transform: translate(@x, @y);
232 -moz-transform: translate(@x, @y);
233 -ms-transform: translate(@x, @y);
234 -o-transform: translate(@x, @y);
235 transform: translate(@x, @y);
236 }
2c8ca4f @mdo add skew mixin
mdo authored
237 .skew(@x: 0, @y: 0) {
238 -webkit-transform: skew(@x, @y);
239 -moz-transform: skew(@x, @y);
240 -ms-transform: skew(@x, @y);
241 -o-transform: skew(@x, @y);
242 transform: skew(@x, @y);
243 }
b5f1d2f @mdo rearrange order of 3d and skew mixins:
mdo authored
244 .translate3d(@x: 0, @y: 0, @z: 0) {
245 -webkit-transform: translate(@x, @y, @z);
246 -moz-transform: translate(@x, @y, @z);
247 -ms-transform: translate(@x, @y, @z);
248 -o-transform: translate(@x, @y, @z);
249 transform: translate(@x, @y, @z);
250 }
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
251
9660f6f @mdo new buttons, new modal updates around spacing and placeholder content
mdo authored
252 // Background clipping
b6b1986 @mdo remove some old -moz- prefixes from mixins while we're at it, dropping F...
mdo authored
253 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
9660f6f @mdo new buttons, new modal updates around spacing and placeholder content
mdo authored
254 .background-clip(@clip) {
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
255 -webkit-background-clip: @clip;
0ef4b64 @mdo overhaul frontpage jumbotron, add js for twitter buttons back in, fix up...
mdo authored
256 -moz-background-clip: @clip;
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
257 background-clip: @clip;
9660f6f @mdo new buttons, new modal updates around spacing and placeholder content
mdo authored
258 }
259
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
260 // Background sizing
261 .background-size(@size){
262 -webkit-background-size: @size;
263 -moz-background-size: @size;
264 -o-background-size: @size;
265 background-size: @size;
266 }
267
268
1438b14 @mdo overhauled docs to include example markup, add language around browser s...
mdo authored
269 // Box sizing
270 .box-sizing(@boxmodel) {
271 -webkit-box-sizing: @boxmodel;
272 -moz-box-sizing: @boxmodel;
a97b9c1 @mdo in responsive layouts <767px, ensure inputs are not larger than 100% wit...
mdo authored
273 -ms-box-sizing: @boxmodel;
1438b14 @mdo overhauled docs to include example markup, add language around browser s...
mdo authored
274 box-sizing: @boxmodel;
275 }
276
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
277 // User select
278 // For selecting text on the page
279 .user-select(@select) {
280 -webkit-user-select: @select;
281 -moz-user-select: @select;
282 -o-user-select: @select;
283 user-select: @select;
284 }
285
648c468 @mdo breaking down the main page into subpages for easier, more comprehensive...
mdo authored
286 // Resize anything
287 .resizable(@direction: both) {
288 resize: @direction; // Options: horizontal, vertical, both
289 overflow: auto; // Safari fix
290 }
291
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
292 // CSS3 Content Columns
b6b7d13 @mdo finish the rest of the less page mixins docs
mdo authored
293 .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
294 -webkit-column-count: @columnCount;
295 -moz-column-count: @columnCount;
aaf9f75 @mdo docs spacing, spare divs in a few places, updating css spacing
mdo authored
296 column-count: @columnCount;
297 -webkit-column-gap: @columnGap;
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
298 -moz-column-gap: @columnGap;
aaf9f75 @mdo docs spacing, spare divs in a few places, updating css spacing
mdo authored
299 column-gap: @columnGap;
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
300 }
301
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
302 // Opacity
303 .opacity(@opacity: 100) {
b6b1986 @mdo remove some old -moz- prefixes from mixins while we're at it, dropping F...
mdo authored
304 opacity: @opacity / 100;
a07851d @fat stop doing oldschool escape substitution
fat authored
305 filter: ~"alpha(opacity=@{opacity})";
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
306 }
307
308
309
310 // BACKGROUNDS
311 // --------------------------------------------------
312
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
313 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
314 #translucent {
315 .background(@color: @white, @alpha: 1) {
316 background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
317 }
318 .border(@color: @white, @alpha: 1) {
319 border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
b6b1986 @mdo remove some old -moz- prefixes from mixins while we're at it, dropping F...
mdo authored
320 .background-clip(padding-box);
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
321 }
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
322 }
323
6418a40 @mdo spelling mistake in comment
mdo authored
324 // Gradient Bar Colors for buttons and alerts
0e9d7c1 @fat update alert and button styling aproach
fat authored
325 .gradientBar(@primaryColor, @secondaryColor) {
4e6275d @mdo update property order and do some misc cleanup
mdo authored
326 #gradient > .vertical(@primaryColor, @secondaryColor);
0e9d7c1 @fat update alert and button styling aproach
fat authored
327 border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
328 border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
329 }
330
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
331 // Gradients
332 #gradient {
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
333 .horizontal(@startColor: #555, @endColor: #333) {
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
334 background-color: @endColor;
335 background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
336 background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
0777e39 @kristerkari Drop khtml gradient, shorten old webkit gradient
kristerkari authored
337 background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
338 background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
339 background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
340 background-image: linear-gradient(left, @startColor, @endColor); // Le standard
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
341 background-repeat: repeat-x;
635ee36 @mdo fix gradient mixins by escaping them, add notes on progress bars
mdo authored
342 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
343 }
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
344 .vertical(@startColor: #555, @endColor: #333) {
29f0e4c @phopkins Removes filters as a way to provide gradients for IE<=9
phopkins authored
345 background-color: mix(@startColor, @endColor, 60%);
0fcda16 @mdo be more specific in gradient mixin
mdo authored
346 background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
347 background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
0777e39 @kristerkari Drop khtml gradient, shorten old webkit gradient
kristerkari authored
348 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
0fcda16 @mdo be more specific in gradient mixin
mdo authored
349 background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
350 background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
351 background-image: linear-gradient(top, @startColor, @endColor); // The standard
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
352 background-repeat: repeat-x;
635ee36 @mdo fix gradient mixins by escaping them, add notes on progress bars
mdo authored
353 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
354 }
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
355 .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
356 background-color: @endColor;
357 background-repeat: repeat-x;
9e33ab2 @mdo clean up commented out css, slightly updated docs again
mdo authored
358 background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
359 background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
360 background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
361 background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
362 background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
363 }
6145fd2 @sankage changed @colorStop to be unitless
sankage authored
364 .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
7117db4 @phopkins Makes default button the tiniest bit of gray for IE<=9
phopkins authored
365 background-color: mix(@midColor, @endColor, 80%);
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
366 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
6145fd2 @sankage changed @colorStop to be unitless
sankage authored
367 background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
298e1b5 @mdo fix broken checkbox in ie7
mdo authored
368 background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
6145fd2 @sankage changed @colorStop to be unitless
sankage authored
369 background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
370 background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
371 background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
372 background-repeat: no-repeat;
635ee36 @mdo fix gradient mixins by escaping them, add notes on progress bars
mdo authored
373 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
374 }
0db2d45 @mdo update mixins to use slightly diff variables within some parametric mixi...
mdo authored
375 .radial(@innerColor: #555, @outerColor: #333) {
39f70af @mdo update mixins to fix radial gradient
mdo authored
376 background-color: @outerColor;
377 background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
378 background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
379 background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
380 background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
ad546c9 @jacobrask Add Opera-prefixed radial gradient
jacobrask authored
381 background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
f919f6f @mdo huge update to forms, docs for the new forms, added a new link for js ex...
mdo authored
382 background-repeat: no-repeat;
383 }
0db2d45 @mdo update mixins to use slightly diff variables within some parametric mixi...
mdo authored
384 .striped(@color, @angle: -45deg) {
3eb8059 @pokonski Progress bars
pokonski authored
385 background-color: @color;
1438b14 @mdo overhauled docs to include example markup, add language around browser s...
mdo authored
386 background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
387 background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
388 background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
389 background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
390 background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
391 background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
3eb8059 @pokonski Progress bars
pokonski authored
392 }
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
393 }
1a22c3b @mdo restore IE filters, but reset them on buttons
mdo authored
394 // Reset filters for IE
395 .reset-filter() {
a07851d @fat stop doing oldschool escape substitution
fat authored
396 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1a22c3b @mdo restore IE filters, but reset them on buttons
mdo authored
397 }
dd769f9 @mdo update to use latest version of bootstrap, docs cleanup, etc
mdo authored
398
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
399
7ef7547 @mdo add horizontal divider support to nav list, including documentation for ...
mdo authored
400
401 // COMPONENT MIXINS
402 // --------------------------------------------------
403
d2630ff @mdo introduce new mixin to do navbar vertical centering
mdo authored
404 // Horizontal dividers
7ef7547 @mdo add horizontal divider support to nav list, including documentation for ...
mdo authored
405 // -------------------------
406 // Dividers (basically an hr) within dropdowns and nav lists
407 .nav-divider() {
408 height: 1px;
409 margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
410 overflow: hidden;
411 background-color: #e5e5e5;
412 border-bottom: 1px solid @white;
413
414 // IE7 needs a set width since we gave a height. Restricting just
415 // to IE7 to keep the 1px left/right space in other browsers.
416 // It is unclear where IE is getting the extra space that we need
417 // to negative-margin away, but so it goes.
418 *width: 100%;
419 *margin: -5px 0 5px;
420 }
421
d2630ff @mdo introduce new mixin to do navbar vertical centering
mdo authored
422 // Button backgrounds
7ef7547 @mdo add horizontal divider support to nav list, including documentation for ...
mdo authored
423 // ------------------
1c9db10 @phopkins Moves buttonBackground to mixins (issue 1292)
phopkins authored
424 .buttonBackground(@startColor, @endColor) {
425 // gradientBar will set the background to a pleasing blend of these, to support IE<=9
426 .gradientBar(@startColor, @endColor);
1a22c3b @mdo restore IE filters, but reset them on buttons
mdo authored
427 .reset-filter();
1c9db10 @phopkins Moves buttonBackground to mixins (issue 1292)
phopkins authored
428
429 // in these cases the gradient won't cover the background, so we override
aaa530c @mdo combined .disabled and [disabled] and confirmed in ie7/8
mdo authored
430 &:hover, &:active, &.active, &.disabled, &[disabled] {
1c9db10 @phopkins Moves buttonBackground to mixins (issue 1292)
phopkins authored
431 background-color: @endColor;
432 }
433
434 // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
435 &:active,
436 &.active {
437 background-color: darken(@endColor, 10%) e("\9");
438 }
439 }
440
d2630ff @mdo introduce new mixin to do navbar vertical centering
mdo authored
441 // Navbar vertical align
442 // -------------------------
443 // Vertically center elements in the navbar.
444 // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
445 .navbarVerticalAlign(@elementHeight) {
446 margin-top: (@navbarHeight - @elementHeight) / 2;
447 }
448
449 // Popover arrows
dd41403 @mdo revamp the mixins file to organize things a bit more, make placeholder t...
mdo authored
450 // -------------------------
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
451 // For tipsies and popovers
452 #popoverArrow {
1cc1852 @luk3thomas added ability to set custom colors for popover arrow mixin
luk3thomas authored
453 .top(@arrowWidth: 5px, @color: @black) {
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
454 bottom: 0;
455 left: 50%;
456 margin-left: -@arrowWidth;
457 border-left: @arrowWidth solid transparent;
458 border-right: @arrowWidth solid transparent;
1cc1852 @luk3thomas added ability to set custom colors for popover arrow mixin
luk3thomas authored
459 border-top: @arrowWidth solid @color;
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
460 }
1cc1852 @luk3thomas added ability to set custom colors for popover arrow mixin
luk3thomas authored
461 .left(@arrowWidth: 5px, @color: @black) {
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
462 top: 50%;
463 right: 0;
464 margin-top: -@arrowWidth;
465 border-top: @arrowWidth solid transparent;
466 border-bottom: @arrowWidth solid transparent;
1cc1852 @luk3thomas added ability to set custom colors for popover arrow mixin
luk3thomas authored
467 border-left: @arrowWidth solid @color;
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
468 }
1cc1852 @luk3thomas added ability to set custom colors for popover arrow mixin
luk3thomas authored
469 .bottom(@arrowWidth: 5px, @color: @black) {
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
470 top: 0;
471 left: 50%;
472 margin-left: -@arrowWidth;
473 border-left: @arrowWidth solid transparent;
474 border-right: @arrowWidth solid transparent;
1cc1852 @luk3thomas added ability to set custom colors for popover arrow mixin
luk3thomas authored
475 border-bottom: @arrowWidth solid @color;
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
476 }
1cc1852 @luk3thomas added ability to set custom colors for popover arrow mixin
luk3thomas authored
477 .right(@arrowWidth: 5px, @color: @black) {
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
478 top: 50%;
479 left: 0;
480 margin-top: -@arrowWidth;
481 border-top: @arrowWidth solid transparent;
482 border-bottom: @arrowWidth solid transparent;
1cc1852 @luk3thomas added ability to set custom colors for popover arrow mixin
luk3thomas authored
483 border-right: @arrowWidth solid @color;
a017932 @mdo start breaking down patterns.less into more distinct files, update docs ...
mdo authored
484 }
485 }
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
486
487 // Grid System
488 // -----------
489
ce292a8 @mdo fix overflowing thumbnails in responsive <767px layouts
mdo authored
490 // Centered container element
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
491 .container-fixed() {
492 margin-left: auto;
493 margin-right: auto;
494 .clearfix();
495 }
496
ce292a8 @mdo fix overflowing thumbnails in responsive <767px layouts
mdo authored
497 // Table columns
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
498 .tableColumns(@columnSpan: 1) {
499 float: none; // undo default grid column styles
500 width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
501 margin-left: 0; // undo default grid column styles
502 }
503
ce292a8 @mdo fix overflowing thumbnails in responsive <767px layouts
mdo authored
504 // Make a Grid
505 // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
506 .makeRow() {
507 margin-left: @gridGutterWidth * -1;
508 .clearfix();
509 }
510 .makeColumn(@columns: 1) {
511 float: left;
512 margin-left: @gridGutterWidth;
513 width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
514 }
515
516 // The Grid
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
517 #grid {
518
519 .core (@gridColumnWidth, @gridGutterWidth) {
520
1a8d757 @fat Merge branch 'new_grid' into 2.0.2-wip
fat authored
521 .spanX (@index) when (@index > 0) {
522 (~".span@{index}") { .span(@index); }
523 .spanX(@index - 1);
524 }
525 .spanX (0) {}
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
526
1a8d757 @fat Merge branch 'new_grid' into 2.0.2-wip
fat authored
527 .offsetX (@index) when (@index > 0) {
528 (~".offset@{index}") { .offset(@index); }
529 .offsetX(@index - 1);
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
530 }
1a8d757 @fat Merge branch 'new_grid' into 2.0.2-wip
fat authored
531 .offsetX (0) {}
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
532
533 .offset (@columns) {
534 margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
535 }
536
ae3382d @fat working through new grid implementation...
fat authored
537 .span (@columns) {
538 width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
539 }
540
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
541 .row {
542 margin-left: @gridGutterWidth * -1;
543 .clearfix();
544 }
545
546 [class*="span"] {
547 float: left;
548 margin-left: @gridGutterWidth;
549 }
550
fbebb04 @mdo fix navbar container for default 940px grid per #2194
mdo authored
551 // Set the container width, and override it for fixed navbars in media queries
b86969f @mdo restore fixed navbar container reset to grid mixin, add override for inp...
mdo authored
552 .container,
553 .navbar-fixed-top .container,
ae3382d @fat working through new grid implementation...
fat authored
554 .navbar-fixed-bottom .container { .span(@gridColumns); }
555
1aeca54 @fat new approach to grid with recursive mixins :D
fat authored
556 // generate .spanX and .offsetX
1a8d757 @fat Merge branch 'new_grid' into 2.0.2-wip
fat authored
557 .spanX (@gridColumns);
558 .offsetX (@gridColumns);
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
559
560 }
561
562 .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
563
1a8d757 @fat Merge branch 'new_grid' into 2.0.2-wip
fat authored
564 .spanX (@index) when (@index > 0) {
565 (~"> .span@{index}") { .span(@index); }
566 .spanX(@index - 1);
567 }
568 .spanX (0) {}
569
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
570 .span (@columns) {
0630cd6 @mdo rewrite the fluid grid mixin to be simpler, per #2370
mdo authored
571 width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
572 }
573
574 .row-fluid {
575 width: 100%;
576 .clearfix();
577 > [class*="span"] {
578 float: left;
579 margin-left: @fluidGridGutterWidth;
580 }
581 > [class*="span"]:first-child {
582 margin-left: 0;
583 }
ae3382d @fat working through new grid implementation...
fat authored
584
1aeca54 @fat new approach to grid with recursive mixins :D
fat authored
585 // generate .spanX
1a8d757 @fat Merge branch 'new_grid' into 2.0.2-wip
fat authored
586 .spanX (@gridColumns);
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
587 }
588
589 }
590
591 .input(@gridColumnWidth, @gridGutterWidth) {
592
1a8d757 @fat Merge branch 'new_grid' into 2.0.2-wip
fat authored
593 .spanX (@index) when (@index > 0) {
594 (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
595 .spanX(@index - 1);
596 }
597 .spanX (0) {}
598
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
599 .span(@columns) {
600 width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
601 }
602
603 input,
604 textarea,
605 .uneditable-input {
b86969f @mdo restore fixed navbar container reset to grid mixin, add override for inp...
mdo authored
606 margin-left: 0; // override margin-left from core grid system
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
607 }
608
1a8d757 @fat Merge branch 'new_grid' into 2.0.2-wip
fat authored
609 // generate .spanX
610 .spanX (@gridColumns);
611
5ad5dde @fat rewrite the grid system. Clean shit up tons - only generate 12 columns b...
fat authored
612 }
613
f3b6cf1 @fat Merge branch '2.0.2-wip' of https://github.com/twitter/bootstrap into 2....
fat authored
614 }
Something went wrong with that request. Please try again.