Additional details on event log templates
Change-Id: I634cbc5c4c42150b54ac4f520ff7aed70b4243dc
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 7bad975..9c5ba92 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,11 +1,13 @@
button, .button, input[type="submit"], .submit {
font-weight: bold;
font-size: 1em;
+ @include fontFamily;
text-transform: none;
border-radius: 3px;
padding: .8rem 3.5rem .5rem;
height: auto;
border: 0;
+ overflow: hidden;
&:hover {
cursor: pointer;
}
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 94ef663..3b98626 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -2,7 +2,10 @@
$white: #ffffff;
$black: #333;
$darkgrey: #666;
+$medgrey: #d7dbe0;
$lightgrey: #ccc;
+$lightblue: #f0f2f5;
+$purple: #5A3EC8;
$field__disabled: #d8d8d8;
$btn__disabled-txt: #a6a5a6;
$btn__disabled-bg: #d8d8d8;
@@ -27,16 +30,18 @@
$secbtn__border: #3f71ec;
$secbtn__text: #3f71ec;
+// Dropdowns
+$dropdown__focus-bg: #e6e9ee;
// Alerts
-$alert__error: rgba(230, 35, 37, 0.3);
-$alert__warning: rgba(255, 127, 0, 0.3);
-$alert__message: rgba(203, 221, 235, 0.5);
+$alert__error: rgb(230, 35, 37);
+$alert__warning: rgb(255, 127, 0);
+$alert__message: rgb(203, 221, 235);
// Links
$links: #648FFF;
$links__hover: $lightbg__accent;
-$links__visited: #5A3EC8;
+$links__visited: $purple;
$links__disabled: rgba(27, 40, 52, 0.70);
// Navigation
@@ -44,7 +49,8 @@
$nav__second-level-color: #e6e9ed;
// Status colors
-$error-color: #FF5C49;
+$error-color: #e62425;
$status-ok: #34bc6e;
$status-ok-light: #bcefce;
-$status-warn: #ffb000;
\ No newline at end of file
+$status-warn: #ffb000;
+
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index f899e0c..b49c5b2 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -57,73 +57,3 @@
box-shadow: 0 0 0;
}
}
-
-//Custom Checkbox and Radio
-.checkbox-custom,
-.radio-custom {
- opacity: 0;
- position: absolute;
-}
-
-.checkbox-custom, .checkbox-custom-label,
-.radio-custom,
-.radio-custom-label {
- display: inline-block;
- vertical-align: middle;
- margin: .1em 0 .1em -.5em;
- padding: .5em;
- cursor: pointer;
-}
-
-.checkbox-custom-label, .radio-custom-label {
- position: relative;
- padding-left: 2em;
-
-}
-
-.checkbox-custom + .checkbox-custom-label:before,
-.radio-custom + .radio-custom-label:before {
- content: '';
- background: #fff;
- border: 1px solid $lightbg__grey;
- display: inline-block;
- vertical-align: middle;
- width: 16px;
- height: 16px;
- margin-right: 10px;
- margin-top: -3px;
- text-align: center;
- position: absolute;
- left: 9px;
- top: 15px;
-}
-
-.checkbox-custom:checked + .checkbox-custom-label:after {
- content: '\2713';
- position: absolute;
- left: 10px;
- top: 3px;
- font-size: 1em;
- padding: 4px 0 0 2px;
- color: $white;
-}
-
-.checkbox-custom:checked + .checkbox-custom-label:before {
- background: $lightbg__primary;
- @include fastTransition-all;
-}
-
-.radio-custom + .radio-custom-label:before {
- border-radius: 50%;
-}
-
-.radio-custom:checked + .radio-custom-label:before {
- background: $lightbg__primary;
- @include fastTransition-all;
- box-shadow: inset 0px 0px 0px 2px #fff;
-}
-
-
-.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
- outline: 1px solid $lightbg__grey; /* focus style */
-}
diff --git a/app/common/styles/base/foundation b/app/common/styles/base/foundation.scss
similarity index 100%
rename from app/common/styles/base/foundation
rename to app/common/styles/base/foundation.scss
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index 71d8f39..6caeba7 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -30,6 +30,11 @@
font-weight: 200;
}
+@mixin fontCourierBold {
+ font-family: "Courier New", Helvetica, arial, sans-serif;
+ font-weight: 700;
+}
+
//Transitions mixin
@mixin fastTransition-all {
transition: all .5s ease;
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index e69de29..f4be1b1 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -0,0 +1,172 @@
+// Drop downs
+.dropdown__button {
+ position: relative;
+ padding: 1em;
+ margin-top: -10px;
+ &.active,
+ &:hover {
+ background: $dropdown__focus-bg;
+ }
+ &:after {
+ content: '\276F';
+ display: inline-block;
+ margin-left: 5px;
+ font-size: .8em;
+ transform: rotate(90deg);
+ color: $lightbg__primary;
+ }
+}
+
+.dropdown__wrapper {
+ position: relative;
+ display: inline-block;
+ float: left;
+}
+
+.dropdown__list {
+ position: absolute;
+ z-index: 100;
+ right: 0;
+ top: 100%;
+ background: $white;
+ padding: 0;
+ width: 100%;
+ border: 1px solid $lightbg__grey;
+ margin-top: -5px;
+ box-shadow: 0 4px 10px -2px $lightgrey;
+ li {
+ list-style-type: none;
+ }
+ button {
+ padding: 1em 1em 1em 1.8em;
+ text-align: left;
+ width: 100%;
+ &:hover {
+ background: $dropdown__focus-bg;
+ }
+ }
+}
+
+.dropdown__list {
+ min-width: 230px;
+}
+.dropdown__list.multi-select {
+ > .active {
+ position: relative;
+ &:before {
+ content: '\2713';
+ position: absolute;
+ display: inline-block;
+ top: 50%;
+ left: .6em;
+ color: $lightbg__primary;
+ transform: translateY(-50%);
+ }
+ }
+}
+
+.dropdown__date {
+ width: 430px;
+ .row {
+ padding: 1em;
+ margin-right: 0;
+ }
+ input {
+ max-width: 170px;
+ color: $darkgrey;
+ }
+}
+
+
+
+// Checkbox
+
+.control-check {
+ font-size: 18px;
+ position: relative;
+ display: inline-block;
+ margin-bottom: 15px;
+ padding-left: 1em;
+ padding-top: 7px;
+ cursor: pointer;
+ line-height: .5;
+}
+
+.control-check input {
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+}
+
+.control__indicator {
+ position: absolute;
+ top: 2px;
+ left: 0;
+ width: 20px;
+ height: 20px;
+ background: $white;
+ 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 {
+ border: 1px solid $primebtn__bg;
+}
+
+/* Checked state */
+.control-check input:checked ~ .control__indicator {
+ background: $primebtn__bg;
+
+}
+
+/* Hover state whilst checked */
+.control-check:hover input:not([disabled]):checked ~ .control__indicator {
+ background: $primebtn__bg;
+}
+
+/* Disabled state */
+.control-check input:disabled ~ .control__indicator {
+ pointer-events: none;
+ opacity: .6;
+ background: #ccc;
+ border: 1px solid $white;
+}
+
+.control-check:hover > input:disabled ~ .control__indicator {
+ outline: 0;
+}
+
+/* Check mark */
+.control__indicator:after,
+.control-check input:not(:checked){
+ position: absolute;
+ display: none;
+ content: '';
+}
+
+/* Show check mark */
+.control-check input:checked ~ .control__indicator:after {
+ display: block;
+}
+
+/* Checkbox tick */
+.control-check .control__indicator:after {
+ top: 3px;
+ left: 7px;
+ width: 5px;
+ height: 10px;
+ transform: rotate(45deg);
+ border: solid $white;
+ border-width: 0 2px 2px 0;
+}
+
+/* Disabled tick colour */
+.control-check input:disabled ~ .control__indicator:after {
+ border-color: $white;
+ color: $white;
+}
\ No newline at end of file
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 7d04da2..6277a91 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -2,4 +2,5 @@
@import "toggle-switch";
@import "status";
@import "alerts";
+@import "tags";
@import "inline-confirm";
\ No newline at end of file
diff --git a/app/common/styles/elements/tags.scss b/app/common/styles/elements/tags.scss
new file mode 100644
index 0000000..b2eab1d
--- /dev/null
+++ b/app/common/styles/elements/tags.scss
@@ -0,0 +1,63 @@
+// Tags
+
+.tag {
+ font-size: .9em;
+ padding: .4em .8em .2em;
+ position: relative;
+ display: inline-block;
+ font-weight: 700;
+ padding-right: 60px;
+ border-radius: 3px;
+ line-height: 1.5;
+ overflow: hidden;
+ margin: .4em .3em;
+ min-width: 185px;
+ text-align: left;
+ &:hover {
+ cursor: pointer;
+ }
+ &:before { // close icon
+ content: '+';
+ font-size: 2em;
+ font-weight: 400;
+ transform: rotate(45deg);
+ display: inline-block;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ margin-top: -18px;
+ color: $darkgrey;
+ height: 20px;
+ width: 20px;
+ }
+ &:after { // white separator
+ content: '';
+ height: 100%;
+ position: absolute;
+ top: 0;
+ right: 40px;
+ border-left: 1px solid $white;
+ }
+}
+
+//Custom tag
+.tag.custom {
+ background: lighten($darkbg__primary, 65%);
+}
+
+//Event log tags
+.event__resolved {
+ background: lighten($purple, 40%);
+}
+.event__unresolved {
+ background: lighten($purple, 40%);
+}
+.event__high {
+ background: lighten($error-color, 30%);
+}
+.event__medium{
+ background: lighten($alert__warning, 30%);
+}
+.event__low {
+ background: lighten($lightbg__primary, 30%);
+}
\ No newline at end of file