Fix layout for responsive design: Header
Get rid of "BMC host/IP address" & "server info" text, make the
buttons tighter and make more buttons visible in header so that
the information is more useful to users in tablet view.
Change-Id: I6b4166390b1828fca265e7bb56f51106b4e6f21b
Signed-off-by: Ryan Arnell <iffy.ryan@ibm.com>
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index a18d8ac..bb326fd 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -97,7 +97,7 @@
.header__functions {
position: absolute;
top: 0;
- right: -680px;
+ right: -480px;
bottom: 0;
z-index: 100;
margin: .3em 0;
@@ -119,7 +119,7 @@
float: left;
text-decoration: none;
color: $darkgrey;
- padding: 1.250em 1.688em;
+ padding: 1.250em;
height: 100%;
font-size: 0.875em;
font-weight: 400;
@@ -171,9 +171,9 @@
.header__functions {
.header__info {
padding: .3em;
- min-width: 60px;
+ min-width: 40px;
text-align: center;
- display: inline-block;
+ float: left;
span {
padding: .7em 0 .3em;
font-size: 1em;
@@ -181,10 +181,11 @@
color: $darkgrey;
}
.icon-angle {
- margin-bottom: .9em;
+ margin: 0.2em 0 0 0;
}
.icon-angle::before {
- font-size: 2em;
+ font-size: 1.625em;
+ font-weight: 400;
margin-left: 0;
display: block;
transform: rotate(180deg);
@@ -210,7 +211,7 @@
}
}
.header__page-refresh {
- padding-top: 0;
+ padding: 0 0.5rem 0.6rem;
position: relative;
span {
font-size: 0.875em;