kentucky 0.5.2 → 1.0.0

data/app/assets/stylesheets/kentucky/{extends/_mute.scss → functions/_strip-units.scss}

@@ -1,8 +1,7 @@
 // ------------------------------------------------------------------- //
-//  Muted
+//  Strip Units from a value
 // ------------------------------------------------------------------- //
 
-%muted{
-  opacity: .5;
-  filter: alpha(opacity=50);
+@function strip-units($value){
+  @return $value / ($value * 0 + 1)
 }

data/app/assets/stylesheets/kentucky/functions/_tint-shade.scss

@@ -0,0 +1,12 @@
+// ------------------------------------------------------------------- //
+//  Tint & Shade (from Bourbon)
+// ------------------------------------------------------------------- //
+
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}

data/app/assets/stylesheets/kentucky/grid/_grid.scss

@@ -0,0 +1,114 @@
+// ------------------------------------------------------------------- //
+//  Grid Settings
+// ------------------------------------------------------------------- //
+
+$max-width: 960px !default;
+$grid-columns: 12 !default;
+$grid-gutter: 15px !default;
+$column: $max-width / $grid-columns !default;
+
+// ------------------------------------------------------------------- //
+//  Set Container
+// ------------------------------------------------------------------- //
+
+@mixin outer-container {
+  max-width: $max-width;
+  width: 100%;
+  margin: 0 auto;
+}
+
+// ------------------------------------------------------------------- //
+//  Set Rows
+// ------------------------------------------------------------------- //
+
+@mixin row($items){
+  display: block;
+  @include clearfix;
+
+  & > *{
+    padding: 0 $grid-gutter;
+  }
+
+  & > *:nth-child(#{$items}n+1){
+    padding-left: 0;
+    padding-right: ($grid-gutter * 2);
+  }
+  & > *:nth-child(#{$items}n+2){
+    padding-left: 0;
+  }
+
+  & > *:nth-child(#{$items}n-1){
+    padding-right: 0;
+  }
+  & > *:nth-child(#{$items}n){
+    padding-left: ($grid-gutter * 2);
+    padding-right: 0;
+  }
+}
+
+// ------------------------------------------------------------------- //
+//  Set Widths
+// ------------------------------------------------------------------- //
+
+@mixin span-columns($col-size, $flow: left) {
+
+  $col-width: percentage($col-size / $grid-columns);
+
+  @if $col-size > $grid-columns {
+    @warn "Column size should not be greater than max-columns (#{$grid-columns}).";
+  }
+
+  @else {
+    float: left;
+    width: $col-width;
+    padding: 0 $grid-gutter;
+
+    @if $flow == "right"{
+      float: right;
+    }
+
+    @else if $flow == "center" {
+      float: none;
+      margin: 0 auto;
+    }
+  }
+}
+
+// ------------------------------------------------------------------- //
+//  Shift
+// ------------------------------------------------------------------- //
+
+@mixin shift($col-shift) {
+  $shift: percentage($col-shift / 12);
+
+  @if $col-shift > 12 {
+    @warn "Should not shift greater than max-columns (12).";
+  }
+
+  @else {
+    margin-left: $shift;
+  }
+}
+
+// ------------------------------------------------------------------- //
+//  Hug
+// ------------------------------------------------------------------- //
+
+@mixin hug($direction){
+
+  @if $direction == "left" {
+    padding-left: 0;
+  }
+
+  @else if $direction == "right" {
+    padding-right: 0;
+  }
+
+  @else if $direction == "both" {
+    padding: 0;
+  }
+
+  @else {
+    @warn "Hug requires 'left', 'right', or 'both'. Please choose a valid direction.";
+  }
+}

data/app/assets/stylesheets/kentucky/helpers/_anti-aliased.scss

@@ -0,0 +1,8 @@
+// ------------------------------------------------------------------- //
+//  For chunky looking fonts (FF/Webkit)
+// ------------------------------------------------------------------- //
+
+%antialised{
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

data/app/assets/stylesheets/kentucky/helpers/_border.scss

@@ -0,0 +1,32 @@
+// ------------------------------------------------------------------- //
+//  Border Mixin
+//
+//  For use in instances where multiple border-widths are required
+// ------------------------------------------------------------------- //
+
+@mixin border($border-width, $border-style: solid, $border-color: black) {
+  // if too many widths, throw error
+  @if (length($border-width) > 4) {
+    @warn "Border-width accepts a maximum of 4 width parameters;  #{length($border-width)} found.";
+  }
+
+  // New border width list
+  $new-width: ();
+
+  // Populate it
+  @for $i from 1 through length($border-width) {
+
+    // If border is unitless, append unit
+    @if unitless(nth($border-width, $i)) {
+      $new-width: append($new-width, nth($border-width, $i) + px);
+    }
+
+    // Otherwise, keep as is
+    @else {
+      $new-width: append($new-width, nth($border-width, $i));
+    }
+  }
+
+  border: $border-style $border-color;
+  border-width: $new-width;
+}

data/app/assets/stylesheets/kentucky/helpers/_clearfix.scss

@@ -0,0 +1,14 @@
+// ------------------------------------------------------------------- //
+//  Clearfix
+// 
+//  Source:
+//  css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
+// ------------------------------------------------------------------- //
+
+@mixin clearfix{
+  &:after {
+    content:"";
+    display:table;
+    clear:both;
+  }
+}

data/app/assets/stylesheets/kentucky/{mixins → helpers}/_font-size.scss

@@ -1,12 +1,11 @@
 // ------------------------------------------------------------------- //
-//  Font Size / Line Height
+//  Quickly generate rem font-size w/ px fallback and line-height
 // ------------------------------------------------------------------- //
 
 @mixin font-size($font-size, $line-height: true){
-  font-size: $font-size;
-  font-size: ($font-size / $base-font-size) * 1rem;
-  
-  @if $line-height == true{
+  font-size: remify($font-size);
+
+  @if $line-height == true {
     line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
   }
 }

data/app/assets/stylesheets/kentucky/helpers/_headings.scss

@@ -0,0 +1,11 @@
+// ------------------------------------------------------------------- //
+//  Quickly target H# - H#
+// ------------------------------------------------------------------- //
+
+@mixin headings($from: 1, $to: 6){
+  @for $i from $from through $to{
+    h#{$i}{
+      @content
+    }
+  }
+}

data/app/assets/stylesheets/kentucky/helpers/_hide-text.scss

@@ -0,0 +1,9 @@
+// ------------------------------------------------------------------- //
+//  Image Replacement - Hide Text
+// ------------------------------------------------------------------- //
+
+@mixin hide-text{
+  color: transparent;
+  font: 0/0 a;
+  text-shadow: none;
+}

data/app/assets/stylesheets/kentucky/helpers/_html5-input-types.scss

@@ -0,0 +1,30 @@
+// ------------------------------------------------------------------- //
+//  All-encompasing HTML5 Input Types
+//
+//  From Bourbon.io
+// ------------------------------------------------------------------- //
+
+$inputs-list:
+  'input[type="email"]',
+  'input[type="number"]',
+  'input[type="password"]',
+  'input[type="search"]',
+  'input[type="tel"]',
+  'input[type="text"]',
+  'input[type="url"]',
+
+  // Webkit / Gecko specific
+  'input[type="color"]',
+  'input[type="date"]',
+  'input[type="datetime"]',
+  'input[type="datetime-local"]',
+  'input[type="month"]',
+  'input[type="time"]',
+  'input[type="week"]';
+
+$unquoted-inputs-list: ();
+  @each $input-type in $inputs-list{
+    $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global;
+  }
+
+$all-text-inputs: $unquoted-inputs-list;

data/app/assets/stylesheets/kentucky/helpers/_linear-gradient.scss

@@ -0,0 +1,42 @@
+// ------------------------------------------------------------------- //
+//  Gradient Mixin from Bourbon
+// ------------------------------------------------------------------- //
+
+@mixin linear-gradient($pos, $G1, $G2: null,
+                       $G3: null, $G4: null,
+                       $G5: null, $G6: null,
+                       $G7: null, $G8: null,
+                       $G9: null, $G10: null,
+                       $fallback: null) {
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+  $pos-spec: null;
+  $pos-degree: null;
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+     $pos: null;
+  }
+
+  @if $pos {
+    $positions: _linear-positions-parser($pos);
+    $pos-degree: nth($positions, 1);
+    $pos-spec:   nth($positions, 2);
+  }
+
+  $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
+
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
+  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
+}

data/app/assets/stylesheets/kentucky/helpers/_mute.scss

@@ -0,0 +1,15 @@
+// ------------------------------------------------------------------- //
+//  Muted
+// ------------------------------------------------------------------- //
+
+@mixin muted($mute-amt){
+
+  @if $mute-amt > 1{
+    @warn "Mute amount should be in decimal format (.1, .2, .etc)";
+  }
+
+  @else {
+    opacity: $mute-amt;
+    filter: alpha(opacity=($mute-amt * 100));
+  }
+}

data/app/assets/stylesheets/kentucky/helpers/_position.scss

@@ -0,0 +1,42 @@
+// ------------------------------------------------------------------- //
+//  Basic Positioning (Type + T/L/B/R Values)
+//
+//  @include position(absolute, 10px 0 0 10px);
+// ------------------------------------------------------------------- //
+
+@mixin position($pos-type: relative, $pos-vals: 0 0 0 0) {
+
+  // If no position type designated, default to "relative"
+  @if type-of($pos-type) == list{
+    $pos-vals: $pos-type;
+    $pos-type: relative;
+  }
+
+  // Separate values into top, right, bottom, left
+  $top: nth($pos-vals, 1);
+  $right: nth($pos-vals, 2);
+  $bottom: nth($pos-vals, 3);
+  $left: nth($pos-vals, 4);
+
+  // Return position
+  position: $pos-type;
+
+  // Return values
+  // If value is a number and has a unit type, print value
+  // otherwise ignore
+  @if (type-of($top) == number and not unitless($top)){
+    top: $top;
+  }
+
+  @if (type-of($right) == number and not unitless($right)){
+    right: $right;
+  }
+
+  @if (type-of($bottom) == number and not unitless($bottom)){
+    bottom: $bottom;
+  }
+
+  @if (type-of($left) == number and not unitless($left)){
+    left: $left;
+  }
+}

data/app/assets/stylesheets/kentucky/helpers/_prefixer.scss

@@ -0,0 +1,34 @@
+// ------------------------------------------------------------------- //
+//  Browser prefixing
+//
+//  @include prefixer(border-radius, 5px, webkit ms spec);
+// ------------------------------------------------------------------- //
+
+$prefix-webkit:  true !default;
+$prefix-mozilla: true !default;
+$prefix-ms:      true !default;
+$prefix-opera:   true !default;
+$prefix-spec:    true !default;
+
+@mixin prefixer($propery, $value, $prefixes){
+  @each $prefix in $prefixes{
+    @if $prefix == webkit{
+      -webkit-#{property}: $value;
+    }
+    @else if $prefix == moz{
+      -moz-#{property}: $value;
+    }
+    @else if $prefix == ms{
+      -ms-#{property}: $value;
+    }
+    @else if $prefix == o{
+      -o-#{property}: $value;
+    }
+    @else if $prefix == spec{
+      #{property}: $value;
+    }
+    @else{
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}

data/app/assets/stylesheets/kentucky/helpers/_radial-gradient.scss

@@ -0,0 +1,24 @@
+// ------------------------------------------------------------------- //
+//  Radial Gradient
+// ------------------------------------------------------------------- //
+
+@function radial-gradient($G1,        $G2,
+                          $G3: null,  $G4: null,
+                          $G5: null,  $G6: null,
+                          $G7: null,  $G8: null,
+                          $G9: null,  $G10: null,
+                          $pos: null,
+                          $shape-size: null) {
+
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
+  $type: radial;
+  $gradient: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
+
+  $type-gradient: $type, $shape-size $pos, $gradient;
+  @return $type-gradient;
+}