sterling-css/dist/forms.css

A set of small CSS components suitable for any project.

/* ==========================================================================
   Forms
   ========================================================================== */

.s-form-group {

    margin: 0;

    padding: 1em;
}

.s-form-group ~ .s-form-group {

    margin-top: 1em;
}

.s-form-legend {

    margin-left: -0.5em;

    padding-left: 0.5em;

    font-weight: 700;
}

.s-form-field {

    margin-bottom: 1em;
}

.s-form-field:last-child {

    margin-bottom: 0;
}

.s-form-label {

    display: inline-block;

    margin-bottom: 0.5em;

    font-weight: 700;

    cursor: pointer;
}

.s-form-control:not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]) {

    box-sizing: border-box;

    display: block;

    width: 100%;

    margin: 0;

    padding: 0.5em;

    background-color: #fff;

    border: 1px solid #ccc;

    border-radius: 0.25em;
}

.s-form-footer {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -webkit-flex-direction: row;

        -ms-flex-direction: row;

            flex-direction: row;

    -webkit-flex-wrap: nowrap;

        -ms-flex-wrap: nowrap;

            flex-wrap: nowrap;
}

.s-form-status {}

.s-form-actions {

    margin-left: auto;
}