power-operations: add page and styles
Change-Id: I7196e3791b103dfba74bfa66b0b4040a0ed1048d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/base/_all.scss b/src/scss/base/_all.scss
index bc61b44..5e10e93 100644
--- a/src/scss/base/_all.scss
+++ b/src/scss/base/_all.scss
@@ -5,4 +5,5 @@
@import 'core';
@import 'typography';
@import 'utility';
+@import 'buttons';
@import 'forms';
diff --git a/src/scss/base/_buttons.scss b/src/scss/base/_buttons.scss
new file mode 100644
index 0000000..3703722
--- /dev/null
+++ b/src/scss/base/_buttons.scss
@@ -0,0 +1,40 @@
+button, .button, input[type="submit"] {
+ font-weight: bold;
+ font-size: 1em;
+ text-transform: none;
+ border-radius: 3px;
+ padding: .8rem 3.5rem;
+ height: auto;
+ &:hover {
+ cursor: pointer;
+ }
+ &.disabled {
+ border: 2px solid $lightgrey;
+ color: $lightgrey;
+ }
+}
+
+.disabled {
+ button, .button, input[type="submit"] {
+ opacity: 0.2;
+ &:hover {
+ cursor: default;
+ background: transparent;
+ }
+ }
+}
+
+.btn-primary {
+ color: $primebtn__text;
+ background: $primebtn__bg;
+}
+.btn-secondary {
+ color: $secbtn__text;
+ background: transparent;
+ border: 2px solid $secbtn__border;
+ &:hover {
+ background: $lightbg__accent;
+ cursor: pointer;
+ background: $secbtn__bg;
+ }
+}
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index fe9f2dc..c013e08 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -1,20 +1,30 @@
// Global
$white: #fff;
$black: #333;
+$darkgrey: #666;
+$lightgrey: #ccc;
$field__disabled: #F4F8F8;
-$error: #FF5C49;
-$status-ok: #098145;
+
// Dark background
$darkbg__grey: #E3ECEC;
$darkbg__accent: #79a6f6;
-$darkbg__primary: #1d3458;
+$darkbg__primary: #19273c;
$active: #648FFF;
-// White Background
+// Light Background
$lightbg__grey: #b8c1c1;
-$lightbg__accent: #3c6df0;
-$lightbg__primary: #19273c;
+$lightbg__accent: #ebf0fc;
+$lightbg__primary: #1a273b;
+
+// Primary Button colors
+$primebtn__bg: #3c6df0;
+$primebtn__text: $white;
+
+// Secondary Button colors
+$secbtn__bg: #ebf0fc;
+$secbtn__border: #3f71ec;
+$secbtn__text: #3f71ec;
// Alerts
$alert__error: rgba(230, 35, 37, 0.3);
@@ -25,4 +35,13 @@
$links: #648FFF;
$links__hover: $lightbg__accent;
$links__visited: #5A3EC8;
-$links__disabled: rgba(27, 40, 52, 0.70);
\ No newline at end of file
+$links__disabled: rgba(27, 40, 52, 0.70);
+
+// Navigation
+$nav__top-level-color: #1a273b;
+$nav__second-level-color: #e6e9ed;
+
+// Status colors
+$error-color: #FF5C49;
+$status-ok: #34bc6e;
+$status-ok-light: #bcefce;
\ No newline at end of file
diff --git a/src/scss/base/_core.scss b/src/scss/base/_core.scss
index 37aaf46..13ba9e6 100644
--- a/src/scss/base/_core.scss
+++ b/src/scss/base/_core.scss
@@ -5,32 +5,9 @@
color: $black;
}
-.container {
- max-width: 1440px;
-}
-
p {
margin-bottom: .8em;
- @include fastTransition-all;
-}
-
-button, .button, input[type="submit"] {
- color: $white;
- background: $lightbg__primary;
- border: 1px solid $lightbg__primary;
- font-weight: normal;
- font-size: 1em;
- text-transform: none;
- border-radius: 0;
- padding: .5rem 2rem;
- height: auto;
- line-height: 2.5em;
- &:hover {
- background: $lightbg__accent;
- //box-shadow: inset 0 0 0 2px $lightbg__primary;
- cursor: pointer;
- @include fastTransition-all;
- }
+ transition: margin .05s;
}
a {
@@ -41,7 +18,7 @@
&:hover {
color: $links__hover;
}
- focus {
+ :focus {
color: $links;
}
}
\ No newline at end of file
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index c4f7eed..97c24eb 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -34,7 +34,7 @@
border: 1px solid $lightbg__grey;
}
&.input__error {
- border-color: $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 4b7a1eb..e26c10d 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -1,8 +1,3 @@
-
-$lightbg__grey: #b8c1c1;
-$lightbg__accent: #3c6df0;
-$lightbg__primary: #19273c;
-
//Breakpoints mixin
@mixin mediaQuery($breakpoint) {
@if $breakpoint == "x-small" {
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
index b20397f..8c70067 100644
--- a/src/scss/base/_typography.scss
+++ b/src/scss/base/_typography.scss
@@ -19,26 +19,28 @@
font-weight: 300;
margin: 0 0 .8rem;
line-height: 1;
+ color: #333;
}
-h1 {
+h1, .h1 {
font-size: 2.3rem;
}
-h2 {
+h2, .h2 {
font-size: 1.8rem;
}
-h3 {
+h3, .h3 {
font-size: 1.3rem;
-}
-
-h4 {
- font-size: 1.125rem;
letter-spacing: -.08rem;
}
-h5 {
+h4, .h4 {
+ font-size: 1.125rem;
+ letter-spacing: -.04rem;
+}
+
+h5, .h5 {
font-size: 1rem;
letter-spacing: -.05rem;
}
diff --git a/src/scss/base/_utility.scss b/src/scss/base/_utility.scss
index 2886bf1..3d5a8ce 100644
--- a/src/scss/base/_utility.scss
+++ b/src/scss/base/_utility.scss
@@ -1,6 +1,5 @@
.inline {
display: inline-block;
- line-height: 2;
}
.disabled {
@@ -14,7 +13,7 @@
clear: both;
}
.error {
- color: $error;
+ color: $error-color;
}
.hide {
@@ -47,10 +46,18 @@
margin: 0px !important;
}
+.no-padding {
+ padding:0px !important;
+}
+
.no-bottom-margin {
margin-bottom: 0px !important;
}
.no-top-margin {
margin-top: 0px !important;
+}
+
+.transitionAll {
+ transition: all .5s ease;
}
\ No newline at end of file