alerts

dist/framework-with-theme.css

@@ -1,4 +1,27 @@
 @charset "UTF-8";
+.alert {
+  padding: 8px 35px 8px 14px; }
+
+.alert h4 {
+  margin: 0; }
+
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  line-height: 1.42857; }
+
+.alert-block {
+  padding-top: 14px;
+  padding-bottom: 14px; }
+
+.alert-block > p,
+.alert-block > ul {
+  margin-bottom: 0; }
+
+.alert-block p + p {
+  margin-top: 5px; }
+
 html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%; }
@@ -244,6 +267,42 @@ a.list-item {
   margin-bottom: 0;
   line-height: 1.3; }
 
+.alert {
+  margin-bottom: 1.42857;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  background-color: #fcf8e3;
+  border: 1px solid #fbeed5; }
+
+.alert,
+.alert h4 {
+  color: #c09853; }
+
+.alert-success {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  color: #468847; }
+
+.alert-success h4 {
+  color: #468847; }
+
+.alert-danger,
+.alert-error {
+  background-color: #f2dede;
+  border-color: #eed3d7;
+  color: #b94a48; }
+
+.alert-danger h4,
+.alert-error h4 {
+  color: #b94a48; }
+
+.alert-info {
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+  color: #3a87ad; }
+
+.alert-info h4 {
+  color: #3a87ad; }
+
 .bar {
   background-color: white;
   border-style: solid;

example/alerts.html

@@ -17,8 +17,24 @@
         <h1 class="title">Alerts</h1>
       </header>
 
-      <main>
+      <main class="content-padded">
-        
+
+        <p class="alert">
+          <strong>Warning!</strong> Best check yo self, you're not looking too good.
+        </p>
+
+        <p class="alert alert-error">
+          <strong>Error!</strong> Shit hit the fan.
+        </p>
+
+        <p class="alert alert-success">
+          <strong>Booya!</strong> You win.
+        </p>
+
+        <p class="alert alert-info">
+          <strong>Info yo!</strong> This is what you need to know.
+        </p>
+
       </main>
 
     </section>

scss/framework-structure.scss

@@ -6,6 +6,7 @@
   "framework/structure/variables",
   "framework/structure/mixins",
 
+  "framework/structure/alerts",
   "framework/structure/base",
 
   "framework/structure/button",

scss/framework-theme-default.scss

@@ -4,6 +4,7 @@
 // Components
 @import
   "framework/theme/default/variables",
+  "framework/theme/default/alerts",
   "framework/theme/default/bar",
   "framework/theme/default/tabs",
   "framework/theme/default/button",

scss/framework/structure/_alerts.scss

@@ -0,0 +1,38 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+  padding: 8px 35px 8px 14px;
+}
+.alert h4 {
+  margin: 0;
+}
+
+// Adjust close link position
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  line-height: $baseLineHeight;
+}
+
+
+// Block alerts
+// -------------------------
+
+.alert-block {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+.alert-block > p,
+.alert-block > ul {
+  margin-bottom: 0;
+}
+.alert-block p + p {
+  margin-top: 5px;
+}

scss/framework/theme/default/_alerts.scss

@@ -0,0 +1,51 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+  margin-bottom: $baseLineHeight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  background-color: $warningBackground;
+  border: 1px solid $warningBorder;
+}
+.alert,
+.alert h4 {
+  // Specified for the h4 to prevent conflicts of changing $headingsColor
+  color: $warningText;
+}
+
+
+// Alternate styles
+// -------------------------
+
+.alert-success {
+  background-color: $successBackground;
+  border-color: $successBorder;
+  color: $successText;
+}
+.alert-success h4 {
+  color: $successText;
+}
+.alert-danger,
+.alert-error {
+  background-color: $errorBackground;
+  border-color: $errorBorder;
+  color: $errorText;
+}
+.alert-danger h4,
+.alert-error h4 {
+  color: $errorText;
+}
+.alert-info {
+  background-color: $infoBackground;
+  border-color: $infoBorder;
+  color: $infoText;
+}
+.alert-info h4 {
+  color: $infoText;
+}
+

scss/framework/theme/default/_variables.scss

@@ -79,4 +79,21 @@ $barDarkBorderColor: #111;
 $listDividerBackground: #f5f5f5;
 $listDividerColor: #222;
 
+// Form states and alerts
+// -------------------------
+$warningText:             #c09853;
+$warningBackground:       #fcf8e3;
+$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);
+
+$errorText:               #b94a48;
+$errorBackground:         #f2dede;
+$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);
+
+$successText:             #468847;
+$successBackground:       #dff0d8;
+$successBorder:           darken(adjust-hue($successBackground, -10), 5%);
+
+$infoText:                #3a87ad;
+$infoBackground:          #d9edf7;
+$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);