fix(form): fix form inputs and layouts responsiveness

Author: KostyaDanovsky

src/app/pages/forms/form-inputs/form-inputs.component.html

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-6">
+  <div class="col-lg-6">
     <nb-card>
       <nb-card-header>Default Inputs</nb-card-header>
       <nb-card-body>
@@ -116,7 +116,7 @@
     </nb-card>
   </div>
 
-  <div class="col-md-6">
+  <div class="col-lg-6">
     <nb-card>
       <nb-card-header>Input Styles</nb-card-header>
       <nb-card-body>

src/app/pages/forms/form-layouts/form-layouts.component.html

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-md-12">
-    <nb-card>
+    <nb-card class="inline-form-card">
       <nb-card-header>Inline form</nb-card-header>
       <nb-card-body>
         <form class="form-inline">
@@ -24,20 +24,20 @@
       <nb-card-body>
         <form>
           <div class="form-group row">
-            <label for="inputEmail1" class="col-sm-2 col-form-label">Email</label>
-            <div class="col-sm-10">
+            <label for="inputEmail1" class="col-sm-3 col-form-label">Email</label>
+            <div class="col-sm-9">
               <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
             </div>
           </div>
           <div class="form-group row">
-            <label for="inputPassword2" class="col-sm-2 col-form-label">Password</label>
-            <div class="col-sm-10">
+            <label for="inputPassword2" class="col-sm-3 col-form-label">Password</label>
+            <div class="col-sm-9">
               <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2">Radios</label>
-            <div class="col-sm-10">
+            <label class="col-sm-3">Radios</label>
+            <div class="col-sm-9">
               <div class="form-check">
                 <label class="custom-control custom-radio">
                   <input type="radio" class="custom-control-input" name="gridRadios" checked>
@@ -62,7 +62,7 @@
             </div>
           </div>
           <div class="form-group row">
-            <div class="offset-sm-2 col-sm-10">
+            <div class="offset-sm-3 col-sm-9">
               <button type="submit" class="btn btn-primary">Sign in</button>
             </div>
           </div>
@@ -154,26 +154,26 @@
       <nb-card-body>
         <form class="form-horizontal">
           <div class="form-group row">
-            <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
-            <div class="col-sm-10">
+            <label for="inputEmail3" class="col-sm-3 form-control-label">Email</label>
+            <div class="col-sm-9">
               <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
             </div>
           </div>
           <div class="form-group row">
-            <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
-            <div class="col-sm-10">
+            <label for="inputPassword3" class="col-sm-3 form-control-label">Password</label>
+            <div class="col-sm-9">
               <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
             </div>
           </div>
           <div class="form-group row">
-            <div class="offset-sm-2 col-sm-10">
+            <div class="offset-sm-3 col-sm-9">
               <div class="checkbox">
                 <nb-checkbox>Remember me</nb-checkbox>
               </div>
             </div>
           </div>
           <div class="form-group row">
-            <div class="offset-sm-2 col-sm-10">
+            <div class="offset-sm-3 col-sm-9">
               <button type="submit" class="btn btn-warning">Sign in</button>
             </div>
           </div>

src/app/pages/forms/form-layouts/form-layouts.component.scss

@@ -10,3 +10,7 @@ nb-checkbox {
 .form-inline > * {
   margin: 0 1.5rem 1.5rem 0;
 }
+
+nb-card.inline-form-card nb-card-body {
+  padding-bottom: 0;
+}