2 |-------------------------------------------------------------------------------
4 |-------------------------------------------------------------------------------
6 // Shortcuts to breakpoints
7 @mixin breakpoint($breakpoint) {
8 @if $breakpoint == "mobile" {
9 @media (max-width: 640px) {
14 @else if $breakpoint == "desktop" {
15 @media (min-width: 641px) {
22 @mixin border-radius($value: 3px) {
23 -webkit-border-radius: $value;
24 -moz-border-radius : $value;
25 -ms-border-radius : $value;
26 -o-border-radius : $value;
27 border-radius : $value;
31 @mixin bg-size($value: cover) {
32 -webkit-background-size: $value;
33 -moz-background-size : $value;
34 -ms-background-size : $value;
35 -o-background-size : $value;
36 background-size : $value;
40 @mixin transition($transition : all 150ms ease-in-out) {
41 -webkit-transition: $transition;
42 -moz-transition : $transition;
43 -ms-transition : $transition;
44 -o-transition : $transition;
45 transition : $transition;
49 @mixin translateX($value) {
50 -webkit-transform: translateX($value);
51 -moz-transform: translateX($value);
52 -ms-transform: translateX($value);
53 -o-transform: translateX($value);
54 transform: translateX($value);