Fix IE11 icon alignment on header and system overview
Made height and width changes to icons on app header
and system overview to properly align icons in IE11.
Removes additional space in system overview quick
links.
Tested in Chrome, IE11, Safari, Edge.
Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I7ae24df3fe73ea3502565ed3ee2ccabb2506e098
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index e6f49a3..0cdd588 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -17,7 +17,9 @@
text-decoration: none;
}
- p {
+ p,
+ dl,
+ dd {
margin-bottom: 0;
}
@@ -31,6 +33,10 @@
border-bottom: 1px solid $border-color-01;
position: relative;
+ .icon {
+ height: 1.5rem;
+ }
+
&.no-icon {
overflow: auto;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 5a7a9d1..c034c82 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -146,7 +146,7 @@
opacity: 1;
.icon svg {
- width: 1rem;
+ height: 1rem;
}
.status-icon {
@@ -173,10 +173,8 @@
.icon {
@include fastTransition-all;
- margin: 0.2em 0 0 0;
-
svg {
- width: 2.6rem;
+ width: 1.25rem;
height: auto;
}
}
@@ -214,8 +212,7 @@
margin-right: auto;
svg {
- width: 1.6rem;
- height: auto;
+ height: 1.5rem;
fill: $primary-accent;
}
}
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index 9ef38ff..b60d510 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -119,7 +119,7 @@
</span>
</div>
</div>
- <a href="#/server-control/remote-console" class="no-icon quick-links__item">
+ <a href="#/server-control/remote-console" class="quick-links__item">
<span class="inline quick-links__label">Serial over LAN console</span>
<icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
</a>