kentucky 0.5.2 → 1.0.0

data/app/assets/stylesheets/kentucky/base/_normalize.scss

@@ -19,6 +19,18 @@ time, mark, audio, video{
   padding: 0;
 }
 
+// ------------------------------------------------------------------- //
+//  Border-Box
+// ------------------------------------------------------------------- //
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
 // ------------------------------------------------------------------- //
 //  Display Definitions
 // ------------------------------------------------------------------- //
@@ -92,18 +104,22 @@ abbr[title]{
   border-bottom: 1px dotted;
 }
 
+address{
+  @extend %vertical-rhythm;
+}
+
 strong{
   font-weight: bold;
 }
 
 hr{
-  @include prefixer(box-sizing, content-box, moz spec);
   height: 0;
 }
 
 code,
 pre{
-  font-family: $monospace; // "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+  @extend %vertical-rhythm;
+  font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
   font-size: 1em;
 }
 
@@ -111,6 +127,10 @@ pre{
   white-space: pre-wrap;
 }
 
+p{
+  @extend %vertical-rhythm;
+}
+
 small{
   font-size: 75%;
 }
@@ -152,8 +172,8 @@ select,
 textarea{
   margin: 0;
   font-family: $base-font-family;
-  font-size: 100%;
-  line-height: 1;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
 }
 
 button,
@@ -165,7 +185,7 @@ button,
 html input[type="button"],
 input[type="reset"],
 input[type="submit"]{
-  @include prefixer(appearance, button, webkit);
+  appearance: button;
   cursor: pointer;
 }
 
@@ -182,7 +202,6 @@ input[type="radio"]{
 
 input[type="search"] {
   -webkit-appearance: textfield;
-  @include prefixer(appearance, content-box, moz webkit spec);
 }
 
 input[type="search"]::-webkit-search-cancel-button,
@@ -208,7 +227,8 @@ textarea{
 ul,
 ol,
 dl{
-  margin-left: 1rem;
+  @extend %vertical-rhythm;
+  padding: 0;
 }
 
 li > ul,
@@ -222,6 +242,12 @@ li > ol{
 // ------------------------------------------------------------------- //
 
 table{
+  @extend %vertical-rhythm;
   border-collapse: collapse;
   border-spacing: 0;
+
+  th,
+  td{
+    padding: $base-line-height / 2;
+  }
 }

data/app/assets/stylesheets/kentucky/base/_typography.scss

@@ -1,24 +1,40 @@
+// ------------------------------------------------------------------- //
+//  Setup
+// ------------------------------------------------------------------- //
+
+$base-space: $base-line-height;
+$base-ratio: $base-line-height / $base-font-size;
+
+%vertical-rhythm{
+  margin-bottom: $base-space;
+  margin-bottom: $base-ratio + rem;
+}
+
 // ------------------------------------------------------------------- //
 //  Base Typographic Rules
 // ------------------------------------------------------------------- //
 
-html{
-  font: #{($base-font-size/16px)*1em} / #{$base-line-height} $base-font-family;
+body{
+  color: $base-font-color;
+  font: #{$base-font-size} / #{$base-line-height} $base-font-family;
+  -webkit-font-smoothing: antialiased;
 }
 
 // ------------------------------------------------------------------- //
 //  Headings
-// 
+//
 //  The goal here is to define headings and establish practical
 //  font-sizing from the get go.
 //
 //  Also includes a "double-stranded hierarchy" allowing you to use HTML
-//  heading elements or the alternate extend included (based on the 
+//  heading elements or the alternate extend included (based on the
 //  military alphabet).
 // ------------------------------------------------------------------- //
 
 h1, h2, h3, h4, h5, h6{
+  @extend %vertical-rhythm;
   font-family: $brand-font-family;
+  font-weight: normal;
 }
 
 h1,
@@ -58,6 +74,8 @@ h6,
 // ------------------------------------------------------------------- //
 
 %hgroup{
+  @extend %vertical-rhythm;
+
   @include headings(1,6){
     margin-bottom: 0;
   }
@@ -67,48 +85,39 @@ h6,
 //  Extra Large / Small Extends
 // ------------------------------------------------------------------- //
 
-%giga{
-  @include font-size($giga-size);
+%micro{
+  @include font-size($micro-size);
 }
 
-%mega{
-  @include font-size($mega-size);
+%milli{
+  @include font-size($milli-size);
 }
 
 %kilo{
   @include font-size($kilo-size);
 }
 
-%milli{
-  @include font-size($milli-size);
+%mega{
+  @include font-size($mega-size);
 }
 
-%micro{
-  @include font-size($micro-size);
+%giga{
+  @include font-size($giga-size);
 }
 
+
 // ------------------------------------------------------------------- //
 //  Links
 // ------------------------------------------------------------------- //
 
 a{
-  color: $link-color;
+  color: $base-link-color;
   text-decoration: none;
-}
-
-// ------------------------------------------------------------------- //
-//  Single-direction Margins
-// ------------------------------------------------------------------- //
-
-h1, h2, h3, h4, h5, h6,
-ul, ol, dl,
-p,
-pre, table, fieldset{
-  margin-bottom: ($base-font-size / $base-line-height); // IE8 Fallback
-  margin-bottom: 1rem;
-}
+  @include transition(color .3s linear);
 
-hr{
-  margin: ($base-font-size / $base-line-height) 0;
-  margin: 1rem 0;
+  &:hover,
+  &:active,
+  &:focus{
+    color: $hover-link-color;
+  }
 }

data/app/assets/stylesheets/kentucky/functions/_gradient-functions.scss

@@ -0,0 +1,214 @@
+// ------------------------------------------------------------------- //
+//  Bourbon Gradient Mixins Req. Functions
+//
+//  https://github.com/thoughtbot/bourbon/tree/master/app/assets/stylesheets/helpers
+// ------------------------------------------------------------------- //
+
+// Position Parser
+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+  @if $gradient-positions
+  and ($gradient-type == linear)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _linear-positions-parser($gradient-positions);
+  }
+  @else if $gradient-positions
+  and ($gradient-type == radial)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _radial-positions-parser($gradient-positions);
+  }
+  @return $gradient-positions;
+}
+
+// Linear Position Parser
+@function _linear-positions-parser($pos) {
+  $type: type-of(nth($pos, 1));
+  $spec: null;
+  $degree: null;
+  $side: null;
+  $corner: null;
+  $length: length($pos);
+  // Parse Side and corner positions
+  @if ($length > 1) {
+    @if nth($pos, 1) == "to" { // Newer syntax
+      $side: nth($pos, 2);
+
+      @if $length == 2 { // eg. to top
+        // Swap for backwards compatability
+        $degree: _position-flipper(nth($pos, 2));
+      }
+      @else if $length == 3 { // eg. to top left
+        $corner: nth($pos, 3);
+      }
+    }
+    @else if $length == 2 { // Older syntax ("top left")
+      $side: _position-flipper(nth($pos, 1));
+      $corner: _position-flipper(nth($pos, 2));
+    }
+
+    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    $spec: to $side $corner;
+  }
+  @else if $length == 1 {
+    // Swap for backwards compatability
+    @if $type == string {
+      $degree: $pos;
+      $spec: to _position-flipper($pos);
+    }
+    @else {
+      $degree: -270 - $pos; //rotate the gradient opposite from spec
+      $spec: $pos;
+    }
+  }
+  $degree: unquote($degree + ",");
+  $spec:   unquote($spec + ",");
+  @return $degree $spec;
+}
+
+@function _position-flipper($pos) {
+ @return if($pos == left, right, null)
+         if($pos == right, left, null)
+         if($pos == top, bottom, null)
+         if($pos == bottom, top, null);
+}
+
+// Radial Argument Parser
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+    $spec-at-index: null;
+
+    // Determine if spec was passed to mixin
+    @if type-of($value) == list {
+      $spec-at-index: if(index($value, at), index($value, at), false);
+    }
+    @if $spec-at-index {
+      @if $spec-at-index > 1 {
+        @for $i from 1 through ($spec-at-index - 1) {
+          $shape-size: $shape-size nth($value, $i);
+        }
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      @else if $spec-at-index == 1 {
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      $G1: null;
+    }
+
+    // If not spec calculate correct values
+    @else {
+      @if ($pos-type != color) or ($first-val != "transparent") {
+        @if ($pos-type == number)
+        or ($first-val == "center")
+        or ($first-val == "top")
+        or ($first-val == "right")
+        or ($first-val == "bottom")
+        or ($first-val == "left") {
+
+          $pos: $value;
+
+          @if $pos == $G1 {
+            $G1: null;
+          }
+        }
+
+        @else if
+           ($first-val == "ellipse")
+        or ($first-val == "circle")
+        or ($first-val == "closest-side")
+        or ($first-val == "closest-corner")
+        or ($first-val == "farthest-side")
+        or ($first-val == "farthest-corner")
+        or ($first-val == "contain")
+        or ($first-val == "cover") {
+
+          $shape-size: $value;
+
+          @if $value == $G1 {
+            $G1: null;
+          }
+
+          @else if $value == $G2 {
+            $G2: null;
+          }
+        }
+      }
+    }
+  }
+  @return $G1, $G2, $pos, $shape-size;
+}
+
+// Radial Position Parser
+@function _radial-positions-parser($gradient-pos) {
+  $shape-size: nth($gradient-pos, 1);
+  $pos:        nth($gradient-pos, 2);
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+             unquote(if($shape-size, "#{$shape-size},", null));
+  $pos-spec: if($pos, "at #{$pos}", null);
+
+  $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+  // Add comma
+  @if ($spec != '  ') {
+    $spec: "#{$spec},"
+  }
+
+  @return $pre-spec $spec;
+}
+
+// Render Gradients
+// Used for linear and radial gradients within background-image or border-image properties
+
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+  $pre-spec: null;
+  $spec: null;
+  $vendor-gradients: null;
+  @if $gradient-type == linear {
+    @if $gradient-positions {
+      $pre-spec: nth($gradient-positions, 1);
+      $spec:     nth($gradient-positions, 2);
+    }
+  }
+  @else if $gradient-type == radial {
+    $pre-spec: nth($gradient-positions, 1);
+    $spec:     nth($gradient-positions, 2);
+  }
+
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+  }
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}
+
+// Shape Size Stripper
+@function _shape-size-stripper($shape-size) {
+  $shape-size-spec: null;
+  @each $value in $shape-size {
+    @if ($value == "cover") or ($value == "contain") {
+      $value: null;
+    }
+    $shape-size-spec: "#{$shape-size-spec} #{$value}";
+  }
+  @return $shape-size-spec;
+}

data/app/assets/stylesheets/kentucky/functions/_remify.scss

@@ -0,0 +1,39 @@
+// ------------------------------------------------------------------- //
+//  Convert Pixel to REM
+//
+//  Credit: https://github.com/mariusz/remify
+// ------------------------------------------------------------------- //
+
+@function remify($px){
+  $base-rem-size: $base-font-size / 1rem;
+
+  // If value is 0, return 0
+  @if $px == 0 {
+    @return 0;
+  }
+
+  @if type-of(px) == "number" {
+
+    @return $px / $base-rem-size;
+
+  } @else {
+
+    $rems: ();
+
+    @each $value in $px{
+
+      @if $value == 0{
+        $rems: append($rems, $value);
+      } @else {
+        $rems: append($rems, ($value / $base-rem-size));
+      }
+    }
+
+    @return $rems;
+  }
+}
+
+@mixin rem($property, $values){
+  #{$property}: $values;
+  #{$property}: remify($values);
+}