Fleet UI: Clickable elements include cursor hover state (#17688)
This commit is contained in:
@@ -0,0 +1 @@
|
||||
Fleet UI: Add hover states to clickable elements
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -166,6 +166,7 @@ const Mdm = ({
|
||||
isAllPagesSelected={false}
|
||||
disableCount
|
||||
disablePagination
|
||||
disableMultiRowSelect
|
||||
onClickRow={handleSolutionRowClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -26,6 +26,10 @@
|
||||
border-radius: $border-radius;
|
||||
height: 40px;
|
||||
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--is-focused,
|
||||
&--menu-is-open,
|
||||
&:hover {
|
||||
|
||||
Reference in New Issue
Block a user