fleet/frontend/components/List/_styles.scss

73 lines
1.4 KiB
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.

.list {
display: flex;
flex-direction: column;
gap: $pad-xsmall; // For help text
font-size: $x-small;
&__header {
padding: $pad-medium $pad-large;
border-bottom: 1px solid $ui-fleet-black-10;
background-color: $ui-off-white;
min-height: 24px; // Include padding: 40px;
}
.loading-overlay {
display: flex;
flex-grow: 1;
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index: 1;
.loading-spinner {
position: sticky;
top: 0;
left: 0;
}
}
&__list {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 4px;
border: 1px solid $ui-fleet-black-10;
padding-left: 0; // negate ul padding
margin: 0;
}
&__row {
display: flex;
max-width: 100%;
padding: 8px 12px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 1px solid $ui-fleet-black-10;
gap: 20px;
// Generic hover (no pointer) safe for tooltips
&:hover {
background: $ui-off-white;
}
// Only clickable rows show pointer + extra hover affordances
&.list__row--clickable:hover {
cursor: pointer;
label {
cursor: pointer;
}
}
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
border-bottom: none;
}
}
}