@mixin state-label { text-transform: uppercase; font-weight: 700; font-size: .8em; } $title-minWidth: 210px; .header__actions-bar { padding-left: 1.5em; padding-right: 1em; font-weight: 700; .sensor__title { margin-left: 1.5em; } .sensor__reading { margin-right: .2em; } .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: 28%; 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-bottom: 20px; } .column, .columns { padding-left: 0px; padding-right: 0px; } } //end sensor details