From b6702b5ab43a7857d06038ec3ed03e2e441bd996 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Wed, 19 Jun 2019 20:14:15 +0300
Subject: [PATCH] refactor(form inputs): remove bootstrap grid from cards

---
 .../form-inputs/form-inputs.component.html    | 145 +++++++-----------
 .../form-inputs/form-inputs.component.scss    |  41 ++---
 2 files changed, 71 insertions(+), 115 deletions(-)

diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html
index 3e5e1004..c40a0b6d 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -3,44 +3,20 @@
     <nb-card>
       <nb-card-header>Default Inputs</nb-card-header>
       <nb-card-body>
-        <div class="input-group">
-          <input type="text" nbInput fullWidth placeholder="Project">
-        </div>
-        <div class="row full-name-inputs">
-          <div class="col-sm-6 input-group">
-            <input type="text" nbInput fullWidth placeholder="Nick">
-          </div>
-          <div class="col-sm-6 input-group">
-            <input type="text" nbInput fullWidth placeholder="Last Name">
-          </div>
-        </div>
-        <div class="input-group">
-          <input type="password" nbInput fullWidth placeholder="Password">
-        </div>
-        <div class="input-group">
-          <input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
-        </div>
-        <div class="input-group">
-          <input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
-        </div>
-        <div class="input-group">
-          <input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
-        </div>
-        <div class="input-group">
-          <input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
-        </div>
-        <div class="input-group">
-          <textarea rows="5" nbInput fullWidth shape="round"  placeholder="Text Area"></textarea>
-        </div>
-        <div class="input-group input-group-sm">
-          <input type="text" nbInput fullWidth fieldSize="small"  placeholder="Small Input">
-        </div>
-        <div class="input-group input-group-lg">
-          <input type="text" nbInput fullWidth fieldSize="medium"  placeholder="Medium Input">
-        </div>
-        <div class="input-group input-group-lg">
-          <input type="text" nbInput fullWidth fieldSize="large"  placeholder="Large Input">
+        <input type="text" nbInput fullWidth placeholder="Project">
+        <div class="full-name-inputs">
+          <input type="text" nbInput fullWidth placeholder="Nick">
+          <input type="text" nbInput fullWidth placeholder="Last Name">
         </div>
+        <input type="password" nbInput fullWidth placeholder="Password">
+        <input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
+        <input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
+        <input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
+        <input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
+        <textarea rows="5" nbInput fullWidth shape="round"  placeholder="Text Area"></textarea>
+        <input type="text" nbInput fullWidth fieldSize="small"  placeholder="Small Input">
+        <input type="text" nbInput fullWidth fieldSize="medium"  placeholder="Medium Input">
+        <input type="text" nbInput fullWidth fieldSize="large"  placeholder="Large Input">
       </nb-card-body>
     </nb-card>
   </div>
@@ -50,71 +26,60 @@
     <nb-card>
       <nb-card-header>Select</nb-card-header>
       <nb-card-body>
-        <div class="form-group">
-          <nb-select selected="1">
-            <nb-option value="1">Option 1</nb-option>
-            <nb-option value="2">Option 2</nb-option>
-          </nb-select>
-        </div>
+        <nb-select selected="1">
+          <nb-option value="1">Option 1</nb-option>
+          <nb-option value="2">Option 2</nb-option>
+        </nb-select>
       </nb-card-body>
     </nb-card>
 
     <nb-card>
       <nb-card-header>Validation States</nb-card-header>
       <nb-card-body>
-        <div class="form-group">
-          <input type="text" nbInput fullWidth status="info"  placeholder="Input with Info">
-        </div>
-        <div class="form-group">
-          <input type="text" nbInput fullWidth status="success"  placeholder="Warning Input">
-        </div>
-        <div class="form-group">
-          <input type="text" nbInput fullWidth status="warning"  placeholder="Danger Input">
-        </div>
-        <div class="form-group">
-          <input type="text" nbInput fullWidth status="danger" placeholder="Danger Input">
-        </div>
-        <div class="form-group validation-checkboxes row">
-          <nb-checkbox status="success" class="col-sm-4">Success Checkbox</nb-checkbox>
-          <nb-checkbox status="warning" class="col-sm-4">Warning Checkbox</nb-checkbox>
-          <nb-checkbox status="danger" class="col-sm-4">Danger Checkbox</nb-checkbox>
+        <input type="text" nbInput fullWidth status="info"  placeholder="Input with Info">
+        <input type="text" nbInput fullWidth status="success"  placeholder="Warning Input">
+        <input type="text" nbInput fullWidth status="warning"  placeholder="Danger Input">
+        <input type="text" nbInput fullWidth status="danger" placeholder="Danger Input">
+        <input type="text" nbInput fullWidth status="primary"  placeholder="Input with Primary">
+        <div class="validation-checkboxes">
+          <nb-checkbox status="success">Success Checkbox</nb-checkbox>
+          <nb-checkbox status="warning">Warning Checkbox</nb-checkbox>
+          <nb-checkbox status="danger">Danger Checkbox</nb-checkbox>
         </div>
       </nb-card-body>
     </nb-card>
 
     <nb-card>
       <nb-card-header>Checkboxes & Radios</nb-card-header>
-      <nb-card-body>
-        <div class="row demo-checkboxes-radio">
-          <div class="demo-items col-sm-4">
-            <nb-checkbox>Checkbox 1</nb-checkbox>
-            <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
-          </div>
-          <div class="demo-items col-sm-4">
-            <nb-radio-group [(value)]="radioGroupValue">
-              <nb-radio
-                [value]="'This is value 1'">
-                Radio 1
-              </nb-radio>
-              <nb-radio
-                [value]="'This is value 2'">
-                Radio 2
-              </nb-radio>
-              <nb-radio
-                [value]="'This is value 3'">
-                Radio 3
-              </nb-radio>
-            </nb-radio-group>
-          </div>
-          <div class="demo-items col-sm-4">
-            <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
-            <nb-radio-group disabled>
-              <nb-radio
-                [value]="'Disabled Value'">
-                Disabled Radio
-              </nb-radio>
-            </nb-radio-group>
-          </div>
+      <nb-card-body class="checkbox-radio">
+        <div class="demo-items">
+          <nb-checkbox>Checkbox 1</nb-checkbox>
+          <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
+        </div>
+        <div class="demo-items">
+          <nb-radio-group [(value)]="radioGroupValue">
+            <nb-radio
+              [value]="'This is value 1'">
+              Radio 1
+            </nb-radio>
+            <nb-radio
+              [value]="'This is value 2'">
+              Radio 2
+            </nb-radio>
+            <nb-radio
+              [value]="'This is value 3'">
+              Radio 3
+            </nb-radio>
+          </nb-radio-group>
+        </div>
+        <div class="demo-items">
+          <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
+          <nb-radio-group disabled>
+            <nb-radio
+              [value]="'Disabled Value'">
+              Disabled Radio
+            </nb-radio>
+          </nb-radio-group>
         </div>
       </nb-card-body>
     </nb-card>
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.scss b/src/app/pages/forms/form-inputs/form-inputs.component.scss
index e4c3700c..f3fbf932 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.scss
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.scss
@@ -1,35 +1,26 @@
 nb-card-body {
   overflow: visible;
+  padding-top: 0;
+
+  > * {
+    margin-top: 1rem;
+  }
 }
 
-.input-group {
-  margin-bottom: 1rem;
-}
-
+.full-name-inputs,
 .validation-checkboxes {
   display: flex;
-  justify-content: space-between;
+  margin: 0 -0.5rem;
+
+  > * {
+    margin: 0 0.5rem;
+  }
+}
+
+.checkbox-radio {
+  display: flex;
 }
 
 .demo-items {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-}
-
-.demo-checkboxes-radio {
-  display: flex;
-  justify-content: space-between;
-}
-
-.full-name-inputs {
-  display: flex;
-}
-
-.dropdown-menu {
-  width: auto;
-}
-
-.form-group label {
-  padding: 0 0 0.75rem;
+  flex: 1 0 33%;
 }