Experimental

Accordions

Accordions are used to display additional information through a default collapse behavior.

Accordions have 2 variations:

  • Accordions on zero layer
  • Accordions on a card

    All accordions contain title, body and an optional subtitle. Subtitle has two variations where it can either be placed beneath or right next to the title.

    For the accordion container, mobile-card is used; H4 is used for title; H6 is used for subtitle beneath the title while label(title=required) is used for subtitle right next to the title.

Accordions on zero layer

Accordion Title


This is the accordion body

Accordion Title

Subtitle

This is the accordion body

Accordion Title


This is the accordion body

Accordions on a card

Accordion Title


This is the accordion body

Accordion Title

Subtitle

This is the accordion body

Accordion Title


This is the accordion body

<section>
    <h4>Accordions on zero layer</h4>

    <div class="accordion mobile-card has-background-primary">
        <div class="accordion-header" onclick="FED.Ent.accordions.accordionClicked(this)">
            <div class="accordion-header-titles">
                <h4 class="accordion-title ">Accordion Title</h4>

            </div>
            <div class="accordion-header-arrow">
                <span class="shc-icon shc-icon-more"></span>
            </div>
        </div>

        <div class="accordion-body accordion-body-collapse">
            <hr>
            <div class="accordion-body-content">
                <p>This is the accordion body</p>
            </div>
        </div>
    </div>

    <div class="accordion mobile-card has-background-primary">
        <div class="accordion-header" onclick="FED.Ent.accordions.accordionClicked(this)">
            <div class="accordion-header-titles">
                <h4 class="accordion-title ">Accordion Title</h4>

                <h6 class="accordion-title">Subtitle</h6>
            </div>
            <div class="accordion-header-arrow">
                <span class="shc-icon shc-icon-more"></span>
            </div>
        </div>

        <div class="accordion-body accordion-body-collapse">
            <hr>
            <div class="accordion-body-content">
                <p>This is the accordion body</p>
            </div>
        </div>
    </div>

    <div class="accordion mobile-card has-background-primary">
        <div class="accordion-header" onclick="FED.Ent.accordions.accordionClicked(this)">
            <div class="accordion-header-titles">
                <h4 class="accordion-title accordion-title-inline">Accordion Title</h4>

                <label for="this-field" class="accordion-title-inline">
                    <abbr title="required">Subtitle</abbr>
                </label>
            </div>
            <div class="accordion-header-arrow">
                <span class="shc-icon shc-icon-more"></span>
            </div>
        </div>

        <div class="accordion-body accordion-body-collapse">
            <hr>
            <div class="accordion-body-content">
                <p>This is the accordion body</p>
            </div>
        </div>
    </div>
</section>

<section>

    <h4>Accordions on a card</h4>


    <div class="mobile-card has-background-primary">
        <div class="accordion mobile-card has-background-primary">
            <div class="accordion-header" onclick="FED.Ent.accordions.accordionClicked(this)">
                <div class="accordion-header-titles">
                    <h4 class="accordion-title ">Accordion Title</h4>

                </div>
                <div class="accordion-header-arrow">
                    <span class="shc-icon shc-icon-more"></span>
                </div>
            </div>

            <div class="accordion-body accordion-body-collapse">
                <hr>
                <div class="accordion-body-content">
                    <p>This is the accordion body</p>
                </div>
            </div>
        </div>

        <div class="accordion mobile-card has-background-primary">
            <div class="accordion-header" onclick="FED.Ent.accordions.accordionClicked(this)">
                <div class="accordion-header-titles">
                    <h4 class="accordion-title ">Accordion Title</h4>

                    <h6 class="accordion-title">Subtitle</h6>
                </div>
                <div class="accordion-header-arrow">
                    <span class="shc-icon shc-icon-more"></span>
                </div>
            </div>

            <div class="accordion-body accordion-body-collapse">
                <hr>
                <div class="accordion-body-content">
                    <p>This is the accordion body</p>
                </div>
            </div>
        </div>

        <div class="accordion mobile-card has-background-primary">
            <div class="accordion-header" onclick="FED.Ent.accordions.accordionClicked(this)">
                <div class="accordion-header-titles">
                    <h4 class="accordion-title accordion-title-inline">Accordion Title</h4>

                    <label for="this-field" class="accordion-title-inline">
                        <abbr title="required">Subtitle</abbr>
                    </label>
                </div>
                <div class="accordion-header-arrow">
                    <span class="shc-icon shc-icon-more"></span>
                </div>
            </div>

            <div class="accordion-body accordion-body-collapse">
                <hr>
                <div class="accordion-body-content">
                    <p>This is the accordion body</p>
                </div>
            </div>
        </div>

    </div>
</section>

Containers

The area most in flux in Enterprise. Elements requiring shimming have been marked and should be used with caution.

Main-Level Container Elements*

Currently wrapped in an .enterprise class to insulate legacy code, at some point all top level block elements will have a max-width set to 1300px to allow for situational full-bleed effects to be called. An element in this context can be made fullbleed with the .fullbleed class.

This will function in a similar way to the shcContent id in ASAP/WCS.

Consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 <div class="enterprise">
   <div>
     <h1>Consectetur adipisicing elit</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>
 </div>

Sidebar and Has-Sidebar

The base sidebar element is the width of a card at a given breakpoint, and will not wrap. It needs to be the direct child of the .has-sidebar context class.

Sidebar placement is dictated simply by element order.

Sidebar Sibling Element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius accusamus reiciendis ab, iusto soluta fugiat excepturi minus dignissimos sint qui voluptas, unde quod.

Molestias cumque quibusdam quidem?

 <div class="has-sidebar">
   <div>
     <h2>Sidebar Sibling Element</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     Eius accusamus reiciendis ab, iusto soluta fugiat excepturi
     minus dignissimos sint qui voluptas, unde quod.</p>
     <p>Molestias cumque quibusdam quidem?</p>
   </div>
   <div class="sidebar has-background-secondary">
     <h3>Sidebar</h3>
     <ul class="list-disc">
       <li>List Item 1</li>
       <li>List Item 2</li>
       <li>List Item 3</li>
     </ul>
   </div>
 </div>

Flexbox Elements

The following elements/styles need shimming in place in order to be used in production. This includes having Modernizr available.

Compatible with IE11+, Firefox 28+, Chrome 21+, Safari 6.1+.

Cards and Has-Cards

For the .card and .has-cards classes, as with all .has-X classes, the context class needs to be the direct parent of the element class. That is, the .has-cards class should only have .card elements in its first level.

Example of card shim in action.

Card 1

Lorem ipsum dolor sit amet.

Card 2

Lorem ipsum dolor sit amet.

Card 3

Lorem ipsum dolor sit amet.

Card 4

Lorem ipsum dolor sit amet.

Card 5

Lorem ipsum dolor sit amet.

<div class="has-cards">
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 1</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 2</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 3</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 4</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 5</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Additional Grouping

Vertical Columns

Evenly split 100% height columns that do not wrap.

Forms Refactor

Unified Form Controls

New Selectors
div-based selectors, requires JS
Selector 1
Selector 2
Selector 3
form-based selectors, no-JS required
Brands
Select a size (verbose)
Select a size (abbr)
Select a size (numeric)
Select a color
EXPERIMENTAL Pick some cats
Brands
Select a size (verbose)
<div class="title-5">New Selectors</div>
<form class="form-basic">
  <div class="title-6">div-based selectors, requires JS</div>
  <fieldset class="has-selectors">
    <div class="control control-selector"><span>Selector 1</span></div>
    <div class="control control-selector"><span>Selector 2</span></div>
    <div class="control control-selector"><span>Selector 3</span></div>
  </fieldset>

  <div class="title-6">form-based selectors, no-JS required</div>
  <fieldset class="has-selectors">
    <legend>Brands</legend>
    <label class="control control-selector">
      <input type="checkbox">
      <span>Craftsman</span>
    </label>
    <label class="control control-selector">
      <input type="checkbox">
      <span>DeWalt</span>
    </label>
    <label class="control control-selector">
      <input type="checkbox">
      <span>Milwaukee</span>
    </label>
    <label class="control control-selector">
      <input type="checkbox">
      <span>Ryobi</span>
    </label>
    <label class="control control-selector">
      <input type="checkbox">
      <span>Bosch</span>
    </label>
  </fieldset>

  <fieldset class="has-selectors">
    <legend>Select a size (verbose)</legend>
    <label class="control control-selector">
      <input type="radio" name="size-verbose" value="xsm">
      <span>X-Small</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-verbose" value="sm">
      <span>Small</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-verbose" value="med">
      <span>Medium</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-verbose" value="lrg">
      <span>Large</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-verbose" value="xlrg">
      <span>X-Large</span>
    </label>
  </fieldset>

  <fieldset class="has-selectors">
    <legend>Select a size (abbr)</legend>
    <label class="control control-selector">
      <input type="radio" name="size-abbr" value="5x">
      <span>5X</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-abbr" value="6x" disabled>
      <span>6X</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-abbr" value="2xlt" disabled>
      <span>2XLT</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-abbr" value="3xlt">
      <span>3XLT</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-abbr" value="4xlt">
      <span>4XLT</span>
    </label>
  </fieldset>

  <fieldset class="has-selectors">
    <legend>Select a size (numeric)</legend>
    <label class="control control-selector">
      <input type="radio" name="size-numeric" value="6">
      <span>6</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-numeric" value="8">
      <span>8</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-numeric" value="10">
      <span>10</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-numeric" value="12">
      <span>12</span>
    </label>
    <label class="control control-selector">
      <input type="radio" name="size-numeric" value="14">
      <span>14</span>
    </label>
  </fieldset>

  <fieldset class="has-selectors">
    <legend>Select a color</legend>
    <label class="control control-swatch" title="4B0DFF">
      <input type="radio" name="color" value="4B0DFF">
      <span><img src="http://placehold.it/30/4B0DFF?text=%20" height="30" width="30"></span>
    </label>
    <label class="control control-swatch" title="0C83E8">
      <input type="radio" name="color" value="0C83E8">
      <span><img src="http://placehold.it/30/0C83E8?text=%20" height="30" width="30"></span>
    </label>
    <label class="control control-swatch" title="00FFA5">
      <input type="radio" name="color" value="00FFA5">
      <span><img src="http://placehold.it/30/00FFA5?text=%20" height="30" width="30"></span>
    </label>
    <label class="control control-swatch" title="42E80C">
      <input type="radio" name="color" value="42E80C">
      <span><img src="http://placehold.it/30/42E80C?text=%20" height="30" width="30"></span>
    </label>
    <label class="control control-swatch" title="FFEA0A">
      <input type="radio" name="color" value="FFEA0A">
      <span><img src="http://placehold.it/30/FFEA0A?text=%20" height="30" width="30"></span>
    </label>
  </fieldset>

  <fieldset class="has-selectors">
    <legend><em>EXPERIMENTAL</em> Pick some cats</legend>
    <label class="control control-selector has-image">
      <input type="checkbox" name="lrg-test" value="xsm">
      <span>
        <img src="https://placekitten.com/150/150">
        Michael
      </span>
    </label>
    <label class="control control-selector has-image">
      <input type="checkbox" name="lrg-test" value="sm">
      <span>
        <img src="https://placekitten.com/150/150">
        Rodrigo
      </span>
    </label>
    <label class="control control-selector has-image">
      <input type="checkbox" name="lrg-test" value="sm">
      <span>
        <img src="https://placekitten.com/150/150">
        Divya
      </span>
    </label>
    <label class="control control-selector has-image">
      <input type="checkbox" name="lrg-test" value="sm">
      <span>
        <img src="https://placekitten.com/150/150">
        Rochelle
      </span>
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Brands</legend>
    <label class="control control-checkbox">
      <input type="checkbox" name="brand-checkbox">
      <span>Craftsman</span>
    </label>
    <label class="control control-checkbox">
      <input type="checkbox" name="brand-checkbox">
      <span>DeWalt</span>
    </label>
    <label class="control control-checkbox">
      <input type="checkbox" name="brand-checkbox">
      <span>Milwaukee</span>
    </label>
    <label class="control control-checkbox">
      <input type="checkbox" name="brand-checkbox">
      <span>Ryobi</span>
    </label>
    <label class="control control-checkbox">
      <input type="checkbox" name="brand-checkbox">
      <span>Bosch</span>
    </label>
  </fieldset>

  <fieldset>
    <legend>Select a size (verbose)</legend>
    <label class="control control-radio">
      <input type="radio" name="size-verbose-radio" value="xsm">
      <span>X-Small</span>
    </label>
    <label class="control control-radio">
      <input type="radio" name="size-verbose-radio" value="sm">
      <span>Small</span>
    </label>
    <label class="control control-radio">
      <input type="radio" name="size-verbose-radio" value="med">
      <span>Medium</span>
    </label>
    <label class="control control-radio">
      <input type="radio" name="size-verbose-radio" value="lrg">
      <span>Large</span>
    </label>
    <label class="control control-radio">
      <input type="radio" name="size-verbose-radio" value="xlrg">
      <span>X-Large</span>
    </label>
  </fieldset>
</form>

Profile Form Example

Birthday required
Anniversary required
Example: 5551231234 (no dashes or spaces)
<form class="form-basic">
  <label for="example">
    <!-- I don't like this abbr thing at all.-->
    <span class="field-name">Title <abbr title="optional">optional</abbr></span>
    <div class="select-menu">
      <select name="title">
        <option disabled selected>Select Title</option>
        <option>Mr.</option>
        <option>Ms.</option>
        <option>Mrs.</option>
      </select>
    </div>
  </label>
  <label>
    <span class="field-name">First Name <abbr title="required">required</abbr></span>
    <input type="text" name="firstName" />
  </label>
  <label>
    <span class="field-name">Last Name <abbr title="required">required</abbr></span>
    <input type="text" name="lastName" />
  </label>
  <fieldset>
    <legend>Birthday <abbr title="required">required</abbr></legend>
    <div class="select-menu">
      <select name="birthMonth">
        <option disabled selected>Month</option>
        <option>January</option>
        <option>February</option>
        <option>March</option>
      </select>
    </div>
    <div class="select-menu">
      <select name="birthDay">
        <option disabled selected>Day</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
    <div class="select-menu">
      <select name="birthYear">
        <option disabled selected>Year</option>
        <option>1984</option>
        <option>1985</option>
        <option>1986</option>
      </select>
    </div>
  </fieldset>
  <fieldset>
    <legend>Anniversary <abbr title="required">required</abbr></legend>
    <div class="select-menu">
      <select name="annivMonth">
        <option disabled selected>Month</option>
        <option>January</option>
        <option>February</option>
        <option>March</option>
      </select>
    </div>
    <div class="select-menu">
      <select name="annivDay">
        <option disabled selected>Day</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
    <div class="select-menu">
      <select name="annivYear">
        <option disabled selected>Year</option>
        <option>1984</option>
        <option>1985</option>
        <option>1986</option>
      </select>
    </div>
  </fieldset>
  <label>
    <span class="field-name">Primary Phone <abbr title="required">required</abbr></span>
    <input type="tel" name="phonePrimary" aria-describedby="phoneHelp" />
  </label>
  <label>
    <span class="field-name">Alternate Phone <abbr title="required">optional</abbr></span>
    <input type="tel" name="phoneAlt" aria-describedby="phoneHelp" />
  </label>
  <span id="phoneHelp" class="field-help">Example: 5551231234 (no dashes or spaces)</span><br>
  <label>
    <span class="field-name">Email <abbr title="required">required</abbr></span>
    <input type="email" name="email" />
  </label>
  <button class="button button-primary">Save</button>
</form>

Less Mixins

Less mixins provided to aid in common utilities. Most of thes are wrappers for prefixed properties and will be removed once we get auto-prefixing working in the build (see ECS-91).

.appearance-none

Extra CSS necessary for hiding default form element appearance in some browsers. Currently needed to support custom select elements. Prefixes the appearance property and sets its value to none.

This would be better replaced with a mixin that we can pass a value to, but hopefully by the time we get around to that we'll have auto-prefixing in the build.

.box-sizing (@sizing: border-box)

Prefix box-sizing property for older versions of Firefox and Chrome.

@sizing
The type of sizing to be used. Defaults to border-box

.custom-control-focus

A mixin to provide a focus state for custom controls.

.pointerBuild

Creates even, consistant pointers for tooltips and other elements.

@outer-pointer-size-px
The pixel value that determines the outer size of the pointer.

user-select (@sizing: border-box)

A mixin to disable text selection on elements. Used to give consistency to button styles when applied to non-button elements.

@value
The setting to be used. Defaults to auto