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/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