Skip to content

Instantly share code, notes, and snippets.

@lukluk
Created October 30, 2018 03:07
Show Gist options
  • Save lukluk/0c58f80bd3fba9f92c29b33a9d22b4b0 to your computer and use it in GitHub Desktop.
Save lukluk/0c58f80bd3fba9f92c29b33a9d22b4b0 to your computer and use it in GitHub Desktop.
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
.doku-payment {
color: #333333;
font-family: "Roboto", sans-serif;
}
.doku-payment .step-container {
background: #ffffff;
border-radius: 4px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
margin: 80px auto;
max-width: 340px;
overflow: hidden;
}
.doku-payment .step-header {
padding: 20px;
text-align: center;
}
.doku-payment .step-indicator {
background: #dedede;
border-radius: 4px;
display: inline-block;
height: 8px;
margin: 0 4px;
margin-bottom: 20px;
width: 8px;
}
.doku-payment .step-indicator.current {
background: #888888;
}
.doku-payment .step-title {
font-size: 18px;
font-weight: bold;
letter-spacing: 1px;
margin: 0;
/* margin-bottom: 20px; */
}
.doku-payment .payment {
height: 55px;
position: relative;
}
.doku-payment .payment-image {
position: absolute;
top: 50%;
left: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 40px;
z-index: 2;
}
.doku-payment .payment-label {
border-top: 1px solid #dedede;
cursor: pointer;
display: flex;
font-size: 14px;
font-weight: bold;
align-items: center;
letter-spacing: 1px;
padding: 0 0 0 85px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-transform: uppercase;
}
.doku-payment .payment-label:hover {
background: #eeeeee;
}
.doku-payment .payment-option {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
top: 50%;
right: 40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: all .2s ease-in;
opacity: 0;
outline: none;
z-index: 2;
}
.doku-payment .payment-option:checked {
right: 20px;
opacity: 1;
}
.doku-payment .payment-option:checked + .payment-label {
background: #eeeeee;
}
.doku-payment .payment-option:checked:after {
width: 20px;
}
.doku-payment .button {
background: #598BDD;
color: #ffffff;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 20px;
letter-spacing: 1px;
padding: 15px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all .2s;
}
.doku-payment .button:hover {
background: #5485D4;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment