Mixins

mixins.less

.gradient(@start, @end) {
  background-color: mix(@start, @end);
  *background-color: @end;
  background-image: -moz-linear-gradient(top, @start, @end);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start), to(@end));
  background-image: -webkit-linear-gradient(top, @start, @end);
  background-image: -o-linear-gradient(top, @start, @end);
  background-image: linear-gradient(to bottom, @start, @end);
  background-repeat: repeat-x;

  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}', GradientType=0)";
  filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

.btn-border(@start, @end) {
  border-color: @start @start darken(@end, 30%);
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.border-radius (@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.border-radius(@topleft, @topright, @bottomright, @bottomleft) {
  -webkit-border-top-left-radius: @topleft;
  -webkit-border-top-right-radius: @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius: @bottomleft;
  -moz-border-radius-topleft: @topleft;
  -moz-border-radius-topright: @topright;
  -moz-border-radius-bottomright: @bottomright;
  -moz-border-radius-bottomleft: @bottomleft;
  border-top-left-radius: @topleft;
  border-top-right-radius: @topright;
  border-bottom-right-radius: @bottomright;
  border-bottom-left-radius: @bottomleft;
}

.text-shadow (@col) when (iscolor(@col)) {
  text-shadow: 0px 0px 5px @col;
}

.text-shadow(@val) when (iskeyword(@val)) {
  text-shadow: @val;
}

.opacity (@percent) {
  opacity: @percent / 100;
  filter: ~"alpha(opacity=@{percent})";
}

.box-shadow (@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

.transition(@props) {
  -webkit-transition: @props;
     -moz-transition: @props;
      -ms-transition: @props;
       -o-transition: @props;
          transition: @props;
}