Move generic button components and body styles to components and generic, respectively

7 files changed, 212 insertions, 5 deletions

diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
new file mode 100644
index 000000000..114a2f892
--- /dev/null
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -0,0 +1,83 @@
+/*
+  Buttons
+ */
+
+.btn-green {
+  background-color: #02C9B1; // TODO: reusable color in colors.css
+}
+
+button.btn-clear {
+  background: white;
+  border: 1px solid;
+}
+
+// No longer used in flat design, remove when modal buttons done
+// div.wallet-btn {
+//   border: 1px solid rgb(91, 93, 103);
+//   border-radius: 2px;
+//   height: 30px;
+//   width: 75px;
+//   font-size: 0.8em;
+//   text-align: center;
+//   line-height: 25px;
+// }
+
+// .btn-red {
+//   background: rgba(254, 35, 17, 1);
+//   box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
+// }
+
+// button[disabled], input[type="submit"][disabled] {
+//   cursor: not-allowed;
+//   background: rgba(197, 197, 197, 1);
+//   box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
+// }
+
+// button.spaced {
+//   margin: 2px;
+// }
+
+// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
+//   transform: scale(1.1);
+// }
+// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
+//   transform: scale(0.95);
+// }
+
+button.primary {
+  padding: 8px 12px;
+  background: #F7861C;
+  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
+  color: white;
+  font-size: 1.1em;
+  font-family: 'Montserrat Regular';
+  text-transform: uppercase;
+}
+
+.btn-light {
+  padding: 8px 12px;
+  // background: #FFFFFF; // $bg-white
+  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
+  color: #585D67; // TODO: make reusable light button color
+  font-size: 1.1em;
+  font-family: 'Montserrat Regular';
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 20px;
+  border-radius: 2px;
+  border: 1px solid #979797; // #TODO: make reusable light border color
+  opacity: 0.5;
+}
+
+// TODO: cleanup: not used anywhere
+button.btn-thin {
+  border: 1px solid;
+  border-color: #4D4D4D;
+  color: #4D4D4D;
+  background: rgb(255, 174, 41);
+  border-radius: 4px;
+  min-width: 200px;
+  margin: 12px 0;
+  padding: 6px;
+  font-size: 13px;
+}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index e69de29bb..948f19251 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -0,0 +1 @@
+@import './buttons.scss'
\ No newline at end of file
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index e69de29bb..69da497b1 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -0,0 +1,50 @@
+// Generic styles
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  font-family: 'Montserrat Regular', Arial;
+  color: #4D4D4D;
+  font-weight: 300;
+  line-height: 1.4em;
+  background: #F7F7F7;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  min-height: 500px;
+}
+
+.app-root {
+  overflow: hidden;
+  position: relative
+}
+
+.app-primary {
+  display: flex;
+}
+
+input:focus, textarea:focus {
+  outline: none;
+}
+
+#app-content {
+  overflow-x: hidden;
+  min-width: 357px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover{
+  color: #df6b0e;
+}
diff --git a/ui/app/css/itcss/settings/index.scss b/ui/app/css/itcss/settings/index.scss
index 37e1c2f2c..446546d0c 100644
--- a/ui/app/css/itcss/settings/index.scss
+++ b/ui/app/css/itcss/settings/index.scss
@@ -1,5 +1,2 @@
-// Variables
-$white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)'
-$rajah: #F5C26D; // formerly 'light orange (button shades)'
-$buttercup: #F5A623; // formerly 'dark orange (text)'
-$tundora: #4A4A4A; // formerly 'borders/font/any gray'
\ No newline at end of file
+@import './variables.scss';
+@import './typography.scss';
diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
new file mode 100644
index 000000000..2afaa26e1
--- /dev/null
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -0,0 +1,42 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
+
+@font-face {
+  font-family: 'Montserrat Regular';
+    src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
+    src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-size: 'small';
+}
+
+@font-face {
+  font-family: 'Montserrat Bold';
+    src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
+    src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat Light';
+    src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
+    src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat UltraLight';
+    src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
+    src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN OT';
+    src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
new file mode 100644
index 000000000..0eeaa8911
--- /dev/null
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -0,0 +1,4 @@
+$white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)'
+$rajah: #F5C26D; // formerly 'light orange (button shades)'
+$buttercup: #F5A623; // formerly 'dark orange (text)'
+$tundora: #4A4A4A; // formerly 'borders/font/any gray'
diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss
new file mode 100644
index 000000000..c45cb9f02
--- /dev/null
+++ b/ui/app/css/itcss/tools/utilities.scss
@@ -0,0 +1,30 @@
+/*
+  Utility Classes
+ */
+.full-size {
+  height: 100%;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-flex-height {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+/*
+  Misc
+ */
+
+// Move into component-level contextual 'active' state later
+.active {
+  color: #909090;
+}