_helpers.css.scss in anecdote-0.0.2

- old
+ new
@@ -1,12 +1,148 @@
-@mixin formatted-text( $tmp-size: 1, $tmp-margin-top: 1, $tmp-margin-bottom: 1, $tmp-line-height: 1.5 ) {
+
+$remify-baseline: 16 !default;
+$respond-device-medium-handheld: 350px;
+$respond-device-large-handheld: 450px;
+$respond-device-tablet: 650px;
+$respond-device-laptop: 960px;
+$respond-device-large-monitor: 1300px;
+$fix-mqs: false !default;
+
+
+
+@mixin scope-variation($sel) {
+  @at-root #{selector-append('.v-size-full-width', &)} {
+    @content;
+  }
+}
+
+
+
+
+@mixin formatted-text( $tmp-size: 1, $tmp-margin-top: 1, $tmp-margin-bottom: 1, $tmp-line-height: 1.65 ) {
   font-size: $tmp-size * 1em;
   @if $tmp-line-height != false {
-    line-height: ( 1 + ( ( $tmp-line-height - 1 ) / $tmp-size ) ) * 1em
+    line-height: ( 1 + ( ( $tmp-line-height - 1 ) / $tmp-size ) ) * 1em;
   }
   @if $tmp-margin-top != false {
-    margin-top: ( $tmp-margin-top / $tmp-size ) * 1em
+    margin-top: ( $tmp-margin-top / $tmp-size ) * 1em;
   }
   @if $tmp-margin-bottom != false {
-    margin-bottom: ( $tmp-margin-bottom / $tmp-size ) * 1em
+    margin-bottom: ( $tmp-margin-bottom / $tmp-size ) * 1em;
   }
+}
+
+
+// remify units
+
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+@mixin remify($properties, $values...) {
+  @each $property in $properties {
+    $max: length($values);
+    $pxValues: '';
+    $remValues: '';
+
+    @for $i from 1 through $max {
+      $value: strip-unit(nth($values, $i));
+      $pxValues: #{$pxValues + round($value*$remify-baseline)}px;
+      @if $i < $max {
+        $pxValues: #{$pxValues + " "};
+      }
+    }
+
+    @for $i from 1 through $max {
+      $value: strip-unit(nth($values, $i));
+      $remValues: #{$remValues + $value}rem;
+      @if $i < $max {
+        $remValues: #{$remValues + " "};
+      }
+    }
+
+    #{$property}: $pxValues;
+    #{$property}: $remValues;
+  }
+}
+
+
+// responsive breakpoints
+@mixin respond($type, $device: false) {
+  // Determine device width
+  $width: 1px;
+  @if $device == medium-handheld {
+    $width: $respond-device-medium-handheld;
+  } @else if $device == large-handheld {
+    $width: $respond-device-large-handheld;
+  } @else if $device == tablet {
+    $width: $respond-device-tablet;
+  } @else if $device == laptop {
+    $width: $respond-device-laptop;
+  } @else if $device == large-monitor {
+    $width: $respond-device-large-monitor;
+  }
+  // If we're outputting for a fixed media query set...
+  @if $fix-mqs and $type == min {
+    // ...and if we should apply these rules...
+    @if $fix-mqs >= $width {
+      // ...output the content the user gave us.
+      @content;
+    }
+  } @else {
+    // Otherwise, output it using a regular media query
+    @if $type == min {
+      @media screen and (min-width: $width) {
+        @content;
+      }
+    } @else if $type == max {
+      @media screen and (max-width: $width) {
+        @content;
+      }
+    } @else if $type == retina {
+      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+        @content;
+      }
+    }
+  }
+}
+
+$old-ie: false !default;
+@mixin old-ie {
+  // Only use this content if we're dealing with old IE
+  @if $old-ie {
+    @content;
+  }
+}
+
+
+@mixin padding-vertical( $tmp-size, $tmp-second-size: false ) {
+  padding-top: $tmp-size;
+  @if $tmp-second-size == false {
+    $tmp-second-size: $tmp-size;
+  }
+  padding-bottom: $tmp-second-size;
+}
+
+@mixin padding-horizontal( $tmp-size, $tmp-second-size: false ) {
+  padding-left: $tmp-size;
+  @if $tmp-second-size == false {
+    $tmp-second-size: $tmp-size;
+  }
+  padding-right: $tmp-second-size;
+}
+
+@mixin margin-vertical( $tmp-size, $tmp-second-size: false ) {
+  margin-top: $tmp-size;
+  @if $tmp-second-size == false {
+    $tmp-second-size: $tmp-size;
+  }
+  margin-bottom: $tmp-second-size;
+}
+
+@mixin margin-horizontal( $tmp-size, $tmp-second-size: false ) {
+  margin-left: $tmp-size;
+  @if $tmp-second-size == false {
+    $tmp-second-size: $tmp-size;
+  }
+  margin-right: $tmp-second-size;
 }