1.1 --- a/bootstrap-source/bootstrap-3.0.3/less/mixins.less Sat Jan 18 12:34:36 2014 +0100
1.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
1.3 @@ -1,845 +0,0 @@
1.4 -//
1.5 -// Mixins
1.6 -// --------------------------------------------------
1.7 -
1.8 -
1.9 -// Utilities
1.10 -// -------------------------
1.11 -
1.12 -// Clearfix
1.13 -// Source: http://nicolasgallagher.com/micro-clearfix-hack/
1.14 -//
1.15 -// For modern browsers
1.16 -// 1. The space content is one way to avoid an Opera bug when the
1.17 -// contenteditable attribute is included anywhere else in the document.
1.18 -// Otherwise it causes space to appear at the top and bottom of elements
1.19 -// that are clearfixed.
1.20 -// 2. The use of `table` rather than `block` is only necessary if using
1.21 -// `:before` to contain the top-margins of child elements.
1.22 -.clearfix() {
1.23 - &:before,
1.24 - &:after {
1.25 - content: " "; // 1
1.26 - display: table; // 2
1.27 - }
1.28 - &:after {
1.29 - clear: both;
1.30 - }
1.31 -}
1.32 -
1.33 -// WebKit-style focus
1.34 -.tab-focus() {
1.35 - // Default
1.36 - outline: thin dotted;
1.37 - // WebKit
1.38 - outline: 5px auto -webkit-focus-ring-color;
1.39 - outline-offset: -2px;
1.40 -}
1.41 -
1.42 -// Center-align a block level element
1.43 -.center-block() {
1.44 - display: block;
1.45 - margin-left: auto;
1.46 - margin-right: auto;
1.47 -}
1.48 -
1.49 -// Sizing shortcuts
1.50 -.size(@width; @height) {
1.51 - width: @width;
1.52 - height: @height;
1.53 -}
1.54 -.square(@size) {
1.55 - .size(@size; @size);
1.56 -}
1.57 -
1.58 -// Placeholder text
1.59 -.placeholder(@color: @input-color-placeholder) {
1.60 - &:-moz-placeholder { color: @color; } // Firefox 4-18
1.61 - &::-moz-placeholder { color: @color; // Firefox 19+
1.62 - opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
1.63 - &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
1.64 - &::-webkit-input-placeholder { color: @color; } // Safari and Chrome
1.65 -}
1.66 -
1.67 -// Text overflow
1.68 -// Requires inline-block or block for proper styling
1.69 -.text-overflow() {
1.70 - overflow: hidden;
1.71 - text-overflow: ellipsis;
1.72 - white-space: nowrap;
1.73 -}
1.74 -
1.75 -// CSS image replacement
1.76 -//
1.77 -// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
1.78 -// mixins being reused as classes with the same name, this doesn't hold up. As
1.79 -// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
1.80 -// that we cannot chain the mixins together in Less, so they are repeated.
1.81 -//
1.82 -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
1.83 -
1.84 -// Deprecated as of v3.0.1 (will be removed in v4)
1.85 -.hide-text() {
1.86 - font: ~"0/0" a;
1.87 - color: transparent;
1.88 - text-shadow: none;
1.89 - background-color: transparent;
1.90 - border: 0;
1.91 -}
1.92 -// New mixin to use as of v3.0.1
1.93 -.text-hide() {
1.94 - .hide-text();
1.95 -}
1.96 -
1.97 -
1.98 -
1.99 -// CSS3 PROPERTIES
1.100 -// --------------------------------------------------
1.101 -
1.102 -// Single side border-radius
1.103 -.border-top-radius(@radius) {
1.104 - border-top-right-radius: @radius;
1.105 - border-top-left-radius: @radius;
1.106 -}
1.107 -.border-right-radius(@radius) {
1.108 - border-bottom-right-radius: @radius;
1.109 - border-top-right-radius: @radius;
1.110 -}
1.111 -.border-bottom-radius(@radius) {
1.112 - border-bottom-right-radius: @radius;
1.113 - border-bottom-left-radius: @radius;
1.114 -}
1.115 -.border-left-radius(@radius) {
1.116 - border-bottom-left-radius: @radius;
1.117 - border-top-left-radius: @radius;
1.118 -}
1.119 -
1.120 -// Drop shadows
1.121 -.box-shadow(@shadow) {
1.122 - -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
1.123 - box-shadow: @shadow;
1.124 -}
1.125 -
1.126 -// Transitions
1.127 -.transition(@transition) {
1.128 - -webkit-transition: @transition;
1.129 - transition: @transition;
1.130 -}
1.131 -.transition-property(@transition-property) {
1.132 - -webkit-transition-property: @transition-property;
1.133 - transition-property: @transition-property;
1.134 -}
1.135 -.transition-delay(@transition-delay) {
1.136 - -webkit-transition-delay: @transition-delay;
1.137 - transition-delay: @transition-delay;
1.138 -}
1.139 -.transition-duration(@transition-duration) {
1.140 - -webkit-transition-duration: @transition-duration;
1.141 - transition-duration: @transition-duration;
1.142 -}
1.143 -.transition-transform(@transition) {
1.144 - -webkit-transition: -webkit-transform @transition;
1.145 - -moz-transition: -moz-transform @transition;
1.146 - -o-transition: -o-transform @transition;
1.147 - transition: transform @transition;
1.148 -}
1.149 -
1.150 -// Transformations
1.151 -.rotate(@degrees) {
1.152 - -webkit-transform: rotate(@degrees);
1.153 - -ms-transform: rotate(@degrees); // IE9+
1.154 - transform: rotate(@degrees);
1.155 -}
1.156 -.scale(@ratio) {
1.157 - -webkit-transform: scale(@ratio);
1.158 - -ms-transform: scale(@ratio); // IE9+
1.159 - transform: scale(@ratio);
1.160 -}
1.161 -.translate(@x; @y) {
1.162 - -webkit-transform: translate(@x, @y);
1.163 - -ms-transform: translate(@x, @y); // IE9+
1.164 - transform: translate(@x, @y);
1.165 -}
1.166 -.skew(@x; @y) {
1.167 - -webkit-transform: skew(@x, @y);
1.168 - -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
1.169 - transform: skew(@x, @y);
1.170 -}
1.171 -.translate3d(@x; @y; @z) {
1.172 - -webkit-transform: translate3d(@x, @y, @z);
1.173 - transform: translate3d(@x, @y, @z);
1.174 -}
1.175 -
1.176 -.rotateX(@degrees) {
1.177 - -webkit-transform: rotateX(@degrees);
1.178 - -ms-transform: rotateX(@degrees); // IE9+
1.179 - transform: rotateX(@degrees);
1.180 -}
1.181 -.rotateY(@degrees) {
1.182 - -webkit-transform: rotateY(@degrees);
1.183 - -ms-transform: rotateY(@degrees); // IE9+
1.184 - transform: rotateY(@degrees);
1.185 -}
1.186 -.perspective(@perspective) {
1.187 - -webkit-perspective: @perspective;
1.188 - -moz-perspective: @perspective;
1.189 - perspective: @perspective;
1.190 -}
1.191 -.perspective-origin(@perspective) {
1.192 - -webkit-perspective-origin: @perspective;
1.193 - -moz-perspective-origin: @perspective;
1.194 - perspective-origin: @perspective;
1.195 -}
1.196 -.transform-origin(@origin) {
1.197 - -webkit-transform-origin: @origin;
1.198 - -moz-transform-origin: @origin;
1.199 - transform-origin: @origin;
1.200 -}
1.201 -
1.202 -// Animations
1.203 -.animation(@animation) {
1.204 - -webkit-animation: @animation;
1.205 - animation: @animation;
1.206 -}
1.207 -
1.208 -// Backface visibility
1.209 -// Prevent browsers from flickering when using CSS 3D transforms.
1.210 -// Default value is `visible`, but can be changed to `hidden`
1.211 -.backface-visibility(@visibility){
1.212 - -webkit-backface-visibility: @visibility;
1.213 - -moz-backface-visibility: @visibility;
1.214 - backface-visibility: @visibility;
1.215 -}
1.216 -
1.217 -// Box sizing
1.218 -.box-sizing(@boxmodel) {
1.219 - -webkit-box-sizing: @boxmodel;
1.220 - -moz-box-sizing: @boxmodel;
1.221 - box-sizing: @boxmodel;
1.222 -}
1.223 -
1.224 -// User select
1.225 -// For selecting text on the page
1.226 -.user-select(@select) {
1.227 - -webkit-user-select: @select;
1.228 - -moz-user-select: @select;
1.229 - -ms-user-select: @select; // IE10+
1.230 - -o-user-select: @select;
1.231 - user-select: @select;
1.232 -}
1.233 -
1.234 -// Resize anything
1.235 -.resizable(@direction) {
1.236 - resize: @direction; // Options: horizontal, vertical, both
1.237 - overflow: auto; // Safari fix
1.238 -}
1.239 -
1.240 -// CSS3 Content Columns
1.241 -.content-columns(@column-count; @column-gap: @grid-gutter-width) {
1.242 - -webkit-column-count: @column-count;
1.243 - -moz-column-count: @column-count;
1.244 - column-count: @column-count;
1.245 - -webkit-column-gap: @column-gap;
1.246 - -moz-column-gap: @column-gap;
1.247 - column-gap: @column-gap;
1.248 -}
1.249 -
1.250 -// Optional hyphenation
1.251 -.hyphens(@mode: auto) {
1.252 - word-wrap: break-word;
1.253 - -webkit-hyphens: @mode;
1.254 - -moz-hyphens: @mode;
1.255 - -ms-hyphens: @mode; // IE10+
1.256 - -o-hyphens: @mode;
1.257 - hyphens: @mode;
1.258 -}
1.259 -
1.260 -// Opacity
1.261 -.opacity(@opacity) {
1.262 - opacity: @opacity;
1.263 - // IE8 filter
1.264 - @opacity-ie: (@opacity * 100);
1.265 - filter: ~"alpha(opacity=@{opacity-ie})";
1.266 -}
1.267 -
1.268 -
1.269 -
1.270 -// GRADIENTS
1.271 -// --------------------------------------------------
1.272 -
1.273 -#gradient {
1.274 -
1.275 - // Horizontal gradient, from left to right
1.276 - //
1.277 - // Creates two color stops, start and end, by specifying a color and position for each color stop.
1.278 - // Color stops are not available in IE9 and below.
1.279 - .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
1.280 - background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
1.281 - 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+
1.282 - background-repeat: repeat-x;
1.283 - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
1.284 - }
1.285 -
1.286 - // Vertical gradient, from top to bottom
1.287 - //
1.288 - // Creates two color stops, start and end, by specifying a color and position for each color stop.
1.289 - // Color stops are not available in IE9 and below.
1.290 - .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
1.291 - background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
1.292 - 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+
1.293 - background-repeat: repeat-x;
1.294 - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
1.295 - }
1.296 -
1.297 - .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
1.298 - background-repeat: repeat-x;
1.299 - background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
1.300 - background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
1.301 - }
1.302 - .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
1.303 - background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
1.304 - background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
1.305 - background-repeat: no-repeat;
1.306 - 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
1.307 - }
1.308 - .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
1.309 - background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
1.310 - background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
1.311 - background-repeat: no-repeat;
1.312 - 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
1.313 - }
1.314 - .radial(@inner-color: #555; @outer-color: #333) {
1.315 - background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
1.316 - background-image: radial-gradient(circle, @inner-color, @outer-color);
1.317 - background-repeat: no-repeat;
1.318 - }
1.319 - .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
1.320 - background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
1.321 - background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
1.322 - }
1.323 -}
1.324 -
1.325 -// Reset filters for IE
1.326 -//
1.327 -// When you need to remove a gradient background, do not forget to use this to reset
1.328 -// the IE filter for IE9 and below.
1.329 -.reset-filter() {
1.330 - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
1.331 -}
1.332 -
1.333 -
1.334 -
1.335 -// Retina images
1.336 -//
1.337 -// Short retina mixin for setting background-image and -size
1.338 -
1.339 -.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
1.340 - background-image: url("@{file-1x}");
1.341 -
1.342 - @media
1.343 - only screen and (-webkit-min-device-pixel-ratio: 2),
1.344 - only screen and ( min--moz-device-pixel-ratio: 2),
1.345 - only screen and ( -o-min-device-pixel-ratio: 2/1),
1.346 - only screen and ( min-device-pixel-ratio: 2),
1.347 - only screen and ( min-resolution: 192dpi),
1.348 - only screen and ( min-resolution: 2dppx) {
1.349 - background-image: url("@{file-2x}");
1.350 - background-size: @width-1x @height-1x;
1.351 - }
1.352 -}
1.353 -
1.354 -
1.355 -// Responsive image
1.356 -//
1.357 -// Keep images from scaling beyond the width of their parents.
1.358 -
1.359 -.img-responsive(@display: block;) {
1.360 - display: @display;
1.361 - max-width: 100%; // Part 1: Set a maximum relative to the parent
1.362 - height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
1.363 -}
1.364 -
1.365 -
1.366 -// COMPONENT MIXINS
1.367 -// --------------------------------------------------
1.368 -
1.369 -// Horizontal dividers
1.370 -// -------------------------
1.371 -// Dividers (basically an hr) within dropdowns and nav lists
1.372 -.nav-divider(@color: #e5e5e5) {
1.373 - height: 1px;
1.374 - margin: ((@line-height-computed / 2) - 1) 0;
1.375 - overflow: hidden;
1.376 - background-color: @color;
1.377 -}
1.378 -
1.379 -// Panels
1.380 -// -------------------------
1.381 -.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
1.382 - border-color: @border;
1.383 -
1.384 - & > .panel-heading {
1.385 - color: @heading-text-color;
1.386 - background-color: @heading-bg-color;
1.387 - border-color: @heading-border;
1.388 -
1.389 - + .panel-collapse .panel-body {
1.390 - border-top-color: @border;
1.391 - }
1.392 - }
1.393 - & > .panel-footer {
1.394 - + .panel-collapse .panel-body {
1.395 - border-bottom-color: @border;
1.396 - }
1.397 - }
1.398 -}
1.399 -
1.400 -// Alerts
1.401 -// -------------------------
1.402 -.alert-variant(@background; @border; @text-color) {
1.403 - background-color: @background;
1.404 - border-color: @border;
1.405 - color: @text-color;
1.406 -
1.407 - hr {
1.408 - border-top-color: darken(@border, 5%);
1.409 - }
1.410 - .alert-link {
1.411 - color: darken(@text-color, 10%);
1.412 - }
1.413 -}
1.414 -
1.415 -// Tables
1.416 -// -------------------------
1.417 -.table-row-variant(@state; @background) {
1.418 - // Exact selectors below required to override `.table-striped` and prevent
1.419 - // inheritance to nested tables.
1.420 - .table {
1.421 - > thead,
1.422 - > tbody,
1.423 - > tfoot {
1.424 - > tr > .@{state},
1.425 - > .@{state} > td,
1.426 - > .@{state} > th {
1.427 - background-color: @background;
1.428 - }
1.429 - }
1.430 - }
1.431 -
1.432 - // Hover states for `.table-hover`
1.433 - // Note: this is not available for cells or rows within `thead` or `tfoot`.
1.434 - .table-hover > tbody {
1.435 - > tr > .@{state}:hover,
1.436 - > .@{state}:hover > td,
1.437 - > .@{state}:hover > th {
1.438 - background-color: darken(@background, 5%);
1.439 - }
1.440 - }
1.441 -}
1.442 -
1.443 -// Button variants
1.444 -// -------------------------
1.445 -// Easily pump out default styles, as well as :hover, :focus, :active,
1.446 -// and disabled options for all buttons
1.447 -.button-variant(@color; @background; @border) {
1.448 - color: @color;
1.449 - background-color: @background;
1.450 - border-color: @border;
1.451 -
1.452 - &:hover,
1.453 - &:focus,
1.454 - &:active,
1.455 - &.active,
1.456 - .open .dropdown-toggle& {
1.457 - color: @color;
1.458 - background-color: darken(@background, 8%);
1.459 - border-color: darken(@border, 12%);
1.460 - }
1.461 - &:active,
1.462 - &.active,
1.463 - .open .dropdown-toggle& {
1.464 - background-image: none;
1.465 - }
1.466 - &.disabled,
1.467 - &[disabled],
1.468 - fieldset[disabled] & {
1.469 - &,
1.470 - &:hover,
1.471 - &:focus,
1.472 - &:active,
1.473 - &.active {
1.474 - background-color: @background;
1.475 - border-color: @border;
1.476 - }
1.477 - }
1.478 -
1.479 - .badge {
1.480 - color: @background;
1.481 - background-color: #fff;
1.482 - }
1.483 -}
1.484 -
1.485 -// Button sizes
1.486 -// -------------------------
1.487 -.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
1.488 - padding: @padding-vertical @padding-horizontal;
1.489 - font-size: @font-size;
1.490 - line-height: @line-height;
1.491 - border-radius: @border-radius;
1.492 -}
1.493 -
1.494 -// Pagination
1.495 -// -------------------------
1.496 -.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
1.497 - > li {
1.498 - > a,
1.499 - > span {
1.500 - padding: @padding-vertical @padding-horizontal;
1.501 - font-size: @font-size;
1.502 - }
1.503 - &:first-child {
1.504 - > a,
1.505 - > span {
1.506 - .border-left-radius(@border-radius);
1.507 - }
1.508 - }
1.509 - &:last-child {
1.510 - > a,
1.511 - > span {
1.512 - .border-right-radius(@border-radius);
1.513 - }
1.514 - }
1.515 - }
1.516 -}
1.517 -
1.518 -// Labels
1.519 -// -------------------------
1.520 -.label-variant(@color) {
1.521 - background-color: @color;
1.522 - &[href] {
1.523 - &:hover,
1.524 - &:focus {
1.525 - background-color: darken(@color, 10%);
1.526 - }
1.527 - }
1.528 -}
1.529 -
1.530 -// Navbar vertical align
1.531 -// -------------------------
1.532 -// Vertically center elements in the navbar.
1.533 -// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
1.534 -.navbar-vertical-align(@element-height) {
1.535 - margin-top: ((@navbar-height - @element-height) / 2);
1.536 - margin-bottom: ((@navbar-height - @element-height) / 2);
1.537 -}
1.538 -
1.539 -// Progress bars
1.540 -// -------------------------
1.541 -.progress-bar-variant(@color) {
1.542 - background-color: @color;
1.543 - .progress-striped & {
1.544 - #gradient > .striped();
1.545 - }
1.546 -}
1.547 -
1.548 -// Responsive utilities
1.549 -// -------------------------
1.550 -// More easily include all the states for responsive-utilities.less.
1.551 -.responsive-visibility() {
1.552 - display: block !important;
1.553 - table& { display: table; }
1.554 - tr& { display: table-row !important; }
1.555 - th&,
1.556 - td& { display: table-cell !important; }
1.557 -}
1.558 -
1.559 -.responsive-invisibility() {
1.560 - &,
1.561 - tr&,
1.562 - th&,
1.563 - td& { display: none !important; }
1.564 -}
1.565 -
1.566 -
1.567 -// Grid System
1.568 -// -----------
1.569 -
1.570 -// Centered container element
1.571 -.container-fixed() {
1.572 - margin-right: auto;
1.573 - margin-left: auto;
1.574 - padding-left: (@grid-gutter-width / 2);
1.575 - padding-right: (@grid-gutter-width / 2);
1.576 - .clearfix();
1.577 -}
1.578 -
1.579 -// Creates a wrapper for a series of columns
1.580 -.make-row(@gutter: @grid-gutter-width) {
1.581 - margin-left: (@gutter / -2);
1.582 - margin-right: (@gutter / -2);
1.583 - .clearfix();
1.584 -}
1.585 -
1.586 -// Generate the extra small columns
1.587 -.make-xs-column(@columns; @gutter: @grid-gutter-width) {
1.588 - position: relative;
1.589 - float: left;
1.590 - width: percentage((@columns / @grid-columns));
1.591 - // Prevent columns from collapsing when empty
1.592 - min-height: 1px;
1.593 - // Inner gutter via padding
1.594 - padding-left: (@gutter / 2);
1.595 - padding-right: (@gutter / 2);
1.596 -}
1.597 -
1.598 -// Generate the small columns
1.599 -.make-sm-column(@columns; @gutter: @grid-gutter-width) {
1.600 - position: relative;
1.601 - // Prevent columns from collapsing when empty
1.602 - min-height: 1px;
1.603 - // Inner gutter via padding
1.604 - padding-left: (@gutter / 2);
1.605 - padding-right: (@gutter / 2);
1.606 -
1.607 - // Calculate width based on number of columns available
1.608 - @media (min-width: @screen-sm-min) {
1.609 - float: left;
1.610 - width: percentage((@columns / @grid-columns));
1.611 - }
1.612 -}
1.613 -
1.614 -// Generate the small column offsets
1.615 -.make-sm-column-offset(@columns) {
1.616 - @media (min-width: @screen-sm-min) {
1.617 - margin-left: percentage((@columns / @grid-columns));
1.618 - }
1.619 -}
1.620 -.make-sm-column-push(@columns) {
1.621 - @media (min-width: @screen-sm-min) {
1.622 - left: percentage((@columns / @grid-columns));
1.623 - }
1.624 -}
1.625 -.make-sm-column-pull(@columns) {
1.626 - @media (min-width: @screen-sm-min) {
1.627 - right: percentage((@columns / @grid-columns));
1.628 - }
1.629 -}
1.630 -
1.631 -// Generate the medium columns
1.632 -.make-md-column(@columns; @gutter: @grid-gutter-width) {
1.633 - position: relative;
1.634 - // Prevent columns from collapsing when empty
1.635 - min-height: 1px;
1.636 - // Inner gutter via padding
1.637 - padding-left: (@gutter / 2);
1.638 - padding-right: (@gutter / 2);
1.639 -
1.640 - // Calculate width based on number of columns available
1.641 - @media (min-width: @screen-md-min) {
1.642 - float: left;
1.643 - width: percentage((@columns / @grid-columns));
1.644 - }
1.645 -}
1.646 -
1.647 -// Generate the medium column offsets
1.648 -.make-md-column-offset(@columns) {
1.649 - @media (min-width: @screen-md-min) {
1.650 - margin-left: percentage((@columns / @grid-columns));
1.651 - }
1.652 -}
1.653 -.make-md-column-push(@columns) {
1.654 - @media (min-width: @screen-md) {
1.655 - left: percentage((@columns / @grid-columns));
1.656 - }
1.657 -}
1.658 -.make-md-column-pull(@columns) {
1.659 - @media (min-width: @screen-md-min) {
1.660 - right: percentage((@columns / @grid-columns));
1.661 - }
1.662 -}
1.663 -
1.664 -// Generate the large columns
1.665 -.make-lg-column(@columns; @gutter: @grid-gutter-width) {
1.666 - position: relative;
1.667 - // Prevent columns from collapsing when empty
1.668 - min-height: 1px;
1.669 - // Inner gutter via padding
1.670 - padding-left: (@gutter / 2);
1.671 - padding-right: (@gutter / 2);
1.672 -
1.673 - // Calculate width based on number of columns available
1.674 - @media (min-width: @screen-lg-min) {
1.675 - float: left;
1.676 - width: percentage((@columns / @grid-columns));
1.677 - }
1.678 -}
1.679 -
1.680 -// Generate the large column offsets
1.681 -.make-lg-column-offset(@columns) {
1.682 - @media (min-width: @screen-lg-min) {
1.683 - margin-left: percentage((@columns / @grid-columns));
1.684 - }
1.685 -}
1.686 -.make-lg-column-push(@columns) {
1.687 - @media (min-width: @screen-lg-min) {
1.688 - left: percentage((@columns / @grid-columns));
1.689 - }
1.690 -}
1.691 -.make-lg-column-pull(@columns) {
1.692 - @media (min-width: @screen-lg-min) {
1.693 - right: percentage((@columns / @grid-columns));
1.694 - }
1.695 -}
1.696 -
1.697 -
1.698 -// Framework grid generation
1.699 -//
1.700 -// Used only by Bootstrap to generate the correct number of grid classes given
1.701 -// any value of `@grid-columns`.
1.702 -
1.703 -.make-grid-columns() {
1.704 - // Common styles for all sizes of grid columns, widths 1-12
1.705 - .col(@index) when (@index = 1) { // initial
1.706 - @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
1.707 - .col(@index + 1, @item);
1.708 - }
1.709 - .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
1.710 - @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
1.711 - .col(@index + 1, ~"@{list}, @{item}");
1.712 - }
1.713 - .col(@index, @list) when (@index > @grid-columns) { // terminal
1.714 - @{list} {
1.715 - position: relative;
1.716 - // Prevent columns from collapsing when empty
1.717 - min-height: 1px;
1.718 - // Inner gutter via padding
1.719 - padding-left: (@grid-gutter-width / 2);
1.720 - padding-right: (@grid-gutter-width / 2);
1.721 - }
1.722 - }
1.723 - .col(1); // kickstart it
1.724 -}
1.725 -
1.726 -.make-grid-columns-float(@class) {
1.727 - .col(@index) when (@index = 1) { // initial
1.728 - @item: ~".col-@{class}-@{index}";
1.729 - .col(@index + 1, @item);
1.730 - }
1.731 - .col(@index, @list) when (@index =< @grid-columns) { // general
1.732 - @item: ~".col-@{class}-@{index}";
1.733 - .col(@index + 1, ~"@{list}, @{item}");
1.734 - }
1.735 - .col(@index, @list) when (@index > @grid-columns) { // terminal
1.736 - @{list} {
1.737 - float: left;
1.738 - }
1.739 - }
1.740 - .col(1); // kickstart it
1.741 -}
1.742 -
1.743 -.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
1.744 - .col-@{class}-@{index} {
1.745 - width: percentage((@index / @grid-columns));
1.746 - }
1.747 -}
1.748 -.calc-grid(@index, @class, @type) when (@type = push) {
1.749 - .col-@{class}-push-@{index} {
1.750 - left: percentage((@index / @grid-columns));
1.751 - }
1.752 -}
1.753 -.calc-grid(@index, @class, @type) when (@type = pull) {
1.754 - .col-@{class}-pull-@{index} {
1.755 - right: percentage((@index / @grid-columns));
1.756 - }
1.757 -}
1.758 -.calc-grid(@index, @class, @type) when (@type = offset) {
1.759 - .col-@{class}-offset-@{index} {
1.760 - margin-left: percentage((@index / @grid-columns));
1.761 - }
1.762 -}
1.763 -
1.764 -// Basic looping in LESS
1.765 -.make-grid(@index, @class, @type) when (@index >= 0) {
1.766 - .calc-grid(@index, @class, @type);
1.767 - // next iteration
1.768 - .make-grid(@index - 1, @class, @type);
1.769 -}
1.770 -
1.771 -
1.772 -// Form validation states
1.773 -//
1.774 -// Used in forms.less to generate the form validation CSS for warnings, errors,
1.775 -// and successes.
1.776 -
1.777 -.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
1.778 - // Color the label and help text
1.779 - .help-block,
1.780 - .control-label,
1.781 - .radio,
1.782 - .checkbox,
1.783 - .radio-inline,
1.784 - .checkbox-inline {
1.785 - color: @text-color;
1.786 - }
1.787 - // Set the border and box shadow on specific inputs to match
1.788 - .form-control {
1.789 - border-color: @border-color;
1.790 - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
1.791 - &:focus {
1.792 - border-color: darken(@border-color, 10%);
1.793 - @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
1.794 - .box-shadow(@shadow);
1.795 - }
1.796 - }
1.797 - // Set validation states also for addons
1.798 - .input-group-addon {
1.799 - color: @text-color;
1.800 - border-color: @border-color;
1.801 - background-color: @background-color;
1.802 - }
1.803 -}
1.804 -
1.805 -// Form control focus state
1.806 -//
1.807 -// Generate a customized focus state and for any input with the specified color,
1.808 -// which defaults to the `@input-focus-border` variable.
1.809 -//
1.810 -// We highly encourage you to not customize the default value, but instead use
1.811 -// this to tweak colors on an as-needed basis. This aesthetic change is based on
1.812 -// WebKit's default styles, but applicable to a wider range of browsers. Its
1.813 -// usability and accessibility should be taken into account with any change.
1.814 -//
1.815 -// Example usage: change the default blue border and shadow to white for better
1.816 -// contrast against a dark gray background.
1.817 -
1.818 -.form-control-focus(@color: @input-border-focus) {
1.819 - @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
1.820 - &:focus {
1.821 - border-color: @color;
1.822 - outline: 0;
1.823 - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
1.824 - }
1.825 -}
1.826 -
1.827 -// Form control sizing
1.828 -//
1.829 -// Relative text size, padding, and border-radii changes for form controls. For
1.830 -// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
1.831 -// element gets special love because it's special, and that's a fact!
1.832 -
1.833 -.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
1.834 - height: @input-height;
1.835 - padding: @padding-vertical @padding-horizontal;
1.836 - font-size: @font-size;
1.837 - line-height: @line-height;
1.838 - border-radius: @border-radius;
1.839 -
1.840 - select& {
1.841 - height: @input-height;
1.842 - line-height: @input-height;
1.843 - }
1.844 -
1.845 - textarea& {
1.846 - height: auto;
1.847 - }
1.848 -}