diff options
author | Michael Davis <michael.s.davis@ibm.com> | 2017-07-27 15:05:08 -0500 |
---|---|---|
committer | Adriana Kobylak <anoo@us.ibm.com> | 2017-10-09 13:23:19 -0500 |
commit | 1d5de5dbe48f568272207f471d2968215e7ce910 (patch) | |
tree | 2f11d77e05b20087e2d96f20d7dfc7abf65d96bc /app | |
parent | 5104adefda7c1489ec43018b9927478c8e8b42d5 (diff) | |
download | phosphor-webui-1d5de5dbe48f568272207f471d2968215e7ce910.tar.gz phosphor-webui-1d5de5dbe48f568272207f471d2968215e7ce910.zip |
changes to status icons based on design changes.
Change-Id: Idc1607033c277eb9a9a278614cc23b4c3d600dd3
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
Diffstat (limited to 'app')
-rw-r--r-- | app/common/styles/elements/status.scss | 46 |
1 files changed, 26 insertions, 20 deletions
diff --git a/app/common/styles/elements/status.scss b/app/common/styles/elements/status.scss index 7d9b57a..66ff7aa 100644 --- a/app/common/styles/elements/status.scss +++ b/app/common/styles/elements/status.scss @@ -1,61 +1,67 @@ //status light states -@mixin status-light { - content: '\25CF'; +@mixin status-light-before { + content: ''; display: inline-block; - font-size: 2em; - color: $status-ok; - margin-right: .1em; - transform: translateY(2px); + margin-right: -12%; + transform: translateY(-2px); @include slowTransition-all; + left: 0; + top: 0; + width: 20px; + height: 20px; + position: absolute; } +@mixin status-light-header { + padding-left: 1.6em; + margin-top: .7em; + position: relative; +} @mixin status-light__good { - @include status-light; - color: $status-ok; - + @include status-light-before; } @mixin status-light__error { - @include status-light; - color: $error-color; - + @include status-light-before; } @mixin status-light__disabled { - @include status-light; - color: $darkgrey; - + @include status-light-before; } @mixin status-light__warn { - @include status-light; - color: $status-warn; + @include status-light-before; } .status-light__disabled { - color: $darkgrey; + @include status-light-header; &::before { @include status-light__disabled; } } .status-light__good { + @include status-light-header; &::before { @include status-light__good; + @extend .icon__good; } } .status-light__error { - color: $error-color; + @include status-light-header; &::before { @include status-light__error; + @extend .icon__critical; } + } .status-light__warn { - color: $status-warn; + @include status-light-header; &::before { @include status-light__warn; + @extend .icon__warning; } }
\ No newline at end of file |