- 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