CSS-NibblePoker/scss/defaults/defaults-inputs.scss

// NibblePoker CSS Theme - CC0 1.0 (Public Domain)


/* Defaults > Inputs */

/* Defaults > Inputs > Commons */

button, input, textarea, select {
    border: 0;

    // Removing ugly-ass white glow when editing text-related inputs.
    // Shit looks straight out of winforms in 2023...
    outline: none;

    color: #{$color-text-inputs};
    background-color: #{$color-background-input};

    &:not(.no-focus) {
        &:focus {
            box-shadow: 0 0 3px 0 #{$color-glow-input};
        }
    }

    &:disabled {
        cursor: not-allowed;
        background-color: #{$color-background-input-disabled} !important;
    }
}

label {
    cursor: pointer;
    user-select: none;
}


/* Defaults > Inputs > Checkbox & Radio */

input[type=checkbox], input[type=radio] {
    width: 1.65em;
    height: 1.65em;
    background-color: #{$color-background-input-unchecked};

    &:checked {
        background-color: #{$color-background-input-checked};
    }

    position: relative;
    vertical-align: middle;

    &:not(:disabled) {
        cursor: pointer;
    }
    &:disabled {
        &:before {
            opacity: 60%;
        }
    }
}
input[type="checkbox"] + label, input[type="radio"] + label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
    cursor: not-allowed;
    opacity: 60%;
}


/* Defaults > Inputs > Checkbox */

input[type=checkbox] {
    &.cb-pretty, &.checkbox-pretty {
        text-align: center;
        padding: 0;

        &:before {
            content: "✘";
        }

        &:checked {
            &:before {
                content: "✔";
            }
        }
    }
}


/* Defaults > Inputs > Radio */

input[type=radio] {
    border-radius: 50%;

    // Special fix required for standalone pages.
    // This rule somehow gets ignored if the stylesheet is placed in the DOM.
    // Even tho it is present in reset.css and if it get marked as important...
    &:before {
        box-sizing: border-box;
    }

    &.radio-solid, &.radio-3d {
        text-align: center;
        padding: 0;

        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            height: 60%;
            border-radius: 50%;
            background-color: transparent;
            border-color: white;
        }

        &:checked {
            &:before {
                background-color: white;
            }
        }
    }

    &.radio-solid {
        &:before {
            border-style: double;
            border-width: 2px;
        }
    }

    &.radio-3d {
        &:before {
            border-style: inset;
            border-width: 2px;
        }

        &:checked {
            &:before {
                border-style: outset;
            }
        }
    }

    &.radio-unchecked-subtle {
        &:not(:checked) {
            &:before {
                opacity: 50%;
            }
        }
    }

    &.radio-unchecked-dashed {
        &:not(:checked) {
            &:before {
                opacity: 75%;
                clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
            }
        }
    }
}


/* Defaults > Inputs > Buttons */

button {
    cursor: pointer;
    background-color: #{$color-background-button};

    &:hover {
        background-color: #{$color-background-button-hover};
    }

    &.btn-primary {
        background-color: #{$color-background-button-primary};

        &:hover {
            background-color: #{$color-background-button-primary-hover};
        }
    }

    &.btn-success {
        background-color: #{$color-background-button-success};

        &:hover {
            background-color: #{$color-background-button-success-hover};
        }
    }

    &.btn-error {
        background-color: #{$color-background-button-error};

        &:hover {
            background-color: #{$color-background-button-error-hover};
        }
    }

    &.btn-warning {
        background-color: #{$color-background-button-warning};

        &:hover {
            background-color: #{$color-background-button-warning-hover};
        }
    }
}