Your IP : 216.73.216.43
//
// 3D Secure Container
// _____________________________________________
& when (@media-common = true) {
#braintree-three-d-modal {
.lib-vendor-prefix-display();
position: fixed;
top: 0;
left: 0;
align-items: center;
height: 100vh;
width: 100vw;
z-index: 100000;
visibility: visible;
}
#braintree-three-d-modal .bt-modal-frame {
height: 420px;
width: 440px;
margin: auto;
background-color: @color-white;
z-index: 2;
border-radius: 6px;
}
#braintree-three-d-modal .bt-modal-body {
height: 380px;
margin: 20px;
background-color: white;
border: 1px solid lightgray;
}
#braintree-three-d-modal .bt-mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.75;
}
//
// Apple Pay button
// _____________________________________________
.braintree-applepay-container-product {
display: inline-block;
.braintree-apple-pay-button {
padding: 10px 0;
margin: 0;
margin-bottom: 15px;
}
}
.braintree-apple-pay-button {
-webkit-appearance: -apple-pay-button;
-apple-pay-button-type: plain;
display: block;
width: 200px;
min-height: 40px;
border: 1px solid black;
background-image: -webkit-named-image(apple-pay-logo-black);
background-size: 100% ~'calc(60% + 2px)';
background-repeat: no-repeat;
background-color: black;
background-position: 50% 50%;
border-radius: 5px;
padding: 2px;
margin: 20px auto;
transition: background-color .15s;
cursor: pointer;
}
//
// PP Credit Calculator
// _____________________________________________
.ppcredit-summary {
background: linear-gradient(to right, #009CDE, #003087);
color: @color-white;
padding: 15px;
text-align: center;
margin: 10px 0px;
}
.ppcreditcalc-container {
border: 1px solid #dedede;
background: @color-white;
}
.ppcreditcalc-header {
background: @color-white;
padding: 15px;
}
.ppcreditcalc-legal {
background-color: #eee;
border-top: 1px solid #dedede;
padding: 15px;
font-size: 1.2rem;
line-height: 2rem;
}
.ppcreditcalc-instalments {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #DEDEDE;
border-bottom: 1px solid #DEDEDE;
background-color: #eeeeee;
}
.ppcreditcalc-instalments li {
display: inline-block;
margin: 0;
padding: 0;
}
.ppcreditcalc-instalments-term {
display: block;
padding: 10px 15px;
color: #000;
}
.ppcreditcalc-instalments-term:hover {
background: #009CDE;
color: #FFF;
text-decoration: none;
}
.ppcreditcalc-instalments-term.active {
background: #003087;
color: #FFF;
}
.ppcreditcalc-instalment-summary {
padding: 15px;
dl {
margin: 0;
}
dt {
display: inline-block;
width: 50%;
}
dd {
display: inline-block;
}
}
//
// CC FORM
// _____________________________________________
#braintree_expirationDate {
width: 90px;
}
//
// Google Pay
// _____________________________________________
button.braintree-googlepay-button {
background-origin: content-box;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
border: 0;
border-radius: 4px;
box-shadow: rgba(60, 64, 67, 0.3) 0 1px 1px 0, rgba(60, 64, 67, 0.15) 0 1px 3px 1px;
cursor: pointer;
height: 40px;
min-height: 40px;
padding: 11px 24px;
}
button.braintree-googlepay-button.black {
background-color: #000;
box-shadow: none;
padding: 12px 24px @indent__s;
}
button.braintree-googlepay-button.white {
background-color: @color-white;
}
button.braintree-googlepay-button.short {
min-width: 90px;
width: 160px;
}
button.braintree-googlepay-button.black.short {
background-image: url(https://www.gstatic.com/instantbuy/svg/dark_gpay.svg);
}
button.braintree-googlepay-button.white.short {
background-image: url(https://www.gstatic.com/instantbuy/svg/light_gpay.svg);
}
button.braintree-googlepay-button.black:active {
background-color: #5f6368;
}
button.braintree-googlepay-button.black:hover {
background-color: #3c4043;
}
button.braintree-googlepay-button.white:active {
background-color: @color-white;
}
button.braintree-googlepay-button.white:focus {
box-shadow: #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px;
}
button.braintree-googlepay-button.white:hover {
background-color: #f8f8f8;
}
button.braintree-googlepay-button.long {
min-width: 152px;
width: 240px;
}
button.braintree-googlepay-button.white.long {
background-image: url(https://www.gstatic.com/instantbuy/svg/light/en.svg);
}
button.braintree-googlepay-button.black.long {
background-image: url(https://www.gstatic.com/instantbuy/svg/dark/en.svg);
}
.googlepay-minicart-logo {
margin-top: 15px;
text-align: center;
}
.checkout-payment-method .credit-card-types.braintree-credit-card-types img {
width: 30px;
-webkit-filter: none;
-webkit-transition: none;
}
.braintree-card-control {
position: relative;
}
.braintree-credit-card-selected {
position: absolute;
z-index: 10;
left: @indent__s;
}
.braintree-paypal-logo.oneclick-container {
width: 100%;
}
#payment_form_braintree_ach_direct_debit {
.field > .fields {
.field {
.label {
font-weight: @font-weight__semibold;
}
&.required > .label:after {
content: '*';
color: @color-red10;
.lib-font-size(18px);
margin: 0 0 0 5px;
}
.control {
margin: @indent__s @indent__s 0 0;
input[type="text"]::placeholder, input[type="number"]::placeholder {
color: lightgrey;
}
}
}
}
}
#payment-method-braintree-lpm {
.primary {
width: 100%;
.action {
margin-bottom: 12px;
width: 100%;
img {
height: 40px;
}
}
}
}
#payment-method-braintree-cc-vault {
.field {
&.required {
.label {
font-weight: @font-weight__semibold;
&:after {
content: '*';
color: @color-red10;
.lib-font-size(18px);
margin: 0 0 0 5px;
}
}
}
.hosted-control {
background: @color-white;
background-clip: padding-box;
border: 1px solid @color-gray76;
border-radius: 1px;
font-family: @font-family__base;
.lib-font-size(14px);
height: 32px;
padding: 0 9px;
vertical-align: baseline;
box-sizing: border-box;
position: relative;
width: 5rem;
&.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused) ~ .hosted-error {
height: auto;
opacity: 1;
}
}
.hosted-error {
clear: both;
color: @color-red10;
.lib-font-size(12px);
height: 0;
margin-top: 7px;
opacity: 0;
}
}
}
//
// Paypal
// _____________________________________________
.braintree-paypal-fieldset {
display: none;
}
//
// Payment Method Braintree
// _____________________________________________
.payment-method-braintree {
.hosted-control {
border: 1px solid @color-gray76;
height: 32px;
padding: 8px 15px;
max-width: 300px;
&.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused) ~ .hosted-error {
height: auto;
opacity: 1;
}
}
.hosted-error {
clear: both;
color: @color-red10;
.lib-font-size(12px);
height: 0;
margin-top: 7px;
opacity: 0;
}
}
.payment-method-braintree .cvv {
max-width: 200px;
position: relative;
.field-tooltip {
top: @indent__s;
right: @indent__l;
}
}
#braintree_cc_number {
padding-left: 68px;
}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
#braintree-three-d-modal .bt-modal-frame {
width: 100%;
}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.braintree-applepay-container-product {
display: block;
.braintree-apple-pay-button {
width: 100%;
}
}
}