More pattern edits

bradfrost · May 25, 2013 · e1b49a6 · e1b49a6
1 parent aad9cb6
commit e1b49a6
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 45 deletions.
diff --git a/css/scss/base/_animation.scss b/css/scss/base/_animation.scss
@@ -0,0 +1,15 @@
+.animate-fade {
+	@include transition(opacity, 0.3s, ease-out);
+
+	&:hover {
+		opacity: 0;
+	}
+}
+
+.animate-move {
+	@include transition(height, 0.3s, ease-out);
+
+	&:hover {
+		height: 10em;
+	}
+}
diff --git a/css/scss/generic/_variables.scss b/css/scss/generic/_variables.scss
@@ -2,7 +2,7 @@
     $VARIABLES
 \*------------------------------------*/
 
-/* Colors */
+//Colors
 $gray : #808080;
 $gray-light : #f9f9f9;
 $gray-light-2 : #eee;
@@ -24,7 +24,7 @@ $brand-facebook: #03539e;
 $brand-twitter: #35ccff;
 $brand-linkedin: #217bc1;
 
-/* Typography */
+//Typography
 $font : "HelveticaNeue", "Helvetica", "Arial", sans-serif;
 $font-secondary : Georgia, Times, "Times New Roman", serif;
 
@@ -34,7 +34,7 @@ $font-slightly-smaller : 0.875em;
 $font-size-sm : 0.75em;
 $font-size-large : 1.4375em;
 
-/* Layout */
+//Layout
 $max-width: 82rem;
 $offset-left-1: 4.5rem;
 
@@ -43,7 +43,7 @@ $threecol-1-width: 18%;
 $threecol-main-width: 54%;
 $threecol-2-wdith: 28%;
 
-/* Defaults */
+//Defaults
 $space : 1rem;
 $space-and-half : $space*1.5;
 $space-double : $space*2;
@@ -57,12 +57,12 @@ $pad-double : $pad*2;
 $pad-half : $pad/2;
 $pad-quarter :$pad/4;
 
-/* Borders */
+//Borders
 $border-med: 3px;
 $border-thick: 7px;
 
 
-/* Breakpoints */
+//Breakpoints
 $bp-small : 24em;
 $bp-small-2 : 29.75em;
 $bp-small-3 : 39.8em;
@@ -72,4 +72,6 @@ $bp-large : 60em;
 $bp-large-2 : 66em;
 $bp-xl : 73em;
 $bp-xxl : 89em;
-$bp-xxxl : 93em;
+$bp-xxxl : 93em;
+
+//
diff --git a/css/scss/objects/_text.scss b/css/scss/objects/_text.scss
@@ -11,6 +11,10 @@
 
 /* Passages of Text */
 .text {
+	a {
+		text-decoration: underline;
+	}
+
 	ul {
 		list-style: disc;
 		margin-left: 1.2em;

diff --git a/css/style.css b/css/style.css
@@ -26,12 +26,6 @@
 /*------------------------------------*\
     $VARIABLES
 \*------------------------------------*/
-/* Colors */
-/* Typography */
-/* Layout */
-/* Defaults */
-/* Borders */
-/* Breakpoints */
 /*------------------------------------*\
     $MIXINS
 \*------------------------------------*/
@@ -376,6 +370,24 @@ td {
   border: 1px solid gray;
   padding: 0.2em; }
 
+.animate-fade {
+  -webkit-transition: opacity 0.3s ease-out;
+  -moz-transition: opacity 0.3s ease-out;
+  -ms-transition: opacity 0.3s ease-out;
+  -o-transition: opacity 0.3s ease-out;
+  transition: opacity 0.3s ease-out; }
+  .animate-fade:hover {
+    opacity: 0; }
+
+.animate-move {
+  -webkit-transition: height 0.3s ease-out;
+  -moz-transition: height 0.3s ease-out;
+  -ms-transition: height 0.3s ease-out;
+  -o-transition: height 0.3s ease-out;
+  transition: height 0.3s ease-out; }
+  .animate-move:hover {
+    height: 10em; }
+
 /*------------------------------------*\
     $LAYOUT
 \*------------------------------------*/
@@ -701,6 +713,8 @@ td {
   font-size: 1.4375em; }
 
 /* Passages of Text */
+.text a {
+  text-decoration: underline; }
 .text ul {
   list-style: disc;
   margin-left: 1.2em; }

diff --git a/css/style.scss b/css/style.scss
@@ -46,6 +46,7 @@
 @import "scss/base/media";
 @import "scss/base/forms";
 @import "scss/base/tables";
+@import "scss/base/animation";
 
 
 

diff --git a/data/annotations-ck.js b/data/annotations-ck.js
diff --git a/patterns/00-Atoms/00-Global/02-Animations.php b/patterns/00-Atoms/00-Global/02-Animations.php
@@ -1,4 +1,4 @@
-<ul class="sg-animations">
-	<li class="sg-color-red" style="padding: 1em; background: #000;">Fade: 0.3second ease-out</li>
-	<li class="sg-color-red" style="padding: 1em; background: #000;">Movement: 0.2second ease-in-out</li>
-</ul>
+<div class="g g-1up demo">
+	<div class="gi animate-fade"><strong>Fade:</strong> Duration: 0.3s Easing: ease-out (Hover to see effect)</div>
+	<div class="gi animate-move"><strong>Movement:</strong> 0.2second ease-in-out; (Hover to see effect)</div>
+</div>
diff --git a/patterns/00-Atoms/00-Text/03-Inline-Text-Elements.php b/patterns/00-Atoms/00-Text/03-Inline-Text-Elements.php
@@ -1,3 +1,4 @@
+<div class="text">
 <p><a href="#">This is a text link</a></p>
 
 <p><strong>Strong is used to indicate strong importance</strong></p>
@@ -16,4 +17,5 @@
 
 <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q>
 
-<p><code>This is what inline code looks like.</code></p>
+<p><code>This is what inline code looks like.</code></p>
+</div>
diff --git a/patterns/00-Atoms/03-Forms/00-Text-Fields.php b/patterns/00-Atoms/03-Forms/00-Text-Fields.php
@@ -28,5 +28,14 @@
             <label for="textarea">Textarea</label>
             <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
         </div>
+        <div class="field-container">
+            <label class="error">Error Input</label>
+            <input class="error" type="text" placeholder="Text Input">
+        </div>
+        <div class="field-container">
+            <label  class="valid">Valid</label>
+            <input  class="valid" type="text" placeholder="Text Input">
+        </div>
+
     </fieldset>
 </form>