bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-08 04:33:38 +00:00
Code Issues Releases Wiki Activity

fix(style): [CL-601] Improve CSS per reviewer comments

Browse Source 
Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>
This commit is contained in:
Ben Brooks
2025-06-26 12:53:36 -07:00
parent 4509899b00
commit eb1fd5f7ed
1 changed files with 41 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
libs/components/src/search/search.component.html
View File

@@ -1,44 +1,42 @@
<div class="tw-relative tw-flex tw-items-center">
<form
role="search"
(mouseenter)="isFormHovered.set(true)"
(mouseleave)="isFormHovered.set(false)"
class="tw-relative tw-flex tw-items-center tw-w-full"
<form
role="search"
(mouseenter)="isFormHovered.set(true)"
(mouseleave)="isFormHovered.set(false)"
class="tw-relative tw-flex tw-items-center tw-w-full"
>
<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
<label
[for]="id"
aria-hidden="true"
class="tw-absolute tw-start-2 tw-z-20 !tw-mb-0 tw-cursor-text"
>
<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
<label
[for]="id"
aria-hidden="true"
class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
>
<i class="bwi bwi-search bwi-fw tw-text-muted"></i>
</label>
<input
#input
bitInput
[type]="inputType"
[id]="id"
[placeholder]="placeholder ?? ('search' | i18n)"
class="tw-pl-9"
[ngModel]="searchText"
(ngModelChange)="onChange($event)"
[ngModelOptions]="{ standalone: true }"
(focus)="isInputFocused.set(true)"
(blur)="isInputFocused.set(false); onTouch()"
[disabled]="disabled"
[attr.autocomplete]="autocomplete"
/>
<button
*ngIf="searchText && showResetButton()"
[ngClass]="{
'tw-opacity-0': !showResetButton(),
'tw-bg-text-muted': showResetButton(),
}"
class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-right-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
type="reset"
[attr.aria-label]="searchText ? ('Reset search' | i18n) : ''"
[attr.aria-hidden]="!searchText"
(click)="clearSearch()"
></button>
</form>
</div>
<i class="bwi bwi-search bwi-fw tw-text-muted"></i>
</label>
<input
#input
bitInput
[type]="inputType"
[id]="id"
[placeholder]="placeholder ?? ('search' | i18n)"
class="tw-ps-9"
[ngModel]="searchText"
(ngModelChange)="onChange($event)"
[ngModelOptions]="{ standalone: true }"
(focus)="isInputFocused.set(true)"
(blur)="isInputFocused.set(false); onTouch()"
[disabled]="disabled"
[attr.autocomplete]="autocomplete"
/>
<button
*ngIf="searchText && showResetButton()"
[ngClass]="{
'tw-opacity-0': !showResetButton(),
'tw-bg-text-muted': showResetButton(),
}"
class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-end-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
type="reset"
[attr.aria-label]="searchText ? ('Reset search' | i18n) : ''"
[attr.aria-hidden]="!searchText"
(click)="clearSearch()"
></button>
</form>