bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 01:03:35 +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

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
*/