| Vapor CSS

Groups

Simple vertical form!

Style sheet: /scss/forms/block-form.scss

<div class="coveo-form">
    <fieldset class="form-group input-field"> <!-- fieldset tag is optional, you can use a simple div -->
        <input type="text" required/>
        <label>Basic</label>
    </fieldset>
    <div class="form-group input-field">
        <input type="text" required placeholder="Placeholder text"/>
        <label>With placeholder</label>
    </div>
    <div class="form-group input-field">
        <input type="text" required placeholder="Placeholder text" value="My value"/>
        <label>With value</label>
    </div>
</div>

Child element

Displays a from element has the child of another.

Style sheet: /scss/forms/form-child.scss

A radio-select
A radio-select

<div class="coveo-parent">
    <label class="coveo-checkbox-label">
        <input type="checkbox" class="coveo-checkbox" checked="">
        <button type="button"></button>
        <span class="label">With child</span>
    </label>
    <div class="coveo-child">
        <label class="coveo-checkbox-label">
            <input type="checkbox" class="coveo-checkbox" />
            <button type="button"></button>
            <span class="label">Child checkbox</span>
        </label>
    </div>
</div>

<div class="coveo-parent mt2 p2 bg-white">
    <label class="coveo-checkbox-label">
        <input type="checkbox" class="coveo-checkbox" checked="">
        <button type="button"></button>
        <span class="label">Can have a different color?</span>
    </label>
    <div class="coveo-child mod-pure-white">
        <label class="coveo-checkbox-label">
            <input type="checkbox" class="coveo-checkbox" />
            <button type="button"></button>
            <span class="label">Yes</span>
        </label>
    </div>
</div>

<div class="coveo-form mt2 coveo-parent">
    <label class="coveo-checkbox-label">
        <input type="checkbox" class="coveo-checkbox" />
        <button type="button"></button>
        <span class="label">It works with input elements too</span>
    </label>
    <div class="coveo-child">
        <div class="input-field form-group">
            <input type="text" disabled required="" placeholder="Placeholder text" />
            <label> Enabled invalid input
                <span class="inline-help-tooltip" title="" data-placement="right" data-original-title="A simple inline help text.">
                    <span class="inline-help-icon">
                        <svg viewbox="0 0 18 18"><path d="M9 0c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9zm0 16.2c3.969 0 7.2-3.231 7.2-7.2S12.969 1.8 9 1.8 1.8 5.031 1.8 9s3.231 7.2 7.2 7.2zM8 6V4h2v2zm0 1h2v7H8z"/></svg>
                    </span>
                </span>
            </label>
        </div>
    </div>
</div>
<div class="coveo-form mt2 coveo-parent">
    <label class="coveo-checkbox-label">
        <input type="checkbox" class="coveo-checkbox" checked>
        <button type="button"></button>
        <span class="label">or radio button</span>
    </label>
    <div class="coveo-child">
        <fieldset class="form-group">
            <span class="form-control-label">A radio-select</span>
            <div class="form-control radio-select">
                <div class="radio-option">
                    <input name="enabledOptions" type="radio" id="Option1-child" value="blue" />
                    <label for="Option1-child">Blue</label>
                </div>
                <div class="radio-option">
                    <input name="enabledOptions" type="radio" id="Option2-child" value="green" checked />
                    <label for="Option2-child">Green</label>
                </div>
            </div>
        </fieldset>
    </div>
</div>
<div class="coveo-form mt2 p2">
    <div class="flex flex-row">
        <fieldset class="form-group">
            <span class="form-control-label">A radio-select</span>
            <div class="form-control radio-select">
                <div class="radio-option">
                    <input name="enabledOptions" type="radio" id="Option4-child" value="blue2" />
                    <label for="Option4-child">Blue</label>
                </div>
                <div class="radio-option">
                    <input name="enabledOptions" type="radio" id="Option5-child" value="green2" checked />
                    <label for="Option5-child">Green</label>
                </div>
                <div class="radio-option">
                    <input name="enabledOptions" type="radio" id="Option6-child" value="yellow" />
                    <label for="Option6-child">Yellow</label>
                </div>
            </div>
        </fieldset>
        <div class="p2">
            <div class="coveo-child vertical">
                <div class="form-control">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox" disabled>
                        <button type="button"></button>
                        <span class="label">Option 1</span>
                    </label>
                    <br>
                    <label class="mt1 coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox" checked disabled>
                        <button type="button"></button>
                        <span class="label">Option 2</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('.coveo-checkbox').click(function () {
        var isChild = $(this).closest('.coveo-child').length > 0;
        if (!isChild) {
            var parent = $(this).closest('.coveo-parent');
            var isChecked = $(this).prop('checked');
            if (parent.length) {
                parent.find('.coveo-child input').prop('disabled', !isChecked);
            }
        }
    });
</script>

Split layout

Simple flex column layout, principally used in our forms.

Style sheet: /scss/utility/layout.scss

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

  • Lorem ipsum dolor sit amet.

<div class="flex flex-column overflow-auto mod-border" style="height: 280px;">
    <div class="split-layout">
        <div class="column">
            <p class="p1" style="line-height: 24px;">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
                tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
                exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
                reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
                nulla pariatur?
            </p>
        </div>
        <div class="column">
            <ul class="collapsible" data-collapsible="expandable">
                <li>
                    <button type="button" class="collapsible-header active btn with-icon">
                        Text example
                    </button>
                    <div class="collapsible-body">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li>
                    <button type="button" class="collapsible-header btn with-icon">
                        Inputs
                    </button>
                    <div class="collapsible-body">
                        <div class="coveo-form">
                            <fieldset class="form-group input-field mod-fixed-width">
                                <input type="text" required/>
                                <label>Input 1</label>
                            </fieldset>
                            <fieldset class="form-group input-field mod-fixed-width">
                                <input type="text" required/>
                                <label>Input 2</label>
                            </fieldset>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Child section element

Displays a from section has the child of another.

Style sheet: /scss/forms/form-child.scss

<div class="coveo-form">
    <div class="form-group">
        <div class="form-control">
            <div class="btn dropdown-toggle">
                <span class="dropdown-selected-value">Default Option</span>
                <span class="dropdown-toggle-arrow"></span>
            </div>
        </div>
        <div class="child-section">
            <div class="form-control form-group">
                <div class="btn dropdown-toggle">
                    <span class="dropdown-selected-value">Default Option</span>
                    <span class="dropdown-toggle-arrow"></span>
                </div>
            </div>
            <div class="input-field form-group">
                <input type="text" required/>
                <label>Input 1</label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="form-control">
            <div class="btn dropdown-toggle">
                <span class="dropdown-selected-value">Default Option</span>
                <span class="dropdown-toggle-arrow"></span>
            </div>
        </div>
        <div class="child-section mod-child-section-first-input">
            <div class="input-field form-group">
                <input type="text" required/>
                <label>Input 1</label>
            </div>
            <div class="input-field form-group">
                <input type="text" required/>
                <label>Input 2</label>
            </div>
        </div>
    </div>
</div>