From 8231796ae73bc895cffc56d04200945d4b212537 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 14:47:39 -0200
Subject: [PATCH 01/32] update html in the area ls-user-account of sidebar in
 all example panel

---
 source/documentacao/exemplos/painel2/_sidebar.erb | 4 ++--
 source/documentacao/exemplos/painel3/_sidebar.erb | 4 ++--
 source/documentacao/exemplos/painel4/_sidebar.erb | 4 ++--
 source/documentacao/exemplos/painel5/_sidebar.erb | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/source/documentacao/exemplos/painel2/_sidebar.erb b/source/documentacao/exemplos/painel2/_sidebar.erb
index 940e1189f..68904ca9c 100644
--- a/source/documentacao/exemplos/painel2/_sidebar.erb
+++ b/source/documentacao/exemplos/painel2/_sidebar.erb
@@ -1,7 +1,7 @@
 <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
   <a href="#" class="ls-ico-user">
-    João
-    <small>(fmolina)</small>
+    <span class="ls-name">João Marques Gonçalves deiivd</span>
+    (fmolina)</small>
   </a>
   <nav class="ls-dropdown-nav ls-user-menu">
     <ul>
diff --git a/source/documentacao/exemplos/painel3/_sidebar.erb b/source/documentacao/exemplos/painel3/_sidebar.erb
index efd8b8e9f..6b94e2967 100644
--- a/source/documentacao/exemplos/painel3/_sidebar.erb
+++ b/source/documentacao/exemplos/painel3/_sidebar.erb
@@ -1,7 +1,7 @@
 <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
   <a href="#" class="ls-ico-user">
-    João
-    <small>(fmolina)</small>
+    <span class="ls-name">João</span>
+    (fmolina)</small>
   </a>
   <nav class="ls-dropdown-nav ls-user-menu">
     <a href="#" class="ls-btn-logout">Sair</a>
diff --git a/source/documentacao/exemplos/painel4/_sidebar.erb b/source/documentacao/exemplos/painel4/_sidebar.erb
index 6635765f2..fa7d61ff4 100644
--- a/source/documentacao/exemplos/painel4/_sidebar.erb
+++ b/source/documentacao/exemplos/painel4/_sidebar.erb
@@ -1,7 +1,7 @@
 <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
   <a href="#" class="ls-ico-user">
-    João
-    <small>(fmolina)</small>
+    <span class="ls-name">João</span>
+    (fmolina)</small>
   </a>
   <nav class="ls-dropdown-nav ls-user-menu">
     <ul>
diff --git a/source/documentacao/exemplos/painel5/_sidebar.erb b/source/documentacao/exemplos/painel5/_sidebar.erb
index 4cad9b959..06ded8d43 100644
--- a/source/documentacao/exemplos/painel5/_sidebar.erb
+++ b/source/documentacao/exemplos/painel5/_sidebar.erb
@@ -1,7 +1,7 @@
 <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
   <a href="#" class="ls-ico-user">
-    João
-    <small>(fmolina)</small>
+    <span class="ls-name">João</span>
+    (fmolina)</small>
   </a>
   <nav class="ls-dropdown-nav ls-user-menu">
     <ul>

From ea4431b87ebf66f04d2723c1adcb85b713619fa0 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 15:12:27 -0200
Subject: [PATCH 02/32] removing javascript of custom fields

---
 source/assets/javascripts/locastyle.js        |  1 -
 .../javascripts/locastyle/_custom-fields.js   | 22 -------------------
 2 files changed, 23 deletions(-)
 delete mode 100644 source/assets/javascripts/locastyle/_custom-fields.js

diff --git a/source/assets/javascripts/locastyle.js b/source/assets/javascripts/locastyle.js
index daf4bf913..68cedb7e5 100644
--- a/source/assets/javascripts/locastyle.js
+++ b/source/assets/javascripts/locastyle.js
@@ -25,7 +25,6 @@
 //= require locastyle/_progress-bar
 //= require locastyle/_form
 //= require locastyle/_guided-tour
-//= require locastyle/_custom-fields
 //= require locastyle/_topbar-curtain
 //= require locastyle/_btn-group
 //= require locastyle/_datepicker
diff --git a/source/assets/javascripts/locastyle/_custom-fields.js b/source/assets/javascripts/locastyle/_custom-fields.js
deleted file mode 100644
index 9f0ea0b1f..000000000
--- a/source/assets/javascripts/locastyle/_custom-fields.js
+++ /dev/null
@@ -1,22 +0,0 @@
-var locastyle = locastyle || {};
-
-locastyle.customFields = (function() {
-  'use strict';
-
-  function init() {
-    customSelect();
-  };
-
-  function customSelect(){
-    $('select.ls-custom-select').wrap(function(){
-      var selectClasses = $(this).attr('class');
-      $(this).removeAttr('class').addClass('ls-select');
-      return '<div class="'+selectClasses+'"></div>';
-    });
-  };
-
-  return {
-    init: init
-  };
-
-}());

From 7a31a180b80541c754e42bebc38398958d0d1e25 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 15:12:39 -0200
Subject: [PATCH 03/32] removing tests of custom fields

---
 spec/javascripts/custom-fields_spec.js        | 19 -------------------
 .../fixtures/custom-fields_fixture.html       |  8 --------
 2 files changed, 27 deletions(-)
 delete mode 100644 spec/javascripts/custom-fields_spec.js
 delete mode 100644 spec/javascripts/fixtures/custom-fields_fixture.html

diff --git a/spec/javascripts/custom-fields_spec.js b/spec/javascripts/custom-fields_spec.js
deleted file mode 100644
index 2e4095b11..000000000
--- a/spec/javascripts/custom-fields_spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-describe('Custom Fields:', function(){
-  beforeEach(function(){
-    loadFixtures('custom-fields_fixture.html');
-    locastyle.customFields.init();
-  });
-
-  describe('When have class="ls-custom-select"', function(){
-    it('selects all should have wrap with class ls-custom-select', function(){
-      expect($('#select1').parent().hasClass('ls-custom-select')).toEqual(true);
-    });
-  });
-
-  describe('When select have class="ls-select"', function(){
-    it('selects all should have the class ls-select', function(){
-      expect($('#select1').hasClass('ls-select')).toEqual(true);
-    });
-  });
-
-});
diff --git a/spec/javascripts/fixtures/custom-fields_fixture.html b/spec/javascripts/fixtures/custom-fields_fixture.html
deleted file mode 100644
index 41cd3e4eb..000000000
--- a/spec/javascripts/fixtures/custom-fields_fixture.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<select id="select1" name="" class="ls-custom-select">
-  <option value="">Select your option</option>
-  <option value="">Option 1</option>
-  <option value="">Option 2</option>
-  <option value="">Option 3</option>
-  <option value="">Option 4</option>
-  <option value="">Option 5</option>
-</select>

From 076e2812a49838d71503dccf8ed820ebec89e98b Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 16:08:29 -0200
Subject: [PATCH 04/32] removing class style to tag select

---
 .../stylesheets/locastyle/modules/_custom-fields.sass  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/assets/stylesheets/locastyle/modules/_custom-fields.sass b/source/assets/stylesheets/locastyle/modules/_custom-fields.sass
index b7a07c134..d89fd5130 100644
--- a/source/assets/stylesheets/locastyle/modules/_custom-fields.sass
+++ b/source/assets/stylesheets/locastyle/modules/_custom-fields.sass
@@ -17,7 +17,7 @@
   .ls-form-disable &
     border-color: $gray1
 
-  .ls-select
+  select
     position: relative
     +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
     -webkit-appearance: none
@@ -58,27 +58,27 @@
   &.ls-field-lg
     height: $input-lg-height
 
-    .ls-select
+    select
       height: $input-lg-height
       font-size: remtopx(1)
 
   &.ls-field-md
     height: $input-height
 
-    .ls-select
+    select
       height: $input-height
       font-size: remtopx(.8125)
 
   &.ls-field-sm
     height: $input-sm-height
 
-    .ls-select
+    select
       height: $input-sm-height
       font-size: remtopx(.75)
 
   &.ls-field-xs
     height: $input-xs-height
 
-    .ls-select
+    select
       height: $input-xs-height
       font-size: remtopx(.75)

From 642ab537cd4fc799feb1567b737c62c048361dec Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 16:08:55 -0200
Subject: [PATCH 05/32] update html of custom select in all examples panel

---
 .../exemplos/painel1/clients.html.erb         | 28 +++++++------
 .../exemplos/painel2/stats.html.erb           | 34 ++++++++-------
 .../exemplos/painel3/contacts.html.erb        | 42 +++++++++++--------
 .../exemplos/painel4/config-language.html.erb | 14 ++++---
 .../exemplos/painel4/config-publish.html.erb  | 12 +++---
 .../exemplos/painel5/pre-painel.html.erb      | 28 +++++++------
 6 files changed, 90 insertions(+), 68 deletions(-)

diff --git a/source/documentacao/exemplos/painel1/clients.html.erb b/source/documentacao/exemplos/painel1/clients.html.erb
index 42ea50323..22d3ea33f 100644
--- a/source/documentacao/exemplos/painel1/clients.html.erb
+++ b/source/documentacao/exemplos/painel1/clients.html.erb
@@ -14,12 +14,14 @@ title_product: Revenda do Email Marketing
   <form action="#" class="ls-form ls-form-inline ls-float-left">
     <label class="ls-label">
         <b class="ls-label-text">Status</b>
-        <select name="" class="ls-custom-select ls-field-sm">
-          <option value="">Todos</option>
-          <option value="">Ativo</option>
-          <option value="">Desativados</option>
-          <option value="">Bloqueados por bounce</option>
-        </select>
+        <div class="ls-custom-select ls-field-sm">
+          <select name="">
+            <option value="">Todos</option>
+            <option value="">Ativo</option>
+            <option value="">Desativados</option>
+            <option value="">Bloqueados por bounce</option>
+          </select>
+        </div>
       </label>
   </form>
   <form action="#" class="ls-form ls-form-inline ls-float-right">
@@ -87,12 +89,14 @@ title_product: Revenda do Email Marketing
   <div class="ls-filter-view">
     <label for="">
       Exibir
-      <select name="" id="" class="ls-custom-select ls-field-sm">
-        <option value="10">10</option>
-        <option value="30">30</option>
-        <option value="50">50</option>
-        <option value="100">100</option>
-      </select>
+      <div class="ls-custom-select ls-field-sm">
+        <select name="" id="">
+          <option value="10">10</option>
+          <option value="30">30</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+        </select>
+      </div>
       ítens por página
     </label>
   </div>
diff --git a/source/documentacao/exemplos/painel2/stats.html.erb b/source/documentacao/exemplos/painel2/stats.html.erb
index eaca6956c..2be21a69b 100644
--- a/source/documentacao/exemplos/painel2/stats.html.erb
+++ b/source/documentacao/exemplos/painel2/stats.html.erb
@@ -12,13 +12,15 @@ title_product: SMTP Locaweb
   <form action="#" class="ls-form ls-form-inline ls-float-left">
     <label class="ls-label">
       <b class="ls-label-text">Período</b>
-      <select name="" class="ls-custom-select">
-        <option value="">Dia atual</option>
-        <option value="">Última semana</option>
-        <option value="">Últimos 30 dias</option>
-        <option value="">Últimos 6 meses</option>
-        <option value="">Últimos 12 meses </option>
-      </select>
+      <div class="ls-custom-select">
+        <select name="">
+          <option value="">Dia atual</option>
+          <option value="">Última semana</option>
+          <option value="">Últimos 30 dias</option>
+          <option value="">Últimos 6 meses</option>
+          <option value="">Últimos 12 meses </option>
+        </select>
+      </div>
     </label>
     <div data-ls-module="dropdown" class="ls-dropdown">
       <a href="#" class="ls-btn">Exportar</a>
@@ -238,14 +240,16 @@ title_product: SMTP Locaweb
         <fieldset>
           <label class="ls-label col-md-5">
             <b class="ls-label-text">Período</b>
-            <select name="" class="ls-custom-select">
-              <option value="">Dia atual</option>
-              <option value="">Última semana</option>
-              <option value="">Últimos 30 dias</option>
-              <option value="">Últimos 6 meses</option>
-              <option value="">Últimos 12 meses</option>
-              <option value="">Personalizado</option>
-            </select>
+            <div class="ls-custom-select">
+              <select name="">
+                <option value="">Dia atual</option>
+                <option value="">Última semana</option>
+                <option value="">Últimos 30 dias</option>
+                <option value="">Últimos 6 meses</option>
+                <option value="">Últimos 12 meses</option>
+                <option value="">Personalizado</option>
+              </select>
+            </div>
           </label>
           <div class="ls-label col-md-11">
             <h5 class="ls-title-6">Status de Envio</h5>
diff --git a/source/documentacao/exemplos/painel3/contacts.html.erb b/source/documentacao/exemplos/painel3/contacts.html.erb
index 66172f9e5..eb795dacd 100644
--- a/source/documentacao/exemplos/painel3/contacts.html.erb
+++ b/source/documentacao/exemplos/painel3/contacts.html.erb
@@ -53,12 +53,14 @@ title_product: Registro de Domínio
 
         <label class="ls-label col-md-2 col-xs-12">
           <b class="ls-label-text">País</b>
-          <select class="ls-custom-select">
-            <option value="1"> Brasil </option>
-            <option value="2"> Argentina </option>
-            <option value="3"> Chile </option>
-            <option value="4"> Equador </option>
-          </select>
+          <div class="ls-custom-select">
+            <select>
+              <option value="1"> Brasil </option>
+              <option value="2"> Argentina </option>
+              <option value="3"> Chile </option>
+              <option value="4"> Equador </option>
+            </select>
+          </div>
         </label>
         <label class="ls-label col-md-1 col-xs-12">
           <b class="ls-label-text">Estado</b>
@@ -164,12 +166,14 @@ title_product: Registro de Domínio
 
         <label class="ls-label col-md-2 col-xs-12">
           <b class="ls-label-text">País</b>
-          <select class="ls-custom-select">
-            <option value="1"> Brasil </option>
-            <option value="2"> Argentina </option>
-            <option value="3"> Chile </option>
-            <option value="4"> Equador </option>
-          </select>
+          <div class="ls-custom-select">
+            <select class="ls-custom-select">
+              <option value="1"> Brasil </option>
+              <option value="2"> Argentina </option>
+              <option value="3"> Chile </option>
+              <option value="4"> Equador </option>
+            </select>
+          </div>
         </label>
         <label class="ls-label col-md-1 col-xs-12">
           <b class="ls-label-text">Estado</b>
@@ -275,12 +279,14 @@ title_product: Registro de Domínio
 
         <label class="ls-label col-md-2 col-xs-12">
           <b class="ls-label-text">País</b>
-          <select class="ls-custom-select">
-            <option value="1"> Brasil </option>
-            <option value="2"> Argentina </option>
-            <option value="3"> Chile </option>
-            <option value="4"> Equador </option>
-          </select>
+          <div class="ls-custom-select">
+            <select class="ls-custom-select">
+              <option value="1"> Brasil </option>
+              <option value="2"> Argentina </option>
+              <option value="3"> Chile </option>
+              <option value="4"> Equador </option>
+            </select>
+          </div>
         </label>
         <label class="ls-label col-md-1 col-xs-12">
           <b class="ls-label-text">Estado</b>
diff --git a/source/documentacao/exemplos/painel4/config-language.html.erb b/source/documentacao/exemplos/painel4/config-language.html.erb
index a232cf74b..70fa32e22 100644
--- a/source/documentacao/exemplos/painel4/config-language.html.erb
+++ b/source/documentacao/exemplos/painel4/config-language.html.erb
@@ -16,12 +16,14 @@ title_product: Criador de Sites 2.0
   <form action="#" class="ls-form">
     <label class="ls-label">
       <b class="ls-label-text">Idioma</b>
-      <select name="" class="ls-custom-select">
-        <option value="">Português do Brasil</option>
-        <option value="">Inglês (US)</option>
-        <option value="">Espanhol</option>
-        <option value="">Francês</option>
-      </select>
+      <div class="ls-custom-select">
+        <select name="">
+          <option value="">Português do Brasil</option>
+          <option value="">Inglês (US)</option>
+          <option value="">Espanhol</option>
+          <option value="">Francês</option>
+        </select>
+      </div>
     </label>
   </form>
 
diff --git a/source/documentacao/exemplos/painel4/config-publish.html.erb b/source/documentacao/exemplos/painel4/config-publish.html.erb
index c44816925..a84dbd1ae 100644
--- a/source/documentacao/exemplos/painel4/config-publish.html.erb
+++ b/source/documentacao/exemplos/painel4/config-publish.html.erb
@@ -39,11 +39,13 @@ title_product: Criador de Sites 2.0
         <fieldset>
           <label class="ls-label">
             <b class="ls-label-text">Escolha o site que deseja apagar:</b>
-            <select class="ls-custom-select">
-              <option value="1">site1.com.br</option>
-              <option value="2">site2.com.br</option>
-              <option value="3">site3.com.br</option>
-            </select>
+            <div class="ls-custom-select">
+              <select>
+                <option value="1">site1.com.br</option>
+                <option value="2">site2.com.br</option>
+                <option value="3">site3.com.br</option>
+              </select>
+            </div>
             <p><small><strong>Atenção:</strong> ao apagar o site principal, todas as outras versões também serão apagadas.</small></p>
           </label>
         </fieldset>
diff --git a/source/documentacao/exemplos/painel5/pre-painel.html.erb b/source/documentacao/exemplos/painel5/pre-painel.html.erb
index d7cd5cfcd..55e7652ea 100644
--- a/source/documentacao/exemplos/painel5/pre-painel.html.erb
+++ b/source/documentacao/exemplos/painel5/pre-painel.html.erb
@@ -15,12 +15,14 @@ panel: painel5
   <form action="" class="ls-form ls-form-inline ls-float-left">
     <label class="ls-label">
       <b class="ls-label-text">Status</b>
-      <select class="ls-custom-select">
-        <option selected="&quot;selected&quot;" value="/resale/clients">Todos os domínios &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
-        <option value="#">Registrados</option>
-        <option value="#">Não registrados</option>
-        <option value="#">Bloqueados</option>
-      </select>
+      <div class="ls-custom-select">
+        <select>
+          <option selected="&quot;selected&quot;" value="/resale/clients">Todos os domínios &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
+          <option value="#">Registrados</option>
+          <option value="#">Não registrados</option>
+          <option value="#">Bloqueados</option>
+        </select>
+      </div>
     </label>
   </form>
 
@@ -84,12 +86,14 @@ panel: painel5
   <div class="ls-filter-view">
     <label for="">
       Exibir
-      <select class="ls-custom-select">
-        <option value="10">10</option>
-        <option value="30">30</option>
-        <option value="50">50</option>
-        <option value="100">100</option>
-      </select>
+      <div class="ls-custom-select">
+        <select>
+          <option value="10">10</option>
+          <option value="30">30</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+        </select>
+      </div>
       ítens por página
     </label>
   </div>

From e0ae6c19a49d67c31ede9771a694b78f5225b9fa Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 16:09:19 -0200
Subject: [PATCH 06/32] update documentation to custom select

---
 .../formularios/select-customizado.html.erb   |  7 +-
 .../formularios/tamanho-dos-campos.html.erb   | 80 +++++++++++--------
 source/documentacao/shared/_custom-fields.erb | 16 ++--
 3 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/source/documentacao/formularios/select-customizado.html.erb b/source/documentacao/formularios/select-customizado.html.erb
index ec63f29e6..3babfcaae 100644
--- a/source/documentacao/formularios/select-customizado.html.erb
+++ b/source/documentacao/formularios/select-customizado.html.erb
@@ -9,10 +9,15 @@ description: Mudamos a aparência da select sem alterar o comportamento padrão
 
   <%= partial 'partials/doc-intro-content' %>
 
-  <p>Para estilizar uma select, é bem simples, basta adicionar a classe <code>ls-custom-select</code>e a mágica acontece.</p>
+  <p>Para estilizar uma <code>&lt;select&gt;</code>, é bem simples, basta envolvê-la em uma  <code>&lt;div&gt;</code>com a classe <code>ls-custom-select</code>e a mágica acontece.</p>
+
 
   <div class="ls-box-demo">
     <%= partial 'documentacao/shared/custom-fields', locals: {field: 'select'} %>
   </div>
   <% code("html") do %><%= partial 'documentacao/shared/custom-fields', locals: {field: 'select'} %><% end %>
+
+  <div class="ls-alert ls-alert-info">
+    <p>Foi usado apenas CSS, com suporte aos navegadores mais atuais, inclusive IE-8 ou superior.</p>
+  </div>
 </section>
diff --git a/source/documentacao/formularios/tamanho-dos-campos.html.erb b/source/documentacao/formularios/tamanho-dos-campos.html.erb
index d633af392..3184c3802 100644
--- a/source/documentacao/formularios/tamanho-dos-campos.html.erb
+++ b/source/documentacao/formularios/tamanho-dos-campos.html.erb
@@ -33,21 +33,25 @@ description: Aumente ou diminua o tamanho dos campos de formulários
   <h2 class="doc-title-3">Alterando altura dos selects</h2>
   <p>Para alterar a altura dos selects customizados, basta adicionar as classes abaixo na <code>select</code>.</p>
   <div class="ls-box-demo">
-    <select class="ls-custom-select ls-field-sm">
+    <div class="ls-custom-select ls-field-sm">
+      <select>
+        <option value="">Pequeno</option>
+        <%- 2.times do |i| %>
+          <option value="<%= i %>"> <%= lorem.words 3 %> </option>
+        <% end %>
+      </select>
+    </div>[]
+  </div>
+  <% code("html") do %>
+
+  <div class="ls-custom-select ls-field-sm">
+    <select>
       <option value="">Pequeno</option>
       <%- 2.times do |i| %>
-        <option value="<%= i %>"> <%= lorem.words 3 %> </option>
+      <option value="<%= i %>"> <%= lorem.words 3 %> </option>
       <% end %>
     </select>
   </div>
-  <% code("html") do %>
-
-  <select class="ls-custom-select ls-field-sm">
-    <option value="">Pequeno</option>
-    <%- 2.times do |i| %>
-    <option value="<%= i %>"> <%= lorem.words 3 %> </option>
-    <% end %>
-  </select>
 
 <input type="submit" class="ls-btn ls-btn-sm" value="Botão">
   <% end %>
@@ -64,12 +68,14 @@ description: Aumente ou diminua o tamanho dos campos de formulários
       <tr>
         <td>ls-field-lg</td>
         <td>
-          <select class="ls-custom-select ls-field-lg">
-            <option value="">Grande</option>
-            <%- 2.times do |i| %>
-              <option value="<%= i %>"> <%= lorem.words 3 %> </option>
-            <% end %>
-          </select>
+          <div class="ls-custom-select ls-field-lg">
+            <select>
+              <option value="">Grande</option>
+              <%- 2.times do |i| %>
+                <option value="<%= i %>"> <%= lorem.words 3 %> </option>
+              <% end %>
+            </select>
+          </div>
 
         </td>
         <td><input type="submit" class="ls-btn ls-btn-lg" value="Botão"></td>
@@ -77,12 +83,14 @@ description: Aumente ou diminua o tamanho dos campos de formulários
       <tr>
         <td>ls-field-md (<i>tamanho default</i>)</td>
         <td>
-          <select class="ls-custom-select ls-field-md">
-            <option value="">Normal</option>
-            <%- 2.times do |i| %>
-              <option value="<%= i %>"> <%= lorem.words 3 %> </option>
-            <% end %>
-          </select>
+          <div class="ls-custom-select ls-field-md">
+            <select>
+              <option value="">Normal</option>
+              <%- 2.times do |i| %>
+                <option value="<%= i %>"> <%= lorem.words 3 %> </option>
+              <% end %>
+            </select>
+          </div>
         </td>
         <td>
           <input type="submit" class="ls-btn ls-btn-md" value="Botão">
@@ -91,12 +99,14 @@ description: Aumente ou diminua o tamanho dos campos de formulários
       <tr>
         <td>ls-field-sm</td>
         <td>
-          <select class="ls-custom-select ls-field-sm">
-            <option value="">Pequeno</option>
-            <%- 2.times do |i| %>
-              <option value="<%= i %>"> <%= lorem.words 3 %> </option>
-            <% end %>
-          </select>
+          <div class="ls-custom-select ls-field-sm">
+            <select>
+              <option value="">Pequeno</option>
+              <%- 2.times do |i| %>
+                <option value="<%= i %>"> <%= lorem.words 3 %> </option>
+              <% end %>
+            </select>
+          </div>
         </td>
         <td>
           <input type="submit" class="ls-btn ls-btn-sm" value="Botão">
@@ -105,12 +115,14 @@ description: Aumente ou diminua o tamanho dos campos de formulários
       <tr>
         <td>ls-field-xs</td>
         <td>
-          <select class="ls-custom-select ls-field-xs">
-            <option value="">Bem pequeno</option>
-            <%- 2.times do |i| %>
-              <option value="<%= i %>"> <%= lorem.words 3 %> </option>
-            <% end %>
-          </select>
+          <div class="ls-custom-select ls-field-xs">
+            <select>
+              <option value="">Bem pequeno</option>
+              <%- 2.times do |i| %>
+                <option value="<%= i %>"> <%= lorem.words 3 %> </option>
+              <% end %>
+            </select>
+          </div>
         </td>
         <td>
           <input type="submit" class="ls-btn ls-btn-xs" value="Botão">
diff --git a/source/documentacao/shared/_custom-fields.erb b/source/documentacao/shared/_custom-fields.erb
index da4b208ae..7be835a2d 100644
--- a/source/documentacao/shared/_custom-fields.erb
+++ b/source/documentacao/shared/_custom-fields.erb
@@ -1,7 +1,9 @@
-<% if field == 'select' %>
-  <select class="ls-custom-select">
-    <% (1..4).each do |i| %>
-      <option value="<%= i %>"> Opção <%= i %> </option>
-    <% end %>
-  </select>
-<% end %>
+<div class="ls-custom-select">
+  <% if field == 'select' %>
+    <select class="ls-select">
+      <% (1..4).each do |i| %>
+        <option value="<%= i %>"> Opção <%= i %> </option>
+      <% end %>
+    </select>
+  <% end %>
+</div>

From b9399d4cd5175f63806a558091d8ad4e6a038dc3 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 16:30:02 -0200
Subject: [PATCH 07/32] update sass version

---
 Gemfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile b/Gemfile
index c68ee2ad6..3bfca7568 100644
--- a/Gemfile
+++ b/Gemfile
@@ -8,7 +8,7 @@ gem 'middleman-blog', '~> 3.5.3'
 gem 'eco'
 
 gem 'compass', '~> 1.0.0.alpha.19'
-gem 'sass', '~> 3.3.4'
+gem 'sass', '~> 3.3.9'
 
 gem 'jasmine'
 gem 'therubyracer' # faster JS compiles

From 025da40093aa3a54afe283cf29cd5ce0204ee3a2 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 16:30:37 -0200
Subject: [PATCH 08/32] replacing map-fetch to map-get in the color theme

---
 source/assets/stylesheets/locastyle/base/_color-theme.sass | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/assets/stylesheets/locastyle/base/_color-theme.sass b/source/assets/stylesheets/locastyle/base/_color-theme.sass
index 296603dd2..6e73dd31e 100644
--- a/source/assets/stylesheets/locastyle/base/_color-theme.sass
+++ b/source/assets/stylesheets/locastyle/base/_color-theme.sass
@@ -1,6 +1,6 @@
 =theme-color($theme-name, $colors)
-  $color1: map-fetch($colors, color1)
-  $color2: map-fetch($colors, color2)
+  $color1: map-get($colors, color1)
+  $color2: map-get($colors, color2)
 
   .ls-bg-theme-#{$theme-name}
     background-color: $color1

From 1874ac867fcfe42c4f065b56fc26daac89cd3777 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 19:15:36 -0200
Subject: [PATCH 09/32] replacing name and update html

---
 .../documentacao/shared/box-info/_box-info-no-data.erb   | 9 +++++++++
 .../shared/{box/_box-grid.erb => box-info/_box-info.erb} | 9 +++------
 source/documentacao/shared/box/_box-grid-no-data.erb     | 9 ---------
 3 files changed, 12 insertions(+), 15 deletions(-)
 create mode 100644 source/documentacao/shared/box-info/_box-info-no-data.erb
 rename source/documentacao/shared/{box/_box-grid.erb => box-info/_box-info.erb} (81%)
 delete mode 100644 source/documentacao/shared/box/_box-grid-no-data.erb

diff --git a/source/documentacao/shared/box-info/_box-info-no-data.erb b/source/documentacao/shared/box-info/_box-info-no-data.erb
new file mode 100644
index 000000000..6da5f9ee9
--- /dev/null
+++ b/source/documentacao/shared/box-info/_box-info-no-data.erb
@@ -0,0 +1,9 @@
+<div class="ls-box ls-board-box">
+  <header class="ls-info-header">
+    <h2 class="ls-title-3 ls-ico-dashboard">Consumo de envios</h2>
+    <p class="ls-float-right ls-float-none-xs ls-small-info">
+      Quantidade válida até <strong>22/07/2014</strong>
+    </p>
+  </header>
+  <p class="ls-no-data">Ainda não existem dados suficientes para esta visualização.</p>
+</div>
diff --git a/source/documentacao/shared/box/_box-grid.erb b/source/documentacao/shared/box-info/_box-info.erb
similarity index 81%
rename from source/documentacao/shared/box/_box-grid.erb
rename to source/documentacao/shared/box-info/_box-info.erb
index f8aabc72d..5187b6914 100644
--- a/source/documentacao/shared/box/_box-grid.erb
+++ b/source/documentacao/shared/box-info/_box-info.erb
@@ -1,7 +1,7 @@
 <div class="ls-box ls-board-box">
   <header class="ls-info-header">
-      <p class="ls-float-right ls-float-none-xs ls-small-info">Quantidade válida até <strong>22/07/2014</strong></p>
-      <h2 class="ls-title-3 ls-ico-dashboard">Consumo de envios</h2>
+    <h2 class="ls-title-3 ls-ico-dashboard">Consumo de envios</h2>
+    <p class="ls-float-right ls-float-none-xs ls-small-info">Quantidade válida até <strong>22/07/2014</strong></p>
   </header>
   <div id="sending-stats" class="row">
     <div class="col-sm-6 col-md-3">
@@ -12,22 +12,19 @@
         <a href="#" aria-label="Mudar o Plano de Revenda" class="ls-btn ls-btn-sm" title="Mudar o Plano de Revenda">Mudar de plano</a>
       </div>
     </div>
-
     <div class="col-sm-6 col-md-3">
       <div class="ls-box">
         <h6 class="ls-title-4">AVULSO</h6>
         <strong>0</strong>
-        <a href="#" aria-label="Comprar mais envios" class="ls-btn ls-btn-sm" title="Comprar mais envios">Comprar mais envios</a>
+        <a href="#" aria-label="Comprar mais envios" class="ls-btn ls-btn-sm" title="Comprar mais">Comprar mais</a>
       </div>
     </div>
-
     <div class="col-sm-6 col-md-3">
       <div class="ls-box">
         <h6 class="ls-title-4">DISTRIBUÍDO</h6>
           <strong>10.000</strong>
       </div>
     </div>
-
     <div class="col-sm-6 col-md-3">
       <div class="ls-box">
         <h6 class="ls-title-4 color-default">DISPONÍVEL</h6>
diff --git a/source/documentacao/shared/box/_box-grid-no-data.erb b/source/documentacao/shared/box/_box-grid-no-data.erb
deleted file mode 100644
index f2287473e..000000000
--- a/source/documentacao/shared/box/_box-grid-no-data.erb
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="ls-box ls-board-box">
-  <header class="ls-info-header">
-      <p class="ls-float-right ls-float-none-xs ls-small-info">
-        Quantidade válida até <strong>22/07/2014</strong>
-      </p>
-      <h2 class="ls-title-3 ls-ico-dashboard">Consumo de envios</h2>
-  </header>
-  <p class="ls-no-data">Ainda não existem dados suficientes para esta visualização.</p>
-</div>

From 7191f8724a655a58a38507528d5bb21033b7e9c7 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 19:16:27 -0200
Subject: [PATCH 10/32] creating documentation of information box

---
 .../componentes/box-info.html.erb             | 76 +++++++++++++++++++
 .../shared/box-info/_box-info-demo.erb        | 32 ++++++++
 .../shared/box-info/box-info-demo-mobile.erb  |  9 +++
 .../shared/box-info/box-info-mobile.erb       |  9 +++
 .../box-info/box-info-no-data-mobile.erb      |  9 +++
 source/partials/_doc-menu-components.html.erb |  1 +
 6 files changed, 136 insertions(+)
 create mode 100644 source/documentacao/componentes/box-info.html.erb
 create mode 100644 source/documentacao/shared/box-info/_box-info-demo.erb
 create mode 100644 source/documentacao/shared/box-info/box-info-demo-mobile.erb
 create mode 100644 source/documentacao/shared/box-info/box-info-mobile.erb
 create mode 100644 source/documentacao/shared/box-info/box-info-no-data-mobile.erb

diff --git a/source/documentacao/componentes/box-info.html.erb b/source/documentacao/componentes/box-info.html.erb
new file mode 100644
index 000000000..3f7dbfa67
--- /dev/null
+++ b/source/documentacao/componentes/box-info.html.erb
@@ -0,0 +1,76 @@
+---
+title: Box Informativo
+description: Elemento que pode ser utilizado no dashboard de um painel para exibir informações resumidas, principalmente dados numéricos.
+type: component
+---
+
+<%= partial 'partials/doc-menu-components'%>
+
+<section class="col-md-9">
+
+  <%= partial 'partials/doc-intro-content' %>
+
+  <div class="row ls-overflow-hidden">
+    <div class="col-md-5">
+      <div class="ls-box">
+        <h2 class="ls-title-5">Quando <strong>usar?</strong></h2>
+        <p>- Há necessidade de exibir dados numéricos (valores, quantidades, etc.) sobre um o serviço contratado.</p>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="ls-box">
+        <h2 class="ls-title-5">Quando <strong>não</strong> usar?</h2>
+        <p>- A informação tenha foco em ajuda ou dica.</p>
+        <p>- A informação seja um identificador, endereço ou nome de servidor.</p>
+      </div>
+    </div>
+  </div>
+  <br>
+
+  <div class="ls-box-demo">
+    <h3 class="doc-title-6">Desktop</h3>
+    <%= partial 'documentacao/shared/box-info/_box-info' %>
+    <h3 class="doc-title-6">Mobile</h3>
+    <iframe width="320" height="680" src="<%= base_url %>/documentacao/shared/box-info/box-info-mobile" frameborder="0"></iframe>
+  </div>
+  <% code("html") do %><%= partial 'documentacao/shared/box-info/_box-info' %><% end %>
+
+
+  <p>Casa você deseje exibir o box sem dados, basta inserir no conteúdo, um parágrafo a classe <code>.ls-no-data</code>:</p>
+
+  <div class="ls-box-demo">
+    <h3 class="doc-title-6">Desktop</h3>
+    <%= partial 'documentacao/shared/box-info/_box-info-no-data' %>
+    <h3 class="doc-title-6">Mobile</h3>
+    <iframe width="320" height="320" src="<%= base_url %>/documentacao/shared/box-info/box-info-no-data-mobile" frameborder="0"></iframe>
+  </div>
+  <% code("html") do %><%= partial 'documentacao/shared/box-info/_box-info-no-data' %><% end %>
+
+
+  <h2 class="doc-title-5">Opções e variações da estrutura</h2>
+  <p>
+    <strong>Label</strong><br>
+    Os títulos podem variar de acordo com o contexto, por exemplo: Informações do plano, Quantidade de sites, etc.
+  </p>
+  <p>
+    <strong>Escala</strong><br>
+    Os números exibidos podem ser simples com até 6 dígitos (100.000) ou informativos, como 10 milhões, 100 GB, 1.000 sites, etc.
+  </p>
+  <p>
+    <strong>Status</strong><br>
+    Pode ficar oculto ou ser exibido no canto direito.
+  </p>
+  <p>
+    <strong>Ação principal</strong><br>
+    No lugar do status, é possível exibir um botão de ação.
+  </p>
+
+  <div class="ls-box-demo">
+    <h3 class="doc-title-6">Desktop</h3>
+    <%= partial 'documentacao/shared/box-info/_box-info-demo' %>
+    <h3 class="doc-title-6">Mobile</h3>
+    <iframe width="320" height="580" src="<%= base_url %>/documentacao/shared/box-info/box-info-demo-mobile" frameborder="0"></iframe>
+  </div>
+  <% code("html") do %><%= partial 'documentacao/shared/box-info/_box-info-demo' %><% end %>
+
+</section>
diff --git a/source/documentacao/shared/box-info/_box-info-demo.erb b/source/documentacao/shared/box-info/_box-info-demo.erb
new file mode 100644
index 000000000..8b9a3cd2a
--- /dev/null
+++ b/source/documentacao/shared/box-info/_box-info-demo.erb
@@ -0,0 +1,32 @@
+<div class="ls-box ls-board-box">
+  <header class="ls-info-header">
+    <h2 class="ls-title-3">Nome do produto</h2>
+    <a href="" class="ls-btn">Gerenciar limites</a>
+  </header>
+  <div id="sending-stats" class="row">
+    <div class="col-sm-6 col-md-3">
+      <div class="ls-box">
+        <h6 class="ls-title-4">Label</h6>
+          <strong>0</strong>
+      </div>
+    </div>
+    <div class="col-sm-6 col-md-3">
+      <div class="ls-box">
+        <h6 class="ls-title-4">Label</h6>
+        <strong>10</strong>
+      </div>
+    </div>
+    <div class="col-sm-6 col-md-3">
+      <div class="ls-box">
+        <h6 class="ls-title-4">Label</h6>
+          <strong>0</strong>
+      </div>
+    </div>
+    <div class="col-sm-6 col-md-3">
+      <div class="ls-box">
+        <h6 class="ls-title-4 color-default">Label</h6>
+          <strong>10</strong>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/source/documentacao/shared/box-info/box-info-demo-mobile.erb b/source/documentacao/shared/box-info/box-info-demo-mobile.erb
new file mode 100644
index 000000000..98b1ff716
--- /dev/null
+++ b/source/documentacao/shared/box-info/box-info-demo-mobile.erb
@@ -0,0 +1,9 @@
+---
+title: Box Informativo
+description: Elemento que pode ser utilizado no dashboard de um painel para exibir informações resumidas, principalmente dados numéricos.
+type: component
+layout: mobile
+---
+
+
+<%= partial 'documentacao/shared/box-info/_box-info-demo' %>
diff --git a/source/documentacao/shared/box-info/box-info-mobile.erb b/source/documentacao/shared/box-info/box-info-mobile.erb
new file mode 100644
index 000000000..43d6cab8a
--- /dev/null
+++ b/source/documentacao/shared/box-info/box-info-mobile.erb
@@ -0,0 +1,9 @@
+---
+title: Box Informativo
+description: Elemento que pode ser utilizado no dashboard de um painel para exibir informações resumidas, principalmente dados numéricos.
+type: component
+layout: mobile
+---
+
+
+<%= partial 'documentacao/shared/box-info/_box-info' %>
diff --git a/source/documentacao/shared/box-info/box-info-no-data-mobile.erb b/source/documentacao/shared/box-info/box-info-no-data-mobile.erb
new file mode 100644
index 000000000..16b4340e3
--- /dev/null
+++ b/source/documentacao/shared/box-info/box-info-no-data-mobile.erb
@@ -0,0 +1,9 @@
+---
+title: Box Informativo
+description: Elemento que pode ser utilizado no dashboard de um painel para exibir informações resumidas, principalmente dados numéricos.
+type: component
+layout: mobile
+---
+
+
+<%= partial 'documentacao/shared/box-info/_box-info-no-data' %>
diff --git a/source/partials/_doc-menu-components.html.erb b/source/partials/_doc-menu-components.html.erb
index 9d7c1a30d..bf2ea0dee 100644
--- a/source/partials/_doc-menu-components.html.erb
+++ b/source/partials/_doc-menu-components.html.erb
@@ -8,6 +8,7 @@
       <%= menu_tag("/documentacao/componentes/botao-switch/", "Botão Switch") %>
       <%= menu_tag("/documentacao/componentes/botoes/", "Botões") %>
       <%= menu_tag("/documentacao/componentes/box/", "Box genérico") %>
+      <%= menu_tag("/documentacao/componentes/box-info/", "Box Informativo") %>
       <%= menu_tag("/documentacao/componentes/alert-box/", "Box de notificações") %>
       <%= menu_tag("/documentacao/componentes/breadcrumb/", "Breadcrumb") %>
       <%= menu_tag("/documentacao/componentes/collapse/", "Collapse &amp; Accordeon") %>

From 45fc81499cee8967ab93000cd1e6a1385e051542 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Thu, 13 Nov 2014 19:21:43 -0200
Subject: [PATCH 11/32] adding important when element has class
 color-theme-color

---
 source/assets/stylesheets/locastyle/base/_color-theme.sass | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/source/assets/stylesheets/locastyle/base/_color-theme.sass b/source/assets/stylesheets/locastyle/base/_color-theme.sass
index 296603dd2..94bda222f 100644
--- a/source/assets/stylesheets/locastyle/base/_color-theme.sass
+++ b/source/assets/stylesheets/locastyle/base/_color-theme.sass
@@ -7,8 +7,10 @@
 
   .ls-theme-#{$theme-name}
 
+    .ls-color-theme
+      color: mix($color-mix, $color1, 20%)!important
+
     p a:not([class*="ls-btn"]),
-    .ls-color-theme,
     .ls-breadcrumb a,
     .hopscotch-bubble a
       color: mix($color-mix, $color1, 20%)

From 1858b1367680e0fa06d800e4349dfc4bdc41cd71 Mon Sep 17 00:00:00 2001
From: Antonio Junior <junyor@hotmail.co.uk>
Date: Mon, 10 Nov 2014 10:32:17 -0200
Subject: [PATCH 12/32] Replacing button to link and and add href.

---
 source/documentacao/exemplos/forgot-password.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/documentacao/exemplos/forgot-password.html.erb b/source/documentacao/exemplos/forgot-password.html.erb
index 9f07500a7..faeb8395e 100644
--- a/source/documentacao/exemplos/forgot-password.html.erb
+++ b/source/documentacao/exemplos/forgot-password.html.erb
@@ -15,7 +15,7 @@ layout: login
       </label>
 
       <div class="ls-form-actions">
-        <input type="submit" value="Recuperar senha" class="ls-btn-primary">
+        <%= link_to "Recuperar senha", "verify-email", class: "ls-btn-primary" %>
         <a href="#" class="ls-btn">Cancelar</a>
       </div>
 

From 0c72802d06bf6a4d65ab830a6cbbbe96a07eb517 Mon Sep 17 00:00:00 2001
From: Antonio Junior <junyor@hotmail.co.uk>
Date: Fri, 14 Nov 2014 14:18:36 -0200
Subject: [PATCH 13/32] Removing customFiels on initializer.

---
 source/assets/javascripts/locastyle/_initializer.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source/assets/javascripts/locastyle/_initializer.js b/source/assets/javascripts/locastyle/_initializer.js
index 9dff82b93..1007456f6 100644
--- a/source/assets/javascripts/locastyle/_initializer.js
+++ b/source/assets/javascripts/locastyle/_initializer.js
@@ -9,7 +9,6 @@ var locastyle = (function() {
     locastyle.btnGroup.init();
     locastyle.alert.init();
     locastyle.datepicker.init();
-    locastyle.customFields.init();
     locastyle.form.togglePasswordField();
     checkClassForTrack();
   }

From f038cc190c17670804b26ae85cab7b07145ee027 Mon Sep 17 00:00:00 2001
From: Antonio Junior <junyor@hotmail.co.uk>
Date: Fri, 14 Nov 2014 14:18:51 -0200
Subject: [PATCH 14/32] Removing commented code JS.

---
 source/assets/javascripts/docs/_docs.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/source/assets/javascripts/docs/_docs.js b/source/assets/javascripts/docs/_docs.js
index a20040bda..fcb1a9650 100644
--- a/source/assets/javascripts/docs/_docs.js
+++ b/source/assets/javascripts/docs/_docs.js
@@ -29,9 +29,6 @@ var lsdocs = (function() {
     $('.doc-example-markup').each(function (i, example) {
       var $example = $(example);
 
-      // $(this).text(html);
-      // $(this).removeClass('language-html').addClass('language-markup');
-
       $example
         .append('<menu class="doc-example-menu"> <button class="doc-example-menu-demo doc-example-menu-active"> <i class="ls-ico-cog"></i> </button> <button class="doc-example-menu-code"> <i class="ls-ico-chevron-left"></i> <i class="ls-ico-chevron-right"></i> </button> </menu>')
         .append('<div class="doc-example-markup-area"><code class="language-markup"></code></div>');

From eb981e2af53dc0f5c6b9043e30796a1b9bef8cfe Mon Sep 17 00:00:00 2001
From: Antonio Junior <junyor@hotmail.co.uk>
Date: Fri, 14 Nov 2014 14:18:58 -0200
Subject: [PATCH 15/32] Adjusting function.

---
 source/assets/javascripts/docs/_docs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/assets/javascripts/docs/_docs.js b/source/assets/javascripts/docs/_docs.js
index fcb1a9650..133af747f 100644
--- a/source/assets/javascripts/docs/_docs.js
+++ b/source/assets/javascripts/docs/_docs.js
@@ -22,7 +22,7 @@ var lsdocs = (function() {
   function toggleMenuActive() {
     $('.doc-menu').on('click', function() {
       $(this).toggleClass('active');
-    })
+    });
   }
 
   function markupExamples () {

From e8bb9efc429704b6f76f8ce336963975272f0679 Mon Sep 17 00:00:00 2001
From: Wylkon Queiroz <wylkon@wylkon.com.br>
Date: Mon, 17 Nov 2014 16:00:27 -0200
Subject: [PATCH 16/32] Create new tooltip disposition

---
 .../locastyle/modules/_tooltip.sass           | 29 +++++++++++++++++++
 source/documentacao/shared/_tooltip.erb       |  1 +
 2 files changed, 30 insertions(+)

diff --git a/source/assets/stylesheets/locastyle/modules/_tooltip.sass b/source/assets/stylesheets/locastyle/modules/_tooltip.sass
index 3b4fb2814..8a8f7b551 100644
--- a/source/assets/stylesheets/locastyle/modules/_tooltip.sass
+++ b/source/assets/stylesheets/locastyle/modules/_tooltip.sass
@@ -137,3 +137,32 @@
   &:hover:before,
   &:focus:before
     top: 7px
+
+/* Top-left */
+
+.ls-tooltip-top-left
+  &:after,
+  &:before
+    +single-transition(bottom, 0.25s, ease-in-out)
+    +single-transition(opacity, 0.25s, ease-in-out)
+    bottom: 90%
+    left: -9999px
+    margin-bottom: 12px
+
+  &:before
+    border-color: #222 transparent transparent transparent
+    margin-bottom: 0
+
+  &:hover:after,
+  &:focus:after,
+  &:focus:after,
+  &:hover:before,
+  &:focus:before,
+  &:focus:before
+    bottom: 80%
+    left: auto
+    right: 0
+
+  &:hover:before,
+  &:focus:before
+    right: 15px
diff --git a/source/documentacao/shared/_tooltip.erb b/source/documentacao/shared/_tooltip.erb
index 738e64268..a5cf980f4 100644
--- a/source/documentacao/shared/_tooltip.erb
+++ b/source/documentacao/shared/_tooltip.erb
@@ -2,3 +2,4 @@
 <a href="#" class="ls-tooltip-right ls-btn" aria-label="Conteúdo exibido no lado direito">Direita</a>
 <a href="#" class="ls-tooltip-bottom ls-btn" aria-label="Conteúdo exibido abaixo">Baixo</a>
 <a href="#" class="ls-tooltip-left ls-btn" aria-label="Conteúdo exibido no lado esquerdo">Esquerda</a>
+<a href="#" class="ls-tooltip-top-left ls-btn" aria-label="Conteúdo exibido no topo para a esquerda">Topo Esquerda</a>

From 5e80de405a827cc62975a6711825802343c2cf16 Mon Sep 17 00:00:00 2001
From: Antonio Junior <junyor@hotmail.co.uk>
Date: Wed, 19 Nov 2014 10:35:00 -0200
Subject: [PATCH 17/32] Renaming file.

---
 .../componentes/{box.html.erb => generic-box.html.erb}            | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename source/documentacao/componentes/{box.html.erb => generic-box.html.erb} (100%)

diff --git a/source/documentacao/componentes/box.html.erb b/source/documentacao/componentes/generic-box.html.erb
similarity index 100%
rename from source/documentacao/componentes/box.html.erb
rename to source/documentacao/componentes/generic-box.html.erb

From abd7e13686688df69308bf7746d4fca91683405b Mon Sep 17 00:00:00 2001
From: Antonio Junior <junyor@hotmail.co.uk>
Date: Wed, 19 Nov 2014 10:58:26 -0200
Subject: [PATCH 18/32] Adjusting name link on menu.

---
 source/partials/_doc-menu-components.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/partials/_doc-menu-components.html.erb b/source/partials/_doc-menu-components.html.erb
index bf2ea0dee..e4420730f 100644
--- a/source/partials/_doc-menu-components.html.erb
+++ b/source/partials/_doc-menu-components.html.erb
@@ -7,7 +7,7 @@
       <%= menu_tag("/documentacao/componentes/barra-de-progresso/", "Barra de Progresso") %>
       <%= menu_tag("/documentacao/componentes/botao-switch/", "Botão Switch") %>
       <%= menu_tag("/documentacao/componentes/botoes/", "Botões") %>
-      <%= menu_tag("/documentacao/componentes/box/", "Box genérico") %>
+      <%= menu_tag("/documentacao/componentes/generic-box/", "Box genérico") %>
       <%= menu_tag("/documentacao/componentes/box-info/", "Box Informativo") %>
       <%= menu_tag("/documentacao/componentes/alert-box/", "Box de notificações") %>
       <%= menu_tag("/documentacao/componentes/breadcrumb/", "Breadcrumb") %>

From aa15872f0cd2a466368d4055ed91996a7c43ef3b Mon Sep 17 00:00:00 2001
From: Antonio Junior <junyor@hotmail.co.uk>
Date: Wed, 19 Nov 2014 10:58:50 -0200
Subject: [PATCH 19/32] Adding documentation shared examples.

---
 .../shared/box/_box-grid-no-data.erb          |  9 +++++
 source/documentacao/shared/box/_box-grid.erb  | 39 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 source/documentacao/shared/box/_box-grid-no-data.erb
 create mode 100644 source/documentacao/shared/box/_box-grid.erb

diff --git a/source/documentacao/shared/box/_box-grid-no-data.erb b/source/documentacao/shared/box/_box-grid-no-data.erb
new file mode 100644
index 000000000..f2287473e
--- /dev/null
+++ b/source/documentacao/shared/box/_box-grid-no-data.erb
@@ -0,0 +1,9 @@
+<div class="ls-box ls-board-box">
+  <header class="ls-info-header">
+      <p class="ls-float-right ls-float-none-xs ls-small-info">
+        Quantidade válida até <strong>22/07/2014</strong>
+      </p>
+      <h2 class="ls-title-3 ls-ico-dashboard">Consumo de envios</h2>
+  </header>
+  <p class="ls-no-data">Ainda não existem dados suficientes para esta visualização.</p>
+</div>
diff --git a/source/documentacao/shared/box/_box-grid.erb b/source/documentacao/shared/box/_box-grid.erb
new file mode 100644
index 000000000..f8aabc72d
--- /dev/null
+++ b/source/documentacao/shared/box/_box-grid.erb
@@ -0,0 +1,39 @@
+<div class="ls-box ls-board-box">
+  <header class="ls-info-header">
+      <p class="ls-float-right ls-float-none-xs ls-small-info">Quantidade válida até <strong>22/07/2014</strong></p>
+      <h2 class="ls-title-3 ls-ico-dashboard">Consumo de envios</h2>
+  </header>
+  <div id="sending-stats" class="row">
+    <div class="col-sm-6 col-md-3">
+      <div class="ls-box">
+        <h6 class="ls-title-4">CONTRATADO</h6>
+          <strong>100.000</strong>
+          <small>envios por mês</small>
+        <a href="#" aria-label="Mudar o Plano de Revenda" class="ls-btn ls-btn-sm" title="Mudar o Plano de Revenda">Mudar de plano</a>
+      </div>
+    </div>
+
+    <div class="col-sm-6 col-md-3">
+      <div class="ls-box">
+        <h6 class="ls-title-4">AVULSO</h6>
+        <strong>0</strong>
+        <a href="#" aria-label="Comprar mais envios" class="ls-btn ls-btn-sm" title="Comprar mais envios">Comprar mais envios</a>
+      </div>
+    </div>
+
+    <div class="col-sm-6 col-md-3">
+      <div class="ls-box">
+        <h6 class="ls-title-4">DISTRIBUÍDO</h6>
+          <strong>10.000</strong>
+      </div>
+    </div>
+
+    <div class="col-sm-6 col-md-3">
+      <div class="ls-box">
+        <h6 class="ls-title-4 color-default">DISPONÍVEL</h6>
+          <strong class="ls-color-theme">90%</strong>
+          <small>90.000</small>
+      </div>
+    </div>
+  </div>
+</div>

From 4fc99119328e36f02f5d840d02a87f990bfcd49a Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Wed, 19 Nov 2014 14:14:56 -0200
Subject: [PATCH 20/32] adding static html to example

---
 .../exemplos/painel2/config-email.html.erb         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/source/documentacao/exemplos/painel2/config-email.html.erb b/source/documentacao/exemplos/painel2/config-email.html.erb
index b037e14d2..9237310c3 100644
--- a/source/documentacao/exemplos/painel2/config-email.html.erb
+++ b/source/documentacao/exemplos/painel2/config-email.html.erb
@@ -59,6 +59,20 @@ title_product: SMTP Locaweb
         </td>
       </tr>
     <% end %>
+      <tr>
+        <td>novodominio.com.br</td>
+        <td>Configurado</td>
+        <td class="ls-txt-right ls-regroup">
+          <a href="#" class="ls-btn ls-btn-xs">Configuração</a>
+          <div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
+            <a href="#" class="ls-btn ls-btn-xs" role="combobox" aria-expanded="false"></a>
+            <ul class="ls-dropdown-nav" aria-hidden="true">
+              <li><a href="#" role="option">Exemplo 1</a></li>
+              <li><a href="#" role="option">Exemplo 2</a></li>
+            </ul>
+          </div>
+        </td>
+      </tr>
   </tbody>
 </table>
 

From ee96630ec44b8de323ed67f8c9f2ff4e1ac34bb5 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Wed, 19 Nov 2014 14:15:31 -0200
Subject: [PATCH 21/32] fix to regroup buttons in mobile

---
 source/assets/javascripts/locastyle/_btn-group.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/assets/javascripts/locastyle/_btn-group.js b/source/assets/javascripts/locastyle/_btn-group.js
index 7099f2625..577c938ae 100644
--- a/source/assets/javascripts/locastyle/_btn-group.js
+++ b/source/assets/javascripts/locastyle/_btn-group.js
@@ -37,8 +37,8 @@ locastyle.btnGroup = (function() {
   // agrupa os botões em um dropdown
   function group($element){
     var list = $($element).wrap('<li class="hidden-xs hidden-sm">');
-    $(".ls-regroup a[class*='ls-btn']").removeClass();
-    $('.ls-regroup').html(locastyle.templates.dropdown(list));
+    $element.parents('.ls-regroup').find('a[class*="ls-btn"]').removeClass();
+    $element.parents('.ls-regroup').html(locastyle.templates.dropdown(list));
   }
 
   return {

From 58bd806b33b4c8b51e8eb6f3777f27c0821ba032 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Wed, 19 Nov 2014 15:59:09 -0200
Subject: [PATCH 22/32] test jasmine

---
 .../exemplos/painel2/config-email.html.erb            |  2 +-
 spec/javascripts/buttons_spec.js                      | 11 +++++++++++
 spec/javascripts/fixtures/buttons_fixture.html        |  7 +++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/source/documentacao/exemplos/painel2/config-email.html.erb b/source/documentacao/exemplos/painel2/config-email.html.erb
index 9237310c3..4b6acda1e 100644
--- a/source/documentacao/exemplos/painel2/config-email.html.erb
+++ b/source/documentacao/exemplos/painel2/config-email.html.erb
@@ -62,7 +62,7 @@ title_product: SMTP Locaweb
       <tr>
         <td>novodominio.com.br</td>
         <td>Configurado</td>
-        <td class="ls-txt-right ls-regroup">
+        <td class="ls-txt-right ls-regroup test">
           <a href="#" class="ls-btn ls-btn-xs">Configuração</a>
           <div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
             <a href="#" class="ls-btn ls-btn-xs" role="combobox" aria-expanded="false"></a>
diff --git a/spec/javascripts/buttons_spec.js b/spec/javascripts/buttons_spec.js
index 6941a51d0..3bb1aab29 100644
--- a/spec/javascripts/buttons_spec.js
+++ b/spec/javascripts/buttons_spec.js
@@ -21,5 +21,16 @@ describe("Buttons group: ", function(){
 
   });
 
+  describe("Regroup mobile", function(){
+    it("Dropdown should have the same amount of links while on desktop", function(){
+      $('.ls-regroup').each(function(){
+        var $this = $(this)
+        var linkLength = $this.find('a, button').length -1
+        locastyle.breakpointClass = "ls-screen-xs";
+        locastyle.btnGroup.init();
+        expect(($this).find('.ls-dropdown-nav').find('a,button')).toHaveLength(linkLength);
+      });
+    });
+  });
 
 });
diff --git a/spec/javascripts/fixtures/buttons_fixture.html b/spec/javascripts/fixtures/buttons_fixture.html
index 23085b977..870ed2720 100644
--- a/spec/javascripts/fixtures/buttons_fixture.html
+++ b/spec/javascripts/fixtures/buttons_fixture.html
@@ -3,3 +3,10 @@
   <a href="#3" class="ls-btn-dark">Dark</a>
   <a href="#4" class="ls-btn-danger">Danger</a>
 </div>
+
+<div id="myGroupButtons2" class="ls-regroup">
+  <a href="#" id="myButtonInDropdown" class="ls-btn-primary">Primary</a>
+  <a href="#" class="ls-btn-dark">Dark</a>
+  <button class="ls-btn-dark">Dark</button>
+  <a href="#" class="ls-btn-danger">Danger</a>
+</div>

From b9966b9f9b8497c1d61cfae07656b48a11fbbb2d Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Wed, 19 Nov 2014 15:59:21 -0200
Subject: [PATCH 23/32] removing trash

---
 spec/javascripts/support/jasmine.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml
index 800c9d017..619cc5c96 100644
--- a/spec/javascripts/support/jasmine.yml
+++ b/spec/javascripts/support/jasmine.yml
@@ -30,7 +30,6 @@ src_files:
     - source/assets/javascripts/locastyle/_alert.js
     - source/assets/javascripts/locastyle/_form.js
     - source/assets/javascripts/locastyle/_dismiss.js
-    - source/assets/javascripts/locastyle/_custom-fields.js
     - source/assets/javascripts/locastyle/_breakpoint-check.js
     - source/assets/javascripts/locastyle/_topbar-curtain.js
     - source/assets/javascripts/locastyle/_btn-group.js

From 94856359ab4b333fb493ec25ad2d744b2366cfa8 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Wed, 19 Nov 2014 17:30:10 -0200
Subject: [PATCH 24/32] adding semicolon

---
 spec/javascripts/buttons_spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/javascripts/buttons_spec.js b/spec/javascripts/buttons_spec.js
index 3bb1aab29..89a8afe4a 100644
--- a/spec/javascripts/buttons_spec.js
+++ b/spec/javascripts/buttons_spec.js
@@ -24,8 +24,8 @@ describe("Buttons group: ", function(){
   describe("Regroup mobile", function(){
     it("Dropdown should have the same amount of links while on desktop", function(){
       $('.ls-regroup').each(function(){
-        var $this = $(this)
-        var linkLength = $this.find('a, button').length -1
+        var $this = $(this);
+        var linkLength = $this.find('a, button').length -1;
         locastyle.breakpointClass = "ls-screen-xs";
         locastyle.btnGroup.init();
         expect(($this).find('.ls-dropdown-nav').find('a,button')).toHaveLength(linkLength);

From d65db1d10c92c1bacdaf71d28da915dce645d2ee Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Fri, 21 Nov 2014 10:39:44 -0200
Subject: [PATCH 25/32] new test checking and comparing the texts of links and
 buttons when inside ls-regroup

---
 spec/javascripts/buttons_spec.js               | 15 +++++++++++++--
 spec/javascripts/fixtures/buttons_fixture.html |  8 ++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/spec/javascripts/buttons_spec.js b/spec/javascripts/buttons_spec.js
index 89a8afe4a..c8905da76 100644
--- a/spec/javascripts/buttons_spec.js
+++ b/spec/javascripts/buttons_spec.js
@@ -22,15 +22,26 @@ describe("Buttons group: ", function(){
   });
 
   describe("Regroup mobile", function(){
-    it("Dropdown should have the same amount of links while on desktop", function(){
+    it("should count and comparable existing links ", function(){
       $('.ls-regroup').each(function(){
         var $this = $(this);
         var linkLength = $this.find('a, button').length -1;
         locastyle.breakpointClass = "ls-screen-xs";
         locastyle.btnGroup.init();
-        expect(($this).find('.ls-dropdown-nav').find('a,button')).toHaveLength(linkLength);
+        expect(($this).find('.ls-dropdown-nav').find('a')).toHaveLength(linkLength);
       });
     });
   });
 
+  describe("Regroup mobile", function(){
+    it("should check and compare the texts of existing links and buttons", function(){
+      var text1 = $('#myButtonInDropdown').text();
+      var text2 = $('#myButtonInDropdown2').text();
+      locastyle.breakpointClass = "ls-screen-xs";
+      locastyle.btnGroup.init();
+      expect($('#myGroupButtons').find('.ls-dropdown-nav').find('a:first')).toHaveText(text1);
+      expect($('#myGroupButtons2').find('.ls-dropdown-nav').find('a:first')).toHaveText(text2);
+    });
+  });
+
 });
diff --git a/spec/javascripts/fixtures/buttons_fixture.html b/spec/javascripts/fixtures/buttons_fixture.html
index 870ed2720..f3c9ad64f 100644
--- a/spec/javascripts/fixtures/buttons_fixture.html
+++ b/spec/javascripts/fixtures/buttons_fixture.html
@@ -5,8 +5,8 @@
 </div>
 
 <div id="myGroupButtons2" class="ls-regroup">
-  <a href="#" id="myButtonInDropdown" class="ls-btn-primary">Primary</a>
-  <a href="#" class="ls-btn-dark">Dark</a>
-  <button class="ls-btn-dark">Dark</button>
-  <a href="#" class="ls-btn-danger">Danger</a>
+  <a href="#5" id="myButtonInDropdown2" class="ls-btn-primary">Link One</a>
+  <a href="#6" class="ls-btn-dark">Link Two</a>
+  <button class="ls-btn-dark">Link Three</button>
+  <a href="#7" class="ls-btn-danger">Link Four</a>
 </div>

From fd646510bedf45d78d7e3f311633783b7075374b Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Fri, 21 Nov 2014 11:02:51 -0200
Subject: [PATCH 26/32] organizing the test code

---
 spec/javascripts/buttons_spec.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/spec/javascripts/buttons_spec.js b/spec/javascripts/buttons_spec.js
index c8905da76..d5f7ebb85 100644
--- a/spec/javascripts/buttons_spec.js
+++ b/spec/javascripts/buttons_spec.js
@@ -28,12 +28,10 @@ describe("Buttons group: ", function(){
         var linkLength = $this.find('a, button').length -1;
         locastyle.breakpointClass = "ls-screen-xs";
         locastyle.btnGroup.init();
-        expect(($this).find('.ls-dropdown-nav').find('a')).toHaveLength(linkLength);
+        expect(($this).find('.ls-dropdown-nav').find('a, button')).toHaveLength(linkLength);
       });
     });
-  });
 
-  describe("Regroup mobile", function(){
     it("should check and compare the texts of existing links and buttons", function(){
       var text1 = $('#myButtonInDropdown').text();
       var text2 = $('#myButtonInDropdown2').text();

From 39ef3a0313f8d4622ed3be96c512c17e51365f90 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Mon, 24 Nov 2014 15:57:04 -0200
Subject: [PATCH 27/32] starting documentation to main structure of
 locawebstyle

---
 .../componentes/estrutura-principal.html.erb  | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 source/documentacao/componentes/estrutura-principal.html.erb

diff --git a/source/documentacao/componentes/estrutura-principal.html.erb b/source/documentacao/componentes/estrutura-principal.html.erb
new file mode 100644
index 000000000..79dd5a724
--- /dev/null
+++ b/source/documentacao/componentes/estrutura-principal.html.erb
@@ -0,0 +1,67 @@
+---
+title: Estrutura principal
+description: É daqui que você vai começar. Nosso Boilerplate responsivo tem header, menu lateral e uma estrutura de conteúdo principal que é fluida, ou seja, sem largura limitada.
+type: component
+---
+
+<%= partial 'partials/doc-menu-components'%>
+
+<section class="col-md-9">
+
+	<%= partial 'partials/doc-intro-content' %>
+
+  <div class="row">
+    <div class="col-md-6">
+      <div class="ls-box">
+        <h2 class="ls-title-5">Quando <strong>usar?</strong></h2>
+        <p>- Sempre que quiser fazer um painel de administração ou um sistema completo, responsivo e bonitão.</p>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="ls-box">
+        <h2 class="ls-title-5">Quando <strong>não</strong> usar?</h2>
+        <p>- Se você está pensando em fazer um site. Essa estrutura foi planejada especialmente para painéis de administração e não é recomendada para sites.</p>
+      </div>
+    </div>
+  </div>
+  <br>
+
+  <h2 class="doc-title-4">Header de painel principal</h2>
+  <p>Você pode inserir um título, um logo, informações adicionais com menor destaque. Do lado direito, uma área para acesso ao perfil e atalhos para outras funcionalidades.</p>
+
+  <div class="ls-box-demo">
+    <h3 class="doc-title-6">Desktop</h3>
+    <%= partial 'documentacao/shared/structure/header-main' %>
+    <h3 class="doc-title-6">Mobile</h3>
+    <iframe class="doc-border-silver" width="340" height="400" src="<%= base_url %>/documentacao/shared/structure/header-main-mobile" frameborder="0"></iframe>
+  </div>
+  <% code("html") do %><%= partial 'documentacao/shared/structure/header-main-mobile' %><% end %>
+
+
+  <h2 class="doc-title-4">Header de painel interno</h2>
+  <p>Muito semelhante ao header principal, com a inclusão de um botão voltar na lateral superior esquerda. Esta versão deve ser utilizada quando o painel é acessado a partir de uma listagem. O botão voltar substitui a navegação pelo browser e também ajuda o usuário a se localizar, indicando que ele está um nível abaixo.</p>
+
+  <div class="ls-box-demo">
+    <h3 class="doc-title-6">Desktop</h3>
+    <%= partial 'documentacao/shared/structure/header-internal' %>
+    <h3 class="doc-title-6">Mobile</h3>
+    <iframe class="doc-border-silver" width="340" height="400" src="<%= base_url %>/documentacao/shared/structure/header-internal-mobile" frameborder="0"></iframe>
+  </div>
+  <% code("html") do %><%= partial 'documentacao/shared/structure/header-internal-mobile' %><% end %>
+
+
+  <h2 class="doc-title-4">Menu, submenu e seções internas</h2>
+  <p>Do mais simples ao mais complexo, com o Locastyle é possível criar painéis para todos os tipos de demanda. O menu pode receber até itens de 2º nívele as páginas internas podem ser divididas em seções.</p>
+
+  <div class="ls-box-demo">
+    <h3 class="doc-title-6">Desktop</h3>
+    <div id="doc-header-full" class="doc-border-silver">
+      <%= partial 'documentacao/shared/structure/header-full' %>
+    </div>
+    <h3 class="doc-title-6">Mobile</h3>
+    <iframe class="doc-border-silver" width="340" height="400" src="<%= base_url %>/documentacao/shared/structure/header-full-mobile" frameborder="0"></iframe>
+  </div>
+  <% code("html") do %><%= partial 'documentacao/shared/structure/header-full' %><% end %>
+
+
+</section>

From 376ec50ca7a7ecd0c317246e0ecda8d60f58d0f9 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Mon, 24 Nov 2014 15:57:35 -0200
Subject: [PATCH 28/32] adding example main header

---
 .../shared/structure/_header-main.erb         | 72 +++++++++++++++++++
 .../shared/structure/header-main-mobile.erb   | 25 +++++++
 2 files changed, 97 insertions(+)
 create mode 100644 source/documentacao/shared/structure/_header-main.erb
 create mode 100644 source/documentacao/shared/structure/header-main-mobile.erb

diff --git a/source/documentacao/shared/structure/_header-main.erb b/source/documentacao/shared/structure/_header-main.erb
new file mode 100644
index 000000000..c08955af4
--- /dev/null
+++ b/source/documentacao/shared/structure/_header-main.erb
@@ -0,0 +1,72 @@
+<div class="ls-topbar">
+
+  <!-- Barra de Notificações -->
+  <div class="ls-notification-topbar">
+
+    <!-- Links de apoio -->
+    <div class="ls-alerts-list">
+      <a href="#" class="ls-ico-bell-o" data-counter="8" data-ls-module="topbarCurtain" data-target="#ls-notification-curtain"><span>Notificações</span></a>
+      <a href="#" class="ls-ico-bullhorn" data-ls-module="topbarCurtain" data-target="#ls-help-curtain"><span>Ajuda</span></a>
+      <a href="#" class="ls-ico-question" data-ls-module="topbarCurtain" data-target="#ls-feedback-curtain"><span>Sugestões</span></a>
+    </div>
+
+    <!-- Dropdown com detalhes da conta de usuário -->
+    <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
+      <a href="#" class="ls-ico-user">
+        <span class="ls-name">João</span>
+        (fmolina)
+      </a>
+      <nav class="ls-dropdown-nav ls-user-menu">
+        <ul>
+          <li><a href="#">Meus dados</a></li>
+          <li><a href="#">Faturas</a></li>
+          <li><a href="#">Planos</a></li>
+          <li><a href="#">Sair</a></li>
+         </ul>
+      </nav>
+    </div>
+  </div>
+
+  <span class="ls-show-sidebar ls-ico-menu"></span>
+
+  <!-- Nome do produto/marca -->
+  <%- unless current_page.data.show_topbar_title %>
+    <h1 class="ls-brand-name">
+      <a href="#" class="ls-ico-earth">
+        Nome do produto
+      </a>
+    </h1>
+  <% end %>
+</div>
+
+<main class="ls-main"></main>
+
+<aside class="ls-notification">
+  <nav class="ls-notification-list" id="ls-notification-curtain">
+    <h3 class="ls-title-2">Notificações</h3>
+    <ul>
+      <%- 5.times do %>
+        <li class="ls-dismissable">
+          <a href="#"><%= lorem.sentence %></a>
+          <a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
+        </li>
+      <% end %>
+    </ul>
+    <p class="ls-no-notification-message">Não há notificações.</p>
+  </nav>
+  <nav class="ls-notification-list" id="ls-help-curtain">
+    <h3 class="ls-title-2">Feedback</h3>
+    <ul>
+      <%- 2.times do %>
+        <li><a href="#">> <%= lorem.words 6 %></a></li>
+      <% end %>
+    </ul>
+  </nav>
+  <nav class="ls-notification-list" id="ls-feedback-curtain">
+    <h3 class="ls-title-2">Ajuda</h3>
+    <ul>
+      <li><a href="#">> Guia</a></li>
+      <li><a href="#">> Wiki</a></li>
+    </ul>
+  </nav>
+</aside>
diff --git a/source/documentacao/shared/structure/header-main-mobile.erb b/source/documentacao/shared/structure/header-main-mobile.erb
new file mode 100644
index 000000000..0b943c6fc
--- /dev/null
+++ b/source/documentacao/shared/structure/header-main-mobile.erb
@@ -0,0 +1,25 @@
+---
+title: Header de Painel Principal
+description: Você pode inserir um título, um logo, informações adicionais com menor destaque. Do lado direito, uma área para acesso ao perfil e atalhos para outras funcionalidades.
+type: component
+layout: mobile
+---
+
+<%= partial 'documentacao/shared/structure/header-main' %>
+<aside class="ls-sidebar">
+  <div data-ls-module="dropdown" class="ls-dropdown ls-user-account ls-active">
+    <a href="#" class="ls-ico-user">
+      <span class="ls-name">Franco Molina dos Santos Silva</span>
+      (fmolina)
+    </a>
+    <nav class="ls-dropdown-nav ls-user-menu" aria-hidden="true">
+      <ul>
+        <li><a href="#" role="option">Meus dados</a></li>
+        <li><a href="#" role="option">Faturas</a></li>
+        <li><a href="#" role="option">Planos</a></li>
+       </ul>
+       <a href="#" class="ls-btn-logout" role="combobox" aria-expanded="false">Sair</a>
+    </nav>
+  </div>
+  <h1 class="ls-brand-name ls-ico-earth"><a href="home">Nome do produto</a></h1>
+</aside>

From 19f02e17dc529b1b858375dad1dd5d05dcf97238 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Mon, 24 Nov 2014 15:57:50 -0200
Subject: [PATCH 29/32] adding example internal header

---
 .../shared/structure/_header-internal.erb     | 74 +++++++++++++++++++
 .../structure/header-internal-mobile.erb      | 34 +++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 source/documentacao/shared/structure/_header-internal.erb
 create mode 100644 source/documentacao/shared/structure/header-internal-mobile.erb

diff --git a/source/documentacao/shared/structure/_header-internal.erb b/source/documentacao/shared/structure/_header-internal.erb
new file mode 100644
index 000000000..452e7e166
--- /dev/null
+++ b/source/documentacao/shared/structure/_header-internal.erb
@@ -0,0 +1,74 @@
+<div class="ls-topbar">
+
+  <!-- Barra de Notificações -->
+  <div class="ls-notification-topbar">
+
+    <!-- Links de apoio -->
+    <div class="ls-alerts-list">
+      <a href="#" class="ls-ico-bell-o" data-counter="8" data-ls-module="topbarCurtain" data-target="#ls-notification-curtain2"><span>Notificações</span></a>
+      <a href="#" class="ls-ico-bullhorn" data-ls-module="topbarCurtain" data-target="#ls-help-curtain2"><span>Ajuda</span></a>
+      <a href="#" class="ls-ico-question" data-ls-module="topbarCurtain" data-target="#ls-feedback-curtain2"><span>Sugestões</span></a>
+    </div>
+
+    <!-- Dropdown com detalhes da conta de usuário -->
+    <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
+      <a href="#" class="ls-ico-user">
+        <span class="ls-name">João</span>
+        (fmolina)
+      </a>
+      <nav class="ls-dropdown-nav ls-user-menu">
+        <ul>
+          <li><a href="#">Meus dados</a></li>
+          <li><a href="#">Faturas</a></li>
+          <li><a href="#">Planos</a></li>
+          <li><a href="#">Sair</a></li>
+         </ul>
+      </nav>
+    </div>
+  </div>
+
+  <span class="ls-show-sidebar ls-ico-menu"></span>
+
+  <a href="#" class="ls-go-next"><span class="ls-text">Voltar à lista de serviços</span></a>
+
+  <h1 class="ls-brand-name">
+    <a href="#" class="ls-ico-earth">
+      <small>Nome do produto</small>
+      identificador da unidade
+    </a>
+  </h1>
+
+</div>
+
+<main class="ls-main"></main>
+
+
+<aside class="ls-notification">
+  <nav class="ls-notification-list" id="ls-notification-curtain2">
+    <h3 class="ls-title-2">Notificações</h3>
+    <ul>
+      <%- 5.times do %>
+        <li class="ls-dismissable">
+          <a href="#"><%= lorem.sentence %></a>
+          <a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
+        </li>
+      <% end %>
+    </ul>
+    <p class="ls-no-notification-message">Não há notificações.</p>
+  </nav>
+  <nav class="ls-notification-list" id="ls-help-curtain2">
+    <h3 class="ls-title-2">Feedback</h3>
+    <ul>
+      <%- 2.times do %>
+        <li><a href="#">> <%= lorem.words 6 %></a></li>
+      <% end %>
+    </ul>
+  </nav>
+  <nav class="ls-notification-list" id="ls-feedback-curtain2">
+    <h3 class="ls-title-2">Ajuda</h3>
+    <ul>
+      <li><a href="#">> Guia</a></li>
+      <li><a href="#">> Wiki</a></li>
+    </ul>
+  </nav>
+</aside>
diff --git a/source/documentacao/shared/structure/header-internal-mobile.erb b/source/documentacao/shared/structure/header-internal-mobile.erb
new file mode 100644
index 000000000..97df27ca4
--- /dev/null
+++ b/source/documentacao/shared/structure/header-internal-mobile.erb
@@ -0,0 +1,34 @@
+---
+title: Header de Painel Interno
+description: Você pode inserir um título, um logo, informações adicionais com menor destaque. Do lado direito, uma área para acesso ao perfil e atalhos para outras funcionalidades.
+type: component
+layout: mobile
+---
+
+<%= partial 'documentacao/shared/structure/header-internal' %>
+<aside class="ls-sidebar">
+  <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
+    <a href="#" class="ls-ico-user">
+      <span class="ls-name">Franco Molina dos Santos Silva</span>
+      (fmolina)
+    </a>
+    <nav class="ls-dropdown-nav ls-user-menu" aria-hidden="true">
+      <ul>
+        <li><a href="#" role="option">Meus dados</a></li>
+        <li><a href="#" role="option">Faturas</a></li>
+        <li><a href="#" role="option">Planos</a></li>
+       </ul>
+       <a href="#" class="ls-btn-logout" role="combobox" aria-expanded="false">Sair</a>
+    </nav>
+  </div>
+  <div class="ls-sidebar-inner">
+    <a href="#" class="ls-go-prev"><span class="ls-text">Voltar à lista de serviços</span></a>
+    <nav class="ls-menu">
+      <ul>
+        <li class="ls-active"><a href="#" class="ls-ico-dashboard">Dashboard</a></li>
+        <li><a href="#" class="ls-ico-stats">Item de menu</a></li>
+        <li><a href="#" class="ls-ico-image">Item de menu</a></li>
+      </ul>
+    </nav>
+  </div>
+</aside>

From 07c547280a0eb566361f6fb8d2e5073d5af7a885 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Mon, 24 Nov 2014 15:57:59 -0200
Subject: [PATCH 30/32] adding example full header

---
 .../shared/structure/_header-full.erb         | 109 ++++++++++++++++++
 .../shared/structure/header-full-mobile.erb   |   9 ++
 2 files changed, 118 insertions(+)
 create mode 100644 source/documentacao/shared/structure/_header-full.erb
 create mode 100644 source/documentacao/shared/structure/header-full-mobile.erb

diff --git a/source/documentacao/shared/structure/_header-full.erb b/source/documentacao/shared/structure/_header-full.erb
new file mode 100644
index 000000000..535b806c3
--- /dev/null
+++ b/source/documentacao/shared/structure/_header-full.erb
@@ -0,0 +1,109 @@
+<div class="ls-topbar">
+
+  <!-- Barra de Notificações -->
+  <div class="ls-notification-topbar">
+
+    <!-- Links de apoio -->
+    <div class="ls-alerts-list">
+      <a href="#" class="ls-ico-bell-o" data-counter="8" data-ls-module="topbarCurtain" data-target="#ls-notification-curtain3"><span>Notificações</span></a>
+      <a href="#" class="ls-ico-bullhorn" data-ls-module="topbarCurtain" data-target="#ls-help-curtain3"><span>Ajuda</span></a>
+      <a href="#" class="ls-ico-question" data-ls-module="topbarCurtain" data-target="#ls-feedback-curtain3"><span>Sugestões</span></a>
+    </div>
+
+    <!-- Dropdown com detalhes da conta de usuário -->
+    <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
+      <a href="#" class="ls-ico-user">
+        <span class="ls-name">João</span>
+        (fmolina)
+      </a>
+      <nav class="ls-dropdown-nav ls-user-menu">
+        <ul>
+          <li><a href="#">Meus dados</a></li>
+          <li><a href="#">Faturas</a></li>
+          <li><a href="#">Planos</a></li>
+          <li><a href="#">Sair</a></li>
+         </ul>
+      </nav>
+    </div>
+  </div>
+
+  <span class="ls-show-sidebar ls-ico-menu"></span>
+
+  <a href="#" class="ls-go-next"><span class="ls-text">Voltar à lista de serviços</span></a>
+
+  <h1 class="ls-brand-name">
+    <a href="#" class="ls-ico-earth">
+      <small>Nome do produto</small>
+      identificador da unidade
+    </a>
+  </h1>
+
+</div>
+
+<main class="ls-main"></main>
+
+<aside class="ls-sidebar">
+  <div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
+    <a href="#" class="ls-ico-user">
+      <span class="ls-name">Franco Molina dos Santos Silva</span>
+      (fmolina)
+    </a>
+    <nav class="ls-dropdown-nav ls-user-menu" aria-hidden="true">
+      <ul>
+        <li><a href="#" role="option">Meus dados</a></li>
+        <li><a href="#" role="option">Faturas</a></li>
+        <li><a href="#" role="option">Planos</a></li>
+       </ul>
+       <a href="#" class="ls-btn-logout" role="combobox" aria-expanded="false">Sair</a>
+    </nav>
+  </div>
+  <div class="ls-sidebar-inner">
+    <a href="#" class="ls-go-prev"><span class="ls-text">Voltar à lista de serviços</span></a>
+    <nav class="ls-menu">
+      <ul>
+        <li class="ls-active"><a href="#" class="ls-ico-dashboard">Dashboard</a></li>
+        <li><a href="#" class="ls-ico-stats">Item de menu</a></li>
+        <li><a href="#" class="ls-ico-image">Item de menu</a></li>
+        <li class="ls-submenu">
+          <a href="#" class="ls-ico-cog">Item de menu pai</a>
+          <ul role="menu">
+            <li><a class="ls-submenu-item" href="#">Item de submenu</a></li>
+            <li><a class="ls-submenu-item" href="#">Item de submenu</a></li>
+            <li><a class="ls-submenu-item" href="#">Item de submenu</a></li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</aside>
+
+
+<aside class="ls-notification">
+  <nav class="ls-notification-list" id="ls-notification-curtain3">
+    <h3 class="ls-title-2">Notificações</h3>
+    <ul>
+      <%- 5.times do %>
+        <li class="ls-dismissable">
+          <a href="#"><%= lorem.sentence %></a>
+          <a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
+        </li>
+      <% end %>
+    </ul>
+    <p class="ls-no-notification-message">Não há notificações.</p>
+  </nav>
+  <nav class="ls-notification-list" id="ls-help-curtain3">
+    <h3 class="ls-title-2">Feedback</h3>
+    <ul>
+      <%- 2.times do %>
+        <li><a href="#">> <%= lorem.words 6 %></a></li>
+      <% end %>
+    </ul>
+  </nav>
+  <nav class="ls-notification-list" id="ls-feedback-curtain3">
+    <h3 class="ls-title-2">Ajuda</h3>
+    <ul>
+      <li><a href="#">> Guia</a></li>
+      <li><a href="#">> Wiki</a></li>
+    </ul>
+  </nav>
+</aside>
diff --git a/source/documentacao/shared/structure/header-full-mobile.erb b/source/documentacao/shared/structure/header-full-mobile.erb
new file mode 100644
index 000000000..55a2ac92e
--- /dev/null
+++ b/source/documentacao/shared/structure/header-full-mobile.erb
@@ -0,0 +1,9 @@
+---
+title: Header de Painel Interno
+description: Você pode inserir um título, um logo, informações adicionais com menor destaque. Do lado direito, uma área para acesso ao perfil e atalhos para outras funcionalidades.
+type: component
+layout: mobile
+---
+
+<%= partial 'documentacao/shared/structure/header-full' %>
+

From 36d02f2d6bf41ec21cdf0cbb305832356a40eeb9 Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Mon, 24 Nov 2014 15:58:24 -0200
Subject: [PATCH 31/32] adding link in the documentation

---
 source/partials/_doc-menu-components.html.erb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source/partials/_doc-menu-components.html.erb b/source/partials/_doc-menu-components.html.erb
index e4420730f..3b19e8bc1 100644
--- a/source/partials/_doc-menu-components.html.erb
+++ b/source/partials/_doc-menu-components.html.erb
@@ -1,7 +1,8 @@
 <aside class="doc-sidebar col-md-3">
-<div class="doc-sidebar-inner">
+<div class="doc-sidebar-inner doc-sidebar-componentes">
   <nav class="doc-sidebar-menu">
     <ul>
+      <%= menu_tag("/documentacao/componentes/estrutura-principal/", "Estrutura principal") %>
       <%= menu_tag("/documentacao/componentes/", "Abas") %>
       <%= menu_tag("/documentacao/componentes/alertas/", "Alertas") %>
       <%= menu_tag("/documentacao/componentes/barra-de-progresso/", "Barra de Progresso") %>

From bbb2e3a80b209a808e7e83ddc87daac4c9826e9c Mon Sep 17 00:00:00 2001
From: Deivid Marques <deividmarques@gmail.com>
Date: Mon, 24 Nov 2014 15:58:48 -0200
Subject: [PATCH 32/32] applying style to documentation of main structure

---
 source/assets/stylesheets/docs/_base.sass | 42 +++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/source/assets/stylesheets/docs/_base.sass b/source/assets/stylesheets/docs/_base.sass
index ab9260601..cfb673387 100644
--- a/source/assets/stylesheets/docs/_base.sass
+++ b/source/assets/stylesheets/docs/_base.sass
@@ -688,8 +688,46 @@ p code
 // Adjust color documentation
 //
 
-.doc-content .ls-box-demo .ls-topbar:after
-  content: none
+.doc-content
+  .ls-box-demo
+    overflow: hidden
+
+    .ls-topbar:after
+    content: none
+
+
+  .ls-topbar
+    position: relative
+
+    ul
+      margin: 0
+
+  .ls-notification,
+  .ls-sidebar
+    position: absolute
+
+    ul
+      margin: 0
+
+    .ls-notification-list
+      top: 94px
+      margin-left: 20px
+
+  .doc-border-silver
+    border: 1px solid #ccc
+
+.doc-sidebar-componentes ul li:first-of-type
+  border-bottom: 1px dotted #ccc
+  padding-bottom: 7px
+
+#doc-header-full
+  height: 555px
+  margin-bottom: 50px
+  overflow: hidden
+  position: relative
+
+  .ls-main
+    height: 450px
 
 @media screen and (max-width: 991px)
   .doc-content