underoos 1.0.0 → 1.1.0

data/app/views/underoos/styleguides/components/_carets.haml

@@ -1,28 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Carets <span>carets.sass</span>
-  %p Carets are used as icons for links. Apply them in <code>span</code> elements.
-.sg-subsection
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Caret
-        %th Markup
-    %tbody
-      %tr
-        %td <span class="caret"></span>
-        %td.html <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> or <code>&lt;span class="caret south"&gt;&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.caret</code> or <code>%span.caret.south</code>
-      %tr
-        %td <span class="caret north"></span>
-        %td.html <code>&lt;span class="caret north"&gt;&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.caret.north</code>
-      %tr
-        %td <span class="caret east"></span>
-        %td.html <code>&lt;span class="caret east"&gt;&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.caret.east</code>
-      %tr
-        %td <span class="caret west"></span>
-        %td.html <code>&lt;span class="caret west"&gt;&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.caret.west</code>
-

data/app/views/underoos/styleguides/components/_close.haml

@@ -1,20 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Close <span>close.sass</span>
-  %p(style="width:67%;") Use the close icon to dismiss modals and notifications. Coupled with Bootstrap's <a href="http://twitter.github.com/bootstrap/javascript.html#alerts">alert</a> or <a href="http://twitter.github.com/bootstrap/javascript.html#modals">modal</a> plugins, you can pass the <code>data-dismiss="modal|alert"</code> attribute to trigger dismissal.
-.sg-subsection
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Icon
-        %th Markup
-    %tbody
-      %tr
-        %td <a class="close" style="float:none;" href="#">&times;</a>
-        %td.html <code>&lt;a class="close" href="#"&gt;#{"&times;"}&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a.close(href="#") #{"&times;"}</code>
-      %tr(style="background-color:#333;")
-        %td <a class="close alt" style="float:none;" href="#">&times;</a>
-        %td.html <code>&lt;a class="close alt" href="#"&gt;#{"&times;"}&lt;/a&gt;</code>
-        %td.haml.hidden <code>%a.close.alt(href="#") #{"&times;"}</code>
-

data/app/views/underoos/styleguides/components/_decals.haml

@@ -1,40 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Decals <span>decals.sass</span>
-  %p(style="width:67%;") Decals are used to <span class="decal important">pop</span> information in a block of text. They are typically used with <code>inline</code> elements and wrapped in a <code>span</code> element.
-.sg-subsection
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Decal
-        %th Markup
-    %tbody
-      %tr
-        %td <span class="decal">Default</span>
-        %td.html <code>&lt;span class="decal"&gt;Default&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.decal Default</code>
-      %tr
-        %td <span class="decal info">Info</span>
-        %td.html <code>&lt;span class="decal info"&gt;Info&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.decal.info Info</code>
-      %tr
-        %td <span class="decal important">Important</span>
-        %td.html <code>&lt;span class="decal important"&gt;Important&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.decal.important Important</code>
-      %tr
-        %td <span class="decal success">Success</span>
-        %td.html <code>&lt;span class="decal success"&gt;Success&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.decal.success Success</code>
-      %tr
-        %td <span class="decal warning">Warning</span>
-        %td.html <code>&lt;span class="decal warning"&gt;Warning&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.decal.warning Warning</code>
-      %tr
-        %td <span class="decal danger">Danger</span>
-        %td.html <code>&lt;span class="decal danger"&gt;Danger&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.decal.danger Danger</code>
-      %tr
-        %td <span class="decal primary">Primary</span>
-        %td.html <code>&lt;span class="decal primary"&gt;Primary&lt;/span&gt;</code>
-        %td.haml.hidden <code>%span.decal.primary Primary</code>
-

data/app/views/underoos/styleguides/components/_dropdowns.haml

@@ -1,189 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Dropdowns <span>dropdowns.sass</span>
-  %p Requires <a href="http://twitter.github.com/bootstrap/javascript.html#dropdowns">Bootstrap's Dropdown plugin</a>.
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Basic Dropdowns
-    %p Add dropdown menus to just about any type of navigation list element by applying the attribute <code>data-toggle="dropdown"</code> to the target button.
-  .sg-twothird.push
-    .well
-      %nav
-        %ul.nav
-          %li.dropdown(style="display:inline-block; margin-right: 2em;")
-            %a.dropdown-toggle(href="#" data-toggle="dropdown") Dropdown<span class="caret"></span>
-            %ul.dropdown-menu
-              %li
-                %a(href="#") Subnav 1
-              %li
-                %a(href="#") Subnav 2
-              %li.divider
-              %li
-                %a(href="#") Subnav 3
-
-          %li.dropdown(style="display:inline-block;")
-            %a.dropdown-toggle(href="#" data-toggle="dropdown") Dropup<span class="caret"></span>
-            %ul.dropdown-menu.drop-up
-              %li
-                %a(href="#") Subnav 1
-              %li
-                %a(href="#") Subnav 2
-              %li.divider
-              %li
-                %a(href="#") Subnav 3
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav>
-            <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>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav
-            %ul.nav
-              %li.dropdown
-                %a(href="#" data-toggle="dropdown") Dropdown <span class="caret"></span>
-                %ul.dropdown-menu
-                  %li
-                    %a(href="#") Subnav 1
-                  %li
-                    %a(href="#") Subnav 2
-                  %li.divider
-                  %li
-                    %a(href="#") Subnav 3
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Add the <code>.drop-up</code> class to the <code>ul.dropdown-menu</code> to pop the menu above the target
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Button dropdowns
-    %p For elements outside of a list, typically in stand alone buttons, utilize the <code>button-group</code> structure for creating dropdowns.
-  .sg-twothird.push
-    .well.button-toolbar
-      %nav.button-group
-        %button.btn.dropdown-toggle(href="#" data-toggle="dropdown") Dropdown<span class="caret"></span>
-        %ul.dropdown-menu
-          %li
-            %a(href="#") Subnav 1
-          %li
-            %a(href="#") Subnav 2
-          %li.divider
-          %li
-            %a(href="#") Subnav 3
-
-      %nav.button-group
-        %button.btn.important.dropdown-toggle(href="#" data-toggle="dropdown") Important<span class="caret"></span>
-        %ul.dropdown-menu.drop-up
-          %li
-            %a(href="#") Subnav 1
-          %li
-            %a(href="#") Subnav 2
-          %li.divider
-          %li
-            %a(href="#") Subnav 3
-      %nav.button-group
-        %button.btn.success.dropdown-toggle(href="#" data-toggle="dropdown") Success<span class="caret"></span>
-        %ul.dropdown-menu
-          %li
-            %a(href="#") Subnav 1
-          %li
-            %a(href="#") Subnav 2
-          %li.divider
-          %li
-            %a(href="#") Subnav 3
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav class="button-group">
-            <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret">
-            <ul class="dropdown-menu">
-              ...
-            </ul>
-          </nav>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav.button-group
-            %button.btn.dropdown-toggle(data-toggle="dropdown") Dropdown<span class="caret"></span>
-            %ul.dropdown-menu
-              ...
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Split button dropdowns
-    %p Building on the <code>button-group</code> structure, create split buttons where there is action on the left button and contextual menu items under the caret to the right.
-  .sg-twothird.push
-    .well.button-toolbar
-      %nav.button-group
-        %button.btn(href="#") Action
-        %button.btn.dropdown-toggle(href="#" data-toggle="dropdown") <span class="caret split"></span>
-        %ul.dropdown-menu
-          %li
-            %a(href="#") Subnav 1
-          %li
-            %a(href="#") Subnav 2
-          %li.divider
-          %li
-            %a(href="#") Subnav 3
-      %nav.button-group
-        %button.btn.important(href="#") Action
-        %button.btn.important.dropdown-toggle(href="#" data-toggle="dropdown") <span class="caret split"></span>
-        %ul.dropdown-menu.drop-up
-          %li
-            %a(href="#") Subnav 1
-          %li
-            %a(href="#") Subnav 2
-          %li.divider
-          %li
-            %a(href="#") Subnav 3
-      %nav.button-group
-        %button.btn.success(href="#") Action
-        %button.btn.success.dropdown-toggle(href="#" data-toggle="dropdown") <span class="caret split"></span>
-        %ul.dropdown-menu
-          %li
-            %a(href="#") Subnav 1
-          %li
-            %a(href="#") Subnav 2
-          %li.divider
-          %li
-            %a(href="#") Subnav 3
-
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav class="button-group">
-            <button class="btn" href="#">Action</button>
-            <button class="btn dropdown-toggle" data-toggle="dropdown">
-              <span class="caret split"></span>
-            </button>
-            <ul class="dropdown-menu">
-              ...
-            </ul>
-          </nav>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav.button-group
-            %button.btn(href="#") Action
-            %button.btn.dropdown-toggle(data-toggle="dropdown")
-              %span.caret.split
-            %ul.dropdown-menu
-              ...
-
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Add the <code>.split</code> class to the caret <code>&lt;span&gt;</code> to center within the button
-    .notification.important.fade.in
-      %p <strong>WTF: IE 7!</strong> Out of the box, dropdowns utilize <code>visuallyhidden</code> when hiding their content instead of <code>display:none</code>. This ensures the content is available to <a href="http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/">screen readers</a>. If you must support IE 7, remove the mixin for <code>visuallyhidden</code> and uncomment <code>display:none</code>. The <code>visuallyhidden</code> mixin works fine for modern browsers and IE8+
-
-

data/app/views/underoos/styleguides/components/_media.haml

@@ -1,78 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Media <span>media.sass</span>
-
-.sg-subsection
-  .sg-half.pull
-    %h4 Media grid
-    %p Media items within a grid, provide a simple way for showcasing images, video and other media items.
-  .sg-half.push
-    %h4 Media item
-    %p With some additional markup, it's simple to create more complex media containers to showcase more information.
-
-.sg-subsection
-  .sg-half.pull
-    .well
-      %nav
-        %ul.media-grid
-          -(1..4).each do |media|
-            %li.sg-half
-              %a.media-item(href="#")
-                %img(src="http://placehold.it/260x180" alt="alt")
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav>
-            <ul class="media-grid">
-              <li class="col-half">
-                <a class="media-item" href="#">
-                  <img alt="alt" src="http://placehold.it/260x180">
-                </a>
-              </li>
-              ...
-            </ul>
-          </nav>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav
-            %ul.media-grid
-              %li.col-half
-                %a.media-item(href="#")
-                  %img(alt="alt" src="http://placehold.it/260x180")
-
-  .sg-half.push
-    .well
-      .media-item
-        %img(src="http://placehold.it/540x180" alt="alt")
-        %section.caption
-          %h5 This is a title
-          %p=@lorem_sm
-          %footer(style="margin-top:1.2em;")
-            %button.btn(href="#") Action
-            %button.btn(href="#") Cancel
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <div class="media-item">
-            <img alt="alt" src="http://placehold.it/460x180">
-            <section class="caption">
-              ...
-            </section>
-          </div>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          .media-item
-            %img(alt="alt" src="http://placehold.it/260x180")
-            %section.caption
-              ...
-
-.sg-subsection
-  .sg-half.pull
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Define the column span on the list item for grid settings
-  .sg-half.push
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Include a <code>caption</code> class after the media for additional padding
-

data/app/views/underoos/styleguides/components/_modals.haml

@@ -1,42 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Modals <span>modals.sass</span>
-  .sg-onethird.pull
-    %p Modals utilize <a href="http://twitter.github.com/bootstrap/javascript.html#modals">Bootstrap's Modal plugin</a>. You can control various options of how modals are shown based on attributes set in the trigger or the modal markup itself.
-    %br
-    %p We do not include any styles for the contents of a modal. This is better suited for other components or custom layouts within the application.
-  .sg-twothird.push
-    .well
-      %button.btn.primary(data-toggle="modal" href="#modal") Launch Modal
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <!-- Modal Trigger Button -->
-          <button class="btn important" data-toggle="modal" href="#modal_name"></button>
-
-          <!-- Modal Wrapper -->
-          <div id="modal_name" class="modal fade" data-backdrop="true" data-keyboard="true">
-            ...
-            <a class="close" data-dismiss="modal">&times;</a>
-          </div>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          <!-- Modal Trigger Button -->
-          %button.btn.important(data-toggle="modal" href="#modal_name")
-
-          <!-- Modal Wrapper -->
-          #modal_name.modal.fade(data-backdrop="true" data-keyboard="true")
-            ...
-            %a.close(data-dismiss="modal") &times;
-#modal.modal.fade(data-backdrop="true" data-keyboard="true")
-  .notification
-    %header
-      %h3.heading Notification within a Modal
-    %section
-      %p=@lorem
-    %footer.footer-right
-      %button.btn.important(href="#") Action
-      %button.btn.danger(href="#") Cancel
-    %a.close(href="#" data-dismiss="modal") &times;
-

data/app/views/underoos/styleguides/components/_nav-lists.haml

@@ -1,52 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Nav lists <span>nav-lists.sass</span>
-  .sg-onethird.pull
-    %p Nav lists build off of the same markup as <code>tabs</code> and <code>pills</code>. They are typically used in aside style navigation systems.
-    %br
-    %p To include a header, just supply the <code>li</code> with the class <code>.nav-header</code>
-  .sg-twothird.push
-    .well.lite
-      %nav
-        %ul.nav.nav-list
-          %li.nav-header List Header
-          %li
-            %a(href="#") List One
-          %li.active
-            %a(href="#") List Two
-          %li
-            %a(href="#") List Three
-          %li.nav-header Another List Header
-          %li
-            %a(href="#") List Four
-          %li
-            %a(href="#") List Five
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav>
-            <ul class="nav nav-list">
-              <li class="nav-header">List Header</li>
-              <li><a href="#">List 1</a></li>
-              <li><a href="#" class="active">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>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav>
-            %ul.nav.nav-list
-              %li.nav-header List Header
-              %li
-                %a(href="#") List 1
-              %li.active
-                %a(href="#") List 2
-              %li
-                %a(href="#") List 3
-              %li.nav-header Another List Header
-              %li
-                %a(href="#") List 4
-