From 072ccd4ddad1dcf642e27497c5253ce578182719 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 14 Dec 2013 21:40:16 -0800
Subject: Fixes #11572: Add contextual background-color classes to match text
 classes; move both sets of classes to Helper Classes section of the CSS docs

---
 less/type.less | 49 +++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 6 deletions(-)

(limited to 'less/type.less')

diff --git a/less/type.less b/less/type.less
index 24a581fe8..52f9b5b2b 100644
--- a/less/type.less
+++ b/less/type.less
@@ -81,7 +81,13 @@ small,
 // Undo browser default styling
 cite    { font-style: normal; }
 
-// Contextual emphasis
+// Alignment
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+.text-justify        { text-align: justify; }
+
+// Contextual colors
 .text-muted {
   color: @text-muted;
 }
@@ -116,11 +122,42 @@ cite    { font-style: normal; }
   }
 }
 
-// Alignment
-.text-left           { text-align: left; }
-.text-right          { text-align: right; }
-.text-center         { text-align: center; }
-.text-justify        { text-align: justify; }
+// Contextual backgrounds
+// For now we'll leave these alongside the text classes until v4 when we can
+// safely shift things around (per SemVer rules).
+.bg-primary {
+  // Given the contrast here, this is the only class to have it's color inverted
+  // automatically.
+  color: #fff;
+  background-color: @brand-primary;
+  a&:hover {
+    background-color: darken(@brand-primary, 10%);
+  }
+}
+.bg-warning {
+  background-color: @state-warning-bg;
+  a&:hover {
+    background-color: darken(@state-warning-bg, 10%);
+  }
+}
+.bg-danger {
+  background-color: @state-danger-bg;
+  a&:hover {
+    background-color: darken(@state-danger-bg, 10%);
+  }
+}
+.bg-success {
+  background-color: @state-success-bg;
+  a&:hover {
+    background-color: darken(@state-success-bg, 10%);
+  }
+}
+.bg-info {
+  background-color: @state-info-bg;
+  a&:hover {
+    background-color: darken(@state-info-bg, 10%);
+  }
+}
 
 
 // Page header
-- 
cgit v1.2.3