benivo-ui-library/mixins.less

Benivo UI library

/* Mixin */

// Mixin word wrapping
.default-word-wrap() {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.user-select (@value) {
    -webkit-user-select: @value;
    -moz-user-select: @value;
    -ms-user-select: @value;
    user-select: @value;
}

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

.box-shadow (@value: 0 3px 5px rgba(0, 0, 0, 0.5)) {
    -webkit-box-shadow: @value;
    -moz-box-shadow: @value;
    box-shadow: @value;
}

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

.transform (@string) {
    -webkit-transform: @string;
    -moz-transform: @string;
    -ms-transform: @string;
    -o-transform: @string;
    transform: @string;
}

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

.gradient (@liner-gradient: 90deg #cccccc 50% #000000 100%, @start-color: #cccccc, @end-color: #000000) {
    background: @end-color;
    background: -moz-linear-gradient(@liner-gradient);
    background: -webkit-linear-gradient(@liner-gradient);
    background: linear-gradient(@liner-gradient);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@start-color, endColorstr=@end-color,GradientType=1);
}

.background-st (@bg-color: transparent, @bg-img: ~'', @bg-size: cover, @bg-repeat: no-repeat, @bg-position: center) {
    background-color: @bg-color;
    background-image: @bg-img;
    background-size: @bg-size;
    background-repeat: @bg-repeat;
    background-position: @bg-position;
}

.keyframes(@name; @arguments) {
	@-moz-keyframes @name { @arguments(); }
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}

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

.filter(@arguments) {
    -webkit-filter: @arguments;
    -moz-filter: @arguments;
    -o-filter: @arguments;
    -ms-filter: @arguments;
    filter: @arguments;
}