Cherry-picked changes from master, 20b16f0..51a3106

codeforamerica · Dec 16, 2013 · 12e0653 · 12e0653
1 parent cf7e622
commit 12e0653
Show file tree

Hide file tree

Showing 36 changed files with 5,635 additions and 715 deletions.
diff --git a/Makefile b/Makefile
@@ -13,7 +13,7 @@ style/css/main.css: \
         _style/scss/global/header.scss _style/scss/global/layout.scss \
         _style/scss/global/no-layout.scss _style/scss/layout.scss \
         _style/scss/main.scss _style/scss/patterns/badge-headings.scss \
-        _style/scss/patterns/badge-icons.scss _style/scss/patterns/billboard.scss \
+        _style/scss/patterns/billboard.scss _style/scss/documentation.scss \
         _style/scss/patterns/blurb.scss _style/scss/patterns/bricks.scss \
         _style/scss/patterns/button.scss _style/scss/patterns/chimney.scss \
         _style/scss/patterns/flags.scss _style/scss/patterns/heading-contrast.scss \
@@ -34,5 +34,6 @@ style/css/main.css: \
         _style/scss/patterns/stat.scss _style/scss/patterns/sticky-nav.scss \
         _style/scss/patterns/teaser.scss _style/scss/patterns/text-whisper.scss \
         _style/scss/patterns/wodge-large.scss _style/scss/patterns/wodge-small.scss \
-        _style/scss/patterns/wodge.scss _style/scss/templates/documentation.scss
+        _style/scss/patterns/wodge.scss _style/scss/templates/documentation.scss \
+        _style/scss/patterns/alert.scss
 	sass -qf -t expanded -E utf-8 _style/scss/main.scss style/css/main.css
diff --git a/_style/css/cfa-light.css b/_style/css/cfa-light.css
@@ -1,12 +1,5 @@
 @charset "UTF-8";
-/* Base styles */
-/* Sans serif */
-/* Serif */
-/* Converts px to rems. Via David Ensinger: http://davidensinger.com/2013/03/using-rems-with-sass/ */
-/*  Colors ––––––––––––––––––––––––––––––––––––––––––––––– */
-/*  Primary Colors --------------------------------------- */
-/*  Secondary Colors ------------------------------------- */
-/* Elements */
+/*  Elements ––––––––––––––––––––––––––––––––––––––––––––– */
 body {
   font-family: "Gotham A", "Gotham B", "Open Sans Regular", "Verdana", "Helvetica", "Arial";
   font-size: 16px;
@@ -143,6 +136,10 @@ figure {
   width: 1px;
 }
 
+kbd {
+  font-family: "Monaco", "Courier", monospace;
+}
+
 h1,
 h2,
 h3,
@@ -458,6 +455,11 @@ select {
   min-width: 150px;
 }
 
+select[disabled],
+select[multiple] {
+  background-image: none;
+}
+
 label {
   line-height: 20px;
   line-height: 1.25rem;
@@ -549,7 +551,7 @@ ul ul {
   margin: 0;
 }
 
-/* Text Styles */
+/*  Text ––––––––––––––––––––––––––––––––––––––––––––––––– */
 .text-whisper, .heading-contrast {
   color: #6d6e71;
 }
@@ -594,7 +596,53 @@ ul ul {
   border-bottom: none;
 }
 
-/* Patterns */
+/*  Patterns ––––––––––––––––––––––––––––––––––––––––––––– */
+/*  Pattern: Alert --------------------------------------- */
+.alert, .alert-failure, .alert-success, .alert-info {
+  padding: 10px;
+  padding: 0.625rem;
+  font-size: 14px;
+  font-size: 0.875rem;
+  margin: 0 0 16px 0;
+  margin: 0 0 1rem 0;
+  border-radius: 3px;
+  border-radius: 0.1875rem;
+  background: #fedd44;
+  background: rgba(254, 221, 68, 0.4);
+  border: 1px solid;
+  border-color: #fedd44;
+  border-color: rgba(254, 221, 68, 0.5);
+  color: #494c49;
+}
+.alert p, .alert-failure p, .alert-success p, .alert-info p {
+  margin: 0;
+}
+.alert p + *, .alert-failure p + *, .alert-success p + *, .alert-info p + * {
+  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
+}
+
+.alert-failure {
+  background: #cf1b41;
+  background: rgba(207, 27, 65, 0.3);
+  border-color: #cf1b41;
+  border-color: rgba(207, 27, 65, 0.1);
+}
+
+.alert-success {
+  background: #3f863f;
+  background: rgba(63, 134, 63, 0.2);
+  border-color: #3f863f;
+  border-color: rgba(63, 134, 63, 0.1);
+}
+
+.alert-info {
+  background: #399fd3;
+  background: rgba(57, 159, 211, 0.2);
+  border-color: #399fd3;
+  border-color: rgba(57, 159, 211, 0.1);
+}
+
 /*  Button: Default --------------------------------------- */
 button,
 input[type="button"],
@@ -1965,7 +2013,7 @@ section,
   color: #cf1b41;
 }
 
-/* Global */
+/*  Global ––––––––––––––––––––––––––––––––––––––––––––––– */
 .global-footer {
   clear: both;
   background: #494c49;