LESS functions

css3.less

/**
 * LESS css3 functions
 *
 * LICENSE
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * @author     François "cahnory" Germain <[email protected]>
 * @license    http://www.opensource.org/licenses/MIT
 *
 * Provide a function for each css3 property
 * Functions marked with a "*" are additional functions
 * not named from an existent property.
 *
 *
 * .animation(@value)
 *
 * .background-size(@value)
 *
 * .border             -image(@value)
 * .border-top         -image(@value)
 * .border-right       -image(@value)
 * .border-bottom      -image(@value)
 * .border-left        -image(@value)
 * .border-corner      -image(@value)
 * .border-top-left    -image(@value)
 * .border-top-right   -image(@value)
 * .border-bottom-left -image(@value)
 * .border-bottom-right-image(@value)
 *
 * .border-radius(@value)
 * .border-top         -radius(@value)*
 * .border-right       -radius(@value)*
 * .border-bottom      -radius(@value)*
 * .border-left        -radius(@value)*
 * .border-top-left    -radius(@value)
 * .border-top-right   -radius(@value)
 * .border-bottom-left -radius(@value)
 * .border-bottom-right-radius(@value)
 *
 * .box-shadow(@value)
 *
 * .box-sizing(@value)
 *
 * .column-count(@value)
 *
 * .column-gap(@value)
 *
 * .linear-gradient(              @from, @to)  to bottom
 * .linear-gradient(top,          @from, @to)  to top
 * .linear-gradient(top-right,    @from, @to)  to top-right
 * .linear-gradient(right,        @from, @to)  to right
 * .linear-gradient(bottom-right, @from, @to)  to bottom-right
 * .linear-gradient(bottom,       @from, @to)  to bottom
 * .linear-gradient(bottom-left,  @from, @to)  to bottom-left
 * .linear-gradient(left,         @from, @to)  to left
 * .linear-gradient(top-left,     @from, @to)  to top-left
 *
 * .tab-size(@value)
 *
 * .transform(@value)
 *
 * .transition(@value)
 *
 */

/* !animation */
.animation(@value) {
  -webkit-animation: @value;
     -moz-animation: @value;
       -o-animation: @value;
          animation: @value;
}

/* !background-size */
.background-size(@value) {
  -webkit-background-size: @value;
          background-size: @value;
}

/* !border-image */
.border-image(@value) {
  -webkit-border-image: @value;
     -moz-border-image: @value;
       -o-border-image: @value;
          border-image: @value;
}

.border-top-image(@value) {
  -webkit-border-top-image: @value;
     -moz-border-top-image: @value;
       -o-border-top-image: @value;
          border-top-image: @value;
}

.border-right-image(@value) {
  -webkit-border-right-image: @value;
     -moz-border-right-image: @value;
       -o-border-right-image: @value;
          border-right-image: @value;
}

.border-bottom-image(@value) {
  -webkit-border-bottom-image: @value;
     -moz-border-bottom-image: @value;
       -o-border-bottom-image: @value;
          border-bottom-image: @value;
}

.border-left-image(@value) {
  -webkit-border-left-image: @value;
     -moz-border-left-image: @value;
       -o-border-left-image: @value;
          border-left-image: @value;
}

.border-corner-image(@value) {
  -webkit-border-corner-image: @value;
     -moz-border-corner-image: @value;
       -o-border-corner-image: @value;
          border-corner-image: @value;
}

.border-top-left-image(@value) {
  -webkit-border-top-left-image: @value;
     -moz-border-top-left-image: @value;
       -o-border-top-left-image: @value;
          border-top-left-image: @value;
}

.border-top-right-image(@value) {
  -webkit-border-top-right-image: @value;
     -moz-border-top-right-image: @value;
       -o-border-top-right-image: @value;
          border-top-right-image: @value;
}

.border-bottom-left-image(@value) {
  -webkit-border-bottom-left-image: @value;
     -moz-border-bottom-left-image: @value;
       -o-border-bottom-left-image: @value;
          border-bottom-left-image: @value;
}

.border-bottom-right-image(@value) {
  -webkit-border-bottom-right-image: @value;
     -moz-border-bottom-right-image: @value;
       -o-border-bottom-right-image: @value;
          border-bottom-right-image: @value;
}

/* !border-radius */
.border-radius(@value) {
  -webkit-border-radius: @value;
     -moz-border-radius: @value;
          border-radius: @value;
}
.border-top-left-radius(@value) {
  -webkit-border-top-left-radius: @value;
     -moz-border-top-left-radius: @value;
          border-top-left-radius: @value;
}
.border-top-right-radius(@value) {
  -webkit-border-top-right-radius: @value;
     -moz-border-top-right-radius: @value;
          border-top-right-radius: @value;
}
.border-bottom-right-radius(@value) {
  -webkit-border-bottom-right-radius: @value;
     -moz-border-bottom-right-radius: @value;
          border-bottom-right-radius: @value;
}
.border-bottom-left-radius(@value) {
  -webkit-border-bottom-left-radius: @value;
     -moz-border-bottom-left-radius: @value;
          border-bottom-left-radius: @value;
}
.border-top-radius(@value) {
  .border-top-left-radius(@value);
  .border-top-right-radius(@value);
}
.border-right-radius(@value) {
  .border-bottom-right-radius(@value);
  .border-top-right-radius(@value);
}
.border-bottom-radius(@value) {
  .border-bottom-left-radius(@value);
  .border-bottom-right-radius(@value);
}
.border-left-radius(@value) {
  .border-bottom-left-radius(@value);
  .border-top-left-radius(@value);
}

/* !box-shadow */
.box-shadow(@value) {
  -webkit-box-shadow: @value;
     -moz-box-shadow: @value;
          box-shadow: @value;
}

/* !box-sizing */
.box-sizing(@value) {
  -webkit-box-sizing: @value;
     -moz-box-sizing: @value;
          box-sizing: @value;
}

/* !column-count */
.column-count(@value) {
  -webkit-column-count: @value;
     -moz-column-count: @value;
          column-count: @value;
}

/* !column-gap */
.column-gap(@value) {
  -webkit-column-gap: @value;
     -moz-column-gap: @value;
          column-gap: @value;
}

/* !display (inline-block) */
.display(inline-block) {
  display: -moz-inline-box;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.display(@value) {
  display: @value;
}

/* !linear-gradient */
.linear-gradient(private, @from, @to, @a, @b, @c, @d) {
  background: -webkit-gradient(linear, @a, @b, color-stop(0%,@from), color-stop(100%, @to));
  background: -webkit-linear-gradient(@c, @from 0%, @to 100%);
  background:    -moz-linear-gradient(@c, @from 0%, @to 100%);
  background:     -ms-linear-gradient(@c, @from 0%, @to 100%);
  background:      -o-linear-gradient(@c, @from 0%, @to 100%);
  background:         linear-gradient(@d, @from 0%, @to 100%);
}
.linear-gradient(@from, @to) {
  .linear-gradient(bottom, @from, @to);
}
.linear-gradient(bottom, @from, @to) {
  .linear-gradient(private, @from, @to, left top, left bottom, top, to bottom);
}
.linear-gradient(right, @from, @to) {
  .linear-gradient(private, @from, @to, left top, right top, left, to right);
}
.linear-gradient(bottom-right, @from, @to) {
  .linear-gradient(private, @from, @to, left top, right bottom, -45deg, 135deg);
}
.linear-gradient(top-right, @from, @to) {
  .linear-gradient(private, @from, @to, left bottom, right top, 45deg, 45deg);
}
.linear-gradient(top-left, @from, @to) {
  .linear-gradient(bottom-right, @to, @from);
}
.linear-gradient(bottom-left, @from, @to) {
  .linear-gradient(top-right, @to, @from);
}
.linear-gradient(left, @from, @to) {
  .linear-gradient(right, @to, @from);
}
.linear-gradient(top, @from, @to) {
  .linear-gradient(bottom, @to, @from);
}

/* !tab-size */
.tab-size(@value) {
  -moz-tab-size: @value;
    -o-tab-size: @value;
       tab-size: @value;
}

/* !transform */
.transform(@value) {
  -webkit-transform: @value;
     -moz-transform: @value;
      -ms-transform: @value;
       -o-transform: @value;
          transform: @value;
}
.transform-origin(@value) {
  -webkit-transform-origin: @value;
     -moz-transform-origin: @value;
      -ms-transform-origin: @value;
       -o-transform-origin: @value;
          transform-origin: @value;
}

/* !transition */
.transition(@value) {
  -webkit-transition: @value;
     -moz-transition: @value;
       -o-transition: @value;
          transition: @value;
}
.transition-delay(@value) {
  -webkit-transition-delay: @value;
     -moz-transition-delay: @value;
       -o-transition-delay: @value;
          transition-delay: @value;
}
.transition-duration(@value) {
  -webkit-transition-duration: @value;
     -moz-transition-duration: @value;
       -o-transition-duration: @value;
          transition-duration: @value;
}
.transition-property(@value) {
  -webkit-transition-property: @value;
     -moz-transition-property: @value;
       -o-transition-property: @value;
          transition-property: @value;
}
.transition-timing-function(@value) {
  -webkit-transition-timing-function: @value;
     -moz-transition-timing-function: @value;
       -o-transition-timing-function: @value;
          transition-timing-function: @value;
}