[ADF-1611] Demo shell responsiveness (#2426)

* Reapplying the unreappliable

* Fix buggy search button

* Fix settings

* Last bit of responsive stylings

ng2-components/ng2-alfresco-search/src/components/search-control.component.html

@@ -1,7 +1,7 @@
 <form #f="ngForm" (ngSubmit)="onSearch(f.value)" class="adf-search-form">
     <div class="adf-search-container"
         [@transitionMessages]="subscriptAnimationState">
-        <a md-button
+        <a md-icon-button
                 *ngIf="expandable"
                 id="adf-search-button"
             (click)="toggleSearchBar()"

ng2-components/ng2-alfresco-search/src/components/search-control.component.scss

@@ -1,19 +1,11 @@
 @mixin mat-search-control-theme($theme) {
     $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
 
     .adf {
 
-        &-search-button.mat-button {
-            margin-right: 10px;
-            border-radius: 50%;
-            height: 32px;
-            width: 32px;
-            min-width: 20px;
-            padding: 0;
-            overflow: hidden;
-            color: inherit;
-            line-height: normal;
-            border: none;
+        &-search-button.mat-icon-button {
+            margin-right: 5px;
         }
 
         &-search-container {

ng2-components/ng2-alfresco-search/src/components/search-control.component.ts

@@ -29,7 +29,7 @@ import { SearchAutocompleteComponent } from './search-autocomplete.component';
     animations: [
         trigger('transitionMessages', [
             state('active', style({transform: 'translateX(0%)'})),
-            state('inactive', style({transform: 'translateX(86%)'})),
+            state('inactive', style({transform: 'translateX(83%)'})),
             state('no-animation', style({transform: 'translateX(0%)', width: '100%'})),
             transition('inactive => active',
                 animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),