una/template/css/_mixins.less

@import '_remixins.less';

.radius(@val) {
    @rem-val: (unit(@val) / @base-font-size-px);
	border-radius:~"@{rem-val}rem";
	background-clip: padding-box;
}

.border (@width: 1px, @type: solid, @color: #ccc) {
    @rem-w: (unit(@width) / @base-font-size-px);
    border: ~"@{width} @{type} @{color}";
    border: ~"@{rem-w}rem @{type} @{color}";
}
.border-top (@width: 1px, @type: solid, @color: #ccc) {
    @rem-w: (unit(@width) / @base-font-size-px);
    border-top: ~"@{width} @{type} @{color}";
    border-top: ~"@{rem-w}rem @{type} @{color}";
}
.border-bottom (@width: 1px, @type: solid, @color: #ccc) {
    @rem-w: (unit(@width) / @base-font-size-px);
    border-bottom: ~"@{width} @{type} @{color}";
    border-bottom: ~"@{rem-w}rem @{type} @{color}";
}
.border-left (@width: 1px, @type: solid, @color: #ccc) {
    @rem-w: (unit(@width) / @base-font-size-px);
    border-left: ~"@{width} @{type} @{color}";
    border-left: ~"@{rem-w}rem @{type} @{color}";
}
.border-right (@width: 1px, @type: solid, @color: #ccc) {
    @rem-w: (unit(@width) / @base-font-size-px);
    border-right: ~"@{width} @{type} @{color}";
    border-right: ~"@{rem-w}rem @{type} @{color}";
}

.drop-shadow (@x: 0px, @y: 1px, @blur: 2px, @spread: 0px, @color: rgba(0, 0, 0, .25)) {
    @rem-x: (unit(@x) / @base-font-size-px);
    @rem-y: (unit(@y) / @base-font-size-px);
    @rem-b: (unit(@blur) / @base-font-size-px);
    @rem-s: (unit(@spread) / @base-font-size-px);
	-webkit-box-shadow: ~"@{rem-x}rem @{rem-y}rem @{rem-b}rem @{rem-s}rem @{color}";
	-moz-box-shadow: ~"@{rem-x}rem @{rem-y}rem @{rem-b}rem @{rem-s}rem @{color}";
	box-shadow: ~"@{rem-x}rem @{rem-y}rem @{rem-b}rem @{rem-s}rem @{color}";
}

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing: @type;
    -ms-box-sizing: @type;
	box-sizing: @type;
}

.background-color (@color) {
    @a:percentage((1.0-alpha(@color))/5.0);
    background-color: hsl(hue(@color), saturation(@color), lightness(@color)+@a);
    background-color: @color;
}
.column-width (@width) {
    @rem-w: (unit(@width) / @base-font-size-px);
    -webkit-column-width: ~"@{rem-w}rem";
    -moz-column-width: ~"@{rem-w}rem";
    -ms-column-width: ~"@{rem-w}rem";
    column-width: ~"@{rem-w}rem";
}
.column-width-raw (@width) {
    -webkit-column-width: @width;
    -moz-column-width: @width;
    -ms-column-width: @width;
    column-width: @width;
}

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