Start of GS5.

3 files changed, 226 insertions, 0 deletions

diff --git a/app/assets/stylesheets/vendor/fancy-buttons/README b/app/assets/stylesheets/vendor/fancy-buttons/README
new file mode 100644
index 0000000..9ee6cc3
--- /dev/null
+++ b/app/assets/stylesheets/vendor/fancy-buttons/README
@@ -0,0 +1,3 @@
+ Fancy Buttons by imathis
+ https://github.com/imathis/fancy-buttons
+ License: MIT 
\ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss
new file mode 100644
index 0000000..2e85caf
--- /dev/null
+++ b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss
@@ -0,0 +1,195 @@
+@import "compass/css3/gradient";
+@import "compass/css3/border-radius";
+@import "compass/css3/opacity";
+@import "compass/css3/text-shadow";
+@import "compass/css3/box-shadow";
+@import "compass/css3/background-clip";
+@import "fancy-gradient";
+
+$fb-gradient-style: glossy !default;
+$fb-invert-on-click: 1 !default;
+$fb-font-size: 18px !default;
+$fb-color: #444444 !default;
+$fb-font-weight: bold !default;
+$fb-border-width: 1px !default;
+$fb-radius: 6px !default;
+$fb-light-text: white !default;
+$fb-dark-text: #222222 !default;
+$fb-gradient: 1 !default;
+$fb-image-path: image-url("vendor/fancy-buttons/button_bg.png") !default;
+$fb-allow-disabled: false !default;
+$fb-line-height: 1.2em !default;
+
+// Make a fancy button.
+@mixin fancy-button($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) {
+  @include fancy-button-structure($font-size, $radius, $border-width);
+  @include fancy-button-colors($color);
+}
+
+// Style the button's colors, picking the most appropriate color set for the base color.
+@mixin fancy-button-colors($color: $fb-color, $hover: 0, $active: 0, $fb-allow-disabled: $fb-allow-disabled) {
+  @include fb-color($color, "default");
+  &:hover, &:focus {
+    @if $hover == 0 {
+      @include fb-color(darken($color, 3), "hover", $color); }
+    @else {
+      @include fb-color($hover, "hover"); } }
+  &:active {
+    @if $active == 0 {
+      @include fb-color(darken($color, 6), "active", $color);
+      @include box-shadow(darken($color, 15) 0 0.08em 0.2em 1px inset); }
+    @else {
+      @include fb-color($active, "active");
+      @include box-shadow(darken($active, 9) 0 0.08em 0.1em 1px inset); } }
+  @include box-shadow(rgba(white, lightness($color) / 100) 0 0 0.1em 1px inset);
+  @include background-clip(padding-box);
+  @if $fb-allow-disabled {
+    &.disabled, &[disabled] {
+      @include disable-fancy-button($color);
+    }
+  }
+}
+
+@mixin fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) {
+  $fb-disable-allowed: $fb-allow-disabled;
+  $fb-allow-disabled: true;
+  @include fancy-button-structure($font-size, $radius, $border-width);
+  @include fancy-button-colors-matte($color);
+  $fb-allow-disabled: $fb-disable-allowed;
+}
+
+@mixin fancy-button-matte($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) {
+  @include fancy-button-structure($font-size, $radius, $border-width);
+  @include fancy-button-colors-matte($color); 
+}
+
+@mixin fancy-button-custom($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) {
+  @include fancy-button-structure($font-size, $radius, $border-width);
+  @include fancy-button-colors-custom($color, $font-size, $radius, $border-width); 
+}
+
+@mixin fancy-button-colors-matte($color: $fb-color, $hover: 0, $active: 0) {
+  $fb-current-style: $fb-gradient-style;
+  $fb-gradient-style: matte;
+  @include fancy-button-colors($color, $hover, $active);
+  $fb-gradient-style: $fb-current-style; 
+}
+
+@mixin fancy-button-colors-custom($color: $fb-color, $hover: 0, $active: 0) {
+  $fb-current-style: $fb-gradient-style;
+  $fb-gradient-style: custom;
+  @include fancy-button-colors($color, $hover, $active);
+  $fb-gradient-style: $fb-current-style;
+}
+
+// Default state color settings
+@mixin fb-color($color, $state, $lumins: $color) {
+  $gradient-top: lighten($color, 15);
+  $gradient-bottom: darken($color, 6);
+  $border-color: darken($color, 8);
+  @if $fb-invert-on-click != 0 {
+    $border-color: darken($color, 15); }
+  @if saturation($color) > 0 {
+    $color: saturate($color, 40); }
+  @else if lightness($lumins) >= lightness(#aaaaaa) {
+    $color: lighten($color, 20); }
+  @include fb-state-colors($color, $gradient-top, $gradient-bottom, $border-color, $state, $lumins);
+}
+
+// Apply the button colors specified for the button state into which it is mixed.
+@mixin fb-state-colors($color, $gradient-top, $gradient-bottom, $border, $state, $lumins: $color) {
+  background-color: $color;
+  @if $fb-gradient != 0 {
+    @if $fb-gradient-style == "glossy" {
+      @if $state == "active" {
+        @include fancy-gradient-active($gradient-top, $gradient-bottom); }
+      @else {
+        @include fancy-gradient($gradient-top, $gradient-bottom); } }
+    @else if $fb-gradient-style == "matte" {
+      @if $state == "active" {
+        @include fancy-matte-gradient-active($gradient-top, $gradient-bottom); }
+      @else {
+        @include fancy-matte-gradient($gradient-top, $gradient-bottom); } }
+    @else if $fb-gradient-style == "custom" {
+      @if $state == "active" {
+        @include custom-fancy-gradient-active($gradient-top, $gradient-bottom); }
+      @else {
+        @include custom-fancy-gradient($gradient-top, $gradient-bottom); } } }
+  border: {
+    color: $border; };
+  $text-shadow-settings: unquote("0px 1px 1px");
+  @if $fb-invert-on-click != 0 and $state == "active" {
+    $text-shadow-settings: unquote("0px -1px -1px"); }
+  @if lightness($lumins) < lightness(#aaaaaa) {
+    text-shadow: darken($color, 25) $text-shadow-settings;
+    &, &:visited {
+      color: $fb-light-text; } }
+  @else {
+    text-shadow: lighten($color, 15) $text-shadow-settings;
+    &, &:visited {
+      color: $fb-dark-text; } }
+}
+
+@mixin fancy-button-text-colors($color, $hover: $color, $active: $color, $fb-allow-disabled: $fb-allow-disabled) {
+  &, &:visited {
+    color: $color; }
+  &:hover, &:focus {
+    color: $hover; }
+  &:active {
+    color: $active; }
+  @if $fb-allow-disabled {
+    &.disabled, &[disabled] {
+      color: $color; } }
+}
+
+// Layout the button's box
+@mixin fancy-button-structure($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height) {
+  @extend .fancy-button-reset-base-class;
+  @include fancy-button-size($font-size, $radius, $border-width, $line-height);
+}
+
+@mixin fancy-button-size($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height) {
+  // better padding for smaller buttons
+  $v-padding: 0.3em;
+  $h-padding: 1em;
+  @if $radius > 0 {
+    @include border-radius($radius); }
+  font-size: $font-size;
+  line-height: $line-height;
+  @include fancy-button-padding($v-padding, $h-padding, $border-width);
+}
+
+@mixin fancy-button-padding($v-padding, $h-padding, $border-width: $fb-border-width) {
+  padding: $v-padding $h-padding;
+  border-width: $border-width;
+}
+
+// Reset the button's important properties to make sure they behave correctly
+@mixin fb-reset($font-weight: $fb-font-weight) {
+  font-family: "Lucida Grande", Lucida, Arial, sans-serif;
+  background: #{$fb-image-path} repeat-x bottom left;
+  margin: 0;
+  width: auto;
+  overflow: visible;
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none;
+  border-style: solid;
+  font-weight: $font-weight;
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0; }
+  &:focus {
+    outline: none; }
+}
+
+@mixin disable-fancy-button($color: $fb-color, $opacity: 0.7) {
+  @include fb-color($color, "default");
+  @include opacity($opacity);
+  @include box-shadow(none);
+  cursor: default !important;
+}
+
+.fancy-button-reset-base-class {
+  @include fb-reset;
+}
diff --git a/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss
new file mode 100644
index 0000000..da0baa9
--- /dev/null
+++ b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss
@@ -0,0 +1,28 @@
+@mixin fancy-gradient($color1, $color2) {
+  $top_shine: lighten($color1, 18);
+  $bottom_glow: lighten($color2, 10);
+  $top_middle: $color1;
+  $middle: lighten($color2, 3);
+  $bottom_middle: $color2;
+  @include background-image(linear-gradient($top_shine, $top_middle 10%, $middle 50%, $bottom_middle 50%, $bottom_glow)); }
+
+@mixin fancy-gradient-active($color1, $color2) {
+  $top: lighten($color2, 6);
+  $bottom: lighten($color2, 14);
+  $top_middle: lighten($color2, 8);
+  $middle: lighten($color2, 4);
+  $bottom_middle: lighten($color2, 1);
+  @include background-image(linear-gradient($top, $top_middle 30%, $middle 50%, $bottom_middle 50%, $bottom)); }
+
+@mixin fancy-matte-gradient($color1, $color2) {
+  @include background-image(linear-gradient($color1, $color2)); }
+
+@mixin fancy-matte-gradient-active($color1, $color2) {
+  $top: lighten($color2, 5);
+  $bottom: lighten($color2, 15);
+  $middle: lighten($color2, 8);
+  @include background-image(linear-gradient($top, $middle 40%, $middle 85%, $bottom)); }
+
+/* incase an inverted custom gradient isn't specified */
+@mixin custom-fancy-gradient-active($color1, $color2) {
+  @include custom-fancy-gradient($color1, $color2); }