underoos 1.0.0 → 1.1.0

data/app/assets/stylesheets/components/_nav-lists.sass

@@ -1,4 +1,24 @@
 
+//~ Nav lists
+// Nav lists are typically used in aside style navigation systems. They utilize
+// the same markup structure as `tabs` and `pills`. The list should contain
+// the `.nav` class.
+//
+// Notes:
+// - **Pro Tip!** To include a header, just supply the `li` with the class `.nav-header`
+//
+// Usage:
+//    <nav>
+//      <ul class="nav nav-list">
+//        <li class="nav-header">List Header</li>
+//        <li><a href="#">List 1</a></li>
+//        <li class="active"><a href="#">List 2</a></li>
+//        <li><a href="#">List 3</a></li>
+//        <li class="nav-header">Another List Header</li>
+//        <li><a href="#">List 4</a></li>
+//      </ul>
+//    </nav>
+
 // Nav List
 .nav-list > li > a
   border-radius: $radii

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

@@ -1,4 +1,68 @@
 
+//~
+// Typically used for application or page level navigation systems
+// Navbars can contain just about any type of navigation component,
+// search forms, button groups and drop downs.
+//
+// Navbars support responsive behavior, by adding a button with `data-toggle="collapse"
+// data-target="#target_id"`. Add the corresponding class `.nav-collapse`
+// and the id based on the target (`#target_id`) on the collapsable container.
+// Make sure to utilize styles contained within the media queries as well.
+//
+// Notes:
+// - **Pro Tip!** Add the `.fixed` class to the `.navbar` container to fix the navigation system to the top of the page
+// - **Pro Tip!** For a responsive navbar, include [Bootstrap's Collapse plugin](http://twitter.github.com/bootstrap/javascript.html#collapse) and add the necessary elements to the structure
+//
+// Warnings:
+// - **Warning!** It's a good idea to set a specific height for the navbar, this is not set in the default component
+//
+// Usage:
+//    <div class="navbar">
+//      <div class="navbar-inner">
+//        <div class="container">
+//          <a class="btn info btn-navbar" data-toggle="collapse" data-target="#collapse_example">
+//            <span class="icon-bar"></span>
+//            <span class="icon-bar"></span>
+//            <span class="icon-bar"></span>
+//          </a>
+//          <a class="brand" href="#">Brand</a>
+//          <nav class="nav-collapse" id="collapse_example">
+//            <ul class="nav">
+//              <li><a href="#">Link 1</a></li>
+//              <li class="active"><a href="#">Link 2</a></li>
+//              <li class="plain-text">Plain Text</li>
+//              <li class="dropdown">
+//                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
+//                <ul class="dropdown-menu">
+//                  <li><a href="#">Subnav 1</a></li>
+//                  <li><a href="#">Subnav 2</a></li>
+//                </ul>
+//              </li>
+//            </ul>
+//            <section class="pull-right">
+//              <form class="form-search">
+//                <ol>
+//                  <li>
+//                    <input class="search-query" name="test[searchbar]" placeholder="search" type="search">
+//                    <button class="btn primary" type="submit">Go</button>
+//                  </li>
+//                </ol>
+//              </form>
+//              <ul class="nav">
+//                <li class="dropdown">
+//                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
+//                  <ul class="dropdown-menu">
+//                    <li><a href="#">Subnav 1</a></li>
+//                    <li><a href="#">Subnav 2</a></li>
+//                  </ul>
+//                </li>
+//              </ul>
+//            </section>
+//          </nav>
+//        </div>
+//      </div>
+//    </div>
+
 .navbar
   overflow: visible
 
@@ -96,9 +160,6 @@
 .btn-navbar .icon-bar + .icon-bar
   margin-top: 3px
 
-.nav-collapse
-  -webkit-transform: translate3d(0, 0, 0)
-
 // Override the default collapsed state
 .nav-collapse.collapse
   height: auto

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

@@ -1,4 +1,75 @@
 
+//~
+// A basic notification is set on a container with the `.notification` class.
+// They come in the standard flavors for various types of alerts.
+// Notifications utilize [Bootstrap's alert plugin](http://twitter.github.com/bootstrap/javascript.html#alerts)
+// for closing a notification.
+//
+// Notes:
+// - **Pro Tip!** Add the class `.notify-right` to any element to right align text for block notifications
+//
+// Usage:
+//    <div class="notification fade in">
+//      <p><strong>Default!</strong> This is the default notification</p>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+//    <div class="notification info fade in">
+//      <p><strong>Info or Notice!</strong> Use this for general information</p>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+//    <div class="notification important fade in">
+//      <p><strong>Important!</strong> Something important is said here</p>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+//    <div class="notification success fade in">
+//      <p><strong>Success!</strong> Congratulations, you get a trophy</p>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+//    <div class="notification warning fade in">
+//      <p><strong>Warning!</strong> You're first and final</p>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+//    <div class="notification danger fade in">
+//      <p><strong>Danger or Error or Alert!</strong> Something bad happened here</p>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+//    <div class="notification primary fade in">
+//      <p><strong>Primary!</strong> The CI coloring for alerts</p>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+
+//~
+// #### Block Notifications
+// Block notifications are similar to the basic notification, in fact nothing
+// needs to change on the outer container. Just add a `.notify-header`,
+// `.notify-content` and/or `.notify-footer` to the internal markup to provide
+// more information around the notification.
+//
+// Usage:
+//    <div class="notification success fade in">
+//      <header class="notify-header">
+//        <h4 class="notify-heading">Block Notification</h4>
+//      </header>
+//      <section class="notify-content">
+//        <p>~lorem_medium</p>
+//      </section>
+//      <footer class="notify-footer">
+//        <button class="btn success">Action</button>
+//        <button class="btn danger">Cancel</button>
+//      </footer>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+//    <div class="notification danger fade in">
+//      <section class="notify-content">
+//        <p><strong>Yikes! This doesn't have a header and the footer is on the right!</strong> ~lorem_medium</p>
+//      </section>
+//      <footer class="notify-footer notify-right">
+//        <button class="btn success">Action</button>
+//        <button class="btn danger">Cancel</button>
+//      </footer>
+//      <a class="close" data-dismiss="alert" href="#">&times;</a>
+//    </div>
+
 // Base notification used for @extends
 .base-notification
   +background-darken-border($standard)
@@ -8,14 +79,18 @@
   margin: 1em 0
   a
     text-decoration: underline
-  header, footer, p
+  .notify-header,
+  .notify-content,
+  .notify-footer
     padding-right: 1.2em
-  header
+  .notify-header
     margin-bottom: 0.5em
-  footer
+  .notify-footer
     margin-top: 1.25em
-    &.footer-right
-      text-align: right
+  .notify-heading
+    +font-size(20)
+  .notify-right
+    text-align: right
   .close
     position: absolute
     top: 7px
@@ -30,30 +105,54 @@
   &.important
     +background-darken-border(lighten($important, 40%))
     color: $important
-    .heading
+    .notify-heading
       color: $important
   &.success
     +background-darken-border(lighten($success, 40%))
     color: $success
-    .heading
+    .notify-heading
       color: $success
   &.warning
     +background-darken-border(lighten($warning, 30%))
     color: darken($warning, 15%)
-    .heading
+    .notify-heading
       color: darken($warning, 15%)
   &.danger, &.error, &.alert
     +background-darken-border(lighten($danger, 40%))
     color: $danger
-    .heading
+    .notify-heading
       color: $danger
   &.primary
     +background-darken-border(lighten($primary, 40%))
     color: $primary
-    .heading
+    .notify-heading
       color: $primary
 
-// Flash messages container
+//~
+// #### Flash Notifications
+// Flash notifications enhance the `.notification` component by allowing them
+// to appear fixed above all other elements on the page. Wrap the notifications
+// within a `#flash_messages.flash-messages` container at the root of the body,
+// sprinkle a little JavaScript and you're ready to go.
+//
+// Adding different positional classes to the `.flash-messages` container will
+// allow them to appear in different quadrants of the viewport as seen below.
+//
+// Type              | Class                        | Usage
+// ----------------- | ---------------------------- | --------------------
+// Top               | `.flash-messages.top`        | Fixed to the top of the browser, spans the entire viewport (_the default_)
+// Bottom            | `.flash-messages.bottom`     | Fixed to the bottom of the browser, spans the entire viewport
+// Top left          | `.flash-messages.top-left`   | Upper left quadrant of the viewport, with a size of 25%
+// Top right         | `.flash-messages.top-right`  | Upper right quadrant of the viewport, with a size of 25%
+// Top center        | `.flash-messages.top-center` | Upper center quadrant of the viewport, with a size of 50%
+// Middle            | `.flash-messages.top-center` | Dead center baby, with a size of 50%
+//
+// Notes:
+// - **Pro Tip!** The `.flash-messages` container is flexible enough to allow any component to be injected
+//
+// Warnings:
+// - **Warning!** The JavaScript plugin for Flash notifications is not yet available
+
 .flash-messages,
 .flash-messages.top
   position: fixed
@@ -96,13 +195,10 @@
   right: 1.5em
 
 // Override some of the settings for full screen messages
-.flash-messages .notification,
-.flash-messages .pop-notification
+.flash-messages .notification
   margin: 0
 
 .flash-messages.top .notification,
-.flash-messages.top .pop-notification,
-.flash-messages.bottom .notification,
-.flash-messages.bottom .pop-notification
+.flash-messages.bottom .notification
   border-radius: 0
 

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

@@ -1,4 +1,30 @@
 
+//~
+// Paddles are commonly used in carousel or simple paging navigations.
+// The default set contains simple inline links represented as a group.
+//
+// To allow paddles to float on the sides of the container, apply the
+// `.prev` and `.next` classes to the containing paddles `li` element.
+//
+// Notes:
+// - **Pro Tip!** Add `.paddles-center` or `.paddles-right` on the `.paddles` element to adjust alignment for a group
+//
+// Usage:
+//    <nav>
+//      <ul class="paddles">
+//        <li> <a href="#">&larr; Previous</a> </li>
+//        <li> <a href="#">Next &rarr;</a> </li>
+//      </ul>
+//    </nav>
+//
+//    <!-- Aligned Paddles -->
+//    <nav style="margin-top:1.5em">
+//      <ul class="paddles">
+//        <li class="prev"><a href="#">&larr; Previous</a> </li>
+//        <li class="next"><a href="#">Next &rarr;</a> </li>
+//      </ul>
+//    </nav>
+
 .paddles
   +clearfixer
   list-style: none

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

@@ -1,15 +1,35 @@
 
+//~
+// Apply the `.pagination` class to the `ol` or `ul` element to
+// represent pagination navigation. The list should contain the `.nav` class.
+//
+// Notes:
+// - **Pro Tip** Add `.pagination-center` or `.pagination-right` on the `.pagination` container to change the alignment
+//
+// Usage:
+//    <nav>
+//      <ol class="nav pagination">
+//        <li class="disabled"><a href="#">&laquo;</a></li>
+//        <li><a href="#">1</a></li>
+//        <li class="active"><a href="#">2</a></li>
+//        <li><a href="#" rel="next">3</a></li>
+//        <li class="disabled"><a href="#">&hellip;</a></li>
+//        <li><a href="#">11</a></li>
+//        <li><a href="#">12</a></li>
+//        <li><a href="#">&raquo;</a></li>
+//      </ol>
+//    </nav>
+
 .pagination
   +clearfixer
 
 .pagination > li
-  display: inline
   float: left
 
 .pagination > li > a
   background-color: $component_bg
   border: 1px solid $component_border
-  border-right-width: 0
+  border-left-width: 0
   padding: 0.5em 0.75em
   &:hover
     background-color: $component_bg_hover
@@ -29,10 +49,10 @@
   color: $disabled_color
 
 .pagination > li:first-child > a
+  border-left-width: 1px
   border-radius: $radii 0 0 $radii
 .pagination > li:last-child > a
   border-radius: 0 $radii $radii 0
-  border-right-width: 1px
 
 .pagination-center
   text-align: center

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

@@ -1,4 +1,80 @@
 
+//~
+// Pills are similar to tabs, and follow the same markup structure as other
+// navigation elements. Pills like other navigation elements require the
+// `.nav` class for layout. Add `.nav .pills` to a `ul` or `ol` element.
+//
+// ##### Togglable Pills
+// To utilize a drop dead simple version of hiding and showing content
+// related to a pill navigation, utilize [Bootstrap's Tab plugin](http://twitter.github.com/bootstrap/javascript.html#tabs).
+// The base structure of pills doesn't change, except to include a few more
+// classes on the links and the `href` attribute the button will target.
+//
+// Usage:
+//    <nav>
+//      <ul class="nav pills">
+//        <li class="active">
+//          <a data-toggle="pill" href="#pill_one">Pill One</a>
+//        </li>
+//        <li>
+//          <a data-toggle="pill" href="#pill_two">Pill Two</a>
+//        </li>
+//        <li class="dropdown">
+//          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Pill Three<span class="caret"></span></a>
+//          <ul class="dropdown-menu">
+//            <li>
+//              <a data-toggle="pill" href="#pill_three-1">Subnav 1</a>
+//            </li>
+//            <li>
+//              <a data-toggle="pill" href="#pill_three-2">Subnav 2</a>
+//            </li>
+//          </ul>
+//        </li>
+//      </ul>
+//    </nav>
+//    <!-- Pillable Content -->
+//    <section class="pill-content" style="margin-top:1.25em;">
+//      <article class="pill-pane active" id="pill_one">
+//        <p>Pill <span class="decal primary">one</span> content</p>
+//      </article>
+//      <article class="pill-pane" id="pill_two">
+//        <p>Pill <span class="decal primary">two</span> content</p>
+//      </article>
+//      <article class="pill-pane" id="pill_three-1">
+//        <p>Pill <span class="decal primary">three</span>: subnav <span class="decal primary">1</span> content</p>
+//      </article>
+//      <article class="pill-pane" id="pill_three-2">
+//        <p>Pill <span class="decal primary">three</span>: subnav <span class="decal primary">2</span> content</p>
+//      </article>
+//    </section>
+
+//~
+// #### Stacked Pills
+// Stack pills by adding the class `.stacked` to the `.pills` element.
+//
+// Usage:
+//    <nav>
+//      <ul class="nav pills stacked">
+//        <li class="active">
+//          <a href="#">Pill One</a>
+//        </li>
+//        <li class="dropdown">
+//          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Pill Two<span class="caret"></span></a>
+//          <ul class="dropdown-menu">
+//            <li>
+//              <a href="#">Subnav 1</a>
+//            </li>
+//            <li>
+//              <a href="#">Subnav 2</a>
+//            </li>
+//          </ul>
+//        </li>
+//        <li>
+//          <a href="#">Pill Three</a>
+//        </li>
+//      </ul>
+//    </nav>
+
 // Default Pills
 .pills > li
   float: left
@@ -62,3 +138,7 @@
 .pill-content > .active
   +visuallyshown
 
+@if $legacy-support-for-ie
+  .pills.stacked .caret
+    *margin-left: 0.5em
+