1
0

mixins.less 22 KB

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