Skip to content

A
Adyen Magento2

We will be off from 27/1 (Monday) to 31/1 (Friday) (GMT +7) for our Tet Holiday (Lunar New Year) in our country

Commit 6e014400 authored by cyattilakiss's avatar cyattilakiss Committed by Alessio Zampatti
Browse files
Options

[PW-1746] Upgrade checkout component to 3.2.0 (#541) 

* Update checkout components version to 3.2.0
Update checkout components styling

*  - Adjust styling to new version
 - remove risk enabled false from checkout components
 - Add checkout component script to head
parent a9b0234a
Hide whitespace changes
Inline Side-by-side
Showing with 1306 additions and 545 deletions
Helper/Data.php
View file @ 6e014400
...@@ -33,8 +33,8 @@ class Data extends AbstractHelper ...@@ -33,8 +33,8 @@ class Data extends AbstractHelper
const MODULE_NAME = 'adyen-magento2'; const MODULE_NAME = 'adyen-magento2';
const TEST = 'test'; const TEST = 'test';
const LIVE = 'live'; const LIVE = 'live';
const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js'; const CHECKOUT_COMPONENT_JS_LIVE = 'https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.2.0/adyen.js';
const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js'; const CHECKOUT_COMPONENT_JS_TEST = 'https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.2.0/adyen.js';
/** /**
* @var \Magento\Framework\Encryption\EncryptorInterface * @var \Magento\Framework\Encryption\EncryptorInterface
......
view/adminhtml/web/css/order_create_styles.css
View file @ 6e014400
...@@ -66,31 +66,38 @@ ...@@ -66,31 +66,38 @@
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
} }
/* Checkout component Adyen v3.0.0 styling start */ /* Checkout component Adyen v3.2.0 styling start */
.adyen-checkout__field{ .adyen-checkout__field{
display:block; display:block;
margin-bottom:16px margin-bottom:16px;
} width:100%
.adyen-checkout__field--error input{
border-color:#d10244;
color:#d10244
} }
.adyen-checkout__field:last-child{ .adyen-checkout__field:last-of-type{
margin-bottom:0 margin-bottom:0
} }
.adyen-checkout__label{
display:block
}
.adyen-checkout__helper-text,.adyen-checkout__label__text{ .adyen-checkout__helper-text,.adyen-checkout__label__text{
color:#00112c; color:#00112c;
display:block; display:block;
font-size:.81em; font-size:.81em;
font-weight:400; font-weight:400;
line-height:13px; line-height:13px;
padding-bottom:8px padding-bottom:5px
} }
.adyen-checkout__helper-text{ .adyen-checkout__helper-text{
color:#687282 color:#687282
} }
.adyen-checkout__label__text{ .adyen-checkout__label__text{
transition:color .2s ease-out display:block;
overflow:hidden;
text-overflow:ellipsis;
transition:color .1s ease-out;
white-space:nowrap
}
.adyen-checkout__label__text--error{
color:#d10244
} }
.adyen-checkout__label--focused .adyen-checkout__label__text{ .adyen-checkout__label--focused .adyen-checkout__label__text{
color:#06f color:#06f
...@@ -115,9 +122,9 @@ ...@@ -115,9 +122,9 @@
margin-right:8px margin-right:8px
} }
.adyen-checkout__spinner{ .adyen-checkout__spinner{
-webkit-animation:rotateSpinner 2s infinite linear; -webkit-animation:rotateSpinner 1.5s infinite linear;
animation:rotateSpinner 2s infinite linear; animation:rotateSpinner 1.5s infinite linear;
border:2px solid #06f; border:3px solid #06f;
border-radius:50%; border-radius:50%;
border-top-color:transparent; border-top-color:transparent;
height:43px; height:43px;
...@@ -128,6 +135,7 @@ ...@@ -128,6 +135,7 @@
width:43px width:43px
} }
.adyen-checkout__spinner--small{ .adyen-checkout__spinner--small{
border-width:2px;
height:16px; height:16px;
width:16px width:16px
} }
...@@ -169,15 +177,20 @@ ...@@ -169,15 +177,20 @@
position:absolute position:absolute
} }
.adyen-checkout__radio_group__label{ .adyen-checkout__radio_group__label{
color:inherit;
display:block; display:block;
font-size:.81em; font-size:.81em;
font-weight:400; font-weight:400;
line-height:16px; line-height:16px;
margin-bottom:8px; margin-bottom:8px;
overflow:visible;
padding-bottom:0; padding-bottom:0;
padding-left:24px; padding-left:24px;
position:relative position:relative
} }
.adyen-checkout__label--focused .adyen-checkout__radio_group__label{
color:inherit
}
.adyen-checkout__radio_group__label:before{ .adyen-checkout__radio_group__label:before{
background-color:#fff; background-color:#fff;
border:1px solid #b9c4c9; border:1px solid #b9c4c9;
...@@ -187,9 +200,14 @@ ...@@ -187,9 +200,14 @@
left:0; left:0;
position:absolute; position:absolute;
top:0; top:0;
transition:border-color .3s ease-out; transition:border-color .2s ease-out,box-shadow .2s ease-out;
width:16px width:16px
} }
.adyen-checkout__radio_group__label:hover:before{
border-color:#99a3ad;
box-shadow:0 0 0 2px #d4d9db;
cursor:pointer
}
.adyen-checkout__radio_group__label:after{ .adyen-checkout__radio_group__label:after{
-webkit-transform:scale(0); -webkit-transform:scale(0);
background-color:#fff; background-color:#fff;
...@@ -203,9 +221,9 @@ ...@@ -203,9 +221,9 @@
position:absolute; position:absolute;
top:5px; top:5px;
transform:scale(0); transform:scale(0);
transition:-webkit-transform .3s ease-out; transition:-webkit-transform .2s ease-out;
transition:transform .3s ease-out; transition:transform .2s ease-out;
transition:transform .3s ease-out,-webkit-transform .3s ease-out; transition:transform .2s ease-out,-webkit-transform .2s ease-out;
width:6px width:6px
} }
.adyen-checkout__radio_group__label:hover{ .adyen-checkout__radio_group__label:hover{
...@@ -215,13 +233,15 @@ ...@@ -215,13 +233,15 @@
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{ .adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{
background-color:#06f; background-color:#06f;
border:0; border:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26); transition:all .2s ease-out
transition:all .3s ease-out
} }
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:after{ .adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:after{
-webkit-transform:scale(1); -webkit-transform:scale(1);
transform:scale(1) transform:scale(1)
} }
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:hover:before,.adyen-checkout__radio_group__input:checked:active+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__input:checked:focus+.adyen-checkout__radio_group__label:before{
box-shadow:0 0 0 2px rgba(0,102,255,.4)
}
.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before{ .adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before{
border:1px solid #d10244 border:1px solid #d10244
} }
...@@ -289,6 +309,14 @@ ...@@ -289,6 +309,14 @@
background-color:#06f; background-color:#06f;
border:1px solid #06f border:1px solid #06f
} }
.adyen-checkout__checkbox__input:hover:not(:focus)+.adyen-checkout__checkbox__label:after{
border-color:#99a3ad;
box-shadow:0 0 0 2px #d4d9db
}
.adyen-checkout__checkbox__input:checked:hover+.adyen-checkout__checkbox__label:after{
border-color:#06f;
box-shadow:0 0 0 2px rgba(0,102,255,.4)
}
.adyen-checkout__checkbox__input:focus+span:after{ .adyen-checkout__checkbox__input:focus+span:after{
border:1px solid #06f; border:1px solid #06f;
box-shadow:0 0 0 2px #99c2ff box-shadow:0 0 0 2px #99c2ff
...@@ -296,15 +324,12 @@ ...@@ -296,15 +324,12 @@
.adyen-checkout__dropdown{ .adyen-checkout__dropdown{
font-size:1em; font-size:1em;
max-width:100%; max-width:100%;
width:200px width:100%
}
.adyen-checkout__dropdown--small{
width:130px
}
.adyen-checkout__dropdown--large{
width:300px
} }
.adyen-checkout__dropdown__button{ .adyen-checkout__dropdown__button{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
background:#fff; background:#fff;
border:1px solid #b9c4c9; border:1px solid #b9c4c9;
border-radius:6px; border-radius:6px;
...@@ -312,8 +337,9 @@ ...@@ -312,8 +337,9 @@
height:40px; height:40px;
line-height:20px; line-height:20px;
outline:0; outline:0;
padding:9px 20px 9px 8px; padding:9px 24px 9px 12px;
transition:border .2s ease-out,box-shadow .2s ease-out; transition:border .2s ease-out,box-shadow .2s ease-out;
user-select:none;
width:100% width:100%
} }
.adyen-checkout__dropdown__button__icon{ .adyen-checkout__dropdown__button__icon{
...@@ -341,15 +367,19 @@ ...@@ -341,15 +367,19 @@
.adyen-checkout__dropdown__list{ .adyen-checkout__dropdown__list{
border-radius:6px; border-radius:6px;
box-shadow:0 2px 7px rgba(0,15,45,.3); box-shadow:0 2px 7px rgba(0,15,45,.3);
margin-top:2px; max-height:375px;
max-height:360px;
z-index:2 z-index:2
} }
.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active{
margin-top:2px
}
.adyen-checkout__dropdown__element{ .adyen-checkout__dropdown__element{
-moz-user-select:none;
-ms-hyphens:auto; -ms-hyphens:auto;
-ms-user-select:none;
-webkit-hyphens:auto; -webkit-hyphens:auto;
-webkit-user-select:none;
border:1px solid transparent; border:1px solid transparent;
border-bottom-color:#e6e9eb;
cursor:pointer; cursor:pointer;
font-size:.81em; font-size:.81em;
hyphens:auto; hyphens:auto;
...@@ -357,6 +387,7 @@ ...@@ -357,6 +387,7 @@
outline:0; outline:0;
padding:8px; padding:8px;
transition:background .2s ease-out,border-color .2s ease-out; transition:background .2s ease-out,border-color .2s ease-out;
user-select:none;
word-break:break-word word-break:break-word
} }
.adyen-checkout__dropdown__element:last-child{ .adyen-checkout__dropdown__element:last-child{
...@@ -365,10 +396,6 @@ ...@@ -365,10 +396,6 @@
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{ .adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{
background:rgba(230,233,235,.6) background:rgba(230,233,235,.6)
} }
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus{
border-bottom-color:#06f;
border-top-color:#06f
}
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{ .adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{
background:rgba(0,102,255,.1) background:rgba(0,102,255,.1)
} }
...@@ -385,8 +412,16 @@ ...@@ -385,8 +412,16 @@
right:32px right:32px
} }
.adyen-checkout__select-list{ .adyen-checkout__select-list{
background:#fff;
border:1px solid #b9c4c9;
border-radius:6px;
margin:0; margin:0;
padding:0 max-height:140px;
min-height:100px;
min-width:300px;
overflow-y:scroll;
padding:0;
width:100%
} }
.adyen-checkout__select-list__item{ .adyen-checkout__select-list__item{
background:#fff; background:#fff;
...@@ -413,6 +448,18 @@ ...@@ -413,6 +448,18 @@
.adyen-checkout__select-list__item--selected:active,.adyen-checkout__select-list__item--selected:focus,.adyen-checkout__select-list__item--selected:hover{ .adyen-checkout__select-list__item--selected:active,.adyen-checkout__select-list__item--selected:focus,.adyen-checkout__select-list__item--selected:hover{
background:rgba(0,102,255,.15) background:rgba(0,102,255,.15)
} }
.adyen-checkout__field-wrapper{
display:flex
}
.adyen-checkout__field--50{
width:50%
}
.adyen-checkout__field--50:first-child{
margin-right:8px
}
.adyen-checkout__field--50:nth-child(2){
margin-left:8px
}
.adyen-checkout__input{ .adyen-checkout__input{
background:#fff; background:#fff;
border:1px solid #b9c4c9; border:1px solid #b9c4c9;
...@@ -426,13 +473,23 @@ ...@@ -426,13 +473,23 @@
padding:5px 8px; padding:5px 8px;
position:relative; position:relative;
transition:border .2s ease-out,box-shadow .2s ease-out; transition:border .2s ease-out,box-shadow .2s ease-out;
width:200px width:100%
}
.adyen-checkout__input:hover{
border-color:#99a3ad
} }
.adyen-checkout__input:required{ .adyen-checkout__input:required{
box-shadow:none box-shadow:none
} }
.adyen-checkout__input--disabled,.adyen-checkout__input[readonly]{
background:#e6e9eb;
border-color:#e6e9eb
}
.adyen-checkout__input--disabled:hover{
border-color:#e6e9eb
}
.adyen-checkout__input-wrapper{ .adyen-checkout__input-wrapper{
display:inline-block; display:block;
position:relative position:relative
} }
.adyen-checkout__input-wrapper--block{ .adyen-checkout__input-wrapper--block{
...@@ -453,20 +510,15 @@ ...@@ -453,20 +510,15 @@
.adyen-checkout-input__inline-validation--invalid{ .adyen-checkout-input__inline-validation--invalid{
color:#d10244 color:#d10244
} }
.adyen-checkout__input--small{
width:134px
}
.adyen-checkout__input--large{
width:300px
}
.adyen-checkout__input--invalid{ .adyen-checkout__input--invalid{
border-color:#d10244 border-color:#d10244
} }
.adyen-checkout__input--valid{ .adyen-checkout__input--valid{
border-bottom-color:#0abf53 border-bottom-color:#0abf53
} }
.adyen-checkout__input--error{ .adyen-checkout__input--error,.adyen-checkout__input--error:hover,.adyen-checkout__input--invalid,.adyen-checkout__input--invalid:hover{
border-color:#d10244 border-color:#d10244;
color:#d10244
} }
.adyen-checkout__input::-webkit-input-placeholder{ .adyen-checkout__input::-webkit-input-placeholder{
color:#b9c4c9; color:#b9c4c9;
...@@ -484,22 +536,27 @@ ...@@ -484,22 +536,27 @@
color:#b9c4c9; color:#b9c4c9;
font-weight:200 font-weight:200
} }
.adyen-checkout__input--focus,.adyen-checkout__input:active,.adyen-checkout__input:focus{ .adyen-checkout__input--focus,.adyen-checkout__input--focus:hover,.adyen-checkout__input:active,.adyen-checkout__input:active:hover,.adyen-checkout__input:focus,.adyen-checkout__input:focus:hover{
border:1px solid #06f; border:1px solid #06f;
box-shadow:0 0 0 2px #99c2ff box-shadow:0 0 0 2px #99c2ff
} }
.adyen-checkout__input[readonly]{ .adyen-checkout__input[readonly],.adyen-checkout__input[readonly]:hover{
background-color:#e6e9eb; background-color:#e6e9eb;
border-color:transparent; border-color:transparent;
color:#687282; color:#687282;
cursor:default cursor:default
} }
.adyen-checkout__fieldset{ .adyen-checkout__fieldset{
color:#687282;
display:block; display:block;
padding-bottom:30px; padding-bottom:8px;
width:100% width:100%
} }
.adyen-checkout__fieldset:last-of-type{
padding-bottom:0
}
.adyen-checkout__fieldset+.adyen-checkout__fieldset{
margin-top:16px
}
.adyen-checkout__fieldset__title{ .adyen-checkout__fieldset__title{
color:#687282; color:#687282;
display:block; display:block;
...@@ -507,9 +564,27 @@ ...@@ -507,9 +564,27 @@
font-weight:700; font-weight:700;
letter-spacing:1px; letter-spacing:1px;
margin:0; margin:0;
padding:0 0 20px; padding:0 0 8px;
text-transform:uppercase text-transform:uppercase
} }
.adyen-checkout__field-group,.adyen-checkout__fieldset__fields{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
width:100%
}
.adyen-checkout__field-group:last-of-type .adyen-checkout__field{
margin-bottom:0
}
.adyen-checkout__field--col-70{
width:calc(70% - 8px)
}
.adyen-checkout__field--col-30{
width:calc(30% - 8px)
}
.adyen-checkout__field--col-50{
width:calc(50% - 8px)
}
.adyen-checkout__fieldset--readonly{ .adyen-checkout__fieldset--readonly{
color:#00112c; color:#00112c;
font-size:.81em; font-size:.81em;
...@@ -520,94 +595,63 @@ ...@@ -520,94 +595,63 @@
max-width:540px max-width:540px
} }
.adyen-checkout__open-invoice .adyen-checkout__checkbox{ .adyen-checkout__open-invoice .adyen-checkout__checkbox{
margin:0 0 20px margin:0 0 8px
}
.adyen-checkout__link--more-information{
font-size:.81em
} }
.adyen-checkout__applepay__button{ .adyen-checkout__open-invoice .adyen-checkout__checkbox:only-of-type{
height:40px; margin-bottom:0
width:240px
} }
.adyen-checkout__card-input__form{ .adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
transition:opacity .25s ease-out margin:0
} }
.adyen-checkout__card__exp-cvc{ .adyen-checkout__open-invoice .adyen-checkout__field--gender .adyen-checkout__radio_group{
display:flex display:flex
} }
.adyen-checkout__card__cardNumber{ .adyen-checkout__open-invoice .adyen-checkout__field--gender .adyen-checkout__radio_group>label{
max-width:400px margin-right:16px
}
.adyen-checkout__card__cardNumber__input{
padding:5px 8px 5px 57px
}
.adyen-checkout__card__exp-date__input--oneclick{
font-weight:400;
height:40px;
line-height:40px
}
.adyen-checkout__card__exp-cvc .adyen-checkout__field{
margin-bottom:0;
margin-right:32px
}
.adyen-checkout__card-input .adyen-checkout__store-details{
margin-top:16px
} }
.adyen-checkout__giropay__results{ .adyen-checkout__open-invoice .adyen-checkout__field--gender .adyen-checkout__label--focused .adyen-checkout__label__text,.adyen-checkout__open-invoice .adyen-checkout__field--gender .adyen-checkout__label__text{
background:#fff; color:#00112c
border:1px solid #b9c4c9;
border-radius:6px;
max-height:140px;
min-height:100px;
min-width:300px;
overflow-y:scroll;
width:100%
} }
.adyen-checkout__giropay__no-results{ .adyen-checkout__open-invoice .adyen-checkout__fieldset--billingAddress{
color:#687282; padding-bottom:8px
display:block;
font-size:.81em;
padding:0 0 0 2px
} }
.adyen-checkout__giropay__placeholder{ .adyen-checkout__open-invoice .adyen-checkout__fieldset--deliveryAddress{
color:#b9c4c9; margin-top:24px;
display:block; padding-bottom:8px
font-weight:200;
padding:0 0 0 2px
} }
.adyen-checkout__giropay__loading{ .adyen-checkout__open-invoice .adyen-checkout__input--separateDeliveryAddress{
display:block; margin-bottom:0
min-height:100px
} }
.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper{ .adyen-checkout__open-invoice .adyen-checkout__field--dateOfBirth{
display:inline-block; width:calc(50% - 8px)
vertical-align:middle
} }
.adyen-checkout__giropay__loading-text{ .adyen-checkout__open-invoice .adyen-checkout__field--country,.adyen-checkout__open-invoice .adyen-checkout__field--street{
color:#687282; width:calc(70% - 8px)
font-size:.81em;
line-height:16px;
vertical-align:middle
} }
.adyen-checkout__giropay__error{ .adyen-checkout__open-invoice .adyen-checkout__field--houseNumberOrName,.adyen-checkout__open-invoice .adyen-checkout__field--postalCode{
color:#d10244; width:calc(30% - 8px)
font-size:.81em
} }
.adyen-checkout__button{ .adyen-checkout__button{
background:#00112c; background:#00112c;
border:0; border:0;
border-radius:6px; border-radius:6px;
box-shadow:0 3px 4px rgba(0,15,45,.2);
color:#fff; color:#fff;
cursor:pointer; cursor:pointer;
font-size:1em; font-size:1em;
font-weight:700; font-weight:500;
height:48px; height:48px;
margin:0; margin:0;
padding:15px; padding:15px;
transition:background .3s ease-out; text-decoration:none;
transition:background .3s ease-out,box-shadow .3s ease-out;
width:100% width:100%
} }
.adyen-checkout__button--pay{
margin-top:24px
}
.adyen-checkout__button--standalone{
margin-top:0
}
.adyen-checkout__button:disabled{ .adyen-checkout__button:disabled{
-moz-user-select:all; -moz-user-select:all;
-ms-user-select:all; -ms-user-select:all;
...@@ -617,176 +661,255 @@ ...@@ -617,176 +661,255 @@
cursor:not-allowed; cursor:not-allowed;
user-select:all user-select:all
} }
.adyen-checkout__button:focus{
box-shadow:0 0 0 2px #99c2ff;
outline:0
}
.adyen-checkout__button:hover{
background:#1c3045;
box-shadow:0 0,0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14)
}
.adyen-checkout__button:active{
background:#3a4a5c
}
.adyen-checkout__button:hover:focus{
box-shadow:0 0 0 2px #99c2ff,0 3px 4px rgba(0,15,45,.2)
}
.adyen-checkout__button--loading{ .adyen-checkout__button--loading{
-moz-user-select:none; -moz-user-select:none;
-ms-user-select:none; -ms-user-select:none;
-webkit-user-select:none; -webkit-user-select:none;
background:#687282; background:#687282;
box-shadow:none; box-shadow:none;
outline:0;
pointer-events:none; pointer-events:none;
user-select:none user-select:none
} }
.adyen-checkout__button .adyen-checkout__spinner{ .adyen-checkout__button .adyen-checkout__spinner{
border-color:transparent #fff #fff; border-color:transparent #fff #fff
border-width:3px
} }
.adyen-checkout__button__content{ .adyen-checkout__button__content{
align-items:center; align-items:center;
display:flex; display:flex;
justify-content:center justify-content:center
} }
.adyen-checkout__phone-input{ .adyen-checkout__button__icon{
display:flex margin-right:12px
}
.adyen-checkout__phone-input__prefix{
margin-bottom:0;
margin-right:.5em
}
.adyen-checkout__input--phone-number{
margin-bottom:0
} }
.adyen-checkout__iban-input__number{ .adyen-checkout__button__text{
padding:5px 36px 5px 8px; display:block;
text-transform:uppercase justify-content:center;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
} }
.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{ .adyen-checkout__button.adyen-checkout__button--inline{
background-color:transparent;
box-sizing:border-box;
display:block; display:block;
overflow:auto; font-size:.81em;
width:100% height:auto;
padding:10px 8px;
width:auto
} }
.adyen-checkout__threeds2__challenge-container--01{ .adyen-checkout__button.adyen-checkout__button--secondary{
height:400px; background:rgba(0,102,255,.1);
width:250px border:1px solid transparent;
color:#06f;
padding:10px 12px
} }
.adyen-checkout__threeds2__challenge-container--02{ .adyen-checkout__button.adyen-checkout__button--secondary:hover{
height:400px; background:rgba(0,102,255,.2);
width:390px box-shadow:none
} }
.adyen-checkout__threeds2__challenge-container--03{ .adyen-checkout__button.adyen-checkout__button--secondary:active,.adyen-checkout__button.adyen-checkout__button--secondary:active:hover{
height:600px; background:rgba(0,102,255,.3);
width:500px box-shadow:none
} }
.adyen-checkout__threeds2__challenge-container--04{ .adyen-checkout__button.adyen-checkout__button--completed,.adyen-checkout__button.adyen-checkout__button--completed:active,.adyen-checkout__button.adyen-checkout__button--completed:active:hover,.adyen-checkout__button.adyen-checkout__button--completed:hover{
height:400px; background:#0abf53;
width:600px color:#fff
} }
.adyen-checkout__threeds2_challenge-container--05{ .adyen-checkout__button.adyen-checkout__button--completed .adyen-checkout__button__icon{
height:100%; -webkit-filter:brightness(0) invert(1);
width:100% filter:brightness(0) invert(1)
} }
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05{ .adyen-checkout__applepay__button{
overflow:hidden; height:40px;
padding-top:56.25%; width:240px
position:relative
} }
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{ .adyen-checkout__dropin .adyen-checkout__applepay__button{
border:0;
height:100%;
left:0;
position:absolute;
top:0;
width:100% width:100%
} }
.adyen-checkout__qr-loader{ .adyen-checkout__card-input__form{
background:#fff; transition:opacity .25s ease-out
border:1px solid #d4d9db;
border-radius:6px;
padding:40px;
text-align:center
} }
.adyen-checkout__qr-loader--app{ .adyen-checkout__card__cardNumber{
border:0; max-width:400px
border-radius:0;
padding:0
} }
.adyen-checkout__qr-loader__brand-logo{ .adyen-checkout__card__cardNumber__input{
max-height:50px; padding:5px 8px
width:110px
} }
.adyen-checkout__qr-loader__subtitle{ .adyen-checkout__card__exp-date__input--oneclick{
margin-top:32px font-weight:400;
line-height:30px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
} }
.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{ .adyen-checkout__card__holderName,.adyen-checkout__field--expiryDate,.adyen-checkout__field--storedCard{
color:#00112c; margin-bottom:0
font-size:1em;
line-height:19px
} }
.adyen-checkout__qr-loader__payment_amount{ .adyen-checkout__card__holderName,.adyen-checkout__store-details{
font-weight:700 margin-top:16px
} }
.adyen-checkout__qr-loader__progress{ .adyen-checkout__field--cardNumber .adyen-checkout__input--error .adyen-checkout__card__cardNumber__brandIcon{
background:#d4d9db; display:none
border-radius:25px;
height:4px;
margin:32px auto 12px;
padding-right:3%;
width:152px
} }
.adyen-checkout__qr-loader__percentage{ .adyen-checkout__field--cardNumber .adyen-checkout__input--valid:not(.adyen-checkout__card__cardNumber__input--noBrand)+.adyen-checkout-input__inline-validation--valid{
background:#06f; display:none
border-radius:25px;
display:block;
height:100%
} }
.adyen-checkout__qr-loader__countdown{ .adyen-checkout__giropay__no-results{
color:#687282; color:#687282;
font-size:.81em display:block;
font-size:.81em;
padding:0 0 0 2px
} }
.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{ .adyen-checkout__giropay__placeholder{
margin:60px 0 color:#b9c4c9;
display:block;
font-weight:200;
padding:0 0 0 2px
} }
.adyen-checkout__qr-loader__separator__label{ .adyen-checkout__giropay__loading{
background:#fff; display:block;
border-radius:100%; min-height:100px
color:#687282; }
.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper{
display:inline-block; display:inline-block;
height:34px; vertical-align:middle
line-height:34px;
position:relative;
width:34px;
z-index:1
} }
.adyen-checkout__qr-loader__separator__line{ .adyen-checkout__giropay__loading-text{
-webkit-transform:translateY(-17px); color:#687282;
border-top:1px solid #d4d9db; font-size:.81em;
display:block; line-height:16px;
transform:translateY(-17px) vertical-align:middle
} }
.adyen-checkout__button.adyen-checkout__button--qr-loader{ .adyen-checkout__giropay__error{
display:block; color:#d10244;
text-decoration:none font-size:.81em
}
.adyen-checkout__dropin .gpay-button.long{
height:48px;
padding:15px 24px 13px;
transition:background-color .3s ease-out,box-shadow .3s ease-out;
width:100%
}
.adyen-checkout__field--issuer-list{
margin-bottom:0
}
.adyen-checkout__econtext-input__field{
display:flex;
flex-wrap:wrap
}
.adyen-checkout__econtext-input__field .adyen-checkout__field--firstName,.adyen-checkout__econtext-input__field .adyen-checkout__field--lastName{
max-width:100%;
min-width:250px;
width:calc(50% - 8px)
}
.adyen-checkout__econtext-input__field .adyen-checkout__field--firstName{
margin-right:16px
} }
.adyen-checkout__voucher-result{ .adyen-checkout__voucher-result{
background:#fff; border-radius:12px;
border:1px solid #d4d9db;
border-radius:6px;
box-sizing:border-box; box-sizing:border-box;
padding:20px 16px 56px; position:relative;
text-align:center text-align:center
} }
.adyen-checkout__voucher-result__bottom,.adyen-checkout__voucher-result__top{
background:#fff;
border:1px solid #d4d9db
}
.adyen-checkout__voucher-result__top{
border-bottom:0;
border-radius:12px 12px 0 0;
padding:40px 0 24px
}
.adyen-checkout__voucher-result__bottom{
border-radius:0 0 12px 12px;
border-top:0
}
.adyen-checkout__voucher-result__separator{
align-items:center;
background:#fff;
display:flex;
height:13px;
margin:0 auto;
position:relative;
width:calc(100% - 14px)
}
.adyen-checkout__voucher-result__separator:after,.adyen-checkout__voucher-result__separator:before{
background-image:url(data:image/svg+xml;
base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMGw1IDIgMS41IDRIN1YwSDB6bTAgMTNsNS0yIDEuNS00SDd2NkgweiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik02LjQyMyA2LjVDNi40MjMgMy4zMTIgMy43ODMuNzU2LjUuNTE4YzMuMzg2LjIzNiA2IDIuODU1IDYgNS45ODIgMCAzLjEyNy0yLjYxNCA1Ljc0Ni02IDUuOTgzdi0uMDAxYzMuMjg0LS4yMzcgNS45MjMtMi43OTQgNS45MjMtNS45ODJ6IiBzdHJva2U9IiNENEQ5REIiLz48cGF0aCBmaWxsPSIjRDREOURCIiBkPSJNMCAwaDF2MUgwek0wIDEyaDF2MUgweiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDd2MTNIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=)
}
.adyen-checkout__voucher-result__separator:before{
background-position:100%;
background-repeat:no-repeat;
content:"";
height:13px;
left:-7px;
position:absolute;
top:0;
width:7px
}
.adyen-checkout__voucher-result__separator:after{
-webkit-transform:rotate(-180deg);
background-position:100%;
background-repeat:no-repeat;
content:"";
height:13px;
position:absolute;
right:-7px;
top:0;
transform:rotate(-180deg);
width:7px
}
.adyen-checkout__voucher-result__separator__inner{
border-top:1px solid #e6e9eb;
width:100%
}
.adyen-checkout__voucher-result__image{ .adyen-checkout__voucher-result__image{
align-items:center; align-items:center;
display:flex; display:flex;
justify-content:center; justify-content:center;
margin-bottom:16px; margin-bottom:40px;
width:100% width:100%
} }
.adyen-checkout__voucher-result__image__wrapper{ .adyen-checkout__voucher-result__image__wrapper{
display:inline-block; display:block;
padding:8px; height:48px;
width:120px margin:0 24px;
position:relative
}
.adyen-checkout__voucher-result__image__wrapper:after{
border:1px solid rgba(0,27,43,.17);
border-radius:3px;
content:"";
height:100%;
left:0;
position:absolute;
top:0;
width:100%
} }
.adyen-checkout__voucher-result__image__wrapper:nth-child(2){ .adyen-checkout__voucher-result__image__wrapper:nth-child(2):before{
border-left:1px solid #d4d9db border-left:1px solid #d4d9db;
content:"";
height:64px;
left:-24.5px;
position:absolute;
top:-8px;
width:1px
} }
.adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{ .adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{
height:34px border-radius:3px;
} height:48px
.adyen-checkout__voucher-result__image__brand{
height:60px
} }
.adyen-checkout__voucher-result__introduction{ .adyen-checkout__voucher-result__introduction{
color:#00112c; color:#00112c;
...@@ -818,52 +941,67 @@ ...@@ -818,52 +941,67 @@
display:block; display:block;
font-weight:400; font-weight:400;
left:0; left:0;
line-height:19px;
margin:0 auto; margin:0 auto;
position:absolute; position:absolute;
right:0; right:0;
top:-14px; top:-2px;
user-select:none; user-select:none;
width:auto width:auto
} }
.adyen-checkout__voucher-result__code__label:before{
content:"";
position:absolute
}
.adyen-checkout__voucher-result__code__label__text{ .adyen-checkout__voucher-result__code__label__text{
background:#fff; background:#fff;
color:#00112c; color:#00112c;
font-size:13px; font-size:13px;
letter-spacing:normal;
line-height:1;
padding:0 8px padding:0 8px
} }
.adyen-checkout__voucher-result__code__barcode{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
display:block;
height:56px;
margin:0 auto 8px;
max-width:100%;
user-select:none
}
.adyen-checkout__voucher-result__code{ .adyen-checkout__voucher-result__code{
-moz-user-select:all; -moz-user-select:all;
-ms-user-select:all; -ms-user-select:all;
-webkit-user-select:all; -webkit-user-select:all;
border:1px solid #e6e9eb; border-width:1px 0;
border-radius:6px;
color:#00112c; color:#00112c;
display:inline-block; display:inline-block;
font-size:1.5em; font-size:1.5em;
font-weight:700; font-weight:700;
letter-spacing:1px; letter-spacing:1px;
line-height:19px; line-height:1.2;
margin:20px auto 16px; margin:0 auto;
max-width:100%; padding:16px 48px;
min-width:200px;
padding:28px 48px 24px;
position:relative; position:relative;
text-align:center; text-align:center;
user-select:all; user-select:all;
width:300px width:100%;
word-break:break-word
} }
.adyen-checkout__voucher-result__details{ .adyen-checkout__voucher-result__details{
list-style:none; list-style:none;
margin:8px auto 0; margin:-1px auto 0;
max-width:300px;
padding:0 padding:0
} }
.adyen-checkout__voucher-result__details__item{ .adyen-checkout__voucher-result__details__item{
border-top:1px solid #e6e9eb;
color:#00112c; color:#00112c;
display:flex; display:flex;
font-size:.81em; font-size:.81em;
justify-content:space-between; justify-content:space-between;
margin-bottom:16px; padding:16px 24px;
word-break:break-word word-break:break-word
} }
.adyen-checkout__voucher-result__details__item:last-child{ .adyen-checkout__voucher-result__details__item:last-child{
...@@ -878,9 +1016,189 @@ ...@@ -878,9 +1016,189 @@
max-width:50%; max-width:50%;
text-align:right text-align:right
} }
.adyen-checkout__payment-method{ .adyen-checkout__voucher-result__actions{
align-items:center;
display:flex;
justify-content:center;
list-style:none;
margin:0 auto 32px;
max-width:100%;
min-width:200px;
padding:0;
width:300px
}
.adyen-checkout__voucher-result__actions__item{
margin:0 4px
}
.adyen-checkout__link--more-information{
display:block;
font-size:.81em;
font-weight:400;
margin:16px 0;
text-align:center
}
.adyen-checkout__phone-input__container{
display:flex
}
.adyen-checkout__phone-input__prefix{
margin-bottom:0;
margin-right:.5em;
width:30%
}
.adyen-checkout__input--phone-number{
margin-bottom:0;
width:70%
}
.adyen-checkout__iban-input__number{
padding:5px 36px 5px 8px;
text-transform:uppercase
}
.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{
background-color:transparent;
box-sizing:border-box;
display:block;
overflow:auto;
width:100%
}
.adyen-checkout__threeds2__challenge-container--01{
height:400px;
width:250px
}
.adyen-checkout__threeds2__challenge-container--02{
height:400px;
width:390px
}
.adyen-checkout__threeds2__challenge-container--03{
height:600px;
width:500px
}
.adyen-checkout__threeds2__challenge-container--04{
height:400px;
width:600px
}
.adyen-checkout__threeds2_challenge-container--05{
height:100%;
width:100%
}
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05{
overflow:hidden;
padding-top:56.25%;
position:relative
}
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{
border:0;
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.adyen-checkout__qr-loader{
background:#fff; background:#fff;
border:1px solid #d4d9db; border:1px solid #d4d9db;
border-radius:6px;
padding:40px;
text-align:center
}
.adyen-checkout__qr-loader--app{
border:0;
border-radius:0;
padding:0
}
.adyen-checkout__qr-loader__brand-logo{
max-height:50px;
width:110px
}
.adyen-checkout__qr-loader__subtitle{
margin-top:32px
}
.adyen-checkout__qr-loader__subtitle--result{
margin-bottom:32px
}
.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{
color:#00112c;
font-size:1em;
line-height:19px
}
.adyen-checkout__qr-loader__icon{
height:88px;
width:88px
}
.adyen-checkout__qr-loader__icon--result{
margin-bottom:100px
}
.adyen-checkout__qr-loader__payment_amount{
font-weight:700
}
.adyen-checkout__qr-loader__progress{
background:#d4d9db;
border-radius:24px;
height:4px;
margin:32px auto 12px;
padding-right:3%;
width:152px
}
.adyen-checkout__qr-loader__percentage{
background:#06f;
border-radius:24px;
display:block;
height:100%
}
.adyen-checkout__qr-loader__countdown{
color:#687282;
font-size:.81em
}
.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{
margin:60px 0
}
.adyen-checkout__qr-loader__separator__label{
background:#fff;
border-radius:50%;
color:#687282;
display:inline-block;
height:34px;
line-height:34px;
position:relative;
width:34px;
z-index:1
}
.adyen-checkout__qr-loader__separator__line{
-webkit-transform:translateY(-17px);
border-top:1px solid #d4d9db;
display:block;
transform:translateY(-17px)
}
.adyen-checkout__button.adyen-checkout__button--qr-loader{
display:block;
text-decoration:none
}
.adyen-checkout__doku-input__field{
display:flex;
flex-wrap:wrap
}
.adyen-checkout__doku-input__field .adyen-checkout__field--firstName,.adyen-checkout__doku-input__field .adyen-checkout__field--lastName{
max-width:100%;
min-width:250px;
width:calc(50% - 8px)
}
.adyen-checkout__doku-input__field .adyen-checkout__field--firstName{
margin-right:16px
}
.adyen-checkout__voucher-result--boletobancario .adyen-checkout__voucher-result__code{
font-size:.81em;
line-height:19px;
padding:24px;
word-break:break-all
}
.adyen-checkout__voucher-result--oxxo .adyen-checkout__voucher-result__code{
font-size:.81em;
line-height:19px;
padding:24px;
word-break:break-all
}
.adyen-checkout__payment-method{
background:#fff;
border:1px solid #e6e9eb;
cursor:pointer; cursor:pointer;
margin-top:-1px; margin-top:-1px;
position:relative; position:relative;
...@@ -891,13 +1209,13 @@ ...@@ -891,13 +1209,13 @@
outline:0 outline:0
} }
.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{ .adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
border-top-left-radius:6px; border-top-left-radius:12px;
border-top-right-radius:6px; border-top-right-radius:12px;
margin-top:0 margin-top:0
} }
.adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{ .adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{
border-bottom-left-radius:6px; border-bottom-left-radius:12px;
border-bottom-right-radius:6px; border-bottom-right-radius:12px;
margin-bottom:0 margin-bottom:0
} }
.adyen-checkout__payment-method--loading{ .adyen-checkout__payment-method--loading{
...@@ -907,31 +1225,51 @@ ...@@ -907,31 +1225,51 @@
opacity:.9 opacity:.9
} }
.adyen-checkout__payment-method--disabling{ .adyen-checkout__payment-method--disabling{
opacity:.5 opacity:.3
} }
.adyen-checkout__payment-method__header{ .adyen-checkout__payment-method__header{
align-items:center; align-items:center;
color:#00112c; color:#00112c;
display:flex; display:flex;
flex-wrap:nowrap;
font-size:1em; font-size:1em;
font-weight:400; font-weight:400;
padding:16px; justify-content:space-between;
padding:16px 16px 16px 48px;
position:relative; position:relative;
transition:background .1s ease-out; transition:background .1s ease-out;
width:100% width:100%
} }
.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__header{
padding:16px
}
.adyen-checkout__payment-method__header__title{
align-items:center;
display:flex;
flex-shrink:0;
margin-right:16px;
max-width:100%
}
.adyen-checkout__payment-method__surcharge{ .adyen-checkout__payment-method__surcharge{
color:#687282; color:#687282;
margin-left:5px margin-left:5px
} }
.adyen-checkout__payment-method--selected{ .adyen-checkout__payment-method--selected{
background:#f7f8f9; background:#f7f8f9;
border:1px solid #d4d9db; border:1px solid #e6e9eb;
border-radius:6px; border-radius:12px;
cursor:default; cursor:default;
margin:8px 0; margin:8px 0;
transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
} }
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header{
flex-wrap:wrap
}
.adyen-checkout__payment-method__name{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.adyen-checkout__payment-method__name--selected{ .adyen-checkout__payment-method__name--selected{
font-weight:500 font-weight:500
} }
...@@ -939,11 +1277,17 @@ ...@@ -939,11 +1277,17 @@
padding:0 16px padding:0 16px
} }
.adyen-checkout__payment-method__details__content{ .adyen-checkout__payment-method__details__content{
margin:6px 0 22px margin:0 0 16px
} }
.adyen-checkout__payment-method__image__wrapper{ .adyen-checkout__payment-method__image__wrapper{
height:26px; height:26px;
position:relative opacity:0;
position:relative;
transition:opacity .15s ease-out;
width:40px
}
.adyen-checkout__payment-method__image__wrapper--loaded{
opacity:1
} }
.adyen-checkout__payment-method__image__wrapper:after{ .adyen-checkout__payment-method__image__wrapper:after{
border:1px solid rgba(0,27,43,.17); border:1px solid rgba(0,27,43,.17);
...@@ -958,12 +1302,47 @@ ...@@ -958,12 +1302,47 @@
.adyen-checkout__payment-method__image{ .adyen-checkout__payment-method__image{
border-radius:3px border-radius:3px
} }
.adyen-checkout__payment-method__brands{
display:flex;
flex-basis:auto;
flex-shrink:1;
flex-wrap:wrap;
height:16px;
margin:4px 0;
overflow:hidden;
text-align:right
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands{
height:auto;
overflow:visible;
text-align:left
}
.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper{
display:inline-block;
height:16px;
margin-right:4px;
transition:opacity .2s ease-out;
width:24px
}
.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper:last-child{
margin:0
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper{
margin-bottom:4px
}
.adyen-checkout__payment-method__brands img{
height:16px;
width:24px
}
.adyen-checkout__payment-method__image__wrapper--disabled{
opacity:.25
}
.adyen-checkout__payment-method__disable-confirmation{ .adyen-checkout__payment-method__disable-confirmation{
align-items:center; align-items:center;
background:#e6e9eb; background:#e6e9eb;
color:#00112c; color:#00112c;
display:flex; display:flex;
font-size:.94em; font-size:1em;
justify-content:space-between; justify-content:space-between;
margin-bottom:10px; margin-bottom:10px;
padding:8px 16px padding:8px 16px
...@@ -994,18 +1373,19 @@ ...@@ -994,18 +1373,19 @@
background-color:#fff; background-color:#fff;
border:1px solid #b9c4c9; border:1px solid #b9c4c9;
border-radius:50%; border-radius:50%;
box-shadow:inset 0 1px 3px rgba(0,27,43,.15); height:16px;
height:18px; left:16px;
position:absolute; position:absolute;
right:20px; transition:border-color .2s ease-out,box-shadow .2s ease-out;
transition:border-color .3s ease-out; width:16px
width:18px }
.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__radio{
display:none
} }
.adyen-checkout__payment-method__radio:after{ .adyen-checkout__payment-method__radio:after{
-webkit-transform:translateY(-50%) scale(0); -webkit-transform:translateY(-50%) scale(0);
background-color:#fff; background-color:#fff;
border-radius:50%; border-radius:50%;
box-shadow:0 1px 1px rgba(0,15,45,.25);
content:""; content:"";
display:block; display:block;
height:6px; height:6px;
...@@ -1021,31 +1401,31 @@ ...@@ -1021,31 +1401,31 @@
width:6px width:6px
} }
.adyen-checkout__payment-method__radio:hover{ .adyen-checkout__payment-method__radio:hover{
border-color:#06f; border-color:#99a3ad;
box-shadow:0 0 0 2px #d4d9db;
cursor:pointer cursor:pointer
} }
.adyen-checkout__payment-method__radio--selected{ .adyen-checkout__payment-method__radio--selected{
background-color:#06f; background-color:#06f;
border:0; border:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out transition:all .3s ease-out
} }
.adyen-checkout__payment-method__radio--selected:hover{
box-shadow:0 0 0 2px rgba(0,102,255,.4)
}
.adyen-checkout__payment-method__radio--selected:after{ .adyen-checkout__payment-method__radio--selected:after{
-webkit-transform:translateY(-50%) scale(1); -webkit-transform:translateY(-50%) scale(1);
transform:translateY(-50%) scale(1) transform:translateY(-50%) scale(1)
} }
.adyen-checkout__button--pay{
margin-bottom:16px
}
.adyen-checkout__status{ .adyen-checkout__status{
align-items:center; align-items:center;
background-color:#fff; background-color:#fff;
border:1px solid #d4d9db; border:1px solid #d4d9db;
border-radius:6px; border-radius:6px;
color:#001b2b; color:#00112c;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
font-size:16px; font-size:1em;
height:350px; height:350px;
justify-content:center; justify-content:center;
margin:0; margin:0;
...@@ -1072,4 +1452,5 @@ ...@@ -1072,4 +1452,5 @@
.adyen-checkout__link:hover{ .adyen-checkout__link:hover{
text-decoration:underline text-decoration:underline
} }
/* Checkout component Adyen styling end */ /* Checkout component Adyen styling end */
view/frontend/web/css/styles.css
View file @ 6e014400
...@@ -206,44 +206,55 @@ ...@@ -206,44 +206,55 @@
/* General styling for checkout */ /* General styling for checkout */
.payment-method-content .field input, .payment-method-content .field select { .payment-method-content .field input, .payment-method-content .field select {
max-width: 168px; max-width: 250px;
} }
.adyen-checkout__link adyen-checkout__link--more-information { .adyen-checkout__link adyen-checkout__link--more-information {
margin-bottom: 10px; margin-bottom: 10px;
} }
.checkout-component-dock {
max-width: 250px;
margin-bottom: 10px;
}
.message.error.hpp-message { .message.error.hpp-message {
margin-top: 10px; margin-top: 10px;
display: none; display: none;
} }
/* Checkout component Adyen v3.2.0 styling start */
/* Checkout component Adyen v3.0.0 styling start */
.adyen-checkout__field{ .adyen-checkout__field{
display:block; display:block;
margin-bottom:16px margin-bottom:16px;
} width:100%
.adyen-checkout__field--error input{
border-color:#d10244;
color:#d10244
} }
.adyen-checkout__field:last-child{ .adyen-checkout__field:last-of-type{
margin-bottom:0 margin-bottom:0
} }
.adyen-checkout__label{
display:block
}
.adyen-checkout__helper-text,.adyen-checkout__label__text{ .adyen-checkout__helper-text,.adyen-checkout__label__text{
color:#00112c; color:#00112c;
display:block; display:block;
font-size:.81em; font-size:.81em;
font-weight:400; font-weight:400;
line-height:13px; line-height:13px;
padding-bottom:8px padding-bottom:5px
} }
.adyen-checkout__helper-text{ .adyen-checkout__helper-text{
color:#687282 color:#687282
} }
.adyen-checkout__label__text{ .adyen-checkout__label__text{
transition:color .2s ease-out display:block;
overflow:hidden;
text-overflow:ellipsis;
transition:color .1s ease-out;
white-space:nowrap
}
.adyen-checkout__label__text--error{
color:#d10244
} }
.adyen-checkout__label--focused .adyen-checkout__label__text{ .adyen-checkout__label--focused .adyen-checkout__label__text{
color:#06f color:#06f
...@@ -268,9 +279,9 @@ ...@@ -268,9 +279,9 @@
margin-right:8px margin-right:8px
} }
.adyen-checkout__spinner{ .adyen-checkout__spinner{
-webkit-animation:rotateSpinner 2s infinite linear; -webkit-animation:rotateSpinner 1.5s infinite linear;
animation:rotateSpinner 2s infinite linear; animation:rotateSpinner 1.5s infinite linear;
border:2px solid #06f; border:3px solid #06f;
border-radius:50%; border-radius:50%;
border-top-color:transparent; border-top-color:transparent;
height:43px; height:43px;
...@@ -281,6 +292,7 @@ ...@@ -281,6 +292,7 @@
width:43px width:43px
} }
.adyen-checkout__spinner--small{ .adyen-checkout__spinner--small{
border-width:2px;
height:16px; height:16px;
width:16px width:16px
} }
...@@ -322,15 +334,20 @@ ...@@ -322,15 +334,20 @@
position:absolute position:absolute
} }
.adyen-checkout__radio_group__label{ .adyen-checkout__radio_group__label{
color:inherit;
display:block; display:block;
font-size:.81em; font-size:.81em;
font-weight:400; font-weight:400;
line-height:16px; line-height:16px;
margin-bottom:8px; margin-bottom:8px;
overflow:visible;
padding-bottom:0; padding-bottom:0;
padding-left:24px; padding-left:24px;
position:relative position:relative
} }
.adyen-checkout__label--focused .adyen-checkout__radio_group__label{
color:inherit
}
.adyen-checkout__radio_group__label:before{ .adyen-checkout__radio_group__label:before{
background-color:#fff; background-color:#fff;
border:1px solid #b9c4c9; border:1px solid #b9c4c9;
...@@ -340,9 +357,14 @@ ...@@ -340,9 +357,14 @@
left:0; left:0;
position:absolute; position:absolute;
top:0; top:0;
transition:border-color .3s ease-out; transition:border-color .2s ease-out,box-shadow .2s ease-out;
width:16px width:16px
} }
.adyen-checkout__radio_group__label:hover:before{
border-color:#99a3ad;
box-shadow:0 0 0 2px #d4d9db;
cursor:pointer
}
.adyen-checkout__radio_group__label:after{ .adyen-checkout__radio_group__label:after{
-webkit-transform:scale(0); -webkit-transform:scale(0);
background-color:#fff; background-color:#fff;
...@@ -356,9 +378,9 @@ ...@@ -356,9 +378,9 @@
position:absolute; position:absolute;
top:5px; top:5px;
transform:scale(0); transform:scale(0);
transition:-webkit-transform .3s ease-out; transition:-webkit-transform .2s ease-out;
transition:transform .3s ease-out; transition:transform .2s ease-out;
transition:transform .3s ease-out,-webkit-transform .3s ease-out; transition:transform .2s ease-out,-webkit-transform .2s ease-out;
width:6px width:6px
} }
.adyen-checkout__radio_group__label:hover{ .adyen-checkout__radio_group__label:hover{
...@@ -368,13 +390,15 @@ ...@@ -368,13 +390,15 @@
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{ .adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{
background-color:#06f; background-color:#06f;
border:0; border:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26); transition:all .2s ease-out
transition:all .3s ease-out
} }
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:after{ .adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:after{
-webkit-transform:scale(1); -webkit-transform:scale(1);
transform:scale(1) transform:scale(1)
} }
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:hover:before,.adyen-checkout__radio_group__input:checked:active+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__input:checked:focus+.adyen-checkout__radio_group__label:before{
box-shadow:0 0 0 2px rgba(0,102,255,.4)
}
.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before{ .adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before{
border:1px solid #d10244 border:1px solid #d10244
} }
...@@ -442,6 +466,14 @@ ...@@ -442,6 +466,14 @@
background-color:#06f; background-color:#06f;
border:1px solid #06f border:1px solid #06f
} }
.adyen-checkout__checkbox__input:hover:not(:focus)+.adyen-checkout__checkbox__label:after{
border-color:#99a3ad;
box-shadow:0 0 0 2px #d4d9db
}
.adyen-checkout__checkbox__input:checked:hover+.adyen-checkout__checkbox__label:after{
border-color:#06f;
box-shadow:0 0 0 2px rgba(0,102,255,.4)
}
.adyen-checkout__checkbox__input:focus+span:after{ .adyen-checkout__checkbox__input:focus+span:after{
border:1px solid #06f; border:1px solid #06f;
box-shadow:0 0 0 2px #99c2ff box-shadow:0 0 0 2px #99c2ff
...@@ -449,15 +481,12 @@ ...@@ -449,15 +481,12 @@
.adyen-checkout__dropdown{ .adyen-checkout__dropdown{
font-size:1em; font-size:1em;
max-width:100%; max-width:100%;
width:200px width:100%
}
.adyen-checkout__dropdown--small{
width:130px
}
.adyen-checkout__dropdown--large{
width:300px
} }
.adyen-checkout__dropdown__button{ .adyen-checkout__dropdown__button{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
background:#fff; background:#fff;
border:1px solid #b9c4c9; border:1px solid #b9c4c9;
border-radius:6px; border-radius:6px;
...@@ -465,8 +494,9 @@ ...@@ -465,8 +494,9 @@
height:40px; height:40px;
line-height:20px; line-height:20px;
outline:0; outline:0;
padding:9px 20px 9px 8px; padding:9px 24px 9px 12px;
transition:border .2s ease-out,box-shadow .2s ease-out; transition:border .2s ease-out,box-shadow .2s ease-out;
user-select:none;
width:100% width:100%
} }
.adyen-checkout__dropdown__button__icon{ .adyen-checkout__dropdown__button__icon{
...@@ -494,15 +524,19 @@ ...@@ -494,15 +524,19 @@
.adyen-checkout__dropdown__list{ .adyen-checkout__dropdown__list{
border-radius:6px; border-radius:6px;
box-shadow:0 2px 7px rgba(0,15,45,.3); box-shadow:0 2px 7px rgba(0,15,45,.3);
margin-top:2px; max-height:375px;
max-height:360px;
z-index:2 z-index:2
} }
.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active{
margin-top:2px
}
.adyen-checkout__dropdown__element{ .adyen-checkout__dropdown__element{
-moz-user-select:none;
-ms-hyphens:auto; -ms-hyphens:auto;
-ms-user-select:none;
-webkit-hyphens:auto; -webkit-hyphens:auto;
-webkit-user-select:none;
border:1px solid transparent; border:1px solid transparent;
border-bottom-color:#e6e9eb;
cursor:pointer; cursor:pointer;
font-size:.81em; font-size:.81em;
hyphens:auto; hyphens:auto;
...@@ -510,6 +544,7 @@ ...@@ -510,6 +544,7 @@
outline:0; outline:0;
padding:8px; padding:8px;
transition:background .2s ease-out,border-color .2s ease-out; transition:background .2s ease-out,border-color .2s ease-out;
user-select:none;
word-break:break-word word-break:break-word
} }
.adyen-checkout__dropdown__element:last-child{ .adyen-checkout__dropdown__element:last-child{
...@@ -518,10 +553,6 @@ ...@@ -518,10 +553,6 @@
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{ .adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{
background:rgba(230,233,235,.6) background:rgba(230,233,235,.6)
} }
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus{
border-bottom-color:#06f;
border-top-color:#06f
}
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{ .adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{
background:rgba(0,102,255,.1) background:rgba(0,102,255,.1)
} }
...@@ -538,8 +569,16 @@ ...@@ -538,8 +569,16 @@
right:32px right:32px
} }
.adyen-checkout__select-list{ .adyen-checkout__select-list{
background:#fff;
border:1px solid #b9c4c9;
border-radius:6px;
margin:0; margin:0;
padding:0 max-height:140px;
min-height:100px;
min-width:300px;
overflow-y:scroll;
padding:0;
width:100%
} }
.adyen-checkout__select-list__item{ .adyen-checkout__select-list__item{
background:#fff; background:#fff;
...@@ -566,6 +605,18 @@ ...@@ -566,6 +605,18 @@
.adyen-checkout__select-list__item--selected:active,.adyen-checkout__select-list__item--selected:focus,.adyen-checkout__select-list__item--selected:hover{ .adyen-checkout__select-list__item--selected:active,.adyen-checkout__select-list__item--selected:focus,.adyen-checkout__select-list__item--selected:hover{
background:rgba(0,102,255,.15) background:rgba(0,102,255,.15)
} }
.adyen-checkout__field-wrapper{
display:flex
}
.adyen-checkout__field--50{
width:50%
}
.adyen-checkout__field--50:first-child{
margin-right:8px
}
.adyen-checkout__field--50:nth-child(2){
margin-left:8px
}
.adyen-checkout__input{ .adyen-checkout__input{
background:#fff; background:#fff;
border:1px solid #b9c4c9; border:1px solid #b9c4c9;
...@@ -579,13 +630,23 @@ ...@@ -579,13 +630,23 @@
padding:5px 8px; padding:5px 8px;
position:relative; position:relative;
transition:border .2s ease-out,box-shadow .2s ease-out; transition:border .2s ease-out,box-shadow .2s ease-out;
width:200px width:100%
}
.adyen-checkout__input:hover{
border-color:#99a3ad
} }
.adyen-checkout__input:required{ .adyen-checkout__input:required{
box-shadow:none box-shadow:none
} }
.adyen-checkout__input--disabled,.adyen-checkout__input[readonly]{
background:#e6e9eb;
border-color:#e6e9eb
}
.adyen-checkout__input--disabled:hover{
border-color:#e6e9eb
}
.adyen-checkout__input-wrapper{ .adyen-checkout__input-wrapper{
display:inline-block; display:block;
position:relative position:relative
} }
.adyen-checkout__input-wrapper--block{ .adyen-checkout__input-wrapper--block{
...@@ -606,20 +667,15 @@ ...@@ -606,20 +667,15 @@
.adyen-checkout-input__inline-validation--invalid{ .adyen-checkout-input__inline-validation--invalid{
color:#d10244 color:#d10244
} }
.adyen-checkout__input--small{
width:134px
}
.adyen-checkout__input--large{
width:300px
}
.adyen-checkout__input--invalid{ .adyen-checkout__input--invalid{
border-color:#d10244 border-color:#d10244
} }
.adyen-checkout__input--valid{ .adyen-checkout__input--valid{
border-bottom-color:#0abf53 border-bottom-color:#0abf53
} }
.adyen-checkout__input--error{ .adyen-checkout__input--error,.adyen-checkout__input--error:hover,.adyen-checkout__input--invalid,.adyen-checkout__input--invalid:hover{
border-color:#d10244 border-color:#d10244;
color:#d10244
} }
.adyen-checkout__input::-webkit-input-placeholder{ .adyen-checkout__input::-webkit-input-placeholder{
color:#b9c4c9; color:#b9c4c9;
...@@ -637,22 +693,27 @@ ...@@ -637,22 +693,27 @@
color:#b9c4c9; color:#b9c4c9;
font-weight:200 font-weight:200
} }
.adyen-checkout__input--focus,.adyen-checkout__input:active,.adyen-checkout__input:focus{ .adyen-checkout__input--focus,.adyen-checkout__input--focus:hover,.adyen-checkout__input:active,.adyen-checkout__input:active:hover,.adyen-checkout__input:focus,.adyen-checkout__input:focus:hover{
border:1px solid #06f; border:1px solid #06f;
box-shadow:0 0 0 2px #99c2ff box-shadow:0 0 0 2px #99c2ff
} }
.adyen-checkout__input[readonly]{ .adyen-checkout__input[readonly],.adyen-checkout__input[readonly]:hover{
background-color:#e6e9eb; background-color:#e6e9eb;
border-color:transparent; border-color:transparent;
color:#687282; color:#687282;
cursor:default cursor:default
} }
.adyen-checkout__fieldset{ .adyen-checkout__fieldset{
color:#687282;
display:block; display:block;
padding-bottom:30px; padding-bottom:8px;
width:100% width:100%
} }
.adyen-checkout__fieldset:last-of-type{
padding-bottom:0
}
.adyen-checkout__fieldset+.adyen-checkout__fieldset{
margin-top:16px
}
.adyen-checkout__fieldset__title{ .adyen-checkout__fieldset__title{
color:#687282; color:#687282;
display:block; display:block;
...@@ -660,9 +721,27 @@ ...@@ -660,9 +721,27 @@
font-weight:700; font-weight:700;
letter-spacing:1px; letter-spacing:1px;
margin:0; margin:0;
padding:0 0 20px; padding:0 0 8px;
text-transform:uppercase text-transform:uppercase
} }
.adyen-checkout__field-group,.adyen-checkout__fieldset__fields{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
width:100%
}
.adyen-checkout__field-group:last-of-type .adyen-checkout__field{
margin-bottom:0
}
.adyen-checkout__field--col-70{
width:calc(70% - 8px)
}
.adyen-checkout__field--col-30{
width:calc(30% - 8px)
}
.adyen-checkout__field--col-50{
width:calc(50% - 8px)
}
.adyen-checkout__fieldset--readonly{ .adyen-checkout__fieldset--readonly{
color:#00112c; color:#00112c;
font-size:.81em; font-size:.81em;
...@@ -673,94 +752,63 @@ ...@@ -673,94 +752,63 @@
max-width:540px max-width:540px
} }
.adyen-checkout__open-invoice .adyen-checkout__checkbox{ .adyen-checkout__open-invoice .adyen-checkout__checkbox{
margin:0 0 20px margin:0 0 8px
}
.adyen-checkout__link--more-information{
font-size:.81em
} }
.adyen-checkout__applepay__button{ .adyen-checkout__open-invoice .adyen-checkout__checkbox:only-of-type{
height:40px; margin-bottom:0
width:240px
} }
.adyen-checkout__card-input__form{ .adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
transition:opacity .25s ease-out margin:0
} }
.adyen-checkout__card__exp-cvc{ .adyen-checkout__open-invoice .adyen-checkout__field--gender .adyen-checkout__radio_group{
display:flex display:flex
} }
.adyen-checkout__card__cardNumber{ .adyen-checkout__open-invoice .adyen-checkout__field--gender .adyen-checkout__radio_group>label{
max-width:400px margin-right:16px
}
.adyen-checkout__card__cardNumber__input{
padding:5px 8px 5px 57px
}
.adyen-checkout__card__exp-date__input--oneclick{
font-weight:400;
height:40px;
line-height:40px
} }
.adyen-checkout__card__exp-cvc .adyen-checkout__field{ .adyen-checkout__open-invoice .adyen-checkout__field--gender .adyen-checkout__label--focused .adyen-checkout__label__text,.adyen-checkout__open-invoice .adyen-checkout__field--gender .adyen-checkout__label__text{
margin-bottom:0; color:#00112c
margin-right:32px
}
.adyen-checkout__card-input .adyen-checkout__store-details{
margin-top:16px
}
.adyen-checkout__giropay__results{
background:#fff;
border:1px solid #b9c4c9;
border-radius:6px;
max-height:140px;
min-height:100px;
min-width:300px;
overflow-y:scroll;
width:100%
} }
.adyen-checkout__giropay__no-results{ .adyen-checkout__open-invoice .adyen-checkout__fieldset--billingAddress{
color:#687282; padding-bottom:8px
display:block;
font-size:.81em;
padding:0 0 0 2px
} }
.adyen-checkout__giropay__placeholder{ .adyen-checkout__open-invoice .adyen-checkout__fieldset--deliveryAddress{
color:#b9c4c9; margin-top:24px;
display:block; padding-bottom:8px
font-weight:200;
padding:0 0 0 2px
} }
.adyen-checkout__giropay__loading{ .adyen-checkout__open-invoice .adyen-checkout__input--separateDeliveryAddress{
display:block; margin-bottom:0
min-height:100px
} }
.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper{ .adyen-checkout__open-invoice .adyen-checkout__field--dateOfBirth{
display:inline-block; width:calc(50% - 8px)
vertical-align:middle
} }
.adyen-checkout__giropay__loading-text{ .adyen-checkout__open-invoice .adyen-checkout__field--country,.adyen-checkout__open-invoice .adyen-checkout__field--street{
color:#687282; width:calc(70% - 8px)
font-size:.81em;
line-height:16px;
vertical-align:middle
} }
.adyen-checkout__giropay__error{ .adyen-checkout__open-invoice .adyen-checkout__field--houseNumberOrName,.adyen-checkout__open-invoice .adyen-checkout__field--postalCode{
color:#d10244; width:calc(30% - 8px)
font-size:.81em
} }
.adyen-checkout__button{ .adyen-checkout__button{
background:#00112c; background:#00112c;
border:0; border:0;
border-radius:6px; border-radius:6px;
box-shadow:0 3px 4px rgba(0,15,45,.2);
color:#fff; color:#fff;
cursor:pointer; cursor:pointer;
font-size:1em; font-size:1em;
font-weight:700; font-weight:500;
height:48px; height:48px;
margin:0; margin:0;
padding:15px; padding:15px;
transition:background .3s ease-out; text-decoration:none;
transition:background .3s ease-out,box-shadow .3s ease-out;
width:100% width:100%
} }
.adyen-checkout__button--pay{
margin-top:24px
}
.adyen-checkout__button--standalone{
margin-top:0
}
.adyen-checkout__button:disabled{ .adyen-checkout__button:disabled{
-moz-user-select:all; -moz-user-select:all;
-ms-user-select:all; -ms-user-select:all;
...@@ -770,176 +818,255 @@ ...@@ -770,176 +818,255 @@
cursor:not-allowed; cursor:not-allowed;
user-select:all user-select:all
} }
.adyen-checkout__button:focus{
box-shadow:0 0 0 2px #99c2ff;
outline:0
}
.adyen-checkout__button:hover{
background:#1c3045;
box-shadow:0 0,0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14)
}
.adyen-checkout__button:active{
background:#3a4a5c
}
.adyen-checkout__button:hover:focus{
box-shadow:0 0 0 2px #99c2ff,0 3px 4px rgba(0,15,45,.2)
}
.adyen-checkout__button--loading{ .adyen-checkout__button--loading{
-moz-user-select:none; -moz-user-select:none;
-ms-user-select:none; -ms-user-select:none;
-webkit-user-select:none; -webkit-user-select:none;
background:#687282; background:#687282;
box-shadow:none; box-shadow:none;
outline:0;
pointer-events:none; pointer-events:none;
user-select:none user-select:none
} }
.adyen-checkout__button .adyen-checkout__spinner{ .adyen-checkout__button .adyen-checkout__spinner{
border-color:transparent #fff #fff; border-color:transparent #fff #fff
border-width:3px
} }
.adyen-checkout__button__content{ .adyen-checkout__button__content{
align-items:center; align-items:center;
display:flex; display:flex;
justify-content:center justify-content:center
} }
.adyen-checkout__phone-input{ .adyen-checkout__button__icon{
display:flex margin-right:12px
}
.adyen-checkout__phone-input__prefix{
margin-bottom:0;
margin-right:.5em
}
.adyen-checkout__input--phone-number{
margin-bottom:0
} }
.adyen-checkout__iban-input__number{ .adyen-checkout__button__text{
padding:5px 36px 5px 8px; display:block;
text-transform:uppercase justify-content:center;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
} }
.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{ .adyen-checkout__button.adyen-checkout__button--inline{
background-color:transparent;
box-sizing:border-box;
display:block; display:block;
overflow:auto; font-size:.81em;
width:100% height:auto;
padding:10px 8px;
width:auto
} }
.adyen-checkout__threeds2__challenge-container--01{ .adyen-checkout__button.adyen-checkout__button--secondary{
height:400px; background:rgba(0,102,255,.1);
width:250px border:1px solid transparent;
color:#06f;
padding:10px 12px
} }
.adyen-checkout__threeds2__challenge-container--02{ .adyen-checkout__button.adyen-checkout__button--secondary:hover{
height:400px; background:rgba(0,102,255,.2);
width:390px box-shadow:none
} }
.adyen-checkout__threeds2__challenge-container--03{ .adyen-checkout__button.adyen-checkout__button--secondary:active,.adyen-checkout__button.adyen-checkout__button--secondary:active:hover{
height:600px; background:rgba(0,102,255,.3);
width:500px box-shadow:none
} }
.adyen-checkout__threeds2__challenge-container--04{ .adyen-checkout__button.adyen-checkout__button--completed,.adyen-checkout__button.adyen-checkout__button--completed:active,.adyen-checkout__button.adyen-checkout__button--completed:active:hover,.adyen-checkout__button.adyen-checkout__button--completed:hover{
height:400px; background:#0abf53;
width:600px color:#fff
} }
.adyen-checkout__threeds2_challenge-container--05{ .adyen-checkout__button.adyen-checkout__button--completed .adyen-checkout__button__icon{
height:100%; -webkit-filter:brightness(0) invert(1);
width:100% filter:brightness(0) invert(1)
} }
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05{ .adyen-checkout__applepay__button{
overflow:hidden; height:40px;
padding-top:56.25%; width:240px
position:relative
} }
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{ .adyen-checkout__dropin .adyen-checkout__applepay__button{
border:0;
height:100%;
left:0;
position:absolute;
top:0;
width:100% width:100%
} }
.adyen-checkout__qr-loader{ .adyen-checkout__card-input__form{
background:#fff; transition:opacity .25s ease-out
border:1px solid #d4d9db;
border-radius:6px;
padding:40px;
text-align:center
} }
.adyen-checkout__qr-loader--app{ .adyen-checkout__card__cardNumber{
border:0; max-width:400px
border-radius:0;
padding:0
} }
.adyen-checkout__qr-loader__brand-logo{ .adyen-checkout__card__cardNumber__input{
max-height:50px; padding:5px 8px
width:110px
} }
.adyen-checkout__qr-loader__subtitle{ .adyen-checkout__card__exp-date__input--oneclick{
margin-top:32px font-weight:400;
line-height:30px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
} }
.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{ .adyen-checkout__card__holderName,.adyen-checkout__field--expiryDate,.adyen-checkout__field--storedCard{
color:#00112c; margin-bottom:0
font-size:1em;
line-height:19px
} }
.adyen-checkout__qr-loader__payment_amount{ .adyen-checkout__card__holderName,.adyen-checkout__store-details{
font-weight:700 margin-top:16px
} }
.adyen-checkout__qr-loader__progress{ .adyen-checkout__field--cardNumber .adyen-checkout__input--error .adyen-checkout__card__cardNumber__brandIcon{
background:#d4d9db; display:none
border-radius:25px;
height:4px;
margin:32px auto 12px;
padding-right:3%;
width:152px
} }
.adyen-checkout__qr-loader__percentage{ .adyen-checkout__field--cardNumber .adyen-checkout__input--valid:not(.adyen-checkout__card__cardNumber__input--noBrand)+.adyen-checkout-input__inline-validation--valid{
background:#06f; display:none
border-radius:25px;
display:block;
height:100%
} }
.adyen-checkout__qr-loader__countdown{ .adyen-checkout__giropay__no-results{
color:#687282; color:#687282;
font-size:.81em display:block;
font-size:.81em;
padding:0 0 0 2px
} }
.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{ .adyen-checkout__giropay__placeholder{
margin:60px 0 color:#b9c4c9;
display:block;
font-weight:200;
padding:0 0 0 2px
} }
.adyen-checkout__qr-loader__separator__label{ .adyen-checkout__giropay__loading{
background:#fff; display:block;
border-radius:100%; min-height:100px
color:#687282; }
.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper{
display:inline-block; display:inline-block;
height:34px; vertical-align:middle
line-height:34px;
position:relative;
width:34px;
z-index:1
} }
.adyen-checkout__qr-loader__separator__line{ .adyen-checkout__giropay__loading-text{
-webkit-transform:translateY(-17px); color:#687282;
border-top:1px solid #d4d9db; font-size:.81em;
display:block; line-height:16px;
transform:translateY(-17px) vertical-align:middle
} }
.adyen-checkout__button.adyen-checkout__button--qr-loader{ .adyen-checkout__giropay__error{
display:block; color:#d10244;
text-decoration:none font-size:.81em
}
.adyen-checkout__dropin .gpay-button.long{
height:48px;
padding:15px 24px 13px;
transition:background-color .3s ease-out,box-shadow .3s ease-out;
width:100%
}
.adyen-checkout__field--issuer-list{
margin-bottom:0
}
.adyen-checkout__econtext-input__field{
display:flex;
flex-wrap:wrap
}
.adyen-checkout__econtext-input__field .adyen-checkout__field--firstName,.adyen-checkout__econtext-input__field .adyen-checkout__field--lastName{
max-width:100%;
min-width:250px;
width:calc(50% - 8px)
}
.adyen-checkout__econtext-input__field .adyen-checkout__field--firstName{
margin-right:16px
} }
.adyen-checkout__voucher-result{ .adyen-checkout__voucher-result{
background:#fff; border-radius:12px;
border:1px solid #d4d9db;
border-radius:6px;
box-sizing:border-box; box-sizing:border-box;
padding:20px 16px 56px; position:relative;
text-align:center text-align:center
} }
.adyen-checkout__voucher-result__bottom,.adyen-checkout__voucher-result__top{
background:#fff;
border:1px solid #d4d9db
}
.adyen-checkout__voucher-result__top{
border-bottom:0;
border-radius:12px 12px 0 0;
padding:40px 0 24px
}
.adyen-checkout__voucher-result__bottom{
border-radius:0 0 12px 12px;
border-top:0
}
.adyen-checkout__voucher-result__separator{
align-items:center;
background:#fff;
display:flex;
height:13px;
margin:0 auto;
position:relative;
width:calc(100% - 14px)
}
.adyen-checkout__voucher-result__separator:after,.adyen-checkout__voucher-result__separator:before{
background-image:url(data:image/svg+xml;
base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMGw1IDIgMS41IDRIN1YwSDB6bTAgMTNsNS0yIDEuNS00SDd2NkgweiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik02LjQyMyA2LjVDNi40MjMgMy4zMTIgMy43ODMuNzU2LjUuNTE4YzMuMzg2LjIzNiA2IDIuODU1IDYgNS45ODIgMCAzLjEyNy0yLjYxNCA1Ljc0Ni02IDUuOTgzdi0uMDAxYzMuMjg0LS4yMzcgNS45MjMtMi43OTQgNS45MjMtNS45ODJ6IiBzdHJva2U9IiNENEQ5REIiLz48cGF0aCBmaWxsPSIjRDREOURCIiBkPSJNMCAwaDF2MUgwek0wIDEyaDF2MUgweiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDd2MTNIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=)
}
.adyen-checkout__voucher-result__separator:before{
background-position:100%;
background-repeat:no-repeat;
content:"";
height:13px;
left:-7px;
position:absolute;
top:0;
width:7px
}
.adyen-checkout__voucher-result__separator:after{
-webkit-transform:rotate(-180deg);
background-position:100%;
background-repeat:no-repeat;
content:"";
height:13px;
position:absolute;
right:-7px;
top:0;
transform:rotate(-180deg);
width:7px
}
.adyen-checkout__voucher-result__separator__inner{
border-top:1px solid #e6e9eb;
width:100%
}
.adyen-checkout__voucher-result__image{ .adyen-checkout__voucher-result__image{
align-items:center; align-items:center;
display:flex; display:flex;
justify-content:center; justify-content:center;
margin-bottom:16px; margin-bottom:40px;
width:100% width:100%
} }
.adyen-checkout__voucher-result__image__wrapper{ .adyen-checkout__voucher-result__image__wrapper{
display:inline-block; display:block;
padding:8px; height:48px;
width:120px margin:0 24px;
position:relative
}
.adyen-checkout__voucher-result__image__wrapper:after{
border:1px solid rgba(0,27,43,.17);
border-radius:3px;
content:"";
height:100%;
left:0;
position:absolute;
top:0;
width:100%
} }
.adyen-checkout__voucher-result__image__wrapper:nth-child(2){ .adyen-checkout__voucher-result__image__wrapper:nth-child(2):before{
border-left:1px solid #d4d9db border-left:1px solid #d4d9db;
content:"";
height:64px;
left:-24.5px;
position:absolute;
top:-8px;
width:1px
} }
.adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{ .adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{
height:34px border-radius:3px;
} height:48px
.adyen-checkout__voucher-result__image__brand{
height:60px
} }
.adyen-checkout__voucher-result__introduction{ .adyen-checkout__voucher-result__introduction{
color:#00112c; color:#00112c;
...@@ -971,52 +1098,67 @@ ...@@ -971,52 +1098,67 @@
display:block; display:block;
font-weight:400; font-weight:400;
left:0; left:0;
line-height:19px;
margin:0 auto; margin:0 auto;
position:absolute; position:absolute;
right:0; right:0;
top:-14px; top:-2px;
user-select:none; user-select:none;
width:auto width:auto
} }
.adyen-checkout__voucher-result__code__label:before{
content:"";
position:absolute
}
.adyen-checkout__voucher-result__code__label__text{ .adyen-checkout__voucher-result__code__label__text{
background:#fff; background:#fff;
color:#00112c; color:#00112c;
font-size:13px; font-size:13px;
letter-spacing:normal;
line-height:1;
padding:0 8px padding:0 8px
} }
.adyen-checkout__voucher-result__code__barcode{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
display:block;
height:56px;
margin:0 auto 8px;
max-width:100%;
user-select:none
}
.adyen-checkout__voucher-result__code{ .adyen-checkout__voucher-result__code{
-moz-user-select:all; -moz-user-select:all;
-ms-user-select:all; -ms-user-select:all;
-webkit-user-select:all; -webkit-user-select:all;
border:1px solid #e6e9eb; border-width:1px 0;
border-radius:6px;
color:#00112c; color:#00112c;
display:inline-block; display:inline-block;
font-size:1.5em; font-size:1.5em;
font-weight:700; font-weight:700;
letter-spacing:1px; letter-spacing:1px;
line-height:19px; line-height:1.2;
margin:20px auto 16px; margin:0 auto;
max-width:100%; padding:16px 48px;
min-width:200px;
padding:28px 48px 24px;
position:relative; position:relative;
text-align:center; text-align:center;
user-select:all; user-select:all;
width:300px width:100%;
word-break:break-word
} }
.adyen-checkout__voucher-result__details{ .adyen-checkout__voucher-result__details{
list-style:none; list-style:none;
margin:8px auto 0; margin:-1px auto 0;
max-width:300px;
padding:0 padding:0
} }
.adyen-checkout__voucher-result__details__item{ .adyen-checkout__voucher-result__details__item{
border-top:1px solid #e6e9eb;
color:#00112c; color:#00112c;
display:flex; display:flex;
font-size:.81em; font-size:.81em;
justify-content:space-between; justify-content:space-between;
margin-bottom:16px; padding:16px 24px;
word-break:break-word word-break:break-word
} }
.adyen-checkout__voucher-result__details__item:last-child{ .adyen-checkout__voucher-result__details__item:last-child{
...@@ -1031,9 +1173,189 @@ ...@@ -1031,9 +1173,189 @@
max-width:50%; max-width:50%;
text-align:right text-align:right
} }
.adyen-checkout__payment-method{ .adyen-checkout__voucher-result__actions{
align-items:center;
display:flex;
justify-content:center;
list-style:none;
margin:0 auto 32px;
max-width:100%;
min-width:200px;
padding:0;
width:300px
}
.adyen-checkout__voucher-result__actions__item{
margin:0 4px
}
.adyen-checkout__link--more-information{
display:block;
font-size:.81em;
font-weight:400;
margin:16px 0;
text-align:center
}
.adyen-checkout__phone-input__container{
display:flex
}
.adyen-checkout__phone-input__prefix{
margin-bottom:0;
margin-right:.5em;
width:30%
}
.adyen-checkout__input--phone-number{
margin-bottom:0;
width:70%
}
.adyen-checkout__iban-input__number{
padding:5px 36px 5px 8px;
text-transform:uppercase
}
.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{
background-color:transparent;
box-sizing:border-box;
display:block;
overflow:auto;
width:100%
}
.adyen-checkout__threeds2__challenge-container--01{
height:400px;
width:250px
}
.adyen-checkout__threeds2__challenge-container--02{
height:400px;
width:390px
}
.adyen-checkout__threeds2__challenge-container--03{
height:600px;
width:500px
}
.adyen-checkout__threeds2__challenge-container--04{
height:400px;
width:600px
}
.adyen-checkout__threeds2_challenge-container--05{
height:100%;
width:100%
}
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05{
overflow:hidden;
padding-top:56.25%;
position:relative
}
.adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{
border:0;
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.adyen-checkout__qr-loader{
background:#fff; background:#fff;
border:1px solid #d4d9db; border:1px solid #d4d9db;
border-radius:6px;
padding:40px;
text-align:center
}
.adyen-checkout__qr-loader--app{
border:0;
border-radius:0;
padding:0
}
.adyen-checkout__qr-loader__brand-logo{
max-height:50px;
width:110px
}
.adyen-checkout__qr-loader__subtitle{
margin-top:32px
}
.adyen-checkout__qr-loader__subtitle--result{
margin-bottom:32px
}
.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{
color:#00112c;
font-size:1em;
line-height:19px
}
.adyen-checkout__qr-loader__icon{
height:88px;
width:88px
}
.adyen-checkout__qr-loader__icon--result{
margin-bottom:100px
}
.adyen-checkout__qr-loader__payment_amount{
font-weight:700
}
.adyen-checkout__qr-loader__progress{
background:#d4d9db;
border-radius:24px;
height:4px;
margin:32px auto 12px;
padding-right:3%;
width:152px
}
.adyen-checkout__qr-loader__percentage{
background:#06f;
border-radius:24px;
display:block;
height:100%
}
.adyen-checkout__qr-loader__countdown{
color:#687282;
font-size:.81em
}
.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{
margin:60px 0
}
.adyen-checkout__qr-loader__separator__label{
background:#fff;
border-radius:50%;
color:#687282;
display:inline-block;
height:34px;
line-height:34px;
position:relative;
width:34px;
z-index:1
}
.adyen-checkout__qr-loader__separator__line{
-webkit-transform:translateY(-17px);
border-top:1px solid #d4d9db;
display:block;
transform:translateY(-17px)
}
.adyen-checkout__button.adyen-checkout__button--qr-loader{
display:block;
text-decoration:none
}
.adyen-checkout__doku-input__field{
display:flex;
flex-wrap:wrap
}
.adyen-checkout__doku-input__field .adyen-checkout__field--firstName,.adyen-checkout__doku-input__field .adyen-checkout__field--lastName{
max-width:100%;
min-width:250px;
width:calc(50% - 8px)
}
.adyen-checkout__doku-input__field .adyen-checkout__field--firstName{
margin-right:16px
}
.adyen-checkout__voucher-result--boletobancario .adyen-checkout__voucher-result__code{
font-size:.81em;
line-height:19px;
padding:24px;
word-break:break-all
}
.adyen-checkout__voucher-result--oxxo .adyen-checkout__voucher-result__code{
font-size:.81em;
line-height:19px;
padding:24px;
word-break:break-all
}
.adyen-checkout__payment-method{
background:#fff;
border:1px solid #e6e9eb;
cursor:pointer; cursor:pointer;
margin-top:-1px; margin-top:-1px;
position:relative; position:relative;
...@@ -1044,13 +1366,13 @@ ...@@ -1044,13 +1366,13 @@
outline:0 outline:0
} }
.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{ .adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
border-top-left-radius:6px; border-top-left-radius:12px;
border-top-right-radius:6px; border-top-right-radius:12px;
margin-top:0 margin-top:0
} }
.adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{ .adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{
border-bottom-left-radius:6px; border-bottom-left-radius:12px;
border-bottom-right-radius:6px; border-bottom-right-radius:12px;
margin-bottom:0 margin-bottom:0
} }
.adyen-checkout__payment-method--loading{ .adyen-checkout__payment-method--loading{
...@@ -1060,31 +1382,51 @@ ...@@ -1060,31 +1382,51 @@
opacity:.9 opacity:.9
} }
.adyen-checkout__payment-method--disabling{ .adyen-checkout__payment-method--disabling{
opacity:.5 opacity:.3
} }
.adyen-checkout__payment-method__header{ .adyen-checkout__payment-method__header{
align-items:center; align-items:center;
color:#00112c; color:#00112c;
display:flex; display:flex;
flex-wrap:nowrap;
font-size:1em; font-size:1em;
font-weight:400; font-weight:400;
padding:16px; justify-content:space-between;
padding:16px 16px 16px 48px;
position:relative; position:relative;
transition:background .1s ease-out; transition:background .1s ease-out;
width:100% width:100%
} }
.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__header{
padding:16px
}
.adyen-checkout__payment-method__header__title{
align-items:center;
display:flex;
flex-shrink:0;
margin-right:16px;
max-width:100%
}
.adyen-checkout__payment-method__surcharge{ .adyen-checkout__payment-method__surcharge{
color:#687282; color:#687282;
margin-left:5px margin-left:5px
} }
.adyen-checkout__payment-method--selected{ .adyen-checkout__payment-method--selected{
background:#f7f8f9; background:#f7f8f9;
border:1px solid #d4d9db; border:1px solid #e6e9eb;
border-radius:6px; border-radius:12px;
cursor:default; cursor:default;
margin:8px 0; margin:8px 0;
transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
} }
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header{
flex-wrap:wrap
}
.adyen-checkout__payment-method__name{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.adyen-checkout__payment-method__name--selected{ .adyen-checkout__payment-method__name--selected{
font-weight:500 font-weight:500
} }
...@@ -1092,11 +1434,17 @@ ...@@ -1092,11 +1434,17 @@
padding:0 16px padding:0 16px
} }
.adyen-checkout__payment-method__details__content{ .adyen-checkout__payment-method__details__content{
margin:6px 0 22px margin:0 0 16px
} }
.adyen-checkout__payment-method__image__wrapper{ .adyen-checkout__payment-method__image__wrapper{
height:26px; height:26px;
position:relative opacity:0;
position:relative;
transition:opacity .15s ease-out;
width:40px
}
.adyen-checkout__payment-method__image__wrapper--loaded{
opacity:1
} }
.adyen-checkout__payment-method__image__wrapper:after{ .adyen-checkout__payment-method__image__wrapper:after{
border:1px solid rgba(0,27,43,.17); border:1px solid rgba(0,27,43,.17);
...@@ -1111,12 +1459,47 @@ ...@@ -1111,12 +1459,47 @@
.adyen-checkout__payment-method__image{ .adyen-checkout__payment-method__image{
border-radius:3px border-radius:3px
} }
.adyen-checkout__payment-method__brands{
display:flex;
flex-basis:auto;
flex-shrink:1;
flex-wrap:wrap;
height:16px;
margin:4px 0;
overflow:hidden;
text-align:right
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands{
height:auto;
overflow:visible;
text-align:left
}
.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper{
display:inline-block;
height:16px;
margin-right:4px;
transition:opacity .2s ease-out;
width:24px
}
.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper:last-child{
margin:0
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper{
margin-bottom:4px
}
.adyen-checkout__payment-method__brands img{
height:16px;
width:24px
}
.adyen-checkout__payment-method__image__wrapper--disabled{
opacity:.25
}
.adyen-checkout__payment-method__disable-confirmation{ .adyen-checkout__payment-method__disable-confirmation{
align-items:center; align-items:center;
background:#e6e9eb; background:#e6e9eb;
color:#00112c; color:#00112c;
display:flex; display:flex;
font-size:.94em; font-size:1em;
justify-content:space-between; justify-content:space-between;
margin-bottom:10px; margin-bottom:10px;
padding:8px 16px padding:8px 16px
...@@ -1147,18 +1530,19 @@ ...@@ -1147,18 +1530,19 @@
background-color:#fff; background-color:#fff;
border:1px solid #b9c4c9; border:1px solid #b9c4c9;
border-radius:50%; border-radius:50%;
box-shadow:inset 0 1px 3px rgba(0,27,43,.15); height:16px;
height:18px; left:16px;
position:absolute; position:absolute;
right:20px; transition:border-color .2s ease-out,box-shadow .2s ease-out;
transition:border-color .3s ease-out; width:16px
width:18px }
.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__radio{
display:none
} }
.adyen-checkout__payment-method__radio:after{ .adyen-checkout__payment-method__radio:after{
-webkit-transform:translateY(-50%) scale(0); -webkit-transform:translateY(-50%) scale(0);
background-color:#fff; background-color:#fff;
border-radius:50%; border-radius:50%;
box-shadow:0 1px 1px rgba(0,15,45,.25);
content:""; content:"";
display:block; display:block;
height:6px; height:6px;
...@@ -1174,31 +1558,31 @@ ...@@ -1174,31 +1558,31 @@
width:6px width:6px
} }
.adyen-checkout__payment-method__radio:hover{ .adyen-checkout__payment-method__radio:hover{
border-color:#06f; border-color:#99a3ad;
box-shadow:0 0 0 2px #d4d9db;
cursor:pointer cursor:pointer
} }
.adyen-checkout__payment-method__radio--selected{ .adyen-checkout__payment-method__radio--selected{
background-color:#06f; background-color:#06f;
border:0; border:0;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out transition:all .3s ease-out
} }
.adyen-checkout__payment-method__radio--selected:hover{
box-shadow:0 0 0 2px rgba(0,102,255,.4)
}
.adyen-checkout__payment-method__radio--selected:after{ .adyen-checkout__payment-method__radio--selected:after{
-webkit-transform:translateY(-50%) scale(1); -webkit-transform:translateY(-50%) scale(1);
transform:translateY(-50%) scale(1) transform:translateY(-50%) scale(1)
} }
.adyen-checkout__button--pay{
margin-bottom:16px
}
.adyen-checkout__status{ .adyen-checkout__status{
align-items:center; align-items:center;
background-color:#fff; background-color:#fff;
border:1px solid #d4d9db; border:1px solid #d4d9db;
border-radius:6px; border-radius:6px;
color:#001b2b; color:#00112c;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
font-size:16px; font-size:1em;
height:350px; height:350px;
justify-content:center; justify-content:center;
margin:0; margin:0;
...@@ -1225,6 +1609,7 @@ ...@@ -1225,6 +1609,7 @@
.adyen-checkout__link:hover{ .adyen-checkout__link:hover{
text-decoration:underline text-decoration:underline
} }
/* Checkout component Adyen styling end */ /* Checkout component Adyen styling end */
/* never show the close button as this will result in errors */ /* never show the close button as this will result in errors */
......
view/frontend/web/js/view/payment/adyen-methods.js
View file @ 6e014400
...@@ -72,12 +72,13 @@ define( ...@@ -72,12 +72,13 @@ define(
checkoutCardComponentScriptTag.id = "AdyenCheckoutCardComponentScript"; checkoutCardComponentScriptTag.id = "AdyenCheckoutCardComponentScript";
checkoutCardComponentScriptTag.src = self.getCheckoutCardComponentSource(); checkoutCardComponentScriptTag.src = self.getCheckoutCardComponentSource();
checkoutCardComponentScriptTag.type = "text/javascript"; checkoutCardComponentScriptTag.type = "text/javascript";
document.body.appendChild(checkoutCardComponentScriptTag); document.head.appendChild(checkoutCardComponentScriptTag);
if (this.isGooglePayEnabled()) { if (this.isGooglePayEnabled()) {
var googlepayscript = document.createElement('script'); var googlepayscript = document.createElement('script');
googlepayscript.src = "https://pay.google.com/gp/p/js/pay.js"; googlepayscript.src = "https://pay.google.com/gp/p/js/pay.js";
googlepayscript.type = "text/javascript"; googlepayscript.type = "text/javascript";
document.body.appendChild(googlepayscript); document.head.appendChild(googlepayscript);
} }
}, },
getCheckoutCardComponentSource: function() { getCheckoutCardComponentSource: function() {
......
view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js
View file @ 6e014400
...@@ -65,10 +65,7 @@ define( ...@@ -65,10 +65,7 @@ define(
// initialize adyen component for general use // initialize adyen component for general use
this.checkout = new AdyenCheckout({ this.checkout = new AdyenCheckout({
locale: this.getLocale(), locale: this.getLocale()
risk: {
enabled: false
}
}); });
return this; return this;
......
view/frontend/web/js/view/payment/method-renderer/adyen-hpp-method.js
View file @ 6e014400
...@@ -82,10 +82,7 @@ define( ...@@ -82,10 +82,7 @@ define(
* @type {AdyenCheckout} * @type {AdyenCheckout}
*/ */
self.checkoutComponent = new AdyenCheckout({ self.checkoutComponent = new AdyenCheckout({
locale: self.getLocale(), locale: self.getLocale()
risk: {
enabled: false
}
}); });
// reset variable: // reset variable:
......
view/frontend/web/template/payment/cc-form.html
View file @ 6e014400
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<!-- /ko --> <!-- /ko -->
<div class="field number cardContainerField"> <div class="field number cardContainerField">
<div afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}"></div> <div class="checkout-component-dock" afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}"></div>
</div> </div>
<div id="threeDS2Wrapper"> <div id="threeDS2Wrapper">
......
view/frontend/web/template/payment/google-pay-form.html
View file @ 6e014400
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<!--/ko--> <!--/ko-->
</div> </div>
<div class="field number googlePay"> <div class="field number googlePay">
<div afterRender="renderGooglePay()" data-bind="attr: { id: 'googlePay'}"> <div class="checkout-component-dock" afterRender="renderGooglePay()" data-bind="attr: { id: 'googlePay'}">
<!-- ko ifnot: isGooglePayAllowed() --> <!-- ko ifnot: isGooglePayAllowed() -->
Google Pay is not available Google Pay is not available
<!--/ko--></div> <!--/ko--></div>
......
view/frontend/web/template/payment/hpp-form.html
View file @ 6e014400
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + value}'> <fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + value}'>
<!-- ko if: hasIssuersAvailable() --> <!-- ko if: hasIssuersAvailable() -->
<!-- ko if: isIdeal() --> <!-- ko if: isIdeal() -->
<div afterRender="renderIdealComponent()" data-bind="attr: { id: 'iDealContainer'}"></div> <div class="checkout-component-dock" afterRender="renderIdealComponent()" data-bind="attr: { id: 'iDealContainer'}"></div>
<!--/ko--> <!--/ko-->
<!-- ko ifnot: isIdeal() --> <!-- ko ifnot: isIdeal() -->
<label data-bind="attr: {'for': 'issuerId'}" class="label"> <label data-bind="attr: {'for': 'issuerId'}" class="label">
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</div> </div>
<!--/ko--> <!--/ko-->
<div afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div> <div class="checkout-component-dock" afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div>
<!--/ko--> <!--/ko-->
<!-- ko if: isPaymentMethodAfterPay() --> <!-- ko if: isPaymentMethodAfterPay() -->
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
</div> </div>
<!--/ko--> <!--/ko-->
<div afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div> <div class="checkout-component-dock" afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div>
<!--/ko--> <!--/ko-->
<!-- ko if: isPaymentMethodOtherOpenInvoiceMethod() --> <!-- ko if: isPaymentMethodOtherOpenInvoiceMethod() -->
...@@ -218,7 +218,7 @@ ...@@ -218,7 +218,7 @@
<!--/ko--> <!--/ko-->
<!-- ko if: isSepaDirectDebit() --> <!-- ko if: isSepaDirectDebit() -->
<div afterRender="renderSepaDirectDebitComponent()" data-bind="attr: { id: 'sepaDirectDebitContainer'}"></div> <div class="checkout-component-dock" afterRender="renderSepaDirectDebitComponent()" data-bind="attr: { id: 'sepaDirectDebitContainer'}"></div>
<!--/ko--> <!--/ko-->
<!-- ko if: isAch() --> <!-- ko if: isAch() -->
......
view/frontend/web/template/payment/oneclick-form.html
View file @ 6e014400
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</div> </div>
</div> </div>
<div afterRender="renderSecureCVC()" data-bind="attr: { id: 'cvcContainer-' + value}"></div> <div class="checkout-component-dock" afterRender="renderSecureCVC()" data-bind="attr: { id: 'cvcContainer-' + value}"></div>
<!--/ko--> <!--/ko-->
<!-- ko if: agreement_data.bank --> <!-- ko if: agreement_data.bank -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment