Merge pull request #42 from GainTime/2.2.0

- Melhora apresentação de dropdowns
  - Resolve problema com grandes listas em um dropdown, limitando altura a 200px
  - Aplica outline-style: initial para remover linhas externas indesejadas
- Adiciona componente "modal"
- Melhora compatibilidade entre navegadores
  - Corrige validação de campos, impedindo que um formulário seja submetido com campos que não passam no teste do data-validate
- Adiciona função de validação de cnpj
- Remove transparência dos botões no evento hover
- Adiciona opções de quebra de linha para flex-box
  - wrap
  - wrap-auto
- Adiciona sistema de grids
  - real gutter
  - false gutter
  - flex-box

README.md

@@ -26,6 +26,7 @@ GainTime é um novo framework de HTML, CSS e JS para desenvolvimento de projetos
 │       │   ├── _colors.sass
 │       │   ├── _garnishes.sass
 │       │   ├── _grid-visibility.sass
+│       │   ├── _grid.sass
 │       │   ├── _singles.sass
 │       │   └── _text.sass
 │       ├── layouts

factory/sass/components/_dropdowns.sass

@@ -1,4 +1,5 @@
 %drop
+  outline-style: initial
   position: relative
   cursor: pointer
   display: inline-block
@@ -39,6 +40,8 @@
     z-index: 5
     list-style: none
     margin: 3px 0
+    max-height: 200px
+    overflow-y: auto
 
     li
       padding: 5px 10px

factory/sass/components/_modals.sass

@@ -0,0 +1,52 @@
+[data-modal]
+  cursor: pointer
+
+.modal
+  max-width: 500px
+
+.gt-modal
+  position: fixed
+  width: 100%
+  height: 100%
+  left: 0
+  top: 0
+  background: transparentize(#000, 0.3)
+  margin: 0
+  z-index: 10
+  display: none
+  overflow-x: hidden
+  overflow-y: auto
+
+  .modal
+    width: 90%
+    padding: 30px
+    background-color: #FFF
+    margin: 30px auto
+    position: relative
+    overflow: hidden
+    +border-radius(3px)
+    &-close
+      font-size: 35px
+      position: absolute
+      top: 15px
+      right: 14px
+      z-index: 15
+      background-color: #FFF
+      border: none
+      line-height: 1
+      +transition()
+      &:hover
+        color: #AAA
+    &-body
+      overflow-y: auto
+      max-height: calc(100% - 120px)
+
+      &.gallery
+        width: 100%
+        height: 100%
+        img
+          width: auto
+          height: 98%
+          margin: 0 auto
+          max-width: 100%
+          text-align: center

factory/sass/config/_mixins.sass

@@ -24,11 +24,11 @@
   border-color: $border
   color: $color
   &:hover, &:focus
-    background-color: transparentize($bg, 0.3)!important
+    background-color: darken($bg, 8%)!important
 
 =hoverBg($bg)
   &:hover, &:focus
-    background-color: transparentize($bg, 0.3)!important
+    background-color: darken($bg, 8%)!important
 
 =noHoverColor($bg, $color: $white, $border: $bg)
   border-color: $border

factory/sass/helpers/_grid.sass

@@ -0,0 +1,142 @@
+$columns: 12
+
+%float-gutter
+  float: left
+  margin: 5px
+  padding: 0
+%float-false-gutter
+  float: left
+  padding: 5px
+  margin: 0
+%row-flexbox
+  flex-basis: auto
+  flex-grow: 0
+
+=float-col-to-false-gutter($size)
+  @for $i from 1 through $columns
+    .#{$size}-#{$i}
+      @extend %float-false-gutter
+      @extend %row-flexbox
+=float-col($size)
+  @for $i from 1 through $columns
+    .#{$size}-#{$i}
+      @extend %float-gutter
+      @extend %row-flexbox
+
++float-col(xs)
++float-col(sm)
++float-col(md)
++float-col(lg)
+
+=col-factory($param, $abr)
+  @media ($param)
+    .#{$abr}-12
+      width: calc(100% - 10px)
+    .#{$abr}-11
+      width: calc(91.667% - 10px)
+    .#{$abr}-10
+      width: calc(83.333% - 10px)
+    .#{$abr}-9
+      width: calc(75% - 10px)
+    .#{$abr}-8
+      width: calc(66.667% - 10px)
+    .#{$abr}-7
+      width: calc(58.334% - 10px)
+    .#{$abr}-6
+      width: calc(50% - 10px)
+    .#{$abr}-5
+      width: calc(41.666% - 10px)
+    .#{$abr}-4
+      width: calc(33.333% - 10px)
+    .#{$abr}-3
+      width: calc(25% - 10px)
+    .#{$abr}-2
+      width: calc(16.6666666667% - 10px)
+    .#{$abr}-1
+      width: calc(8.333% - 10px)
+
+    .off-#{$abr}-11
+      margin-left: calc(91.667% + 5px)
+    .off-#{$abr}-10
+      margin-left: calc(83.333% + 5px)
+    .off-#{$abr}-9
+      margin-left: calc(75% + 5px)
+    .off-#{$abr}-8
+      margin-left: calc(66.667% + 5px)
+    .off-#{$abr}-7
+      margin-left: calc(58.334% + 5px)
+    .off-#{$abr}-6
+      margin-left: calc(50% + 5px)
+    .off-#{$abr}-5
+      margin-left: calc(41.666% + 5px)
+    .off-#{$abr}-4
+      margin-left: calc(33.333% + 5px)
+    .off-#{$abr}-3
+      margin-left: calc(25% + 5px)
+    .off-#{$abr}-2
+      margin-left: calc(16.6666666667% + 5px)
+    .off-#{$abr}-1
+      margin-left: calc(8.333% + 5px)
+    .off-#{$abr}-0
+      margin-left: 5px
+
+=col-factory-to-false-gutter($param, $abr)
+  @media ($param)
+    .#{$abr}-12
+      width: 100%
+    .#{$abr}-11
+      width: 91.667%
+    .#{$abr}-10
+      width: 83.333%
+    .#{$abr}-9
+      width: 75%
+    .#{$abr}-8
+      width: 66.667%
+    .#{$abr}-7
+      width: 58.334%
+    .#{$abr}-6
+      width: 50%
+    .#{$abr}-5
+      width: 41.666%
+    .#{$abr}-4
+      width: 33.333%
+    .#{$abr}-3
+      width: 25%
+    .#{$abr}-2
+      width: 16.6666666667%
+    .#{$abr}-1
+      width: 8.333%
+
++col-factory("min-width: 0px", xs)
++col-factory("min-width: 769px", sm)
++col-factory("min-width: 993px", md)
++col-factory("min-width: 1201px", lg)
+
+.false-gutter
+  +float-col-to-false-gutter(xs)
+  +float-col-to-false-gutter(sm)
+  +float-col-to-false-gutter(md)
+  +float-col-to-false-gutter(lg)
+  +col-factory-to-false-gutter("min-width: 0px", xs)
+  +col-factory-to-false-gutter("min-width: 769px", sm)
+  +col-factory-to-false-gutter("min-width: 993px", md)
+  +col-factory-to-false-gutter("min-width: 1201px", lg)
+
+=col-row-flex-box($size)
+  @for $i from 1 through $columns
+    .#{$size}-#{$i}
+
+.row
+  width: 100%
+  &.flex-box
+    flex-wrap: wrap
+  &:after
+    content: ""
+    clear: both
+    display: block
+
+@media (max-width: 768px)
+  .row.flex-box
+    display: -webkit-flex!important
+    display: -ms-flexbox!important
+    display: flex!important

factory/sass/layouts/_base.sass

@@ -27,14 +27,15 @@ body
   section
     @extend %container
 
+.container
+  @extend %container
+
 section
   width: 100%
   padding: 30px 5%
   margin: 0
   background-color: $base
   +box-shadow(unset)
-  &.container
-    @extend %container
   &::after
     clear: both
     content: ""

factory/sass/layouts/_flexes.sass

@@ -25,6 +25,8 @@
   @extend %flex
   align-items: stretch
 
+  &.wrap, .wrap-auto
+    flex-wrap: wrap
   &.vertical
     flex-direction: column
     -webkit-flex-direction: column
@@ -41,7 +43,8 @@
     -ms-flex-negative: 1
     flex-shrink: 1
     padding: 0.75rem
-
+  &.wrap-auto .col
+    flex-basis: auto
 @media (max-width: 768px)
   .flex-box
     display: block!important

factory/sass/run.sass

@@ -18,9 +18,11 @@
 @import "components/dropdowns"
 @import "components/tooltips"
 @import "components/highlight"
+@import "components/modals"
 
 @import "helpers/colors"
 @import "helpers/singles"
 @import "helpers/garnishes"
 @import "helpers/grid-visibility"
 @import "helpers/text"
+@import "helpers/grid"