Less mixins

mixins.less

// Helper functions used throughout the code base.

// The old IE versions can cause the browser to hang so commented out.
#gradient {
  .linear(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
    background-color: @color;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(0, @start), color-stop(1, @stop));
    background-image: -webkit-linear-gradient(@start, @stop);
    background-image: -ms-linear-gradient(top, @start, @stop);
    //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop)); // IE6 & IE7
    //-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop); // IE8+
    background-image: -moz-linear-gradient(center top, @start 0%, @stop 100%);
    background-image: -o-linear-gradient(center top, @start, @stop);
    background-image: linear-gradient(center top, @start, @stop);
  }
  .linear-double(@color: #F5F5F5, @start: #EEE, @stop: #FFF){
    background-color: @color;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(0, @start), color-stop(1, @stop));
    background-image: -webkit-linear-gradient(@start, @start, @stop, @stop);
    background-image: -ms-linear-gradient(top, @start, @start, @stop, @stop);
    //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop)); // IE6 & IE7
    //-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop); // IE8+
    background-image: -moz-linear-gradient(center top, @start 0%, @stop 100%);
    background-image: -o-linear-gradient(center top, @start, @start, @stop, @stop);
    background-image: linear-gradient(center top, @start, @start, @stop, @stop);
  }
  .linear-half(@color: #F5F5F5, @start: #EEE, @stop: #FFF){
    background-color: @color;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(0, @start), color-stop(0.5, @stop));
    background-image: -webkit-linear-gradient(@start, @stop, @stop, @stop);
    background-image: -ms-linear-gradient(top, @start, @stop, @stop, @stop);
    //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop)); // IE6 & IE7
    //-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@start,@stop); // IE8+
    background-image: -moz-linear-gradient(center top, @start 0%, @stop 50%);
    background-image: -o-linear-gradient(center top, @start, @stop, @stop, @stop);
    background-image: linear-gradient(center top, @start, @stop, @stop, @stop);
  }
  .linear-triple(@color: #F5F5F5, @start: #EEE, @stop: #FFF){
    background-color: @color;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, @start),(49% @start), color-stop(53%, @stop), color-stop(100%, @stop));
    background-image: -webkit-linear-gradient(top,@start 1%,@start 49%,@stop 53%,@stop 100%);
    background-image: -ms-linear-gradient(top, @start 1%,@start 49%,@stop 53%,@stop 100%);
    background-image: -moz-linear-gradient(top, @start 1%,@start 49%,@stop 53%,@stop 100%);
    background-image: -o-linear-gradient(top, @start 1%,@start 49%,@stop 53%,@stop 100%);
    background-image: linear-gradient(top, @start 1%,@start 49%,@stop 53%,@stop 100%);
  }
  .linear-quintuple(@color: #F5F5F5, @start: #EEE, @middle1: #EEE, @middle2:#EEE, @middle3: #FFF, @stop: #FFF){
    background-color: @color;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(13%, @middle1),color-stop(31%, @middle2), color-stop(44%, @middle3), color-stop(100%, @stop));
    background-image: -webkit-linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
    background-image: -ms-linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
    background-image: -moz-linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
    background-image: -o-linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
    background-image: linear-gradient(top,@start 0%, @middle1 13%, @middle2 31%, @middle3 44%, @stop 100%);
  }

  .radial(@color: #F5F5F5, @start: #EEE, @stop: #FFF, @coverage: 75%) {
    background: -moz-radial-gradient(center, ellipse cover, @start 0%, @start 1%, @stop @coverage, @stop 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@start), color-stop(1%,@start), color-stop(@coverage,@stop), color-stop(100%,@stop)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, @start 0%,@start 1%,@stop @coverage,@stop 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, @start 0%,@start 1%,@stop @coverage,@stop 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, @start 0%,@start 1%,@stop @coverage,@stop 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, @start 0%,@start 1%,@stop @coverage,@stop 100%); /* W3C */
  }

  .clear() {
    background-color: transparent;
    background-image: none;
  }
  .solid(@color: #F5F5F5) {
    background-color: @color;
    background-image: none;
  }
}

#border {
  .shadow(@arguments: 0 0 10px rgba(128, 128, 128, 0.25)) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
  }
  .radius(@radius: 0) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    background-clip: padding-box;
  }
}


#percentage {
  .width(@numerator, @denominator: 100) {
    width: @numerator / @denominator * 100%;
  }
  .height(@numerator, @denominator: 100) {
    height: @numerator / @denominator * 100%;
  }
  .font-size(@numerator, @denominator: 16) {
    font-size: @numerator / @denominator * 100%;
  }

  .margin-left(@numerator, @denominator: 100) {
    margin-left: @numerator / @denominator * 100%;
  }
  .margin-right(@numerator, @denominator: 100) {
    margin-right: @numerator / @denominator * 100%;
  }
  .margin-horizontal(@numerator, @denominator: 16) {
    margin-left: @numerator / @denominator * 100%;
    margin-right: @numerator / @denominator * 100%;
  }

  .padding-left(@numerator, @denominator: 100) {
    padding-left: @numerator / @denominator * 100%;
  }
  .padding-right(@numerator, @denominator: 100) {
    padding-right: @numerator / @denominator * 100%;
  }
  .padding-horizontal(@numerator, @denominator: 100) {
    padding-left: @numerator / @denominator * 100%;
    padding-right: @numerator / @denominator * 100%;
  }
}

#em {
  .padding(@numerator, @denominator: 16) {
    padding: @numerator / @denominator * 1em;
  }
  .padding-vertical(@numerator, @denominator: 16) {
    padding-top: @numerator / @denominator * 1em;
    padding-bottom: @numerator / @denominator * 1em;
  }
  .padding-horizontal(@numerator, @denominator: 16) {
    padding-left: @numerator / @denominator * 1em;
    padding-right: @numerator / @denominator * 1em;
  }
  .padding-top(@numerator, @denominator: 16) {
    padding-top: @numerator / @denominator * 1em;
  }
  .padding-bottom(@numerator, @denominator: 16) {
    padding-bottom: @numerator / @denominator * 1em;
  }
  .padding-left(@numerator, @denominator: 16) {
    padding-left: @numerator / @denominator * 1em;
  }
  .padding-right(@numerator, @denominator: 16) {
    padding-right: @numerator / @denominator * 1em;
  }

  .margin-vertical(@numerator, @denominator: 16) {
    margin-top: @numerator / @denominator * 1em;
    margin-bottom: @numerator / @denominator * 1em;
  }
  .margin-horizontal(@numerator, @denominator: 16) {
    margin-left: @numerator / @denominator * 1em;
    margin-right: @numerator / @denominator * 1em;
  }
  .margin-left(@numerator, @denominator: 16) {
    margin-left: @numerator / @denominator * 1em;
  }
  .margin-right(@numerator, @denominator: 16) {
    margin-right: @numerator / @denominator * 1em;
  }
  .margin-top(@numerator, @denominator: 16) {
    margin-top: @numerator / @denominator * 1em;
  }
  .margin-bottom(@numerator, @denominator: 16) {
    margin-bottom: @numerator / @denominator * 1em;
  }

  .line-height(@numerator, @denominator: 16) {
    line-height: @numerator / @denominator * 1em;
  }
  .font-size(@numerator, @denominator: 16) {
    font-size: @numerator / @denominator * 1em;
  }

  .width(@numerator, @denominator: 16) {
    width: @numerator / @denominator * 1em;
  }
  .max-width(@numerator, @denominator: 16) {
    max-width: @numerator / @denominator * 1em;
  }
  .height(@numerator, @denominator: 16) {
    height: @numerator / @denominator * 1em;
  }
  .min-height(@numerator, @denominator: 16) {
    min-height: @numerator / @denominator * 1em;
  }

  .border-width(@numerator, @denominator: 16) {
    border-width: @numerator / @denominator * 1em;
  }

  .tracking(@value, @font-size: 16) {
    letter-spacing: @value * @font-size / 1000 / @font-size * 1em;
  }
}


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

.background-clip(@clip) {
  -webkit-background-clip: @clip;
  -moz-background-clip: @clip;
  background-clip: @clip;
}

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

.placeholder(@color: #00000) {
  input::-webkit-input-placeholder {
    color: @color;
    opacity: 1;
  }
  input:-moz-placeholder {
    color: @color;
    opacity: 1;
  }
  input::-moz-placeholder {
    color: @color;
    opacity: 1;
  }
  input:-ms-input-placeholder {
    color: @color;
    opacity: 1;
  }
}