/*-------------------------- User Select ----------------------------*/ .user-select(@value) { -webkit-user-select: @value; -moz-user-select: @value; -ms-user-select: @value; user-select: @value; } /*---------------------------------------- CSS Animations based on animate.css -----------------------------------------*/ .animated(@name, @duration) { -webkit-animation-name: @name; animation-name: @name; -webkit-animation-duration: @duration; animation-duration: @duration; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /*------------------------------------------------- For loop mixin for generate custom classes --------------------------------------------------*/ .for(@i, @n) {.-each(@i)} .for(@n) when (isnumber(@n)) {.for(1, @n)} .for(@i, @n) when not (@i = @n) { .for((@i + (@n - @i) / abs(@n - @i)), @n); } .for(@array) when (default()) {.for-impl_(length(@array))} .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} .for-impl_(@i) when (@i > 0) {.-each(extract(@array, @i))} /*---------------------------------------- List Loader -----------------------------------------*/ .list-loader(@width, @height, @borderColor, @borderColorBottom) { content: ''; width: @width; height: @height; border-radius: 50%; .animated(zoomIn, 500ms); border: 2px solid @borderColor; border-bottom-color: @borderColorBottom; position: absolute; z-index: 1; -webkit-animation: zoomIn 250ms, spin 700ms 250ms infinite linear; animation: zoomIn 250ms, spin 700ms 250ms infinite linear; } /*---------------------------------------- Placeholder -----------------------------------------*/ .placeholder(@color) { ::-webkit-input-placeholder { color: @color } ::-moz-placeholder { color: @color } :-ms-input-placeholder { color: @color } }