bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +00:00
Code Issues Releases Wiki Activity

[PM-17494] Minimum effort removal of bootstrap from filters (#12995)

Browse Source 
Minimum effort migration of the filters to not depend on bootstrap. This migrates the card to tailwind but keeps most of the custom css as it's not strictly required to be migrated.
This commit is contained in:
Oscar Hinton
2025-02-21 14:52:01 +01:00
committed by GitHub
parent 1d04227884
commit 1587f84a5c
3 changed files with 41 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/src/app/tools/send/send.component.html
View File

@@ -22,12 +22,15 @@
{{ "sendDisabledWarning" | i18n }}
</bit-callout>
<div class="tw-grid tw-grid-cols-12 tw-gap-4">
<div class="groupings tw-col-span-3">
<div class="card vault-filters">
<div class="card-header d-flex">
<div class="tw-col-span-3">
<div class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded" data-testid="filters">
<div
class="tw-bg-background-alt tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-rounded-t tw-px-5 tw-py-2.5 tw-font-semibold tw-uppercase"
data-testid="filters-header"
>
{{ "filters" | i18n }}
</div>
<div class="card-body">
<div class="tw-p-5" data-testid="filters-body">
<div class="tw-mb-4">
<bit-search
[(ngModel)]="searchText"

13
apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html
View File

@@ -1,12 +1,15 @@
<div class="card vault-filters">
<div class="container loading-spinner" *ngIf="!isLoaded">
<div class="tw-border tw-border-solid tw-border-secondary-300 tw-rounded" data-testid="filters">
<div class="tw-text-center tw-p-5" *ngIf="!isLoaded">
<i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
</div>
<div *ngIf="isLoaded">
<div class="card-header d-flex">
<div
class="tw-bg-background-alt tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-rounded-t tw-px-5 tw-py-2.5 tw-font-semibold tw-uppercase"
data-testid="filters-header"
>
{{ "filters" | i18n }}
<a
class="ml-auto"
class="tw-float-right"
href="https://bitwarden.com/help/searching-vault/"
target="_blank"
rel="noreferrer"
@@ -15,7 +18,7 @@
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</div>
<div class="card-body">
<div class="tw-p-5" data-testid="filters-body">
<div class="tw-mb-4">
<bit-search
id="search"

77
apps/web/src/scss/vault-filters.scss
View File

@@ -147,62 +147,37 @@
}
}
.groupings {
.card {
#search {
margin-bottom: 1rem;
.filter {
ul:last-child {
margin-bottom: 0;
}
a {
@include themify($themes) {
color: themed("textHeadingColor");
}
}
.show-active {
display: none;
}
li.active {
> .show-active,
> div .show-active {
display: inline;
}
}
li.active {
> button:first-of-type,
> div button:first-of-type {
@include themify($themes) {
background-color: themed("inputBackgroundColor");
border-color: themed("inputBorderColor");
color: themed("inputTextColor");
}
&::placeholder {
@include themify($themes) {
color: themed("inputPlaceholderColor");
}
color: themed("linkColor");
}
}
h3 {
font-weight: normal;
> .bwi,
> div > .bwi {
@include themify($themes) {
color: themed("textMuted");
}
}
ul:last-child {
margin-bottom: 0;
}
.card-body a {
@include themify($themes) {
color: themed("textHeadingColor");
font-weight: themed("linkWeight");
}
}
.show-active {
display: none;
}
li.active {
> .show-active,
> div .show-active {
display: inline;
}
}
li.active {
> button:first-of-type,
> div button:first-of-type {
@include themify($themes) {
color: themed("linkColor");
}
}
> .bwi,
> div > .bwi {
@include themify($themes) {
color: themed("linkColor");
}
color: themed("linkColor");
}
}
}