Pony.fm/resources/assets/styles/mixins.less

/**
 * Pony.fm - A community for pony fan music.
 * Copyright (C) 2015 Peter Deltchev
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

.navigation-list() {
  margin: 0px;
  padding: 0px;
  list-style: none;

  li {
    margin: 0px;
    padding: 0px;
    float: left;

    a {
      display: block;
    }
  }
}

.ellipsis() {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navigation-list-horiz() {
  .navigation-list();

  li, a {
    float: left;
  }
}

.transform(@string){
  -webkit-transform: @string;
  -moz-transform:      @string;
  -ms-transform:          @string;
  -o-transform:          @string;
}
.scale (@factor) {
  -webkit-transform: scale(@factor);
  -moz-transform:      scale(@factor);
  -ms-transform:          scale(@factor);
  -o-transform:          scale(@factor);
}
.rotate (@deg) {
  -webkit-transform: rotate(@deg);
  -moz-transform:      rotate(@deg);
  -ms-transform:          rotate(@deg);
  -o-transform:          rotate(@deg);
}
.skew (@deg, @deg2) {
  -webkit-transform:       skew(@deg, @deg2);
  -moz-transform:      skew(@deg, @deg2);
  -ms-transform:          skew(@deg, @deg2);
  -o-transform:          skew(@deg, @deg2);
}
.translate (@x, @y:0) {
  -webkit-transform:       translate(@x, @y);
  -moz-transform:      translate(@x, @y);
  -ms-transform:          translate(@x, @y);
  -o-transform:          translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
  -webkit-transform:       translate3d(@x, @y, @z);
  -moz-transform:      translate3d(@x, @y, @z);
  -ms-transform:          translate3d(@x, @y, @z);
  -o-transform:          translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
  -webkit-perspective:     @value;
  -moz-perspective:     @value;
  -ms-perspective:     @value;
  perspective:         @value;
}
.transform-origin (@x:center, @y:center) {
  -webkit-transform-origin: @x @y;
  -moz-transform-origin:    @x @y;
  -ms-transform-origin:     @x @y;
  -o-transform-origin:      @x @y;
}
.backface-visibility(@string) {
  -webkit-backface-visibility: @string;
  -moz-backface-visibility:    @string;
  -ms-backface-visibility:     @string;
  -o-backface-visibility:      @string;
}

.animation-duration(@string) {
  -moz-animation-duration: @string;
  -webkit-animation-duration: @string;
}

.animation-name(@string) {
  -moz-animation-name: @string;
  -webkit-animation-name: @string;
}

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


.material-shadow(@size) when (@size = 1) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}
.material-shadow(@size) when (@size = 2) {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
}
.material-shadow(@size) when (@size = 3) {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.material-shadow(@size) when (@size = 4) {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
}
.material-shadow(@size) when (@size = 5) {
  box-shadow: 0 19px 38px rgba(0, 0, 0, .30), 0 15px 12px rgba(0, 0, 0, .22);
}

.light-material-shadow(@size) when (@size = 1) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
}
.light-material-shadow(@size) when (@size = 2) {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 3px 6px rgba(0, 0, 0, .12);
}

.img-thumbnail() {
  border: 0 !important;
  padding: 0 !important;
  .material-shadow(2);
}