chore(build): switch to bootstrap 4 alpha 4

fix #270

src/app/pages/forms/components/inputs/components/selectInputs/selectInput.scss

@@ -0,0 +1,9 @@
+@import "../../../../../../theme/sass/conf/conf.scss";
+
+select.form-control[multiple] {
+  overflow-y: scroll;
+}
+
+select.form-control {
+  color: $default;
+}

src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'select-inputs',
+  styles: [require('./selectInput.scss')],
   template: require('./selectInputs.html')
 })
 export class SelectInputs {

src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.html

@@ -12,14 +12,14 @@
     </div>
   </div>
   <div class="form-group row">
-    <div class="col-sm-offset-2 col-sm-10">
+    <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <ba-checkbox [(ngModel)]="isRemember" [label]="'Remember me'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
       </div>
     </div>
   </div>
   <div class="form-group row">
-    <div class="col-sm-offset-2 col-sm-10">
+    <div class="offset-sm-2 col-sm-10">
       <button type="submit" class="btn btn-warning">Sign in</button>
     </div>
   </div>

src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts

@@ -2,6 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'inline-form',
+  styles: [require('./inlineForm.scss')],
   template: require('./inlineForm.html'),
 })
 export class InlineForm {

src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.html

@@ -1,12 +1,16 @@
 <form class="row form-inline">
-  <div class="form-group col-sm-3 col-xs-6">
+  <div class="form-group col-sm-3">
     <input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
   </div>
-  <div class="form-group col-sm-3 col-xs-6">
+  <div class="form-group col-sm-3">
     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
   </div>
-  <div class="checkbox">
-    <ba-checkbox [(ngModel)]="isRemember" [label]="'Remember me'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
+  <div class="form-group">
+    <div class="checkbox">
+      <ba-checkbox [(ngModel)]="isRemember" [label]="'Remember me'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
+    </div>
+  </div>
+  <div class="form-group">
+    <button type="submit" class="btn btn-primary">Send invitation</button>
   </div>
-  <button type="submit" class="btn btn-primary">Send invitation</button>
 </form>

src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.scss

@@ -0,0 +1,5 @@
+.checkbox {
+  display: inline-block;
+  margin-bottom: -12px;
+  margin-left: 12px;
+}

src/app/pages/register/register.html

@@ -34,7 +34,7 @@
         </div>
       </div>
       <div class="form-group row">
-        <div class="col-sm-offset-2 col-sm-10">
+        <div class="offset-sm-2 col-sm-10">
           <button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">Sign up</button>
         </div>
       </div>

src/app/pages/ui/components/grid/grid.html

@@ -160,21 +160,21 @@
           <div class="col-md-4">
             <div>.col-md-4</div>
           </div>
-          <div class="col-md-4 col-md-offset-4">
-            <div>.col-md-4 .col-md-offset-4</div>
+          <div class="col-md-4 offset-md-4">
+            <div>.col-md-4 .offset-md-4</div>
           </div>
         </div>
         <div class="row show-grid">
-          <div class="col-md-3 col-md-offset-3">
-            <div>.col-md-3 .col-md-offset-3</div>
+          <div class="col-md-3 offset-md-3">
+            <div>.col-md-3 .offset-md-3</div>
           </div>
-          <div class="col-md-3 col-md-offset-3">
-            <div>.col-md-3 .col-md-offset-3</div>
+          <div class="col-md-3 offset-md-3">
+            <div>.col-md-3 .offset-md-3</div>
           </div>
         </div>
         <div class="row show-grid">
-          <div class="col-md-6 col-md-offset-3">
-            <div>.col-md-6 .col-md-offset-3</div>
+          <div class="col-md-6 offset-md-3">
+            <div>.col-md-6 .offset-md-3</div>
           </div>
         </div>
 

src/app/theme/components/baCheckbox/baCheckbox.scss

@@ -48,15 +48,11 @@
   position: relative;
 }
 
-label.custom-checkbox > span {
-  display: block;
-  margin-top: -13px;
-  margin-right: 10px;
-}
+label.custom-checkbox {
+  margin-bottom: 12px;
 
-.form-horizontal {
-  .checkbox, .checkbox-inline{
-    padding-top: 0;
+  & > span {
+    display: block;
+    margin-right: 10px;
   }
 }
-

src/app/theme/components/baContentTop/baContentTop.html

@@ -2,8 +2,7 @@
   <h1 class="al-title">{{ activePageTitle }}</h1>
 
   <ul class="breadcrumb al-breadcrumb">
-    <li>
-      <a routerLink="/pages/dashboard">Home</a></li>
-    <li>{{ activePageTitle }}</li>
+    <li class="breadcrumb-item"><a routerLink="/pages/dashboard">Home</a></li>
+    <li class="breadcrumb-item active">{{ activePageTitle }}</li>
   </ul>
 </div>

src/app/theme/components/baContentTop/baContentTop.scss

@@ -30,6 +30,10 @@ h1.al-title {
     a {
       color: $primary-light;
     }
+
+    &.breadcrumb-item.active {
+      color: $default;
+    }
   }
 }
 

src/app/theme/components/baPageTop/baPageTop.scss

@@ -116,7 +116,6 @@ a.collapse-menu-link {
 
 .search {
   text-shadow: none;
-  color: $sidebar-text;
   font-size: 13px;
   line-height: 25px;
   transition: all 0.5s ease;
@@ -138,6 +137,7 @@ a.collapse-menu-link {
     margin-right: 13px;
   }
   input {
+    color: $sidebar-text;
     background: none;
     border: none;
     outline: none;