assets/src/sass/helpers/_mixins.scss

   1 /*
   2  | -----------------------------------------------------------------------------
   3  | Breakpoints
   4  | -----------------------------------------------------------------------------
   5 */
   6 @mixin breakpoint($breakpoint) {
   7   @if $breakpoint == "mobile" {
   8     @media (max-width: 640px) {
   9       @content;
  10     }
  11   }
  12
  13   @else if $breakpoint == "desktop" {
  14     @media (min-width: 641px) {
  15       @content;
  16     }
  17   }
  18 }
  19
  20 /*
  21  | -----------------------------------------------------------------------------
  22  | Useful mixins
  23  | -----------------------------------------------------------------------------
  24 */
  25 @mixin border-radius($value: 3px) {
  26   -webkit-border-radius: $value;
  27   -moz-border-radius   : $value;
  28   -ms-border-radius    : $value;
  29   -o-border-radius     : $value;
  30   border-radius        : $value;
  31 }
  32
  33 @mixin transition($transition : all 150ms ease-in-out) {
  34   -webkit-transition: $transition;
  35   -moz-transition   : $transition;
  36   -ms-transition    : $transition;
  37   -o-transition     : $transition;
  38   transition        : $transition;
  39 }
  40
  41 @mixin translateX($value) {
  42   -webkit-transform: translateX($value);
  43   -moz-transform:    translateX($value);
  44   -ms-transform:     translateX($value);
  45   -o-transform:      translateX($value);
  46   transform:         translateX($value);
  47 }
  48
  49 /*
  50  | -----------------------------------------------------------------------------
  51  | Columns for posts
  52  | -----------------------------------------------------------------------------
  53 */
  54 @mixin post2Col() {
  55   width: 48%;
  56   float: left;
  57   margin-right: 4%;
  58
  59   &:nth-child(2n) {
  60     margin-right: 0;
  61   }
  62
  63   &:nth-child(2n + 1) {
  64     clear: left;
  65   }
  66 }
  67
  68 @mixin post3Col() {
  69   width: 31.33333%;
  70   float: left;
  71   margin-right: 3%;
  72
  73   &:nth-child(3n) {
  74     margin-right: 0;
  75   }
  76
  77   &:nth-child(3n + 1) {
  78     clear: left;
  79   }
  80 }