src/containers/styles/ProjectRspecReports.css
.projectReportsContainer {
height: 100%;
margin-top: 22px;
display: grid;
grid-gap: 0.5em;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 70px 20px auto auto;
margin-bottom: 4rem;
}
.projectReportsHeader {
white-space: nowrap;
grid-column: 1 / 7;
}
.projectReportsName {
font-size: 52px;
}
.projectReportsSearch {
grid-column: 7 / -1;
margin-top: auto;
margin-bottom: .8rem;
}
.projectReportsTotal {
grid-column: 1 / 7;
font-style: italic;
margin-left: .5em;
}
.projectReportsChart {
grid-column: 1 / 8;
padding-bottom: 0;
margin-top: auto;
}
.projectReportsSuccessChart {
grid-column: 8 / -1;
padding: 1.5rem;
height: 100%;
}
.projectReportsList {
grid-column: 1 / -1;
height: 100%;
position: relative;
}
.projectReportsListButtons {
grid-column: 1 / -1;
display: inline-block;
}
.projectReportsListButtons > .filters {
margin-right: 1.5rem;
display: inline-block;
}
.projectReportsPagination {
float: left;
display: inline-block;
}
#chart-pills {
float: right;
margin: 0;
cursor: pointer;
}
.chart > div {
height: 80%;
}
#chart-pills {
cursor: pointer;
float: right;
margin: 0;
}
@media only screen and (max-width: 767px) {
.projectReportsContainer {
display: grid;
grid-template-rows: auto 20px auto auto;
grid-template-areas:
"h"
"t"
"s"
"c"
"p"
"l"
"d";
grid-template-columns: auto;
grid-gap: 0;
}
.projectReportsHeader {
white-space: pre-wrap;
grid-area: h;
}
.projectReportsTotal {
grid-area: t;
}
.projectReportsSuccessChart {
grid-area: s;
}
.projectReportsChart {
grid-area: c;
}
.projectReportsSearch {
grid-area: p;
margin-top: .8rem;
margin-bottom: 0;
}
.projectReportsList {
grid-area: l;
}
.detailsButtons {
grid-area: d;
margin: unset;
grid-column: unset;
display: grid;
grid-template-rows: auto;
grid-gap: 1.5rem;
}
.projectReportsListButtons > .filters {
display: flex;
}
#chart-pills {
width: 84%;
margin: auto;
display: inline-flex;
}
#chart-pills > li {
text-align: center;
flex-grow: 1;
}
}