fleet/frontend/components/StatusIndicator/_styles.scss
Jacob Shandling 15965a0bfd
UI – Replace ReactTooltip with TooltipWrapper in 2 places (#19743)
Addresses #19300 


- [x] Changes file added for user-visible changes in `changes/`, 
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-06-17 10:47:24 -07:00

61 lines
1,005 B
SCSS

.status-indicator {
display: flex;
align-items: center;
color: $core-fleet-blue;
::first-letter {
text-transform: capitalize;
}
&:before {
border-radius: 100%;
content: " ";
display: inline-block;
margin-right: $pad-small;
height: 8px;
min-width: 8px;
}
// host status
&--online:before,
&--enabled:before,
&--on:before {
background-color: $ui-success;
}
&--offline:before,
&--disabled:before,
&--off:before {
background-color: $ui-offline;
}
&--online,
&--offline {
.status-tooltip {
display: block;
white-space: normal;
max-width: 308px;
text-transform: none;
}
}
// user status
&--active {
&:before {
background-color: $ui-success;
}
}
&--no-access {
&:before {
background-color: $ui-offline;
}
}
&--invite-pending {
&:before {
background-color: $ui-warning;
}
}
.component__tooltip-wrapper__tip-text {
text-align: center;
}
}