Fix disabled controls, Fix disabled pagination

Author: jgthms

docs/css/bulma-docs.css

@@ -195,6 +195,7 @@ pre {
 }
 
 pre code {
+  -webkit-overflow-scrolling: touch;
   background: none;
   color: inherit;
   display: block;
@@ -1972,6 +1973,7 @@ input[type="submit"].button {
 .checkbox[disabled],
 .radio[disabled] {
   color: #7a7a7a;
+  cursor: not-allowed;
 }
 
 .radio + .radio {
@@ -4079,7 +4081,9 @@ a.nav-item.is-tab.is-active {
 .pagination-previous[disabled],
 .pagination-next[disabled],
 .pagination-link[disabled] {
-  background: #dbdbdb;
+  background-color: #dbdbdb;
+  border-color: #dbdbdb;
+  box-shadow: none;
   color: #7a7a7a;
   opacity: 0.5;
 }

docs/documentation/components/pagination.html

@@ -82,7 +82,7 @@ <h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</stro
 
 {% capture pagination_options_example %}
 <nav class="pagination">
-  <a class="pagination-previous is-disabled">Previous</a>
+  <a class="pagination-previous" title="This is the first page" disabled>Previous</a>
   <a class="pagination-next">Next page</a>
   <ul class="pagination-list">
     <li>

docs/documentation/elements/form.html

@@ -353,19 +353,19 @@ <h4 class="subtitle">Disabled</h4>
 </div>
 <div class="field">
   <p class="control">
-    <label class="checkbox is-disabled">
+    <label class="checkbox" disabled>
       <input type="checkbox" disabled>
       Remember me
     </label>
   </p>
 </div>
 <div class="field">
   <p class="control">
-    <label class="radio is-disabled">
+    <label class="radio" disabled>
       <input type="radio" name="question" disabled>
       Yes
     </label>
-    <label class="radio is-disabled">
+    <label class="radio" disabled>
       <input type="radio" name="question" disabled>
       No
     </label>

docs/documentation/modifiers/helpers.html

@@ -50,11 +50,7 @@ <h2 class="subtitle">You can apply <strong>responsive helper classes</strong> to
           <td>Text is right-aligned</td>
         </tr>
         <tr>
-          <th rowspan="4">Other</th>
-          <td><code>is-disabled</code></td>
-          <td>Removes any <strong>click</strong> event</td>
-        </tr>
-        <tr>
+          <th rowspan="3">Other</th>
           <td><code>is-marginless</code></td>
           <td>Removes any <strong>margin</strong></td>
         </tr>

docs/documentation/modifiers/syntax.html

@@ -152,7 +152,7 @@ <h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> style
           <ul>
             <li><code>is-outlined</code></li>
             <li><code>is-loading</code></li>
-            <li><code>is-disabled</code></li>
+            <li><code>[disabled]</code></li>
           </ul>
         </div>
       </div>
@@ -164,7 +164,7 @@ <h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> style
           <a class="button is-primary is-loading">Button</a>
         </p>
         <p class="field">
-          <a class="button is-primary is-disabled">Button</a>
+          <a class="button is-primary" disabled>Button</a>
         </p>
       </div>
       <div class="column is-half">
@@ -175,7 +175,7 @@ <h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> style
 <a class="button is-primary is-loading">
   Button
 </a>
-<a class="button is-primary is-disabled">
+<a class="button is-primary" disabled>
   Button
 </a>
 {% endhighlight %}

docs/documentation/overview/modular.html

@@ -73,8 +73,8 @@ <h2 class="subtitle">Just import what you <strong>need</strong></h2>
           <code>.is-link</code>
         </li>
         <li>
-          <code>.is-disabled</code>,
-          <code>.is-loading</code>
+          <code>.is-loading</code>,
+          <code>[disabled]</code>
         </li>
       </ul>
 {% highlight html %}

sass/base/generic.sass

@@ -6,7 +6,7 @@ html
   min-width: 300px
   overflow-x: hidden
   overflow-y: scroll
-  text-rendering: $render-mode
+  text-rendering: $render-mode
 
 article,
 aside,
@@ -87,6 +87,7 @@ pre
   white-space: pre
   word-wrap: normal
   code
+    +overflow-touch
     background: none
     color: inherit
     display: block

sass/components/pagination.sass

@@ -65,7 +65,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   &:active
     box-shadow: $pagination-shadow-inset
   &[disabled]
-    background: $pagination-disabled-background
+    background-color: $pagination-disabled-background
+    border-color: $pagination-border
+    box-shadow: none
     color: $pagination-disabled
     opacity: 0.5
 

sass/elements/form.sass

@@ -94,6 +94,7 @@ $input-radius:              $radius !default
     color: $input-hover
   &[disabled]
     color: $input-disabled
+    cursor: not-allowed
 
 .radio
   & + .radio