bootstrap_leather 0.9.4 → 0.10.4

data/spec/dummy/app/views/pages/style_guide.html.haml

@@ -0,0 +1,801 @@
+- add_title 'Style Guide'
+/ Buttons=================================================
+.page-header
+  .row
+    .col-lg-12
+      %h2#buttons Buttons
+.row
+  .col-lg-7
+    %p.bs-component
+      %a.btn.btn-default{href: '#'} Default
+      %a.btn.btn-primary{href: '#'} Primary
+      %a.btn.btn-info{href: '#'} Info
+      %a.btn.btn-success{href: '#'} Success
+      %a.btn.btn-warning{href: '#'} Warning
+      %a.btn.btn-danger{href: '#'} Danger
+    %p.bs-component
+      %a.btn.btn-default.disabled{href: '#'} Default
+      %a.btn.btn-primary.disabled{href: '#'} Primary
+      %a.btn.btn-info.disabled{href: '#'} Info
+      %a.btn.btn-success.disabled{href: '#'} Success
+      %a.btn.btn-warning.disabled{href: '#'} Warning
+      %a.btn.btn-danger.disabled{href: '#'} Danger
+    %div{style: 'margin-bottom: 15px;'}
+      .btn-toolbar.bs-component{style: 'margin: 0;'}
+        .btn-group
+          %a.btn.btn-default{href: '#'} Default
+          %a.btn.btn-default.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+            %span.caret
+          %ul.dropdown-menu
+            %li
+              %a{href: '#'} Action
+            %li
+              %a{href: '#'} Another action
+            %li
+              %a{href: '#'} Something else here
+            %li.divider
+            %li
+              %a{href: '#'} Separated link
+        .btn-group
+          %a.btn.btn-primary{href: '#'} Primary
+          %a.btn.btn-primary.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+            %span.caret
+          %ul.dropdown-menu
+            %li
+              %a{href: '#'} Action
+            %li
+              %a{href: '#'} Another action
+            %li
+              %a{href: '#'} Something else here
+            %li.divider
+            %li
+              %a{href: '#'} Separated link
+        .btn-group
+          %a.btn.btn-info{href: '#'} Info
+          %a.btn.btn-info.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+            %span.caret
+          %ul.dropdown-menu
+            %li
+              %a{href: '#'} Action
+            %li
+              %a{href: '#'} Another action
+            %li
+              %a{href: '#'} Something else here
+            %li.divider
+            %li
+              %a{href: '#'} Separated link
+        .btn-group
+          %a.btn.btn-success{href: '#'} Success
+          %a.btn.btn-success.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+            %span.caret
+          %ul.dropdown-menu
+            %li
+              %a{href: '#'} Action
+            %li
+              %a{href: '#'} Another action
+            %li
+              %a{href: '#'} Something else here
+            %li.divider
+            %li
+              %a{href: '#'} Separated link
+        .btn-group
+          %a.btn.btn-warning{href: '#'} Warning
+          %a.btn.btn-warning.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+            %span.caret
+          %ul.dropdown-menu
+            %li
+              %a{href: '#'} Action
+            %li
+              %a{href: '#'} Another action
+            %li
+              %a{href: '#'} Something else here
+            %li.divider
+            %li
+              %a{href: '#'} Separated link
+    %p.bs-component
+      %a.btn.btn-primary.btn-lg{href: '#'} Large button
+      %a.btn.btn-primary{href: '#'} Default button
+      %a.btn.btn-primary.btn-sm{href: '#'} Small button
+      %a.btn.btn-primary.btn-xs{href: '#'} Mini button
+  .col-lg-5
+    %p.bs-component
+      %a.btn.btn-default.btn-lg.btn-block{href: '#'}
+        Block level
+        button
+    .bs-component{style: 'margin-bottom: 15px;'}
+      .btn-group.btn-group-justified
+        %a.btn.btn-default{href: '#'} Left
+        %a.btn.btn-default{href: '#'} Middle
+        %a.btn.btn-default{href: '#'} Right
+    .bs-component{style: 'margin-bottom: 15px;'}
+      .btn-toolbar
+        .btn-group
+          %a.btn.btn-default{href: '#'} 1
+          %a.btn.btn-default{href: '#'} 2
+          %a.btn.btn-default{href: '#'} 3
+          %a.btn.btn-default{href: '#'} 4
+        .btn-group
+          %a.btn.btn-default{href: '#'} 5
+          %a.btn.btn-default{href: '#'} 6
+          %a.btn.btn-default{href: '#'} 7
+        .btn-group
+          %a.btn.btn-default{href: '#'} 8
+          .btn-group
+            %a.btn.btn-default.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+              Dropdown
+              %span.caret
+            %ul.dropdown-menu
+              %li
+                %a{href: '#'} Dropdown link
+              %li
+                %a{href: '#'} Dropdown link
+              %li
+                %a{href: '#'} Dropdown link
+    .bs-component
+      .btn-group-vertical
+        %a.btn.btn-default{href: '#'} Button
+        %a.btn.btn-default{href: '#'} Button
+        %a.btn.btn-default{href: '#'} Button
+        %a.btn.btn-default{href: '#'} Button
+/ Typography==================================================
+.row
+  .col-lg-12
+    .page-header
+      %h2#typography Typography
+/ Headings
+.row
+  .col-lg-4
+    .bs-component
+      %h1 Heading 1
+      %h2 Heading 2
+      %h3 Heading 3
+      %h4 Heading 4
+      %h5 Heading 5
+      %h6 Heading 6
+      %p.lead
+        Vivamus sagittis lacus vel augue laoreet rutrum
+        faucibus dolor auctor.
+  .col-lg-4
+    .bs-component
+      %h2 Example body text
+      %p
+        Nullam quis risus eget
+        %a{href: '#'} urna mollis ornare
+        vel
+        eu leo. Cum sociis natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Nullam id dolor
+        id nibh ultricies vehicula.
+      %p
+        %small
+          This line of text is meant to be treated as fine
+          print.
+      %p
+        The following snippet of text is
+        = succeed '.' do
+          %strong
+            rendered as bold
+            text
+      %p
+        The following snippet of text is
+        = succeed '.' do
+          %em
+            rendered as italicized
+            text
+      %p
+        An abbreviation of the word attribute is
+        = succeed '.' do
+          %abbr{title: 'attribute'} attr
+  .col-lg-4
+    .bs-component
+      %h2 Emphasis classes
+      %p.text-muted
+        Fusce dapibus, tellus ac cursus commodo,
+        tortor mauris nibh.
+      %p.text-primary
+        Nullam id dolor id nibh ultricies
+        vehicula ut id elit.
+      %p.text-warning
+        Etiam porta sem malesuada magna mollis
+        euismod.
+      %p.text-danger
+        Donec ullamcorper nulla non metus auctor
+        fringilla.
+      %p.text-success
+        Duis mollis, est non commodo luctus,
+        nisi erat porttitor ligula.
+      %p.text-info
+        Maecenas sed diam eget risus varius blandit
+        sit amet non magna.
+/ Blockquotes
+.row
+  .col-lg-12
+    %h2#type-blockquotes Blockquotes
+.row
+  .col-lg-6
+    .bs-component
+      %blockquote
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Integer posuere erat a ante.
+        %small
+          Someone famous in
+          %cite{title: 'Source Title'}
+            Source
+            Title
+  .col-lg-6
+    .bs-component
+      %blockquote.blockquote-reverse
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Integer posuere erat a ante.
+        %small
+          Someone famous in
+          %cite{title: 'Source Title'}
+            Source
+            Title
+/ Table==================================================
+.row
+  .col-lg-12
+    .page-header
+      %h2#tables Tables
+    .bs-component
+      %table.table.table-striped.table-hover
+        %thead
+          %tr
+            %th Table Head
+            %th Column heading
+            %th Column heading
+        %tbody
+          %tr
+            %td Striped Rows
+            %td Column content
+            %td Column content
+          %tr
+            %td Striped Rows
+            %td Column content
+            %td Column content
+          %tr
+            %td Striped Rows
+            %td Column content
+            %td Column content
+          %tr
+            %td Striped Rows
+            %td Column content
+            %td Column content
+          %tr.active
+            %td Active
+            %td Column content
+            %td Column content
+          %tr.info
+            %td Info
+            %td Column content
+            %td Column content
+          %tr.success
+            %td Success
+            %td Column content
+            %td Column content
+          %tr.warning
+            %td Warning
+            %td Column content
+            %td Column content
+          %tr.danger
+            %td Danger
+            %td Column content
+            %td Column content
+/ Form===============================================
+.row
+  .col-lg-12
+    .page-header
+      %h2#forms Forms
+.row
+  .col-lg-6
+    .well.bs-component
+      %form.form-horizontal
+        %fieldset
+          %legend Legend
+          .form-group
+            %label.col-lg-2.control-label{for: 'inputEmail'} Email
+            .col-lg-10
+              %input#inputEmail.form-control{placeholder: 'Email', type: 'text'}
+          .form-group
+            %label.col-lg-2.control-label{for: 'inputPassword'} Password
+            .col-lg-10
+              %input#inputPassword.form-control{placeholder: 'Password', type: 'password'}
+                .checkbox
+                  %label
+                    %input{type: 'checkbox'}
+                      Checkbox
+          .form-group
+            %label.col-lg-2.control-label{for: 'textArea'} Textarea
+            .col-lg-10
+              %textarea#textArea.form-control{rows: '3'}
+              %span.help-block A longer block of help text that breaks onto a new line and may extend beyond one line.
+          .form-group
+            %label.col-lg-2.control-label Radios
+            .col-lg-10
+              .radio
+                %label
+                  %input#optionsRadios1{checked: '', name: 'optionsRadios', type: 'radio', value: 'option1'}
+                    Option one is this
+              .radio
+                %label
+                  %input#optionsRadios2{name: 'optionsRadios', type: 'radio', value: 'option2'}
+                    Option two can be something else
+          .form-group
+            %label.col-lg-2.control-label{for: 'select'} Selects
+            .col-lg-10
+              %select#select.form-control
+                %option 1
+                %option 2
+                %option 3
+                %option 4
+                %option 5
+              %br
+                %select.form-control{multiple: ''}
+                  %option 1
+                  %option 2
+                  %option 3
+                  %option 4
+                  %option 5
+          .form-group
+            .col-lg-10.col-lg-offset-2
+              %button.btn.btn-default{type: 'reset'}
+                Cancel
+              %button.btn.btn-primary{type: 'submit'}
+                Submit
+  .col-lg-4.col-lg-offset-1
+    %form.bs-component
+      .form-group
+        %label.control-label{for: 'focusedInput'}
+          Focused
+          input
+        %input#focusedInput.form-control{type: 'text', value: 'This is focused...'}
+        :javascript
+          $(function (){
+            $('#focusedInput').focus();
+          });
+      .form-group
+        %label.control-label{for: 'disabledInput'}
+          Disabled
+          input
+        %input#disabledInput.form-control{disabled: '', placeholder: 'Disabled input here...', type: 'text'}
+      .form-group.has-warning
+        %label.control-label{for: 'inputWarning'}
+          Input
+          warning
+        %input#inputWarning.form-control{type: 'text'}
+      .form-group.has-error
+        %label.control-label{for: 'inputError'}
+          Input
+          error
+        %input#inputError.form-control{type: 'text'}
+      .form-group.has-success
+        %label.control-label{for: 'inputSuccess'}
+          Input
+          success
+        %input#inputSuccess.form-control{type: 'text'}
+      .form-group
+        %label.control-label{for: 'inputLarge'}
+          Large
+          input
+        %input#inputLarge.form-control.input-lg{type: 'text'}
+      .form-group
+        %label.control-label{for: 'inputDefault'}
+          Default
+          input
+        %input#inputDefault.form-control{type: 'text'}
+      .form-group
+        %label.control-label{for: 'inputSmall'}
+          Small
+          input
+        %input#inputSmall.form-control.input-sm{type: 'text'}
+      .form-group
+        %label.control-label Input addons
+        .input-group
+          %span.input-group-addon $
+          %input.form-control{type: 'text'}
+            %span.input-group-btn
+              %button.btn.btn-default{type: 'button'} Button
+/ Navs==================================================
+.row
+  .col-lg-12
+    .page-header
+      %h2#navs Navs
+.row
+  .col-lg-4
+    %h2#nav-tabs Tabs
+    .bs-component
+      %ul.nav.nav-tabs
+        %li.active
+          %a{'data-toggle' => 'tab', href: '#home'} Home
+        %li
+          %a{'data-toggle' => 'tab', href: '#profile'} Profile
+        %li.disabled
+          %a Disabled
+        %li.dropdown
+          %a.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+            Dropdown
+            %span.caret
+          %ul.dropdown-menu
+            %li
+              %a{'data-toggle' => 'tab', href: '#dropdown1'} Action
+            %li.divider
+            %li
+              %a{'data-toggle' => 'tab', href: '#dropdown2'}
+                Another
+                action
+      #myTabContent.tab-content
+        #home.tab-pane.fade.active.in
+          %p
+            Raw denim you probably haven't heard of them jean
+            shorts Austin. Nesciunt tofu stumptown aliqua, retro
+            synth master cleanse. Mustache cliche tempor,
+            williamsburg carles vegan helvetica. Reprehenderit
+            butcher retro keffiyeh dreamcatcher synth. Cosby
+            sweater eu banh mi, qui irure terry richardson ex
+            squid. Aliquip placeat salvia cillum iphone. Seitan
+            aliquip quis cardigan american apparel, butcher
+            voluptate nisi qui.
+        #profile.tab-pane.fade
+          %p
+            Food truck fixie locavore, accusamus mcsweeney's
+            marfa nulla single-origin coffee squid. Exercitation
+            +1 labore velit, blog sartorial PBR leggings next
+            level wes anderson artisan four loko farm-to-table
+            craft beer twee. Qui photo booth letterpress,
+            commodo enim craft beer mlkshk aliquip jean shorts
+            ullamco ad vinyl cillum PBR. Homo nostrud organic,
+            assumenda labore aesthetic magna delectus
+            mollit.
+        #dropdown1.tab-pane.fade
+          %p
+            Etsy mixtape wayfarers, ethical wes anderson tofu
+            before they sold out mcsweeney's organic lomo
+            retro fanny pack lo-fi farm-to-table readymade.
+            Messenger bag gentrify pitchfork tattooed craft
+            beer, iphone skateboard locavore carles etsy salvia
+            banksy hoodie helvetica. DIY synth PBR banksy irony.
+            Leggings gentrify squid 8-bit cred pitchfork.
+        #dropdown2.tab-pane.fade
+          %p
+            Trust fund seitan letterpress, keytar raw denim
+            keffiyeh etsy art party before they sold out master
+            cleanse gluten-free squid scenester freegan cosby
+            sweater. Fanny pack portland seitan DIY, art party
+            locavore wolf cliche high life echo park Austin.
+            Cred vinyl keffiyeh DIY salvia PBR, banh mi before
+            they sold out farm-to-table VHS viral locavore cosby
+            sweater.
+  .col-lg-4
+    %h2#nav-pills Pills
+    .bs-component
+      %ul.nav.nav-pills
+        %li.active
+          %a{href: '#'} Home
+        %li
+          %a{href: '#'} Profile
+        %li.disabled
+          %a{href: '#'} Disabled
+        %li.dropdown
+          %a.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+            Dropdown
+            %span.caret
+          %ul.dropdown-menu
+            %li
+              %a{href: '#'} Action
+            %li
+              %a{href: '#'} Another action
+            %li
+              %a{href: '#'} Something else here
+            %li.divider
+            %li
+              %a{href: '#'} Separated link
+    %br
+      .bs-component
+        %ul.nav.nav-pills.nav-stacked
+          %li.active
+            %a{href: '#'} Home
+          %li
+            %a{href: '#'} Profile
+          %li.disabled
+            %a{href: '#'} Disabled
+          %li.dropdown
+            %a.dropdown-toggle{'data-toggle' => 'dropdown', href: '#'}
+              Dropdown
+              %span.caret
+            %ul.dropdown-menu
+              %li
+                %a{href: '#'} Action
+              %li
+                %a{href: '#'} Another action
+              %li
+                %a{href: '#'} Something else here
+              %li.divider
+              %li
+                %a{href: '#'} Separated link
+  .col-lg-4
+    %h2#nav-breadcrumbs Breadcrumbs
+    .bs-component
+      %ul.breadcrumb
+        %li.active Home
+      %ul.breadcrumb
+        %li
+          %a{href: '#'} Home
+        %li.active Library
+      %ul.breadcrumb
+        %li
+          %a{href: '#'} Home
+        %li
+          %a{href: '#'} Library
+        %li.active Data
+.row
+  .col-lg-4
+    %h2#pagination Pagination
+    .bs-component
+      %ul.pagination
+        %li.disabled
+          %a{href: '#'} «
+        %li.active
+          %a{href: '#'} 1
+        %li
+          %a{href: '#'} 2
+        %li
+          %a{href: '#'} 3
+        %li
+          %a{href: '#'} 4
+        %li
+          %a{href: '#'} 5
+        %li
+          %a{href: '#'} »
+      %ul.pagination.pagination-lg
+        %li.disabled
+          %a{href: '#'} «
+        %li.active
+          %a{href: '#'} 1
+        %li
+          %a{href: '#'} 2
+        %li
+          %a{href: '#'} 3
+        %li
+          %a{href: '#'} »
+      %ul.pagination.pagination-sm
+        %li.disabled
+          %a{href: '#'} «
+        %li.active
+          %a{href: '#'} 1
+        %li
+          %a{href: '#'} 2
+        %li
+          %a{href: '#'} 3
+        %li
+          %a{href: '#'} 4
+        %li
+          %a{href: '#'} 5
+        %li
+          %a{href: '#'} »
+  .col-lg-4
+/ Indicator==================================================
+.row
+  .col-lg-12
+    .page-header
+      %h2#indicators Indicators
+.row
+  .col-lg-12
+    %h2 Alerts
+    .bs-component
+      .alert.alert-dismissible.alert-warning
+        %button.close{'data-dismiss' => 'alert', type: 'button'}
+          ×
+        %h4 Warning!
+        %p
+          Best check yo self, you're not looking too good.
+          Nulla vitae elit libero, a pharetra augue. Praesent
+          commodo cursus magna,
+          = succeed '.' do
+            %a.alert-link{href: '#'}
+              vel
+              scelerisque nisl consectetur et
+.row
+  .col-lg-4
+    .bs-component
+      .alert.alert-dismissible.alert-danger
+        %button.close{'data-dismiss' => 'alert', type: 'button'}
+          ×
+        %strong Oh snap!
+        %a.alert-link{href: '#'}
+          Change
+          a few things up
+        and try submitting again.
+  .col-lg-4
+    .bs-component
+      .alert.alert-dismissible.alert-success
+        %button.close{'data-dismiss' => 'alert', type: 'button'}
+          ×
+        %strong Well done!
+        You successfully read
+        = succeed '.' do
+          %a.alert-link{href: '#'}
+            this important alert
+            message
+  .col-lg-4
+    .bs-component
+      .alert.alert-dismissible.alert-info
+        %button.close{'data-dismiss' => 'alert', type: 'button'}
+          ×
+        %strong Heads up!
+        This
+        = succeed ',' do
+          %a.alert-link{href: '#'}
+            alert
+            needs your attention
+        but it's not super important.
+.row
+  .col-lg-4
+    %h2 Labels
+    .bs-component{style: 'margin-bottom: 40px;'}
+      %span.label.label-default Default
+      %span.label.label-primary Primary
+      %span.label.label-success Success
+      %span.label.label-warning Warning
+      %span.label.label-danger Danger
+      %br
+      %br
+      %span.label.label-info Info
+  .col-lg-4
+    %h2 Badges
+    .bs-component
+      %ul.nav.nav-pills
+        %li.active
+          %a{href: '#'}
+            Home
+            %span.badge 42
+        %li
+          %a{href: '#'}
+            Profile
+            %span.badge
+        %li
+          %a{href: '#'}
+            Messages
+            %span.badge 3
+/ Containers==================================================
+.row
+  .col-lg-12
+    .page-header
+      %h2#containers Containers
+    .bs-component
+      .jumbotron
+        %h1 Jumbotron
+        %p
+          This is a simple hero unit, a simple jumbotron-style
+          component for calling extra attention to featured
+          content or information.
+        %p
+          %a.btn.btn-primary.btn-lg Learn more
+      #source-button.btn.btn-primary.btn-xs{style: 'display: none;'} < >
+.row
+  .col-lg-12
+    %h2 List groups
+.row
+  .col-lg-4
+    .bs-component
+      %ul.list-group
+        %li.list-group-item
+          %span.badge 14
+          Cras justo odio
+        %li.list-group-item
+          %span.badge 2
+          Dapibus ac facilisis in
+        %li.list-group-item
+          %span.badge 1
+          Morbi leo risus
+  .col-lg-4
+    .bs-component
+      .list-group
+        %a.list-group-item.active{href: '#'}
+          Cras justo odio
+        %a.list-group-item{href: '#'}
+          Dapibus ac facilisis in
+        %a.list-group-item{href: '#'}
+          Morbi leo risus
+  .col-lg-4
+    .bs-component
+      .list-group
+        %a.list-group-item{href: '#'}
+          %h4.list-group-item-heading
+            List group item
+            heading
+          %p.list-group-item-text
+            Donec id elit non mi
+            porta gravida at eget metus. Maecenas sed diam eget
+            risus varius blandit.
+        %a.list-group-item{href: '#'}
+          %h4.list-group-item-heading
+            List group item
+            heading
+          %p.list-group-item-text
+            Donec id elit non mi
+            porta gravida at eget metus. Maecenas sed diam eget
+            risus varius blandit.
+.row
+  .col-lg-12
+    %h2 Panels
+.row
+  .col-lg-4
+    .bs-component
+      .panel.panel-default
+        .panel-body
+          Basic panel
+      .panel.panel-default
+        .panel-heading Panel heading
+        .panel-body
+          Panel content
+        .panel-footer Panel footer
+  .col-lg-4
+    .bs-component
+      .panel.panel-primary
+        .panel-heading
+          %h3.panel-title Panel primary
+        .panel-body
+          Panel content
+      .panel.panel-success
+        .panel-heading
+          %h3.panel-title Panel success
+        .panel-body
+          Panel content
+      .panel.panel-warning
+        .panel-heading
+          %h3.panel-title Panel warning
+        .panel-body
+          Panel content
+  .col-lg-4
+    .bs-component
+      .panel.panel-danger
+        .panel-heading
+          %h3.panel-title Panel danger
+        .panel-body
+          Panel content
+      .panel.panel-info
+        .panel-heading
+          %h3.panel-title Panel info
+        .panel-body
+          Panel content
+.row
+  .col-lg-12
+    %h2 Wells
+.row
+  .col-lg-4
+    .bs-component
+      .well
+        Look, I'm in a well!
+  .col-lg-4
+    .bs-component
+      .well.well-sm
+        Look, I'm in a small well!
+  .col-lg-4
+    .bs-component
+      .well.well-lg
+        Look, I'm in a large well!
+/ Dialog==================================================
+.row
+  .col-lg-12
+    .page-header
+      %h2#dialogs Dialogs
+.row
+  .col-lg-6
+    %h2 Modals
+    = link_to 'Click to Open Modal', '/blank_page', data: { toggle: 'modal', target: '#style_guide_modal' }, class: 'btn btn-primary'
+    .bs-component
+      .modal#style_guide_modal
+        .modal-dialog
+          .modal-content
+            .modal-header
+              %button.close{'aria-hidden' => 'true', 'data-dismiss' => 'modal', type: 'button'}
+                ×
+              %h4.modal-title Modal title
+            .modal-body
+              %p One fine body…
+            .modal-footer
+              %button.btn.btn-default{'data-dismiss' => 'modal', type: 'button'}
+                Close
+              %button.btn.btn-primary{type: 'button'}
+                Save changes