fleet/frontend/components/TeamsDropdown/_styles.scss
Jacob Shandling fd1b1c50b5
14415 - Loose ends 2 (#15595)
## Addresses #15011 

- Sort host details > queries list by query name
- Update shape of expected response from HQR call to schedulable query
API
- Shorten the 'clipped' banner's message for Observers and Observers+
- Update tooltips in RevealButton

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-12-12 11:32:16 -08:00

113 lines
2.2 KiB
SCSS

.component__team-dropdown-wrapper {
&.disabled {
cursor: auto;
opacity: 0.75;
}
.__react_component_tooltip {
width: 260px;
text-align: left;
line-height: 19px;
font-size: 14px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
border-radius: $border-radius;
font-feature-settings: "ss02" on, "salt" on, "ss01" on;
color: $ui-fleet-black-75;
padding: $pad-medium;
a {
font-size: inherit;
font-weight: normal;
color: $core-vibrant-blue;
}
}
}
.component__team-dropdown {
border: 0 !important;
position: relative;
:hover {
cursor: pointer !important;
}
&.is-focused {
.Select-control {
border: 0 !important;
height: 32px;
}
}
.Select-menu {
padding-right: $pad-small; // moves scrollbar to edge of dropdown
max-height: 66vh;
}
.Select-menu-outer {
position: absolute;
width: 330px;
min-width: 125px;
max-height: none;
right: 12px;
top: 36px;
border-radius: 6px;
padding-right: 0;
margin: 0;
z-index: 999; // in front of tooltip wrapper
}
.Select-control {
background-color: transparent;
border: 0 !important;
border-radius: none;
position: none;
width: max-content; // move select arrow
height: 32px;
&:hover {
box-shadow: none;
}
&:hover .Select-value-label {
color: $core-vibrant-blue !important;
}
.Select-arrow-zone {
padding-left: 15px;
}
.Select-multi-value-wrapper {
width: max-content; // move select arrow
height: 32px;
.Select-input {
display: none !important;
}
.Select-value {
position: relative; // move select arrow
display: inline-block; // move select arrow
line-height: 32px;
padding: 0;
border: 0 !important;
background-color: transparent !important;
right: 0;
left: 0;
bottom: 0;
top: 0;
&.is-focused {
border: 0 !important;
}
:hover {
border: 0 !important;
}
.Select-value-label {
font-size: $large !important;
line-height: 32px;
}
}
}
}
}