stipe 0.0.5.0 → 0.0.5.1

data/readme.md

@@ -12,6 +12,9 @@ To use the Stipe gem, using Bundler `gem 'stipe'`
 Stipe is a Compass Extension, so Compass is set as a depdency. You will need to include `require 'stipe'` in your config.rb file.
 
 # Stipe Changelog
+## 0.0.5.1
+* Adding new configutation support for form UI
+
 ## 0.0.5.0
 * Updated stipe manifest to allow for single import
 

data/stylesheets/stipe/_forms.scss

@@ -8,22 +8,36 @@ $input_disabled_text:           lighten($input_disabled, 50%) !default;
                                 
 $form_field_background_color:   $white !default;
 $form_field_focus_color:        $white !default;
-$form_field_fail_bkg:           $white !default;
+$form_field_fail_bkg:           $alpha_color_juliet !default;
                                 
 $form_field_border:             $charlie_gray !default;
-$form_field_border_fail:        $alpha_color !default;
+$form_field_border_fail:        $alpha_color_echo !default;
 $form_field_focus_border_color: $charlie_gray !default;
+$form_field_border_radius:      $standard_round_corner !default;
                                 
 $form_field_text:               $primary_text !default;
-$error_text:                    $alpha_color !default;
-$form_field_fail:               $alpha_color !default;
-$form_field_text_fail:          $alpha_color !default;
-$instructional_text:            $charlie_gray !default;
-$placeholder_text:              $hotel_gray !default;
+//$error_text:                    $alpha_color !default; //not used!?
+//$form_field_fail:               $alpha_color !default; //not used!?
+$form_field_text_fail:          $alpha_color_echo !default;
+$form_field_height:             35 !default;
+$form_field_padding:            6 !default;
+
 $form_label_color:              $alpha_gray !default;
 $form_label_weight:             bold !default;
-$form_field_height:             3em !default;
-$form_field_padding:            6 !default;
+$form_label_lineheight:         20 !default;
+$optional_field_text_color:     $delta_gray !default;
+
+$instructional_text:            $charlie_gray !default;
+
+$placeholder_text:              $hotel_gray !default;
+
+$inline_alert_weight:           bold !default;
+$inline_alert_lineheight:       30 !default;
+$inline_alert_left_padding:     12 !default;
+$inline_alert_bkg_color:        $alpha_color_delta !default;
+$inline_alert_text_color:       $white !default;
+$inline_alert_top_margin:       12 !default;
+$inline_alert_border_width:     1 !default;
 
 @import "forms/mixins";
 @import "forms/extends";

data/stylesheets/stipe/forms/_extends.scss

@@ -7,58 +7,38 @@
 // disabled input fields
 // ------------------------------------------------------------
 %disabled_inputs {
-  background-color: $input_disabled_bkg;
-  border-color: $input_disabled_border;
-  color: $input_disabled_text;
-  &:hover {
-    border-color: $input_disabled_border;
-  }
+  @include disabled_inputs;
 }
 
 // form labels 
 // ------------------------------------------------------------
 %form_labels {
-  display: block;
-  font-weight: $form_label_weight;
-  line-height: em(20);
-  color: $form_label_color;
-  span {
-    padding-left: .25em;
-    font-weight: normal;
-  }
-  fieldset & {
-    @include grid(12,12, $grid_uom:percent);
-  }
+  @include form_labels;
 }
 
 // default error
 // ------------------------------------------------------------
 %fail {
-  border-color: $form_field_border_fail !important;
-  color: $form_field_text_fail !important;
-  input & {
-    background: $form_field_fail_bkg;
-  }
-  &:focus {
-    background: $form_field_fail_bkg !important;
-  }
-  select, input[type="text"], input[type="date"] {
-    background: $form_field_fail_bkg;
-    border-color: $form_field_border_fail;
-    color: $form_field_text_fail;
-    @include input_placeholder($form_field_text_fail);
-    &:focus {
-      background: $form_field_fail_bkg;
-    }
-  }
-  &:after {
-    background: $form_field_fail_bkg;
-    border-color: $form_field_border_fail;
-  }
+  @include fail;
 }
 
+// instructional text
+// ------------------------------------------------------------
+%instructional {
+  @include instructional;
+}
+
+// inline form alert UI
+// ------------------------------------------------------------
+%inline_alert {
+  @include inline_alert;
+}
+
+
 // notification alerts / panels 
 // ------------------------------------------------------------
+// these extend need to be refactored for use
+// see mixin as well
 %default_alert_panel {
   @include alert_boxes ($alert_background_color, 10, 14, 10);
 }
@@ -73,13 +53,12 @@
   color: $white;
   font-weight: bold;
 }
+// these extend need to be refactored for use
+
 
 // form text 
 // ------------------------------------------------------------
-%instructional {
-  color: $instructional_text;
-}
-
+// These all need to be refacotred to see if they are really necessary
 %note {
   @extend %instructional;
   @include small;

data/stylesheets/stipe/forms/_mixins.scss

@@ -3,7 +3,8 @@
   border: 1px solid $form_field_border;
   background: $form_field_background_color;
   font-size: em($font-size);
-  height: $height;
+  height: em($height);
+  @include border_radius(em($form_field_border_radius));
   @include grid(12.25, alphaomega, $grid_padding_l:$padding, $grid_padding_r:$padding);
   @include input_placeholder($placeholder_text);
 
@@ -14,19 +15,50 @@
   }
 }
 
-@mixin field_focus {
+@mixin disabled_inputs {
+  background-color: $input_disabled_bkg;
+  border-color: $input_disabled_border;
+  color: $input_disabled_text;
   &:hover {
-    border-color: $form_field_focus_border_color;
+    border-color: $input_disabled_border;
+  }
+}
+
+@mixin fail {
+  border-color: $form_field_border_fail !important;
+  color: $form_field_text_fail !important;
+  input & {
+    background: $form_field_fail_bkg;
   }
   &:focus {
-    background-color: $form_field_focus_color;
-    border-color: $form_field_focus_border_color;
-    outline: none;
+    background: $form_field_fail_bkg !important;
+  }
+  label {
+    color: $form_field_text_fail !important;
+  }
+  select, input[type="text"], input[type="date"], input[type="password"] {
+    background: $form_field_fail_bkg;
+    border-color: $form_field_border_fail;
+    color: $form_field_text_fail;
+    @include input_placeholder($form_field_text_fail);
+    &:focus {
+      background: $form_field_fail_bkg;
+    }
   }
 }
 
+@mixin inline_alert {
+  line-height: em($inline_alert_lineheight);
+  font-weight: $inline_alert_weight;
+  @include border_radius(em($form_field_border_radius));
+  border: #{$inline_alert_border_width}px $standard_border_style $form_field_border_fail;
+  padding-left: em($inline_alert_left_padding);
+  background: $inline_alert_bkg_color;
+  color: $inline_alert_text_color;
+  margin-top: em($inline_alert_top_margin);
+}
 
-
+// this mixin need to be refactored for use
 @mixin alert_boxes ($background_color, $padding_tb: $grid_padding_tb, $padding_l: $grid_padding_l, $padding_r: $grid_padding_r, $margin_bottom: 0) {
   background-color: $background_color;
   @include grid(12.25, $grid_uom:combo, $grid_child: alphaomega, $grid_padding_l: $padding_l, $grid_padding_r: $padding_r);
@@ -34,3 +66,36 @@
   padding-bottom: #{$padding_tb / $em}em;
   margin-bottom: #{$margin_bottom / $em}em;
 }
+
+@mixin field_focus {
+  &:hover {
+    border-color: $form_field_focus_border_color;
+  }
+  &:focus {
+    background-color: $form_field_focus_color;
+    border-color: $form_field_focus_border_color;
+    outline: none;
+  }
+}
+
+
+@mixin form_labels {
+  display: block;
+  font-weight: $form_label_weight;
+  line-height: em($form_label_lineheight);
+  color: $form_label_color;
+  span {
+    padding-left: .25em;
+    font-weight: normal;
+    color: $optional_field_text_color;
+  }
+  fieldset & {
+    @include grid(12, alphaomega);
+  }
+}
+
+@mixin instructional {
+  color: $instructional_text;
+  line-height: 1.5em;
+  margin-top: 0.5em;
+}

data/stylesheets/stipe/typography/_functions.scss

@@ -2,21 +2,21 @@
 // General font size function that will convert intigers into em values
 // font-size: em(12);
 @function em($target, $context: $font_size) {
-    @return ($target / $context) * 1em;
+  @return ($target / $context) * 1em;
 }
 
 @function rem($target, $context: $font_size) {
-    @return ($target / $context) * 1rem;
+  @return ($target / $context) * 1rem;
 }
 
 // Baseline height calculations 
 // line-height: baseline($baseline_size);
 @function baseline($baseline_size) {
-	@return ($line / $baseline_size) * ceil($baseline_size / $line) * 1em;
+  @return ($line / $baseline_size) * ceil($baseline_size / $line) * 1em;
 }
 
 // Baseline margin calculations 
 // margin-bottom: baseline-margin($baseline_size);
 @function baseline-margin($baseline_size) {
-	@return ($line / $baseline_size) * 1em;
+  @return ($line / $baseline_size) * 1em;
 }

data/stylesheets/stipe/typography/readme.md

@@ -3,7 +3,7 @@
 Much of your Typography has already been addressed with Toadstool. Simply use [Toadstool's config file](http://goo.gl/PqQSK) to address your `$font_size, $heading_1 - 6, $small_point_size and $large_point_size`. As well designate your `$primary_font_family, $secondary_font_family and $heading_font_family` variables.
 
 ##Typography functions
-The functions indludes here are the part of Toadstool's design foundation. Functions for calculating `em` and `rem` values as well as calculating baseline heights for vertical rhythm. 
+The functions indluded here are the part of Toadstool's design foundation. Functions for calculating `em` and `rem` values as well as calculating baseline heights for vertical rhythm. 
 
 ##Typography defaults
 How does this work? Stipe's typography library contains a `_default.scss` file that is carried into the Toadstool project via the [_typograhy.scss](http://goo.gl/1YrDS) file. This file contains the basic bootstrap stylings for `html`, `h1-h6`, `p`, `b`, and `a` tags. Toadstool's [_typography.scss](http://goo.gl/d9yvC) file will mirror the default settings from Stipe. Feel free to edit as necessary, but I have found these pre-defined styles to be pretty stable. 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.5.0
+  version: 0.0.5.1
   prerelease: 
 platform: ruby
 authors: