feat(QCheckbox/QRadio/QToggle): mouseover effect

Author: rstoenescu

ui/src/components/checkbox/QCheckbox.sass

@@ -112,12 +112,18 @@ body.desktop
       transform: scale3d(0, 0, 0)
       transition: transform $option-focus-transition
 
-    &:focus:not(.disabled)
+    &:focus:not(.disabled),
+    &:hover:not(.disabled)
       .q-checkbox__inner:before
         transform: scale3d(1, 1, 1)
 
-    &--dense:focus:not(.disabled) .q-checkbox__inner:before
-      transform: scale3d(1.5, 1.5, 1.5)
+    &--dense:focus:not(.disabled),
+    &--dense:hover:not(.disabled)
+      .q-checkbox__inner:before
+        transform: scale3d(1.5, 1.5, 1.5)
 
-  .q-table--dense .q-checkbox--dense:focus:not(.disabled) .q-checkbox__inner:before
-    transform: scale3d(1.4, 1.4, 1.4)
+  .q-table--dense
+    .q-checkbox--dense:focus:not(.disabled),
+    .q-checkbox--dense:hover:not(.disabled)
+      .q-checkbox__inner:before
+        transform: scale3d(1.4, 1.4, 1.4)

ui/src/components/checkbox/QCheckbox.styl

@@ -112,12 +112,18 @@ body.desktop
       transform: scale3d(0, 0, 0)
       transition: transform $option-focus-transition
 
-    &:focus:not(.disabled)
+    &:focus:not(.disabled),
+    &:hover:not(.disabled)
       .q-checkbox__inner:before
         transform: scale3d(1, 1, 1)
 
-    &--dense:focus:not(.disabled) .q-checkbox__inner:before
-      transform: scale3d(1.5, 1.5, 1.5)
+    &--dense:focus:not(.disabled),
+    &--dense:hover:not(.disabled)
+      .q-checkbox__inner:before
+        transform: scale3d(1.5, 1.5, 1.5)
 
-  .q-table--dense .q-checkbox--dense:focus:not(.disabled) .q-checkbox__inner:before
-    transform: scale3d(1.4, 1.4, 1.4)
+  .q-table--dense
+    .q-checkbox--dense:focus:not(.disabled),
+    .q-checkbox--dense:hover:not(.disabled)
+      .q-checkbox__inner:before
+        transform: scale3d(1.4, 1.4, 1.4)

ui/src/components/radio/QRadio.sass

@@ -91,9 +91,12 @@ body.desktop
       transform: scale3d(0, 0, 0)
       transition: transform $radio-transition
 
-    &:focus:not(.disabled)
+    &:focus:not(.disabled),
+    &:hover:not(.disabled)
       .q-radio__inner:before
         transform: scale3d(1, 1, 1)
 
-    &--dense:focus:not(.disabled) .q-radio__inner:before
-      transform: scale3d(1.5, 1.5, 1.5)
+    &--dense:focus:not(.disabled),
+    &--dense:hover:not(.disabled)
+      .q-radio__inner:before
+        transform: scale3d(1.5, 1.5, 1.5)

ui/src/components/radio/QRadio.styl

@@ -91,9 +91,12 @@ body.desktop
       transform: scale3d(0, 0, 0)
       transition: transform $radio-transition
 
-    &:focus:not(.disabled)
+    &:focus:not(.disabled),
+    &:hover:not(.disabled)
       .q-radio__inner:before
         transform: scale3d(1, 1, 1)
 
-    &--dense:focus:not(.disabled) .q-radio__inner:before
-      transform: scale3d(1.5, 1.5, 1.5)
+    &--dense:focus:not(.disabled),
+    &--dense:hover:not(.disabled)
+      .q-radio__inner:before
+        transform: scale3d(1.5, 1.5, 1.5)

ui/src/components/toggle/QToggle.sass

@@ -98,9 +98,13 @@ body.desktop
       transform: scale3d(0, 0, 0)
       transition: transform $option-focus-transition
 
-    &:focus:not(.disabled) .q-toggle__thumb:before
-      transform: scale3d(2, 2, 2)
-
-    &--dense:focus:not(.disabled) .q-toggle__thumb:before
-      transform: scale3d(1.5, 1.5, 1.5)
+    &:focus:not(.disabled),
+    &:hover:not(.disabled),
+      .q-toggle__thumb:before
+        transform: scale3d(2, 2, 2)
+
+    &--dense:focus:not(.disabled),
+    &--dense:hover:not(.disabled),
+      .q-toggle__thumb:before
+        transform: scale3d(1.5, 1.5, 1.5)
 

ui/src/components/toggle/QToggle.styl

@@ -98,9 +98,13 @@ body.desktop
       transform: scale3d(0, 0, 0)
       transition: transform $option-focus-transition
 
-    &:focus:not(.disabled) .q-toggle__thumb:before
-      transform: scale3d(2, 2, 2)
-
-    &--dense:focus:not(.disabled) .q-toggle__thumb:before
-      transform: scale3d(1.5, 1.5, 1.5)
+    &:focus:not(.disabled),
+    &:hover:not(.disabled),
+      .q-toggle__thumb:before
+        transform: scale3d(2, 2, 2)
+
+    &--dense:focus:not(.disabled),
+    &--dense:hover:not(.disabled),
+      .q-toggle__thumb:before
+        transform: scale3d(1.5, 1.5, 1.5)