blob: a2246d7b47d5b03b3696018ac59c08141ea72821 [file] [log] [blame]
@mixin state-label {
text-transform: uppercase;
font-weight: 700;
font-size: .8em;
}
$title-minWidth: 210px;
.header__actions-bar {
padding-left: 1.5em;
font-weight: 700;
.sensor__reading {
margin-right: .3em;
}
.sensor__heading-current {
padding-right: 1em;
}
}
.sensor__heading-current {
margin: 0;
@include mediaQuery(medium) {
margin-left: 10px;
margin-right: 10px;
}
}
.sensor__label {
float: left;
font-weight: 300;
@include mediaQuery(medium) {
display: none;
}
}
.sensor__title {
min-width: 30%;
margin-bottom: 0;
}
.sensor__reading {
width: 100%;
text-align: right;
margin-bottom: 0;
display: none;
@include mediaQuery(medium) {
display: inline-block;
width: auto;
min-width: calc(70% * (1 / 5) - 18px);
}
}
.sensor__readings-row {
width: 100%;
position: relative;
display: block;
margin: 0;
background: $white;
text-decoration: none;
border: 1px solid $medgrey;
background: lighten($lightgrey,1%);
margin-top: 1em;
@include mediaQuery(medium) {
padding: .3em 1em .3em 1.5em;
margin-top: 0;
border-top: 0;
background: transparent;
}
.sensor__title {
font-weight: 700;
background: darken($lightgrey, 5%);
min-width: 100%;
padding: .8em;
@include mediaQuery(medium) {
min-width: 30%;
background: transparent;
padding: .5em .5em .5em 0;
}
.icon__normal {
width: 0;
}
}
.content-label {
font-size: 1em;
margin-left: .8em;
color: $darkgrey;
}
.sensor__reading {
@include fontCourierBold;
display: block;
padding: .3em .8em;
@include mediaQuery(medium) {
display: inline-block;
padding: 0;
}
}
.sensor__current {
background: darken($thresh-normal, 3%);
margin: 0;
@include mediaQuery(medium) {
background: $thresh-normal;
padding: .7em .3em;
margin-left: 10px;
min-width: 109px;
}
@include mediaQuery(large) {
background: $thresh-normal;
padding: .7em;
margin-left: .3em;
margin-right: .3em;
min-width: 150px;
}
.sensor__label {
font-weight: 700;
@include mediaQuery(medium) {
font-weight:300;
}
}
}
.sensor__critical {
background: $thresh-critical;
color: $white;
.content-label {
color: $white;
}
}
.sensor__warn {
background: $thresh-warning;
color: $black;
.content-label {
color: $black;
}
}
}
// Sensors
#sensors, #sensors-overview {
.toggle-filter {
margin-right: 0;
}
}
//end sensor details