gumby_on_rails 0.0.1

data/app/assets/stylesheets/gumby/functions/_palette.scss

@@ -0,0 +1,76 @@
+// Color Pallete
+
+@function getColor($key, $state: false, $list: $ui-coloring) {
+  @each $color in $list {
+    @if $key == nth($color, 1) and $state == default {
+        @return nth($color, 2);
+    }
+    @else if $key == nth($color, 1) and $state == hover {
+        @return nth($color, 3);
+    }
+    @else if $key == nth($color, 1) {
+        @return nth($color, 1);
+    }
+  }
+  @return false;
+}
+
+@mixin palette($shade, $palette-text-color:false) {
+  @if $shade == getColor($shade) {
+    @if $palette-text-color != false  {
+      color: $palette-text-color;
+    }
+    @else {
+      color: lighten(getColor($shade, default), 80%);
+    }
+    background: getColor($shade, default);
+    border: 1px solid getColor($shade, default);
+    &:hover {
+      background: getColor($shade, hover);
+      border: 1px solid darken(getColor($shade, hover), 3%);
+    }
+    &:active {
+      background: darken(getColor($shade, default), 10%);
+      border: 1px solid darken(getColor($shade, default), 10%);
+    }
+
+    @if $shade == default {
+      @if $palette-text-color != false  {
+        color: $palette-text-color;
+      }
+      @else {
+        color: darken(getColor($shade, default), 61.5%);
+      }
+      border: 1px solid getColor($shade, default);
+      &:hover {
+        border: 1px solid darken(getColor($shade, hover), 5%);
+      }
+    }
+    @if $shade == warning {
+      @if $palette-text-color != false  {
+        color: $palette-text-color;
+      }
+      @else {
+        color: darken(getColor($shade, hover), 40%);
+      }
+    }
+  }
+  @else {
+    @if $palette-text-color != false {
+      color: $palette-text-color;
+    }
+    @else {
+      color: lighten($shade, 80%);
+    }
+    background: $shade;
+    border: 1px solid $shade;
+    &:hover {
+      background: lighten($shade, 30%);
+      border: 1px solid lighten($shade, 27%);
+    }
+    &:active {
+      background: darken($shade, 10%);
+      border: 1px solid darken($shade, 10%);
+    }
+  }
+}

data/app/assets/stylesheets/gumby/functions/_responsivity.scss

@@ -0,0 +1,34 @@
+// Responsive Mixins
+
+@mixin respond($media) {
+  @if $media == portrait-phones {
+    @media only screen and (max-width: $min-device-width) { @content; }
+  }
+  @else if $media == landscape-phones {
+    @media only screen and (min-width: breakpoint($min-device-width)) and (max-width: breakpoint($tablet-device-width)) { @content; }
+  }
+  @else if $media == all-phones {
+    @media only screen and (max-width: breakpoint($tablet-device-width)) { @content; }
+  }
+  @else if $media == portrait-tablets {
+    @media only screen and (max-width: $tablet-device-width) { @content; }
+  }
+  @else if $media == tablets {
+  	@media only screen and (min-width: $tablet-device-width) and (max-width: $document-width - 1) { @content; }
+  }
+  @else if $media == desktop {
+    @media only screen and (min-width: $tablet-device-width) { @content; }
+  }
+  @else if $media == document-width {
+    @media only screen and (max-width: $document-width + 20) { @content; }
+  }
+  @else if $media == large-screens {
+    @media only screen and (min-width: $max-device-width) { @content; }
+  }
+  @else if $media == print {
+    @media print { @content; }
+  }
+  @else {
+    @media only screen and ('#{$media}') { @content; }
+  }
+}

data/app/assets/stylesheets/gumby/functions/_semantic-grid.scss

@@ -0,0 +1,170 @@
+
+
+// Gumby Semantic Grid Mixin //
+
+
+// Mixin for rows
+
+@mixin row($nested: false) {
+  @if $nested == nested {
+    @include nestedRow();
+  }
+  @else {
+    width: 100%;
+    max-width: $row-max-width + 40px;
+    min-width: $min-device-width;
+    margin: 0 auto;
+    padding-left: 20px;
+    padding-right: 20px;
+    @extend %clearfix;
+  }
+  > *:first-child {
+    margin-left: 0;
+  }
+  @include respond(all-phones) {
+    width: auto;
+    min-width: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+// Mixin for rows that are nested within columns
+
+@mixin nestedRow() {
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  padding-left: 0;
+  padding-right: 0;
+  @extend %clearfix;
+}
+
+
+@mixin column($columns:$columns, $alignment: false, $behavior: false, $hybrid: false) {
+  @extend %columnconfig;
+  @if $alignment == center   {
+    float: none;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: columns($columns, $hybrid);
+    @include respond(all-phones) {
+      float: left;
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+  @else if $behavior == collapse {
+    @extend %collapse;
+    width: columns($columns, $hybrid);
+    @include respond(all-phones) {
+      float: left;
+      width: 100%;
+    }
+  }
+  @else {
+    width: columns($columns, $hybrid);
+    @include respond(all-phones) {
+      float: left;
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+}
+
+@mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
+  @include column($columns, $alignment, $behavior, true);
+}
+
+@mixin push($columns, $hybrid-grid: false) {
+  @if $hybrid-grid == hybrid {
+    margin-left: push_x($columns, false, true);
+    &:first-child {
+      margin-left: push_x($columns, true, true);
+    }
+    @include respond(all-phones) {
+      margin-left: 0;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+  @else {
+    margin-left: push_x($columns);
+    &:first-child {
+      margin-left: push_x($columns, true);
+    }
+    @include respond(all-phones) {
+      margin-left: 0;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+@mixin pull($direction: false, $columns: 0, $width: 0, $hybrid-grid: false) {
+  @if $direction == left {
+    @extend %pull-left;
+    @if ($columns > 0 and $width > 0) {
+      @if ($hybrid-grid == hybrid) {
+        margin-left: pull_x($columns, $width, true);
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+      @else {
+        margin-left: pull_x($columns, $width);
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  @elseif $direction == none {
+    @extend %pull-none;
+  }
+  @else {
+    @extend %pull-right;
+  }
+}
+
+
+// Placeholders for the Semantic Grid
+
+%container {
+  padding: 0 $gutter-in-px + px;
+  @include respond(all-phones) {
+    min-width: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+// Clearfix placeholder
+%clearfix { @include clearfix(); }
+
+// Clearfix placeholder for mobile
+%mobilefix { @include mobilefix(); }
+
+// Row placeholders
+%row { @include row(); }
+%nestedrow { @include row(); }
+
+// Column Configuration placeholder
+%columnconfig {
+  margin-left: $gutter;
+  float: $default-float;
+  min-height: 1px;
+  position: relative;
+  @include box-sizing(border-box);
+}
+
+%pull-right { float: right; }
+%pull-left { float: left; }
+%pull-none { float: none; }
+
+// Collapse Gutters
+%collapse {
+  margin-left: 0;
+}

data/app/assets/stylesheets/gumby/functions/_shapes.scss

@@ -0,0 +1,22 @@
+// Shapes
+
+@mixin shape($shape: square, $shape-radius: false) {
+	@if $shape == oval {
+    @include border-radius(1000px);
+  }
+  @else if $shape == circle {
+    @include border-radius(1000px);
+  }
+	@else if $shape == pill-left {
+    @include border-radius(500px 0 0 500px);
+ 	}
+	@else if $shape == pill-right {
+    @include border-radius(0 500px 500px 0);
+  }
+  @else if $shape-radius != false {
+    @include border-radius($shape-radius);
+  }
+  @else {
+    @include border-radius(0);
+  }
+}

data/app/assets/stylesheets/gumby/functions/_strip-units.scss

@@ -0,0 +1,5 @@
+
+// Strip out units to do math functions.
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}

data/app/assets/stylesheets/gumby/functions/_tooltips.scss

@@ -0,0 +1,98 @@
+// CSS Tooltips
+
+@mixin tooltip($tt-min-width, $tt-bgcolor, $tt-position, $tt-align) {
+  position: relative;
+
+  &:after {
+    display: block;
+    background: $tt-bgcolor;
+    border: 1px solid $tt-bgcolor;
+    border-bottom: 0;
+    @include border-radius(3px);
+    padding:  em(8) em(12);
+    width: auto;
+    min-width: $tt-min-width;
+    max-width: 500px;
+    position: absolute;
+    @if $tt-position == "bottom" {
+      @if $tt-align == "right" { right: 0 } @else { left: 0; }
+      top: 101%;
+      margin-top: 8px;
+    } @else if $tt-position == "top" {
+      @if $tt-align == "right" { right: 0 } @else { left: 0; }
+      bottom: 101%;
+      margin-bottom: 8px;
+    } @else if $tt-position == "left" {
+      right: 101%;
+      top: -35%;
+      margin-right: 8px;
+    } @else if $tt-position == "right" {
+      left: 101%;
+      top: -35%;
+      margin-left: 8px;
+    }
+
+    @if $tt-align == "right" {
+      text-align: right;
+    } @else if $tt-align == "left" {
+      text-align: left;
+    }
+
+    color: #fff;
+    content: attr(data-tooltip);
+    line-height: 1.5;
+    font-size: $norm;
+    font-weight: normal;
+    font-style: normal;
+
+    @include transition(opacity 0.1s ease);
+    @include opacity(0);
+    pointer-events: none;
+
+    @if $tt-pretty != "no" {
+      @include background-image(linear-gradient($tt-position, lighten($tt-bgcolor, 12.5%), $tt-bgcolor));
+      @include box-shadow(0 0 5px 0 rgba($tt-bgcolor,.25));
+    }
+  }
+
+  &:before {
+    content: " ";
+    width: 0;
+    height: 0;
+    position: absolute;
+    @if $tt-position == "bottom" {
+      top: 101%;
+      @if $tt-align == "right" { right: 8px } @else { left: 8px; }
+      border-bottom: 9px solid $tt-bgcolor !important;
+      border-left: 9px solid transparent;
+      border-right: 9px solid transparent;
+    } @else if $tt-position == "top" {
+      bottom: 101%;
+      @if $tt-align == "right" { right: 8px } @else { left: 8px; }
+      border-top: 9px solid $tt-bgcolor !important;
+      border-left: 9px solid transparent;
+      border-right: 9px solid transparent;
+    } @else if $tt-position == "left" {
+      top: 3px;
+      right: 101%;
+      border-left: 9px solid $tt-bgcolor !important;
+      border-top: 9px solid transparent;
+      border-bottom: 9px solid transparent;
+    } @else if $tt-position == "right" {
+      top: 3px;
+      left: 101%;
+      border-right: 9px solid $tt-bgcolor !important;
+      border-top: 9px solid transparent;
+      border-bottom: 9px solid transparent;
+    }
+    @include transition(opacity 0.1s ease);
+    @include opacity(0);
+    pointer-events: none;
+  }
+
+  &:hover:after,
+  &:hover:before {
+    @include transition(opacity 0.1s ease);
+    @include opacity(1);
+  }
+}

data/app/assets/stylesheets/gumby/functions/_typography.scss

@@ -0,0 +1,15 @@
+// Typography mixins
+
+// Fonts in rems with px fallback
+
+@mixin font-size($size, $is-important: false) {
+  $size: if(unitless($size), $size, $size / 1px);
+
+  @if $is-important {
+    font-size: $size + px !important;
+    font-size: ($size / strip-units($base-font-size)) + rem !important;
+  } @else {
+    font-size: $size + px;
+    font-size: ($size / strip-units($base-font-size)) + rem;
+  }
+}

data/app/assets/stylesheets/gumby/functions/_visibility.scss

@@ -0,0 +1,17 @@
+// Visibility Mixins
+
+// Mixin for hidden
+
+@mixin hidden($media) {
+  @include respond($media) {
+    display: none !important;
+  }
+}
+
+// Mixin for visible
+
+@mixin visible($media) {
+  @include respond($media) {
+    display: inherit !important;
+  }
+}

data/app/assets/stylesheets/gumby/gumby.scss

@@ -0,0 +1,39 @@
+/**
+* Gumby Framework
+* ---------------
+*
+* Follow @gumbycss on twitter and spread the love.
+* We worked super hard on making this awesome and released it to the web.
+* All we ask is you leave this intact. #gumbyisawesome
+*
+* Gumby Framework
+* http://gumbyframework.com
+*
+* Built with love by your friends @digitalsurgeons
+* http://www.digitalsurgeons.com
+*
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+*/
+
+@charset "UTF-8";
+
+@import "modular-scale";
+
+@import "var/settings";
+@import "var/lists";
+@import "var/icons/entypo";
+
+@import "compass";
+@import "compass/reset";
+
+@import "functions/all";
+
+@import "base";
+@import "fonts";
+@import "typography";
+@import "grid";
+@import "ui/all";
+@import "shame";
+
+@import "custom";

data/app/assets/stylesheets/gumby/ui/_all.scss

@@ -0,0 +1,11 @@
+@import "navbar";
+@import "buttons";
+@import "icons";
+@import "forms";
+@import "labels";
+@import "tabs";
+@import "images";
+@import "video";
+@import "toggles";
+@import "tables";
+@import "tooltips";

data/app/assets/stylesheets/gumby/ui/_buttons.scss

@@ -0,0 +1,154 @@
+/* Buttons */
+
+// Buttons
+@import "../functions/button-size";
+
+// Button structure
+.btn, .skiplink {
+  display: inline-block;
+  width: auto;
+  background: $default-color;
+  -webkit-appearance: none;
+  font-family: $font-family;
+  font-weight: $button-font-weight;
+  padding: 0 !important;
+  text-align: center;
+  .pretty & { @extend .pretty.btn; }
+  .metro & { @extend .metro.btn; }
+
+  > a, input, button {
+    display: block;
+    padding: 0 $default-button-padding;
+    color: $white;
+    height: 100%;
+  }
+
+  input, button {
+    background: none;
+    border: none;
+    width: 100%;
+    font-size: 100%;
+    cursor: pointer;
+    font-weight: $type-font-weight;
+    @include appearance(none);
+  }
+}
+
+// Button Shapes & Sizes
+.btn, .skiplink {
+  &.xlarge {
+    @include button-size(xlarge);
+  }
+  &.large {
+    @include button-size(large);
+  }
+  &.medium {
+    @include button-size(medium);
+    a {
+      padding: 0 ms(1);
+    }
+  }
+  &.small {
+    @include button-size(small);
+    a {
+      padding: 0 ms(-1);
+    }
+  }
+  
+  &.oval {
+    @include shape(oval);
+  }
+
+  &.pill-left {
+    @include shape(pill-left);
+  }
+
+  &.pill-right {
+    @include shape(pill-right);
+  }
+}
+
+// Button Colors & Styles
+.btn, .skiplink {
+  @each $shade in $ui-coloring {
+    &.#{nth($shade, 1)} {
+      background: nth($shade, 2);
+      border: 1px solid nth($shade, 2);
+      &:hover {
+        background: lighten(nth($shade, 2), 10%);
+      }
+      &:active {
+        background: darken(nth($shade, 2), 10%);
+      }
+      @if nth($shade, 1) == default {
+        color: darken(nth($shade, 2), 61.5%);
+        border: 1px solid nth($shade, 2);
+        &:hover {
+          border: 1px solid darken(nth($shade, 2), 5%);
+        }
+        a, input, button {
+          color: darken(nth($shade, 2), 61.5%);
+        }
+      }
+      @if nth($shade, 1) == warning {
+        color: darken(nth($shade, 2), 40%);
+        a, input, button {
+          color: darken(nth($shade, 2), 40%);
+        }
+      }
+    }
+  }
+}
+
+.btn.metro,
+.skiplink.metro,
+.btn.pretty.squared,
+.pretty .btn.squared {
+  @include border-radius(0);
+}
+
+.btn.pretty,
+.skiplink.pretty,
+.btn.metro.rounded,
+.metro .btn.rounded {
+  @include border-radius($button-radius);
+}
+
+
+// Buttons with Gradients
+.btn, .skiplink {
+  &.pretty {
+    @each $grade in $ui-coloring {
+      &.#{nth($grade, 1)} {
+        @include background-image(linear-gradient(lighten(nth($grade, 2), 20%), saturate(nth($grade, 2), 5%)));
+        @include box-shadow(inset 0 0 3px lighten(nth($grade, 2), 45%));
+        border: 1px solid darken(nth($grade, 2), 15%);
+        &:hover {
+          @include background-image(linear-gradient(lighten(nth($grade, 3), 15%), saturate(nth($grade, 3), 5%)));
+          @include box-shadow(inset 0 0 3px lighten(nth($grade, 3), 40%));
+          border: 1px solid darken(nth($grade, 3), 15%);
+        }
+        &:active {
+          @include background-image(linear-gradient(saturate(nth($grade, 2), 5%), lighten(nth($grade, 2), 20%)));
+          @include box-shadow(inset 0 0 3px lighten(nth($grade, 2), 50%));
+        }
+        @if nth($grade, 1) == default {
+          a, input, button {
+            text-shadow: 0 1px 1px lighten(nth($grade, 2), 20%);
+          }
+        }
+        @elseif nth($grade, 1) == warning {
+          color: darken(nth($grade, 2), 40%);
+          a, input, button {
+            text-shadow: 0 1px 1px lighten(nth($grade, 2), 20%);
+          }
+        }
+        @else {
+          a, input, button {
+            text-shadow: 0 1px 1px darken(nth($grade, 2), 20%);
+          }
+        }
+      }
+    }
+  }
+}