1
0
mirror of https://github.com/bitwarden/browser synced 2026-02-05 03:03:26 +00:00
Files
browser/libs/components/src/form-control/form-control.component.html
Bryan Cunningham 913c3ddbec [CL-620] add padding to increase checkbox clickable area (#15331)
* add padding to increaase checkbox clickable area

* fix checkbox story imports

* enlarge click area of checkbox w/out label

* apply disabled states to before

* WIP

* revert experimental changes

* add negative margin to account for extra padding

* Remove margin from checkbox and apply in form control

* Remove margin from radio as it's applied in form control

* add back line height removed in error
2025-07-03 12:14:10 -04:00

28 lines
1005 B
HTML

<label
class="tw-transition tw-items-start [&:has(input[type='checkbox'])]:tw-gap-[.25rem] [&:has(input[type='radio'])]:tw-gap-1.5 tw-select-none tw-mb-0 tw-inline-flex tw-rounded has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
[ngClass]="[formControl.disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
>
<ng-content></ng-content>
<span
class="tw-inline-flex tw-flex-col"
[ngClass]="formControl.disabled ? 'tw-text-muted' : 'tw-text-main'"
>
<span bitTypography="body2">
<ng-content select="bit-label"></ng-content>
@if (required) {
<span class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
}
</span>
@if (!hasError) {
<span class="[&_bit-hint]:tw-mt-0 tw-leading-none">
<ng-content select="bit-hint"></ng-content>
</span>
}
</span>
</label>
@if (hasError) {
<div class="tw-mt-1 tw-text-danger tw-text-xs tw-ms-0.5">
<i class="bwi bwi-error"></i> {{ displayError }}
</div>
}