From 1f199236e76995148a4688bca964e332bda29220 Mon Sep 17 00:00:00 2001 From: blades Date: Fri, 16 Aug 2013 11:47:55 +0100 Subject: [PATCH] added functionality to allow images in gradient fills --- mixins/helpers.less | 52 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/mixins/helpers.less b/mixins/helpers.less index d3fce8e..2ba8acd 100644 --- a/mixins/helpers.less +++ b/mixins/helpers.less @@ -106,6 +106,58 @@ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color)); /* IE6 & IE7 */ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color); /* IE8+ */ } + .horizontal-image (@image, @start-color, @end-color) when not (@disable-filters) { + background-color: @end-color; + background-repeat: repeat-x; + background-image: @image, -khtml-gradient(linear, left top, right top, from(@start-color), to(@end-color)); /* Konqueror */ + background-image: @image, -moz-linear-gradient(left, @start-color, @end-color); /* FF 3.6+ */ + background-image: @image, -ms-linear-gradient(left, @start-color, @end-color); /* IE10 */ + background-image: @image, -webkit-gradient(linear, left top, right top, color-stop(0%, @start-color), color-stop(100%, @end-color)); /* Safari 4+, Chrome 2+ */ + background-image: @image, -webkit-linear-gradient(left, @start-color, @end-color); /* Safari 5.1+, Chrome 10+ */ + background-image: @image, -o-linear-gradient(left, @start-color, @end-color); /* Opera 11.10 */ + background-image: @image, -ms-linear-gradient(left, @start-color 0%, @end-color 100%); /* IE10+ */ + background-image: @image, linear-gradient(left, @start-color, @end-color); /* the standard */ + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start-color,@end-color)); /* IE6 & IE7 */ + -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start-color,@end-color); /* IE8+ */ + } + .horizontal-image (@image, @start-color, @end-color) when (@disable-filters) { + background-color: @end-color; + background-repeat: repeat-x; + background-image: @image, -khtml-gradient(linear, left top, right top, from(@start-color), to(@end-color)); /* Konqueror */ + background-image: @image, -moz-linear-gradient(left, @start-color, @end-color); /* FF 3.6+ */ + background-image: @image, -ms-linear-gradient(left, @start-color, @end-color); /* IE10 */ + background-image: @image, -webkit-gradient(linear, left top, right top, color-stop(0%, @start-color), color-stop(100%, @end-color)); /* Safari 4+, Chrome 2+ */ + background-image: @image, -webkit-linear-gradient(left, @start-color, @end-color); /* Safari 5.1+, Chrome 10+ */ + background-image: @image, -o-linear-gradient(left, @start-color, @end-color); /* Opera 11.10 */ + background-image: @image, -ms-linear-gradient(left, @start-color 0%, @end-color 100%); /* IE10+ */ + background-image: @image, linear-gradient(left, @start-color, @end-color); /* the standard */ + } + .vertical-image (@image, @start-color, @end-color) when (@disable-filters) { + background-color: @end-color; + background-repeat: repeat-x; + background-image: @image, -khtml-gradient(linear, left top, left bottom, from(@start-color), to(@end-color)); /* Konqueror */ + background-image: @image, -moz-linear-gradient(@start-color, @end-color); /* FF 3.6+ */ + background-image: @image, -ms-linear-gradient(@start-color, @end-color); /* IE10 */ + background-image: @image, -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start-color), color-stop(100%, @end-color)); /* Safari 4+, Chrome 2+ */ + background-image: @image, -webkit-linear-gradient(@start-color, @end-color); /* Safari 5.1+, Chrome 10+ */ + background-image: @image, -o-linear-gradient(@start-color, @end-color); /* Opera 11.10 */ + background-image: @image, -ms-linear-gradient(top, @start-color 0%, @end-color 100%); /* IE10+ */ + background-image: @image, linear-gradient(@start-color, @end-color); /* the standard */ + } + .vertical-image (@image, @start-color, @end-color) when not (@disable-filters) { + background-color: @end-color; + background-repeat: repeat-x; + background-image: @image, -khtml-gradient(linear, left top, left bottom, from(@start-color), to(@end-color)); /* Konqueror */ + background-image: @image, -moz-linear-gradient(@start-color, @end-color); /* FF 3.6+ */ + background-image: @image, -ms-linear-gradient(@start-color, @end-color); /* IE10 */ + background-image: @image, -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start-color), color-stop(100%, @end-color)); /* Safari 4+, Chrome 2+ */ + background-image: @image, -webkit-linear-gradient(@start-color, @end-color); /* Safari 5.1+, Chrome 10+ */ + background-image: @image, -o-linear-gradient(@start-color, @end-color); /* Opera 11.10 */ + background-image: @image, -ms-linear-gradient(top, @start-color 0%, @end-color 100%); /* IE10+ */ + background-image: @image, linear-gradient(@start-color, @end-color); /* the standard */ + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color)); /* IE6 & IE7 */ + -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start-color,@end-color); /* IE8+ */ + } } // Helpers --------------------------------