Fix disabled buttons

docs/documentation/elements/button.html

@@ -239,16 +239,21 @@ doc-subtab: button
     <h4 class="subtitle">Disabled</h4>
 
 {% capture button_disabled_example %}
-<a class="button is-disabled">Disabled</a>
+<a class="button" title="Disabled button" disabled>Disabled</a>
-<a class="button is-primary is-disabled">Disabled</a>
+<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
-<a class="button is-info is-disabled">Disabled</a>
+<a class="button is-info" title="Disabled button" disabled>Disabled</a>
-<a class="button is-success is-disabled">Disabled</a>
+<a class="button is-success" title="Disabled button" disabled>Disabled</a>
-<a class="button is-warning is-disabled">Disabled</a>
+<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
-<a class="button is-danger is-disabled">Disabled</a>
+<a class="button is-danger" title="Disabled button" disabled>Disabled</a>
 {% endcapture %}
 <div class="columns">
   <div class="column">
-{{button_disabled_example}}
+<div class="block">{{button_disabled_example}}</div>
+    <div class="message is-danger">
+      <div class="message-body">
+        <p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
+      </div>
+    </div>
   </div>
   <div class="column">
 {% highlight html %}

sass/base/helpers.sass

@@ -103,9 +103,6 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 
 // Other
 
-.is-disabled
-  pointer-events: none
-
 .is-marginless
   margin: 0 !important
 

sass/components/pagination.sass

@@ -64,12 +64,10 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     border-color: $pagination-focus-border
   &:active
     box-shadow: $pagination-shadow-inset
-  &[disabled],
+  &[disabled]
-  &.is-disabled
     background: $pagination-disabled-background
     color: $pagination-disabled
     opacity: 0.5
-    pointer-events: none
 
 .pagination-previous,
 .pagination-next

sass/elements/button.sass

@@ -81,6 +81,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     &.is-active
       background-color: $background
       color: $text-strong
+    &[disabled]
+      background-color: transparent
+      border-color: transparent
+      box-shadow: none
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
@@ -104,11 +108,20 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
         border-color: transparent
         box-shadow: $button-shadow-inset
         color: $color-invert
+      &[disabled]
+        background-color: $color
+        border-color: transparent
+        box-shadow: none
       &.is-inverted
         background-color: $color-invert
         color: $color
         &:hover
           background-color: darken($color-invert, 5%)
+        &[disabled]
+          background-color: $color-invert
+          border-color: transparent
+          box-shadow: none
+          color: $color
       &.is-loading
         &:after
           border-color: transparent transparent $color-invert $color-invert !important
@@ -124,6 +137,11 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
         &.is-loading
           &:after
             border-color: transparent transparent $color $color !important
+        &[disabled]
+          background-color: transparent
+          border-color: $color
+          box-shadow: none
+          color: $color
       &.is-inverted.is-outlined
         background-color: transparent
         border-color: $color-invert
@@ -132,6 +150,11 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
         &:focus
           background-color: $color-invert
           color: $color
+        &[disabled]
+          background-color: transparent
+          border-color: $color-invert
+          box-shadow: none
+          color: $color-invert
   // Sizes
   &.is-small
     +button-small
@@ -140,8 +163,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   &.is-large
     +button-large
   // Modifiers
-  &[disabled],
+  &[disabled]
-  &.is-disabled
+    background-color: $button-background
+    border-color: $button-border
+    box-shadow: none
     opacity: 0.5
   &.is-fullwidth
     display: flex

sass/elements/form.sass

@@ -32,8 +32,7 @@ $input-radius:              $radius !default
   &:active,
   &.is-active
     border-color: $input-focus-border
-  &[disabled],
+  &[disabled]
-  &.is-disabled
     background-color: $input-disabled-background
     border-color: $input-disabled-border
     box-shadow: none
@@ -93,11 +92,8 @@ $input-radius:              $radius !default
     margin-right: 0.5em
   &:hover
     color: $input-hover
-  &.is-disabled
+  &[disabled]
     color: $input-disabled
-    pointer-events: none
-    input
-      pointer-events: none
 
 .radio
   & + .radio
@@ -292,33 +288,13 @@ $input-radius:              $radius !default
     &:not(.has-icon-right)
       .icon
         left: 0
-        // transform: translateX(-50%) translateY(-50%)
       .input
         padding-left: 2.25em
-        // &.is-small
-        //   & + .icon
-        //     left: ($size-small * 2.5) / 2
-        // &.is-medium
-        //   & + .icon
-        //     left: ($size-medium * 2.5) / 2
-        // &.is-large
-        //   & + .icon
-        //     left: ($size-large * 2.5) / 2
     &.has-icon-right
       .icon
         right: 0
-        // transform: translateX(50%) translateY(-50%)
       .input
         padding-right: 2.25em
-        // &.is-small
-        //   & + .icon
-        //     right: ($size-small * 2.5) / 2
-        // &.is-medium
-        //   & + .icon
-        //     right: ($size-medium * 2.5) / 2
-        // &.is-large
-        //   & + .icon
-        //     right: ($size-large * 2.5) / 2
   &.is-loading
     &:after
       +loader

sass/elements/notification.sass

@@ -4,6 +4,9 @@
   border-radius: $radius
   padding: 1.25rem 2.5rem 1.25rem 1.5rem
   position: relative
+  a
+    color: currentColor
+    text-decoration: underline
   code,
   pre
     background: $white

sass/utilities/controls.sass

@@ -25,9 +25,8 @@ $control-radius-small: $radius-small !default
   &:active,
   &.is-active
     outline: none
-  &[disabled],
+  &[disabled]
-  &.is-disabled
+    cursor: not-allowed
-    pointer-events: none
 
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small