underoos 1.0.0 → 1.1.0

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

@@ -1,4 +1,30 @@
 
+//~
+// Popovers utilize [Bootstrap's Popover plugin](http://twitter.github.com/bootstrap/javascript.html#popovers).
+// They are similar to the tool tip plugin and also require
+// [Bootstrap's Tooltip plugin](http://twitter.github.com/bootstrap/javascript.html#tooltips)
+// to be included as well.
+//
+// Popovers handle positions for
+// <a href="#" rel="popover" data-placement="top" title="Top" data-content="This is a popover">top</a>,
+// <a href="#" rel="popover" data-placement="bottom" title="Bottom" data-content="This is a popover">bottom</a>,
+// <a href="#" rel="popover" data-placement="left" title="Left" data-content="This is a popover">left</a>, or
+// <a href="#" rel="popover" data-placement="right" title="Right" data-content="This is a popover">right</a>.
+// They require information set on a links data attributes.
+//
+// Attribute          | Values                        | Usage
+// ------------------ | ---------------------------   | ---------------------------
+// `rel`              | `popover`                     | The js identifier for the type of component
+// `data-placement`   | `top`,`bottom`,`left`,`right` | The direction to show based on the target
+// `title`            | _text_                        | The headline title for the popover
+// `data-content`     | _text_                        | The body copy for the popover
+//
+// Examples:
+//    <a rel="popover" data-placement="top" title="Top" data-content="...">Top</a>
+//
+// Notes:
+// - **Heads Up!** Popovers are opt in and will only be instantiated if called directly from JavaScript `$("a[rel=popover]").popover()`
+
 .popover
   display: none
   padding: 5px
@@ -7,6 +33,8 @@
   left: 0
   min-width: 280px
   z-index: $zindex_tips
+  @if $legacy-support-for-ie
+    *width: 280px
   &.top
     margin-top: -5px
   &.bottom

data/app/assets/stylesheets/components/_progress-bars.sass

@@ -1,17 +1,49 @@
 
+//~ Progress bars
+// Progress bars are used to display actions being performed by the user.
+// Utilize a bit of JavaScript to set the `width` of the `.progress > .bar`
+// to showcase it's status. They come in the standard status colors.
+//
+// Notes:
+// - **Pro Tip!** Click in the progress bar container to showcase the loading animation
+//
+// Usage:
+//    <div class="progress">
+//      <div class="bar" style="width:60%"></div>
+//    </div>
+//    <div class="progress info">
+//      <div class="bar" style="width:60%"></div>
+//    </div>
+//    <div class="progress important">
+//      <div class="bar" style="width:60%"></div>
+//    </div>
+//    <div class="progress success">
+//      <div class="bar" style="width:60%"></div>
+//    </div>
+//    <div class="progress warning">
+//      <div class="bar" style="width:60%"></div>
+//    </div>
+//    <div class="progress danger">
+//      <div class="bar" style="width:60%"></div>
+//    </div>
+//    <div class="progress primary">
+//      <div class="bar" style="width:60%"></div>
+//    </div>
+
 .progress
   +box-shadow($inset_dark)
   background-color: $body_bg
   border-radius: $radii
   overflow: hidden
   height: 1em
+  margin: 1em 0
 
 .progress .bar
   +box-sizing(border-box)
   +box-shadow(inset 0 1px 4px rgba($black, 0.3))
   +transition(width $speed)
   background-color: $standard
-  width: 0%
+  width: 0
   height: 1em
 
 .progress.info .bar

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

@@ -1,4 +1,80 @@
 
+//~
+// Tabs follow the same markup structure as other navigation elements.
+// Tabs like other navigation elements require the `.nav` class for
+// layout. Add `.nav .tabs` to a `ul` or `ol` element.
+//
+// ##### Togglable Tabs
+// To utilize a drop dead simple version of hiding and showing content
+// related to a tab navigation, utilize [Bootstrap's Tab plugin](http://twitter.github.com/bootstrap/javascript.html#tabs).
+// The base structure of tabs 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 tabs">
+//        <li class="active">
+//          <a data-toggle="tab" href="#tab_one">Tab One</a>
+//        </li>
+//        <li>
+//          <a data-toggle="tab" href="#tab_two">Tab Two</a>
+//        </li>
+//        <li class="dropdown">
+//          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab Three<span class="caret"></span></a>
+//          <ul class="dropdown-menu">
+//            <li>
+//              <a data-toggle="tab" href="#tab_three-1">Subnav 1</a>
+//            </li>
+//            <li>
+//              <a data-toggle="tab" href="#tab_three-2">Subnav 2</a>
+//            </li>
+//          </ul>
+//        </li>
+//      </ul>
+//    </nav>
+//    <!-- Tabable Content -->
+//    <section class="tab-content" style="margin-top:1.25em;">
+//      <article class="tab-pane active" id="tab_one">
+//        <p>Tab <span class="decal primary">one</span> content</p>
+//      </article>
+//      <article class="tab-pane" id="tab_two">
+//        <p>Tab <span class="decal primary">two</span> content</p>
+//      </article>
+//      <article class="tab-pane" id="tab_three-1">
+//        <p>Tab <span class="decal primary">three</span>: subnav <span class="decal primary">1</span> content</p>
+//      </article>
+//      <article class="tab-pane" id="tab_three-2">
+//        <p>Tab <span class="decal primary">three</span>: subnav <span class="decal primary">2</span> content</p>
+//      </article>
+//    </section>
+
+//~
+// #### Stacked Tabs
+// Stack tabs by adding the class `.stacked` to the `.tabs` element.
+//
+// Usage:
+//    <nav>
+//      <ul class="nav tabs stacked">
+//        <li class="active">
+//          <a href="#">Tab One</a>
+//        </li>
+//        <li class="dropdown">
+//          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab 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="#">Tab Three</a>
+//        </li>
+//      </ul>
+//    </nav>
+
 // Default Tabs
 .tabs
   border-bottom: 1px solid $component_border_alt
@@ -64,6 +140,9 @@
 
 .tabs.stacked .caret
   float: right
+  @if $legacy-support-for-ie
+    *margin: -1.5em 10px 0 0
+
 .tabs.stacked .active .caret
   border-top-color: $component_active
 

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

@@ -1,4 +1,30 @@
 
+//~
+// Tool tips utilize [Bootstrap's Tooltip plugin](http://twitter.github.com/bootstrap/javascript.html#tooltips).
+// You can control various options of how a tool tip is shown based on attributes set in the link.
+//
+// Styles are automatically generated based on the inverted colors of the body's
+// `background-color` and font `color`.
+//
+// Tooltips handle positions for
+// <a href="#" rel="tooltip" data-placement="top" title="Top">top</a>,
+// <a href="#" rel="tooltip" data-placement="bottom" title="Bottom">bottom</a>,
+// <a href="#" rel="tooltip" data-placement="left" title="Left">left</a>, or
+// <a href="#" rel="tooltip" data-placement="right" title="Right">right</a>.
+// They require information set on a links data attributes.
+//
+// Attribute          | Values                        | Usage
+// ------------------ | ---------------------------   | ---------------------------
+// `rel`              | `popover`                     | The js identifier for the type of component
+// `data-placement`   | `top`,`bottom`,`left`,`right` | The direction to show based on the target
+// `title`            | _text_                        | The copy for the tooltip
+//
+// Examples:
+//    <a rel="tooltip" data-placement="top" title="Top">Top</a>
+//
+// Notes:
+// - **Heads Up!** Tooltips are opt in and will only be instantiated if called directly from JavaScript `$("a[rel=tooltip]").tooltip()`
+
 .tooltip
   +font-size(12)
   +opacity(0)

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

@@ -1,4 +1,13 @@
 
+//~
+// Wells are used to contain components, forms or various elements.
+//
+// Usage:
+//    <div class="well">.well</div>
+//    <div class="well lite">.well.lite</div>
+//    <div class="well dark">.well.dark</div>
+//    <div class="well primary">.well.primary</div>
+
 .well
   +box-sizing(border-box)
   border: 1px solid $component_border

data/app/assets/stylesheets/layouts/_containers.sass

@@ -1,4 +1,16 @@
 
+//~
+// Containers are used to "contain" elements of content within a page or section.
+// All containers inject a [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/)
+// to clear any floats from interior elements.
+//
+// Class              | Usage
+// ------------------ | -----------------------------------
+// `.container`       | The default container is a fluid width container with a `max-width` set to the `$base_width` variable.
+// `.container.outer` | Adding the `.outer` class to a `container` adds left and right padding, which creates a little breathing room in fluid layouts from the browser's edges.
+// `.container.fluid` | Adding the `.fluid` class to a `container` will remove the `max-width` setting and allow the container to fill the browser window.
+// `.container.fixed` | Adding the `.fixed` class to a `container` will render it using fixed width pixels with no responsive behavior.
+
 .container
   +box-sizing(border-box)
   +clearfixer

data/app/assets/stylesheets/layouts/_layouts.sass

@@ -0,0 +1,5 @@
+
+//~ # Layouts
+// Layouts consist of various templates, containers, and structures
+// used by the application.
+

data/app/assets/stylesheets/layouts/_print.sass

@@ -1,5 +1,9 @@
 
-// A very basic print stylesheet based off http://html5boilerplate.com/
+//~
+// A very basic print stylesheet based off settings provided by
+// [HTML5 Boilerplate](http://html5boilerplate.com/).
+// Styles are associated with the `@media print` query.
+
 @media print
   *
     background: transparent !important

data/app/assets/stylesheets/layouts/_queries.sass

@@ -1,12 +1,15 @@
 
-// Mixin the container sizes
-@mixin resize_containers($base_value)
-  .container
-    max-width: $base_value * 1px
-    &.fluid, &.fixed
-      max-width: none
-    &.fixed
-      width: $base_value * 1px
+//~ Media queries
+// Default media queries are put into place and are tuned for a few components.
+// These should be adjusted based on the application's needs. Underoos rolls
+// mobile first, and overrides styles as the viewport becomes smaller.
+//
+// Media Query               | Usage
+// ------------------------- | -----------------------------------
+// `@media min-width:1200px` | Typically larger desktop screens
+// `@media max-width:768px`  | Typically portrait tablet
+// `@media max-width:480px`  | Typically landscape phones
+// `@media max-width:320px`  | Typically portrait phones
 
 // Large screens
 @media (min-width: 1200px)
@@ -106,13 +109,13 @@
       padding-left: 0.75em
       padding-right: 0.75em
 
-    .modal
-      position: absolute
-      margin: 0
-      top: 10px
-      left: 10px
-      right: 10px
-      width: auto
+  .modal
+    position: absolute
+    margin: 0
+    top: 10px
+    left: 10px
+    right: 10px
+    width: auto
 
 
 // Portrait mobile

data/app/assets/stylesheets/layouts/_upgrades.sass

@@ -1,64 +1,75 @@
 
+//~ Upgrade messaging
+// Responds to conditional tests in the head of the document around a threshold
+// for a version of Internet Explorer and/or JavaScript being disabled. If any
+// of these conditions are met, a message for either enabling JavaScript or
+// upgrading their browser version is displayed to the user.
+//
+// Examples:
+//    <!-- The head conditional -->
+//    <!doctype html>
+//    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+//    <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+//    <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+//    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+//
+//    <!-- The hidden section for the messaging -->
+//    <section class="upgrade-notifications">
+//      <a class="upgrade-close" data-dismiss="alert" href="#">×</a>
+//      <section class="upgrade-notification">
+//        <article class="lt-ie8-msg upgrade-container">
+//          <p>Messaging for IE version</p>
+//        </article>
+//        <article class="no-js-msg upgrade-container">
+//          <p>Messaging for no JavaScript</p>
+//        </article>
+//      </section>
+//    </section>
+//
+// Usage:
+//    <!-- Testing purposes only -->
+//    <button class="btn primary" href="#" id="underoos_upgrade_demo">Test Upgrade Message</button>
+
 // The main container for the upgrade notification
-#upgrade_notifications
-  display: none
+.upgrade-notifications
   color: $white
   font-weight: bold
+  display: none
   position: absolute
-  top: 10px
-  left: 10px
+  top: 0
+  right: 0
+  left: 0
   z-index: 99999
 
-// Settings for the icon
-#upgrade_notifications .upgrade-icon
-  background-color: $danger
-  border: 1px solid darken($danger, 10%)
-  cursor: pointer
-  font-size: 1em
-  line-height: 1
-  text-align: center
-  width: 1.2em
-  height: 1.2em
-
 // Settings for block message
-#upgrade_notifications .upgrade-notification
+.upgrade-notifications .upgrade-notification
   background-color: $danger
-  border: 1px solid darken($danger, 10%)
-  cursor: default
+  border: 1px solid darken($danger, 20%)
   font-size: 0.85em
   text-align: left
-  display: none
-  margin-top: 0.2em
   padding: 0.75em
-  position: relative
-  top: 0
-  left: 0
-  width: 200px
+
+.upgrade-notifications .upgrade-close
+  color: $white
+  font-size: 1.3em
+  display: block
+  float: right
+  margin-right: 1em
 
 // Make the links readable
-#upgrade_notifications .upgrade-notification a
+.upgrade-notifications .upgrade-notification a
   color: $white
   text-decoration: underline
 
-// Show the message on hover
-#upgrade_notifications .upgrade-icon:hover .upgrade-notification
-  display: block
-
 // Default all message containers to be hidden
-#upgrade_notifications .upgrade-container
+.upgrade-notifications .upgrade-container
   display: none
 
-// Space out multiple containers
-#upgrade_notifications .upgrade-container + .upgrade-container
-  margin-top: 1em
-
 // Show the upgrade notifications if a condition is met
-html.no-js #upgrade_notifications,
-html.lt-ie8 #upgrade_notifications
-  display: block
-
 // Show the correct notification container
-html.no-js #upgrade_notifications #no_js,
-html.lt-ie8 #upgrade_notifications #lt_ie8
+html.no-js .upgrade-notifications,
+html.lt-ie8 .upgrade-notifications,
+html.no-js .upgrade-notifications .no-js-msg,
+html.lt-ie8 .upgrade-notifications .lt-ie8-msg
   display: block
 

data/app/assets/stylesheets/mixins/_arrows.sass

@@ -1,5 +1,17 @@
 
-// Mixins for creating arrows on pseudo elements
+//~
+// Draws a directional arrow, typically used for the pseudo elements of `:before` or `:after`.
+// These are similar to carets, except they don't require an extra element inside the DOM.
+//
+// Mixin          | Params                   | Usage
+// ---------------|--------------------------|-------------------
+// `+arrow_north` | `$color:#000, $size:5px` | An arrow pointing up
+// `+arrow_south` | `$color:#000, $size:5px` | An arrow pointing down
+// `+arrow_east`  | `$color:#000, $size:5px` | An arrow pointing right
+// `+arrow_west`  | `$color:#000, $size:5px` | An arrow pointing left
+//
+// Notes:
+// - **Heads Up!** Arrows are positioned `absolute` by default so the host should be `relative` and don't forget to add `content: ""`
 
 @mixin _arrow
   position: absolute

data/app/assets/stylesheets/mixins/_clearfixins.sass

@@ -1,15 +1,29 @@
 
-// The [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/)
+//~
+// Clearfixins force a containers height to adjust when it contains floated children elements.
+//
+// There are two mixins available for fixing floats
+//
+// - `+clearfixer` The [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) utilizing pseudo elements to clear floats
+// - `+clearfix` Uses `overflow: hidden` to clear floats
+//
+// Generally, the micro clearfix (`+clearfixer`) is prefered and mixed into the parent container of floated items.
+//
+// Notes:
+// - **Pro Tip!** There are helper classes for `.clearfixer` and `.clearfix` which can be inserted
+//   into the DOM or used with `@extend`, it's prefered to mixin this into an element
+
 @mixin clearfixer
-  *zoom: 1
+  @if $legacy-support-for-ie
+    *zoom: 1
   &:before, &:after
     content: ""
     display: table
   &:after
     clear: both
 
-// The standard `clearfix` found in Compass
 @mixin clearfix
   overflow: hidden
-  *zoom: 1
+  @if $legacy-support-for-ie
+    *zoom: 1