stipe 0.0.2.6 → 0.0.2.7

data/readme.md

@@ -13,7 +13,11 @@ Stipe is a Compass Extension, so Compass is set as a depdency. You will need to
 
 # Stipe Changelog
 
+## 0.0.2.7
+* Sass and UI work related to default form views
+
 ## 0.0.2.6
 * Created color views in Toadstool
 * Created remaining semantic color variables silent classes
-* Updated Toadstool `_design / _ui_manifest.scss` 
+* Updated Toadstool `_design / _ui_manifest.scss` 
+

data/stylesheets/stipe/_forms.scss

@@ -19,6 +19,8 @@ $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;
+$form_label_color:              $alpha_gray !default;
 
 @import "forms/mixins";
 @import "forms/extends";

data/stylesheets/stipe/buttons/_extends.scss

@@ -2,12 +2,12 @@
 // ---------------------------------------------------------
 
 %stipe_buttons {
-	@extend %minimal !optional;
+	@extend %cupid-green;
 	margin-right: em(10);
 	&:last-child {
 		margin: 0;
 	}
 	&:nth-child(n+2) {
-		@extend %cupid-green !optional;
+		@extend %minimal;
 	}
 }

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

@@ -10,7 +10,7 @@ $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: em(12) !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;
@@ -29,6 +29,10 @@ $cupid_width: em(150) !default;
   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);
@@ -40,6 +44,11 @@ $cupid_width: em(150) !default;
 	  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

@@ -23,6 +23,10 @@ $minimal_width: em(150) !default;
   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));
@@ -33,4 +37,9 @@ $minimal_width: em(150) !default;
 	  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);
+  }
 }

data/stylesheets/stipe/forms/_extends.scss

@@ -5,7 +5,7 @@
 	background: $form_field_background_color;
 	@include medium();
 	height: #{32 / $em}em;
-	@include grid(12,12,$grid_uom:combo, $grid_padding_l:6, $grid_padding_r:6);
+	@include grid(12.25, alphaomega, $grid_padding_l:6, $grid_padding_r:6);
 	@include placeholder ($delta_gray);
 
 	@include field_focus;
@@ -13,6 +13,13 @@
 	+ .horizontal_selectors {
 		margin-top: -0.5em;
 	}
+	
+	@include input_placeholder(transparent);
+	
+	@media #{$tablet_portrait} {
+	 -webkit-appearance: none;  // this is to remove the default inner shadow
+	 @include input_placeholder($placeholder_text);
+	}
 }
 
 // disabled input fields

data/stylesheets/stipe/stipe/_mixins.scss

@@ -8,9 +8,13 @@
 
 // required default value to for vendor prefix support
 // -----------------------------------------------------
-$prefix_defaults: -moz- -webkit- -o- -ms- '';
-$webkit_support: -webkit- '';
-$moz_webkit_support: -moz- -webkit- '';
+$prefix_defaults: -moz- -webkit- -o- -ms- '' !default;
+$webkit_support: -webkit- '' !default;
+$moz_support: -moz- !default;
+$ms_support: -ms- !default; 
+$moz_webkit_support: -moz- -webkit- '' !default;
+$moz_ms_support: -moz- -ms- '' !default;
+$webkit_ms_support: -webkit- -ms- !default;
 
 
 
@@ -63,6 +67,25 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 
 
 
+/////// input_placeholder arguments	/////////
+// --------------------------------------
+@mixin input_placeholder ($placeholder_color, $placeholder_prefix: $moz_support, $input-placeholder_prefix: $webkit_ms_support) {
+	@each $prefix in $input-placeholder_prefix {
+	 &::#{$prefix}input-placeholder {
+	 	color: $placeholder_color;
+	 }
+	}
+	@each $prefix in $placeholder_prefix {
+	 &:#{$prefix}placeholder {
+	 	color: $placeholder_color;
+	 }
+	}
+}
+/////// input_placeholder arguments	/////////
+
+
+
+
 /////////// image with gradient background ////////////
 // ------------------------------------------------- //
 

data/stylesheets/stipe/toadstool/_buttons.scss

@@ -1,6 +1,5 @@
 [class*="toadstool"] {
-	.nav_toggle {		//background: -webkit-linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
-		//@include linear_gradient_w3c (#7d7e7d, #{#7d7e7d 0%, #0e0e0e 100%});
+	.nav_toggle {
 		@include linear_gradient_w3c ($alpha_gray, #{$delta_gray 0%, $alpha_gray 100%});
 		&:hover {
 			@include linear_gradient_w3c ($alpha_gray, #{$alpha_gray 0%, $delta_gray 100%});
@@ -12,10 +11,11 @@
 		border-color: $alpha_gray;
 		float: right;
 		display: none;
+		color: $white;
 		@media #{$mobile} {
 			display: block;
 			width: auto;
-			padding: em(15) em(10) em(10) em(10);
+			padding: rem(15) rem(10) rem(10) rem(10);
 			font-weight: normal;
 			span {
 				&:after {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.2.6
+  version: 0.0.2.7
   prerelease: 
 platform: ruby
 authors:
@@ -104,7 +104,6 @@ files:
 - stylesheets/stipe/color/_extends.scss
 - stylesheets/stipe/_typography.scss
 - stylesheets/stipe/forms/_mixins.scss
-- stylesheets/stipe/forms/_default.scss
 - stylesheets/stipe/forms/_extends.scss
 - stylesheets/stipe/doc-src/grids.md
 - stylesheets/stipe/stipe/_mixins.scss

data/stylesheets/stipe/forms/_default.scss

@@ -1,11 +0,0 @@
-input[type=text], input[type=password], input[type="date"], select {
-	@extend %input_fields;
-}
-
-input[disabled], textarea[disabled], select[disabled], .disabled {
-	@extend %disabled_inputs;
-}
-
-label {
-	@extend %form_labels;
-}