Merge pull request #183 from todc/btn-flat

Add the btn-flat-* styles along with the btn-flat modifier class

docs/_includes/css/buttons.html

@@ -71,6 +71,30 @@ <h4>Conveying meaning to assistive technologies</h4>
     <p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
   </div>
 
+  <h2 id="buttons-flat">Flat buttons</h2>
+  <p>In need of a button, but you'd like something flatter? Replace the default modifier classes with the <code>.btn-flat-*</code> ones to remove all background images, borders, and colors on any button.</p>
+  <div class="bs-example" data-example-id="btn-flat-variants">
+    <button type="button" class="btn btn-flat-default">Default</button>
+    <button type="button" class="btn btn-flat-primary">Primary</button>
+    <button type="button" class="btn btn-flat-success">Success</button>
+    <button type="button" class="btn btn-flat-info">Info</button>
+    <button type="button" class="btn btn-flat-warning">Warning</button>
+    <button type="button" class="btn btn-flat-danger">Danger</button>
+  </div>
+{% highlight html %}
+<button type="button" class="btn btn-flat-primary">Primary</button>
+<button type="button" class="btn btn-flat-secondary">Secondary</button>
+<button type="button" class="btn btn-flat-success">Success</button>
+<button type="button" class="btn btn-flat-info">Info</button>
+<button type="button" class="btn btn-flat-warning">Warning</button>
+<button type="button" class="btn btn-flat-danger">Danger</button>
+{% endhighlight %}
+
+  <div class="bs-callout bs-callout-info" id="callout-buttons-flat-modifier">
+    <h4>Optional Modifier Class</h4>
+    <p>Instead of using the flat button classes you may use the <code>btn-flat</code> class along with the button classes listed under <a href="#buttons-options">Options</a>. For Example: <code>class="btn btn-primary btn-flat"</code></p>
+  </div>
+
   <h2 id="buttons-sizes">Sizes</h2>
   <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
   <div class="bs-example" data-example-id="btn-sizes">

docs/_includes/nav/css.html

@@ -82,6 +82,7 @@
   <a href="#buttons">Buttons</a>
   <ul class="nav">
     <li><a href="#buttons-options">Options</a></li>
+    <li><a href="#buttons-flat">Flat</a></li>
     <li><a href="#buttons-sizes">Sizes</a></li>
     <li><a href="#buttons-active">Active state</a></li>
     <li><a href="#buttons-disabled">Disabled state</a></li>