chore(build): switch to bootstrap 4 alpha 4

fix #270

.bootstraprc

@@ -12,6 +12,7 @@ useFlexbox: false
 styleLoaders:
   - style
   - css
+  - postcss
   - sass
 
 # Extract styles to stand-alone css file
@@ -78,8 +79,6 @@ styles:
   card: true
   breadcrumb: true
   pagination: true
-  pager: true
-  labels: true
   jumbotron: true
   alert: true
   progress: true
@@ -87,6 +86,7 @@ styles:
   list-group: true
   responsive-embed: true
   close: true
+  tags: true
 
   # Components w/ JavaScript
   modal: true
@@ -96,9 +96,6 @@ styles:
 
   # Utility classes
   utilities: true
-  utilities-background: true
-  utilities-spacing: true
-  utilities-responsive: true
 
 ### Bootstrap scripts
 scripts:

config/webpack.common.js

@@ -318,8 +318,26 @@ module.exports = function (options) {
        */
       new HtmlElementsPlugin({
         headTags: require('./head-config.common')
-      })
+      }),
 
+      new webpack.ProvidePlugin({
+        $: "jquery",
+        jQuery: "jquery",
+        "window.jQuery": "jquery",
+        Tether: "tether",
+        "window.Tether": "tether",
+        Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
+        Alert: "exports?Alert!bootstrap/js/dist/alert",
+        Button: "exports?Button!bootstrap/js/dist/button",
+        Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
+        Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
+        Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
+        Modal: "exports?Modal!bootstrap/js/dist/modal",
+        Popover: "exports?Popover!bootstrap/js/dist/popover",
+        Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
+        Tab: "exports?Tab!bootstrap/js/dist/tab",
+        Util: "exports?Util!bootstrap/js/dist/util"
+      })
     ],
 
     /*

package.json

@@ -17,33 +17,30 @@
     "@angular/platform-server": "2.0.0",
     "@angular/router": "3.0.0",
 
-    "@angularclass/request-idle-callback": "^1.0.7",
-    "@angularclass/webpack-toolkit": "^1.3.3",
     "@angularclass/conventions-loader": "^1.0.2",
     "@angularclass/hmr": "~1.2.0",
     "@angularclass/hmr-loader": "~3.0.2",
-    "assets-webpack-plugin": "^3.4.0",
+    "@angularclass/request-idle-callback": "^1.0.7",
-
+    "@angularclass/webpack-toolkit": "^1.3.3",
-    "http-server": "^0.9.0",
-    "ie-shim": "^0.1.0",
-    "rxjs": "5.0.0-beta.12",
-    "zone.js": "~0.6.23",
 
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "^3.5.1",
-    "bootstrap": "4.0.0-alpha.2",
+    "assets-webpack-plugin": "^3.4.0",
-    "bootstrap-loader": "1.1.6",
+    "bootstrap": "4.0.0-alpha.4",
+    "bootstrap-loader": "2.0.0-beta.12",
     "chart.js": "^1.1.1",
     "chartist": "^0.9.7",
     "ckeditor": "^4.5.9",
     "core-js": "^2.4.1",
     "easy-pie-chart": "^2.1.7",
     "extract-text-webpack-plugin": "2.0.0-beta.3",
-    "font-awesome": "^4.6.1",
+    "font-awesome": "^4.6.3",
     "font-awesome-sass-loader": "^1.0.2",
     "fullcalendar": "^2.7.2",
     "google-maps": "^3.2.1",
+    "http-server": "^0.9.0",
+    "ie-shim": "^0.1.0",
     "ionicons": "^2.0.1",
     "is-electron-renderer": "^2.0.0",
     "jquery": "^2.2.3",
@@ -52,12 +49,15 @@
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
     "ng2-bootstrap": "1.1.5",
-    "ng2-tree": "^0.0.2-7",
     "ng2-ckeditor": "1.0.7",
     "ng2-smart-table": "^0.3.1",
+    "ng2-tree": "^0.0.2-7",
     "ng2-uploader": "1.1.0",
     "normalize.css": "^4.1.1",
-    "tether": "^1.2.4"
+    "postcss-loader": "^1.0.0",
+    "rxjs": "5.0.0-beta.12",
+    "tether": "^1.2.4",
+    "zone.js": "~0.6.23"
   },
   "devDependencies": {
     "angular2-template-loader": "^0.5.0",

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="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>
 </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 class="col-md-4 offset-md-4">
-            <div>.col-md-4 .col-md-offset-4</div>
+            <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 class="col-md-3 offset-md-3">
-            <div>.col-md-3 .col-md-offset-3</div>
+            <div>.col-md-3 .offset-md-3</div>
           </div>
-          <div class="col-md-3 col-md-offset-3">
+          <div class="col-md-3 offset-md-3">
-            <div>.col-md-3 .col-md-offset-3</div>
+            <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 class="col-md-6 offset-md-3">
-            <div>.col-md-6 .col-md-offset-3</div>
+            <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 {
+label.custom-checkbox {
-  display: block;
+  margin-bottom: 12px;
-  margin-top: -13px;
-  margin-right: 10px;
-}
 
-.form-horizontal {
+  & > span {
-  .checkbox, .checkbox-inline{
+    display: block;
-    padding-top: 0;
+    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>
+    <li class="breadcrumb-item"><a routerLink="/pages/dashboard">Home</a></li>
-      <a routerLink="/pages/dashboard">Home</a></li>
+    <li class="breadcrumb-item active">{{ activePageTitle }}</li>
-    <li>{{ 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;