Adding Navbar input fix and text alignment classes

twbs · Jan 17, 2013 · c54b2ab · c54b2ab
1 parent 60704e5
commit c54b2ab
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/assets/css/bootstrapwp.css b/assets/css/bootstrapwp.css
@@ -603,6 +603,15 @@ a.text-info:hover {
 a.text-success:hover {
   color: #356635;
 }
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+.text-center {
+  text-align: center;
+}
 h1,
 h2,
 h3,
@@ -3694,7 +3703,9 @@ input[type="submit"].btn.btn-mini {
 }
 .navbar .btn-group .btn,
 .navbar .input-prepend .btn,
-.navbar .input-append .btn {
+.navbar .input-append .btn,
+.navbar .input-prepend .btn-group,
+.navbar .input-append .btn-group {
   margin-top: 0;
 }
 .navbar-form {

diff --git a/assets/css/less/navbar.less b/assets/css/less/navbar.less
@@ -95,7 +95,9 @@
 }
 .navbar .btn-group .btn,
 .navbar .input-prepend .btn,
-.navbar .input-append .btn {
+.navbar .input-append .btn,
+.navbar .input-prepend .btn-group,
+.navbar .input-append .btn-group {
   margin-top: 0; // then undo the margin here so we don't accidentally double it
 }
 
@@ -486,4 +488,4 @@
     .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
   }
 
-}
+}
diff --git a/assets/css/less/type.less b/assets/css/less/type.less
@@ -43,6 +43,10 @@ a.text-info:hover    { color: darken(@infoText, 10%); }
 .text-success        { color: @successText; }
 a.text-success:hover { color: darken(@successText, 10%); }
 
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+
 
 // Headings
 // -------------------------
@@ -234,4 +238,4 @@ address {
   margin-bottom: @baseLineHeight;
   font-style: normal;
   line-height: @baseLineHeight;
-}
+}
diff --git a/templates-documentation/page-base-css.php b/templates-documentation/page-base-css.php
@@ -95,6 +95,20 @@
 					</div>
 					<pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
 					<p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
+
+					<h3>Alignment classes</h3>
+					<p>Easily realign text to components with text alignment classes.</p>
+					<div class="bs-docs-example">
+						<p class="text-left">Left aligned text.</p>
+						<p class="text-center">Center aligned text.</p>
+						<p class="text-right">Right aligned text.</p>
+					</div>
+					<pre class="prettyprint linenums">
+					&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
+					&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
+					&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
+					</pre>
+
 					<h3>Emphasis classes</h3>
 					<p>Convey meaning through color with a handful of emphasis utility classes.</p>
 					<div class="bs-docs-example">