vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

more style fixes

This commit is contained in:
Kyle Spearrin 2019-02-19 00:23:15 -05:00
parent 212d81b93c
commit 0b1abc9ab0
3 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/settings/payment.component.html
View File

@ -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>

3
src/app/settings/payment.component.ts
View File

@ -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: {

21
src/scss/styles.scss
View File

@ -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; &.is-focused {
outline: 0; color: $input-focus-color;
box-shadow: $input-focus-box-shadow; 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);
} }
} }