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 5727c8d0 authored by alessio's avatar alessio Committed by attilak
Browse files
Options

Update css for 2.2 component

parent 6694b94f
Show whitespace changes
Inline Side-by-side
Showing with 1019 additions and 844 deletions
view/frontend/web/css/styles.css
View file @ 5727c8d0
......@@ -25,9 +25,17 @@
}
.checkout-payment-method .ccard .changable-card-expiry { display:none; }
.checkout-payment-method .ccard .changable-card-expiry._active { display:block; }
.checkout-payment-method .ccard .expire-update._disable { display:none; }
.checkout-payment-method .ccard .changable-card-expiry {
display: none;
}
.checkout-payment-method .ccard .changable-card-expiry._active {
display: block;
}
.checkout-payment-method .ccard .expire-update._disable {
display: none;
}
.checkout-payment-method .ccard .holdername .input-text {
width: 225px;
......@@ -44,8 +52,7 @@
}
.checkout-payment-method .ccard .holdername .input-text::placeholder,
.checkout-payment-method .ccard .holdername .input-text:placeholder-shown
{
.checkout-payment-method .ccard .holdername .input-text:placeholder-shown {
color: rgb(144, 162, 189);
font-weight: 200;
}
......@@ -58,20 +65,21 @@
}
.checkout-payment-method .payment-method-title label img,
.checkout-payment-method .payment-method-title label div { padding-right:10px;}
.checkout-payment-method .payment-method-title label div {
padding-right: 10px;
}
.checkout-payment-method .payment-method-title label div.adyen-sprite {
background:url(../images/logos/pm_gloss.png) no-repeat;
background: url(../images/logos/pm_gloss.png) no-repeat;
background-position: 0 -272px;
width:65px;
height:42px;
width: 65px;
height: 42px;
display: inline-block;
}
.checkout-payment-method .payment-method-title label div.adyen-sprite.adyen_cc {
background:url(../images/logos/cc_border.png) no-repeat;
background: url(../images/logos/cc_border.png) no-repeat;
}
.checkout-payment-method .payment-method-title label div.adyen-sprite.adyen_pos {
......@@ -91,13 +99,13 @@
}
.checkout-payment-method .payment-method-title label div.adyen-sprite.adyen_apple_pay {
background:url(../images/logos/apple_pay.png) no-repeat;
height:43px;
background: url(../images/logos/apple_pay.png) no-repeat;
height: 43px;
}
.checkout-payment-method .input-text._has-datepicker {
width:20%;
margin-right:10px;
width: 20%;
margin-right: 10px;
}
.apple-pay-button-with-text {
......@@ -109,37 +117,44 @@
padding: 0px;
box-sizing: border-box;
/*min-width: 200px;*/
width:100%;
width: 100%;
min-height: 32px;
max-height: 64px;
margin-bottom: 10px;
cursor: pointer;
}
.apple-pay-button-black-with-text {
background-color: black;
color: white;
}
.apple-pay-button-white-with-text {
background-color: white;
color: black;
}
.apple-pay-button-white-with-line-with-text {
background-color: white;
color: black;
border: .5px solid black;
}
.apple-pay-button-with-text.apple-pay-button-black-with-text > .logo {
background-image: -webkit-named-image(apple-pay-logo-white);
background-color: black;
}
.apple-pay-button-with-text.apple-pay-button-white-with-text > .logo {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
}
.apple-pay-button-with-text.apple-pay-button-white-with-line-with-text > .logo {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
}
.apple-pay-button-with-text > .text {
font-family: -apple-system;
font-size: calc(1em * var(--apple-pay-scale));
......@@ -148,6 +163,7 @@
margin-right: calc(2px * var(--apple-pay-scale));
}
.apple-pay-button-with-text > .logo {
width: calc(35px * var(--apple-pay-scale));
height: 100%;
......@@ -164,712 +180,803 @@
Custom style for ideal component
*/
#iDealContainer .adyen-checkout__dropdown__button{
#iDealContainer .adyen-checkout__dropdown__button {
padding: 0 0 0 8px;
max-width: 290px;
}
#iDealContainer .adyen-checkout__dropdown--large{
#iDealContainer .adyen-checkout__dropdown--large {
margin-left: 21px;
}
#iDealContainer .adyen-checkout__dropdown__element{
#iDealContainer .adyen-checkout__dropdown__element {
margin-bottom: 0;
}
/* 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;
}
.adyen-checkout__link adyen-checkout__link--more-information{
.adyen-checkout__link adyen-checkout__link--more-information {
margin-bottom: 10px;
}
.message.error.hpp-message{
.message.error.hpp-message {
margin-top: 10px;
display: none;
}
/* Checkout component Adyen styling start */
.adyen-checkout__spinner__wrapper{
align-items:center;
display:flex;
height:100%;
justify-content:center
}
.adyen-checkout__spinner__wrapper--inline{
display:inline-block;
height:auto;
margin-right:8px
}
.adyen-checkout__spinner{
-webkit-animation:rotateSpinner 2s infinite linear;
animation:rotateSpinner 2s infinite linear;
border:2px solid #00a3ff;
border-radius:50%;
border-top-color:transparent;
height:43px;
width:43px
}
.adyen-checkout__spinner--large{
height:43px;
width:43px
}
.adyen-checkout__spinner--small{
height:16px;
width:16px
}
.adyen-checkout__spinner--medium{
height:28px;
width:28px
}
@-webkit-keyframes rotateSpinner{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to{
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
.adyen-checkout__spinner__wrapper {
align-items: center;
display: flex;
height: 100%;
justify-content: center
}
@keyframes rotateSpinner{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to{
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
.adyen-checkout__spinner__wrapper--inline {
display: inline-block;
height: auto;
margin-right: 8px
}
.adyen-checkout__spinner {
-webkit-animation: rotateSpinner 2s infinite linear;
animation: rotateSpinner 2s infinite linear;
border: 2px solid #00a3ff;
border-radius: 50%;
border-top-color: transparent;
height: 43px;
width: 43px
}
.adyen-checkout__spinner--large {
height: 43px;
width: 43px
}
.adyen-checkout__pay-button{
background:#001b2b;
border:0;
border-radius:3px;
box-shadow:0 3px 4px rgba(0,15,45,.2);
color:#fff;
cursor:pointer;
font-size:1em;
font-weight:700;
height:48px;
padding:15px;
transition:background .3s ease-out;
width:100%
}
.adyen-checkout__pay-button:disabled{
-moz-user-select:all;
-ms-user-select:all;
-webkit-user-select:all;
background:#e6e9eb;
box-shadow:none;
cursor:not-allowed;
user-select:all
}
.adyen-checkout__pay-button--loading{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
background:#4c5f6b;
box-shadow:none;
outline:0;
pointer-events:none;
user-select:none
}
.adyen-checkout__pay-button .adyen-checkout__spinner{
border-color:transparent #fff #fff;
border-width:3px
}
.adyen-checkout__pay-button__content{
align-items:center;
display:flex;
justify-content:center
}
.adyen-checkout__payment-method{
background:#fff;
border:1px solid #edf0f3;
cursor:pointer;
margin-top:-1px;
position:relative;
transition:opacity .3s ease-out;
width:100%
}
.adyen-checkout__payment-method:focus{
outline:0
}
.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{
border-top-left-radius:3px;
border-top-right-radius:3px;
margin-top:0
}
.adyen-checkout__payment-method--next-selected{
border-bottom-left-radius:3px;
border-bottom-right-radius:3px
}
.adyen-checkout__payment-method--loading{
opacity:.2
}
.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading{
opacity:.9
}
.adyen-checkout__payment-method--disabling{
opacity:.5
}
.adyen-checkout__payment-method__header{
align-items:center;
color:#00202e;
display:flex;
font-size:16px;
font-weight:400;
padding:16px;
position:relative;
transition:background .1s ease-out;
width:100%
}
.adyen-checkout__payment-method__surcharge{
color:#687282;
margin-left:5px
}
.adyen-checkout__payment-method--selected{
background:#f7f8f9;
border:1px solid #d4d9db;
border-radius:3px;
cursor:default;
margin:8px 0;
transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s ease-out
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header{
font-weight:500
}
.adyen-checkout__payment-method__details{
padding:0 16px 16px
}
.adyen-checkout__payment-method__details__content{
padding:6px 0 24px
}
.adyen-checkout__payment-method__image__wrapper{
height:26px;
position:relative
}
.adyen-checkout__payment-method__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__payment-method__image{
border-radius:3px
}
.adyen-checkout__payment-method__disable_oneclick{
background-color:transparent;
border:none;
color:#687282;
cursor:pointer;
display:block;
font-size:13px;
padding:0;
position:absolute;
right:70px;
text-decoration:underline
}
.adyen-checkout__payment-method__disable_oneclick:focus{
color:#00a3ff;
outline:0
}
.adyen-checkout__payment-method__disable-confirmation{
align-items:center;
background:#e6e9eb;
color:#001b2b;
display:flex;
font-size:15px;
justify-content:space-between;
margin-bottom:10px;
padding:8px 16px
}
.adyen-checkout__payment-method__disable-confirmation__buttons{
display:flex
}
.adyen-checkout__payment-method__disable-confirmation__button{
border:1px solid transparent;
border-radius:3px;
cursor:pointer;
font-size:13px;
line-height:15px;
margin:0 0 0 8px;
padding:8px
}
.adyen-checkout__payment-method__disable-confirmation__button--remove{
background:#d10244;
border-color:#d10244;
color:#fff
}
.adyen-checkout__payment-method__disable-confirmation__button--cancel{
background:transparent;
border-color:#001b2b;
color:#001b2b
}
.adyen-checkout__payment-method__radio{
background-color:#fff;
border:1px solid #b9c4c9;
border-radius:50%;
box-shadow:inset 0 1px 3px rgba(0,27,43,.15);
height:18px;
position:absolute;
right:20px;
transition:border-color .3s ease-out;
width:18px
}
.adyen-checkout__payment-method__radio:after{
-webkit-transform:translateY(-50%) scale(0);
background-color:#fff;
border-radius:50%;
box-shadow:0 1px 1px rgba(0,15,45,.25);
content:"";
display:block;
height:6px;
left:0;
margin:0 auto;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%) scale(0);
transition:-webkit-transform .3s ease-out;
transition:transform .3s ease-out;
transition:transform .3s ease-out,-webkit-transform .3s ease-out;
width:6px
}
.adyen-checkout__payment-method__radio:hover{
border-color:#00a3ff;
cursor:pointer
}
.adyen-checkout__payment-method__radio--selected{
background-color:#00a3ff;
border:0 solid transparent;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out
}
.adyen-checkout__payment-method__radio--selected:after{
-webkit-transform:translateY(-50%) scale(1);
transform:translateY(-50%) scale(1)
}
.adyen-checkout__field{
display:block;
margin-bottom:16px
}
.adyen-checkout__field--error input{
border-color:#d81b4a;
color:#d81b4a
}
.adyen-checkout__field:last-child{
margin-bottom:0
}
.adyen-checkout__helper-text,.adyen-checkout__label__text{
color:#001b2b;
display:block;
font-size:13px;
font-weight:400;
line-height:13px;
padding-bottom:8px
}
.adyen-checkout__helper-text{
color:#687282
}
.adyen-checkout__label__text{
transition:color .2s ease-out
}
.adyen-checkout__label--focused .adyen-checkout__label__text{
color:#07b
}
.adyen-checkout__error-text,.adyen-checkout__label__text--error{
align-items:center;
color:#d0021b;
display:flex;
font-size:12px;
font-weight:400;
margin-top:4px
}
.adyen-checkout__icon svg{
fill:currentColor
}
.adyen-checkout__open-invoice .adyen-checkout__input--wrapper--socialSecurityNumber+.adyen-checkout__error-text{
max-width:380px
}
.adyen-checkout__radio_group+.adyen-checkout-input__inline-validation{
display:none
}
.adyen-checkout__radio_group__input{
opacity:0;
position:absolute
}
.adyen-checkout__radio_group__label{
display:block;
font-size:13px;
font-weight:400;
line-height:16px;
margin-bottom:8px;
padding-bottom:0;
padding-left:24px;
position:relative
}
.adyen-checkout__radio_group__label:before{
background-color:#fff;
border:1px solid #b9c4c9;
border-radius:50%;
content:"";
height:16px;
left:0;
position:absolute;
top:0;
transition:border-color .3s ease-out;
width:16px
}
.adyen-checkout__radio_group__label:after{
-webkit-transform:scale(0);
background-color:#fff;
border-radius:50%;
box-shadow:0 1px 1px rgba(0,15,45,.25);
content:"";
display:block;
height:6px;
left:5px;
margin:0 auto;
position:absolute;
top:5px;
transform:scale(0);
transition:-webkit-transform .3s ease-out;
transition:transform .3s ease-out;
transition:transform .3s ease-out,-webkit-transform .3s ease-out;
width:6px
}
.adyen-checkout__radio_group__label:hover{
border-color:#00a3ff;
cursor:pointer
}
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{
background-color:#00a3ff;
border:0 solid transparent;
box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
transition:all .3s ease-out
}
.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:after{
-webkit-transform:scale(1);
transform:scale(1)
}
.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before{
border:1px solid #d10244
}
.adyen-checkout__checkbox{
display:block
}
.adyen-checkout__checkbox>input[type=checkbox]{
opacity:0;
pointer-events:none;
position:absolute
}
.adyen-checkout__checkbox__label{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
color:#001b2b;
cursor:pointer;
display:inline-block;
font-size:13px;
font-weight:400;
line-height:16px;
padding-left:24px;
position:relative;
user-select:none
}
.adyen-checkout__checkbox__input+span:before{
-webkit-transform:rotate(37deg);
-webkit-transform-origin:100% 100%;
border-color:transparent #fff #fff transparent;
border-radius:0 2px 1px 2px;
border-style:solid;
border-width:1px 2px 2px 1px;
content:"";
height:11px;
left:1px;
opacity:0;
position:absolute;
top:2px;
transform:rotate(37deg);
transform-origin:100% 100%;
transition:opacity .2s ease-out;
width:6px;
z-index:1
}
.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:before{
opacity:1
}
.adyen-checkout__checkbox__input+.adyen-checkout__checkbox__label:after{
background-color:#fff;
border:1px solid #b9c4c9;
border-radius:3px;
content:"";
height:16px;
left:0;
position:absolute;
top:0;
transition:background .15s ease-out,border .05s ease-out,box-shadow .1s ease-out;
width:16px;
z-index:0
}
.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:after{
background-color:#00a3ff;
border:1px solid #00a3ff
}
.adyen-checkout__checkbox__input:focus+span:after{
border:1px solid #00a3ff;
box-shadow:0 0 0 2px #91d7ff
}
.adyen-checkout__checkbox__input.adyen-checkout__checkbox__input--invalid+.adyen-checkout__checkbox__label:after{
border:1px solid #d10244
}
.adyen-checkout__dropdown{
font-size:16px;
max-width:100%;
width:200px
}
.adyen-checkout__dropdown--small{
width:130px
}
.adyen-checkout__dropdown--large{
width:300px
}
.adyen-checkout__dropdown__button{
background:#fff;
border:1px solid #b9c4c9;
border-radius:3px;
font-size:16px;
height:40px;
line-height:20px;
outline:0;
padding:9px 20px 9px 8px;
transition:border .2s ease-out,box-shadow .2s ease-out;
width:100%
}
.adyen-checkout__dropdown__button__icon{
margin-right:8px;
max-height:20px;
max-width:32px
}
.adyen-checkout__dropdown__button--active,.adyen-checkout__dropdown__button:active,.adyen-checkout__dropdown__button:focus{
border-color:#00a3ff;
box-shadow:0 0 0 2px #91d7ff
}
.adyen-checkout__dropdown__button--readonly,.adyen-checkout__dropdown__button--readonly.adyen-checkout__dropdown__button--active{
background:#e6e9eb;
color:#001b2b;
cursor:not-allowed
}
.adyen-checkout__dropdown__button--invalid{
border-color:#d10244
}
.adyen-checkout__dropdown__button__text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.adyen-checkout__dropdown__list{
border-radius:3px;
box-shadow:0 2px 7px rgba(0,15,45,.3);
margin-top:2px;
z-index:2
}
.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active{
-webkit-animation:expand .1s ease-out;
animation:expand .1s ease-out
}
.adyen-checkout__dropdown__element{
-ms-hyphens:auto;
-webkit-hyphens:auto;
border:1px solid transparent;
border-bottom-color:#e6e9eb;
cursor:pointer;
hyphens:auto;
line-height:20px;
outline:0;
padding:8px;
transition:background .2s ease-out,border-color .2s ease-out;
word-break:break-word
}
.adyen-checkout__dropdown__element:last-child{
border-bottom:0
}
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus,.adyen-checkout__dropdown__element:hover{
background:#f0f2f4
}
.adyen-checkout__dropdown__element:active,.adyen-checkout__dropdown__element:focus{
border-bottom-color:#00a3ff;
border-top-color:#00a3ff
}
.adyen-checkout__dropdown__element__icon{
margin-right:8px;
max-height:20px;
max-width:32px
}
@-webkit-keyframes expand{
0%{
-webkit-transform:scaleY(0);
transform:scaleY(0)
.adyen-checkout__spinner--small {
height: 16px;
width: 16px
}
.adyen-checkout__spinner--medium {
height: 28px;
width: 28px
}
@-webkit-keyframes rotateSpinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to{
-webkit-transform:scaleX(1);
transform:scaleX(1)
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes expand{
0%{
-webkit-transform:scaleY(0);
transform:scaleY(0)
@keyframes rotateSpinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to{
-webkit-transform:scaleX(1);
transform:scaleX(1)
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
.adyen-checkout__dropdown+.adyen-checkout-input__inline-validation{
right:32px
}
.adyen-checkout__select-list{
margin:0;
padding:0
}
.adyen-checkout__select-list__item{
background:#fff;
border-top:1px solid #b9c4c9;
cursor:pointer;
display:inline-block;
font-size:16px;
line-height:20px;
outline:0;
padding:9px;
width:100%
}
.adyen-checkout__select-list__item:first-child{
border-top:0
}
.adyen-checkout__select-list__item:active,.adyen-checkout__select-list__item:focus,.adyen-checkout__select-list__item:hover{
background:rgba(145,215,255,.5)
}
.adyen-checkout__select-list__item--selected{
background:rgba(145,215,255,.5);
font-weight:700
}
.adyen-checkout__input{
background:#fff;
border:1px solid #b9c4c9;
border-radius:3px;
color:#001b2b;
display:block;
font-family:inherit;
font-size:16px;
height:40px;
outline:none;
padding:5px 8px;
position:relative;
transition:border .2s ease-out,box-shadow .2s ease-out;
width:200px
}
.adyen-checkout__input:required{
box-shadow:none
}
.adyen-checkout__input--wrapper{
display:inline-block;
position:relative
}
.adyen-checkout__input--wrapper--block{
display:block
}
.adyen-checkout-input__inline-validation{
-webkit-transform:translateY(-50%);
height:16px;
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
width:16px
}
.adyen-checkout-input__inline-validation--valid{
color:#039450
}
.adyen-checkout-input__inline-validation--invalid{
color:#d10244
}
.adyen-checkout__input.adyen-checkout__input--small{
width:130px
}
.adyen-checkout__input.adyen-checkout__input--large{
width:300px
}
.adyen-checkout__input.adyen-checkout__input--invalid{
border-color:#d10244
}
.adyen-checkout__input.adyen-checkout__input--valid{
border-bottom-color:#04ba65
}
.adyen-checkout__input--error{
border-color:#d0021b
}
.adyen-checkout__input::-webkit-input-placeholder{
color:#90a2bd;
font-weight:200
}
.adyen-checkout__input::-ms-input-placeholder{
color:#90a2bd;
font-weight:200
}
.adyen-checkout__input::placeholder{
color:#90a2bd;
font-weight:200
}
.adyen-checkout__input--active,.adyen-checkout__input:active,.adyen-checkout__input:focus{
border:1px solid #00a3ff;
box-shadow:0 0 0 2px #91d7ff
}
.adyen-checkout__input[readonly]{
background-color:#e6e9eb;
border-color:transparent;
color:#687282;
cursor:default
}
.adyen-checkout__fieldset{
color:#687282;
display:block;
padding-bottom:30px;
width:100%
}
.adyen-checkout__fieldset__title{
color:#687282;
display:block;
font-size:11px;
font-weight:700;
letter-spacing:1px;
margin:0;
padding:0 0 20px;
text-transform:uppercase
}
.adyen-checkout__fieldset--readonly{
color:#001b2b;
font-size:13px;
line-height:19px;
margin:0
.adyen-checkout__pay-button {
background: #001b2b;
border: 0;
border-radius: 3px;
box-shadow: 0 3px 4px rgba(0, 15, 45, .2);
color: #fff;
cursor: pointer;
font-size: 1em;
font-weight: 700;
height: 48px;
padding: 15px;
transition: background .3s ease-out;
width: 100%
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
max-width:540px
.adyen-checkout__pay-button:disabled {
-moz-user-select: all;
-ms-user-select: all;
-webkit-user-select: all;
background: #e6e9eb;
box-shadow: none;
cursor: not-allowed;
user-select: all
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox+.adyen-checkout__open-invoice .adyen-checkout__fieldset{
padding-top:30px
.adyen-checkout__pay-button--loading {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
background: #4c5f6b;
box-shadow: none;
outline: 0;
pointer-events: none;
user-select: none
}
.adyen-checkout__pay-button .adyen-checkout__spinner {
border-color: transparent #fff #fff;
border-width: 3px
}
.adyen-checkout__pay-button__content {
align-items: center;
display: flex;
justify-content: center
}
.adyen-checkout__payment-method {
background: #fff;
border: 1px solid #edf0f3;
cursor: pointer;
margin-top: -1px;
position: relative;
transition: opacity .3s ease-out;
width: 100%
}
.adyen-checkout__payment-method:focus {
outline: 0
}
.adyen-checkout__payment-method--selected + .adyen-checkout__payment-method, .adyen-checkout__payment-method:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin-top: 0
}
.adyen-checkout__payment-method--next-selected {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.adyen-checkout__payment-method--loading {
opacity: .2
}
.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading {
opacity: .9
}
.adyen-checkout__payment-method--disabling {
opacity: .5
}
.adyen-checkout__payment-method__header {
align-items: center;
color: #00202e;
display: flex;
font-size: 16px;
font-weight: 400;
padding: 16px;
position: relative;
transition: background .1s ease-out;
width: 100%
}
.adyen-checkout__payment-method__surcharge {
color: #687282;
margin-left: 5px
}
.adyen-checkout__payment-method--selected {
background: #f7f8f9;
border: 1px solid #d4d9db;
border-radius: 3px;
cursor: default;
margin: 8px 0;
transition: margin .15s cubic-bezier(.4, 0, .2, 1) 0ms, opacity .3s ease-out
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header {
font-weight: 500
}
.adyen-checkout__payment-method__details {
padding: 0 16px 16px
}
.adyen-checkout__payment-method__details__content {
padding: 6px 0 24px
}
.adyen-checkout__payment-method__image__wrapper {
height: 26px;
position: relative
}
.adyen-checkout__payment-method__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__payment-method__image {
border-radius: 3px
}
.adyen-checkout__payment-method__disable_oneclick {
background-color: transparent;
border: none;
color: #687282;
cursor: pointer;
display: block;
font-size: 13px;
padding: 0;
position: absolute;
right: 70px;
text-decoration: underline
}
.adyen-checkout__payment-method__disable_oneclick:focus {
color: #00a3ff;
outline: 0
}
.adyen-checkout__payment-method__disable-confirmation {
align-items: center;
background: #e6e9eb;
color: #001b2b;
display: flex;
font-size: 15px;
justify-content: space-between;
margin-bottom: 10px;
padding: 8px 16px
}
.adyen-checkout__payment-method__disable-confirmation__buttons {
display: flex
}
.adyen-checkout__payment-method__disable-confirmation__button {
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
line-height: 15px;
margin: 0 0 0 8px;
padding: 8px
}
.adyen-checkout__payment-method__disable-confirmation__button--remove {
background: #d10244;
border-color: #d10244;
color: #fff
}
.adyen-checkout__payment-method__disable-confirmation__button--cancel {
background: transparent;
border-color: #001b2b;
color: #001b2b
}
.adyen-checkout__payment-method__radio {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0, 27, 43, .15);
height: 18px;
position: absolute;
right: 20px;
transition: border-color .3s ease-out;
width: 18px
}
.adyen-checkout__payment-method__radio:after {
-webkit-transform: translateY(-50%) scale(0);
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(0, 15, 45, .25);
content: "";
display: block;
height: 6px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) scale(0);
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out;
width: 6px
}
.adyen-checkout__payment-method__radio:hover {
border-color: #00a3ff;
cursor: pointer
}
.adyen-checkout__payment-method__radio--selected {
background-color: #00a3ff;
border: 0 solid transparent;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .26);
transition: all .3s ease-out
}
.adyen-checkout__payment-method__radio--selected:after {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1)
}
.adyen-checkout__field {
display: block;
margin-bottom: 16px
}
.adyen-checkout__field--error input {
border-color: #d81b4a;
color: #d81b4a
}
.adyen-checkout__field:last-child {
margin-bottom: 0
}
.adyen-checkout__helper-text, .adyen-checkout__label__text {
color: #001b2b;
display: block;
font-size: 13px;
font-weight: 400;
line-height: 13px;
padding-bottom: 8px
}
.adyen-checkout__helper-text {
color: #687282
}
.adyen-checkout__label__text {
transition: color .2s ease-out
}
.adyen-checkout__label--focused .adyen-checkout__label__text {
color: #07b
}
.adyen-checkout__error-text, .adyen-checkout__label__text--error {
align-items: center;
color: #d0021b;
display: flex;
font-size: 12px;
font-weight: 400;
margin-top: 4px
}
.adyen-checkout__icon svg {
fill: currentColor
}
.adyen-checkout__open-invoice .adyen-checkout__input-wrapper--socialSecurityNumber + .adyen-checkout__error-text {
max-width: 380px
}
.adyen-checkout__radio_group + .adyen-checkout-input__inline-validation {
display: none
}
.adyen-checkout__radio_group__input {
opacity: 0;
position: absolute
}
.adyen-checkout__radio_group__label {
display: block;
font-size: 13px;
font-weight: 400;
line-height: 16px;
margin-bottom: 8px;
padding-bottom: 0;
padding-left: 24px;
position: relative
}
.adyen-checkout__radio_group__label:before {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 50%;
content: "";
height: 16px;
left: 0;
position: absolute;
top: 0;
transition: border-color .3s ease-out;
width: 16px
}
.adyen-checkout__radio_group__label:after {
-webkit-transform: scale(0);
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(0, 15, 45, .25);
content: "";
display: block;
height: 6px;
left: 5px;
margin: 0 auto;
position: absolute;
top: 5px;
transform: scale(0);
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out;
width: 6px
}
.adyen-checkout__radio_group__label:hover {
border-color: #00a3ff;
cursor: pointer
}
.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:before, .adyen-checkout__radio_group__label--selected {
background-color: #00a3ff;
border: 0 solid transparent;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .26);
transition: all .3s ease-out
}
.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:after {
-webkit-transform: scale(1);
transform: scale(1)
}
.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before {
border: 1px solid #d10244
}
.adyen-checkout__checkbox {
display: block
}
.adyen-checkout__checkbox > input[type=checkbox] {
opacity: 0;
pointer-events: none;
position: absolute
}
.adyen-checkout__checkbox__label {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
color: #001b2b;
cursor: pointer;
display: inline-block;
font-size: 13px;
font-weight: 400;
line-height: 16px;
padding-left: 24px;
position: relative;
user-select: none
}
.adyen-checkout__checkbox__input + span:before {
-webkit-transform: rotate(37deg);
-webkit-transform-origin: 100% 100%;
border-color: transparent #fff #fff transparent;
border-radius: 0 2px 1px 2px;
border-style: solid;
border-width: 1px 2px 2px 1px;
content: "";
height: 11px;
left: 1px;
opacity: 0;
position: absolute;
top: 2px;
transform: rotate(37deg);
transform-origin: 100% 100%;
transition: opacity .2s ease-out;
width: 6px;
z-index: 1
}
.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label:before {
opacity: 1
}
.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label:after {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 3px;
content: "";
height: 16px;
left: 0;
position: absolute;
top: 0;
transition: background .15s ease-out, border .05s ease-out, box-shadow .1s ease-out;
width: 16px;
z-index: 0
}
.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label:after {
background-color: #00a3ff;
border: 1px solid #00a3ff
}
.adyen-checkout__checkbox__input:focus + span:after {
border: 1px solid #00a3ff;
box-shadow: 0 0 0 2px #91d7ff
}
.adyen-checkout__checkbox__input.adyen-checkout__checkbox__input--invalid + .adyen-checkout__checkbox__label:after {
border: 1px solid #d10244
}
.adyen-checkout__dropdown {
font-size: 16px;
max-width: 100%;
width: 200px
}
.adyen-checkout__dropdown--small {
width: 130px
}
.adyen-checkout__dropdown--large {
width: 300px
}
.adyen-checkout__dropdown__button {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 3px;
font-size: 16px;
height: 40px;
line-height: 20px;
outline: 0;
padding: 9px 20px 9px 8px;
transition: border .2s ease-out, box-shadow .2s ease-out;
width: 100%
}
.adyen-checkout__dropdown__button__icon {
margin-right: 8px;
max-height: 20px;
max-width: 32px
}
.adyen-checkout__dropdown__button--active, .adyen-checkout__dropdown__button:active, .adyen-checkout__dropdown__button:focus {
border-color: #00a3ff;
box-shadow: 0 0 0 2px #91d7ff
}
.adyen-checkout__dropdown__button--readonly, .adyen-checkout__dropdown__button--readonly.adyen-checkout__dropdown__button--active {
background: #e6e9eb;
color: #001b2b;
cursor: not-allowed
}
.adyen-checkout__dropdown__button--invalid {
border-color: #d10244
}
.adyen-checkout__dropdown__button__text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.adyen-checkout__dropdown__list {
border-radius: 3px;
box-shadow: 0 2px 7px rgba(0, 15, 45, .3);
margin-top: 2px;
max-height: 360px;
z-index: 2
}
.adyen-checkout__dropdown__element {
-ms-hyphens: auto;
-webkit-hyphens: auto;
border: 1px solid transparent;
border-bottom-color: #e6e9eb;
cursor: pointer;
hyphens: auto;
line-height: 20px;
outline: 0;
padding: 8px;
transition: background .2s ease-out, border-color .2s ease-out;
word-break: break-word
}
.adyen-checkout__dropdown__element:last-child {
border-bottom: 0
}
.adyen-checkout__dropdown__element:active, .adyen-checkout__dropdown__element:focus, .adyen-checkout__dropdown__element:hover {
background: #f0f2f4
}
.adyen-checkout__dropdown__element:active, .adyen-checkout__dropdown__element:focus {
border-bottom-color: #00a3ff;
border-top-color: #00a3ff
}
.adyen-checkout__dropdown__element__icon {
margin-right: 8px;
max-height: 20px;
max-width: 32px
}
.adyen-checkout__dropdown + .adyen-checkout-input__inline-validation {
right: 32px
}
.adyen-checkout__select-list {
margin: 0;
padding: 0
}
.adyen-checkout__select-list__item {
background: #fff;
border-top: 1px solid #b9c4c9;
cursor: pointer;
display: inline-block;
font-size: 16px;
line-height: 20px;
outline: 0;
padding: 9px;
width: 100%
}
.adyen-checkout__select-list__item:first-child {
border-top: 0
}
.adyen-checkout__select-list__item:active, .adyen-checkout__select-list__item:focus, .adyen-checkout__select-list__item:hover {
background: rgba(145, 215, 255, .5)
}
.adyen-checkout__select-list__item--selected {
background: rgba(145, 215, 255, .5);
font-weight: 700
}
.adyen-checkout__input {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 3px;
color: #001b2b;
display: block;
font-family: inherit;
font-size: 16px;
height: 40px;
outline: none;
padding: 5px 8px;
position: relative;
transition: border .2s ease-out, box-shadow .2s ease-out;
width: 200px
}
.adyen-checkout__input:required {
box-shadow: none
}
.adyen-checkout__input-wrapper {
display: inline-block;
position: relative
}
.adyen-checkout__input-wrapper--block {
display: block
}
.adyen-checkout-input__inline-validation {
-webkit-transform: translateY(-50%);
height: 16px;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px
}
.adyen-checkout-input__inline-validation--valid {
color: #039450
}
.adyen-checkout-input__inline-validation--invalid {
color: #d10244
}
.adyen-checkout__input.adyen-checkout__input--small {
width: 130px
}
.adyen-checkout__input.adyen-checkout__input--large {
width: 300px
}
.adyen-checkout__input.adyen-checkout__input--invalid {
border-color: #d10244
}
.adyen-checkout__input.adyen-checkout__input--valid {
border-bottom-color: #04ba65
}
.adyen-checkout__input--error {
border-color: #d0021b
}
.adyen-checkout__input::-webkit-input-placeholder {
color: #90a2bd;
font-weight: 200
}
.adyen-checkout__input:-ms-input-placeholder {
color: #90a2bd;
font-weight: 200
}
.adyen-checkout__input::-ms-input-placeholder {
color: #90a2bd;
font-weight: 200
}
.adyen-checkout__input::placeholder {
color: #90a2bd;
font-weight: 200
}
.adyen-checkout__input--active, .adyen-checkout__input:active, .adyen-checkout__input:focus {
border: 1px solid #00a3ff;
box-shadow: 0 0 0 2px #91d7ff
}
.adyen-checkout__input[readonly] {
background-color: #e6e9eb;
border-color: transparent;
color: #687282;
cursor: default
}
.adyen-checkout__fieldset {
color: #687282;
display: block;
padding-bottom: 30px;
width: 100%
}
.adyen-checkout__fieldset__title {
color: #687282;
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
margin: 0;
padding: 0 0 20px;
text-transform: uppercase
}
.adyen-checkout__fieldset--readonly {
color: #001b2b;
font-size: 13px;
line-height: 19px;
margin: 0
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox {
max-width: 540px
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox + .adyen-checkout__open-invoice .adyen-checkout__fieldset {
padding-top: 30px
}
.adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
max-width:540px
......@@ -880,164 +987,232 @@
.adyen-checkout__open-invoice .adyen-checkout__checkbox{
margin:0 0 20px
}
.adyen-checkout__applepay__button{
height:40px;
width:240px
}
.adyen-checkout__card-input__form{
transition:opacity .25s ease-out
}
.adyen-checkout__card__exp-cvc{
display:flex
}
.adyen-checkout__card__cardNumber{
max-width:400px
}
.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:24px
}
.adyen-checkout__card-input .adyen-checkout__store-details{
margin-top:16px
}
.adyen-checkout__giropay__results{
background:#fff;
border:1px solid #b9c4c9;
border-radius:4px;
max-height:140px;
min-height:100px;
overflow-y:scroll;
width:100%
}
.adyen-checkout__giropay__no-results{
color:#687282;
display:block;
font-size:13px;
padding:0 0 0 2px
}
.adyen-checkout__giropay__placeholder{
color:#90a2bd;
display:block;
font-weight:200;
padding:0 0 0 2px
}
.adyen-checkout__giropay__loading{
display:block;
min-height:100px
}
.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper{
display:inline-block;
vertical-align:middle
}
.adyen-checkout__giropay__loading-text{
color:#687282;
font-size:13px;
line-height:16px;
vertical-align:middle
}
.adyen-checkout__giropay__error{
color:#d0021b;
font-size:13px
}
.adyen-checkout__phone-input{
display:flex
}
.adyen-checkout__phone-input__prefix{
margin-right:.5em
}
.adyen-checkout__phone-input .adyen-checkout__field{
margin-bottom:0
}
.adyen-checkout__iban-input__number{
padding:5px 36px 5px 8px;
text-transform:uppercase
}
.adyen-checkout__wechatpay{
background:#fff;
border:1px solid #dde1e3;
border-radius:3px;
min-height:443px;
padding:40px;
text-align:center
}
.adyen-checkout__wechatpay__brand-logo{
height:20px;
width:109px
}
.adyen-checkout__wechatpay__subtitle{
margin-top:32px
}
.adyen-checkout__wechatpay__payment_amount,.adyen-checkout__wechatpay__subtitle{
color:#001b2b;
font-size:16px;
line-height:19px
}
.adyen-checkout__wechatpay__progress{
background:#d4d9db;
border-radius:25px;
height:4px;
margin:32px auto 12px;
padding-right:3%;
width:152px
}
.adyen-checkout__wechatpay__progress>span{
background:#00a3ff;
border-radius:25px;
display:block;
height:100%
}
.adyen-checkout__wechatpay__countdown{
color:#687282;
font-size:13px
}
.adyen-checkout__wechatpay .adyen-checkout__spinner__wrapper{
margin:60px 0
}
.adyen-checkout__alert{
align-items:flex-start;
background-color:#00a3ff;
border-radius:3px;
color:#fff;
display:flex;
justify-content:space-between;
line-height:1;
margin:0;
padding:12px
}
.adyen-checkout__alert--error{
background-color:#d81b4a
}
.adyen-checkout__alert--success{
background-color:#0abf53
}
.adyen-checkout__alert--info{
background-color:#00a3ff
}
.adyen-checkout__sdk,.adyen-checkout__sdk *,.adyen-checkout__sdk * :before,.adyen-checkout__sdk :after{
box-sizing:border-box
}
.adyen-checkout__payment-methods-list{
border-radius:3px
}
.adyen-checkout__payment-methods-list--loading{
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
pointer-events:none;
user-select:none
}
.adyen-checkout__link{
color:#687282;
font-size:13px;
text-decoration:underline
.adyen-checkout__applepay__button {
height: 40px;
width: 240px
}
.adyen-checkout__card-input__form {
transition: opacity .25s ease-out
}
.adyen-checkout__card__exp-cvc {
display: flex
}
.adyen-checkout__card__cardNumber {
max-width: 400px
}
.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: 24px
}
.adyen-checkout__card-input .adyen-checkout__store-details {
margin-top: 16px
}
.adyen-checkout__giropay__results {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 4px;
max-height: 140px;
min-height: 100px;
overflow-y: scroll;
width: 100%
}
.adyen-checkout__giropay__no-results {
color: #687282;
display: block;
font-size: 13px;
padding: 0 0 0 2px
}
.adyen-checkout__giropay__placeholder {
color: #90a2bd;
display: block;
font-weight: 200;
padding: 0 0 0 2px
}
.adyen-checkout__giropay__loading {
display: block;
min-height: 100px
}
.adyen-checkout__giropay__loading .adyen-checkout__spinner__wrapper {
display: inline-block;
vertical-align: middle
}
.adyen-checkout__giropay__loading-text {
color: #687282;
font-size: 13px;
line-height: 16px;
vertical-align: middle
}
.adyen-checkout__giropay__error {
color: #d0021b;
font-size: 13px
}
.adyen-checkout__phone-input {
display: flex
}
.adyen-checkout__phone-input__prefix {
margin-right: .5em
}
.adyen-checkout__phone-input .adyen-checkout__field {
margin-bottom: 0
}
.adyen-checkout__iban-input__number {
padding: 5px 36px 5px 8px;
text-transform: uppercase
}
.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__wechatpay {
background: #fff;
border: 1px solid #dde1e3;
border-radius: 3px;
min-height: 443px;
padding: 40px;
text-align: center
}
.adyen-checkout__wechatpay__brand-logo {
height: 20px;
width: 109px
}
.adyen-checkout__wechatpay__subtitle {
margin-top: 32px
}
.adyen-checkout__wechatpay__payment_amount, .adyen-checkout__wechatpay__subtitle {
color: #001b2b;
font-size: 16px;
line-height: 19px
}
.adyen-checkout__wechatpay__progress {
background: #d4d9db;
border-radius: 25px;
height: 4px;
margin: 32px auto 12px;
padding-right: 3%;
width: 152px
}
.adyen-checkout__wechatpay__progress > span {
background: #00a3ff;
border-radius: 25px;
display: block;
height: 100%
}
.adyen-checkout__wechatpay__countdown {
color: #687282;
font-size: 13px
}
.adyen-checkout__wechatpay .adyen-checkout__spinner__wrapper {
margin: 60px 0
}
.adyen-checkout__alert {
align-items: flex-start;
background-color: #00a3ff;
border-radius: 3px;
color: #fff;
display: flex;
justify-content: space-between;
line-height: 1;
margin: 0;
padding: 12px
}
.adyen-checkout__alert--error {
background-color: #d81b4a
}
.adyen-checkout__alert--success {
background-color: #0abf53
}
.adyen-checkout__alert--info {
background-color: #00a3ff
}
.adyen-checkout__sdk, .adyen-checkout__sdk *, .adyen-checkout__sdk * :before, .adyen-checkout__sdk :after {
box-sizing: border-box
}
.adyen-checkout__payment-methods-list {
border-radius: 3px
}
.adyen-checkout__payment-methods-list--loading {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
pointer-events: none;
user-select: none
}
.adyen-checkout__link {
color: #687282;
font-size: 13px;
text-decoration: underline
}
/* Checkout component Adyen styling end */
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