diff options
author | Michael Davis <michael.s.davis@ibm.com> | 2017-04-06 14:35:56 -0500 |
---|---|---|
committer | Patrick Williams <patrick@stwcx.xyz> | 2017-09-20 12:41:34 -0500 |
commit | aeedf9e590806f62dcebdccc4ebd51a38d4c67fc (patch) | |
tree | 0ce3d9276edba372995f001182011fad4003040b /app/common/styles/elements | |
parent | 6af1346da8c0842c2c464eab68793c7bf99b9275 (diff) | |
download | phosphor-webui-aeedf9e590806f62dcebdccc4ebd51a38d4c67fc.tar.gz phosphor-webui-aeedf9e590806f62dcebdccc4ebd51a38d4c67fc.zip |
added sensor templates
Change-Id: I805828ce3cb80dbceb1dbba5d0e39fb31fbd6baf
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
Diffstat (limited to 'app/common/styles/elements')
-rw-r--r-- | app/common/styles/elements/accordion.scss | 12 | ||||
-rw-r--r-- | app/common/styles/elements/export.scss | 26 | ||||
-rw-r--r-- | app/common/styles/elements/index.scss | 5 | ||||
-rw-r--r-- | app/common/styles/elements/tags.scss | 72 | ||||
-rw-r--r-- | app/common/styles/elements/thresholds.scss | 84 | ||||
-rw-r--r-- | app/common/styles/elements/toggle-filter.scss | 31 |
6 files changed, 225 insertions, 5 deletions
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss index 75d3c5e..ba6d2fd 100644 --- a/app/common/styles/elements/accordion.scss +++ b/app/common/styles/elements/accordion.scss @@ -4,7 +4,8 @@ #header__actions-bar { padding-top: 1em; padding-right: 1em; - background: $medgrey; + background: $darkpurple; + color: $white; margin-left: 0; .event__actions { @@ -46,13 +47,16 @@ position: relative; border-top: 1px solid $lightgrey; padding: 1em 1em 1em 0em; - background: $lightblue; + background: $white; overflow: hidden; &.active, &.selected { - background: $white; + background: $lightblue; } &:hover { - background: $white; + background: $lightblue; + } + &:last-child { + border-bottom: 1px solid $lightgrey; } }
\ No newline at end of file diff --git a/app/common/styles/elements/export.scss b/app/common/styles/elements/export.scss new file mode 100644 index 0000000..45b910a --- /dev/null +++ b/app/common/styles/elements/export.scss @@ -0,0 +1,26 @@ +//Export button +.btn-export { + text-transform: capitalize; + color: $black; + font-size: .9em; + font-weight: 700; + position: relative; + padding: 0 0 1em 2em; + margin-right: .6em; + &:hover { + text-decoration: underline; + } +} +.btn-export { + margin-top: 7px; +} +.btn-export:before { + content: '\21E5'; + position: absolute; + font-size: 1.7em; + vertical-align: middle; + transform: rotate(90deg); + display: inline-block; + left: 2px; + top: -5px; +}
\ No newline at end of file diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss index 11c4968..909236d 100644 --- a/app/common/styles/elements/index.scss +++ b/app/common/styles/elements/index.scss @@ -1,9 +1,12 @@ @import "toggle-switch"; +@import "toggle-filter"; @import "status"; @import "alerts"; @import "tags"; @import "inline-confirm"; @import "accordion"; @import "content-search"; -@import "paginate";
\ No newline at end of file +@import "paginate"; +@import "export"; +@import "thresholds";
\ No newline at end of file diff --git a/app/common/styles/elements/tags.scss b/app/common/styles/elements/tags.scss index b2eab1d..cb483d6 100644 --- a/app/common/styles/elements/tags.scss +++ b/app/common/styles/elements/tags.scss @@ -60,4 +60,76 @@ } .event__low { background: lighten($lightbg__primary, 30%); +} + +// Priority tags +.priority-tag { + color: $white; + font-size: .8em; + text-transform: uppercase; + padding: 2px 2em; + font-weight: 700; + line-height: inherit; + min-width: 103px; + text-align: center; + + &.high-priority { + background: $error-color; + + } + &.med-priority { + background: $alert__warning; + + } + &.low-priority { + background: $lightbg__primary; + } + &.event-resolved { + background: $purple; + padding: 2px 1em; + } +} + +.priority-tag-circ { + //padding: 0; + //line-height: inherit; + width: 20px; + height: 20px; + border-radius: 50%; + background: rgba( $normal, .4); + position: relative; + border-width: 2px; + border-style: solid; + border-color: $normal; + &.high-priority { + color: $critical-lightbg; + background-color: rgba( $critical-lightbg, .4 ); + background-image: url(/assets/images/crit-x.svg); + border-color: $critical-lightbg; + &:before { + content: ''; + position: absolute; + top: -11px; + left: -3px; + font-weight: 600; + font-size: 1.5em; + -webkit-font-smoothing: antialiased; + text-shadow: 1px 1px 1px rgba(0,0,0,0.004); + } + } + &.medium-priority { + background: rgba($medium-lightbg, .5); + border-color: rgba($medium-lightbg, 1); + } + &.warn-priority { + background: rgba($warning-lightbg, .5); + border-color: $warning-lightbg; + } + &.normal-priority { + background: rgba( $normal, .4); + } + &.event-resolved { + background: $purple; + padding: 2px 1em; + } }
\ No newline at end of file diff --git a/app/common/styles/elements/thresholds.scss b/app/common/styles/elements/thresholds.scss new file mode 100644 index 0000000..e8192b3 --- /dev/null +++ b/app/common/styles/elements/thresholds.scss @@ -0,0 +1,84 @@ +// Thresholds graph + +$threshColorLighten: 5%; +.threshold-chart__wrapper { + position: relative; + padding-bottom: 2em; + .threshold__label { + position: absolute; + top: 25%; + transform: translateY(-50%); + font-weight: 700; + &.low { + margin-left: 0; + } + &.high { + right: 5px; + } + } + @include mediaQuery(large) { + max-width: 1000px; + } +} + +.threshold-chart { + position: relative; + line-height: 0; + padding: .8em 0 2em 3px; + margin: 0 2.5em; + //margin: 0 auto; + .threshold__marker { + position: absolute; + top: 13px; + bottom: -15px; + width: 4px; + background-color: $black; + @include slowTransition-all; + .threshold__value { + position: absolute; + bottom: 3px; + right: 5px; + margin: 0; + color: $black; + padding: 3px 6px; + font-weight: 400; + font-size: 1em; + white-space: nowrap; + } + } + .threshold__marker { + &.thresh__low-critical .threshold__value { + left: 0; + @include slowTransition-all; + } + } + .threshold { + display: inline-block; + background-color: $thresh-normal; + min-width: 10%; + min-height: 25px; + margin: 0 -3px; + &.thresh__normal { + min-width: 60%; + } + } + + .threshold__marker, + .threshold { + &.thresh__low-critical { + background-color: $thresh-critical; + } + &.thresh__low-warn { + background-color: $thresh-warning; + } + &.thresh__high-warn { + background-color: $thresh-warning; + } + &.thresh__high-critical { + background-color: $thresh-critical; + } + &.thresh__normal { + background-color: $thresh-normal; + } + } +} diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss new file mode 100644 index 0000000..4eae9e8 --- /dev/null +++ b/app/common/styles/elements/toggle-filter.scss @@ -0,0 +1,31 @@ +// toggle buttons for filtering +.toggle-filter { + .filter-label { + color: darken($lightgrey, 10%); + text-transform: uppercase; + font-weight: 700; + font-size: .75em; + margin-bottom: 3px; + } + margin-right: 2em; + margin-bottom: 1em; + button { + margin: 3px -3px; + padding: .6em 2em; + min-height: 2.1em; + font-size: .9em; + font-weight: 700; + border-radius: 0; + &.first, + &.last { + border-radius: 3px; + } + &.last { + border-left: 0; + } + } + .btn-primary { + border: 2px solid $primebtn__bg; + } + +}
\ No newline at end of file |