mirror of
https://github.com/bitwarden/browser.git
synced 2024-10-29 07:59:42 +01:00
more style fixes
This commit is contained in:
parent
212d81b93c
commit
0b1abc9ab0
@ -19,14 +19,14 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="form-group col-4">
|
<div class="form-group col-4">
|
||||||
<label for="stripe-card-number-element">{{'number' | i18n}}</label>
|
<label for="stripe-card-number-element">{{'number' | i18n}}</label>
|
||||||
<div id="stripe-card-number-element" class="form-control"></div>
|
<div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group col-8 d-flex align-items-end">
|
<div class="form-group col-8 d-flex align-items-end">
|
||||||
<img src="../../images/cards.png" alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay" width="323" height="32">
|
<img src="../../images/cards.png" alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay" width="323" height="32">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group col-4">
|
<div class="form-group col-4">
|
||||||
<label for="stripe-card-expiry-element">{{'expiration' | i18n}}</label>
|
<label for="stripe-card-expiry-element">{{'expiration' | i18n}}</label>
|
||||||
<div id="stripe-card-expiry-element" class="form-control"></div>
|
<div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group col-4">
|
<div class="form-group col-4">
|
||||||
<label for="stripe-card-cvc-element" class="d-flex">
|
<label for="stripe-card-cvc-element" class="d-flex">
|
||||||
@ -35,7 +35,7 @@
|
|||||||
<i class="fa fa-question-circle-o"></i>
|
<i class="fa fa-question-circle-o"></i>
|
||||||
</a>
|
</a>
|
||||||
</label>
|
</label>
|
||||||
<div id="stripe-card-cvc-element" class="form-control"></div>
|
<div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
@ -16,10 +16,9 @@ const Keys = {
|
|||||||
const StripeElementStyle = {
|
const StripeElementStyle = {
|
||||||
base: {
|
base: {
|
||||||
color: '#333333',
|
color: '#333333',
|
||||||
lineHeight: '21px',
|
|
||||||
fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
|
fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
|
||||||
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||||
fontSize: '1rem',
|
fontSize: '14px',
|
||||||
fontSmoothing: 'antialiased',
|
fontSmoothing: 'antialiased',
|
||||||
},
|
},
|
||||||
invalid: {
|
invalid: {
|
||||||
|
@ -704,16 +704,23 @@ app-user-billing {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control.is-focused {
|
.form-control.stripe-form-control {
|
||||||
color: $input-focus-color;
|
padding-top: 0.55rem;
|
||||||
background-color: $input-focus-bg;
|
|
||||||
border-color: $input-focus-border-color;
|
|
||||||
outline: 0;
|
|
||||||
box-shadow: $input-focus-box-shadow;
|
|
||||||
|
|
||||||
|
&.is-focused {
|
||||||
|
color: $input-focus-color;
|
||||||
|
background-color: $input-focus-bg;
|
||||||
|
border-color: $input-focus-border-color;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: $input-focus-box-shadow;
|
||||||
|
|
||||||
|
&.is-invalid {
|
||||||
|
box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-invalid-color, .25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.is-invalid {
|
&.is-invalid {
|
||||||
border-color: $form-feedback-invalid-color;
|
border-color: $form-feedback-invalid-color;
|
||||||
box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-invalid-color, .25);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user