underoos 1.0.0 → 1.1.0

data/app/assets/stylesheets/components/_accordions.sass

@@ -1,4 +1,42 @@
 
+//~
+// The accordion navigation system requires [Bootstrap's Collapse plugin](http://twitter.github.com/bootstrap/javascript.html#collapse).
+// They're used typically in navigation systems to toggle and reveal sections of content.
+// Accordions support multiple open sections or just single sections based on the `data` attributes set within the links.
+//
+// Notes:
+// - **Pro Tip!** Remove the `data-parent` attribute from the links to have multiple accordion items open at the same time
+//
+// Usage:
+//    <nav>
+//      <ul id="accordion_example">
+//        <li class="accordion-group">
+//          <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_1">Accordion Group 1</a>
+//          <section class="collapse" id="collapse_1">
+//            <article class="accordion-inner">
+//              <p>...</p>
+//            </article>
+//          </section>
+//        </li>
+//        <li class="accordion-group">
+//          <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_2">Accordion Group 2</a>
+//          <section class="collapse" id="collapse_2">
+//            <article class="accordion-inner">
+//              <p>...</p>
+//            </article>
+//          </section>
+//        </li>
+//        <li class="accordion-group">
+//          <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_3">Accordion Group 3</a>
+//          <section class="collapse" id="collapse_3">
+//            <article class="accordion-inner">
+//              <p>...</p>
+//            </article>
+//          </section>
+//        </li>
+//      </ul>
+//    </nav>
+
 // Typically the `li`
 .accordion-group
   border: 1px solid $component_border

data/app/assets/stylesheets/components/_breadcrumbs.sass

@@ -1,15 +1,25 @@
 
+//~
+// Apply the `.breadcrumb` class to the `ol` or `ul` element to provide linkable
+// references to nested sections within the application. Utilize a `span.divider`
+// for separation of links. The list should contain the `.nav` class.
+//
+// Usage:
+//    <nav>
+//      <ol class="nav breadcrumb">
+//        <li><a href="#">Level 1 <span class="divider">/</span></a></li>
+//        <li><a href="#">Level 2 <span class="divider">/</span></a></li>
+//        <li><a href="#">Level 3 <span class="divider">/</span></a></li>
+//        <li class="active"><a href="#">Active</a></li>
+//      </ol>
+//    </nav>
+
 .breadcrumb > li
   +inline-block
   color: $component_normal
   font-weight: bold
-  &:after
-    content: " /"
-  &:last-child:after
-    content: ""
 
 .breadcrumb > li > a
-  display: inline
   color: $link_normal
 
 .breadcrumb > li > a:hover,
@@ -20,3 +30,7 @@
 .breadcrumb > .active > a:hover
   color: $component_normal
 
+.breadcrumb .divider
+  padding: 0 0.25em
+  color: $component_normal
+

data/app/assets/stylesheets/components/_button-groups.sass

@@ -1,4 +1,47 @@
 
+//~ Button Groups & Toolbars
+//
+// Use button groups to join multiple buttons together as one composite component.
+// Build them with a series of `<a>` or `<button>` elements.
+//
+// Building off of the button group concept, combine multiple `.button-group`
+// elements under a `.button-toolbar` container to form a navigation system.
+//
+// Utilizing [Bootstrap's Button plugin](http://twitter.github.com/bootstrap/javascript.html#buttons),
+// you can control a button group or toolbars states by utilizing the `data-toggle` attribute.
+// Passing either `buttons-checkbox` or `buttons-radio` will allow buttons within a group to
+// behave similar to their `input` counterparts.
+//
+// Notes:
+// - **Heads Up!** When creating custom buttons (i.e. `btn`), add the necessary overrides within `button-groups.sass` file
+//
+// Usage:
+//    <!-- Button Group -->
+//    <nav class="button-group" data-toggle="buttons-radio">
+//      <a class="btn" href="#">Left</a>
+//      <a class="btn active" href="#">Middle 1</a>
+//      <a class="btn" href="#">Middle 2</a>
+//      <a class="btn" href="#">Right</a>
+//    </nav>
+//    <br />
+//
+//    <!-- Button Toolbar -->
+//    <section class="button-toolbar" data-toggle="buttons-checkbox">
+//      <nav class="button-group">
+//        <a class="btn" href="#">1</a>
+//        <a class="btn" href="#">2</a>
+//        <a class="btn" href="#">3</a>
+//      </nav>
+//      <nav class="button-group">
+//        <a class="btn active" href="#">4</a>
+//      </nav>
+//      <nav class="button-group">
+//        <a class="btn" href="#">5</a>
+//        <a class="btn" href="#">6</a>
+//        <a class="btn" href="#">7</a>
+//      </nav>
+//    </section>
+
 // Settings for button groups and toolbars
 .button-group
   +clearfixer

data/app/assets/stylesheets/components/_carets.sass

@@ -1,11 +1,20 @@
 
+//~
+// Carets are used as icons for links.
+// They are generally applied within `span` elements.
+//
+// Caret                             | Markup
+// ----------------------------------|---------------------------
+// <span class="caret"></span>       | `<span class="caret"></span>` or `class="caret south"`
+// <span class="caret north"></span> | `<span class="caret north"></span>`
+// <span class="caret east"></span>  | `<span class="caret east"></span>`
+// <span class="caret west"></span>  | `<span class="caret west"></span>`
+
 .caret
   +inline-block
   border-width: 4px
   border-style: solid
   border-color: $link_normal transparent transparent transparent
-  content: "\2193"
-  text-indent: -999em
   width: 0
   height: 0
   vertical-align: top
@@ -21,4 +30,6 @@
     margin-left: -5px
   &.split
     margin-left: 0
+    @if $legacy-support-for-ie
+      *vertical-align: auto
 

data/app/assets/stylesheets/components/_carousels.sass

@@ -1,4 +1,36 @@
 
+//~
+// Carousels are used for displaying multiple media items in a slideshow fashion.
+// Along with the media, they can contain an optional `.carousel-caption` element
+// for displaying information about the media. The indicators are populated by
+// the `carousel.js` file.
+//
+// Warnings:
+// - **Warning!** The carousel JavaScript plugin is not yet available
+
+//
+// Notes:
+// - **Heads Up!** Carousels require the `carousel` plugin and `bindable` javascript files
+//
+// Usage:
+//    <section class="carousel" data-bindable="carousel">
+//      <nav class="carousel-controls"></nav>
+//      <section class="carousel-inner">
+//        <article class="carousel-panel">
+//          <figure class="carousel-figure">
+//            <img src="http://placehold.it/710x350/ff00ff/ffffff" alt="img"/>
+//            <figcaption class="carousel-caption">
+//              <h2>Panel 1</h2>
+//            </figcaption>
+//          </figure>
+//        </article>
+//        <article class="carousel-panel">
+//          <figure class="carousel-figure">
+//            <img src="http://placehold.it/710x350/666666/ffffff" alt="img"/>
+//          </figure>
+//        </article>
+//      </section>
+//    </section>
 .carousel
   +clearfixer
 

data/app/assets/stylesheets/components/_close.sass

@@ -1,6 +1,19 @@
 
-// The "x" close button used in messaging systems.
-// In your markup use `×` for the content
+//~
+// Use the close icon to dismiss modals and notifications.
+//
+// Coupled with Bootstrap's [alert](http://twitter.github.com/bootstrap/javascript.html#alerts)
+// or [modal](http://twitter.github.com/bootstrap/javascript.html#modals) plugins, you can pass
+// the `data-dismiss="modal|alert"` attribute to trigger dismissal.
+//
+// Close Icon                                | Markup
+// ----------------------------------------- | ---------------------------
+// <a class="close" href="#">&times;</a>     | `<a class="close" href="#">&times;</a>`
+// <a class="close alt" href="#">&times;</a> | `<a class="close alt" href="#">&times;</a>` (_for use on darker backgrounds_)
+//
+// Notes:
+// - **Pro Tip!** In your markup use `&times;` for the content of the close icon
+
 .close
   +font-size(20)
   +opacity(0.3)

data/app/assets/stylesheets/components/_components.sass

@@ -0,0 +1,28 @@
+
+//~ # Components
+// Components are common patterns used in many applications but are not defined as base element tags.
+// The modules are used as a starting point and helps define the markup structure in use.
+
+// imports all components, use wisely..
+@import carets
+@import close
+@import decals
+@import wells
+@import dropdowns
+@import tabs
+@import pills
+@import nav-lists
+@import breadcrumbs
+@import pagination
+@import accordions
+@import paddles
+@import button-groups
+@import navbars
+@import tooltips
+@import popovers
+@import progress-bars
+@import notifications
+@import modals
+@import carousels
+@import media
+

data/app/assets/stylesheets/components/_decals.sass

@@ -1,4 +1,18 @@
 
+//~
+// Decals are used to <span class="decal important">POP</span> information in a block of text.
+// They are typically used with inline elements.
+//
+// Decal                                          | Markup
+// ---------------------------------------------- | ---------------------------
+// <span class="decal">Default</span>             | `<span class="decal">Default</span>`
+// <span class="decal info">Info</span>           | `<span class="decal info">Info</span>`
+// <span class="decal important">Important</span> | `<span class="decal important">Important</span>`
+// <span class="decal success">Success</span>     | `<span class="decal success">Success</span>`
+// <span class="decal warning">Warning</span>     | `<span class="decal warning">Warning</span>`
+// <span class="decal danger">Danger</span>       | `<span class="decal danger">Danger</span>`
+// <span class="decal primary">Primary</span>     | `<span class="decal primary">Primary</span>`
+
 .decal
   background-color: $standard
   border-radius: $radii

data/app/assets/stylesheets/components/_dropdowns.sass

@@ -1,4 +1,85 @@
 
+//~
+// Apply the `data-toggle="dropdown"` attribute to a target link or button, then structure a dropdown navigation
+// under a `ul.dropdown-menu`. Within the menu item, there should be a listing of links and optional dividers.
+//
+// Dropdown's utilize a `visuallyhidden` and `visuallyshown` technique rather than a `display: none|block`
+// to allow screen readers to still discover the inner content.
+//
+// Dropdown's require [Bootstrap's Dropdown plugin](http://twitter.github.com/bootstrap/javascript.html#dropdowns).
+//
+// When the target link is floated right, the dropdown will automatically align it's dropdown menu accordingly.
+// Dropdowns are designed to work with `tabs`, `pills`, `navbars`, `button-groups` and `split buttons`.
+//
+// For elements outside of a list, typically in stand alone buttons, utilize
+// the `button-group` structure for creating dropdowns. Split button dropdowns
+// allow an action on the left while the dropdown on the right can be used
+// for contextual menu items.
+//
+// Notes:
+// - **Pro Tip!** Add the `.drop-up` class to the `.dropdown-menu` to pop the menu above the target
+// - **Pro Tip!** For split button dropdowns, add the `.split` class to the caret `<span>` to center within the button
+//
+// Usage:
+//    <section class="button-toolbar">
+//
+//      <!-- Basic dropdown with typical menu structure -->
+//      <nav class="button-group">
+//        <ul class="nav">
+//          <li class="dropdown">
+//            <a href="#" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
+//            <ul class="dropdown-menu">
+//              <li><a href="#">Subnav 1</a></li>
+//              <li><a href="#">Subnav 2</a></li>
+//              <li class="divider"></li>
+//              <li><a href="#">Subnav 3</a></li>
+//            </ul>
+//          </li>
+//        </ul>
+//      </nav>
+//
+//      <!-- Button Dropdowns -->
+//      <nav class="button-group">
+//        <button class="btn dropdown-toggle" data-toggle="dropdown">Default<span class="caret"></span></button>
+//        <ul class="dropdown-menu">
+//          <li><a href="#">Subnav 1</a></li>
+//          <li><a href="#">Subnav 2</a></li>
+//        </ul>
+//      </nav>
+//      <nav class="button-group">
+//        <button class="btn success dropdown-toggle" data-toggle="dropdown">Success<span class="caret"></span></button>
+//        <ul class="dropdown-menu">
+//          <li><a href="#">Subnav 1</a></li>
+//          <li><a href="#">Subnav 2</a></li>
+//        </ul>
+//      </nav>
+//      <nav class="button-group">
+//        <button class="btn danger dropdown-toggle" data-toggle="dropdown">Danger Dropup<span class="caret"></span></button>
+//        <ul class="dropdown-menu drop-up">
+//          <li><a href="#">Subnav 1</a></li>
+//          <li><a href="#">Subnav 2</a></li>
+//        </ul>
+//      </nav>
+//
+//      <!-- Split Button Dropdowns -->
+//      <nav class="button-group">
+//        <button class="btn important">Action</button>
+//        <button class="btn important dropdown-toggle" data-toggle="dropdown"><span class="caret split"></span></button>
+//        <ul class="dropdown-menu">
+//          <li><a href="#">Subnav 1</a></li>
+//          <li><a href="#">Subnav 2</a></li>
+//        </ul>
+//      </nav>
+//      <nav class="button-group">
+//        <button class="btn warning">Warning</button>
+//        <button class="btn warning dropdown-toggle" data-toggle="dropdown"><span class="caret split"></span></button>
+//        <ul class="dropdown-menu">
+//          <li><a href="#">Subnav 1</a></li>
+//          <li><a href="#">Subnav 2</a></li>
+//        </ul>
+//      </nav>
+//    </section>
+
 .dropdown
   position: relative
 
@@ -13,10 +94,8 @@
 .dropdown.open .caret
   border-top-color: $link_hover
 
-// To get IE7 support, comment out +visuallyhidden and uncomment display:none
 .dropdown-menu
   +visuallyhidden
-  // display: none
   +box-shadow($drop_dark)
   background-clip: padding-box
   background-color: $body_bg
@@ -38,6 +117,8 @@
   padding: 0.3em 1em
   clear: both
   white-space: nowrap
+  @if $legacy-support-for-ie
+    *padding-left: 0
 
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
@@ -58,18 +139,21 @@
   height: 1px
   overflow: hidden
 
+@if $legacy-support-for-ie
+  .dropdown.open
+    *z-index: $zindex_dropdown
+
 // Open state for the dropdown
 .dropdown.open .dropdown-toggle
   color: $link_hover
 
-
 .dropdown.open .dropdown-menu,
 .typeahead.dropdown-menu,
 .button-group.open .dropdown-menu
   +visuallyshown
   display: block
   position: absolute
-  clip: initial
+  clip: inherit
   border: 1px solid $component_border
   padding: 0.3em 0
   &.drop-up

data/app/assets/stylesheets/components/_media.sass

@@ -1,4 +1,40 @@
 
+//~ Media Items
+// Media items provide a simple way for showcasing images, video
+// and other media items as static media or clickable links. Include
+// a `.caption` element when an area is needed to describe the figure.
+//
+// The media grid contains some basic settings for layout, but a more
+// structured layout is intended for the grid framework in use with
+// the application.
+//
+// Notes:
+// - **Pro Tip!** Define the column span class on the `<li>` for grid layouts
+//
+// Usage:
+//    <nav>
+//      <ul class="media-grid">
+//        <li>
+//          <figure class="media-item">
+//            <img alt="alt" src="http://placehold.it/260x180">
+//            <figcaption class="caption">
+//              <h5>Media Item</h5>
+//              <p>With a caption copy</p>
+//              <footer style="margin-top:1.2em;">
+//                <button class="btn">Action</button>
+//              </footer>
+//            </figcaption>
+//          </figure>
+//        </li>
+//        <li>
+//          <a class="media-item" href="#"><img alt="alt" src="http://placehold.it/260x180"></a>
+//        </li>
+//        <li>
+//          <a class="media-item" href="#"><img alt="alt" src="http://placehold.it/260x180"></a>
+//        </li>
+//      </ul>
+//    </nav>
+
 .media-grid
   +box-sizing(border-box)
   +clearfixer

data/app/assets/stylesheets/components/_modals.sass

@@ -1,4 +1,33 @@
 
+//~
+// Modals utilize [Bootstrap's Modal plugin](http://twitter.github.com/bootstrap/javascript.html#modals).
+// Control various options of how modals are shown based on attributes set
+// in the trigger or the modal markup itself (preferred).
+//
+// Styles are not included for the contents of a modal. This is better suited
+// for other components or custom layouts within the application.
+//
+// Usage:
+//    <!-- Modal Trigger Button -->
+//    <a class="btn important" data-toggle="modal" href="#modal_name">Launch Modal</a>
+//
+//    <!-- Modal Wrapper -->
+//    <div id="modal_name" class="modal fade" data-backdrop="true" data-keyboard="true">
+//      <div class="notification">
+//        <header class="notify-header">
+//          <h3 class="notify-heading">Notification within a Modal</h3>
+//        </header>
+//        <section class="notify-content">
+//          <p>~lorem_medium</p>
+//        </section>
+//        <footer class="notify-footer notify-right">
+//          <button class="btn important">Action</button>
+//          <button class="btn danger">Cancel</button>
+//        </footer>
+//        <a class="close" data-dismiss="modal" href="#">×</a>
+//      </div>
+//    </div>
+
 .modal-backdrop
   +transition(opacity $speed)
   background-color: $body_bg