Added alert box styles to ui.css, documented under UI in the document…

…ation
foundation · Oct 25, 2011 · 1521677 · 1521677
1 parent a6b26f5
commit 1521677
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/marketing/docs/ui.php b/marketing/docs/ui.php
@@ -30,6 +30,35 @@
 				<h4 class="subheader">Need tabs, tables, or other common UI elements?<br />Yeah, we got that.</h4>
 				<hr />
 
+				<h4>Alerts</h4>
+				<p>Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like anything else in Foundation, easy to customize.</p>
+
+				<div class="alert-box">
+					This is a standard alert (div.alert-box).
+					<a href="" class="close">&times;</a>
+				</div>
+
+				<div class="alert-box success">
+					This is a success alert (div.alert-box.success).
+					<a href="" class="close">&times;</a>
+				</div>
+
+				<div class="alert-box warning">
+					This is a warning alert (div.alert-box.warning).
+					<a href="" class="close">&times;</a>
+				</div>
+
+				<div class="alert-box error">
+					This is an error alert (div.alert-box.error).
+					<a href="" class="close">&times;</a>
+				</div>
+
+				<p>
+					<script type="text/javascript" src="http://snipt.net/embed/e291c9b926573dfd81fe24168d554c92"></script>
+				</p>		
+
+				<hr />
+
 				<h4>Tabs</h4>
 				<div class="row">
 					<div class="six columns">

diff --git a/stylesheets/ui.css b/stylesheets/ui.css
@@ -3,9 +3,10 @@
 
 
 /* -------------------------------------------------- 
-                                Table of Contents
+   Table of Contents
 -----------------------------------------------------
 :: Buttons
+:: Alerts
 :: Notices/Alerts
 :: Tabs
 :: Pagination
@@ -99,8 +100,22 @@
 	.white.button:hover		{ background-color: #dadada; color: #333; }
 	.charcoal.button:hover	{ background-color: #000; }
 
+
+
+/*	--------------------------------------------------
+	Alerts
+	-------------------------------------------------- */
+
+	div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0px 1px rgba(255,255,255,0.9); position: relative; }
+	.alert-box.success { background-color: #7fae00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
+	.alert-box.warning { background-color: #c08c00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
+	.alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
+
+	.alert-box a.close { color: #000; position: absolute; right: 4px; top: 0px; font-size: 18px; opacity: 0.2; padding: 4px; }
+	.alert-box a.close:hover { opacity: 0.4; }
 
 
+
 /*    --------------------------------------------------
     Tabs
     -------------------------------------------------- */