mirror of
https://github.com/bitwarden/browser
synced 2026-02-11 14:04:03 +00:00
42 lines
1.2 KiB
HTML
42 lines
1.2 KiB
HTML
@let isFocused = plan().isSelected;
|
|
@let isRecommended = plan().isAnnual;
|
|
|
|
<bit-card
|
|
class="tw-h-full"
|
|
[ngClass]="getPlanCardContainerClasses()"
|
|
(click)="cardClicked.emit()"
|
|
[attr.tabindex]="!isFocused || plan().isDisabled ? '-1' : '0'"
|
|
[attr.data-selected]="plan()?.isSelected"
|
|
>
|
|
<div class="tw-relative">
|
|
@if (isRecommended) {
|
|
<div
|
|
class="tw-bg-secondary-100 tw-text-center !tw-border-0 tw-text-sm tw-font-medium tw-py-1"
|
|
[ngClass]="{
|
|
'tw-bg-primary-700 !tw-text-contrast': plan().isSelected,
|
|
'tw-bg-secondary-100': !plan().isSelected,
|
|
}"
|
|
>
|
|
{{ "recommended" | i18n }}
|
|
</div>
|
|
}
|
|
<div
|
|
class="tw-px-2 tw-pb-[4px]"
|
|
[ngClass]="{
|
|
'tw-py-1': !plan().isSelected,
|
|
'tw-py-0': plan().isSelected,
|
|
}"
|
|
>
|
|
<h3
|
|
class="tw-text-[1.25rem] tw-mt-[6px] tw-font-medium tw-mb-0 tw-leading-[2rem] tw-flex tw-items-center"
|
|
>
|
|
<span class="tw-capitalize tw-whitespace-nowrap">{{ plan().title }}</span>
|
|
</h3>
|
|
<span>
|
|
<b class="tw-text-lg tw-font-medium">{{ plan().costPerMember | currency: "$" }} </b>
|
|
<span class="tw-text-xs tw-px-0"> /{{ "monthPerMember" | i18n }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</bit-card>
|