From a8b172a730971814f948fcc1e023341dbc10273f Mon Sep 17 00:00:00 2001
From: Jenil Gogari <jenil27@hotmail.com>
Date: Sat, 23 Mar 2019 17:57:38 -0400
Subject: [PATCH] fixes for utils and button

---
 dist/chota.css  | 58 +++++++++++++++++++++++--------------------------
 src/_form.css   | 10 ++++-----
 src/_util.css   | 44 ++++++++++++++++++-------------------
 test/index.html |  4 +++-
 4 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/dist/chota.css b/dist/chota.css
index f3f8789..5d395d6 100644
--- a/dist/chota.css
+++ b/dist/chota.css
@@ -506,7 +506,7 @@ button {
   color: var(--color-darkGrey);
   background: var(--color-lightGrey);
   border-radius: 4px;
-  border: none;
+  border: 1px solid transparent;
   font-size: var(--font-size);
   line-height: 1;
   text-align: center;
@@ -576,22 +576,18 @@ button:disabled:hover {
 }
 .button.outline {
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px var(--color-lightGrey);
-          box-shadow: inset 0 0 0 1px var(--color-lightGrey);
+  border-color: var(--color-lightGrey);
 }
 .button.outline.primary {
-  -webkit-box-shadow: inset 0 0 0 1px var(--color-primary);
-          box-shadow: inset 0 0 0 1px var(--color-primary);
+  border-color: var(--color-primary);
   color: var(--color-primary);
 }
 .button.outline.secondary {
-  -webkit-box-shadow: inset 0 0 0 1px var(--color-grey);
-          box-shadow: inset 0 0 0 1px var(--color-grey);
+  border-color: var(--color-grey);
   color: var(--color-grey);
 }
 .button.outline.dark {
-  -webkit-box-shadow: inset 0 0 0 1px var(--color-darkGrey);
-          box-shadow: inset 0 0 0 1px var(--color-darkGrey);
+  border-color: var(--color-darkGrey);
   color: var(--color-darkGrey);
 }
 .button.clear {
@@ -777,68 +773,68 @@ button:disabled:hover {
 }
 /* Colors */
 .bg-primary {
-    background-color: var(--color-primary);
+    background-color: var(--color-primary) !important;
 }
 .bg-light {
-    background-color: var(--color-lightGrey);
+    background-color: var(--color-lightGrey) !important;
 }
 .bg-dark {
-    background-color: var(--color-darkGrey);
+    background-color: var(--color-darkGrey) !important;
 }
 .bg-grey {
-    background-color: var(--color-grey);
+    background-color: var(--color-grey) !important;
 }
 .bg-error {
-    background-color: var(--color-error);
+    background-color: var(--color-error) !important;
 }
 .bg-success {
-    background-color: var(--color-success);
+    background-color: var(--color-success) !important;
 }
 .bd-primary {
-    border: 1px solid var(--color-primary);
+    border: 1px solid var(--color-primary) !important;
 }
 .bd-light {
-    border: 1px solid var(--color-lightGrey);
+    border: 1px solid var(--color-lightGrey) !important;
 }
 .bd-dark {
-    border: 1px solid var(--color-darkGrey);
+    border: 1px solid var(--color-darkGrey) !important;
 }
 .bd-grey {
-    border: 1px solid var(--color-grey);
+    border: 1px solid var(--color-grey) !important;
 }
 .bd-error {
-    border: 1px solid var(--color-error);
+    border: 1px solid var(--color-error) !important;
 }
 .bd-success {
-    border: 1px solid var(--color-success);
+    border: 1px solid var(--color-success) !important;
 }
 .text-primary {
-    color: var(--color-primary);
+    color: var(--color-primary) !important;
 }
 .text-light {
-    color: var(--color-lightGrey);
+    color: var(--color-lightGrey) !important;
 }
 .text-dark {
-    color: var(--color-darkGrey);
+    color: var(--color-darkGrey) !important;
 }
 .text-grey {
-    color: var(--color-grey);
+    color: var(--color-grey) !important;
 }
 .text-error {
-    color: var(--color-error);
+    color: var(--color-error) !important;
 }
 .text-success {
-    color: var(--color-success);
+    color: var(--color-success) !important;
 }
 .text-white {
-    color: #fff;
+    color: #fff !important;
 }
 /* Position & alignment */
 .pull-right {
-    float: right;
+    float: right !important;
 }
 .pull-left {
-    float: left;
+    float: left !important;
 }
 .is-text-center {
     text-align: center;
@@ -863,7 +859,7 @@ button:disabled:hover {
     min-height: 100vh;
 }
 .is-full-width {
-    width: 100%;
+    width: 100% !important;
 }
 .is-vertical-align {
     display: -webkit-box;
diff --git a/src/_form.css b/src/_form.css
index 7a573a3..a1c4f4a 100644
--- a/src/_form.css
+++ b/src/_form.css
@@ -72,7 +72,7 @@ button {
   color: var(--color-darkGrey);
   background: var(--color-lightGrey);
   border-radius: 4px;
-  border: none;
+  border: 1px solid transparent;
   font-size: var(--font-size);
   line-height: 1;
   text-align: center;
@@ -149,21 +149,21 @@ button:disabled:hover {
 
 .button.outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--color-lightGrey);
+  border-color: var(--color-lightGrey);
 }
 
 .button.outline.primary {
-  box-shadow: inset 0 0 0 1px var(--color-primary);
+  border-color: var(--color-primary);
   color: var(--color-primary);
 }
 
 .button.outline.secondary {
-  box-shadow: inset 0 0 0 1px var(--color-grey);
+  border-color: var(--color-grey);
   color: var(--color-grey);
 }
 
 .button.outline.dark {
-  box-shadow: inset 0 0 0 1px var(--color-darkGrey);
+  border-color: var(--color-darkGrey);
   color: var(--color-darkGrey);
 }
 
diff --git a/src/_util.css b/src/_util.css
index 8f710fa..33266f8 100644
--- a/src/_util.css
+++ b/src/_util.css
@@ -1,87 +1,87 @@
 /* Colors */
 .bg-primary {
-    background-color: var(--color-primary);
+    background-color: var(--color-primary) !important;
 }
 
 .bg-light {
-    background-color: var(--color-lightGrey);
+    background-color: var(--color-lightGrey) !important;
 }
 
 .bg-dark {
-    background-color: var(--color-darkGrey);
+    background-color: var(--color-darkGrey) !important;
 }
 
 .bg-grey {
-    background-color: var(--color-grey);
+    background-color: var(--color-grey) !important;
 }
 
 .bg-error {
-    background-color: var(--color-error);
+    background-color: var(--color-error) !important;
 }
 
 .bg-success {
-    background-color: var(--color-success);
+    background-color: var(--color-success) !important;
 }
 
 .bd-primary {
-    border: 1px solid var(--color-primary);
+    border: 1px solid var(--color-primary) !important;
 }
 
 .bd-light {
-    border: 1px solid var(--color-lightGrey);
+    border: 1px solid var(--color-lightGrey) !important;
 }
 
 .bd-dark {
-    border: 1px solid var(--color-darkGrey);
+    border: 1px solid var(--color-darkGrey) !important;
 }
 
 .bd-grey {
-    border: 1px solid var(--color-grey);
+    border: 1px solid var(--color-grey) !important;
 }
 
 .bd-error {
-    border: 1px solid var(--color-error);
+    border: 1px solid var(--color-error) !important;
 }
 
 .bd-success {
-    border: 1px solid var(--color-success);
+    border: 1px solid var(--color-success) !important;
 }
 
 .text-primary {
-    color: var(--color-primary);
+    color: var(--color-primary) !important;
 }
 
 .text-light {
-    color: var(--color-lightGrey);
+    color: var(--color-lightGrey) !important;
 }
 
 .text-dark {
-    color: var(--color-darkGrey);
+    color: var(--color-darkGrey) !important;
 }
 
 .text-grey {
-    color: var(--color-grey);
+    color: var(--color-grey) !important;
 }
 
 .text-error {
-    color: var(--color-error);
+    color: var(--color-error) !important;
 }
 
 .text-success {
-    color: var(--color-success);
+    color: var(--color-success) !important;
 }
 
 .text-white {
-    color: #fff;
+    color: #fff !important;
 }
 
 /* Position & alignment */
 .pull-right {
-    float: right;
+    float: right !important;
 }
 
 .pull-left {
-    float: left;
+    float: left !important;
 }
 
 .is-text-center {
@@ -114,7 +114,7 @@
 }
 
 .is-full-width {
-    width: 100%;
+    width: 100% !important;
 }
 
 .is-vertical-align {
diff --git a/test/index.html b/test/index.html
index 3b5d1b1..f05631a 100644
--- a/test/index.html
+++ b/test/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Elements</title>
-  <link rel="stylesheet" href="../dist/chota.min.css">
+  <link rel="stylesheet" href="../dist/chota.css">
   
   <!-- For dev -->
   <!-- <link rel="stylesheet" href="../dist/chota.css"> -->
@@ -520,6 +520,8 @@
               <a href="#" class="button dark">a.button.dark</a>
               <a href="#" class="button error">a.button.error</a>
               <a href="#" class="button success">a.button.success</a>
+            </p>
+            <p>
               <a href="#" class="button outline">a.button.outline</a>
               <a href="#" class="button outline primary">a.button.outline.primary</a>
               <a href="#" class="button outline secondary">a.button.outline.secondary</a>