bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 22:03:36 +00:00
Code Issues Releases Wiki Activity

Migrated Stripe payment fields from Bootstrap to Tailwind (#13633)

Browse Source
This commit is contained in:
Conner Turnbull
2025-03-25 07:41:35 -04:00
committed by GitHub
parent c8069baa24
commit ec07ffde93
4 changed files with 27 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/billing/services/stripe.service.ts
View File

@@ -161,6 +161,7 @@ export class StripeService {
},
},
classes: {
base: "tw-stripe-form-control",
focus: "is-focused",
empty: "is-empty",
invalid: "is-invalid",
@@ -168,7 +169,6 @@ export class StripeService {
};
options.style.base.fontWeight = "500";
options.classes.base = "v2";
// Remove the placeholder for number and CVC fields
if (["cardNumber", "cardCvc"].includes(element)) {

6
apps/web/src/app/billing/shared/payment/payment.component.html
View File

@@ -46,7 +46,7 @@
<app-payment-label for="stripe-card-number" required>
{{ "number" | i18n }}
</app-payment-label>
<div id="stripe-card-number" class="form-control stripe-form-control"></div>
<div id="stripe-card-number" class="tw-stripe-form-control"></div>
</div>
<div class="tw-col-span-1 tw-flex tw-items-end">
<img
@@ -59,7 +59,7 @@
<app-payment-label for="stripe-card-expiry" required>
{{ "expiration" | i18n }}
</app-payment-label>
<div id="stripe-card-expiry" class="form-control stripe-form-control"></div>
<div id="stripe-card-expiry" class="tw-stripe-form-control"></div>
</div>
<div class="tw-col-span-1">
<app-payment-label for="stripe-card-cvc" required>
@@ -74,7 +74,7 @@
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</app-payment-label>
<div id="stripe-card-cvc" class="form-control stripe-form-control"></div>
<div id="stripe-card-cvc" class="tw-stripe-form-control"></div>
</div>
</div>
</ng-container>

52
apps/web/src/scss/forms.scss
View File

@@ -98,58 +98,6 @@ input[type="checkbox"] {
cursor: pointer;
}
.form-control.stripe-form-control:not(.v2) {
padding-top: 0.55rem;
&.is-focused {
outline: 0;
@include themify($themes) {
background-color: themed("inputBackgroundColor");
border-color: themed("inputBorderColor");
box-shadow: 0 0 0 $input-focus-width
rgba(mix(color-yiq(themed("primary")), themed("primary"), 15%), 0.5);
color: themed("inputTextColor");
}
&.is-invalid {
opacity: 0.75;
@include themify($themes) {
box-shadow: 0 0 0 $input-focus-width themed("danger");
}
}
}
&.is-invalid {
@include themify($themes) {
border-color: themed("danger");
}
}
}
.form-control.stripe-form-control.v2 {
padding: 0.6875rem 0.875rem;
border-radius: 0.5rem;
border-color: rgb(var(--color-text-muted));
height: unset;
font-weight: 500;
color: rgb(var(--color-text-main));
background-color: rgb(var(--color-background));
&:hover {
border-color: rgb(var(--color-primary-600));
}
&.is-focused {
outline: 0;
border-color: rgb(var(--color-primary-600));
}
&.is-invalid {
color: rgb(var(--color-text-main));
border-color: rgb(var(--color-danger-600));
}
}
.dropdown-menu,
.dropdown-item {
@include themify($themes) {

23
apps/web/src/scss/tailwind.css
View File

@@ -29,6 +29,29 @@
@apply tw-text-muted !important;
}
/**
* Stripe form control styling
*/
.tw-stripe-form-control {
@apply tw-block tw-w-full tw-h-11 tw-rounded-lg tw-bg-background tw-border tw-border-solid tw-border-secondary-500 tw-px-3 tw-py-2 tw-text-main;
@apply hover:tw-border-primary-600;
@apply focus:tw-outline-none focus:tw-border-primary-600 focus:tw-border-2 focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-primary-600;
&.is-invalid {
@apply tw-border-danger-600 hover:tw-border-danger-700;
}
&.is-focused {
@apply tw-outline-none tw-border-primary-600 focus:tw-border-primary-600;
&.is-invalid {
@apply tw-border-danger-600;
}
}
}
/**
* Loading page
*/