scss HubSpot表单覆盖

Posted 2021-05-17

//
// HubSpot form Overrides
//
.hs-form {
    font-family: $base_font;
    font-size: 1.6rem;
    color: $grey_text;

    .hs-form-field {
        padding-bottom: 1em;

        label {
            font-size: 1.4rem;
            text-transform: uppercase;
            display: block;
            margin-bottom: 0.5em;

            .hs-form-required {
                padding-left: 0.25em;
                color: $danger;
            }

            &.hs-form-checkbox-display {
                text-transform: none;
            }
        }

        .input {

            input {
                color: $grey_text;
                display: block;
                width: 100%;
                height: 2.5em;
                background-color: #ffffff;
                box-sizing: border-box;
                padding: 0.5em;
                border: 2px solid $grey_light;
                border-radius: 1px;

                &:focus {
                    border-color: $link_color;
                }
            }
        }

        .hs-error-msgs {
            color: $danger;

            label {
                text-transform: none;
            }
        }
    }

    .hs_attract_leads_ppc_landing,
    .hs_increase_conversions_ppc_landing {

        .hs-form-booleancheckbox-display {

            input {
                width: 16px;
                height: auto;
                float: left;
                margin: 0.2em 0.5em 0 0;
            }

            // Checkbox label
            span {
                font-family: $base_font;
                font-size: 1.6rem;
                color: $grey_text;
                display: inline-block;
                vertical-align: top;
                width: 85%;
            }
        }

    }

    .hs_error_rollup {
        display: none;
    }

    .hs-richtext {
        font-size: 1.4rem;
        font-weight: 300;
        margin-top: 0.5em;

        a {
            color: $link_color;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    // Consent checkbox styling
    .hs_consent {
        font-size: 1.4rem;
        font-weight: 300;
        padding-bottom: 0;

        .input {
            margin-top: 1.2em;
        }

        .hs-error-msgs {
            font-size: 1.6rem;
            font-weight: normal;
            color: $danger;
        }

        // Ugly hack to hide empty label that has empty class attribute.
        label[class=""] {
            display: none;
        }
    }

    .hs-form-checkbox-display {

        input.hs-input {
            width: 16px;
            height: auto;
            float: left;
            margin: 0.2em 0.5em 0 0;
        }
    }

    .hs-submit {
        margin-top: 1.5em;

        .button {
            width: 100%;
        }
    }
}