From 60575dfb461d5e01d36b564dccc55ef260982081 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 25 May 2013 13:16:15 -0700 Subject: [PATCH] Gradients refactor * Add start and end support to the horizontal gradient as well * Change all variables from camelCase to use-dashes * Better comments in the gradients mixins area * Update current uses of gradients in dropdowns and carousel to specify only two values by direct assignment of variables --- docs/assets/css/bootstrap.css | 32 +++++----- less/carousel.less | 4 +- less/dropdowns.less | 4 +- less/mixins.less | 111 +++++++++++++++++++--------------- 4 files changed, 83 insertions(+), 68 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b65d864807..c5b29a3c43 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2717,10 +2717,10 @@ input[type="button"].btn-block { color: #ffffff; text-decoration: none; background-color: #357ebd; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd)); - background-image: -webkit-linear-gradient(top, #428bca, #357ebd); - background-image: -moz-linear-gradient(top, #428bca, #357ebd); - background-image: linear-gradient(to bottom, #428bca, #357ebd); + background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd)); + background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%); + background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%); + background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); } @@ -2731,10 +2731,10 @@ input[type="button"].btn-block { color: #ffffff; text-decoration: none; background-color: #357ebd; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd)); - background-image: -webkit-linear-gradient(top, #428bca, #357ebd); - background-image: -moz-linear-gradient(top, #428bca, #357ebd); - background-image: linear-gradient(to bottom, #428bca, #357ebd); + background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd)); + background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%); + background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%); + background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); background-repeat: repeat-x; outline: 0; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); @@ -4895,10 +4895,10 @@ a.list-group-item.active > .badge, .carousel-control.left { background-color: rgba(0, 0, 0, 0.0001); background-color: transparent; - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); - background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); + background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); + background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%)); + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); } @@ -4908,10 +4908,10 @@ a.list-group-item.active > .badge, left: auto; background-color: rgba(0, 0, 0, 0.5); background-color: transparent; - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); - background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); + background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); + background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%)); + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); } diff --git a/less/carousel.less b/less/carousel.less index c1b0e9b9a8..31f9b8aff1 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 e2c9805ae8..3e01527882 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/mixins.less b/less/mixins.less index bdd787166f..e900351be3 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 - } - .vertical(@startColor: #555, @endColor: #333, @startPercent: 0%, @endPercent: 100%) { - background-color: @endColor; - background-image: -webkit-gradient(linear, 0 @startPercent, 0 @endPercent, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @startPercent, @endColor, @endPercent); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(top, @startColor @startPercent, @endColor @endPercent); // FF 3.6+ - background-image: linear-gradient(to bottom, @startColor @startPercent, @endColor @endPercent); // 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 - } - .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; - 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 - } - .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); - 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 } - .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); - 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 + // 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(@start-color),argb(@end-color))); // IE9 and down } - .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); + + .directional(@start-color: #555, @end-color: #333, @deg: 45deg) { + background-color: @end-color; + background-repeat: repeat-x; + 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(@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(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + } + + .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(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + } + .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 // --------------------------------------------------