merge wip to master

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

source/assets/javascripts/docs/_docs.js

@@ -22,16 +22,13 @@ var lsdocs = (function() {
   function toggleMenuActive() {
     $('.doc-menu').on('click', function() {
       $(this).toggleClass('active');
-    })
+    });
   }
 
   function markupExamples () {
     $('.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>');

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

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 {

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();
   }

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

source/assets/stylesheets/locastyle/base/_color-theme.sass

@@ -1,14 +1,16 @@
 =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
 
   .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%)

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)

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

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>

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>

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>