Updated Flex Layout package

+ Fixed: Fuse sidebar doesn't scroll when the custom scrollbars disabled
+ Fixed: Expanded search bar style

package-lock.json

@@ -185,9 +185,9 @@
       }
     },
     "@angular/flex-layout": {
-      "version": "5.0.0-beta.13",
+      "version": "5.0.0-beta.14",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.13.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.14.tgz",
-      "integrity": "sha1-ga1q1GEAOUbnxSKSCCGla6cpKoU=",
+      "integrity": "sha512-/fsOqXFUKdCmzzZx0bZ0HCYwcV+BSbVuIgOhaCrZKHj2rqiWKKPgj1ErU3HMT68bBBGag0u0skTdLGtrBorRIA==",
       "requires": {
         "tslib": "1.9.0"
       }
@@ -578,7 +578,7 @@
       "requires": {
         "angular-draggable-droppable": "2.0.0",
         "angular-resizable-element": "2.0.0",
-        "calendar-utils": "0.1.1",
+        "calendar-utils": "0.1.2",
         "date-fns": "1.29.0",
         "positioning": "1.3.1",
         "tslib": "1.9.0"
@@ -1678,9 +1678,9 @@
       "dev": true
     },
     "calendar-utils": {
-      "version": "0.1.1",
+      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.1.2.tgz",
-      "integrity": "sha512-75JPgUK7l7OTg4ZptJMuuIoQzLndc4tcGhBCFtEONr0AMlD7zFVZthOC6Sf29K8r81A1+BJ/tDIFlElgY4XFFw=="
+      "integrity": "sha512-9j4Zd1itopNYTSWzFU4MqD2IDHMqznfxsGr8UWGh7hWv+lKzjRJz0LS29iAg5rHtP6+6x3ikQnhoMGqFUzoD2Q=="
     },
     "callsite": {
       "version": "1.0.0",
@@ -2145,7 +2145,7 @@
     },
     "compression": {
       "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
+      "resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
       "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
       "dev": true,
       "requires": {
@@ -11161,7 +11161,7 @@
         "minimist": "1.2.0",
         "mkdirp": "0.5.1",
         "source-map": "0.6.1",
-        "source-map-support": "0.5.3"
+        "source-map-support": "0.5.4"
       },
       "dependencies": {
         "minimist": {
@@ -11177,9 +11177,9 @@
           "dev": true
         },
         "source-map-support": {
-          "version": "0.5.3",
+          "version": "0.5.4",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.4.tgz",
-          "integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==",
+          "integrity": "sha512-PETSPG6BjY1AHs2t64vS2aqAgu6dMIMXJULWFBGbh2Gr8nVLbCFDo6i/RMMvviIQ2h1Z8+5gQhVKSn2je9nmdg==",
           "dev": true,
           "requires": {
             "source-map": "0.6.1"

package.json

@@ -24,7 +24,7 @@
     "@angular/common": "5.2.8",
     "@angular/compiler": "5.2.8",
     "@angular/core": "5.2.8",
-    "@angular/flex-layout": "5.0.0-beta.13",
+    "@angular/flex-layout": "5.0.0-beta.14",
     "@angular/forms": "5.2.8",
     "@angular/http": "5.2.8",
     "@angular/material": "5.2.4",

src/@fuse/components/search-bar/search-bar.component.html

@@ -1,5 +1,7 @@
-<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
+<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
-    <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
+
+    <div class="fuse-search-bar-content" [ngClass]="toolbarColor">
+
         <label for="fuse-search-bar-input">
             <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
@@ -10,7 +12,8 @@
             </span>-->
         </label>
 
-        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
+        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"
+               fxFlex>
 
         <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
                 aria-label="Collapse Search Bar">
@@ -18,4 +21,5 @@
         </button>
 
     </div>
+
 </div>

src/@fuse/components/search-bar/search-bar.component.scss

@@ -3,6 +3,8 @@
 :host {
 
     .fuse-search-bar {
+        display: flex;
+        flex: 0 1 auto;
         min-width: 64px;
         height: 64px;
         font-size: 13px;
@@ -11,6 +13,12 @@
             height: 56px;
         }
 
+        .fuse-search-bar-content {
+            display: flex;
+            flex: 1 1 auto;
+            align-items: center;
+            justify-content: flex-start;
+
             .fuse-search-bar-expander,
             .fuse-search-bar-collapser {
                 cursor: pointer;
@@ -30,6 +38,7 @@
                 width: 64px !important;
                 height: 64px !important;
                 line-height: 64px !important;
+
                 @include media-breakpoint-down('sm') {
                     height: 56px !important;
                     line-height: 56px !important;
@@ -42,10 +51,12 @@
 
             #fuse-search-bar-input {
                 display: none;
+                flex: 1 0 auto;
                 min-height: 64px;
                 background-color: transparent;
                 font-size: 16px;
             }
+        }
 
         &.expanded {
             position: absolute;
@@ -55,12 +66,15 @@
             left: 0;
             z-index: 10;
 
+            .fuse-search-bar-content {
+
                 #fuse-search-bar-input {
-                display: block;
+                    display: flex;
                 }
 
                 .fuse-search-bar-collapser {
-                display: block;
+                    display: flex;
+                }
             }
         }
     }

src/@fuse/components/sidebar/sidebar.component.scss

@@ -5,7 +5,8 @@ fuse-sidebar {
     position: absolute;
     top: 0;
     bottom: 0;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     width: 280px;
     min-width: 280px;
     max-width: 280px;