1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/mixins.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,845 @@
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 +}