concisecss 0.0.3 → 0.0.4

data/app/assets/stylesheets/generic/_helper.scss

@@ -1,117 +1,117 @@
 @if $use-helper == true {
-    //------------------------------------//
-    //  $HELPER
-    //------------------------------------//
-    // Add/remove floats
-    .float-left { float: left !important; }
+  //------------------------------------
+  //  HELPER
+  //------------------------------------
+  // Add/remove floats
+  .float-left { float: left !important; }
 
-    .float-right { float: right !important; }
+  .float-right { float: right !important; }
 
-    .float-none { float: none !important; }
+  .float-none { float: none !important; }
 
 
-    // Position elements
-    .align-center {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-    }
+  // Position elements
+  .align-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
 
-    .no-margin { margin: 0 !important; }
+  .no-margin { margin: 0 !important; }
 
-    .icon-alone { display: inline-block; }
+  .icon-alone { display: inline-block; }
 
 
-    // Displaying content
-    .inline { display: block; }
+  // Displaying content
+  .inline { display: block; }
 
-    @include breakpoint(extra-small) { .inline { display: inline; } }
+  @include breakpoint(extra-small) { .inline { display: inline; } }
 
-    .show {
-        display: block;
-        visibility: visible;
-    }
+  .show {
+    display: block;
+    visibility: visible;
+  }
 
-    .hide {
-        display: none;
-        visibility: hidden;
-    }
+  .hide {
+    display: none;
+    visibility: hidden;
+  }
 
-    .screen-reader {
-        border: 0;
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-    }
+  .screen-reader {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
 
 
-    // Full-width elements
-    .full { width: 100%; }
+  // Full-width elements
+  .full { width: 100%; }
 
-    img.full { 
-        max-width: 100%;
-        height: auto;
-        display: block;
-        width: auto;
-    }
+  img.full { 
+    max-width: 100%;
+    height: auto;
+    display: block;
+    width: auto;
+  }
 
 
-    // Text alignment
-    .text-left { text-align: left; }
+  // Text alignment
+  .text-left { text-align: left; }
 
-    .text-right { text-align: right; }
+  .text-right { text-align: right; }
 
-    .text-center { text-align: center; }
+  .text-center { text-align: center; }
 
-    .text-justify { text-align: justify; }
+  .text-justify { text-align: justify; }
 
 
-    // Font weights
-    .weight-light { font-weight: 300 !important; }
+  // Font weights
+  .weight-light { font-weight: 300 !important; }
 
-    .weight-normal { font-weight: 400 !important; }
+  .weight-normal { font-weight: 400 !important; }
 
-    .weight-semibold { font-weight: 600 !important; }
+  .weight-semibold { font-weight: 600 !important; }
 
 
-    // All-caps text
-    .text-uppercase { text-transform: uppercase; }
+  // All-caps text
+  .text-uppercase { text-transform: uppercase; }
 
 
-    // Stylized ampersand
-    .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; }
+  // Stylized ampersand
+  .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; }
 
 
-    // Hide text 
-    .text-hide {
-        border: 0;
-        background-color: transparent;
-        color: transparent;
-        font: 0 / 0 a;
-        text-shadow: none;
-    }
+  // Hide text 
+  .text-hide {
+    border: 0;
+    background-color: transparent;
+    color: transparent;
+    font: 0 / 0 a;
+    text-shadow: none;
+  }
 
 
-    // Caret icon
-    .caret {
-        border-top: 5px solid;
-        border-right: 5px solid transparent;
-        border-left: 5px solid transparent;
-        display: inline-block;
-        margin: 0 0 3px 4px;
-        vertical-align: middle;
-        width: 0;
-    }
+  // Caret icon
+  .caret {
+    border-top: 5px solid;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    display: inline-block;
+    margin: 0 0 3px 4px;
+    vertical-align: middle;
+    width: 0;
+  }
 
 
-    // Border radius
-    .border-radius { border-radius: $border-radius; }
-    
-    
-    // Pill style
-    .pill { border-radius: 25px; }
+  // Border radius
+  .border-radius { border-radius: $border-radius; }
+  
+  
+  // Pill style
+  .pill { border-radius: 25px; }
 }

data/app/assets/stylesheets/generic/_mixins.scss

@@ -2,16 +2,21 @@
 // Passing in a single value will create font-sizing in
 // pixels, rems as well as a proper line-height.
 //
-//    `@include font-size(24px);`
+//  `@include font-size(24px);`
 //
 //
-@mixin font-size($font-size, $line-height:true) {
-		font-size: $font-size;
-		font-size: ($font-size / $base-font-size) * 1rem;
+// Big thanks to inuitcss for inspiration behind this
+// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss)
+@mixin font-size($font-size, $line-height: true) {
+  $rem-size: ($font-size / $base-font-size) * 1rem;
+  $line-height-size: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+  
+  font-size: $font-size;
+  font-size: $rem-size;
 
-		@if $line-height == true {
-				line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
-		}
+  @if $line-height == true {
+    line-height: $line-height-size;
+  }
 }
 
 
@@ -19,15 +24,17 @@
 // Proper vendor prefixes are created just by
 // passing a property value and size value.
 //
-//    `@include vendor(border-radius, 4px);`
+//  `@include vendor(border-radius, 4px);`
 //
 //
+// Thanks to inuitcss for this handy mixin
+// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss)
 @mixin vendor($property, $value...) {
-		-webkit-#{$property}: $value;
-		-moz-#{$property}: $value;
-		-ms-#{$property}: $value;
-		-o-#{$property}: $value;
-		#{$property}: $value;
+  -webkit-#{$property}: $value;
+  -moz-#{$property}: $value;
+  -ms-#{$property}: $value;
+  -o-#{$property}: $value;
+  #{$property}: $value;
 }
 
 
@@ -37,36 +44,36 @@
 // create styles that are built from the ground-up to be
 // mobile friendly.
 //
-//    `@include breakpoint(extra-small) { [styles here] }`
+//  `@include breakpoint(extra-small) { ... }`
 //
 //
 @mixin breakpoint($point) {
-		@if $point == extra-small {
-				@media (min-width: $extra-small-start)  { @content; }
-		}
-
-		@else if $point == small {
-				@media (min-width: $small-start)  { @content; }
-		}
-
-		@else if $point == medium {
-				@media (min-width: $medium-start) { @content; }
-		}
-
-		@else if $point == large {
-				@media (min-width: $large-start) { @content; }
-		}
-
-		@else if $point == extra-large {
-				@media (min-width: $extra-large-start) { @content; }
-		}
-
-		@else if $point == high-density {
-				@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-							 only screen and (min--moz-device-pixel-ratio: 1.5),
-							 only screen and (-o-min-device-pixel-ratio: 3/2),
-							 only screen and (min-device-pixel-ratio: 1.5) { @content; }
-		}
+  @if $point == extra-small {
+    @media (min-width: $extra-small-start)  { @content; }
+  }
+
+  @else if $point == small {
+    @media (min-width: $small-start)  { @content; }
+  }
+
+  @else if $point == medium {
+    @media (min-width: $medium-start) { @content; }
+  }
+
+  @else if $point == large {
+    @media (min-width: $large-start) { @content; }
+  }
+
+  @else if $point == extra-large {
+    @media (min-width: $extra-large-start) { @content; }
+  }
+
+  @else if $point == high-density {
+    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+           only screen and (min--moz-device-pixel-ratio: 1.5),
+           only screen and (-o-min-device-pixel-ratio: 3/2),
+           only screen and (min-device-pixel-ratio: 1.5) { @content; }
+  }
 }
 
 
@@ -75,20 +82,20 @@
 // for variable `$column-number`
 //
 @mixin grid-setup($number: $column-number) {
-		// Assign percentage-based widths for columns
-		@for $i from 1 through $number {
-				.#{$column-prefix + $i} { width: 100% / $number * $i; }
-		}
-
-		@for $i from 1 through $number {
-				// Style all but the last column
-				$width-of-column: (100% - $gutters * ($number - 1)) / $number;
-
-				.gutters .#{$column-prefix + $i} {
-						width: $width-of-column * $i + $gutters * ($i - 1);
-				    content: $gutters * ($i - 1);
-				}
-		}
+  // Assign percentage-based widths for columns
+  @for $i from 1 through $number {
+    .#{$column-prefix + $i} { width: 100% / $number * $i; }
+  }
+
+  @for $i from 1 through $number {
+    // Style all but the last column
+    $width-of-column: (100% - $gutters * ($number - 1)) / $number;
+
+    .gutters .#{$column-prefix + $i} {
+      width: $width-of-column * $i + $gutters * ($i - 1);
+      content: $gutters * ($i - 1);
+    }
+  }
 }
 
 
@@ -97,13 +104,13 @@
 // for variable `$column-number`
 //
 @mixin push-setup($number: $column-number) {
-		@for $i from 1 to $number {
-				.push-#{$i} { left: 100% / $number * $i; }
-		}
+  @for $i from 1 to $number {
+    .push-#{$i} { left: 100% / $number * $i; }
+  }
 
-		@for $i from 1 to $number {
-				.gutters .push-#{$i} { left: 100% / $number * $i - $gutters; }
-		}
+  @for $i from 1 to $number {
+    .gutters .push-#{$i} { left: 100% / $number * $i - $gutters; }
+  }
 }
 
 
@@ -112,11 +119,11 @@
 // for variable `$column-number`
 //
 @mixin pull-setup($number: $column-number) {
-		@for $i from 1 to $number {
-				.pull-#{$i} { right: 100% / $number * $i; }
-		}
+  @for $i from 1 to $number {
+    .pull-#{$i} { right: 100% / $number * $i; }
+  }
 
-		@for $i from 1 to $number {
-				.gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; }
-		}
+  @for $i from 1 to $number {
+    .gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; }
+  }
 }