SCSS for Advanced Forms + ACF

af-acf.scss

$line: #dcdfe5;
$primary: #339833;
$primary-active: #1c6808;
$gray: #878f9d;

div.acf-fields {
    > .acf-field {
        padding: 15px 16px;
        @media (min-width: 768px) {
            padding: 20px 30px;
        }
    }
    .acf-field-message {
        label {
            font-size: 22px;
            b {
                color: $primary;
            }
        }
        p {
            margin: 0;
        }
    }
    .acf-checkbox-list {
        label {
            display: block;
            padding-left: 22px;
            font-size: 14px;
            position: relative;
            > input {
                position: absolute;
                left: 0;
                top: 6px;
            }
            b {
                display: block;
                font-size: 16px;
            }
            &.selected {
                b {
                    color: $primary;
                }
            }
        }
    }
    .acf-label {
        margin: 0;
        label {
            font-weight: 500;
            margin-bottom: 5px;
            line-height: 1.4;
        }
    }
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    textarea,
    select {
        border: 1px solid $line;
        font-size: 16px;
        padding: 5px 8px;
        &:focus {
            border-color: $primary;
        }
    }
}
span.select2-dropdown {
    border-color: $line;
}
span.select2-container--default {
    .select2-selection--single {
        height: 38px;
        border-color: $line;
        .select2-selection__rendered {
            line-height: 38px;
        }
        .select2-selection__arrow {
            height: 36px;
        }
    }
    .select2-search--dropdown {
        .select2-search__field {
            border-color: $primary;
        }
    }
    .select2-results__option--highlighted[aria-selected] {
        background-color: $primary;
    }
}
div.acf-input-wrap input {
    height: 38px;
}
div.af-submit {
    margin: 0 0 4px;
    text-align: center;
    white-space: nowrap;
    button {
        &:disabled {
            display: none;
        }
        border: none;
        background-color: $primary;
        border-radius: 100px;
        color: #fff;
        padding: 9px 30px;
        margin: 0 5px;
        text-align: center;
        width: calc(50% - 20px);
        &:active {
            background-color: $primary-active;
            opacity: 1;
        }
        &.af-previous-button {
            background: none;
            color: $gray;
        }
    }
    @media (min-width: 768px) {
        padding: 15px 30px 25px;
    }
}
.af-success {
    padding: 16px 16px 4px;
    @media (min-width: 768px) {
        padding: 20px 30px 10px;
    }
}