misc changes to header and login
* Header optimizations for small screens
* Style changes to login page.
Change-Id: Ia7a4fc0cab8e105348f8f8e36b3c61cdc938b2bb
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index 449bfb1..2fa98e8 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -3,7 +3,7 @@
$black: #333;
$darkgrey: #666;
$lightgrey: #ccc;
-$field__disabled: #F4F8F8;
+$field__disabled: #d8d8d8;
$btn__disabled-txt: #a6a5a6;
$btn__disabled-bg: #d8d8d8;
@@ -16,7 +16,7 @@
// Light Background
$lightbg__grey: #b8c1c1;
$lightbg__accent: #ebf0fc;
-$lightbg__primary: #1a273b;
+$lightbg__primary: #3c6df0;
// Primary Button colors
$primebtn__bg: #3c6df0;
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index 97c24eb..074ba14 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -19,15 +19,15 @@
input[type='text'],
textarea {
border-radius: 0px;
- border: 1px solid $lightbg__grey;
+ border: 1px solid $lightgrey;
height: 3.1em;
- transition: all 1s ease;
margin: 0 0 1em 0;
- background: $lightbg__grey;
- box-shadow: 0px 0px 0px;
+ background: $white;
+ box-shadow: 0 0 0;
+ transition: none !important;
&:focus {
border-color: $lightbg__accent;
- box-shadow: 0px 0px 0px;
+ border-bottom: 5px solid $lightbg__primary;
}
&:disabled, .disabled {
background: $field__disabled;
@@ -35,7 +35,6 @@
}
&.input__error {
border-color: $error-color;
- background: rgba(230, 35, 37, 0.1);
}
}
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
index a259c6b..578a866 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -51,29 +51,3 @@
@mixin bgImage__arrowDown-grey {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
}
-
-@mixin status-light {
- content: '\25CF';
- display: inline-block;
- font-size: 1.4em;
- color: $status-ok;
- margin-right: .3em;
-}
-
-@mixin status-light__good {
- @include status-light;
- color: $status-ok;
-
-}
-
-@mixin status-light__error {
- @include status-light;
- color: $error-color;
-
-}
-
-@mixin status-light__disabled {
- @include status-light;
- color: $darkgrey;
-
-}
diff --git a/src/scss/components/_all.scss b/src/scss/components/_all.scss
index 81974ba..7fad716 100644
--- a/src/scss/components/_all.scss
+++ b/src/scss/components/_all.scss
@@ -1,3 +1,4 @@
+@import "status";
@import "systemUser";
@import "login";
@import "alerts";
diff --git a/src/scss/components/_login.scss b/src/scss/components/_login.scss
index 0485dbd..088f42a 100644
--- a/src/scss/components/_login.scss
+++ b/src/scss/components/_login.scss
@@ -1,15 +1,24 @@
+#login {
+ @include mediaQuery(medium) {
+ background: linear-gradient(to right, #FFFFFF 49.999%, #e6e9ed 50%);
+ @include fastTransition-all;
+ }
+}
+
.login__wrapper {
position: relative;
padding-top: 1em;
color: $black;
- .row {max-width: 1040px;}
- @include mediaQuery(small){
+ .row {
+ max-width: 1040px;
+ }
+ @include mediaQuery(small) {
left: 50%;
top: 50%;
transform: translateY(-50%);
margin-left: -50%;
}
- @include mediaQuery(medium){
+ @include mediaQuery(medium) {
left: 0;
margin-left: 0;
}
@@ -30,47 +39,77 @@
padding: 1em 0;
display: block;
overflow: hidden;
- @include mediaQuery(small){
+ @include mediaQuery(small) {
max-width: 50%;
}
- @include mediaQuery(medium){
+ @include mediaQuery(medium) {
padding: 0 0 0 5em;
- border-left: 1px solid $lightbg__grey;
- max-width:100%;
+ max-width: 100%;
}
@include fastTransition-all;
}
-
-
.login__desc {
text-align: left;
h1 {
font-size: 2em;
- margin-bottom: 0em;
+ margin-bottom: 0;
+ font-weight: bold;
+ @include mediaQuery(small) {
+ max-width: 50%;
+ }
+ @include mediaQuery(medium) {
+ max-width: 100%;
+ }
}
}
.login__server-info {
margin-top: 2em;
- p {margin-bottom: 0;}
- h3 {margin-bottom: .3rem;}
+ margin-left: 0;
+ padding-left: 0;
+ list-style-type: none;
+ @include mediaQuery(small) {
+ max-width: 50%;
+ }
+ @include mediaQuery(medium) {
+ max-width: 90%;
+ }
+ li {
+ padding: 1em 0;
+ border-top: 1px solid $lightgrey;
+ }
+ p {
+ margin-bottom: 0;
+ display: inline-block;
+ font-family: courier, helvetica, arial, sans-serif;
+ font-weight: 700;
+ }
+ .login__info-label {
+ display: inline-block;
+ min-width: 200px;
+ @include fontFamily;
+ }
}
.login__status {
color: $status-ok;
- &.error {color: $error-color;}
+ &.error {
+ color: $error-color;
+ }
}
.login__error-msg {
- background: $alert__error;
+ background: lighten($error-color, 20%);
padding: 1em;
text-align: center;
- font-size: .95em;
+ font-size: 1em;
border: 1px solid $error-color;
+ color: $black;
+ font-family: Courier, Helvetica, Arial, sans-serif;
+ font-weight: 700;
-
- @include mediaQuery(medium){
- max-width:100%;
+ @include mediaQuery(medium) {
+ max-width: 100%;
}
}
\ No newline at end of file
diff --git a/src/scss/components/_status.scss b/src/scss/components/_status.scss
new file mode 100644
index 0000000..30cb2db
--- /dev/null
+++ b/src/scss/components/_status.scss
@@ -0,0 +1,60 @@
+//status light states
+@mixin status-light {
+ content: '\25CF';
+ display: inline-block;
+ font-size: 2em;
+ color: $status-ok;
+ margin-right: .1em;
+ transform: translateY(2px);
+}
+
+@mixin status-light__good {
+ @include status-light;
+ color: $status-ok;
+
+}
+
+@mixin status-light__error {
+ @include status-light;
+ color: $error-color;
+
+}
+
+@mixin status-light__disabled {
+ @include status-light;
+ color: $darkgrey;
+
+}
+
+@mixin status-light__warn {
+ @include status-light;
+ color: $darkgrey;
+
+}
+
+.status-light__disabled {
+ color: $darkgrey;
+ &::before {
+ @include status-light__disabled;
+ }
+}
+
+.status-light__good {
+ &::before {
+ @include status-light__good;
+ }
+}
+
+.status-light__error {
+ color: $error-color;
+ &::before {
+ @include status-light__error;
+ }
+}
+
+.status-light__warn {
+ color: $status-warn;
+ &::before {
+ @include status-light__error;
+ }
+}
\ No newline at end of file
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
index f0431ca..9b7dff5 100644
--- a/src/scss/layout/_header.scss
+++ b/src/scss/layout/_header.scss
@@ -42,17 +42,29 @@
.header__functions-wrapper {
color: $white;
- background: $lightbg__primary;
+ 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 {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
+ padding-top: .5em;
+ //position: absolute;
+ //top: 50%;
+ //transform: translateY(-50%);
}
#header__logo {
@@ -64,6 +76,21 @@
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;
@@ -71,29 +98,14 @@
right: 0;
bottom: 0;
background: $darkbg__primary;
+ z-index: 100;
+ @include fastTransition-all;
span {
display: block;
color: $white;
font-size: 1em;
- &.status-light__disabled {
- color: $darkgrey;
- &::before {
- @include status-light__disabled;
- }
- }
- &.status-light__good{
- &::before {
- @include status-light__good;
- }
- }
- &.status-light__error{
- color: $error-color;
- &::before {
- @include status-light__error;
- }
- }
}
- a, p, button {
+ a, p, button {
display: block;
float: left;
text-decoration: none;
@@ -103,21 +115,40 @@
padding: 1.250em 1.688em;
height: 100%;
font-size: 0.875em;
- line-height: 1.3;
- > span {font-size: 1rem;
- font-weight: bold;}
+ 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.6;
+ line-height: 1.8;
+ margin-top: -4px;
}
}
.header__server-power,
- .header__page-refresh{
+ .header__page-refresh {
&:hover {
- background: rgba(60,109,240,.4);
+ background: rgba(60, 109, 240, .4);
}
}
.header__page-refresh {
@@ -127,4 +158,6 @@
width: 24px;
}
}
-}// end header__functions-wrapper
+}
+
+// end header__functions-wrapper
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index 7a2d33c..bb08579 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -106,7 +106,7 @@
@include fastTransition-all;
}
a {
- padding: 1.2em .6em 1.2em 1em;
+ padding: 1.2em 1em 1.2em 1em;
display: block;
color: $black;
text-decoration: none;