1// 2// Mixins 3// -------------------------------------------------- 4 5 6// UTILITY MIXINS 7// -------------------------------------------------- 8 9// Clearfix 10// -------- 11// For clearing floats like a boss h5bp.com/q 12.clearfix { 13 *zoom: 1; 14 &:before, 15 &:after { 16 display: table; 17 content: ""; 18 // Fixes Opera/contenteditable bug: 19 // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 20 line-height: 0; 21 } 22 &:after { 23 clear: both; 24 } 25} 26 27// Webkit-style focus 28// ------------------ 29.tab-focus() { 30 // Default 31 outline: thin dotted #333; 32 // Webkit 33 outline: 5px auto -webkit-focus-ring-color; 34 outline-offset: -2px; 35} 36 37// Center-align a block level element 38// ---------------------------------- 39.center-block() { 40 display: block; 41 margin-left: auto; 42 margin-right: auto; 43} 44 45// IE7 inline-block 46// ---------------- 47.ie7-inline-block() { 48 *display: inline; /* IE7 inline-block hack */ 49 *zoom: 1; 50} 51 52// IE7 likes to collapse whitespace on either side of the inline-block elements. 53// Ems because we're attempting to match the width of a space character. Left 54// version is for form buttons, which typically come after other elements, and 55// right version is for icons, which come before. Applying both is ok, but it will 56// mean that space between those elements will be .6em (~2 space characters) in IE7, 57// instead of the 1 space in other browsers. 58.ie7-restore-left-whitespace() { 59 *margin-left: .3em; 60 61 &:first-child { 62 *margin-left: 0; 63 } 64} 65 66.ie7-restore-right-whitespace() { 67 *margin-right: .3em; 68} 69 70// Sizing shortcuts 71// ------------------------- 72.size(@height, @width) { 73 width: @width; 74 height: @height; 75} 76.square(@size) { 77 .size(@size, @size); 78} 79 80// Placeholder text 81// ------------------------- 82.placeholder(@color: @placeholderText) { 83 &:-moz-placeholder { 84 color: @color; 85 } 86 &:-ms-input-placeholder { 87 color: @color; 88 } 89 &::-webkit-input-placeholder { 90 color: @color; 91 } 92} 93 94// Text overflow 95// ------------------------- 96// Requires inline-block or block for proper styling 97.text-overflow() { 98 overflow: hidden; 99 text-overflow: ellipsis; 100 white-space: nowrap; 101} 102 103// CSS image replacement 104// ------------------------- 105// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 106.hide-text { 107 font: 0/0 a; 108 color: transparent; 109 text-shadow: none; 110 background-color: transparent; 111 border: 0; 112} 113 114 115// FONTS 116// -------------------------------------------------- 117 118#font { 119 #family { 120 .serif() { 121 font-family: @serifFontFamily; 122 } 123 .sans-serif() { 124 font-family: @sansFontFamily; 125 } 126 .monospace() { 127 font-family: @monoFontFamily; 128 } 129 } 130 .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { 131 font-size: @size; 132 font-weight: @weight; 133 line-height: @lineHeight; 134 } 135 .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { 136 #font > #family > .serif; 137 #font > .shorthand(@size, @weight, @lineHeight); 138 } 139 .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { 140 #font > #family > .sans-serif; 141 #font > .shorthand(@size, @weight, @lineHeight); 142 } 143 .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { 144 #font > #family > .monospace; 145 #font > .shorthand(@size, @weight, @lineHeight); 146 } 147} 148 149 150// FORMS 151// -------------------------------------------------- 152 153// Block level inputs 154.input-block-level { 155 display: block; 156 width: 100%; 157 min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) 158 .box-sizing(border-box); // Makes inputs behave like true block-level elements 159} 160 161 162 163// Mixin for form field states 164.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { 165 // Set the text color 166 .control-label, 167 .help-block, 168 .help-inline { 169 color: @textColor; 170 } 171 // Style inputs accordingly 172 .checkbox, 173 .radio, 174 input, 175 select, 176 textarea { 177 color: @textColor; 178 } 179 input, 180 select, 181 textarea { 182 border-color: @borderColor; 183 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 184 &:focus { 185 border-color: darken(@borderColor, 10%); 186 @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); 187 .box-shadow(@shadow); 188 } 189 } 190 // Give a small background color for input-prepend/-append 191 .input-prepend .add-on, 192 .input-append .add-on { 193 color: @textColor; 194 background-color: @backgroundColor; 195 border-color: @textColor; 196 } 197} 198 199 200 201// CSS3 PROPERTIES 202// -------------------------------------------------- 203 204// Border Radius 205.border-radius(@radius) { 206 -webkit-border-radius: @radius; 207 -moz-border-radius: @radius; 208 border-radius: @radius; 209} 210 211// Single Corner Border Radius 212.border-top-left-radius(@radius) { 213 -webkit-border-top-left-radius: @radius; 214 -moz-border-radius-topleft: @radius; 215 border-top-left-radius: @radius; 216} 217.border-top-right-radius(@radius) { 218 -webkit-border-top-right-radius: @radius; 219 -moz-border-radius-topright: @radius; 220 border-top-right-radius: @radius; 221} 222.border-bottom-right-radius(@radius) { 223 -webkit-border-bottom-right-radius: @radius; 224 -moz-border-radius-bottomright: @radius; 225 border-bottom-right-radius: @radius; 226} 227.border-bottom-left-radius(@radius) { 228 -webkit-border-bottom-left-radius: @radius; 229 -moz-border-radius-bottomleft: @radius; 230 border-bottom-left-radius: @radius; 231} 232 233// Single Side Border Radius 234.border-top-radius(@radius) { 235 .border-top-right-radius(@radius); 236 .border-top-left-radius(@radius); 237} 238.border-right-radius(@radius) { 239 .border-top-right-radius(@radius); 240 .border-bottom-right-radius(@radius); 241} 242.border-bottom-radius(@radius) { 243 .border-bottom-right-radius(@radius); 244 .border-bottom-left-radius(@radius); 245} 246.border-left-radius(@radius) { 247 .border-top-left-radius(@radius); 248 .border-bottom-left-radius(@radius); 249} 250 251// Drop shadows 252.box-shadow(@shadow) { 253 -webkit-box-shadow: @shadow; 254 -moz-box-shadow: @shadow; 255 box-shadow: @shadow; 256} 257 258// Transitions 259.transition(@transition) { 260 -webkit-transition: @transition; 261 -moz-transition: @transition; 262 -o-transition: @transition; 263 transition: @transition; 264} 265.transition-delay(@transition-delay) { 266 -webkit-transition-delay: @transition-delay; 267 -moz-transition-delay: @transition-delay; 268 -o-transition-delay: @transition-delay; 269 transition-delay: @transition-delay; 270} 271.transition-duration(@transition-duration) { 272 -webkit-transition-duration: @transition-duration; 273 -moz-transition-duration: @transition-duration; 274 -o-transition-duration: @transition-duration; 275 transition-duration: @transition-duration; 276} 277 278// Transformations 279.rotate(@degrees) { 280 -webkit-transform: rotate(@degrees); 281 -moz-transform: rotate(@degrees); 282 -ms-transform: rotate(@degrees); 283 -o-transform: rotate(@degrees); 284 transform: rotate(@degrees); 285} 286.scale(@ratio) { 287 -webkit-transform: scale(@ratio); 288 -moz-transform: scale(@ratio); 289 -ms-transform: scale(@ratio); 290 -o-transform: scale(@ratio); 291 transform: scale(@ratio); 292} 293.translate(@x, @y) { 294 -webkit-transform: translate(@x, @y); 295 -moz-transform: translate(@x, @y); 296 -ms-transform: translate(@x, @y); 297 -o-transform: translate(@x, @y); 298 transform: translate(@x, @y); 299} 300.skew(@x, @y) { 301 -webkit-transform: skew(@x, @y); 302 -moz-transform: skew(@x, @y); 303 -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885 304 -o-transform: skew(@x, @y); 305 transform: skew(@x, @y); 306 -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 307} 308.translate3d(@x, @y, @z) { 309 -webkit-transform: translate3d(@x, @y, @z); 310 -moz-transform: translate3d(@x, @y, @z); 311 -o-transform: translate3d(@x, @y, @z); 312 transform: translate3d(@x, @y, @z); 313} 314 315// Backface visibility 316// Prevent browsers from flickering when using CSS 3D transforms. 317// Default value is `visible`, but can be changed to `hidden 318// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples 319.backface-visibility(@visibility){ 320 -webkit-backface-visibility: @visibility; 321 -moz-backface-visibility: @visibility; 322 backface-visibility: @visibility; 323} 324 325// Background clipping 326// Heads up: FF 3.6 and under need "padding" instead of "padding-box" 327.background-clip(@clip) { 328 -webkit-background-clip: @clip; 329 -moz-background-clip: @clip; 330 background-clip: @clip; 331} 332 333// Background sizing 334.background-size(@size) { 335 -webkit-background-size: @size; 336 -moz-background-size: @size; 337 -o-background-size: @size; 338 background-size: @size; 339} 340 341 342// Box sizing 343.box-sizing(@boxmodel) { 344 -webkit-box-sizing: @boxmodel; 345 -moz-box-sizing: @boxmodel; 346 box-sizing: @boxmodel; 347} 348 349// User select 350// For selecting text on the page 351.user-select(@select) { 352 -webkit-user-select: @select; 353 -moz-user-select: @select; 354 -ms-user-select: @select; 355 -o-user-select: @select; 356 user-select: @select; 357} 358 359// Resize anything 360.resizable(@direction) { 361 resize: @direction; // Options: horizontal, vertical, both 362 overflow: auto; // Safari fix 363} 364 365// CSS3 Content Columns 366.content-columns(@columnCount, @columnGap: @gridGutterWidth) { 367 -webkit-column-count: @columnCount; 368 -moz-column-count: @columnCount; 369 column-count: @columnCount; 370 -webkit-column-gap: @columnGap; 371 -moz-column-gap: @columnGap; 372 column-gap: @columnGap; 373} 374 375// Optional hyphenation 376.hyphens(@mode: auto) { 377 word-wrap: break-word; 378 -webkit-hyphens: @mode; 379 -moz-hyphens: @mode; 380 -ms-hyphens: @mode; 381 -o-hyphens: @mode; 382 hyphens: @mode; 383} 384 385// Opacity 386.opacity(@opacity) { 387 opacity: @opacity / 100; 388 filter: ~"alpha(opacity=@{opacity})"; 389} 390 391 392 393// BACKGROUNDS 394// -------------------------------------------------- 395 396// Add an alphatransparency value to any background or border color (via Elyse Holladay) 397#translucent { 398 .background(@color: @white, @alpha: 1) { 399 background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); 400 } 401 .border(@color: @white, @alpha: 1) { 402 border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); 403 .background-clip(padding-box); 404 } 405} 406 407// Gradient Bar Colors for buttons and alerts 408.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { 409 color: @textColor; 410 text-shadow: @textShadow; 411 #gradient > .vertical(@primaryColor, @secondaryColor); 412 border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); 413 border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); 414} 415 416// Gradients 417#gradient { 418 .horizontal(@startColor: #555, @endColor: #333) { 419 background-color: @endColor; 420 background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ 421 background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ 422 background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 423 background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 424 background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 425 background-repeat: repeat-x; 426 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down 427 } 428 .vertical(@startColor: #555, @endColor: #333) { 429 background-color: mix(@startColor, @endColor, 60%); 430 background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ 431 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ 432 background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 433 background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 434 background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 435 background-repeat: repeat-x; 436 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down 437 } 438 .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { 439 background-color: @endColor; 440 background-repeat: repeat-x; 441 background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ 442 background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 443 background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 444 background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 445 } 446 .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 447 background-color: mix(@midColor, @endColor, 80%); 448 background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); 449 background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); 450 background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); 451 background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); 452 background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); 453 background-repeat: no-repeat; 454 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback 455 } 456 457 .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 458 background-color: mix(@midColor, @endColor, 80%); 459 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); 460 background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); 461 background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); 462 background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); 463 background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); 464 background-repeat: no-repeat; 465 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback 466 } 467 .radial(@innerColor: #555, @outerColor: #333) { 468 background-color: @outerColor; 469 background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); 470 background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); 471 background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); 472 background-image: -o-radial-gradient(circle, @innerColor, @outerColor); 473 background-repeat: no-repeat; 474 } 475 .striped(@color: #555, @angle: 45deg) { 476 background-color: @color; 477 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)); 478 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); 479 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); 480 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); 481 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); 482 } 483} 484// Reset filters for IE 485.reset-filter() { 486 filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); 487} 488 489 490 491// COMPONENT MIXINS 492// -------------------------------------------------- 493 494// Horizontal dividers 495// ------------------------- 496// Dividers (basically an hr) within dropdowns and nav lists 497.nav-divider(@top: #e5e5e5, @bottom: @white) { 498 // IE7 needs a set width since we gave a height. Restricting just 499 // to IE7 to keep the 1px left/right space in other browsers. 500 // It is unclear where IE is getting the extra space that we need 501 // to negative-margin away, but so it goes. 502 *width: 100%; 503 height: 1px; 504 margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px 505 *margin: -5px 0 5px; 506 overflow: hidden; 507 background-color: @top; 508 border-bottom: 1px solid @bottom; 509} 510 511// Button backgrounds 512// ------------------ 513.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { 514 // gradientBar will set the background to a pleasing blend of these, to support IE<=9 515 .gradientBar(@startColor, @endColor, @textColor, @textShadow); 516 *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 517 .reset-filter(); 518 519 // in these cases the gradient won't cover the background, so we override 520 &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { 521 color: @textColor; 522 background-color: @endColor; 523 *background-color: darken(@endColor, 5%); 524 } 525 526 // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves 527 &:active, 528 &.active { 529 background-color: darken(@endColor, 10%) e("\9"); 530 } 531} 532 533// Navbar vertical align 534// ------------------------- 535// Vertically center elements in the navbar. 536// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin. 537.navbarVerticalAlign(@elementHeight) { 538 margin-top: (@navbarHeight - @elementHeight) / 2; 539} 540 541 542 543// Grid System 544// ----------- 545 546// Centered container element 547.container-fixed() { 548 margin-right: auto; 549 margin-left: auto; 550 .clearfix(); 551} 552 553// Table columns 554.tableColumns(@columnSpan: 1) { 555 float: none; // undo default grid column styles 556 width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells 557 margin-left: 0; // undo default grid column styles 558} 559 560// Make a Grid 561// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior 562.makeRow() { 563 margin-left: @gridGutterWidth * -1; 564 .clearfix(); 565} 566.makeColumn(@columns: 1, @offset: 0) { 567 float: left; 568 margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); 569 width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); 570} 571 572// The Grid 573#grid { 574 575 .core (@gridColumnWidth, @gridGutterWidth) { 576 577 .spanX (@index) when (@index > 0) { 578 (~".span@{index}") { .span(@index); } 579 .spanX(@index - 1); 580 } 581 .spanX (0) {} 582 583 .offsetX (@index) when (@index > 0) { 584 (~'.offset@{index}') { .offset(@index); } 585 .offsetX(@index - 1); 586 } 587 .offsetX (0) {} 588 589 .offset (@columns) { 590 margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); 591 } 592 593 .span (@columns) { 594 width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); 595 } 596 597 .row { 598 margin-left: @gridGutterWidth * -1; 599 .clearfix(); 600 } 601 602 [class*="span"] { 603 float: left; 604 min-height: 1px; // prevent collapsing columns 605 margin-left: @gridGutterWidth; 606 } 607 608 // Set the container width, and override it for fixed navbars in media queries 609 .container, 610 .navbar-static-top .container, 611 .navbar-fixed-top .container, 612 .navbar-fixed-bottom .container { .span(@gridColumns); } 613 614 // generate .spanX and .offsetX 615 .spanX (@gridColumns); 616 .offsetX (@gridColumns); 617 618 } 619 620 .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { 621 622 .spanX (@index) when (@index > 0) { 623 (~'.span@{index}') { .span(@index); } 624 .spanX(@index - 1); 625 } 626 .spanX (0) {} 627 628 .offsetX (@index) when (@index > 0) { 629 (~'.offset@{index}') { .offset(@index); } 630 (~'.offset@{index}:first-child') { .offsetFirstChild(@index); } 631 .offsetX(@index - 1); 632 } 633 .offsetX (0) {} 634 635 .offset (@columns) { 636 margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); 637 *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); 638 } 639 640 .offsetFirstChild (@columns) { 641 margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); 642 *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); 643 } 644 645 .span (@columns) { 646 width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); 647 *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); 648 } 649 650 .row-fluid { 651 width: 100%; 652 .clearfix(); 653 [class*="span"] { 654 .input-block-level(); 655 float: left; 656 margin-left: @fluidGridGutterWidth; 657 *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); 658 } 659 [class*="span"]:first-child { 660 margin-left: 0; 661 } 662 663 // Space grid-sized controls properly if multiple per line 664 .controls-row [class*="span"] + [class*="span"] { 665 margin-left: @fluidGridGutterWidth; 666 } 667 668 // generate .spanX and .offsetX 669 .spanX (@gridColumns); 670 .offsetX (@gridColumns); 671 } 672 673 } 674 675 .input(@gridColumnWidth, @gridGutterWidth) { 676 677 .spanX (@index) when (@index > 0) { 678 (~'input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}') { .span(@index); } 679 .spanX(@index - 1); 680 } 681 .spanX (0) {} 682 683 .span(@columns) { 684 width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14; 685 } 686 687 input, 688 textarea, 689 .uneditable-input { 690 margin-left: 0; // override margin-left from core grid system 691 } 692 693 // Space grid-sized controls properly if multiple per line 694 .controls-row [class*="span"] + [class*="span"] { 695 margin-left: @gridGutterWidth; 696 } 697 698 // generate .spanX 699 .spanX (@gridColumns); 700 701 } 702} 703