Fixed the disabled state for different button types

foundation · Jul 19, 2012 · 7f5a33e · 7f5a33e
1 parent 61a94fa
commit 7f5a33e
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 1 deletion.
diff --git a/marketing/stylesheets/docs/presentation.css b/marketing/stylesheets/docs/presentation.css
@@ -513,6 +513,13 @@ p.vevent abbr { cursor: default; text-decoration: none; font-weight: bold; borde
 .button.full-width { width: 100%; text-align: center; padding-left: 0 !important; padding-right: !important; }
 .button.left-align { text-align: left; text-indent: 12px; }
 .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; background: #2ba6cb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.button.disabled :hover, .button[disabled] :hover { background: #2ba6cb; }
+.button.disabled.success, .button[disabled].success { background-color: #5da423; }
+.button.disabled.success:hover, .button[disabled].success:hover { background-color: #5da423; }
+.button.disabled.alert, .button[disabled].alert { background-color: #c60f13; }
+.button.disabled.alert:hover, .button[disabled].alert:hover { background-color: #c60f13; }
+.button.disabled.secondary, .button[disabled].secondary { background-color: #e9e9e9; }
+.button.disabled.secondary:hover, .button[disabled].secondary:hover { background-color: #e9e9e9; }
 
 /* Don't use native buttons on iOS */
 input[type=submit].button, button.button { -webkit-appearance: none; }

diff --git a/marketing/stylesheets/index.css b/marketing/stylesheets/index.css
@@ -513,6 +513,13 @@ p.vevent abbr { cursor: default; text-decoration: none; font-weight: bold; borde
 .button.full-width { width: 100%; text-align: center; padding-left: 0 !important; padding-right: !important; }
 .button.left-align { text-align: left; text-indent: 12px; }
 .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; background: #2ba6cb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.button.disabled :hover, .button[disabled] :hover { background: #2ba6cb; }
+.button.disabled.success, .button[disabled].success { background-color: #5da423; }
+.button.disabled.success:hover, .button[disabled].success:hover { background-color: #5da423; }
+.button.disabled.alert, .button[disabled].alert { background-color: #c60f13; }
+.button.disabled.alert:hover, .button[disabled].alert:hover { background-color: #c60f13; }
+.button.disabled.secondary, .button[disabled].secondary { background-color: #e9e9e9; }
+.button.disabled.secondary:hover, .button[disabled].secondary:hover { background-color: #e9e9e9; }
 
 /* Don't use native buttons on iOS */
 input[type=submit].button, button.button { -webkit-appearance: none; }

diff --git a/marketing/stylesheets/presentation.css b/marketing/stylesheets/presentation.css
@@ -513,6 +513,13 @@ p.vevent abbr { cursor: default; text-decoration: none; font-weight: bold; borde
 .button.full-width { width: 100%; text-align: center; padding-left: 0 !important; padding-right: !important; }
 .button.left-align { text-align: left; text-indent: 12px; }
 .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; background: #2ba6cb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.button.disabled :hover, .button[disabled] :hover { background: #2ba6cb; }
+.button.disabled.success, .button[disabled].success { background-color: #5da423; }
+.button.disabled.success:hover, .button[disabled].success:hover { background-color: #5da423; }
+.button.disabled.alert, .button[disabled].alert { background-color: #c60f13; }
+.button.disabled.alert:hover, .button[disabled].alert:hover { background-color: #c60f13; }
+.button.disabled.secondary, .button[disabled].secondary { background-color: #e9e9e9; }
+.button.disabled.secondary:hover, .button[disabled].secondary:hover { background-color: #e9e9e9; }
 
 /* Don't use native buttons on iOS */
 input[type=submit].button, button.button { -webkit-appearance: none; }

diff --git a/stylesheets/foundation/buttons.scss b/stylesheets/foundation/buttons.scss
@@ -44,7 +44,19 @@
     &.left-align { text-align: left; text-indent: 12px; }
 
 		/* Disabled ---------- */
-    &.disabled, &[disabled] { opacity: 0.6; cursor: default; background: $mainColor; @include box-shadow(none); }
+    &.disabled, &[disabled] { opacity: 0.6; cursor: default; background: $mainColor; @include box-shadow(none); 
+      :hover { background: $mainColor; }
+
+      &.success { background-color: $successColor; 
+        &:hover { background-color: $successColor; }
+      }
+      &.alert { background-color: $alertColor; 
+        &:hover { background-color: $alertColor; }
+      }
+      &.secondary { background-color: $secondaryColor; 
+        &:hover { background-color: $secondaryColor; }
+      }
+    }
 	}
 
   /* Don't use native buttons on iOS */

diff --git a/test.html b/test.html
@@ -83,6 +83,10 @@ <h5>Touch Detection</h5>
         <a href="" class="success button">Publish</a>
       </p>
 
+      <p>
+        <a href="" class="disabled button">Publish</a> <a href="" class="disabled success button">Publish</a> <a href="" class="disabled alert button">Publish</a> <a href="" class="disabled secondary button">Publish</a>
+      </p>
+
       <ul class="radius button-group">
         <li>
           <a href="" class="button">Save</a>