Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Random sass mixins
@mixin overflow-touch() {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@mixin stretch($top:0, $right:0, $bottom:0, $left:0, $fixed: false, $centered: false) {
@if $fixed {
position: fixed;
} @else {
position: absolute;
}
@if $centered {
margin: auto;
}
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
@mixin spring-btn($scale: 1.2, $duration: 0.2s, $delay: 0s) {
@include transition-property (transform);
@include transition-duration($duration);
@include transition-timing-function($e-spring);
@include transition-delay($delay);
&:hover {
@include transform(scale(1.2));
}
}
@mixin composite-layer {
@include transform(translate3d(0, 0, 0));
@include backface-visibility(hidden);
}
// --------------------------------------------------------
// arrows
// --------------------------------------------------------
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// @example
// .element{
// @include arrow(top, #000, 50px);
// }
@mixin arrow($direction, $color, $size){
display: block;
height: 0;
width: 0;
@if $direction == 'top' {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
} @else if $direction == 'right' {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
} @else if $direction == 'bottom' {
border-top: $size solid $color;
border-right: $size solid transparent;
border-left: $size solid transparent;
} @else if $direction == 'left' {
border-top: $size solid transparent;
border-right: $size solid $color;
border-bottom: $size solid transparent;
} @else if $direction == 'top-left' {
border-top: $size solid $color;
border-right: $size solid transparent;
} @else if $direction == 'top-right' {
border-top: $size solid $color;
border-left: $size solid transparent;
} @else if $direction == 'bottom-left' {
border-bottom: $size solid $color;
border-right: $size solid transparent;
} @else if $direction == 'bottom-right' {
border-bottom: $size solid $color;
border-left: $size solid transparent;
}
}
// http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
@mixin font-smoothing($value: on) {
@if $value == on {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@else {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
}
%hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
%btn {
display: inline-block;
border-radius: 5px;
cursor: pointer;
&:hover {
text-decoration: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.