eskp-app/1.0: static/less/mixins.less@c75d501c5601

     1 //

     2 // Mixins

     3 // --------------------------------------------------

     6 // Utilities

     7 // -------------------------

     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 }

    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 }

    39 // Center-align a block level element

    40 .center-block() {

    41   display: block;

    42   margin-left: auto;

    43   margin-right: auto;

    44 }

    46 // Sizing shortcuts

    47 .size(@width; @height) {

    48   width: @width;

    49   height: @height;

    50 }

    51 .square(@size) {

    52   .size(@size; @size);

    53 }

    55 // Placeholder text

    56 .placeholder(@color: @input-color-placeholder) {

    57   &:-moz-placeholder            { color: @color; } // Firefox 4-18

    58   &::-moz-placeholder           { color: @color;   // Firefox 19+

    59                                   opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526

    60   &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+

    61   &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome

    62 }

    64 // Text overflow

    65 // Requires inline-block or block for proper styling

    66 .text-overflow() {

    67   overflow: hidden;

    68   text-overflow: ellipsis;

    69   white-space: nowrap;

    70 }

    72 // CSS image replacement

    73 //

    74 // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for

    75 // mixins being reused as classes with the same name, this doesn't hold up. As

    76 // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note

    77 // that we cannot chain the mixins together in Less, so they are repeated.

    78 //

    79 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757

    81 // Deprecated as of v3.0.1 (will be removed in v4)

    82 .hide-text() {

    83   font: ~"0/0" a;

    84   color: transparent;

    85   text-shadow: none;

    86   background-color: transparent;

    87   border: 0;

    88 }

    89 // New mixin to use as of v3.0.1

    90 .text-hide() {

    91   .hide-text();

    92 }

    96 // CSS3 PROPERTIES

    97 // --------------------------------------------------

    99 // Single side border-radius

   100 .border-top-radius(@radius) {

   101   border-top-right-radius: @radius;

   102    border-top-left-radius: @radius;

   103 }

   104 .border-right-radius(@radius) {

   105   border-bottom-right-radius: @radius;

   106      border-top-right-radius: @radius;

   107 }

   108 .border-bottom-radius(@radius) {

   109   border-bottom-right-radius: @radius;

   110    border-bottom-left-radius: @radius;

   111 }

   112 .border-left-radius(@radius) {

   113   border-bottom-left-radius: @radius;

   114      border-top-left-radius: @radius;

   115 }

   117 // Drop shadows

   118 .box-shadow(@shadow) {

   119   -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1

   120           box-shadow: @shadow;

   121 }

   123 // Transitions

   124 .transition(@transition) {

   125   -webkit-transition: @transition;

   126           transition: @transition;

   127 }

   128 .transition-property(@transition-property) {

   129   -webkit-transition-property: @transition-property;

   130           transition-property: @transition-property;

   131 }

   132 .transition-delay(@transition-delay) {

   133   -webkit-transition-delay: @transition-delay;

   134           transition-delay: @transition-delay;

   135 }

   136 .transition-duration(@transition-duration) {

   137   -webkit-transition-duration: @transition-duration;

   138           transition-duration: @transition-duration;

   139 }

   140 .transition-transform(@transition) {

   141   -webkit-transition: -webkit-transform @transition;

   142      -moz-transition: -moz-transform @transition;

   143        -o-transition: -o-transform @transition;

   144           transition: transform @transition;

   145 }

   147 // Transformations

   148 .rotate(@degrees) {

   149   -webkit-transform: rotate(@degrees);

   150       -ms-transform: rotate(@degrees); // IE9+

   151           transform: rotate(@degrees);

   152 }

   153 .scale(@ratio) {

   154   -webkit-transform: scale(@ratio);

   155       -ms-transform: scale(@ratio); // IE9+

   156           transform: scale(@ratio);

   157 }

   158 .translate(@x; @y) {

   159   -webkit-transform: translate(@x, @y);

   160       -ms-transform: translate(@x, @y); // IE9+

   161           transform: translate(@x, @y);

   162 }

   163 .skew(@x; @y) {

   164   -webkit-transform: skew(@x, @y);

   165       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+

   166           transform: skew(@x, @y);

   167 }

   168 .translate3d(@x; @y; @z) {

   169   -webkit-transform: translate3d(@x, @y, @z);

   170           transform: translate3d(@x, @y, @z);

   171 }

   173 .rotateX(@degrees) {

   174   -webkit-transform: rotateX(@degrees);

   175       -ms-transform: rotateX(@degrees); // IE9+

   176           transform: rotateX(@degrees);

   177 }

   178 .rotateY(@degrees) {

   179   -webkit-transform: rotateY(@degrees);

   180       -ms-transform: rotateY(@degrees); // IE9+

   181           transform: rotateY(@degrees);

   182 }

   183 .perspective(@perspective) {

   184   -webkit-perspective: @perspective;

   185      -moz-perspective: @perspective;

   186           perspective: @perspective;

   187 }

   188 .perspective-origin(@perspective) {

   189   -webkit-perspective-origin: @perspective;

   190      -moz-perspective-origin: @perspective;

   191           perspective-origin: @perspective;

   192 }

   193 .transform-origin(@origin) {

   194   -webkit-transform-origin: @origin;

   195      -moz-transform-origin: @origin;

   196           transform-origin: @origin;

   197 }

   199 // Animations

   200 .animation(@animation) {

   201   -webkit-animation: @animation;

   202           animation: @animation;

   203 }

   205 // Backface visibility

   206 // Prevent browsers from flickering when using CSS 3D transforms.

   207 // Default value is `visible`, but can be changed to `hidden`

   208 .backface-visibility(@visibility){

   209   -webkit-backface-visibility: @visibility;

   210      -moz-backface-visibility: @visibility;

   211           backface-visibility: @visibility;

   212 }

   214 // Box sizing

   215 .box-sizing(@boxmodel) {

   216   -webkit-box-sizing: @boxmodel;

   217      -moz-box-sizing: @boxmodel;

   218           box-sizing: @boxmodel;

   219 }

   221 // User select

   222 // For selecting text on the page

   223 .user-select(@select) {

   224   -webkit-user-select: @select;

   225      -moz-user-select: @select;

   226       -ms-user-select: @select; // IE10+

   227        -o-user-select: @select;

   228           user-select: @select;

   229 }

   231 // Resize anything

   232 .resizable(@direction) {

   233   resize: @direction; // Options: horizontal, vertical, both

   234   overflow: auto; // Safari fix

   235 }

   237 // CSS3 Content Columns

   238 .content-columns(@column-count; @column-gap: @grid-gutter-width) {

   239   -webkit-column-count: @column-count;

   240      -moz-column-count: @column-count;

   241           column-count: @column-count;

   242   -webkit-column-gap: @column-gap;

   243      -moz-column-gap: @column-gap;

   244           column-gap: @column-gap;

   245 }

   247 // Optional hyphenation

   248 .hyphens(@mode: auto) {

   249   word-wrap: break-word;

   250   -webkit-hyphens: @mode;

   251      -moz-hyphens: @mode;

   252       -ms-hyphens: @mode; // IE10+

   253        -o-hyphens: @mode;

   254           hyphens: @mode;

   255 }

   257 // Opacity

   258 .opacity(@opacity) {

   259   opacity: @opacity;

   260   // IE8 filter

   261   @opacity-ie: (@opacity * 100);

   262   filter: ~"alpha(opacity=@{opacity-ie})";

   263 }

   267 // GRADIENTS

   268 // --------------------------------------------------

   270 #gradient {

   272   // Horizontal gradient, from left to right

   273   //

   274   // Creates two color stops, start and end, by specifying a color and position for each color stop.

   275   // Color stops are not available in IE9 and below.

   276   .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {

   277     background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+

   278     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+

   279     background-repeat: repeat-x;

   280     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down

   281   }

   283   // Vertical gradient, from top to bottom

   284   //

   285   // Creates two color stops, start and end, by specifying a color and position for each color stop.

   286   // Color stops are not available in IE9 and below.

   287   .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {

   288     background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);  // Safari 5.1-6, Chrome 10+

   289     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+

   290     background-repeat: repeat-x;

   291     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down

   292   }

   294   .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {

   295     background-repeat: repeat-x;

   296     background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+

   297     background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+

   298   }

   299   .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {

   300     background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);

   301     background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);

   302     background-repeat: no-repeat;

   303     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback

   304   }

   305   .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {

   306     background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);

   307     background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);

   308     background-repeat: no-repeat;

   309     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

   310   }

   311   .radial(@inner-color: #555; @outer-color: #333) {

   312     background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);

   313     background-image: radial-gradient(circle, @inner-color, @outer-color);

   314     background-repeat: no-repeat;

   315   }

   316   .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {

   317     background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);

   318     background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);

   319   }

   320 }

   322 // Reset filters for IE

   323 //

   324 // When you need to remove a gradient background, do not forget to use this to reset

   325 // the IE filter for IE9 and below.

   326 .reset-filter() {

   327   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));

   328 }

   332 // Retina images

   333 //

   334 // Short retina mixin for setting background-image and -size

   336 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {

   337   background-image: url("@{file-1x}");

   339   @media

   340   only screen and (-webkit-min-device-pixel-ratio: 2),

   341   only screen and (   min--moz-device-pixel-ratio: 2),

   342   only screen and (     -o-min-device-pixel-ratio: 2/1),

   343   only screen and (        min-device-pixel-ratio: 2),

   344   only screen and (                min-resolution: 192dpi),

   345   only screen and (                min-resolution: 2dppx) {

   346     background-image: url("@{file-2x}");

   347     background-size: @width-1x @height-1x;

   348   }

   349 }

   352 // Responsive image

   353 //

   354 // Keep images from scaling beyond the width of their parents.

   356 .img-responsive(@display: block;) {

   357   display: @display;

   358   max-width: 100%; // Part 1: Set a maximum relative to the parent

   359   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching

   360 }

   363 // COMPONENT MIXINS

   364 // --------------------------------------------------

   366 // Horizontal dividers

   367 // -------------------------

   368 // Dividers (basically an hr) within dropdowns and nav lists

   369 .nav-divider(@color: #e5e5e5) {

   370   height: 1px;

   371   margin: ((@line-height-computed / 2) - 1) 0;

   372   overflow: hidden;

   373   background-color: @color;

   374 }

   376 // Panels

   377 // -------------------------

   378 .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {

   379   border-color: @border;

   381   & > .panel-heading {

   382     color: @heading-text-color;

   383     background-color: @heading-bg-color;

   384     border-color: @heading-border;

   386     + .panel-collapse .panel-body {

   387       border-top-color: @border;

   388     }

   389   }

   390   & > .panel-footer {

   391     + .panel-collapse .panel-body {

   392       border-bottom-color: @border;

   393     }

   394   }

   395 }

   397 // Alerts

   398 // -------------------------

   399 .alert-variant(@background; @border; @text-color) {

   400   background-color: @background;

   401   border-color: @border;

   402   color: @text-color;

   404   hr {

   405     border-top-color: darken(@border, 5%);

   406   }

   407   .alert-link {

   408     color: darken(@text-color, 10%);

   409   }

   410 }

   412 // Tables

   413 // -------------------------

   414 .table-row-variant(@state; @background) {

   415   // Exact selectors below required to override `.table-striped` and prevent

   416   // inheritance to nested tables.

   417   .table {

   418     > thead,

   419     > tbody,

   420     > tfoot {

   421       > tr > .@{state},

   422       > .@{state} > td,

   423       > .@{state} > th {

   424         background-color: @background;

   425       }

   426     }

   427   }

   429   // Hover states for `.table-hover`

   430   // Note: this is not available for cells or rows within `thead` or `tfoot`.

   431   .table-hover > tbody {

   432     > tr > .@{state}:hover,

   433     > .@{state}:hover > td,

   434     > .@{state}:hover > th {

   435       background-color: darken(@background, 5%);

   436     }

   437   }

   438 }

   440 // Button variants

   441 // -------------------------

   442 // Easily pump out default styles, as well as :hover, :focus, :active,

   443 // and disabled options for all buttons

   444 .button-variant(@color; @background; @border) {

   445   color: @color;

   446   background-color: @background;

   447   border-color: @border;

   449   &:hover,

   450   &:focus,

   451   &:active,

   452   &.active,

   453   .open .dropdown-toggle& {

   454     color: @color;

   455     background-color: darken(@background, 8%);

   456         border-color: darken(@border, 12%);

   457   }

   458   &:active,

   459   &.active,

   460   .open .dropdown-toggle& {

   461     background-image: none;

   462   }

   463   &.disabled,

   464   &[disabled],

   465   fieldset[disabled] & {

   466     &,

   467     &:hover,

   468     &:focus,

   469     &:active,

   470     &.active {

   471       background-color: @background;

   472           border-color: @border;

   473     }

   474   }

   476   .badge {

   477     color: @background;

   478     background-color: #fff;

   479   }

   480 }

   482 // Button sizes

   483 // -------------------------

   484 .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {

   485   padding: @padding-vertical @padding-horizontal;

   486   font-size: @font-size;

   487   line-height: @line-height;

   488   border-radius: @border-radius;

   489 }

   491 // Pagination

   492 // -------------------------

   493 .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {

   494   > li {

   495     > a,

   496     > span {

   497       padding: @padding-vertical @padding-horizontal;

   498       font-size: @font-size;

   499     }

   500     &:first-child {

   501       > a,

   502       > span {

   503         .border-left-radius(@border-radius);

   504       }

   505     }

   506     &:last-child {

   507       > a,

   508       > span {

   509         .border-right-radius(@border-radius);

   510       }

   511     }

   512   }

   513 }

   515 // Labels

   516 // -------------------------

   517 .label-variant(@color) {

   518   background-color: @color;

   519   &[href] {

   520     &:hover,

   521     &:focus {

   522       background-color: darken(@color, 10%);

   523     }

   524   }

   525 }

   527 // Navbar vertical align

   528 // -------------------------

   529 // Vertically center elements in the navbar.

   530 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.

   531 .navbar-vertical-align(@element-height) {

   532   margin-top: ((@navbar-height - @element-height) / 2);

   533   margin-bottom: ((@navbar-height - @element-height) / 2);

   534 }

   536 // Progress bars

   537 // -------------------------

   538 .progress-bar-variant(@color) {

   539   background-color: @color;

   540   .progress-striped & {

   541     #gradient > .striped();

   542   }

   543 }

   545 // Responsive utilities

   546 // -------------------------

   547 // More easily include all the states for responsive-utilities.less.

   548 .responsive-visibility() {

   549   display: block !important;

   550   table&  { display: table; }

   551   tr&     { display: table-row !important; }

   552   th&,

   553   td&     { display: table-cell !important; }

   554 }

   556 .responsive-invisibility() {

   557     &,

   558   tr&,

   559   th&,

   560   td& { display: none !important; }

   561 }

   564 // Grid System

   565 // -----------

   567 // Centered container element

   568 .container-fixed() {

   569   margin-right: auto;

   570   margin-left: auto;

   571   padding-left:  (@grid-gutter-width / 2);

   572   padding-right: (@grid-gutter-width / 2);

   573   .clearfix();

   574 }

   576 // Creates a wrapper for a series of columns

   577 .make-row(@gutter: @grid-gutter-width) {

   578   margin-left:  (@gutter / -2);

   579   margin-right: (@gutter / -2);

   580   .clearfix();

   581 }

   583 // Generate the extra small columns

   584 .make-xs-column(@columns; @gutter: @grid-gutter-width) {

   585   position: relative;

   586   float: left;

   587   width: percentage((@columns / @grid-columns));

   588   // Prevent columns from collapsing when empty

   589   min-height: 1px;

   590   // Inner gutter via padding

   591   padding-left:  (@gutter / 2);

   592   padding-right: (@gutter / 2);

   593 }

   595 // Generate the small columns

   596 .make-sm-column(@columns; @gutter: @grid-gutter-width) {

   597   position: relative;

   598   // Prevent columns from collapsing when empty

   599   min-height: 1px;

   600   // Inner gutter via padding

   601   padding-left:  (@gutter / 2);

   602   padding-right: (@gutter / 2);

   604   // Calculate width based on number of columns available

   605   @media (min-width: @screen-sm-min) {

   606     float: left;

   607     width: percentage((@columns / @grid-columns));

   608   }

   609 }

   611 // Generate the small column offsets

   612 .make-sm-column-offset(@columns) {

   613   @media (min-width: @screen-sm-min) {

   614     margin-left: percentage((@columns / @grid-columns));

   615   }

   616 }

   617 .make-sm-column-push(@columns) {

   618   @media (min-width: @screen-sm-min) {

   619     left: percentage((@columns / @grid-columns));

   620   }

   621 }

   622 .make-sm-column-pull(@columns) {

   623   @media (min-width: @screen-sm-min) {

   624     right: percentage((@columns / @grid-columns));

   625   }

   626 }

   628 // Generate the medium columns

   629 .make-md-column(@columns; @gutter: @grid-gutter-width) {

   630   position: relative;

   631   // Prevent columns from collapsing when empty

   632   min-height: 1px;

   633   // Inner gutter via padding

   634   padding-left:  (@gutter / 2);

   635   padding-right: (@gutter / 2);

   637   // Calculate width based on number of columns available

   638   @media (min-width: @screen-md-min) {

   639     float: left;

   640     width: percentage((@columns / @grid-columns));

   641   }

   642 }

   644 // Generate the medium column offsets

   645 .make-md-column-offset(@columns) {

   646   @media (min-width: @screen-md-min) {

   647     margin-left: percentage((@columns / @grid-columns));

   648   }

   649 }

   650 .make-md-column-push(@columns) {

   651   @media (min-width: @screen-md) {

   652     left: percentage((@columns / @grid-columns));

   653   }

   654 }

   655 .make-md-column-pull(@columns) {

   656   @media (min-width: @screen-md-min) {

   657     right: percentage((@columns / @grid-columns));

   658   }

   659 }

   661 // Generate the large columns

   662 .make-lg-column(@columns; @gutter: @grid-gutter-width) {

   663   position: relative;

   664   // Prevent columns from collapsing when empty

   665   min-height: 1px;

   666   // Inner gutter via padding

   667   padding-left:  (@gutter / 2);

   668   padding-right: (@gutter / 2);

   670   // Calculate width based on number of columns available

   671   @media (min-width: @screen-lg-min) {

   672     float: left;

   673     width: percentage((@columns / @grid-columns));

   674   }

   675 }

   677 // Generate the large column offsets

   678 .make-lg-column-offset(@columns) {

   679   @media (min-width: @screen-lg-min) {

   680     margin-left: percentage((@columns / @grid-columns));

   681   }

   682 }

   683 .make-lg-column-push(@columns) {

   684   @media (min-width: @screen-lg-min) {

   685     left: percentage((@columns / @grid-columns));

   686   }

   687 }

   688 .make-lg-column-pull(@columns) {

   689   @media (min-width: @screen-lg-min) {

   690     right: percentage((@columns / @grid-columns));

   691   }

   692 }

   695 // Framework grid generation

   696 //

   697 // Used only by Bootstrap to generate the correct number of grid classes given

   698 // any value of `@grid-columns`.

   700 .make-grid-columns() {

   701   // Common styles for all sizes of grid columns, widths 1-12

   702   .col(@index) when (@index = 1) { // initial

   703     @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";

   704     .col(@index + 1, @item);

   705   }

   706   .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo

   707     @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";

   708     .col(@index + 1, ~"@{list}, @{item}");

   709   }

   710   .col(@index, @list) when (@index > @grid-columns) { // terminal

   711     @{list} {

   712       position: relative;

   713       // Prevent columns from collapsing when empty

   714       min-height: 1px;

   715       // Inner gutter via padding

   716       padding-left:  (@grid-gutter-width / 2);

   717       padding-right: (@grid-gutter-width / 2);

   718     }

   719   }

   720   .col(1); // kickstart it

   721 }

   723 .make-grid-columns-float(@class) {

   724   .col(@index) when (@index = 1) { // initial

   725     @item: ~".col-@{class}-@{index}";

   726     .col(@index + 1, @item);

   727   }

   728   .col(@index, @list) when (@index =< @grid-columns) { // general

   729     @item: ~".col-@{class}-@{index}";

   730     .col(@index + 1, ~"@{list}, @{item}");

   731   }

   732   .col(@index, @list) when (@index > @grid-columns) { // terminal

   733     @{list} {

   734       float: left;

   735     }

   736   }

   737   .col(1); // kickstart it

   738 }

   740 .calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {

   741   .col-@{class}-@{index} {

   742     width: percentage((@index / @grid-columns));

   743   }

   744 }

   745 .calc-grid(@index, @class, @type) when (@type = push) {

   746   .col-@{class}-push-@{index} {

   747     left: percentage((@index / @grid-columns));

   748   }

   749 }

   750 .calc-grid(@index, @class, @type) when (@type = pull) {

   751   .col-@{class}-pull-@{index} {

   752     right: percentage((@index / @grid-columns));

   753   }

   754 }

   755 .calc-grid(@index, @class, @type) when (@type = offset) {

   756   .col-@{class}-offset-@{index} {

   757     margin-left: percentage((@index / @grid-columns));

   758   }

   759 }

   761 // Basic looping in LESS

   762 .make-grid(@index, @class, @type) when (@index >= 0) {

   763   .calc-grid(@index, @class, @type);

   764   // next iteration

   765   .make-grid(@index - 1, @class, @type);

   766 }

   769 // Form validation states

   770 //

   771 // Used in forms.less to generate the form validation CSS for warnings, errors,

   772 // and successes.

   774 .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {

   775   // Color the label and help text

   776   .help-block,

   777   .control-label,

   778   .radio,

   779   .checkbox,

   780   .radio-inline,

   781   .checkbox-inline  {

   782     color: @text-color;

   783   }

   784   // Set the border and box shadow on specific inputs to match

   785   .form-control {

   786     border-color: @border-color;

   787     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work

   788     &:focus {

   789       border-color: darken(@border-color, 10%);

   790       @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);

   791       .box-shadow(@shadow);

   792     }

   793   }

   794   // Set validation states also for addons

   795   .input-group-addon {

   796     color: @text-color;

   797     border-color: @border-color;

   798     background-color: @background-color;

   799   }

   800 }

   802 // Form control focus state

   803 //

   804 // Generate a customized focus state and for any input with the specified color,

   805 // which defaults to the `@input-focus-border` variable.

   806 //

   807 // We highly encourage you to not customize the default value, but instead use

   808 // this to tweak colors on an as-needed basis. This aesthetic change is based on

   809 // WebKit's default styles, but applicable to a wider range of browsers. Its

   810 // usability and accessibility should be taken into account with any change.

   811 //

   812 // Example usage: change the default blue border and shadow to white for better

   813 // contrast against a dark gray background.

   815 .form-control-focus(@color: @input-border-focus) {

   816   @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);

   817   &:focus {

   818     border-color: @color;

   819     outline: 0;

   820     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");

   821   }

   822 }

   824 // Form control sizing

   825 //

   826 // Relative text size, padding, and border-radii changes for form controls. For

   827 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`

   828 // element gets special love because it's special, and that's a fact!

   830 .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {

   831   height: @input-height;

   832   padding: @padding-vertical @padding-horizontal;

   833   font-size: @font-size;

   834   line-height: @line-height;

   835   border-radius: @border-radius;

   837   select& {

   838     height: @input-height;

   839     line-height: @input-height;

   840   }

   842   textarea& {

   843     height: auto;

   844   }

   845 }

author	stetrabby <info@trabucchi.de>
	Sat, 18 Jan 2014 11:29:01 +0100
changeset 108	c75d501c5601
parent 53	3416f82943ea
permissions	-rwxr-xr-x