lightspeeddevelopment/lsx-customizer

View on GitHub
assets/css/scss/layout/_footer-cta.scss

Summary

Maintainability
Test Coverage
#footer-cta {
    padding-bottom: $lsx-large-gap / 2;
    padding-top: $lsx-large-gap / 2;

    .lsx-hero-unit {
        margin: 0 auto;
        min-width: 290px;
        text-align: center;
        .wpforms-widget, .widget_caldera_forms_widget, .gform_wrapper {
            @include media('>=desktop') {
                width: 50%;
            }
            margin: 0 auto;
            .wpforms-field, .wpforms-submit-container, .gfield {
                padding: 0;
                margin: 0;
            }
            input {
                border-radius: 3px 0 0 3px;
                margin: 0;
                &::placeholder {
                    color: #ddd;
                    text-transform: capitalize;
                }
            }
            button.btn {
                border-radius: 0 3px 3px 0px;
                box-shadow: 0px 2px 0 0 #27639e;
            }
        }
        .form-icon {
            button:after {
                content: '\f1d9';
                font: normal normal normal 14px/1 FontAwesome;
                margin-left: 5px;
            }
        }
        .gform_wrapper {
            .gform_heading {
                width: 100%;
            }
            .gform_body {

                padding: 0;
                margin: 0;
                @include media('>=desktop') {
                    float: left;
                    width: 70%;
                }
                label {
                    display: none;
                }
            }
            .gform_footer {

                padding: 0;
                margin: 0;
                @include media('>=desktop') {
                    float: right;
                    width: 30%;
                }
                button {
                    width: 100%;
                }
            }
        }
    }

    .widget-title {
        font-size: 30px;
        font-weight: 400;
        line-height: 1.2;
        margin-bottom: 10px;
        margin-top: 0;
    }

    p,
    .textwidget {
        line-height: 1.35;

        @include media('>=desktop') { font-size: 22px; }
    }

    p {
        & + p { margin-top: $lsx-gap; }
    }

    .widget + .widget { margin-top: 3rem; }

    input[type="submit"] { @include lsx-button-colour(); }
}

@include footer-cta-colours();