fleet/frontend/components/LiveQuery/TargetsInput/_styles.scss
jacobshandling e5806b8fea
UI: Improve styling of loading spinner in targets input (#20144)
## Addresses #20143 
<img width="1119" alt="Screenshot 2024-07-01 at 5 27 35 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9ac2313a-e7bf-403b-acd0-05680d84cdec">
 

- [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-07-02 09:32:35 -07:00

107 lines
2.1 KiB
SCSS

.targets-input {
position: relative;
&__hosts-search-dropdown {
width: 100%;
position: absolute;
top: 70px;
left: 0;
z-index: 1;
background-color: $core-white;
border-radius: 0px 0px 8px 8px;
.table-container {
box-shadow: 0px 4px 10px rgba(52, 59, 96, 0.15);
border-radius: 0px 0px 8px 8px;
.data-table__wrapper {
overflow: auto;
}
&__data-table-block > div {
min-height: 89px;
}
// Properly vertically aligns host issue icon
.display_name__cell {
display: inline-flex;
align-items: center;
white-space: nowrap;
.host-issue {
margin-left: $pad-xsmall;
display: inline-flex;
}
}
.data-table-block {
display: initial;
}
}
.empty-search,
.error-search {
padding-top: 72px;
padding-bottom: 72px;
min-height: 225px;
display: flex;
justify-content: center;
box-shadow: 0px 4px 10px rgba(52, 59, 96, 0.15);
box-sizing: border-box;
&__inner {
h4 {
margin: 0;
margin-bottom: 16px;
font-size: $small;
}
p {
margin: 0;
font-size: $x-small;
}
}
}
}
// hack because it's creating unwanted space
.table-container {
background-color: $core-white;
&__header {
display: none;
}
.data-table {
&__wrapper {
margin: 0;
}
// Properly vertically aligns host issue icon
.display_name__cell {
display: inline-flex;
align-items: center;
white-space: nowrap;
.host-issue {
margin-left: $pad-xsmall;
display: inline-flex;
}
}
}
}
&__hosts-selected-table {
margin-top: 8px;
.data-table__wrapper {
width: 100%;
overflow: auto;
}
.delete__cell {
text-align: center;
}
}
// override the default styles for the spinner.
// TODO: set better default styles for the spinner
.loading-spinner.centered {
margin: 1rem auto;
}
}