- Brand
- Forms
- Buttons
- Utilities
- Components
  - Menu
  - Menu for Apps
  - List group
  - List group with icons
  - Nested list group
  - Nested list group with icons
  - Dropdown
  - Alerts
  - Dismissible alerts
  - Links in alerts
  - Sheet
  - Sheet with header
  - Sheet with tabs
  - Sheet with stacked tabs
  - Sheet with auto-stackable tabs
  - Sheet with alerts
  - Chosen select
  - Chosen multiple select
  - Switch
  - Disabled switch
  - Modal
- Compositions
- Ember Addon

### Menu

#### Plugin dependency

This component requires BookingSync `menu` and Bootstrap `collapse` JS plugins.

    <nav id="sidebar" class="menu menu-fixed flex-col">
      <header class="menu-header">
        <div class="menu-icon menu-header-icon">
          <i class="bs-icon-bookingsync"></i>
        </div>
        <div class="menu-body menu-header-body">
          <h4 class="menu-header-heading">Vacation Rentals</h4>
          <small>
            <a href="#menu-header-submenu"
               data-toggle="collapse"
               role="button"
               aria-expanded="false"
               aria-controls="menu-header-submenu"
               class="collapsed">
              Switch account
              <span class="caret"></span>
            </a>
          </small>
        </div>
        <nav id="menu-header-submenu" class="collapse menu-header-submenu">
          <ol>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  Bed and Breakfast
                </div>
              </a>
            </li>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  City Apartments
                </div>
              </a>
            </li>
          </ol>
        </nav>
      </header>
      <div class="menu-body flex-1">
        <ol>
          <li role="presentation" class="active">
            <a href="#" class="menu-link">
              <div class="menu-icon menu-link-icon">
                <i class="icon-calendar"></i>
              </div>
              <div class="menu-body menu-link-body">
                Bookings
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-icon menu-link-icon">
                <i class="icon-clients"></i>
              </div>
              <div class="menu-body menu-link-body">
                Clients
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-icon menu-link-icon">
                <i class="icon-rental"></i>
              </div>
              <div class="menu-body menu-link-body">
                Rentals
              </div>
            </a>
          </li>
        </ol>
      </div>
      <footer class="menu-footer">
        <ol>
          <li role="separator" class="divider"></li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-icon menu-link-icon">
                <i class="icon-applications"></i>
              </div>
              <div class="menu-body menu-link-body">
                Apps
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link" data-toggle="menu-expand"
               data-menu="#sidebar" data-submenu="#sidebar-settings">
              <div class="menu-icon menu-link-icon">
                <i class="icon-settings"></i>
              </div>
              <div class="menu-body menu-link-body">
                Settings
              </div>
              <div class="menu-caret">
                <span class="caret-right"></span>
              </div>
            </a>
          </li>
          <li role="separator" class="divider"></li>
          <li role="presentation">
            <a href="#menu-footer-submenu"
               data-toggle="collapse"
               role="button"
               aria-expanded="false"
               aria-controls="menu-footer-submenu"
               class="collapsed menu-link">
              <div class="menu-icon menu-footer-icon">
                <img src="http://lorempixel.com/100/100/people/9" alt="Jane Doe"
                     class="img-rounded">
              </div>
              <div class="menu-body menu-link-body">
                Jane Doe
              </div>
              <div class="menu-caret">
                <span class="caret"></span>
              </div>
            </a>
          </li>
        </ol>
        <nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
          <ol>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-icon menu-link-icon">
                </div>
                <div class="menu-body menu-link-body">
                  Help Center
                </div>
              </a>
            </li>
            <li role="separator" class="divider"></li>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-icon menu-link-icon">
                </div>
                <div class="menu-body menu-link-body">
                  Profile
                </div>
              </a>
            </li>
            <li role="presentation" class="active">
              <a href="#" class="menu-link">
                <div class="menu-icon menu-link-icon">
                </div>
                <div class="menu-body menu-link-body">
                  Logout
                </div>
              </a>
            </li>
          </ol>
        </nav>
      </footer>
    </nav>
    <nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
      <header class="menu-header">
        <div class="menu-body menu-header-body">
          <h4 class="menu-header-heading">Settings</h4>
        </div>
      </header>
      <div class="menu-body flex-1">
        <ol>
          <li role="presentation" class="active">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                General
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                Payments
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                Apps
              </div>
            </a>
          </li>
        </ol>
      </div>
    </nav>

### Menu for Apps

#### Plugin dependency

This component requires BookingSync `menu` and Bootstrap `collapse` JS plugins.

    <nav class="menu menu-fixed flex-col menu-submenu menu-app">
      <header class="menu-header">
        <div class="menu-body menu-header-body">
          <h4 class="menu-header-heading">Awesome App</h4>
          <small>
            <a href="#menu-header-submenu"
               data-toggle="collapse"
               role="button"
               aria-expanded="false"
               aria-controls="menu-header-submenu"
               class="collapsed">
              San Francisco
              <span class="caret"></span>
            </a>
          </small>
        </div>
        <nav id="menu-header-submenu" class="collapse menu-header-submenu">
          <ol>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  French riviera
                </div>
              </a>
            </li>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  New York
                </div>
              </a>
            </li>
          </ol>
        </nav>
      </header>
      <div class="menu-body flex-1">
        <ol>
          <li role="presentation" class="active">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                General
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                Payments
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                Apps
              </div>
            </a>
          </li>
        </ol>
      </div>
      <footer class="menu-footer">
        <ol>
          <li role="separator" class="divider"></li>
          <li role="presentation">
            <a href="#menu-footer-submenu"
               data-toggle="collapse"
               role="button"
               aria-expanded="false"
               aria-controls="menu-footer-submenu"
               class="collapsed menu-link">
              <div class="menu-body menu-link-body">
                Settings
              </div>
              <div class="menu-caret">
                <span class="caret"></span>
              </div>
            </a>
          </li>
        </ol>
        <nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
          <ol>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  Help Center
                </div>
              </a>
            </li>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  Videos
                </div>
              </a>
            </li>
          </ol>
        </nav>
      </footer>
    </nav>

### List group

- Vacation Rentals
- City Apartments

    <div class="panel panel-default">
      <ul class="list-group list-unstyled">
        <li class="active">
          <a href="#" class="list-group-item">Vacation Rentals</a>
        </li>
        <li>
          <a href="#" class="list-group-item">City Apartments</a>
        </li>
      </ul>
    </div>

### List group with icons

- Reservations
- Clients
- Rentals
- Reviews

    <div class="panel panel-default">
      <ul class="list-group list-unstyled">
        <li class="active">
          <a href="#" class="list-group-item">
            <i class="icon-reservation icon-fw"></i>
            &nbsp; Reservations
          </a>
        </li>
        <li>
          <a href="#" class="list-group-item">
            <i class="icon-clients icon-fw"></i>
            &nbsp; Clients
          </a>
        </li>
        <li>
          <a href="#" class="list-group-item">
            <i class="icon-rental icon-fw"></i>
            &nbsp; Rentals
          </a>
        </li>
        <li>
          <a href="#" class="list-group-item">
            <i class="icon-reviews icon-fw"></i>
            &nbsp; Reviews
          </a>
        </li>
      </ul>
    </div>

### Nested list group

- Reservations
  - Planning
  - Calendrier
  - List
- Clients
- Rentals
- Reviews

    <div class="panel panel-default">
      <ul class="list-group list-unstyled">
        <li class="expanded active">
          <a href="#" class="list-group-item">Reservations</a>
          <ul class="list-group list-unstyled">
            <li>
              <a href="#" class="list-group-item">Planning</a>
            </li>
            <li>
              <a href="#" class="list-group-item">Calendrier</a>
            </li>
            <li>
              <a href="#" class="list-group-item">List</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="list-group-item">Clients</a>
        </li>
        <li>
          <a href="#" class="list-group-item">Rentals</a>
        </li>
        <li>
          <a href="#" class="list-group-item">Reviews</a>
        </li>
      </ul>
    </div>

### Nested list group with icons

- Reservations
  - Planning
  - Calendars
  - List
- Clients
- Rentals
- Reviews

    <div class="panel panel-default">
      <ul class="list-group list-group-with-icon list-unstyled">
        <li class="expanded">
          <a href="#" class="list-group-item">
            <i class="icon-reservation icon-fw"></i>
            &nbsp; Reservations
          </a>
          <ul class="list-group list-unstyled">
            <li><a href="#" class="list-group-item">Planning</a></li>
            <li class="active">
              <a href="#" class="list-group-item">Calendars</a>
            </li>
            <li><a href="#" class="list-group-item">List</a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="list-group-item">
            <i class="icon-clients icon-fw"></i>
            &nbsp; Clients
          </a>
        </li>
        <li>
          <a href="#" class="list-group-item">
            <i class="icon-rental icon-fw"></i>
            &nbsp; Rentals
          </a>
        </li>
        <li>
          <a href="#" class="list-group-item">
            <i class="icon-reviews icon-fw"></i>
            &nbsp; Reviews
          </a>
        </li>
      </ul>
    </div>

### Dropdown

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button"
              id="dropdownMenu1" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">Dropdown header</li>
        <li><a href="#">Action</a></li>
        <li class="disabled"><a href="#">Disabled link</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"> </li>
        <li class="dropdown-header">Dropdown header</li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

### Alerts

Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

    <div class="alert alert-success" role="alert">
      <strong>Well done!</strong> You successfully read this important alert message.
    </div>
    <div class="alert alert-info" role="alert">
      <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>
    <div class="alert alert-warning" role="alert">
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-danger" role="alert">
      <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </div>

### Dismissible alerts

Build on any alert by adding an optional `.alert-dismissible` and close button.

#### Ensure proper behavior across all devices

Be sure to use the `<button>` element with the `data-dismiss="alert"` data attribute.

Warning! Better check yourself, you're not looking too good.

    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>

### Links in alerts

Use the `.alert-link` utility class to quickly provide matching colored links within any alert.

#### Ensure proper behavior across all devices

Be sure to use the `<button>` element with the `data-dismiss="alert"` data attribute.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

    <div class="alert alert-success" role="alert">
      <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message.</a>
    </div>
    <div class="alert alert-info" role="alert">
      <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
    </div>
    <div class="alert alert-warning" role="alert">
      <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
    </div>
    <div class="alert alert-danger" role="alert">
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>

### Sheet

Highly inspired from the `panel` component, the sheet will auto scale and have a relative position to ease children positioning.

Text...

    <div class="sheet">
      <p>Text...</p>
    </div>

### Sheet with header

## Header

Text...

    <div class="sheet">
      <div class="sheet-header">
        <h2>Header</h2>
      </div>
      <p>Text...</p>
    </div>

### Sheet with tabs

Text...

    <div class="sheet">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
      </ul>
      <div>
        <p>Text...</p>
      </div>
    </div>

### Sheet with stacked tabs

Text...

    <div class="sheet">
      <ul class="nav nav-tabs">
        <li><a href="#">Tab 1</a></li>
        <li class="active"><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li class="dropdown pull-right">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            More <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Tab 4</a></li>
            <li><a href="#">Tab 5</a></li>
          </ul>
        </li>
      </ul>
      <div>
        <p>Text...</p>
      </div>
    </div>

### Sheet with auto-stackable tabs

#### Plugin dependency

This component requires customized bootstrapStackable JS plugin provided by the bootstrap-bookingsync-sass gem.

Text...

Text...

Text...

    <div class="sheet">
      <ul class="nav nav-tabs" data-toggle="stackable"
          data-target=".stackable-dropdown">
        <li><a href="#">Tab 1</a></li>
        <li class="active"><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
        <li><a href="#">Tab 6</a></li>
        <li><a href="#">Tab 7</a></li>
        <li><a href="#">Tab 8</a></li>
        <li><a href="#">Tab 9</a></li>
        <li><a href="#">Tab 10</a></li>
        <li><a href="#">Tab 11</a></li>
        <li><a href="#">Tab 12</a></li>
        <li><a href="#">Tab Last</a></li>
        <li class="dropdown pull-right stackable-dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            More <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
          </ul>
        </li>
      </ul>
      <div>
        <p>Text...</p>
      </div>
    </div>

### Sheet with alerts

Well done! You successfully read this important alert message.

Text...

Well done! You successfully read this important alert message.

Text...

Well done! You successfully read this important alert message.

    <div class="sheet">
      <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
      <p>Text...</p>
      <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
      <p>Text...</p>
      <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
    </div>

### Chosen Select

#### External dependency

This component requires the Chosen library.

Custom styles for select boxes provided by Chosen.

Destination
Destination

    <div class="select">
      <div class="form-group">
        <label for="destination">Destination</label>
        <select class="form-control chosen">
          <option value=""></option>
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
          <option value="Four">Four</option>
        </select>
      </div>
    </div>

    <div class="select">
      <div class="form-group">
        <label for="destination">Destination</label>
        <select class="form-control chosen">
          <option value="One" selected>One (selected)</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
          <option value="Four">Four</option>
        </select>
      </div>
    </div>

### Chosen Multiple Select

#### External dependency

This component requires the Chosen library.

Custom styles for select boxes provided by Chosen.

Destination
Destination

    <div class="select">
      <div class="form-group">
        <label for="destination">Destination</label>
        <select class="form-control chosen" multiple>
          <option value=""></option>
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
          <option value="Four">Four</option>
        </select>
      </div>
    </div>

    <div class="select">
      <div class="form-group">
        <label for="destination">Destination</label>
        <select class="form-control chosen" multiple>
          <option value=""></option>
          <option value="One" selected>One (selected)</option>
          <option value="Two" selected>Two (selected)</option>
          <option value="Three">Three</option>
          <option value="Four">Four</option>
        </select>
      </div>
    </div>

### Switch

Turns checkboxes and radio buttons in toggle switches

#### Plugin dependency

This component requires customized bootstrapSwitch JS plugin provided by the bootstrap-bookingsync-sass gem.

#### Sizes

BootstrapSwitch plugin provides various size variants. The only variant currently supported by `bootstrap-bookingsync-sass` is the `switch-small`.

    <div class="make-switch switch-small">
      <input type="checkbox" checked>
    </div>

### Disabled Switch

#### Plugin dependency

This component requires customized bootstrapSwitch JS plugin provided by the bootstrap-bookingsync-sass gem.

#### Sizes

BootstrapSwitch plugin provides various size variants. The only variant currently supported by `bootstrap-bookingsync-sass` is the `switch-small`.

    <div class="make-switch switch-small">
      <input type="checkbox" checked disabled>
    </div>

### Modal

A rendered modal with header, body, and set of actions in the footer.

### Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec luctus felis. Nulla a lacus libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mollis tortor sodales libero euismod, eget suscipit arcu mollis. Nam nibh libero, tempus eu urna convallis, tempor efficitur ex. Donec molestie nibh ac luctus imperdiet. Nulla vitae vulputate ipsum. Phasellus porta gravida odio, in iaculis quam cursus et. Ut ac vehicula erat. Nulla sapien turpis, dapibus vel pellentesque sed, suscipit sit amet nibh. Pellentesque rhoncus nibh porttitor, posuere nulla quis, auctor nunc. Pellentesque fermentum tempor justo, a interdum nulla. Nullam lacus odio, posuere ut posuere hendrerit, semper non velit.

Cras sed consequat nunc. Phasellus sed sagittis nibh. Aliquam a vulputate risus. Vestibulum molestie bibendum dolor, vel blandit ipsum malesuada et. Praesent enim nibh, finibus vel luctus id, bibendum vitae eros. Aliquam vel semper diam. Cras elementum molestie eros, ac venenatis quam. Proin fermentum ante eros, mollis vestibulum eros consequat eu. Cras quis lorem vel metus hendrerit porttitor. Nunc hendrerit vitae nunc ut pellentesque. Etiam quis urna ac lorem eleifend ornare. Donec nibh ante, bibendum id pellentesque non, dignissim ut urna. Phasellus congue ultricies ipsum, ut luctus augue pulvinar nec.

#### Caution

The close button need to replace the `close` class with `btn-modal-close`.

### Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec luctus felis. Nulla a lacus libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mollis tortor sodales libero euismod, eget suscipit arcu mollis. Nam nibh libero, tempus eu urna convallis, tempor efficitur ex. Donec molestie nibh ac luctus imperdiet. Nulla vitae vulputate ipsum. Phasellus porta gravida odio, in iaculis quam cursus et. Ut ac vehicula erat. Nulla sapien turpis, dapibus vel pellentesque sed, suscipit sit amet nibh. Pellentesque rhoncus nibh porttitor, posuere nulla quis, auctor nunc. Pellentesque fermentum tempor justo, a interdum nulla. Nullam lacus odio, posuere ut posuere hendrerit, semper non velit.

Cras sed consequat nunc. Phasellus sed sagittis nibh. Aliquam a vulputate risus. Vestibulum molestie bibendum dolor, vel blandit ipsum malesuada et. Praesent enim nibh, finibus vel luctus id, bibendum vitae eros. Aliquam vel semper diam. Cras elementum molestie eros, ac venenatis quam. Proin fermentum ante eros, mollis vestibulum eros consequat eu. Cras quis lorem vel metus hendrerit porttitor. Nunc hendrerit vitae nunc ut pellentesque. Etiam quis urna ac lorem eleifend ornare. Donec nibh ante, bibendum id pellentesque non, dignissim ut urna. Phasellus congue ultricies ipsum, ut luctus augue pulvinar nec.

    <div class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="btn btn-sm btn-secondary-inverse btn-round btn-modal-close"
                    data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h3 class="modal-title">Modal title</h3>
          </div>
          <div class="modal-body">
            <p>...</p>
          </div>
          <div class="modal-footer">
            <div class="row">
              <div class="col-xs-6">
                <button type="button" class="btn btn-default btn-block" data-dismiss="modal">
                  Close
                </button>
              </div>
              <div class="col-xs-6">
                <button type="button" class="btn btn-primary btn-block">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>