diff --git a/changes/17208-hover-states b/changes/17208-hover-states new file mode 100644 index 0000000000..5ae0c7f17a --- /dev/null +++ b/changes/17208-hover-states @@ -0,0 +1 @@ +Fleet UI: Add hover states to clickable elements diff --git a/frontend/components/forms/fields/Checkbox/_styles.scss b/frontend/components/forms/fields/Checkbox/_styles.scss index 1bd81b1e2a..3aa8725df1 100644 --- a/frontend/components/forms/fields/Checkbox/_styles.scss +++ b/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; diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss index d955d357f2..5523158b09 100644 --- a/frontend/components/forms/fields/Dropdown/_styles.scss +++ b/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; diff --git a/frontend/pages/DashboardPage/cards/MDM/MDM.tsx b/frontend/pages/DashboardPage/cards/MDM/MDM.tsx index e102869a4d..2e79bd8749 100644 --- a/frontend/pages/DashboardPage/cards/MDM/MDM.tsx +++ b/frontend/pages/DashboardPage/cards/MDM/MDM.tsx @@ -166,6 +166,7 @@ const Mdm = ({ isAllPagesSelected={false} disableCount disablePagination + disableMultiRowSelect onClickRow={handleSolutionRowClick} /> )} diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss index 0c1ed6fac5..72ab4f59e9 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss +++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss @@ -26,6 +26,10 @@ border-radius: $border-radius; height: 40px; + :hover { + cursor: pointer; + } + &--is-focused, &--menu-is-open, &:hover {