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

Change-Id: I2d09a116d07621053f2fc9524f95e47bf7fc834e

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;
+    }
+  }
+
 }

uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java

@@ -79,6 +79,11 @@ public class CheckBoxes extends VerticalLayout implements View {
         check.addStyleName("large");
         row.addComponent(check);
 
+        check = new CheckBox("Disabled", true);
+        check.setEnabled(false);
+        check.setIcon(testIcon.get());
+        row.addComponent(check);
+
         h1 = new Label("Option Groups");
         h1.addStyleName("h1");
         addComponent(h1);
@@ -184,6 +189,17 @@ public class CheckBoxes extends VerticalLayout implements View {
         options.setItemIcon(two, testIcon.get());
         options.setItemIcon("Option Three", testIcon.get());
         row.addComponent(options);
+
+        options = new OptionGroup("Disabled items");
+        options.setEnabled(false);
+        options.addItem("Option One");
+        options.addItem("Option Two");
+        options.addItem("Option Three");
+        options.select("Option One");
+        options.setItemIcon("Option One", testIcon.get());
+        options.setItemIcon("Option Two", testIcon.get());
+        options.setItemIcon("Option Three", testIcon.get(true));
+        row.addComponent(options);
     }
 
     @Override

uitest/src/com/vaadin/tests/themes/valo/ValoThemeUITest.java

@@ -85,7 +85,7 @@ public class ValoThemeUITest extends MultiBrowserTest {
     public void checkboxes() throws Exception {
         openTestURL("test");
         open("Check Boxes & Option Groups", "Check Boxes");
-        compareScreen("checkboxes");
+        compareScreen("checkboxes_with_disabled");
     }
 
     @Test