Making multiple gradients using Less CSS

This is the first project I've used Less on, I want to make a series of buttons that have the same general structure but have different gradiated colours applied to them.

I have my default button style:

.button-regular (@origin: top, @start: #d2d2d2, @middle: #7a7a7a, @stop: #4d4d4d, @fallback: #3f4c6b, @border: #3c3c3c;) {
  border-radius: 3px; color: @white; font-size: 13px; line-height: 18px; height: 36px; font-weight: normal; padding: 8px 15px 8px 15px; text-align: center;
  background: @fallback;
  background: -moz-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(6%, @middle), color-stop(100%, @stop));
  background: -webkit-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -o-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -ms-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @middle 6%, @stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid @border;
}

I want to overwrite the colours for each new instance of the button using something like the below:

input.lightBlue {
  .button-regular(top, #bfeef8, #40cdeb, #00bce4, #3f4c6b, #00b0d5;);
} 

But when I create a button:

<input class="lightBlue" type="submit" value="Search">

The original (grey) colours still show. Is there a reason why the colours aren't overwritten using my new colours in this new button instance, and is there a better way to acheive what I'm attempting?

I'm using less.js to compile in-browser if that makes any difference.

Answers


What you have there should work alright, you just need to

fix a typo:
  • there is a semicolon (;) (after the last color) too much in your class definition

    input.lightBlue {
      .button-regular (top, #bfeef8, #40cdeb, #00bce4, #3f4c6b, #00b0d5);
    }
    
  • you call for a variable @white in the mixin, where you just need to make sure you define it beforehand, or else just write white instead.

some additional suggestions:

(I used some random settings for illustration). You could do something like this

<input class="button default" type="submit" value="Search">
<input class="button green" type="submit" value="Search">
<input class="button red" type="submit" value="Search">

where you have a button class to define the general button appearance. Dunno, maybe something like this:

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:active {
    position: relative;
    top: 1px;
}

and in LESS you make some mixins for the color gradients. Something like this:

.gradient-mixin (@origin, @start, @middle, @stop, @fallback, @border) {
  background: @fallback;
  background: -moz-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(6%, @middle), color-stop(100%, @stop));
  background: -webkit-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -o-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: -ms-linear-gradient(@origin, @start 0%, @middle 6%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @middle 6%, @stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@middle', endColorstr='@stop', GradientType=0);
  border: 1px solid @border;
}

.button-make (@name:"default", @origin: top, @start: #d2d2d2, @middle: #7a7a7a, @stop: #4d4d4d, @fallback: #3f4c6b, @border: #3c3c3c;) {
  @classname: ~"@{name}";
  .@{classname} {
    .gradient-mixin (@origin, @start, @middle, @stop, @fallback, @border);
    &:hover {
    .gradient-mixin(@origin, lighten(@start,10%), lighten(@middle,10%), lighten(@stop,10%), lighten(@fallback,10%), @border);
    }
    &:active {
    .gradient-mixin (@origin, darken(@start,10%), darken(@middle,10%), darken(@stop,10%), darken(@fallback,10%), @border);
    }
  }
}

and then you call them for each color ... which will build your classes for each color for the buttons:

.button-make;
.button-make ("green", top, #7db72f, #87d918, #4e7d0e, #7db72f, #538312);
.button-make ("red", top, #ed1c24, #e93a3f, #aa1317, #ed1c24, #980c10);

here is a jsfiddle example of the output.

But instead of defining all colors in the gradient by hand you can also make a more general mixin in LESS, that takes one color and transforms it to colors you use for @stop,@start,@border,... by using lighten, darken and other color operations.


Need Your Help

iOS Objective C Method issue

ios methods call declare

I am trying to port a project of mine from Android to iOS and I am running into some fundamental issues that have been vexing. Like currently for instance I can't call a method I created because it

Store results of a polyfit in a for loop?

matlab for-loop

Consider the following code, which makes up a random data set and fits polynomials of order 1 to 5 against the data:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.