Skip to content

Instantly share code, notes, and snippets.

@pketh
Last active August 29, 2015 14:11
Show Gist options
  • Save pketh/42d2b1fdadcc5a364b83 to your computer and use it in GitHub Desktop.
Save pketh/42d2b1fdadcc5a364b83 to your computer and use it in GitHub Desktop.
mixins
.border-box() {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.box-shadow(@style) {
-webkit-box-shadow: @style;
-moz-box-shadow: @style;
box-shadow: @style;
}
.box-shadow(@x, @y, @offset, @color) {
-webkit-box-shadow: @x @y @offset @color;
-moz-box-shadow: @x @y @offset @color;
box-shadow: @x @y @offset @color;
}
.box-shadow(@hshadow, @vshadow, @blur, @spread, @color, @inset) {
-webkit-box-shadow: @hshadow @vshadow @blur @spread @color @inset;
-moz-box-shadow: @hshadow @vshadow @blur @spread @color @inset;
box-shadow: @hshadow @vshadow @blur @spread @color @inset;
}
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-top-left-radius(@radius) {
-webkit-border-top-left-radius: @radius;
-moz-border-radius-topleft: @radius;
border-top-left-radius: @radius;
}
.border-bottom-left-radius(@radius) {
-webkit-border-bottom-left-radius: @radius;
-moz-border-radius-bottomleft: @radius;
border-bottom-left-radius: @radius;
}
.border-top-right-radius (@radius) {
-webkit-border-top-right-radius: @radius;
-moz-border-radius-topright: @radius;
border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius) {
-webkit-border-bottom-right-radius: @radius;
-moz-border-radius-bottomright: @radius;
border-bottom-right-radius: @radius;
}
.opacity(@value) {
-khtml-opacity: @value;
-moz-opacity: @value;
-ms-filter: %('alpha(opacity=%s)', @value*100);
filter: e(%("alpha(opacity=%s)", @value*100));
opacity: @value;
}
.translateY(@value) {
-webkit-transform: translateY(@value);
-moz-transform: translateY(@value);
-ms-transform: translateY(@value);
transform: translateY(@value);
}
.translateX(@value) {
-webkit-transform: translateX(@value);
-moz-transform: translateX(@value);
-ms-transform: translateX(@value);
transform: translateX(@value);
}
.transition-all(@time) {
-webkit-transition: all @time ease;
-moz-transition: all @time ease;
transition: all @time ease;
}
.transition-all-timing(@time, @timing) {
-webkit-transition: all @time @timing;
-moz-transition: all @time @timing;
transition: all @time @timing;
}
.transition(@type, @time) {
-webkit-transition: @type @time ease;
-moz-transition: @type @time ease;
transition: @type @time ease;
}
.transition-duration(@time) {
-webkit-transition-duration: @time;
-moz-transition-duration: @time;
transition-duration: @time;
}
.transition-property(@property, @transform) {
-webkit-transition-property: @property, @transform;
-moz-transition-property: @property, @transform;
transition-property: @property, @transform;
}
.unselectable() {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.rotate(@degrees) {
-webkit-transform:rotate(@degrees);
-moz-transform:rotate(@degrees);
-ms-transform:rotate(@degrees);
transform:rotate(@degrees);
}
.box-sizing(@property){
-moz-box-sizing: @property;
-webkit-box-sizing: @property;
box-sizing: @property;
}
.font-size(@px) {
@sizeValue: unit(@px);
@remValue: (@sizeValue / 16);
font-size: unit(@px,px);
font-size: unit(@remValue,rem);
}
.line-height(@px) {
@sizeValue: unit(@px);
@remValue: (@sizeValue / 16);
line-height: unit(@px,px);
line-height: unit(@remValue,rem);
}
.svg-background-image(@vector) {
background-image: url("@{vector}.png");
background-image: none, url("@{vector}.svg");
background-repeat: no-repeat;
}
// binary images with retina "@2x" naming convention
.background-image(@path) {
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx)";
@at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
background-image: url(@path);
@media @highdpi {
background-image: url("@{at2x_path}");
}
}
.translateZ() {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.animation-fill-mode(@mode) {
-webkit-animation-fill-mode: @mode;
animation-fill-mode: @mode;
}
.animation-timing-function(@timing) {
-webkit-animation-timing-function: @timing;
animation-timing-function: @timing;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-iteration-count(@count) {
-webkit-animation-iteration-count: @count;
animation-iteration-count: @count;
}
.animation-duration(@time) {
-webkit-animation-duration: @time;
animation-duration: @time;
}
.transform(@transform) {
-webkit-transform: @transform;
-ms-transform: @transform;
transform: @transform;
}
.two-transforms(@first, @second) {
-webkit-transform: @first @second;
-ms-transform: @first @second;
transform: @first @second;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment