mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
634e65af96
* issue #1 Because the input element gets no focus when the search button is clicked, there is no way to toggle off the search input, when user clicks outside the search bar Added focus on search input when the user click on search input issue #2 Increased the width of the search results container in order to be able to show more text translated results container to the left in order to prevent it to overlap the menu items from the navigation bar * Adding test spec for checking if search input has focus after the user clicks on search button * removed deprecated render dependency using this call " searchInput.nativeElement.focus()" to enable input focus * fixed broken animation on input search focus() * Fix search control component tests * Fix rebasing
70 lines
1.8 KiB
SCSS
70 lines
1.8 KiB
SCSS
@mixin adf-search-control-theme($theme) {
|
|
$background: map-get($theme, background);
|
|
$foreground: map-get($theme, foreground);
|
|
$primary: map-get($theme, primary);
|
|
$accent: map-get($theme, accent);
|
|
$mat-menu-border-radius: 2px !default;
|
|
|
|
.adf-search-container {
|
|
overflow: hidden !important;
|
|
adf-search-bar {
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.adf-search-button {
|
|
left: -13px;
|
|
}
|
|
|
|
.adf {
|
|
|
|
&-search-fixed-text {
|
|
line-height: normal;
|
|
}
|
|
|
|
&-input-form-field-divider {
|
|
.mat-form-field-underline {
|
|
background-color: mat-color($primary, 50);
|
|
.mat-form-field-ripple {
|
|
background-color: mat-color($primary, 50);
|
|
}
|
|
}
|
|
font-size: 16px;
|
|
}
|
|
|
|
&-search-result-autocomplete {
|
|
@include mat-menu-base(2);
|
|
transform-origin: top left;
|
|
transform:translateX(-40px);
|
|
position: absolute;
|
|
max-width: 235px;
|
|
max-height: 400px;
|
|
margin-left: 45px;
|
|
margin-top: -22px;
|
|
font-size: 15px;
|
|
z-index: 5;
|
|
color: mat-color($foreground, text);
|
|
background-color: mat-color($background, card);
|
|
border-radius: $mat-menu-border-radius;
|
|
|
|
@media screen and ($mat-small) {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
&-search-autocomplete-item {
|
|
|
|
&:hover {
|
|
background-color: mat-color($background, 'hover');
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.highlight {
|
|
color: mat-color($primary, 900);
|
|
}
|
|
}
|