diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/carousel.less | 4 | ||||
| -rw-r--r-- | less/dropdowns.less | 4 | ||||
| -rw-r--r-- | less/grid.less | 147 | ||||
| -rw-r--r-- | less/mixins.less | 181 | ||||
| -rw-r--r-- | less/navbar.less | 2 | ||||
| -rw-r--r-- | less/variables.less | 15 |
6 files changed, 210 insertions, 143 deletions
diff --git a/less/carousel.less b/less/carousel.less index c1b0e9b9a..31f9b8aff 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -90,13 +90,13 @@ // Set gradients for backgrounds &.left { - #gradient > .horizontal(rgba(0,0,0,.5), rgba(0,0,0,.0001)); + #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); background-color: transparent; } &.right { left: auto; right: 0; - #gradient > .horizontal(rgba(0,0,0,.0001), rgba(0,0,0,.5)); + #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); background-color: transparent; } diff --git a/less/dropdowns.less b/less/dropdowns.less index e2c9805ae..3e0152788 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -68,7 +68,7 @@ .dropdown-submenu:focus > a { text-decoration: none; color: @dropdown-link-hover-color; - #gradient > .vertical(@dropdown-link-hover-bg, darken(@dropdown-link-hover-bg, 5%)); + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); } // Active state @@ -79,7 +79,7 @@ color: @dropdown-link-active-color; text-decoration: none; outline: 0; - #gradient > .vertical(@dropdown-link-active-bg, darken(@dropdown-link-active-bg, 5%)); + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); } // Disabled state diff --git a/less/grid.less b/less/grid.less index 82d2a355b..b97d1d5c4 100644 --- a/less/grid.less +++ b/less/grid.less @@ -13,9 +13,43 @@ .make-row(); } - // Common styles for small and large grid columns -.col { +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12, +.col-sm-1, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-lg-1, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-10, +.col-lg-11, +.col-lg-12 { position: relative; // Float and set width: 100%; for easy stacking on mobile devices float: left; @@ -27,37 +61,106 @@ padding-right: (@grid-gutter-width / 2); } -// Generate small grid classes first -.generate-grid-columns(@grid-columns); -// Then generate the larger grid classes via media query -@media screen and (min-width: @screen-small) { - .generate-large-grid-columns(@grid-columns); -} +// +// Container and grid column sizing +// + +// Tiny device columns (smartphones) +.col-1 { width: percentage((1 / @grid-columns)); } +.col-2 { width: percentage((2 / @grid-columns)); } +.col-3 { width: percentage((3 / @grid-columns)); } +.col-4 { width: percentage((4 / @grid-columns)); } +.col-5 { width: percentage((5 / @grid-columns)); } +.col-6 { width: percentage((6 / @grid-columns)); } +.col-7 { width: percentage((7 / @grid-columns)); } +.col-8 { width: percentage((8 / @grid-columns)); } +.col-9 { width: percentage((9 / @grid-columns)); } +.col-10 { width: percentage((10/ @grid-columns)); } +.col-11 { width: percentage((11/ @grid-columns)); } +.col-12 { width: 100%; } -// Responsive: Tablets and up -@media screen and (min-width: @screen-tablet) { +// Small device columns (phones to tablets) +@media (min-width: @screen-tablet) { .container { - max-width: 728px; + max-width: @container-tablet; } + + .col-sm-1 { width: percentage((1 / @grid-columns)); } + .col-sm-2 { width: percentage((2 / @grid-columns)); } + .col-sm-3 { width: percentage((3 / @grid-columns)); } + .col-sm-4 { width: percentage((4 / @grid-columns)); } + .col-sm-5 { width: percentage((5 / @grid-columns)); } + .col-sm-6 { width: percentage((6 / @grid-columns)); } + .col-sm-7 { width: percentage((7 / @grid-columns)); } + .col-sm-8 { width: percentage((8 / @grid-columns)); } + .col-sm-9 { width: percentage((9 / @grid-columns)); } + .col-sm-10 { width: percentage((10/ @grid-columns)); } + .col-sm-11 { width: percentage((11/ @grid-columns)); } + .col-sm-12 { width: 100%; } + + // Offsets + .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } + + // Push and pull columns for source order changes + .col-push-1 { left: percentage((1 / @grid-columns)); } + .col-push-2 { left: percentage((2 / @grid-columns)); } + .col-push-3 { left: percentage((3 / @grid-columns)); } + .col-push-4 { left: percentage((4 / @grid-columns)); } + .col-push-5 { left: percentage((5 / @grid-columns)); } + .col-push-6 { left: percentage((6 / @grid-columns)); } + .col-push-7 { left: percentage((7 / @grid-columns)); } + .col-push-8 { left: percentage((8 / @grid-columns)); } + .col-push-9 { left: percentage((9 / @grid-columns)); } + .col-push-10 { left: percentage((10/ @grid-columns)); } + .col-push-11 { left: percentage((11/ @grid-columns)); } + + .col-pull-1 { right: percentage((1 / @grid-columns)); } + .col-pull-2 { right: percentage((2 / @grid-columns)); } + .col-pull-3 { right: percentage((3 / @grid-columns)); } + .col-pull-4 { right: percentage((4 / @grid-columns)); } + .col-pull-5 { right: percentage((5 / @grid-columns)); } + .col-pull-6 { right: percentage((6 / @grid-columns)); } + .col-pull-7 { right: percentage((7 / @grid-columns)); } + .col-pull-8 { right: percentage((8 / @grid-columns)); } + .col-pull-9 { right: percentage((9 / @grid-columns)); } + .col-pull-10 { right: percentage((10/ @grid-columns)); } + .col-pull-11 { right: percentage((11/ @grid-columns)); } } -// Responsive: Desktops and up -@media screen and (min-width: @screen-desktop) { +// Medium and large device columns (desktop and up) +@media (min-width: @screen-desktop) { .container { - max-width: 940px; + max-width: @container-desktop; } + .col-lg-1 { width: percentage((1 / @grid-columns)); } + .col-lg-2 { width: percentage((2 / @grid-columns)); } + .col-lg-3 { width: percentage((3 / @grid-columns)); } + .col-lg-4 { width: percentage((4 / @grid-columns)); } + .col-lg-5 { width: percentage((5 / @grid-columns)); } + .col-lg-6 { width: percentage((6 / @grid-columns)); } + .col-lg-7 { width: percentage((7 / @grid-columns)); } + .col-lg-8 { width: percentage((8 / @grid-columns)); } + .col-lg-9 { width: percentage((9 / @grid-columns)); } + .col-lg-10 { width: percentage((10/ @grid-columns)); } + .col-lg-11 { width: percentage((11/ @grid-columns)); } + .col-lg-12 { width: 100%; } } -// Responsive: Large desktops and up -@media screen and (min-width: @screen-large-desktop) { +// Large desktops and up +@media (min-width: @screen-large-desktop) { .container { - max-width: 1170px; + max-width: @container-large-desktop; } } - -// Reset utility classes due to specificity -/*[class*="col-span-"].pull-right { - float: right; -}*/ diff --git a/less/mixins.less b/less/mixins.less index b54b05c4e..9825e9a2d 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -241,61 +241,71 @@ -// BACKGROUNDS +// GRADIENTS // -------------------------------------------------- -// Gradients #gradient { - .horizontal(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 + + // Horizontal gradient, from left to right + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) { + background-color: @end-color; + background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+ + background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ + background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down } - .vertical(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 + + // Vertical gradient, from top to bottom + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) { + background-color: @end-color; + background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+ + background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ + background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down } - .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; + + .directional(@start-color: #555, @end-color: #333, @deg: 45deg) { + background-color: @end-color; background-repeat: repeat-x; - background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ - background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+ + background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+ + background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10 } - .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); + .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) { + background-color: mix(@mid-color, @end-color, 80%); + background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); + background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback + 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 } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); + .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) { + background-color: mix(@mid-color, @end-color, 80%); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); + background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback + 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 } - .radial(@innerColor: #555, @outerColor: #333) { - background-color: @outerColor; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); - background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); - background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); - background-image: radial-gradient(circle, @innerColor, @outerColor); + .radial(@inner-color: #555, @outer-color: #333) { + background-color: @outer-color; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color)); + background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); + background-image: -moz-radial-gradient(circle, @inner-color, @outer-color); + background-image: radial-gradient(circle, @inner-color, @outer-color); background-repeat: no-repeat; } .striped(@color: #555, @angle: 45deg) { @@ -306,12 +316,17 @@ background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } } + // Reset filters for IE +// +// When you need to remove a gradient background, don't forget to use this to reset +// the IE filter for IE9 and below. .reset-filter() { filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); } + // RETINA IMAGE SUPPORT // -------------------------------------------------- @@ -404,6 +419,11 @@ // Then clear the floated columns .clearfix(); + @media (min-width: @screen-small) { + margin-left: (@grid-gutter-width / -2); + margin-right: (@grid-gutter-width / -2); + } + // Negative margin nested rows out to align the content of columns .row { margin-left: (@grid-gutter-width / -2); @@ -444,79 +464,6 @@ } } -// Small grid columns -.generate-grid-columns(@grid-columns) { - - .col-sm-X (@index) when (@index > 0) { - .col-sm-@{index} { .col-sm-(@index); } - .col-sm-X((@index - 1)); - } - .col-sm-X (0) {} - - // Generate columns - .col-sm-X(@grid-columns); - - // Apply the styles - .col-sm-(@columns) { - width: percentage((@columns / @grid-columns)); - } -} - -// Large grid columns -.generate-large-grid-columns(@grid-columns) { - - .col-lg-X (@index) when (@index > 0) { - .col-lg-@{index} { .col-lg-(@index); } - .col-lg-X((@index - 1)); - } - .col-lg-X (0) {} - - // Generate the columns - .col-lg-X(@grid-columns); - - // Apply the styles - .col-lg-(@columns) { - width: percentage((@columns / @grid-columns)); - } - - // Offsets (gaps between columns) - .col-offset-X (@index) when (@index > 0) { - .col-offset-@{index} { .col-offset-(@index); } - .col-offset-X((@index - 1)); - } - .col-offset-X (0) {} - - // Source ordering - .col-push-X (@index) when (@index > 0) { - .col-push-@{index} { .col-push-(@index); } - .col-push-X((@index - 1)); - } - .col-push-X (0) {} - - // Source ordering - .col-pull-X (@index) when (@index > 0) { - .col-pull-@{index} { .col-pull-(@index); } - .col-pull-X((@index - 1)); - } - .col-pull-X (0) {} - - // Apply the styles - .col-offset-(@columns) { - margin-left: percentage((@columns / @grid-columns)); - } - .col-push-(@columns) { - left: percentage((@columns / @grid-columns)); - } - .col-pull-(@columns) { - right: percentage((@columns / @grid-columns)); - } - - // Generate .spanX and .offsetX - .col-offset-X(@grid-columns); - .col-push-X(@grid-columns); - .col-pull-X(@grid-columns); -} - // Framework mixins @@ -539,4 +486,10 @@ .box-shadow(@shadow); } } + // Set validation states also for addons + .input-group-addon { + color: @text-color; + border-color: @border-color; + background-color: @background-color; + } } diff --git a/less/navbar.less b/less/navbar.less index 0576022d1..84fd742b1 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -274,7 +274,7 @@ // Responsive navbar // -------------------------------------------------- -@media screen and (min-width: @screen-tablet) { +@media screen and (min-width: @grid-float-breakpoint) { .navbar-brand { float: left; diff --git a/less/variables.less b/less/variables.less index 9cd8f830b..f9c32c148 100644 --- a/less/variables.less +++ b/less/variables.less @@ -131,8 +131,6 @@ @input-height-large: (@line-height-computed + (@padding-large-vertical * 2)); @input-height-small: (@line-height-computed + (@padding-small-vertical * 2)); -@form-actions-bg: #f5f5f5; - // Dropdowns // ------------------------- @@ -405,6 +403,19 @@ @screen-large-desktop: @screen-large; +// Container sizes +// -------------------------------------------------- + +// Small screen / tablet +@container-tablet: 728px; + +// Medium screen / desktop +@container-desktop: 940px; + +// Large screen / wide desktop +@container-large-desktop: 1170px; + + // Grid system // -------------------------------------------------- |