.welcome
  .grid
    .col-2= image_tag('psique/documentation/shell.svg')

    .col-7
      %h3 Welcome to Emergia style guide
      %p
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua.

    .col-3
      %p You know you're gonna search?
      = form_tag '#', method: :get, class: 'searcher' do
        = search_field_tag 'search', nil, placeholder: 'Search for...'
        = button_tag 'Search'


.main.grid
  %h2.title Colors
  %p.main At the bottom of these lines, you can see the default colors that we use in our application.

.main.grid
  %p Grayscale
  .col-3
    .color-shape.light-grey  
      %span $light-grey
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .light-grey
      class for backgrounds 
  .col-3
    .color-shape.mid-grey  
      %span $mid-grey
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .mid-grey
      class for backgrounds 
  .col-3
    .color-shape.dark-grey  
      %span $dark-grey        
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .dark-grey
      class for backgrounds 

.main.grid
  %p Primary Colors
  .col-3
    .color-shape.capota-blue  
      %span $capota-blue
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .capota-blue
      class for backgrounds
  .col-3
    .color-shape.grana
      %span $granate
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .granate
      class for backgrounds 
  .col-3
    .color-shape.vibrant-orange
      %span $vibrant-orange 
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .vibrant-orange
      class for backgrounds 
  
.main.grid
  %p Secondary Colors
  .col-3
    .color-shape.navy-blue  
      %span $navy-blue
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .navy-blue
      class for backgrounds 
  .col-3
    .color-shape.ceruleo  
      %span $ceruleo-blue
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .ceruleo-blue
      class for backgrounds 
  .col-3
    .color-shape.oceanic
      %span $oceanic-green
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .oceanic-green
      class for backgrounds 
  .col-3
    .color-shape.dark-magenta
      %span $dark-magenta 
    %p.col-box.dark-grey.codehilite
      Use
      %span.nc .dark-magenta
      class for backgrounds 

.grid.main
  %h2.title Buttons
  %p.main At the bottom of these lines, you can see the default colors that we use on our application.
  
  %p Button Shapes
  .col-3
    .btn--a.btn--blue Default Round Button
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--a
      class 
  .col-3
    .btn--b.btn--grey Default Square Button
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--b
      class 

.main.grid
  %p Button Styles
  .col-3
    .btn--disabled Default Inactive Button
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--disabled
  .col-3
    .btn--a.btn--blue.btn--i
      %i.fa.fa-github
      Default Icon Button
    %p.col-box.dark-grey.codehilite 
      When your div has the class 
      %span.nc .btn--a/b
      append to this
      %span.sc .btn--i

.grid.main
  .col-4
    .btn--a.btn--i.btn--gplus
      %i.fa.fa-google-plus
      Compartir con Google +
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--gplus
      class   
  .col-4
    .btn--a.btn--i.btn--twitter
      %i.fa.fa-twitter
      Compartir con Twitter
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--twitter
      class   
  .col-4
    .btn--a.btn--i.btn--facebook
      %i.fa.fa-facebook
      Compartir con Facebook
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--facebook
      class   

.grid.main
  %p Button Sizes
  .col-3
    .btn--a.btn--blue.btn--l Large Button
    %p.col-box.dark-grey.codehilite 
      When your div has the class 
      %span.nc .btn--a/b
      append to this
      %span.sc .btn--l  
  .col-3
    .btn--a.btn--blue.btn--s Small Button
    %p.col-box.dark-grey.codehilite 
      When your div has the class 
      %span.nc .btn--a/b
      append to this
      %span.sc .btn--s  
  .col-3
    .btn--a.btn--blue.btn--xs Extra Small Button
    %p.col-box.dark-grey.codehilite 
      When your div has the class 
      %span.nc .btn--a/b
      append to this
      %span.sc .btn--xs

.grid.main
  %p Button Colors
  .col-3
    .btn--a.btn--blue Default Blue Button
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--blue
  .col-3
    .btn--a.btn--orange Default Orange Button
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--orange
  .col-3
    .btn--b.btn--grey 
      Default Grey Button
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn--grey
  .col-3
    .btn--b.btn--granate
      Default Granate Button
    %p.col-box.dark-grey.codehilite 
      Add class
      %span.nc .btn-granate

.grid.main
  %h2.title Icons
  .col-4.icon-margin
    %i.fa.fa-angle-double-right fa-angle-double-right
  .col-4.icon-margin
    %i.fa.fa-bars fa-bars
  .col-3.icon-margin
    %i.fa.fa-square-o fa-square-o
 
  .col-4.icon-margin
    %i.fa.fa-angle-double-left fa-angle-double-left
  .col-4.icon-margin
    %i.fa.fa-play fa-play
  .col-3.icon-margin
    %i.fa.fa-pause fa-pause

  .col-4.icon-margin
    %i.fa.fa-chevron-right fa-chevron-right
  .col-4.icon-margin
    %i.fa.fa-desktop fa-desktop
  .col-3.icon-margin
    %i.fa.fa-caret-up fa-caret-up

  .col-4.icon-margin
    %i.fa.fa-chevron-left fa-chevron-left
  .col-4.icon-margin
    %i.fa.fa-comment fa-comment
  .col-3.icon-margin
    %i.fa.fa-caret-down fa-caret-down

  .col-4.icon-margin
    %i.fa.fa-dashcube fa-dashcube
  .col-4.icon-margin
    %i.fa.fa-envelope fa-envelope
  .col-3.icon-margin
    %i.fa.fa-exclamation-triangle fa-exclamation-triangle

  .col-4.icon-margin
    %i.fa.fa-eye fa-eye
  .col-4.icon-margin
    %i.fa.fa-picture-o fa-picture-o
  .col-3.icon-margin
    %i.fa.fa-home fa-home

  .col-4.icon-margin
    %i.fa.fa-inbox fa-inbox
  .col-4.icon-margin
    %i.fa.fa-info-circle fa-info-circle
  .col-3.icon-margin
    %i.fa.fa-pencil fa-pencil

  .col-4.icon-margin
    %i.fa.fa-reply fa-reply
  .col-4.icon-margin
    %i.fa.fa-search fa-search
  .col-3.icon-margin
    %i.fa.fa-stop fa-stop

  .col-4.icon-margin
    %i.fa.fa-tags fa-tags
  .col-4.icon-margin
    %i.fa.fa-thumb-tack fa-thumb-tack
  .col-3.icon-margin
    %i.fa.fa-thumbs-o-up fa-thumbs-o-up

  .col-4.icon-margin
    %i.fa.fa-trash-o fa-trash-o
  .col-4.icon-margin
    %i.fa.fa-user fa-user
  .col-3.icon-margin
    %i.fa.fa-thumbs-o-up fa-thumbs-o-up

.main.grid
  %h2.title Headings
  .col-5
    .box-header
      .arrow-header
        %span Arrow header (login)
    .col-box.dark-grey.codehilite
      %pre.nc .box-header<br>  .arrow-header<br>    %span Arrow header (login)