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/base/buttons.scss b/app/common/styles/base/buttons.scss
index 9c5ba92..2f53391 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,10 +1,9 @@
button, .button, input[type="submit"], .submit {
- font-weight: bold;
font-size: 1em;
- @include fontFamily;
+ @include fontFamilyBold;
text-transform: none;
border-radius: 3px;
- padding: .8rem 3.5rem .5rem;
+ padding: .5rem 2rem .5rem;
height: auto;
border: 0;
overflow: hidden;
@@ -28,7 +27,7 @@
input[type="submit"] {
color: $primebtn__text;
background: $primebtn__bg;
- min-height: 50px;
+ min-height: 40px;
&:hover {
background: lighten($primebtn__bg, 8%);
@include fastTransition-all;
@@ -58,7 +57,7 @@
color: $secbtn__text;
background: transparent;
border: 2px solid $secbtn__border;
- min-height: 50px;
+ min-height: 40px;
&:hover {
background: $lightbg__accent;
cursor: pointer;
@@ -90,3 +89,34 @@
margin-top: -3px;
}
}
+
+.btn-pop-out {
+ position: relative;
+ padding: 0 0 1em 2em;
+ color: $black;
+ &:hover {
+ text-decoration: underline;
+ }
+ &:before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 3px;
+ width: 25px;
+ height: 20px;
+ display: inline-block;
+ border: 1px solid $black;
+ border-top: 4px solid $black;
+ }
+ &:after {
+ content: '\2794';
+ position: absolute;
+ transform: rotate(-45deg);
+ font-size: .9em;
+ font-weight: 700;
+ vertical-align: middle;
+ display: inline-block;
+ left: 11px;
+ top: 4px;
+ }
+}
\ No newline at end of file
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 76f65a9..a5a9d1b 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -3,11 +3,13 @@
$black: #333;
$darkgrey: #666;
$medgrey: #d7dbe0;
-$lightgrey: #ccc;
+$lightgrey: #f5f7fa;
$lightblue: #f0f2f5;
+$medblue: #3f71ec;
$purple: #5A3EC8;
$darkpurple: #20214f;
-$field__disabled: #d8d8d8;
+$field__disabled: #e6e6e6;
+$field__focus: #3C6DEF;
$btn__disabled-txt: #a6a5a6;
$btn__disabled-bg: #d8d8d8;
@@ -69,7 +71,7 @@
// Links
$links: #648FFF;
$links__hover: $lightbg__primary;
-$links__visited: $darkbg__primary;
+$links__visited: #8ea7ea;
$links__disabled: rgba(27, 40, 52, 0.70);
// Navigation
diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss
index 13ba9e6..3dc8fea 100644
--- a/app/common/styles/base/core.scss
+++ b/app/common/styles/base/core.scss
@@ -16,7 +16,7 @@
color: $links__visited;
}
&:hover {
- color: $links__hover;
+ text-decoration: underline;
}
:focus {
color: $links;
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index b49c5b2..1157fa5 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -19,7 +19,7 @@
input[type='text'],
textarea {
border-radius: 0px;
- border: 1px solid $lightgrey;
+ border: 1px solid $medgrey;
height: 3.1em;
margin: 0 0 1em 0;
background: $white;
@@ -27,17 +27,29 @@
transition: none !important;
&:focus {
border-color: $lightbg__accent;
- border-bottom: 5px solid $lightbg__primary;
+ box-shadow: 0 -5px $field__focus inset;
}
- &:disabled, .disabled {
+ &:disabled,
+ .disabled {
background: $field__disabled;
border: 1px solid $lightbg__grey;
}
&.input__error {
- border-color: $error-color;
+ box-shadow: 0 -5px $error-color inset;
+ color: $error-color;
+ &:focus {
+ box-shadow: 0 -5px $field__focus inset;
+ }
}
}
+input[readonly],
+input[readonly]:focus{
+ box-shadow: 0 0 0;
+ background: $field__disabled;
+ border: 1px solid $lightbg__grey;
+}
+
textarea { padding: .2em;
height: auto;}
input[type="submit"], .submit {
diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss
index 910be7a..9c31f8f 100644
--- a/app/common/styles/base/foundation.scss
+++ b/app/common/styles/base/foundation.scss
@@ -814,7 +814,7 @@
display: block !important; } }
.row {
- max-width: 90rem;
+ max-width: 60.38rem; //960px
margin-right: auto;
margin-left: auto; }
.row::before, .row::after {
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index acc8fd4..e29a4fc 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -30,11 +30,39 @@
font-weight: 200;
}
+@mixin fontFamilyBold {
+ font-family: Helvetica, Arial, Verdana, sans-serif;
+ font-weight: 700;
+}
+
@mixin fontCourierBold {
font-family: "Courier New", Helvetica, arial, sans-serif;
font-weight: 700;
}
+//Navigation icons
+@mixin navIcons {
+ color: $white;
+ fill: $white;
+ max-height: 40px;
+ stroke-width: .5;
+ display: block;
+ width: 40px;
+ margin: 0 auto .5em auto;
+ .st0 {
+ fill: none;
+ stroke: #fff;
+ stroke-width: 2;
+ stroke-miterlimit: 10;
+ }
+ .st1 {
+ fill: none;
+ stroke: #fff;
+ stroke-width: 4;
+ stroke-miterlimit: 10;
+ }
+}
+
//Transitions mixin
@mixin fastTransition-all {
transition: all .5s ease;
@@ -71,6 +99,10 @@
min-width: calc(100% * (1/2) - 5px);
}
+@mixin vertCenter {
+ top: 50%;
+ transform: translateY(-50%);
+}
@mixin indeterminate-bar {
background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index dfad5a4..a9b65b2 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -52,4 +52,5 @@
.courier-bold {
font-family: "Courier New", Helvetica, arial, sans-serif;
font-weight: 700;
-}
\ No newline at end of file
+ margin-bottom: 0;
+}
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 5982d0f..80449f5 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -53,19 +53,19 @@
}
.no-margin {
- margin: 0px !important;
+ margin: 0 !important;
}
.no-padding {
- padding:0px !important;
+ padding:0 !important;
}
.no-bottom-margin {
- margin-bottom: 0px !important;
+ margin-bottom: 0 !important;
}
.no-top-margin {
- margin-top: 0px !important;
+ margin-top: 0 !important;
}
.btm-border-grey {
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index e101385..0515926 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -3,7 +3,10 @@
position: relative;
padding: .5em .8em;
margin-top: -10px;
- border: 1px solid $lightgrey;
+ border: 1px solid $medgrey;
+ min-width: 70px;
+ padding-right: 25px;
+ font-weight: 400;
&.active,
&:hover {
background: $dropdown__focus-bg;
@@ -13,8 +16,11 @@
display: inline-block;
margin-left: 5px;
font-size: .8em;
- transform: rotate(90deg);
+ transform: translateY(-50%) rotate(90deg);
color: $lightbg__primary;
+ position: absolute;
+ right: .8em;
+ top: 50%;
}
}
@@ -41,6 +47,7 @@
padding: 1em 1em 1em 1.8em;
text-align: left;
width: 100%;
+ font-weight: 400;
&:hover {
background: $dropdown__focus-bg;
}
@@ -81,15 +88,14 @@
// Checkbox
-.control-check {
- font-size: 18px;
+.control-check,
+.control-radio {
position: relative;
display: inline-block;
margin-bottom: 15px;
- padding-left: 1em;
padding-top: 7px;
cursor: pointer;
- line-height: .5;
+ line-height: initial;
}
.control-check input {
@@ -108,10 +114,6 @@
border: 1px solid $lightgrey;
}
-.control--radio .control__indicator {
- border-radius: 50%;
-}
-
/* Hover and focus states */
.control-check:hover input ~ .control__indicator,
.control-check input:focus ~ .control__indicator {
@@ -169,4 +171,97 @@
.control-check input:disabled ~ .control__indicator:after {
border-color: $white;
color: $white;
+}
+
+// Radio Buttons
+.control-radio {
+ padding-left: 3em;
+}
+.control-radio.disabled:hover {
+ cursor: default;
+}
+.control-radio .control__indicator {
+ position: absolute;
+ top: 2px;
+ left: 0;
+ width: 30px;
+ height: 30px;
+ background: $white;
+ border: 2px solid $darkgrey;
+}
+.control-radio input{
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+}
+
+.control-radio .control__indicator {
+ border-radius: 50%;
+}
+
+/* Hover and focus states */
+.control-radio input:focus ~ .control__indicator {
+ background: $primebtn__bg;
+ outline: 1px solid $primebtn__bg;
+ outline-offset: 3px;
+}
+
+.control-radio input:checked ~ .control__indicator {
+ background: $lightbg__accent;
+ border: 2px solid $primebtn__bg;
+}
+
+/* Disabled state */
+.control-radio input:disabled ~ .control__indicator{
+ pointer-events: none;
+ opacity: .6;
+ background: #ccc;
+ border: 1px solid $lightgrey;
+}
+
+.control-radio:hover > input:disabled ~ .control__indicator{
+ outline: 0;
+}
+
+.control-radio:hover input:disabled {
+ cursor: default;
+}
+
+/* mark */
+.control__indicator:after {
+ position: absolute;
+ display: none;
+ content: '';
+}
+
+/* Show mark */
+.control-radio input:checked ~ .control__indicator:after {
+ display: block;
+}
+
+/* Disabled tick colour */
+.control-radio input:disabled ~ .control__indicator:after{
+ border-color: $white;
+ color: $white;
+}
+
+/* Radio button inner circle */
+.control-radio .control__indicator:after {
+ top: 4px;
+ left: 4px;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: $primebtn__bg;
+}
+
+.control-radio:hover .control__indicator:after {
+ display: block;
+}
+
+/* Disabled circle colour */
+.control-radio input:disabled ~ .control__indicator:after {
+ background: #7b7b7b;
+ width: 20px;
+ height: 20px;
}
\ No newline at end of file
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index e69de29..63d6cf7 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -0,0 +1,91 @@
+
+// Table Header
+.table-header {
+ width: 100%;
+ color: $black;
+ line-height: 30px;
+ padding: 10px 15px;
+
+ @include mediaQuery(medium) {
+ padding: 15px 20px;
+ }
+
+ @include mediaQuery(large) {
+ padding: 15px 30px;
+ }
+}
+
+
+// Table
+.table {
+ width: 100%;
+}
+
+.table__row {
+ display: flex;
+ width: 100%;
+ max-width: calc(100vw - 30px);
+ flex-wrap: wrap;
+ border-bottom: 1px solid $medgrey;
+ border-left: 1px solid $medgrey;
+ border-right: 1px solid $medgrey;
+ padding: 5px 0;
+
+ @include mediaQuery(small) {
+ padding: 0;
+ }
+}
+
+.table__cell {
+ flex: 0 0 100%;
+ line-height: 20px;
+ padding: 5px 15px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ @include mediaQuery(small) {
+ flex: 1;
+ padding: 15px 20px;
+ }
+
+ @include mediaQuery(large) {
+ padding: 15px 30px;
+ }
+}
+
+.table__cell-label {
+ display: inline-block;
+ font-weight: 700;
+ min-width: 50%;
+ padding-right: 15px;
+
+ @include mediaQuery(small) {
+ display: none;
+ }
+}
+
+// Table Head
+.table__head {
+ .table__row {
+ display: none;
+ font-weight: 700;
+ border-bottom: 1px solid $medgrey;
+ background-color: $darkbg__primary;
+ color: $white;
+
+ @include mediaQuery(small) {
+ display: flex;
+ }
+
+ .table__cell {
+ @include fastTransition-all();
+ position: relative;
+
+ &:last-child {
+ border: 0;
+ }
+ }
+ }
+}
+
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;
+ }
+ }
}
}
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
index c3d9e0f..7e10227 100644
--- a/app/common/styles/elements/accordion.scss
+++ b/app/common/styles/elements/accordion.scss
@@ -8,11 +8,8 @@
color: $white;
margin-left: 0;
.event__actions {
- margin-top: 1em;
margin-right: 10px;
- @include mediaQuery(medium) {
- margin-top: -6px;
- }
+ margin-top: -6px;
@include mediaQuery(large) {
margin-right: -20px;
}
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index af14e05..b1aae36 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -13,7 +13,7 @@
#content__search-input {
margin: 0;
- border: 1px solid $lightgrey;
+ border: 1px solid $medgrey;
padding-left: 40px;
padding-right: 5px;
&:focus {
diff --git a/app/common/styles/elements/export.scss b/app/common/styles/elements/export.scss
index 45b910a..ea0ab92 100644
--- a/app/common/styles/elements/export.scss
+++ b/app/common/styles/elements/export.scss
@@ -1,19 +1,17 @@
//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;
+ text-decoration: none;
+ margin-top: 7px;
&:hover {
text-decoration: underline;
}
}
-.btn-export {
- margin-top: 7px;
-}
.btn-export:before {
content: '\21E5';
position: absolute;
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index f2da19e..fe23cb8 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -3,7 +3,6 @@
.inline__confirm {
position: absolute;
top: 0;
- right: 0;
transform: translateY(-103%);
width: 100%;
height: 100%;
@@ -22,10 +21,6 @@
// Power confirmation buttons
.inline__confirm-buttons {
- position: absolute;
- top: 50%;
- right: 1em;
- transform: translateY(-50%);
.btn-primary {
background: transparent;
border: 2px solid $white;
@@ -46,7 +41,6 @@
// confirmation message
.inline__confirm-message {
display: inline-block;
- max-width: 50%;
}
// Power confirmation message icon
diff --git a/app/common/styles/elements/status.scss b/app/common/styles/elements/status.scss
index 22d99b8..7d9b57a 100644
--- a/app/common/styles/elements/status.scss
+++ b/app/common/styles/elements/status.scss
@@ -3,6 +3,7 @@
content: '\25CF';
display: inline-block;
font-size: 2em;
+ color: $status-ok;
margin-right: .1em;
transform: translateY(2px);
@include slowTransition-all;
@@ -40,7 +41,6 @@
}
.status-light__good {
- color: $status-ok;
&::before {
@include status-light__good;
}
diff --git a/app/common/styles/index.scss b/app/common/styles/index.scss
index 13804a7..4288740 100644
--- a/app/common/styles/index.scss
+++ b/app/common/styles/index.scss
@@ -1,4 +1,3 @@
-
@import "./base/index.scss";
@import "./elements/index.scss";
@import "./components/index.scss";
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 1547e30..13dbe44 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -7,6 +7,7 @@
position: relative;
border-bottom: 1px solid $lightbg__grey;
margin: 1.625em 0 1.2em 0;
+ padding-left: 0;
.h4 {
padding: 0;
margin: 0 0 .5em 0;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
new file mode 100644
index 0000000..9b7dff5
--- /dev/null
+++ b/app/common/styles/layout/header.scss
@@ -0,0 +1,163 @@
+$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/layout/index.scss b/app/common/styles/layout/index.scss
index 6c33f26..4183519 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1 +1,2 @@
+@import 'header';
@import 'content';