src/frontend/stripe/src/scss/_payment-header.scss
/* ==============================
* Header
* ============================== */
.payment-header {
background-color: #e50060;
color: #fff;
padding: 10px 20px;
position: relative;
@media (min-width: 520px) {
padding: 25px 50px;
}
}
.payment-header-text {
color: #fff;
font-size: 18px;
font-weight: bold;
line-height: 20px;
@media (min-width: 520px) {
font-size: 20px;
line-height: 24px;
}
}
.payment-header-close-link {
color: #fff;
display: block;
font-size: 0;
line-height: 0;
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
&:focus,
&:hover {
color: #fff;
outline: none;
}
@media (min-width: 520px) {
right: 50px;
}
}
.payment-header-close {
animation: payment-header-close-hover-out .25s ease-in-out 0s 1 normal forwards;
height: 25px;
width: 25px;
@media (min-width: 520px) {
height: 35px;
width: 35px;
}
.payment-header-close-link:hover &,
.payment-header-close-link:focus & {
animation: payment-header-close-hover .25s ease-in-out 0s 1 normal forwards;
color: #fff;
}
}
@keyframes payment-header-close-hover {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(1.2) rotate(90deg);
}
}
@keyframes payment-header-close-hover-out {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}