fleet/frontend/components/ActionsDropdown/_styles.scss

32 lines
782 B
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// All other styling in customStyles part of react-select-5
.actions-dropdown-select__control {
&:focus-visible {
background-color: $ui-fleet-black-75;
}
}
.actions-dropdown__wrapper {
display: flex;
align-items: center;
button .children-wrapper {
gap: $pad-xsmall;
.actions-dropdown__icon svg {
transition: transform 0.25s ease;
transform: rotate(0deg);
}
.actions-dropdown__icon--open svg {
transform: rotate(180deg);
}
}
}
// react-select does not actually move the browsers focus
// (which governs :focus-visible) between each option
// Remove blue default outline that only attaches to first option
// and rely on grey :focus for keyboard accessibility
.actions-dropdown__option:focus-visible {
outline: none;
}