Neurolens Design System

Form 

<div class="nl-font-museo nl-p-4 nl-hs-form nl-grid lg:nl-grid-cols-2 nl-grid-cols-1 nl-gap-5 nl-prose">
    <div class="nl-max-w-screen-sm">
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
            hbspt.forms.create({
                region: "na1",
                portalId: "5282963",
                formId: "98e10c94-50f9-451e-9a4d-17d1553873c7"
            });
        </script>
    </div>
    <div class="nl-max-w-screen-sm">
        <form action="" class="nl-form">
            <div class="nl-grid md:nl-grid-cols-2 nl-grid-cols-1 nl-gap-2">
                <div>
                    <label for="">First Name</label>
                    <input type="text" placeholder="First Name">
                </div>
                <div>
                    <label for="">Last Name</label>
                    <input type="text" placeholder="Last Name">
                </div>
            </div>
            <div class="nl-grid md:nl-grid-cols-2 nl-grid-cols-1 nl-gap-2">
                <div>
                    <label for="">Phone Number</label>
                    <input type="tel" placeholder="Phone Number">
                </div>
                <div>
                    <label for="">Email</label>
                    <input type="email" placeholder="Email">
                </div>
            </div>
            <div>
                <label for="">Street address</label>
                <input type="text" placeholder="Street address">
            </div>
            <div class="nl-grid md:nl-grid-cols-2 nl-grid-cols-1 nl-gap-2">
                <div>
                    <label for="">City</label>
                    <input type="text" placeholder="City">
                </div>
                <div>
                    <label for="">State/Region</label>
                    <input type="text" placeholder="State/Region">
                </div>
            </div>
            <div>
                <label for="">Country/Region</label>
                <select name="country">
                    <option>Please Select</option>
                    <option value="United States">United States</option>
                    <option value="Canada">Canada</option>
                </select>
            </div>
            <div>
                <label for="">Company name</label>
                <input type="text" placeholder="Company name">
            </div>
            <div class="nl-grid md:nl-grid-cols-2 nl-grid-cols-1 nl-gap-2">
                <div>
                    <label class="nl-form-label-md" for="">
                        Kitchen Sink Checkbox
                    </label>
                    <ul role="checkbox">
                        <li role="checkbox">
                            <input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1">
                            <label for="checkbox1">Checkbox 1</label>
                        </li>
                        <li role="checkbox">
                            <input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2">
                            <label for="checkbox2">Checkbox 2</label>
                        </li>
                        <li role="checkbox">
                            <input type="checkbox" id="checkbox3" name="checkbox3" value="checkbox3">
                            <label for="checkbox3">Checkbox 3</label>
                        </li>
                        <li role="checkbox">
                            <input type="checkbox" id="checkbox4" name="checkbox4" value="checkbox4">
                            <label for="checkbox4">Checkbox 4</label>
                        </li>
                    </ul>
                </div>
                <div>
                    <label class="nl-form-label-md" for="">
                        Kitchen Sink Radio
                    </label>
                    <ul class="radiogroup">
                        <li role="radio">
                            <input type="radio" id="radio1" name="radio" value="radio1">
                            <label for="radio1">Radio 1</label>
                        </li>
                        <li role="radio">
                            <input type="radio" id="radio2" name="radio" value="radio2">
                            <label for="radio2">Radio 2</label>
                        </li>
                        <li role="radio">
                            <input type="radio" id="radio3" name="radio" value="radio3">
                            <label for="radio3">Radio 3</label>
                        </li>
                        <li role="radio">
                            <input type="radio" id="radio4" name="radio" value="radio4">
                            <label for="radio4">Radio 4</label>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <label for="">Kitchen Sink Dropdown</label>
                <select name="test">
                    <option>Please Select</option>
                    <option value="Dropdown 1">Dropdown 1</option>
                    <option value="Dropdown 2">Dropdown 2</option>
                    <option value="Dropdown 3">Dropdown 3</option>
                    <option value="Dropdown 4">Dropdown 4</option>
                </select>
            </div>
            <div>
                <label for="">Kitchen Sink Date</label>
                <input type="date" id="start" name="trip-start" value="2018-07-22">
            </div>
            <div>
                <label for="">Description</label>
                <textarea name="" id="" placeholder="Type here..."></textarea>
            </div>
            <div>
                <input type="Submit" value="Submit">
            </div>
        </form>
    </div>
</div>
 
<div class="nl-font-museo nl-p-4 nl-hs-form nl-grid lg:nl-grid-cols-2 nl-grid-cols-1 nl-gap-5 nl-prose">
    <div class="nl-max-w-screen-sm">
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
            hbspt.forms.create({
                region: "na1",
                portalId: "5282963",
                formId: "98e10c94-50f9-451e-9a4d-17d1553873c7"
            });
        </script>
    </div>
    <div class="nl-max-w-screen-sm">
        <form action="" class="nl-form">
            <div class="nl-grid md:nl-grid-cols-2 nl-grid-cols-1 nl-gap-2">
                <div>
                    <label for="">First Name</label>
                    <input type="text" placeholder="First Name">
                </div>
                <div>
                    <label for="">Last Name</label>
                    <input type="text" placeholder="Last Name">
                </div>
            </div>
            <div class="nl-grid md:nl-grid-cols-2 nl-grid-cols-1 nl-gap-2">
                <div>
                    <label for="">Phone Number</label>
                    <input type="tel" placeholder="Phone Number">
                </div>
                <div>
                    <label for="">Email</label>
                    <input type="email" placeholder="Email">
                </div>
            </div>
            <div>
                <label for="">Street address</label>
                <input type="text" placeholder="Street address">
            </div>
            <div class="nl-grid md:nl-grid-cols-2 nl-grid-cols-1 nl-gap-2">
                <div>
                    <label for="">City</label>
                    <input type="text" placeholder="City">
                </div>
                <div>
                    <label for="">State/Region</label>
                    <input type="text" placeholder="State/Region">
                </div>
            </div>
            <div>
                <label for="">Country/Region</label>
                <select name="country">
                    <option>Please Select</option>
                    <option value="United States">United States</option>
                    <option value="Canada">Canada</option>
                </select>
            </div>
            <div>
                <label for="">Company name</label>
                <input type="text" placeholder="Company name">
            </div>
            <div class="nl-grid md:nl-grid-cols-2 nl-grid-cols-1 nl-gap-2">
                <div>
                    <label class="nl-form-label-md" for="">
                        Kitchen Sink Checkbox
                    </label>
                    <ul role="checkbox">
                        <li role="checkbox">
                            <input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1">
                            <label for="checkbox1">Checkbox 1</label>
                        </li>
                        <li role="checkbox">
                            <input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2">
                            <label for="checkbox2">Checkbox 2</label>
                        </li>
                        <li role="checkbox">
                            <input type="checkbox" id="checkbox3" name="checkbox3" value="checkbox3">
                            <label for="checkbox3">Checkbox 3</label>
                        </li>
                        <li role="checkbox">
                            <input type="checkbox" id="checkbox4" name="checkbox4" value="checkbox4">
                            <label for="checkbox4">Checkbox 4</label>
                        </li>
                    </ul>
                </div>
                <div>
                    <label class="nl-form-label-md" for="">
                        Kitchen Sink Radio
                    </label>
                    <ul class="radiogroup">
                        <li role="radio">
                            <input type="radio" id="radio1" name="radio" value="radio1">
                            <label for="radio1">Radio 1</label>
                        </li>
                        <li role="radio">
                            <input type="radio" id="radio2" name="radio" value="radio2">
                            <label for="radio2">Radio 2</label>
                        </li>
                        <li role="radio">
                            <input type="radio" id="radio3" name="radio" value="radio3">
                            <label for="radio3">Radio 3</label>
                        </li>
                        <li role="radio">
                            <input type="radio" id="radio4" name="radio" value="radio4">
                            <label for="radio4">Radio 4</label>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <label for="">Kitchen Sink Dropdown</label>
                <select name="test">
                    <option>Please Select</option>
                    <option value="Dropdown 1">Dropdown 1</option>
                    <option value="Dropdown 2">Dropdown 2</option>
                    <option value="Dropdown 3">Dropdown 3</option>
                    <option value="Dropdown 4">Dropdown 4</option>
                </select>
            </div>
            <div>
                <label for="">Kitchen Sink Date</label>
                <input type="date" id="start" name="trip-start" value="2018-07-22">
            </div>
            <div>
                <label for="">Description</label>
                <textarea name="" id="" placeholder="Type here..."></textarea>
            </div>
            <div>
                <input type="Submit" value="Submit">
            </div>
        </form>
    </div>
</div>
 
{
  "title": "Forms"
}
  • Content: 
    form.hs-form,
.nl-form {
    // Make sure list style type is set to none if inside of prose container
    ul {
        list-style-type: none;
    }

    label,
    p {
        @include text-size(sm);
        color: $gray;
        display: inline-block;
        margin-bottom: $spacing-1;
    }

    @media (min-width: 500px) {
        .hbspt-form fieldset:not(.form-columns-1) .hs-form-field:not(:last-of-type) .input {
            margin-right: $spacing-4;
        }
    }

    input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
    textarea,
    select {
        background-color: $gray-xlight;
        border: 2px solid $blue;
        border-radius: 4px;
        color: $gray;
        margin-bottom: $spacing-4;
        padding: $spacing-3 $spacing-2;
        width: 100%;

        &:focus {
            background-color: $white;
            border-color: $gray;
        }

        &::placeholder {
            color: $gray-light;
            font-family: $font-family-base;
        }

        &.error {
            border-color: $red;
        }
    }

    textarea { 
        min-height: 175px;
    }

    li[role=checkbox],
    li[role=radio] {
        align-items: center;
        display: flex;
        margin-bottom: $spacing-2;

        > label {
            align-items: center;
            display: flex;
            margin-bottom: 0;
        }
    }

    input[type=checkbox],
    input[type=radio] {
        appearance: none;
        display: block;
        height: 15px;
        width: 15px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 .3125rem 0 0;

        ~ span,
        ~ label {
            align-items: center;
            cursor: pointer;
            display: flex;
            line-height: 1;
        }

        ~ label {
            margin-bottom: 0;
        }
    }

    input[type=checkbox] {
        background-image: url( '/images/nl-checkbox.svg' );

        &:checked {
            background-image: url( '/images/nl-checkbox-checked.svg' );
        }
    }

    input[type=radio] {
        background-image: url( '/images/nl-radio.svg' );

        &:checked {
            background-image: url( '/images/nl-radio-checked.svg' );
        }
    }

    select {
        appearance: none;
        color: $gray-light;
        background-image: url( '/images/nl-select-down.svg' );
        background-position: 98% 0;
        background-repeat: no-repeat;
        background-size: $spacing-4;

        option {
            background-color: $gray-xlight;
            color: $gray;
        }
    }

    .hs-dateinput input[type=text],
    input[type=date] {
        appearance: none;
        color: $gray-light;

        &.hs-input {
            background-image: url( '/images/nl-calendar.svg' );
            background-position: 98% 10px;
            background-repeat: no-repeat;
            background-size: $spacing-4;
        }

        &::-webkit-datetime-edit {
            color: $gray-light;
            font-family: $font-family-museo;
        }

        &::-webkit-calendar-picker-indicator {
            background-image: url('/images/nl-calendar.svg');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }

    input[type=submit] {
        $button-sm: map-get($button-sizes, md);
        --padding-x: #{map-get($button-sm, padding-x)};
        --padding-y: #{map-get($button-sm, padding-y)};
        --font-size: #{map-get($button-sm, font-size)};    
        --background: #{$green};
        --border-color: #{$green};
        --color: #{$white};                
        appearance: none;
    }

    // HubSpot Sepcific Error Messages
    .hs-error-msgs {
        line-height: 1;
        list-style-type: none;
        margin-bottom: 0;
        margin-top: calc( -1 * #{$spacing-4});
        padding-left: 0;

        label {
            @include text-size(xs);
            color: $red;
        }
    }

    // HubSpot Specific Required
    .hs-form-required {
        color: $red;
    }

    // HubSpot Specific radio/checkbox labels
    .hs-fieldtype-checkbox > label,
    .hs-fieldtype-booleancheckbox > label,
    .hs-fieldtype-radio > label,
    .nl-form-label-md {
        @include text-size(md);
        display: inline-block;
        margin: 0 0 $spacing-3;
    }

    // Hubspot Specific Single Checkbox
    .hs-form-booleancheckbox-display {
        display: flex;
    }

    fieldset .hs-form-booleancheckbox-display > input[type=checkbox] {
        height: 15px;
        flex-shrink: 0;
        width: 15px;
    }

    .hs-form-booleancheckbox label > span {
        align-items: flex-start;
    }

    // Hubspot Specific Recaptcha
    .hs-recaptcha {
        margin: $spacing-3 0;
    }

    // Overrides max-width/width inline style output by HubSpot
    fieldset,
    fieldset.form-columns-1 {
        width: 100%;
        max-width: 100%;

        .hs-input:not(input[type=checkbox]):not(input[type=radio]) {
            width: 100%;
            max-width: 100%;
        }
    }
}
  • URL: /components/raw/form/_form.scss
  • Filesystem Path: src/components/03-components/form/_form.scss
  • Size: 5.2 KB

No notes defined.