diff options
| author | Mark Otto <[email protected]> | 2013-02-01 21:41:13 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-02-01 21:41:13 -0800 |
| commit | 8f0bc9e79ba2fee466a100995a9fe9deca03a226 (patch) | |
| tree | 328a43aaf1d5a8c603ce8b49e91ea7e322cdef5b /less | |
| parent | 7d655c35494012f15bc1f9ae515e92ca4c432a66 (diff) | |
| parent | d2ea2cdeddbfda468f9d972e7d76c29525bd7cd5 (diff) | |
| download | bootstrap-8f0bc9e79ba2fee466a100995a9fe9deca03a226.tar.xz bootstrap-8f0bc9e79ba2fee466a100995a9fe9deca03a226.zip | |
Merge branch 'dospuntocero-master' into 2.3.0-wip
Diffstat (limited to 'less')
| -rw-r--r-- | less/mixins.less | 11 | ||||
| -rw-r--r-- | less/tests/css-tests.css | 13 | ||||
| -rw-r--r-- | less/tests/css-tests.html | 3 |
3 files changed, 26 insertions, 1 deletions
diff --git a/less/mixins.less b/less/mixins.less index 4b09bea4c..e1db44ed7 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -443,6 +443,17 @@ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 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: -o-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=0)",argb(@startColor),argb(@endColor))); // 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)); diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css index 9edaf69bf..0f5604ee6 100644 --- a/less/tests/css-tests.css +++ b/less/tests/css-tests.css @@ -136,4 +136,15 @@ body { background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -}
\ No newline at end of file +} + +.gradient-horizontal-three { + background-color: #00b3ee; + background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f)); + background-image: -webkit-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f); + background-image: -moz-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f); + background-image: -o-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f); + background-image: linear-gradient(to right, #00b3ee, #7a43b6 50%, #c3325f); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b3ee', endColorstr='#c3325f', GradientType=0); +} diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index cdb6c7bca..c69688c76 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1291,6 +1291,9 @@ <h4>Striped</h4> <div class="gradient-striped"></div> +<h4>Horizontal three colors</h4> +<div class="gradient-horizontal-three"></div> + <div class="page-header"> |