Fix opacity for disabled checkboxes and option groups. (#15239)

Change-Id: I2d09a116d07621053f2fc9524f95e47bf7fc834e

1 files changed, 17 insertions, 19 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index 3c418ec9b7..7283c4cbbf 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -99,7 +99,7 @@
     }
 
     & ~ label:before {
-      @include valo-button-style($background-color: $background-color, $unit-size: $size, $border-radius: min(round($size/3), $v-border-radius));
+      @include valo-button-style($background-color: $background-color, $unit-size: $size, $border-radius: min(round($size/3), $v-border-radius), $states: normal);
       padding: 0;
       height: round($size);
     }
@@ -119,24 +119,6 @@
     &:checked ~ label:after {
       color: $selection-color;
     }
-
-    &[disabled] {
-      ~ label,
-      ~ label .v-icon,
-      ~ .v-icon {
-        cursor: default;
-      }
-
-      ~ label:before,
-      ~ label:after {
-        @include opacity($v-disabled-opacity);
-      }
-
-      &:active ~ label:after {
-        background: transparent;
-      }
-    }
-
   }
 
   & > .v-icon,
@@ -146,4 +128,20 @@
     cursor: pointer;
   }
 
+  &.v-disabled {
+    > label,
+    > .v-icon {
+      cursor: default;
+      @include opacity($v-disabled-opacity);
+    }
+
+    > label > .v-icon {
+      cursor: default;
+    }
+
+    :root & > input:active ~ label:after {
+      background: transparent;
+    }
+  }
+
 }