app/assets/stylesheets/dashboards.scss
.dashboard-title {
div.dashboard-school-title {
h1 {
padding-top: 10px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.dashboard-school-address {
color: $darker-grey !important;
font-size: 80%;
.badge {
font-size: inherit;
}
small {
font-size: inherit;
}
}
}
}
div.dashboards {
div.analysis-chart {
height: 400px;
padding-bottom: 40px;
padding-top: 20px;
}
}
div#management-energy-overview-tabs {
div.analysis-chart{
padding-top: 20px;
}
}
@media (max-width: 1024px) {
div.dashboards {
div.analysis-chart, div.simulator-chart {
height: 300px;
padding-bottom: 20px;
padding-top: 20px;
}
}
}
.timeline-border-left {
border-left: 3px solid $dark;
}
.table.timeline {
td {
border-top: 0;
}
th {
border-bottom: 0;
border-top: 0;
}
}
.info-bar {
border-radius: 0.75rem;
padding: 1.1rem 1.25rem;
}
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
.info-bar {
margin: 0.25rem 0.25rem;
}
.info-bar i {
font-size: $f4;
}
}
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
.info-bar i {
font-size: $f3;
}
}
// Medium devices (tablets, 768px and up) // max-width: 991.98px
// @media (min-width: 768px) and (max-width: 991.98px) {
// }
@media (min-width: 992px) and (max-width: 1199.98px) {
.info-bar div .btn {
height: 40px;
width: 200px;
line-height: 1.4;
font-size: $f6;
}
}
// Large devices (desktops, 992px and up)
// @media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
.info-bar div .btn {
height: 60px;
width: 260px;
line-height: 2.3;
font-size: $f5;
}
}
.info-bar div .btn {
border-width: 2px;
}
.info-bar.bg-neutral div .btn {
border-color: $bg-neutral;
}
.info-bar.bg-positive div .btn {
border-color: $bg-positive;
}
.info-bar.bg-negative div .btn {
border-color: $bg-negative;
}
div.management-energy-saving-actions {
background-color: $light-grey;
}
table.management-priorities {
border-collapse: separate;
border-spacing: 0px 15px;
tbody {
td {
border-top: 1px $grey solid;
border-bottom: 1px $grey solid;
padding: 30px;
}
td:first-child{
border-left: 1px $grey solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child{
border-right: 1px $grey solid;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
}
@media (min-width: 576px) and (max-width: 991.98px) {
td {
font-size: $f7;
.btn {
font-size: $f7;
width: 80px;
}
.trix-content div {
font-size: $f7;
}
}
th {
font-size: $f5;
}
.h2 {
font-size: $f5;
}
}
@media (min-width: 300px) and (max-width: 575.99px) {
td {
font-size: $f8;
.btn {
font-size: $f8;
width: 80px;
}
}
th {
font-size: $f8;
}
.h2 {
font-size: $f8;
}
}
@media (min-width: 1000px) {
td {
.btn {
width: 135px;
}
}
}
}
.management-overview {
thead{
background-color: $grey;
}
.fa-arrow-circle-down {
color: $green;
}
.fa-arrow-circle-up {
color: $new-red;
}
.icon {
width: 10px;
}
}
.management-overview-caption {
margin-bottom: 40px;
}
.old-data {
background: $white;
color: $bg-negative;
sup {
color: $black;
}
}
.chart-placeholder-image {
background-image: image-url('graph-placeholder.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 670px;
position: relative;
}
@media (max-width: 1199.98px) {
.chart-placeholder-image {
background-image: image-url('graph-placeholder-765.png');
height: 333px;
}
}
.chart-placeholder-text {
text-align: center;
position: absolute;
width: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: $grey;
color: $text;
border-radius: 0.75rem;
}