Fix readonly checkbox opacity in Valo. (#17548)

Change-Id: I633e0deeca6c1268937d8c9b918ea414355c85f3

WebContent/VAADIN/themes/valo/components/_checkbox.scss

@@ -144,4 +144,24 @@
     }
   }
 
+  &.v-readonly {
+    > label,
+    > .v-icon {
+      cursor: default;
+    }
+
+    > label > .v-icon {
+      cursor: default;
+    }
+
+    :root & > input:active ~ label:after {
+      background: transparent;
+    }
+
+    :root & > input ~ label:after {
+      @include opacity($v-disabled-opacity);
+    }
+  }
+
+
 }

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

@@ -84,6 +84,11 @@ public class CheckBoxes extends VerticalLayout implements View {
         check.setIcon(testIcon.get());
         row.addComponent(check);
 
+        check = new CheckBox("Readonly", true);
+        check.setReadOnly(true);
+        check.setIcon(testIcon.get());
+        row.addComponent(check);
+
         h1 = new Label("Option Groups");
         h1.addStyleName("h1");
         addComponent(h1);

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

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