diff --git a/source/assets/stylesheets/locastyle/modules/_modal.sass b/source/assets/stylesheets/locastyle/modules/_modal.sass index 9ef1cd3d9..a24a7aed7 100644 --- a/source/assets/stylesheets/locastyle/modules/_modal.sass +++ b/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 diff --git a/source/documentacao/componentes/modal.html.erb b/source/documentacao/componentes/modal.html.erb index ce2937390..1d406b884 100644 --- a/source/documentacao/componentes/modal.html.erb +++ b/source/documentacao/componentes/modal.html.erb @@ -209,15 +209,16 @@ locastyle.modal.open("#myAwesomeModal");
Atenção: Se você for fechar sua modal depois de uma determinada ação, você precisa chamar locastyle.modal.close()
Se precisar de uma modal menor, basta adicionar a classe .ls-modal-small
no mesmo lugar do .ls-modal-box
.
Se precisar de uma modal menor ou maior, basta usar a classe .ls-modal-small
ou .ls-modal-large
.
Você pode utilizar os eventos abaixo para um determinado momento do modal, veja a referência abaixo: