Merge pull request #63 from primer/disabled_btns

Document disabled buttons

css/.primer-stats.md

@@ -7,7 +7,7 @@
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 30812
+- **Total Stylesheet Size:** 30831
 - **Total Media Queries:** 1
 - **Total Rules:** 404
 - **Selectors Per Rule:** 1.4405940594059405
@@ -18,6 +18,6 @@
 - **Top Selector Specificity Selector:** .fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before
 - **Total Id Selectors:** 0
 - **Total Identifiers:** 1249
-- **Total Declarations:** 1003
-- **Total Unique Colors:** 79
+- **Total Declarations:** 1004
+- **Total Unique Colors:** 78
 - **Total Important Keywords:** 1

docs/buttons.md

@@ -55,6 +55,32 @@ Outline buttons downplay an action as they appear like boxy links. Just add `.bt
 <button class="btn btn-sm btn-outline" type="button">Outline button</button>
 {% endexample %}
 
+## Disabled state
+
+Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
+
+{% example html %}
+<button class="btn" type="button" disabled>Disabled button</button>
+<a class="btn disabled" href="#" role="button">Disabled button</a>
+{% endexample %}
+
+Similar styles are applied to primary, danger, and outline buttons:
+
+{% example html %}
+<button class="btn btn-primary" type="button" disabled>Disabled button</button>
+<a class="btn btn-primary disabled" href="#" role="button">Disabled button</a>
+{% endexample %}
+
+{% example html %}
+<button class="btn btn-danger" type="button" disabled>Disabled button</button>
+<a class="btn btn-danger disabled" href="#" role="button">Disabled button</a>
+{% endexample %}
+
+{% example html %}
+<button class="btn btn-outline" type="button" disabled>Disabled button</button>
+<a class="btn btn-outline disabled" href="#" role="button">Disabled button</a>
+{% endexample %}
+
 ## Block buttons
 
 Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.

scss/_buttons.scss

@@ -154,7 +154,8 @@
     &,
     &:hover {
       color: #777;
-      background-color: #f5f5f5;
+      background-color: #fff;
+      background-image: none;
       border-color: #e5e5e5;
     }
   }