Template:Paymentmethod/style.css
Jump to navigation
Jump to search
/*
CSS excerpted from Template:Styles/Sandbox.css
For use on Template:Paymentmethod to make demo buttons more like real form
*/
.frb-btn,
.payment-method-button {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
height: 50px;
padding: 0 4px;
border-radius: 2px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
background-color: #f8f9fa;
color: #222;
border: 1px solid #a2a9b1;
}
.frb-btn:hover {
background-color: #fff;
color: #444;
border-color: #a2a9b1;
}
.frb-btn:active {
background-color: #c8ccd1;
color: #000;
border-color: #72777d;
box-shadow: none;
}
input[type="radio"]:checked + .frb-btn {
background-color: #2a4b8d;
color: #fff;
border-color: #2a4b8d;
}
.frb-btn:focus,
.payment-method-button:focus {
outline: 0;
border-color: #36c;
box-shadow: inset 0 0 0 1px #36c;
}
input[type="radio"]:focus + .frb-btn,
input[type="radio"]:checked + .frb-btn:focus {
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}
.payment-method-button {
color: #36c;
}
.payment-method-button:hover {
background-color: #fff;
border-color: #447ff5;
}
.payment-method-button:active {
background-color: #eff3fa;
color: #2a4b8d;
border-color: #2a4b8d;
box-shadow: none;
}
.payment-method-div {
padding: 4px 4px;
}
/* Hide extra empty <p> tags between buttons */
.payment-method-div ~ p {
display: none;
}
.payment-method-button {
margin: 0;
width: 100%;
font-size: 15px;
appearance: none;
}
.payment-method-button svg {
margin: 0 4px;
}
.paymentmethod-cc svg {
display: none;
height: 26px;
border: 1px solid #c8ccd1;
border-radius: 4px;
}