jquery.alt-checkbox.less

/*
 * alt-checkbox LESS file
 * Version 1.0
 * http://alt-checkbox.starikovs.com
 *
 * alt-checkbox LESS file which helps to style checkbox with custom css using LESS syntax.
 *
 * Copyright (c) 2013 alt-checkbox.starikovs.com
 * Licensed under the MIT and GPL licenses.
 */

.gradient(@start, @end) {
  background: @start;
  background-image: -ms-linear-gradient(top, @start 0%, @end 100%);
  background-image: -moz-linear-gradient(top, @start 0%, @end 100%);
  background-image: -o-linear-gradient(top, @start 0%, @end 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @end));
  background-image: -webkit-linear-gradient(top, @start 0%, @end 100%);
  background-image: linear-gradient(to bottom, @start 0%, @end 100%);
}

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

.alt-checkbox {
  display: inline-block;
  .gradient(#fbfbfb, #ededed);
  border-radius: .2em;
  box-shadow: 0 0 0 1px #ccc;
  font-size: .8em;
  line-height: 100%;
  outline: none;
  position: relative;
  text-decoration: none;

  &:hover,
  &:focus {
    box-shadow: 0 0 3px 1px #ffce73;
  }

  &:before {
    display: block;
    min-height: 1em;
    min-width: 1em;
    padding: .05em;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 #ddd, 0 2px 0 #fff,0 -1px 0 #ddd;
    visibility: hidden;

  }

  &.outline-unchecked:before {
    color: #eee;
    visibility: visible;
  }

  &.checked:before {
    color: #999;
    visibility: visible;
  }

  &:focus {
    outline: none;
  }

}

.alt-checkbox,
.alt-checkbox-label {
  &.small {
    font-size: .8em;
  }

  &.medium {
    font-size: 1.6em;
  }

  &.big {
    font-size: 2.4em;
  }
}