.at-viewport(@width) {
@at: ~'@';
@{at}-ms-viewport { width: @width; }
@{at}-o-viewport { width: @width; }
@{at}viewport { width: @width; }
}
! MIXINS - _mixins.less ! --------------------
! -- GLOBAL SETTINGS 'N' SHYI' ! ---- @viewport new proposed spec @ http://dev.w3.org/csswg/css-device-adapt/#the-viewport-rule
.at-viewport(@width) {
@at: ~'@';
@{at}-ms-viewport { width: @width; }
@{at}-o-viewport { width: @width; }
@{at}viewport { width: @width; }
}
! ---- ::selection
.selection(@color) {
::-moz-selection { background-color: @color; text-shadow: none; }
::selection { background-color: @color; text-shadow: none; }
}
.selection(text, @color) {
::-moz-selection { color: @color; text-shadow: none; }
::selection { color: @color; text-shadow: none; }
}
! -- MICRO CLEARFIX HACK
.clearfix() {
*zoom: 1;
&:before, &:after { content: " "; display: table; }
&:after { clear: both; }
}
! -- VENDOR-PREFIXES & COMPATIBILITY
.box-sizing(@sizing) {
-webkit-box-sizing: @sizing;
-moz-box-sizing: @sizing;
box-sizing: @sizing;
}
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.opacity(@opacity: .7) {
@filter: (@opacity * 100); // to follow the spec
opacity: @opacity;
filter: ~"alpha(opacity=@{filter})";
}
! ---- background proporties
.background-image(@type: linear, @gradient) {
background-image: ~'-webkit-@{type}-gradient(@{gradient})';
background-image: ~'-moz-@{type}-gradient(@{gradient})';
background-image: ~'-ms-@{type}-gradient(@{gradient})';
background-image: ~'-o-@{type}-gradient(@{gradient})';
background-image: ~'@{type}-gradient(@{gradient})';
}
.background-size(@size) {
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
}
! ---- columns
.columns(@columns) {
-webkit-columns: @columns;
-moz-columns: @columns;
columns: @columns;
}
.column-gap(@gap) {
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
.column-rule(@rule) {
-webkit-column-rule: @rule;
-moz-column-rule: @rule;
column-rule: @rule;
}
! ---- transitions
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
.inline-block() {
*zoom: 1;
*display: inline;
}
! -- TEXT
.hyphens(@hyphens: auto) {
-webkit-hyphens: @hyphens;
-moz-hyphens: @hyphens;
-ms-hyphens: @hyphens;
hyphens: @hyphens;
}
! ---- links
.links(@color, @color-hover) { // to be nested under an `a` tag selector
color: @color;
font-weight: normal;
text-decoration: none;
&:hover, &.active, .active & { color: @color-hover; }
}
.links(@color, @color-hover, @color-disabled) { // to be nested under an `a` tag selector
color: @color;
font-weight: normal;
text-decoration: none;
&:hover, &.active, .active & { color: @color-hover; }
&.disabled, &.coming-soon {
cursor: default;
&:hover { color: @color-disabled; }
}
}
! -- BACKGROUND
.baseline-grid(@color) {
@linear-gradient:
fade(@color,5) 0%, fade(@color,5) 25%,
fade(@color,15) 25%, fade(@color,15) 75%,
fade(@color,5) 75%, fade(@color,5) 100%;
background: -webkit-linear-gradient(@linear-gradient);
background: -moz-linear-gradient(@linear-gradient);
background: -ms-linear-gradient(@linear-gradient);
background: -o-linear-gradient(@linear-gradient);
background: linear-gradient(@linear-gradient);
background-size: 27px 27px;
}
.black-stripes() {
@black-stripes:
left, fade(@white,50) 0%, fade(@white,50) 25%,
transparent 25%, transparent 50%,
fade(@white,50) 50%, fade(@white,50) 75%,
transparent 75%, transparent;
background-color: @black-light;
background-image: -webkit-gradient(
linear, 0 0, 100% 0,
color-stop(.25, fade(@white,50)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, fade(@white,50)), color-stop(.75, fade(@white,50)),
color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@black-stripes);
background-image: -moz-linear-gradient(@black-stripes);
background-image: -ms-linear-gradient(@black-stripes);
background-image: -o-linear-gradient(@black-stripes);
background-image: linear-gradient(@black-stripes);
-webkit-background-size: 20rem;
-moz-background-size: 20rem;
-o-background-size: 20rem;
background-size: 20rem;
}
! -- MEDIA QUERY MIXINS Included here to avoid compiler errors if I never use a given query (i.e. never have to define a query's mixin elsewhere)
#media(mama) {}
#media(papa) {}
#media(print) {}