purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2026-03-10 22:48:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen
2018-03-31 13:22:27 +03:00
parent 5f974c4ed2 4e6207fef5
commit 47ee65a980
5 changed files with 69 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/@fuse/components/search-bar/search-bar.component.html
View File

@@ -1,5 +1,7 @@
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
<div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
<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>

80
src/@fuse/components/search-bar/search-bar.component.scss
View File

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

3
src/@fuse/components/sidebar/sidebar.component.scss
View File

@@ -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;