Misc CSS fixes
* set max content width to 960px
* created mixin for bold font
* move app-header content to global header
* minor global changes
* changed input alignment for network config inputs
* added pop-out button class
* changed lightgrey color
* fixed accordion header actions responsiveness
* fixed input box border colors
Change-Id: Iffe26d526439d7f2bb6808528a975ab7374ff1b2
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/directives/app-header.scss b/app/common/styles/directives/app-header.scss
index 9b7dff5..e69de29 100644
--- a/app/common/styles/directives/app-header.scss
+++ b/app/common/styles/directives/app-header.scss
@@ -1,163 +0,0 @@
-$logoHeight: 30px;
-$logoMaxHeight: 100px;
-$logoMaxWidth: 125px;
-
-#header__wrapper {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 100;
-}
-
-.app__version {
- margin-left: 1em;
- display: none;
- @include mediaQuery(x-small) {
- display: inline-block;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- }
-}
-
-header {
- position: relative;
- background: #000;
- color: $white;
- overflow: hidden;
-}
-
-.header__logout {
- float: right;
- display: inline-block;
- color: $white;
- font-size: .9em;
- text-decoration: none;
- padding: 1em;
- &:visited {
- color: $white;
- }
-}
-
-.header__functions-wrapper {
- color: $white;
- background: $darkbg__primary;
- padding: 0 1.1em;
- box-sizing: border-box;
- display: block;
- position: relative;
- overflow: hidden;
- min-height: 5em;
- #header__server-name {
- //margin-top: .8em;
- font-size: 1.5em;
- font-weight: 500;
- color: $white;
- padding: .9em;
- height: 100%;
- background: transparent;
- max-width: 350px;
- white-space: nowrap;
- }
- .logo__wrapper {
- padding-top: .5em;
- //position: absolute;
- //top: 50%;
- //transform: translateY(-50%);
- }
-
- #header__logo {
- vertical-align: middle;
- margin: 1em;
- float: left;
- height: $logoHeight; //required for <SVG> logos - can remove if using img
- max-height: $logoMaxHeight;
- max-width: $logoMaxWidth;
- width: auto;
- }
- #header__funct-icon {
- display: block;
- font-size: 2.3em;
- color: $white;
- padding: 0;
- &:before {
- content: '\2261';
- line-height: .5;
- font-size: 2em;
- padding: 0 .3em;
- }
- @include mediaQuery(medium) {
- display: none;
- }
- }
-
- .header__functions {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- background: $darkbg__primary;
- z-index: 100;
- @include fastTransition-all;
- span {
- display: block;
- color: $white;
- font-size: 1em;
- }
- a, p, button {
- display: block;
- float: left;
- text-decoration: none;
- border-left: 1px solid #384456;
- color: $lightgrey;
- margin: 0;
- padding: 1.250em 1.688em;
- height: 100%;
- font-size: 0.875em;
- line-height: 1;
- > span {
- font-size: 1rem;
- font-weight: bold;
- }
- }
- }
-
- // hide/show header functions based on screen size
- .header__functions > #header__server-health {
- display: none;
- @include mediaQuery(small) {
- display: block;
- }
- }
-
- .header__functions > .header__refresh {
- display: none;
- @include mediaQuery(medium) {
- display: block;
- }
- }
-
- .header__functions {
- .header__refresh {
- color: $lightgrey;
- line-height: 1.8;
- margin-top: -4px;
- }
- }
- .header__server-power,
- .header__page-refresh {
- &:hover {
- background: rgba(60, 109, 240, .4);
- }
- }
- .header__page-refresh {
- img {
- stroke: $white;
- height: 22px;
- width: 24px;
- }
- }
-}
-
-// end header__functions-wrapper
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 4591f5c..496fbf7 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -17,6 +17,10 @@
li {
margin: 0;
}
+ //svg icons
+ .nav-icon {
+ @include navIcons;
+ }
.button, button, a {
background: transparent;
height: auto;
@@ -31,12 +35,8 @@
white-space: normal;
border-radius: 0;
text-decoration: none;
- .nav__icon {
- color: $white;
- max-height: 40px;
- stroke-width: .5;
- margin-bottom: -.5em;
- }
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
a {
margin-bottom: 5px;
}
@@ -44,7 +44,7 @@
margin: 1em 0 0 0;
display: block;
font-size: .9em;
- font-weight: normal;
+ font-weight: 700;
line-height: 1rem;
}
@@ -60,24 +60,50 @@
&:hover {
background: $nav__second-level-color;
fill: $black;
- color: $black;
+ color: $medblue;
padding: 1em;
border-radius: 0;
+ border-top: 1px solid $medgrey;
+ border-bottom: 1px solid $medgrey;
.nav__icon-help__outer {
stroke: $black;
}
.nav__icon-help__inner {
fill: $lightbg__primary;
}
+ .nav-icon {
+ fill: $medblue;
+ color: $medblue;
+ .st0 {
+ stroke: $medblue;
+ }
+ .st1 {
+ fill: $medblue;
+ color: $medblue;
+ stroke: $medblue;
+ }
+ }
}
}
.opened {
background: $nav__second-level-color;
fill: $black;
- color: $black;
+ color: $medblue;
.nav__icon-help__outer {
stroke: $lightbg__primary;
}
+ .nav-icon {
+ fill: $medblue;
+ color: $medblue;
+ .st0 {
+ stroke: $medblue;
+ }
+ .st1 {
+ fill: $medblue;
+ color: $medblue;
+ stroke: $medblue;
+ }
+ }
}
}