You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

929 lines
26 KiB

  1. //
  2. // Mixins
  3. // --------------------------------------------------
  4. // Utilities
  5. // -------------------------
  6. // Clearfix
  7. // Source: http://nicolasgallagher.com/micro-clearfix-hack/
  8. //
  9. // For modern browsers
  10. // 1. The space content is one way to avoid an Opera bug when the
  11. // contenteditable attribute is included anywhere else in the document.
  12. // Otherwise it causes space to appear at the top and bottom of elements
  13. // that are clearfixed.
  14. // 2. The use of `table` rather than `block` is only necessary if using
  15. // `:before` to contain the top-margins of child elements.
  16. .clearfix() {
  17. &:before,
  18. &:after {
  19. content: " "; // 1
  20. display: table; // 2
  21. }
  22. &:after {
  23. clear: both;
  24. }
  25. }
  26. // WebKit-style focus
  27. .tab-focus() {
  28. // Default
  29. outline: thin dotted;
  30. // WebKit
  31. outline: 5px auto -webkit-focus-ring-color;
  32. outline-offset: -2px;
  33. }
  34. // Center-align a block level element
  35. .center-block() {
  36. display: block;
  37. margin-left: auto;
  38. margin-right: auto;
  39. }
  40. // Sizing shortcuts
  41. .size(@width; @height) {
  42. width: @width;
  43. height: @height;
  44. }
  45. .square(@size) {
  46. .size(@size; @size);
  47. }
  48. // Placeholder text
  49. .placeholder(@color: @input-color-placeholder) {
  50. &::-moz-placeholder { color: @color; // Firefox
  51. opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
  52. &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
  53. &::-webkit-input-placeholder { color: @color; } // Safari and Chrome
  54. }
  55. // Text overflow
  56. // Requires inline-block or block for proper styling
  57. .text-overflow() {
  58. overflow: hidden;
  59. text-overflow: ellipsis;
  60. white-space: nowrap;
  61. }
  62. // CSS image replacement
  63. //
  64. // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
  65. // mixins being reused as classes with the same name, this doesn't hold up. As
  66. // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
  67. // that we cannot chain the mixins together in Less, so they are repeated.
  68. //
  69. // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
  70. // Deprecated as of v3.0.1 (will be removed in v4)
  71. .hide-text() {
  72. font: ~"0/0" a;
  73. color: transparent;
  74. text-shadow: none;
  75. background-color: transparent;
  76. border: 0;
  77. }
  78. // New mixin to use as of v3.0.1
  79. .text-hide() {
  80. .hide-text();
  81. }
  82. // CSS3 PROPERTIES
  83. // --------------------------------------------------
  84. // Single side border-radius
  85. .border-top-radius(@radius) {
  86. border-top-right-radius: @radius;
  87. border-top-left-radius: @radius;
  88. }
  89. .border-right-radius(@radius) {
  90. border-bottom-right-radius: @radius;
  91. border-top-right-radius: @radius;
  92. }
  93. .border-bottom-radius(@radius) {
  94. border-bottom-right-radius: @radius;
  95. border-bottom-left-radius: @radius;
  96. }
  97. .border-left-radius(@radius) {
  98. border-bottom-left-radius: @radius;
  99. border-top-left-radius: @radius;
  100. }
  101. // Drop shadows
  102. //
  103. // Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
  104. // supported browsers that have box shadow capabilities now support the
  105. // standard `box-shadow` property.
  106. .box-shadow(@shadow) {
  107. -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
  108. box-shadow: @shadow;
  109. }
  110. // Transitions
  111. .transition(@transition) {
  112. -webkit-transition: @transition;
  113. transition: @transition;
  114. }
  115. .transition-property(@transition-property) {
  116. -webkit-transition-property: @transition-property;
  117. transition-property: @transition-property;
  118. }
  119. .transition-delay(@transition-delay) {
  120. -webkit-transition-delay: @transition-delay;
  121. transition-delay: @transition-delay;
  122. }
  123. .transition-duration(@transition-duration) {
  124. -webkit-transition-duration: @transition-duration;
  125. transition-duration: @transition-duration;
  126. }
  127. .transition-transform(@transition) {
  128. -webkit-transition: -webkit-transform @transition;
  129. -moz-transition: -moz-transform @transition;
  130. -o-transition: -o-transform @transition;
  131. transition: transform @transition;
  132. }
  133. // Transformations
  134. .rotate(@degrees) {
  135. -webkit-transform: rotate(@degrees);
  136. -ms-transform: rotate(@degrees); // IE9 only
  137. transform: rotate(@degrees);
  138. }
  139. .scale(@ratio; @ratio-y...) {
  140. -webkit-transform: scale(@ratio, @ratio-y);
  141. -ms-transform: scale(@ratio, @ratio-y); // IE9 only
  142. transform: scale(@ratio, @ratio-y);
  143. }
  144. .translate(@x; @y) {
  145. -webkit-transform: translate(@x, @y);
  146. -ms-transform: translate(@x, @y); // IE9 only
  147. transform: translate(@x, @y);
  148. }
  149. .skew(@x; @y) {
  150. -webkit-transform: skew(@x, @y);
  151. -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
  152. transform: skew(@x, @y);
  153. }
  154. .translate3d(@x; @y; @z) {
  155. -webkit-transform: translate3d(@x, @y, @z);
  156. transform: translate3d(@x, @y, @z);
  157. }
  158. .rotateX(@degrees) {
  159. -webkit-transform: rotateX(@degrees);
  160. -ms-transform: rotateX(@degrees); // IE9 only
  161. transform: rotateX(@degrees);
  162. }
  163. .rotateY(@degrees) {
  164. -webkit-transform: rotateY(@degrees);
  165. -ms-transform: rotateY(@degrees); // IE9 only
  166. transform: rotateY(@degrees);
  167. }
  168. .perspective(@perspective) {
  169. -webkit-perspective: @perspective;
  170. -moz-perspective: @perspective;
  171. perspective: @perspective;
  172. }
  173. .perspective-origin(@perspective) {
  174. -webkit-perspective-origin: @perspective;
  175. -moz-perspective-origin: @perspective;
  176. perspective-origin: @perspective;
  177. }
  178. .transform-origin(@origin) {
  179. -webkit-transform-origin: @origin;
  180. -moz-transform-origin: @origin;
  181. -ms-transform-origin: @origin; // IE9 only
  182. transform-origin: @origin;
  183. }
  184. // Animations
  185. .animation(@animation) {
  186. -webkit-animation: @animation;
  187. animation: @animation;
  188. }
  189. .animation-name(@name) {
  190. -webkit-animation-name: @name;
  191. animation-name: @name;
  192. }
  193. .animation-duration(@duration) {
  194. -webkit-animation-duration: @duration;
  195. animation-duration: @duration;
  196. }
  197. .animation-timing-function(@timing-function) {
  198. -webkit-animation-timing-function: @timing-function;
  199. animation-timing-function: @timing-function;
  200. }
  201. .animation-delay(@delay) {
  202. -webkit-animation-delay: @delay;
  203. animation-delay: @delay;
  204. }
  205. .animation-iteration-count(@iteration-count) {
  206. -webkit-animation-iteration-count: @iteration-count;
  207. animation-iteration-count: @iteration-count;
  208. }
  209. .animation-direction(@direction) {
  210. -webkit-animation-direction: @direction;
  211. animation-direction: @direction;
  212. }
  213. // Backface visibility
  214. // Prevent browsers from flickering when using CSS 3D transforms.
  215. // Default value is `visible`, but can be changed to `hidden`
  216. .backface-visibility(@visibility){
  217. -webkit-backface-visibility: @visibility;
  218. -moz-backface-visibility: @visibility;
  219. backface-visibility: @visibility;
  220. }
  221. // Box sizing
  222. .box-sizing(@boxmodel) {
  223. -webkit-box-sizing: @boxmodel;
  224. -moz-box-sizing: @boxmodel;
  225. box-sizing: @boxmodel;
  226. }
  227. // User select
  228. // For selecting text on the page
  229. .user-select(@select) {
  230. -webkit-user-select: @select;
  231. -moz-user-select: @select;
  232. -ms-user-select: @select; // IE10+
  233. user-select: @select;
  234. }
  235. // Resize anything
  236. .resizable(@direction) {
  237. resize: @direction; // Options: horizontal, vertical, both
  238. overflow: auto; // Safari fix
  239. }
  240. // CSS3 Content Columns
  241. .content-columns(@column-count; @column-gap: @grid-gutter-width) {
  242. -webkit-column-count: @column-count;
  243. -moz-column-count: @column-count;
  244. column-count: @column-count;
  245. -webkit-column-gap: @column-gap;
  246. -moz-column-gap: @column-gap;
  247. column-gap: @column-gap;
  248. }
  249. // Optional hyphenation
  250. .hyphens(@mode: auto) {
  251. word-wrap: break-word;
  252. -webkit-hyphens: @mode;
  253. -moz-hyphens: @mode;
  254. -ms-hyphens: @mode; // IE10+
  255. -o-hyphens: @mode;
  256. hyphens: @mode;
  257. }
  258. // Opacity
  259. .opacity(@opacity) {
  260. opacity: @opacity;
  261. // IE8 filter
  262. @opacity-ie: (@opacity * 100);
  263. filter: ~"alpha(opacity=@{opacity-ie})";
  264. }
  265. // GRADIENTS
  266. // --------------------------------------------------
  267. #gradient {
  268. // Horizontal gradient, from left to right
  269. //
  270. // Creates two color stops, start and end, by specifying a color and position for each color stop.
  271. // Color stops are not available in IE9 and below.
  272. .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
  273. background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
  274. background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  275. background-repeat: repeat-x;
  276. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
  277. }
  278. // Vertical gradient, from top to bottom
  279. //
  280. // Creates two color stops, start and end, by specifying a color and position for each color stop.
  281. // Color stops are not available in IE9 and below.
  282. .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
  283. background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
  284. background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  285. background-repeat: repeat-x;
  286. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
  287. }
  288. .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
  289. background-repeat: repeat-x;
  290. background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
  291. background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  292. }
  293. .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
  294. background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
  295. background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
  296. background-repeat: no-repeat;
  297. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  298. }
  299. .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
  300. background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
  301. background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
  302. background-repeat: no-repeat;
  303. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  304. }
  305. .radial(@inner-color: #555; @outer-color: #333) {
  306. background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
  307. background-image: radial-gradient(circle, @inner-color, @outer-color);
  308. background-repeat: no-repeat;
  309. }
  310. .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
  311. background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
  312. background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
  313. }
  314. }
  315. // Reset filters for IE
  316. //
  317. // When you need to remove a gradient background, do not forget to use this to reset
  318. // the IE filter for IE9 and below.
  319. .reset-filter() {
  320. filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
  321. }
  322. // Retina images
  323. //
  324. // Short retina mixin for setting background-image and -size
  325. .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  326. background-image: url("@{file-1x}");
  327. @media
  328. only screen and (-webkit-min-device-pixel-ratio: 2),
  329. only screen and ( min--moz-device-pixel-ratio: 2),
  330. only screen and ( -o-min-device-pixel-ratio: 2/1),
  331. only screen and ( min-device-pixel-ratio: 2),
  332. only screen and ( min-resolution: 192dpi),
  333. only screen and ( min-resolution: 2dppx) {
  334. background-image: url("@{file-2x}");
  335. background-size: @width-1x @height-1x;
  336. }
  337. }
  338. // Responsive image
  339. //
  340. // Keep images from scaling beyond the width of their parents.
  341. .img-responsive(@display: block) {
  342. display: @display;
  343. max-width: 100%; // Part 1: Set a maximum relative to the parent
  344. height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
  345. }
  346. // COMPONENT MIXINS
  347. // --------------------------------------------------
  348. // Horizontal dividers
  349. // -------------------------
  350. // Dividers (basically an hr) within dropdowns and nav lists
  351. .nav-divider(@color: #e5e5e5) {
  352. height: 1px;
  353. margin: ((@line-height-computed / 2) - 1) 0;
  354. overflow: hidden;
  355. background-color: @color;
  356. }
  357. // Panels
  358. // -------------------------
  359. .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
  360. border-color: @border;
  361. & > .panel-heading {
  362. color: @heading-text-color;
  363. background-color: @heading-bg-color;
  364. border-color: @heading-border;
  365. + .panel-collapse .panel-body {
  366. border-top-color: @border;
  367. }
  368. }
  369. & > .panel-footer {
  370. + .panel-collapse .panel-body {
  371. border-bottom-color: @border;
  372. }
  373. }
  374. }
  375. // Alerts
  376. // -------------------------
  377. .alert-variant(@background; @border; @text-color) {
  378. background-color: @background;
  379. border-color: @border;
  380. color: @text-color;
  381. hr {
  382. border-top-color: darken(@border, 5%);
  383. }
  384. .alert-link {
  385. color: darken(@text-color, 10%);
  386. }
  387. }
  388. // Tables
  389. // -------------------------
  390. .table-row-variant(@state; @background) {
  391. // Exact selectors below required to override `.table-striped` and prevent
  392. // inheritance to nested tables.
  393. .table > thead > tr,
  394. .table > tbody > tr,
  395. .table > tfoot > tr {
  396. > td.@{state},
  397. > th.@{state},
  398. &.@{state} > td,
  399. &.@{state} > th {
  400. background-color: @background;
  401. }
  402. }
  403. // Hover states for `.table-hover`
  404. // Note: this is not available for cells or rows within `thead` or `tfoot`.
  405. .table-hover > tbody > tr {
  406. > td.@{state}:hover,
  407. > th.@{state}:hover,
  408. &.@{state}:hover > td,
  409. &.@{state}:hover > th {
  410. background-color: darken(@background, 5%);
  411. }
  412. }
  413. }
  414. // List Groups
  415. // -------------------------
  416. .list-group-item-variant(@state; @background; @color) {
  417. .list-group-item-@{state} {
  418. color: @color;
  419. background-color: @background;
  420. a& {
  421. color: @color;
  422. .list-group-item-heading { color: inherit; }
  423. &:hover,
  424. &:focus {
  425. color: @color;
  426. background-color: darken(@background, 5%);
  427. }
  428. &.active,
  429. &.active:hover,
  430. &.active:focus {
  431. color: #fff;
  432. background-color: @color;
  433. border-color: @color;
  434. }
  435. }
  436. }
  437. }
  438. // Button variants
  439. // -------------------------
  440. // Easily pump out default styles, as well as :hover, :focus, :active,
  441. // and disabled options for all buttons
  442. .button-variant(@color; @background; @border) {
  443. color: @color;
  444. background-color: @background;
  445. border-color: @border;
  446. &:hover,
  447. &:focus,
  448. &:active,
  449. &.active,
  450. .open .dropdown-toggle& {
  451. color: @color;
  452. background-color: darken(@background, 8%);
  453. border-color: darken(@border, 12%);
  454. }
  455. &:active,
  456. &.active,
  457. .open .dropdown-toggle& {
  458. background-image: none;
  459. }
  460. &.disabled,
  461. &[disabled],
  462. fieldset[disabled] & {
  463. &,
  464. &:hover,
  465. &:focus,
  466. &:active,
  467. &.active {
  468. background-color: @background;
  469. border-color: @border;
  470. }
  471. }
  472. .badge {
  473. color: @background;
  474. background-color: @color;
  475. }
  476. }
  477. // Button sizes
  478. // -------------------------
  479. .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  480. padding: @padding-vertical @padding-horizontal;
  481. font-size: @font-size;
  482. line-height: @line-height;
  483. border-radius: @border-radius;
  484. }
  485. // Pagination
  486. // -------------------------
  487. .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
  488. > li {
  489. > a,
  490. > span {
  491. padding: @padding-vertical @padding-horizontal;
  492. font-size: @font-size;
  493. }
  494. &:first-child {
  495. > a,
  496. > span {
  497. .border-left-radius(@border-radius);
  498. }
  499. }
  500. &:last-child {
  501. > a,
  502. > span {
  503. .border-right-radius(@border-radius);
  504. }
  505. }
  506. }
  507. }
  508. // Labels
  509. // -------------------------
  510. .label-variant(@color) {
  511. background-color: @color;
  512. &[href] {
  513. &:hover,
  514. &:focus {
  515. background-color: darken(@color, 10%);
  516. }
  517. }
  518. }
  519. // Contextual backgrounds
  520. // -------------------------
  521. .bg-variant(@color) {
  522. background-color: @color;
  523. a&:hover {
  524. background-color: darken(@color, 10%);
  525. }
  526. }
  527. // Typography
  528. // -------------------------
  529. .text-emphasis-variant(@color) {
  530. color: @color;
  531. a&:hover {
  532. color: darken(@color, 10%);
  533. }
  534. }
  535. // Navbar vertical align
  536. // -------------------------
  537. // Vertically center elements in the navbar.
  538. // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
  539. .navbar-vertical-align(@element-height) {
  540. margin-top: ((@navbar-height - @element-height) / 2);
  541. margin-bottom: ((@navbar-height - @element-height) / 2);
  542. }
  543. // Progress bars
  544. // -------------------------
  545. .progress-bar-variant(@color) {
  546. background-color: @color;
  547. .progress-striped & {
  548. #gradient > .striped();
  549. }
  550. }
  551. // Responsive utilities
  552. // -------------------------
  553. // More easily include all the states for responsive-utilities.less.
  554. .responsive-visibility() {
  555. display: block !important;
  556. table& { display: table; }
  557. tr& { display: table-row !important; }
  558. th&,
  559. td& { display: table-cell !important; }
  560. }
  561. .responsive-invisibility() {
  562. display: none !important;
  563. }
  564. // Grid System
  565. // -----------
  566. // Centered container element
  567. .container-fixed() {
  568. margin-right: auto;
  569. margin-left: auto;
  570. padding-left: (@grid-gutter-width / 2);
  571. padding-right: (@grid-gutter-width / 2);
  572. &:extend(.clearfix all);
  573. }
  574. // Creates a wrapper for a series of columns
  575. .make-row(@gutter: @grid-gutter-width) {
  576. margin-left: (@gutter / -2);
  577. margin-right: (@gutter / -2);
  578. &:extend(.clearfix all);
  579. }
  580. // Generate the extra small columns
  581. .make-xs-column(@columns; @gutter: @grid-gutter-width) {
  582. position: relative;
  583. float: left;
  584. width: percentage((@columns / @grid-columns));
  585. min-height: 1px;
  586. padding-left: (@gutter / 2);
  587. padding-right: (@gutter / 2);
  588. }
  589. .make-xs-column-offset(@columns) {
  590. @media (min-width: @screen-xs-min) {
  591. margin-left: percentage((@columns / @grid-columns));
  592. }
  593. }
  594. .make-xs-column-push(@columns) {
  595. @media (min-width: @screen-xs-min) {
  596. left: percentage((@columns / @grid-columns));
  597. }
  598. }
  599. .make-xs-column-pull(@columns) {
  600. @media (min-width: @screen-xs-min) {
  601. right: percentage((@columns / @grid-columns));
  602. }
  603. }
  604. // Generate the small columns
  605. .make-sm-column(@columns; @gutter: @grid-gutter-width) {
  606. position: relative;
  607. min-height: 1px;
  608. padding-left: (@gutter / 2);
  609. padding-right: (@gutter / 2);
  610. @media (min-width: @screen-sm-min) {
  611. float: left;
  612. width: percentage((@columns / @grid-columns));
  613. }
  614. }
  615. .make-sm-column-offset(@columns) {
  616. @media (min-width: @screen-sm-min) {
  617. margin-left: percentage((@columns / @grid-columns));
  618. }
  619. }
  620. .make-sm-column-push(@columns) {
  621. @media (min-width: @screen-sm-min) {
  622. left: percentage((@columns / @grid-columns));
  623. }
  624. }
  625. .make-sm-column-pull(@columns) {
  626. @media (min-width: @screen-sm-min) {
  627. right: percentage((@columns / @grid-columns));
  628. }
  629. }
  630. // Generate the medium columns
  631. .make-md-column(@columns; @gutter: @grid-gutter-width) {
  632. position: relative;
  633. min-height: 1px;
  634. padding-left: (@gutter / 2);
  635. padding-right: (@gutter / 2);
  636. @media (min-width: @screen-md-min) {
  637. float: left;
  638. width: percentage((@columns / @grid-columns));
  639. }
  640. }
  641. .make-md-column-offset(@columns) {
  642. @media (min-width: @screen-md-min) {
  643. margin-left: percentage((@columns / @grid-columns));
  644. }
  645. }
  646. .make-md-column-push(@columns) {
  647. @media (min-width: @screen-md-min) {
  648. left: percentage((@columns / @grid-columns));
  649. }
  650. }
  651. .make-md-column-pull(@columns) {
  652. @media (min-width: @screen-md-min) {
  653. right: percentage((@columns / @grid-columns));
  654. }
  655. }
  656. // Generate the large columns
  657. .make-lg-column(@columns; @gutter: @grid-gutter-width) {
  658. position: relative;
  659. min-height: 1px;
  660. padding-left: (@gutter / 2);
  661. padding-right: (@gutter / 2);
  662. @media (min-width: @screen-lg-min) {
  663. float: left;
  664. width: percentage((@columns / @grid-columns));
  665. }
  666. }
  667. .make-lg-column-offset(@columns) {
  668. @media (min-width: @screen-lg-min) {
  669. margin-left: percentage((@columns / @grid-columns));
  670. }
  671. }
  672. .make-lg-column-push(@columns) {
  673. @media (min-width: @screen-lg-min) {
  674. left: percentage((@columns / @grid-columns));
  675. }
  676. }
  677. .make-lg-column-pull(@columns) {
  678. @media (min-width: @screen-lg-min) {
  679. right: percentage((@columns / @grid-columns));
  680. }
  681. }
  682. // Framework grid generation
  683. //
  684. // Used only by Bootstrap to generate the correct number of grid classes given
  685. // any value of `@grid-columns`.
  686. .make-grid-columns() {
  687. // Common styles for all sizes of grid columns, widths 1-12
  688. .col(@index) when (@index = 1) { // initial
  689. @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
  690. .col((@index + 1), @item);
  691. }
  692. .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
  693. @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
  694. .col((@index + 1), ~"@{list}, @{item}");
  695. }
  696. .col(@index, @list) when (@index > @grid-columns) { // terminal
  697. @{list} {
  698. position: relative;
  699. // Prevent columns from collapsing when empty
  700. min-height: 1px;
  701. // Inner gutter via padding
  702. padding-left: (@grid-gutter-width / 2);
  703. padding-right: (@grid-gutter-width / 2);
  704. }
  705. }
  706. .col(1); // kickstart it
  707. }
  708. .float-grid-columns(@class) {
  709. .col(@index) when (@index = 1) { // initial
  710. @item: ~".col-@{class}-@{index}";
  711. .col((@index + 1), @item);
  712. }
  713. .col(@index, @list) when (@index =< @grid-columns) { // general
  714. @item: ~".col-@{class}-@{index}";
  715. .col((@index + 1), ~"@{list}, @{item}");
  716. }
  717. .col(@index, @list) when (@index > @grid-columns) { // terminal
  718. @{list} {
  719. float: left;
  720. }
  721. }
  722. .col(1); // kickstart it
  723. }
  724. .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  725. .col-@{class}-@{index} {
  726. width: percentage((@index / @grid-columns));
  727. }
  728. }
  729. .calc-grid-column(@index, @class, @type) when (@type = push) {
  730. .col-@{class}-push-@{index} {
  731. left: percentage((@index / @grid-columns));
  732. }
  733. }
  734. .calc-grid-column(@index, @class, @type) when (@type = pull) {
  735. .col-@{class}-pull-@{index} {
  736. right: percentage((@index / @grid-columns));
  737. }
  738. }
  739. .calc-grid-column(@index, @class, @type) when (@type = offset) {
  740. .col-@{class}-offset-@{index} {
  741. margin-left: percentage((@index / @grid-columns));
  742. }
  743. }
  744. // Basic looping in LESS
  745. .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  746. .calc-grid-column(@index, @class, @type);
  747. // next iteration
  748. .loop-grid-columns((@index - 1), @class, @type);
  749. }
  750. // Create grid for specific class
  751. .make-grid(@class) {
  752. .float-grid-columns(@class);
  753. .loop-grid-columns(@grid-columns, @class, width);
  754. .loop-grid-columns(@grid-columns, @class, pull);
  755. .loop-grid-columns(@grid-columns, @class, push);
  756. .loop-grid-columns(@grid-columns, @class, offset);
  757. }
  758. // Form validation states
  759. //
  760. // Used in forms.less to generate the form validation CSS for warnings, errors,
  761. // and successes.
  762. .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
  763. // Color the label and help text
  764. .help-block,
  765. .control-label,
  766. .radio,
  767. .checkbox,
  768. .radio-inline,
  769. .checkbox-inline {
  770. color: @text-color;
  771. }
  772. // Set the border and box shadow on specific inputs to match
  773. .form-control {
  774. border-color: @border-color;
  775. .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
  776. &:focus {
  777. border-color: darken(@border-color, 10%);
  778. @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
  779. .box-shadow(@shadow);
  780. }
  781. }
  782. // Set validation states also for addons
  783. .input-group-addon {
  784. color: @text-color;
  785. border-color: @border-color;
  786. background-color: @background-color;
  787. }
  788. // Optional feedback icon
  789. .form-control-feedback {
  790. color: @text-color;
  791. }
  792. }
  793. // Form control focus state
  794. //
  795. // Generate a customized focus state and for any input with the specified color,
  796. // which defaults to the `@input-focus-border` variable.
  797. //
  798. // We highly encourage you to not customize the default value, but instead use
  799. // this to tweak colors on an as-needed basis. This aesthetic change is based on
  800. // WebKit's default styles, but applicable to a wider range of browsers. Its
  801. // usability and accessibility should be taken into account with any change.
  802. //
  803. // Example usage: change the default blue border and shadow to white for better
  804. // contrast against a dark gray background.
  805. .form-control-focus(@color: @input-border-focus) {
  806. @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  807. &:focus {
  808. border-color: @color;
  809. outline: 0;
  810. .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  811. }
  812. }
  813. // Form control sizing
  814. //
  815. // Relative text size, padding, and border-radii changes for form controls. For
  816. // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
  817. // element gets special love because it's special, and that's a fact!
  818. .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  819. height: @input-height;
  820. padding: @padding-vertical @padding-horizontal;
  821. font-size: @font-size;
  822. line-height: @line-height;
  823. border-radius: @border-radius;
  824. select& {
  825. height: @input-height;
  826. line-height: @input-height;
  827. }
  828. textarea&,
  829. select[multiple]& {
  830. height: auto;
  831. }
  832. }