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

2 files changed, 84 insertions, 0 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