Merge pull request #1703 from locaweb/modal-size

Modal size - Closes #1700

source/assets/stylesheets/locastyle/modules/_modal.sass

@@ -1,5 +1,5 @@
-$defaultWidth: 90%
-$largeWidth: 750px
+$defaultWidth: 600px
+$largeWidth: 850px
 $smallWidth: 450px
 $paddingDefault: 20px
 
@@ -26,33 +26,29 @@ $paddingDefault: 20px
 
 .ls-modal-box
   display: inline-block
-  width: $defaultWidth
-  margin: 10% 20px 100px
-  position: relative
+  width: 90%
+  margin: 5% auto 0
   text-align: left
   background-color: #fff
   border-radius: $default-radius
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7)
 
-  &.ls-modal-large
-    width: $largeWidth
-    margin-left: -$largeWidth / 2
-
-  &.ls-modal-small
-    width: $smallWidth
+.ls-modal-large,
+.ls-modal-small
+  @extend .ls-modal-box
 
 [data-modal-blocked]
   [data-dismiss]
     display: none
 
-
 .ls-modal-header
   padding: $paddingDefault
   border-bottom: 1px solid $gray1
+  position: relative
 
   [data-dismiss]
     position: absolute
-    right: 10px
+    right: 20px
     top: 14px
     border: none
     background: none
@@ -70,6 +66,7 @@ $paddingDefault: 20px
     padding: 0
     margin: 0
     font-size: remtopx(1)
+    width: calc(100% - 20px)
 
 .ls-modal-body
   padding: $paddingDefault
@@ -82,7 +79,6 @@ $paddingDefault: 20px
   border-top: 1px solid $gray1
 
 .ls-modal-feedbackr
-
   .ls-modal-box
     width: 627px
     height: 600px
@@ -101,4 +97,11 @@ $paddingDefault: 20px
 
 @media screen and (min-width: $screen-sm)
   .ls-modal-box
-    width: 600px
+    width: $defaultWidth
+    margin: 10% 20px 0
+
+  .ls-modal-large
+    width: $largeWidth
+
+  .ls-modal-small
+    width: $smallWidth

source/documentacao/componentes/modal.html.erb

@@ -209,15 +209,16 @@ locastyle.modal.open("#myAwesomeModal");
   <p class="ls-alert-warning"><strong>Atenção:</strong> Se você for fechar sua modal depois de uma determinada ação, você precisa chamar <code>locastyle.modal.close()</code></p>
   <hr>
 
-  <h3 class="ls-title-4">Modal pequena</h3>
-  <p>Se precisar de uma modal menor, basta adicionar a classe <code>.ls-modal-small</code> no mesmo lugar do <code>.ls-modal-box</code>.</p>
+  <h3 class="ls-title-4">Modal grandes e pequenas</h3>
+  <p>Se precisar de uma modal menor ou maior, basta usar a classe <code>.ls-modal-small</code> ou <code>.ls-modal-large</code>.</p>
     <div class="ls-box-demo">
-    <%= partial 'documentacao/shared/modal-small' %>
+    <%= partial 'documentacao/shared/modal-sizes' %>
   </div>
   <% code("html") do %>
-<%= partial 'documentacao/shared/modal-small' %>
+<%= partial 'documentacao/shared/modal-sizes' %>
   <% end %>
 
+
   <h2 class="doc-title-3">Eventos</h2>
   <p>Você pode utilizar os eventos abaixo para um determinado momento do modal, veja a referência abaixo:</p>
   <table class="ls-table">

source/documentacao/exemplos/painel1/client.html.erb

@@ -336,7 +336,7 @@ title_product: Revenda do Email Marketing
 <!-- Modal de senha -->
 <div class="ls-modal" id="editPassword">
   <form action="#change-password" class="ls-form">
-    <div class="ls-modal-box">
+    <div class="ls-modal-small">
       <div class="ls-modal-header">
         <button data-dismiss="modal">×</button>
         <h4 class="ls-modal-title">Alterar senha</h4>

source/documentacao/shared/_modal-sizes.erb

@@ -0,0 +1,35 @@
+<button data-ls-module="modal" data-target="#modalSmall" class="ls-btn-primary">Ative a modal pequena</button>
+<button data-ls-module="modal" data-target="#modalLarge" class="ls-btn-primary">Ative a modal grande</button>
+
+<div class="ls-modal" id="modalSmall">
+  <div class="ls-modal-small">
+    <div class="ls-modal-header">
+      <button data-dismiss="modal">&times;</button>
+      <h4 class="ls-modal-title">Modal title</h4>
+    </div>
+    <div class="ls-modal-body">
+      <p><%= lorem.sentences 3 %></p>
+    </div>
+    <div class="ls-modal-footer">
+      <button class="ls-btn ls-float-right" data-dismiss="modal">Close</button>
+      <button type="submit" class="ls-btn-primary">Save changes</button>
+    </div>
+  </div>
+</div>
+
+
+<div class="ls-modal" id="modalLarge">
+  <div class="ls-modal-large">
+    <div class="ls-modal-header">
+      <button data-dismiss="modal">&times;</button>
+      <h4 class="ls-modal-title">Modal title</h4>
+    </div>
+    <div class="ls-modal-body">
+      <p><%= lorem.sentences 3 %></p>
+    </div>
+    <div class="ls-modal-footer">
+      <button class="ls-btn ls-float-right" data-dismiss="modal">Close</button>
+      <button type="submit" class="ls-btn-primary">Save changes</button>
+    </div>
+  </div>
+</div>