stipe 0.0.5.6 → 0.0.5.7

data/readme.md

@@ -16,9 +16,14 @@ Stipe is a Compass Extension, so Compass is set as a depdency. You will need to
 * Over-hauled color palette CSS
 * Updated forms extends to include `stipe_` in the name to increase visibility of where code is coming from in Toadstool
 * Added UI for `contenteditable` new functionality 
+* Old button lib is dead
+* All new buttons is alive
 * Updates to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`
 	* Added new `extend_color_loop` mixin
 	* Dynamically looping through list of OOCSS names to create color block classes
+*  New `extend_color_loop` mixin 
+	* Added to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`
+	* All extends generated in memory from lists of objects
 
 ###0.0.5.5
 * Fixed order of `@imports` in `_manifest.scss`

data/stylesheets/stipe/_buttons.scss

@@ -1 +1,2 @@
-@import 'buttons/extends';
+@import 'buttons/extends';
+@import 'buttons/mixins';

data/stylesheets/stipe/buttons/_extends.scss

@@ -1,16 +1,2 @@
 // Default display Stipe buttons
-// ---------------------------------------------------------
-
-@import 'lib/cupid-green';
-@import 'lib/minimal';
-
-%stipe_buttons {
-	@extend %cupid-green;
-	margin-right: em(10);
-	&:last-child {
-		margin: 0;
-	}
-	&:nth-child(n+2) {
-		@extend %minimal;
-	}
-}
+// ---------------------------------------------------------

data/stylesheets/stipe/buttons/_mixins.scss

@@ -0,0 +1,28 @@
+// Stipe comes with a series of pre-designed buttons that are easily useable and configutable
+// gloss-default, shiny-default, flat-default and three-dee
+// -----------------------------------------------------------
+
+// Default values - edit in `_config.scss` file
+// -----------------------------------------------------------
+$button-color:  $button-color !default;
+$button-text-color: $white !default;
+$button-line-height: 32 !default;
+$button-border-radius: 3 !default;
+$button-padding: 20 !default;
+$button-font-size: 18 !default;
+$button-weight: bold !default;
+$button-text-shadow: true !default;
+$button-box-shadow: true !default;
+
+// button-default
+// -----------------------------------------------------------
+@mixin button-default ($text-color: $button-text-color, $line-height: $button-line-height, $border-radius: $button-border-radius, $padding: $button-padding, $font-size: $button-font-size, $weight: $button-weight){
+  color: $text-color;
+  line-height: em($line-height);
+  border-radius: em($border-radius);
+  padding: 0 em($padding);
+  font-size: em($font-size);
+  font-weight: $weight;
+}
+
+@import "lib/*";

data/stylesheets/stipe/buttons/lib/_flat-default.scss

@@ -0,0 +1,35 @@
+// flat-default
+// -----------------------------------------------------------
+@mixin flat-default ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow){
+  $base-color: $color;
+  $grad-1: darken($base-color, 8%);
+  $dark-color: darken($base-color, 20%);
+  $highlight-color: lighten($base-color, 50%);
+
+  background-color: $base-color;
+  @include filter-gradient($grad-1, $base-color, vertical); // IE6-9
+  @include background-image(linear-gradient(top, $grad-1 0%,$base-color 75%));
+
+  border: 1px solid $dark-color;
+
+  @include button-default;
+
+  @if $text-shadow == true {
+    text-shadow: 0px 1px 3px transparentize($dark-color, 0.5);
+  }
+  @if $box-shadow == true {
+    box-shadow: 0 em(2) em(6) em(0) $shadow-color, $highlight-color 0 1px 0 inset;
+  }
+
+  &:hover {
+    $base-color: darken($base-color, 10%);
+    $grad-1: darken($grad-1, 10%);
+    background-color: $base-color;
+    @include filter-gradient($grad-1, $base-color, vertical); // IE6-9
+    @include background-image(linear-gradient(top, $grad-1 0%,$base-color 75%));
+  }
+
+  @media #{$mobile} {
+    width: 100%;
+  }
+}

data/stylesheets/stipe/buttons/lib/_gloss-default.scss

@@ -0,0 +1,39 @@
+// gloss-default
+// -----------------------------------------------------------
+@mixin gloss-default ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow) {
+  $base-color: $color;
+  $grad-1: $base-color;
+  $grad-2: lighten($base-color, 15%);
+  $grad-3: lighten($base-color, 3%);
+  $grad-4: lighten($base-color, 30%);
+  $dark-color: darken($base-color, 5%);
+  
+  @include button-default;
+
+  background-color: $base-color; // Old browsers
+  @include filter-gradient($grad-1, $grad-4, vertical); // IE6-9
+  @include background-image(linear-gradient(top, $grad-1 0%,$grad-2 50%,$grad-3 51%,$grad-4 100%));
+  border: 1px solid $dark-color;
+
+  @if $text-shadow == true {
+    text-shadow: 0px 3px 3px $dark-color;
+  }
+  @if $box-shadow == true {
+    box-shadow: 0 em(2) em(6) em(0) $shadow-color;
+  }
+
+  &:hover {
+    $base-color: darken($base-color, 10%);
+    $grad-1: darken($grad-1, 10%);
+    $grad-2: darken($grad-2, 10%);
+    $grad-3: darken($grad-3, 10%);
+    $grad-4: darken($grad-4, 10%);
+    background-color: $base-color; // Old browsers
+    @include filter-gradient($grad-1, $grad-4, vertical); // IE6-9
+    @include background-image(linear-gradient(top, $grad-1 0%,$grad-2 50%,$grad-3 51%,$grad-4 100%));
+  }
+  
+  @media #{$mobile} {
+    width: 100%;
+  }
+}

data/stylesheets/stipe/buttons/lib/_shiny-default.scss

@@ -0,0 +1,37 @@
+// shiny-default
+// -----------------------------------------------------------
+@mixin shiny-default ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow){
+  $base-color: $color;
+  $grad-1: lighten($base-color, 30%);
+  $grad-3: darken($base-color, 15%);
+  $dark-color: darken($base-color, 10%);
+  $highlight-color: lighten($base-color, 80%);
+
+  background-color: $base-color;
+  @include filter-gradient($grad-1, $grad-3, vertical); // IE6-9
+  @include background-image(linear-gradient(top, $grad-1 0%,$base-color 50%,$grad-3 100%));
+  
+  border: 1px solid $dark-color;
+
+  @include button-default;
+
+  @if $text-shadow == true {
+    text-shadow: 0px 3px 1px $dark-color;
+  }
+  @if $box-shadow == true {
+    box-shadow: 0 em(2) em(6) em(0) $shadow-color, $highlight-color 0 1px 0 inset;
+  }
+
+  &:hover {
+    $base-color: darken($base-color, 10%);
+    $grad-1: darken($grad-1, 10%);
+    $grad-3: darken($grad-3, 10%);
+    background-color: $base-color;
+    @include filter-gradient($grad-1, $grad-3, vertical); // IE6-9
+    @include background-image(linear-gradient(top, $grad-1 0%,$base-color 50%,$grad-3 100%));
+  }
+
+  @media #{$mobile} {
+    width: 100%;
+  }
+}

data/stylesheets/stipe/buttons/lib/_three-dee.scss

@@ -0,0 +1,33 @@
+@mixin three-dee ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow){
+  $base-color: $color;
+  $grad-1: darken($base-color, 30%);
+  $dark-color: darken($base-color, 20%);
+  $highlight-color: lighten($base-color, 50%);
+
+  background-color: $base-color; // Old browsers
+  @include filter-gradient($base-color, $base-color, vertical); // IE6-9
+  @include background-image(linear-gradient(top,  $base-color 0%,$grad-1 50%,$base-color 100%));
+
+  border: 1px solid $dark-color;
+
+  @include button-default;
+
+  @if $text-shadow == true {
+    text-shadow: 0px 1px 3px transparentize($dark-color, 0.5);
+  }
+  @if $box-shadow == true {
+    box-shadow: 0 em(2) em(6) em(0) $shadow-color, $highlight-color 0 1px 0 inset;
+  }
+
+  &:hover {
+    $base-color: darken($base-color, 10%);
+    $grad-1: darken($grad-1, 10%);
+    background-color: $base-color; // Old browsers
+    @include filter-gradient($base-color, $base-color, vertical); // IE6-9
+    @include background-image(linear-gradient(top,  $base-color 0%,$grad-1 50%,$base-color 100%));
+  }
+
+  @media #{$mobile} {
+    width: 100%;
+  }
+}

data/stylesheets/stipe/color/_default_color_palette.scss

@@ -59,6 +59,14 @@ $border_color:                         $charlie_gray !default;
 
 // Config defaults for buttons
 // -----------------------------------------------------------------------------
-$primary_button_border_color:          $bravo_color !default;
+$button-color:                         $delta-color !default;
 $secondary_button_border_color:        $bravo_gray !default;
 $button_text:                          $white !default;
+
+// Depricated variable
+$primary_button_border_color:          $bravo_color !default;
+
+
+
+
+

data/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss

@@ -77,6 +77,8 @@
 }
 
 
+// To add new colors to the extended color loops below, simply add to the appropiate list
+
 // Standard grayscale objects - in color view
 // ----------------------------------------------
 $color_names: alpha_gray 
@@ -162,20 +164,57 @@ echo_color_juliet;
 /////// semantic color blocks ////////
 // ----------------------------------------------
 // Typography, borders, rules and shadows
-$color_names: white primary_header_color primary_text secondary_text href_color shadow_color border_color standard_hr_color standard_border_color;
+$color_names: 
+white 
+primary_header_color 
+primary_text 
+secondary_text href_color
+shadow_color border_color
+standard_hr_color 
+standard_border_color;
 @include extend_color_loop;
 
 
 /////// Config defaults for forms /////// 
 // ----------------------------------------------
-$color_names: alert_background_color primary_button_border_color secondary_button_border_color button_text input_disabled input_disabled_bkg input_disabled_border input_disabled_text form_field_background_color form_field_focus_color form_field_fail_bkg form_field_border form_field_border_fail form_field_focus_border_color form_field_text_fail form_label_color optional_field_text_color instructional_text placeholder_text inline_alert_bkg_color inline_alert_text_color;
+$color_names: 
+alert_background_color 
+primary_button_border_color 
+secondary_button_border_color 
+button_text 
+input_disabled 
+input_disabled_bkg 
+input_disabled_border 
+input_disabled_text 
+form_field_background_color 
+form_field_focus_color 
+form_field_fail_bkg 
+form_field_border 
+form_field_border_fail 
+form_field_focus_border_color 
+form_field_text_fail 
+form_label_color 
+optional_field_text_color 
+instructional_text 
+placeholder_text 
+inline_alert_bkg_color 
+inline_alert_text_color;
 @include extend_color_loop;
 
 /////// Config defaults for buttons /////// 
 // ----------------------------------------------
-$color_names: primary_button_border_color secondary_button_border_color button_text;
+$color_names: 
+button_color 
+primary_button_border_color 
+secondary_button_border_color 
+button_text;
 @include extend_color_loop;
 
 // HTML5 colors
-$color_names: webkit_tap_hightlight ins_color selection_color selection_text_color mark_color;
+$color_names: 
+webkit_tap_hightlight 
+ins_color 
+selection_color 
+selection_text_color 
+mark_color;
 @include extend_color_loop;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.5.6
+  version: 0.0.5.7
   prerelease: 
 platform: ruby
 authors:
@@ -63,9 +63,12 @@ files:
 - stylesheets/stipe/_stipe.scss
 - stylesheets/stipe/_typography.scss
 - stylesheets/stipe/buttons/_extends.scss
-- stylesheets/stipe/buttons/doc-src/buttons.md
-- stylesheets/stipe/buttons/lib/_cupid-green.scss
-- stylesheets/stipe/buttons/lib/_minimal.scss
+- stylesheets/stipe/buttons/_mixins.scss
+- stylesheets/stipe/buttons/buttons.md
+- stylesheets/stipe/buttons/lib/_flat-default.scss
+- stylesheets/stipe/buttons/lib/_gloss-default.scss
+- stylesheets/stipe/buttons/lib/_shiny-default.scss
+- stylesheets/stipe/buttons/lib/_three-dee.scss
 - stylesheets/stipe/color/_color_math.scss
 - stylesheets/stipe/color/_default_color_palette.scss
 - stylesheets/stipe/color/_extends_deprecated.scss

data/stylesheets/stipe/buttons/doc-src/buttons.md

@@ -1,3 +0,0 @@
-#Buttons
-
-Instructions as how to use pre-fab buttons and how to make your own.

data/stylesheets/stipe/buttons/lib/_cupid-green.scss

@@ -1,63 +0,0 @@
-$cupid_background: #7fbf4d !default;
-$cupid_gradient: $cupid_background 0%, #63a62f 100% !default;
-$cupid_background_hover: darken($cupid_background, 4) !default;
-$cupid_gradient_hover: $cupid_background_hover 0%, #5e9e2e 100% !default;
-$cupid_border_color: #63a62f #63a62f #5b992b #63a62f !default;
-$cupid_border_radius: em(3) !default;
-$cupid_inset_box_shadow: #96ca6d !default;
-$cupid_inset_box_shadow_hover: #8dbf67 !default;
-$cupid_inset_box_shadow_active: #548c29 !default;
-$cupid_text_color: #fff !default;
-$cupid_text_weight: bold !default;
-$cupid_font_family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !default;
-$cupid_font_size: 1.3em !default;
-$cupid_padding: em(7) 0 em(8) 0 !default;
-$cupid_text_shadow_color: #4c9021 !default; 
-$cupid_width: em(150) !default;
-
-%cupid-green {
-  @include linear_gradient_w3c ($cupid_background, #{$cupid_gradient});
-  border-width: 1px;
-  border-style: solid;
-  border-color: $cupid_border_color;
-  @include border_radius($cupid_border_radius);
-  @include box_shadow(inset 0 1px 0 0, $cupid_inset_box_shadow);
-  color: $cupid_text_color;
-  font: $cupid_text_weight $cupid_font_size #{$cupid_font_family};
-  line-height: 1em;
-  padding: $cupid_padding;
-  text-align: center;
-  text-shadow: 0 -1px 0 $cupid_text_shadow_color;
-  width: $cupid_width; 
-  @media #{$mobile} {
-	  width: 100%;
-	  line-height: 1.3em;
-  }
-  &:hover {
-	  @include linear_gradient_w3c ($cupid_background_hover, #{$cupid_gradient_hover});
-    @include box_shadow(inset 0 1px 0 0, $cupid_inset_box_shadow_hover);
-    cursor: pointer;
-  }
-  &:active {
-	  border-width: 1px;
-	  border-style: solid;
-	  border-color: darken(nth($cupid_border_color, 4), 5);
-	  @include box_shadow(inset 0 0 8px 4px, $cupid_inset_box_shadow_active);
-  }
-  &[disabled] {
-	  background: transparentize($cupid_background, 0.5);
-	  border-color: transparentize($cupid_background, 0.5);
-	  color: transparentize($cupid_text_color, 0.5);
-  }
-}
-
-
-
-
-
-
-
-
-
-
-

data/stylesheets/stipe/buttons/lib/_minimal.scss

@@ -1,45 +0,0 @@
-$minimal_background: #e3e3e3 !default;
-$minimal_border_color: #bbb !default;
-$minimal_border_radius: em(3) !default;
-$minimal_inset_shadow_color: #f6f6f6 !default;
-$minimal_font_color: #333 !default;
-$minimal_font_weight: bold !default;
-$minimal_font_size: em(12) !default;
-$minimal_font_family: $primary_font_family !default;
-$minimal_padding: em(8) 0 em(9) !default;
-$minimal_text_shadow: 0 1px 0 #fff !default;
-$minimal_width: em(150) !default;
-
-
-%minimal {
-  background: $minimal_background;
-  border: 1px solid $minimal_border_color;
-  @include border_radius($minimal_border_radius);
-  @include box_shadow(inset 0 0 1px 1px, $minimal_inset_shadow_color);
-  color: $minimal_font_color;
-  font: $minimal_font_weight $minimal_font_size #{$minimal_font_family};
-  line-height: 1em;
-  padding: $minimal_padding;
-  text-align: center;
-  text-shadow: $minimal_text_shadow;
-  width: $minimal_width; 
-  @media #{$mobile} {
-	  width: 100%;
-	  line-height: 1.3em;
-  }
-  &:hover {
-	  background: darken($minimal_background, 5);
-    @include box_shadow(inset 0 0 1px 1px, darken($minimal_inset_shadow_color, 5));
-    color: darken($minimal_font_color, 7);
-    cursor: pointer;
-  }
-  &:active {
-	  background: darken($minimal_background, 8);
-    @include box_shadow(inset 0 0 1px 1px, darken($minimal_inset_shadow_color, 5));
-  }
-  &[disabled] {
-	  background: transparentize($minimal_background, 0.5);
-	  border-color: transparentize($minimal_background, 0.5);
-	  color: transparentize($minimal_font_color, 0.5);
-  }
-}