From 0c22fbb7843817b5ff74839cd48dd26fcab8bc96 Mon Sep 17 00:00:00 2001
From: Alexander Zhukov <a.zhukov@akveo.com>
Date: Mon, 24 Jul 2017 17:23:54 +0300
Subject: [PATCH] fix(buttons): add margin for the examples blocks

---
 .../forms/form-inputs/form-inputs.component.html     |  8 ++++----
 .../forms/form-inputs/form-inputs.component.scss     |  9 +++++++++
 .../button-groups/button-groups.component.html       |  8 ++++----
 .../button-groups/button-groups.component.scss       | 12 ++++++++++++
 4 files changed, 29 insertions(+), 8 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 b8684526..27aa38dd 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -166,23 +166,23 @@
           </div>
           <div class="demo-radio">
             <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input">
+              <input type="radio" class="custom-control-input" name="customRadio">
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">Radio 1</span>
             </label>
             <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input">
+              <input type="radio" class="custom-control-input" name="customRadio">
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">Radio 2</span>
             </label>
             <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input">
+              <input type="radio" class="custom-control-input" name="customRadio">
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">Radio 3</span>
             </label>
           </div>
           <div class="demo-disabled-checkbox-radio">
-            <nga-checkbox [disabled]="true">Disbaled Checkbox</nga-checkbox>
+            <nga-checkbox [disabled]="true">Disabled Checkbox</nga-checkbox>
             <label class="custom-control custom-radio">
               <input type="radio" class="custom-control-input" disabled>
               <span class="custom-control-indicator"></span>
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 1319ca11..34e7092e 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.scss
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.scss
@@ -1,6 +1,11 @@
 @import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
+
+  nga-card-body {
+    overflow: visible;
+  }
+
   .input-group {
     margin-bottom: 1rem;
   }
@@ -88,4 +93,8 @@
       top: 0.25rem;
     }
   }
+
+  .dropdown {
+    width: 25%;
+  }
 }
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
index 46afae75..07cd9221 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
@@ -3,9 +3,9 @@
   <nga-card-body>
     <div class="row">
       <div class="col-md-12">
-        <div class="example-container">
+        <div class="example-container toggle-types">
           <div class="container-title">Toggle Types</div>
-          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width">
+          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
             <label class="btn btn-outline-primary">
               <input type="radio" value="left"> Left
             </label>
@@ -71,8 +71,8 @@
           </div>
         </div>
         <div class="example-container">
-          <div class="container-title">Divided Button Group</div>
-          <div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width" data-toggle="buttons">
+          <div class="container-title divided-button-group">Divided Button Group</div>
+          <div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group" data-toggle="buttons">
             <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
               <input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i class="ion-ios-americanfootball-outline"></i>
             </label>
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
index fe782483..8669c0de 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
@@ -27,6 +27,18 @@
     flex: 1;
   }
 
+  .toggle-types {
+    .btn-toggle-radio-group {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .divided-button-group {
+    .btn-divided-checkbox-group {
+      margin-bottom: 1rem;
+    }
+  }
+
   .example-container:not(:last-child) {
     margin-bottom: 2rem;
   }