diff --git a/src/arquivos/sass/main.scss b/src/arquivos/sass/main.scss index d75e9b2..0eeb6c8 100644 --- a/src/arquivos/sass/main.scss +++ b/src/arquivos/sass/main.scss @@ -17,6 +17,7 @@ @import "./components/instagram-gallery"; @import "./partials/header"; +@import "./partials/search"; @import "./partials/menu"; @import "./partials/barraDeVantagens"; @import "./partials/footer"; diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index ae90bb3..812a07d 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -109,44 +109,6 @@ } } - .busca { - display: flex; - align-items: center; - margin: 0; - padding: 13px 0; - - legend, - label, - select { - display: none; - } - - .fulltext-search-box { - flex: 1; - padding: 0; - border: 0; - height: 23px; - background-color: transparent; - outline: 0; - color: $white-500; - font-size: 10px; - line-height: 12px; - } - - .btn-buscar { - width: 23px; - height: 23px; - background-color: transparent; - padding: 0; - border: 0; - outline: 0; - font-size: 0; - - @extend .sprite; - @extend .sprite-search-icon; - } - } - &__search-box { margin-top: 18px; border-top: 1px solid; diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index b5d4dab..93034c6 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -12,21 +12,85 @@ } } + .menu-header { + &__top-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + } + + &__text { + display: flex; + align-items: center; + color: $gray-200; + font-size: 12px; + line-height: 15px; + + i { + margin-right: 10px; + } + } + + &__close-button { + padding: 0; + border: 0; + outline: 0; + background: transparent; + } + + &__search-box { + background-color: $black-500; + + .busca { + padding: 16px; + } + } + } + .main-menu { height: 100%; + @include mq(lg, max) { + display: flex; + flex-direction: column; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translateX(-100%); + z-index: map-get($z-index, level-5); + background-color: $white-500; + } + &__departments { display: flex; margin: 0; - height: 100%; + + @include mq(lg, max) { + flex-direction: column; + flex: 1; + position: relative; + overflow: hidden auto; + } + + @include mq(lg, min) { + height: 100%; + } } &__department { display: flex; align-items: center; - margin-right: 40px; + + @include mq(lg, max) { + border-bottom: 1px solid $gray-100; + } @include mq(lg, min) { + margin-right: 40px; + &:hover { .main-menu__department-link { font-weight: 700; @@ -48,6 +112,15 @@ line-height: 15px; color: $white-500; + @include mq(lg, max) { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 16px; + color: $black-500; + } + @include mq(lg, min) { &::after { content: attr(title); @@ -59,20 +132,47 @@ } } } + + &__account-link { + display: flex; + background-color: $black-500; + align-items: center; + justify-content: center; + height: 64px; + line-height: 12px; + font-size: 10px; + color: $white-500; + + i { + margin-right: 16px; + } + } } .submenu { - opacity: 0; - pointer-events: none; position: absolute; - top: calc(100% + 32px); width: 100%; - z-index: map-get($z-index, level-4); - left: 0; - padding: 30px 0 43px; - background: rgba(255, 255, 255, 0.95); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02); - transition: all 0.2s ease-in-out; + + @include mq(lg, max) { + overflow: auto; + left: 100%; + padding-bottom: 34px; + top: 0; + background-color: $white-500; + height: 100%; + } + + @include mq(lg, min) { + left: 0; + opacity: 0; + pointer-events: none; + top: calc(100% + 32px); + z-index: map-get($z-index, level-4); + padding: 30px 0 43px; + background: rgba(255, 255, 255, 0.95); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02); + transition: all 0.2s ease-in-out; + } &::before { content: ""; @@ -85,16 +185,51 @@ background: transparent; } + .container { + @include mq(lg, max) { + padding: 0 16px; + } + } + + &__return-button { + display: flex; + align-items: center; + width: 100%; + padding: 0; + border: 0; + border-bottom: 1px solid $gray-100; + outline: 0; + text-align: left; + padding: 16px; + margin-bottom: 34px; + background-color: transparent; + + i { + margin-right: 8px; + } + } + &__title { font-size: 20px; margin: 0; line-height: 24px; margin-bottom: 16px; + + @include mq(lg, max) { + text-decoration-line: underline; + font-size: 12px; + line-height: 14px; + color: $blue-500; + } } &__categories-wrapper { - display: flex; - margin-bottom: 8px; + margin-bottom: 16px; + + @include mq(lg, min) { + margin-bottom: 8px; + display: flex; + } } &__categories { diff --git a/src/arquivos/sass/partials/_search.scss b/src/arquivos/sass/partials/_search.scss new file mode 100644 index 0000000..d739951 --- /dev/null +++ b/src/arquivos/sass/partials/_search.scss @@ -0,0 +1,37 @@ +.busca { + display: flex; + align-items: center; + margin: 0; + padding: 13px 0; + + legend, + label, + select { + display: none; + } + + .fulltext-search-box { + flex: 1; + padding: 0; + border: 0; + height: 23px; + background-color: transparent; + outline: 0; + color: $white-500; + font-size: 10px; + line-height: 12px; + } + + .btn-buscar { + width: 23px; + height: 23px; + background-color: transparent; + padding: 0; + border: 0; + outline: 0; + font-size: 0; + + @extend .sprite; + @extend .sprite-search-icon; + } +} diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index 9c51c76..89cb82b 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -14,6 +14,8 @@ $white-500: #fff; $blue-500: #00c8ff; +$gray-100: #e0e0e0; +$gray-200: #828282; $gray-500: #333; $color-black: #000; diff --git a/src/arquivos/sprite/back-icon.png b/src/arquivos/sprite/back-icon.png new file mode 100644 index 0000000..82a786c Binary files /dev/null and b/src/arquivos/sprite/back-icon.png differ diff --git a/src/arquivos/sprite/close-menu-icon.png b/src/arquivos/sprite/close-menu-icon.png new file mode 100644 index 0000000..b4cf54d Binary files /dev/null and b/src/arquivos/sprite/close-menu-icon.png differ diff --git a/src/arquivos/sprite/department-arrow-icon.png b/src/arquivos/sprite/department-arrow-icon.png new file mode 100644 index 0000000..e90833c Binary files /dev/null and b/src/arquivos/sprite/department-arrow-icon.png differ diff --git a/src/arquivos/sprite/lock-icon.png b/src/arquivos/sprite/lock-icon.png new file mode 100644 index 0000000..a28f7c8 Binary files /dev/null and b/src/arquivos/sprite/lock-icon.png differ diff --git a/src/controles-customizados/menuPrincipal.html b/src/controles-customizados/menuPrincipal.html index 8e75f50..39c5572 100644 --- a/src/controles-customizados/menuPrincipal.html +++ b/src/controles-customizados/menuPrincipal.html @@ -1,11 +1,33 @@