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 {