css - Create four color gradient mixin in bootstrap -

i wanted create 2 color gradient using bootstrap mixin functions. gradient should this:

when using bootstrap gradient mixin found there no function match requirement. tried making own gradient mixin , added bootstrap/less/mixins/grandients.less. function didn't job..

this gradient mixin added gradients.less

  .vertical-custom(@start-color: #ed3537; @start-percent: 0%; @mid-color: #ed3537; @color-stop: 50%;  @mid-color-2: #fb3e40; @color-stop-2: 50%; @end-color: #fb3e40; @end-percent: 100%) {     background-image: -webkit-linear-gradient(top, @start-color @start-percent, @mid-color, @color-stop, @mid-color-2, @color-stop-2, @end-color @end-percent);  // safari 5.1-6, chrome 10+     background-image: -o-linear-gradient(top, @start-color @start-percent, @mid-color, @color-stop, @mid-color-2, @color-stop-2, @end-color @end-percent);  // opera 12     background-image: linear-gradient(to bottom, @start-color @start-percent, @mid-color, @color-stop, @mid-color-2, @color-stop-2, @end-color @end-percent); // standard, ie10, firefox 16+, opera 12.10+, safari 7+, chrome 26+     background-repeat: repeat-x;     //filter: e(%("progid:dximagetransform.microsoft.gradient(startcolorstr='%d', endcolorstr='%d', gradienttype=0)",argb(@start-color),argb(@end-color))); // ie9 , down   } 

i call

#gradient.vertical-custom(@start-color: #ed3537; @start-percent: 0%; @mid-color: #ed3537; @color-stop: 50%;  @mid-color-2: #fb3e40; @color-stop-2: 50%; @end-color: #fb3e40; @end-percent: 100%);  

when directly add pure css less file working me. looking solution of creating gradient mixin.

this pure css gradient:

background: #ed3537; background: -moz-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed3537), color-stop(50%,#ed3537), color-stop(50%,#fb3e40), color-stop(100%,#fb3e40)); background: -webkit-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%); background: -o-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%); background: -ms-linear-gradient(top, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%); background: linear-gradient(to bottom, #ed3537 0%,#ed3537 50%,#fb3e40 50%,#fb3e40 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ed3537', endcolorstr='#fb3e40',gradienttype=0 ); 

hope may me out. thank you.

bootstrap's gradients namespaced (see: http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors) , can found in less/mixins/gradients.less file.

a namespaced mixin should called follows:

#namespace > mixin(); 

the > optional in call.

bootstrap provides .vertical-three-colors() mixin in #gradient namespace best matches pure css.

you should calls mixin follows (for instance @ end of bootstrap.less file):

div.gradient { #gradient > .vertical-three-colors(#ed3537; #fb3e40; 50%; #fb3e40;); } 

the preceding outputs:

div.gradient {   background-image: -webkit-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);   background-image: -o-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);   background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);   background-repeat: no-repeat;   filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffed3537', endcolorstr='#fffb3e40', gradienttype=0); } 

demo: http://codepen.io/bassjobsen/pen/ogjeje

notice pure css has support more browsers bootstrap's mixin. out depends on way compile bootstrap. default build process generate above output.

when compile following less code lessc --autoprefix="last 20 versions" grsdient.less:

div.gradient {   background-color: #ed3537;   background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);   background-repeat: no-repeat;   filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffed3537', endcolorstr='#fffb3e40', gradienttype=0); } 

that output:

div.gradient {   background-color: #ed3537;   background-image: -webkit-gradient(linear, left top, left bottom, from(#ed3537), color-stop(50%, #fb3e40), to(#fb3e40));   background-image: -webkit-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);   background-image: -moz-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);   background-image: -o-linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);   background-image: linear-gradient(#ed3537, #fb3e40 50%, #fb3e40);   background-repeat: no-repeat;   filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffed3537', endcolorstr='#fffb3e40', gradienttype=0); } 

the -ms-linear-gradient prefix targets developers version of ie10 , there no need use in production code.

of course can write own mixins outputs same pure css:

.vertical-custom(@start-color: #ed3537; @start-percent: 0%; @mid-color: #ed3537; @color-stop: 50%;  @mid-color-2: #fb3e40; @color-stop-2: 50%; @end-color: #fb3e40; @end-percent: 100%) { background: @start-color; background: -moz-linear-gradient(top, @start-color, @mid-color @color-stop,  @mid-color-2 @color-stop-2, @end-color @end-percent); background: -webkit-gradient(linear, left top, left bottom, color-stop(@start-percent,@start-color), color-stop(@color-stop,@mid-color), color-stop(@color-stop-2,@mid-color-2), color-stop(@end-percent,@end-color)); background: -webkit-linear-gradient(top, @start-color @start-percent,@mid-color @color-stop,@mid-color-2 @color-stop-2,@end-color @end-percent); background: -o-linear-gradient(top, @start-color @start-percent,@mid-color @color-stop,@mid-color-2 @color-stop-2,@end-color @end-percent); background: -ms-linear-gradient(top, @start-color @start-percent,@mid-color @color-stop,@mid-color-2 @color-stop-2,@end-color @end-percent); background: linear-gradient(to bottom, @start-color @start-percent,@mid-color @color-stop,@mid-color-2 @color-stop-2,@end-color @end-percent); filter: e(%("progid:dximagetransform.microsoft.gradient(startcolorstr='%d', endcolorstr='%d', gradienttype=1)",argb(@start-color),argb(@end-color))); } 

now following code:

div.gradient { .vertical-custom(); } 

outputs:

div.gradient {   background: #ed3537;   background: -moz-linear-gradient(top, #ed3537, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed3537), color-stop(50%, #ed3537), color-stop(50%, #fb3e40), color-stop(100%, #fb3e40));   background: -webkit-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);   background: -o-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);   background: -ms-linear-gradient(top, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);   background: linear-gradient(to bottom, #ed3537 0%, #ed3537 50%, #fb3e40 50%, #fb3e40 100%);   filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffed3537', endcolorstr='#fffb3e40', gradienttype=1); } 

demo: http://codepen.io/bassjobsen/pen/lepzem

make sure .vertical-custom mixin had been added inside #gradient namespace in gradients.less file when called #gradient > .vertical-custom();