fleet/frontend/components/StatusIndicator/_styles.scss
Jacob Shandling 53f57c44db
UI - Queries page updates, pt.1 (#12784)
## Addresses #12636 – follow-up work for PR #12713

- Update Platforms column to render the user-selected platforms for a
query if any, otherwise those that are compatible
<img width="686" alt="Screenshot 2023-07-14 at 6 03 06 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/abd1f079-bdfe-45be-b1dd-58eb903672ef">

  - Clean up typing and names around this column 
- Encapsulate logic for query automations column cells into new
QueryAutomationsStatusIndicator component
  - Increase modularity and decrease coupling of StatusIndicator
- Cleanly handle overflowing queries table due to very long query name
<img width="512" alt="Screenshot 2023-07-14 at 6 07 20 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/6e970038-0aac-4f71-b21d-ececfa66b94f">

- Small copy and layout fixes

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

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-07-17 14:09:12 -07:00

55 lines
928 B
SCSS

.status-indicator {
display: flex;
align-items: center;
color: $core-fleet-blue;
text-transform: capitalize;
&:before {
border-radius: 100%;
content: " ";
display: inline-block;
margin-right: $pad-small;
height: 8px;
width: 8px;
margin-bottom: 1px;
}
// 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;
}
}
}