Template:Paymentmethod/style.css

Revision as of 18:04, 12 April 2022 by Pcoombe (talk | contribs) (Created page with "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, borde...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
/* 
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;
}