.element-spacing
  .assets-logo-iugu-ux

.container.small-padding
  .button-group.no-bottom-margin.nav
    = link_to "Typography", "/", :class => 'button'
    = link_to "Components", "/components", :class => 'button selected default'

.element-spacing
  .grid.component-grid
    .grid-item.component-item
      %h2
        Buttons

      %p
        Lorem Ipsum

      %h3
        Markup

      %a.button{ :href => "#" } Link Tag
      %button.button Button Tag 

    .grid-item.component-description
      .container
        %h5.no-bottom-margin Example using HREF
        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
          = preserve do
            :escaped
              <a class="button">Link Tag</a>
              <button class="button">Button Tag</button>

.element-spacing
  .grid.component-grid
    .grid-item.component-item
      %h4
        Button (Default Action)
      %a.button.default{ :href => "#" } Default Button

    .grid-item.component-description
      .container
        %h5.no-bottom-margin Example using HREF
        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
          = preserve do
            :escaped
              <a class="button default">Default Button</a>


.element-spacing
  .grid.component-grid
    .grid-item.component-item
      %h4
        Button with Image

      %a.button.default{ :href => "#" }
        %div.assets-star-icon.no-space
          &nbsp;

    .grid-item.component-description
      .container
        %h5.no-bottom-margin Example using HREF
        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
          = preserve do
            :escaped
              <a class="button default">Default Button</a>

.element-spacing
  .grid.component-grid
    .grid-item.component-item
      %h4
        Button Grouping

      .button-group
        %a.button{ :href => "#" } 1
        %a.button{ :href => "#" } 2
        %a.button{ :href => "#" } 3
        %a.button.default.selected{ :href => "#" } 4
        %a.button{ :href => "#" } 5
        %a.button{ :href => "#" } 6
        %a.button{ :href => "#" } 7

    .grid-item.component-description
      .container
        %h5.no-bottom-margin Example using HREF
        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
          = preserve do
            :escaped
              <div class="button-group">
                <a href="button">1</a>
                <a href="button">2</a>
                <a href="button">3</a>
                <a href="button default selected">4</a>
                <a href="button">5</a>
                <a href="button">6</a>
                <a href="button">7</a>
                <a href="button">8</a>
              </div>


.element-spacing
  .grid.component-grid
    .grid-item.component-item
      %h2
        Inputs

      %p
        Lorem Ipsum

      %h3
        Markup

      %form

        %input{ :style => "width: 180px", :type => "text", :placeholder => "Nome Completo" }
        %a.button.default
          Salvar

        .grouping
          %input.failure{ :style => "width: 180px", :type => "text", :placeholder => "Nome Completo" }
          %a.button.default
            Salvar

        .grouping
          %input.success{ :style => "width: 180px", :type => "text", :placeholder => "Nome Completo" }
          %a.button.default
            Salvar


    .grid-item.component-description
      .container
        %h5.no-bottom-margin Example using HREF
        %pre.no-bottom-margin{ :class => "prettyprint linenums:1 linenums" }
          = preserve do
            :escaped
              <form>
                <input type="text" placeholder="Nome Completo" />
              </form>

%h3
  Slider

.element-spacing
  .element-spacing
    #slider{ :style => "height: 250px" }
      .ui-slider-handle
        .ui-slider-handle-visual
      .ui-slider-handle
        .ui-slider-handle-visual

%h3
  Tags

.element-spacing
  %p.no-bottom-margin
    %span.tag new
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  %p.no-bottom-margin
    %span.tag.red error
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  %p.no-bottom-margin
    %span.tag.yellow warning
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  %p.no-bottom-margin
    %span.tag.green done
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  %p.no-bottom-margin
    %span.tag.blue shipping
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

%dl.dl-horizontal
  %dt
    %span.tag new
  %dd A description list is perfect for defining terms.
  %dt
    %span.tag.red error
  %dd Vestibulum id ligula porta felis euismod semper.
  %dt
    %span.tag.green done
  %dd Vestibulum id ligula porta felis euismod semper.
  %dt
    %span.tag.green done
  %dd Vestibulum id ligula porta felis euismod semper.
  %dt
    %span.tag.green done
  %dd Vestibulum id ligula porta felis euismod semper.
  %dt
    %span.tag.green done
  %dd Vestibulum id ligula porta felis euismod semper.
  %dt
    %span.tag.green done
  %dd Vestibulum id ligula porta felis euismod semper.

%h3
  Badges

.element-spacing
  %span.badge
    1
  %span.badge.red
    45
  %span.badge.red
    1025
  %span.badge.green
    3

%h3
  Notices

.notice
  %button.close{ :'data-dismiss' => "notice" }
    &times;
  %strong
    Warning!
  Best check yo self, you're not looking too good.

.notice
  %button.close{ :'data-dismiss' => "notice" }
    &times;
  %h4.notice-heading
    Warning!
  Best check yo self, you're not looking too good.

.notice.notice-red
  %button.close{ :'data-dismiss' => "notice" }
    &times;
  %h4.notice-heading
    Error!
  Best check yo self, you're not looking too good.

.notice.notice-green
  %button.close{ :'data-dismiss' => "notice" }
    &times;
  %h4.notice-heading
    Success!
  Best check yo self, you're not looking too good.

.notice.notice-blue
  %button.close{ :'data-dismiss' => "notice" }
    &times;
  %h4.notice-heading
    Info!
  Best check yo self, you're not looking too good.
  %ul
    %li
      Checking item #5
    %li
      Analysing lorem ipsum

%h3
  Progress Bar

.progress
  .bar{ :style => "width: 20%" }
    20%

.progress
  .bar{ :style => "width: 20%" }

%h3
  Containers

.container
  .notice.notice-blue
    %button.close{ :'data-dismiss' => "notice" }
      &times;
    %h4.notice-heading
      Info!
    Best check yo self, you're not looking too good.
    %ul
      %li
        Checking item #5
      %li
        Analysing lorem ipsum
  Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

.container.no-padding
  .header
    Header
  .padding
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  .footer
    Footer

.container
  %p Cras mattis consectetur purus sit amet fermentum.
  .container.no-bottom-margin
    Container inside container. Cras mattis consectetur purus sit amet fermentum.

%h3
  Tabbed Container

.tabbed
  %ul.nav
    %li.active{ :style => "width:50%" }
      %a Profile
    %li{ :style => "width:50%" }
      %a Account
  .container
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

.tabbed
  %ul.nav
    %li.active{ :style => "width:50%" }
      %a Profile
    %li{ :style => "width:50%" }
      %a{ :href => "http://google.com.br", :target => "_blank" }
        Account
  .container
    .tabbed
      %ul.nav
        %li.active{ :style => "width:33.33%" }
          %a First
        %li{ :style => "width:33.33%" }
          %a Middle
        %li{ :style => "width:33.33%" }
          %a Last
      .container.no-bottom-margin
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

.tabbed
  %ul.nav
    %li{ :style => "width:33.33%" }
      %a Profile
    %li.active{ :style => "width:33.33%" }
      %a Account
    %li{ :style => "width:33.33%" }
      %a.no-padding
        %span
          %i.icon-test{ :style => "background-image: url('http://www.condorapartments.com.au/img/icon-bank.png')" }
          Payment History
      
  .container
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

.tabbed
  
  %ul.nav
    %li{ :style => "width: 50%" }
      %a Profile
    %li.active{ :style => "width: 50%" }
      %a Account
  .container
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.