Fleet UI: Clickable elements include cursor hover state (#17688)

frontend/components/forms/fields/Checkbox/_styles.scss

@@ -22,6 +22,13 @@
         border: solid 2px $core-vibrant-blue;
       }
 
+      &:hover {
+        &::after {
+          background-color: $core-vibrant-blue-over;
+          border: solid 2px $core-vibrant-blue-over;
+        }
+      }
+
       &::before {
         @include position(absolute, 50% null null 50%);
         transform: rotate(45deg);
@@ -42,6 +49,7 @@
     @include size(20px);
     @include position(absolute, 0 null null 0);
     display: inline-block;
+    cursor: pointer;
 
     &::after {
       @include size(20px);
@@ -54,11 +62,17 @@
       background-color: $core-white;
       visibility: visible;
     }
+    &:hover {
+      &::after {
+        border: solid 2px $core-vibrant-blue-over;
+      }
+    }
 
     &--disabled {
       &::after {
         background-color: $ui-fleet-black-25;
       }
+      cursor: default;
     }
 
     &--indeterminate {
@@ -67,6 +81,15 @@
         border: solid 1px $core-vibrant-blue;
       }
 
+      &:hover {
+        &::after {
+          &::after {
+            background-color: $core-vibrant-blue-over;
+            border: solid 1px $core-vibrant-blue-over;
+          }
+        }
+      }
+
       &::before {
         @include position(absolute, 50% null null 50%);
         box-sizing: border-box;

frontend/components/forms/fields/Dropdown/_styles.scss

@@ -75,6 +75,8 @@
     background-color: $ui-light-grey;
     border: 0;
     border-radius: $border-radius;
+    cursor: pointer;
+
     .Select-value {
       font-size: $small;
       background-color: $ui-light-grey;