fuse-angular/src/@fuse/components/search-bar/search-bar.component.scss
Sercan Yemen bd67b660c8 Updated Flex Layout package
+ Fixed: Fuse sidebar doesn't scroll when the custom scrollbars disabled
+ Fixed: Expanded search bar style
2018-03-31 12:03:21 +03:00

92 lines
2.1 KiB
SCSS

@import "src/@fuse/scss/fuse";
:host {
.fuse-search-bar {
display: flex;
flex: 0 1 auto;
min-width: 64px;
height: 64px;
font-size: 13px;
@include media-breakpoint-down('sm') {
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;
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-collapser {
display: none;
}
#fuse-search-bar-input {
display: none;
flex: 1 0 auto;
min-height: 64px;
background-color: transparent;
font-size: 16px;
}
}
&.expanded {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
.fuse-search-bar-content {
#fuse-search-bar-input {
display: flex;
}
.fuse-search-bar-collapser {
display: flex;
}
}
}
}
body {
&.fuse-search-bar-expanded {
#toolbar {
z-index: 999 !important;
}
}
}
}