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