open-consul/ui-v2/app/styles/components/list-collection.scss
John Cowen c619223367
UI: Fixes healthy node listing resize on large portrait screens (#4564)
1. Split the resizing functionality of into a separate mixin to be
shared across components
2. Add basic integration tests to prove that everything is getting
called through out the lifetime of the app. I decided against unit
testing as there isn't really any isolated logic to be tested, more
checking that things are being called in the correct order etc i.e. the
integration is correct.

Adds assertion to with-resizing so its obvious to override `resize`
2018-08-24 12:35:52 +02:00

27 lines
474 B
SCSS

.list-collection {
height: 500px;
position: relative;
}
.unhealthy > div,
.healthy > div {
@extend %card-grid;
}
.healthy > div {
width: calc(100% + 23px);
}
.unhealthy > div {
margin-bottom: 20px;
}
%card-grid > ul,
%card-grid > ol {
list-style-type: none;
display: grid;
grid-gap: 20px 2%;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-auto-rows: 12px;
}
.healthy > div > ul > li {
padding-right: 23px;
padding-bottom: 20px;
}