diff --git a/components/header/header.html b/components/header/header.html index d0f1370..812cef3 100644 --- a/components/header/header.html +++ b/components/header/header.html @@ -1,10 +1,15 @@ - - + + + + + + + 3 diff --git a/components/header/header.scss b/components/header/header.scss index 629a9b6..637fea9 100644 --- a/components/header/header.scss +++ b/components/header/header.scss @@ -11,79 +11,115 @@ background: $olive; color: $white; - .hamburger { + .header-wrapper { display: flex; - margin-right: 20px; - } - - .menu { - display: none; - list-style: none; - margin: 0; - padding: 0; + position: relative; - .item { + .hamburger { display: flex; - color: $white; - margin: auto 20px; - font-size: $font-20; - letter-spacing: 2px; + margin-right: 20px; + } - .label { + .actions { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + + .icon { + position: relative; + margin: 0 5px; + padding: 0; + background: none; + border: none; color: $white; + font-size: $font-24; + + .qty { + position: absolute; + top: -5px; + right: -5px; + height: 15px; + width: 15px; + border-radius: 50%; + background: $orange; + color: $white; + font-size: $font-12; + line-height: $font-16; + font-family: $font-sans; + } } + } - &.active { - border-bottom: 2px solid $white; - } + .menu { + display: none; + list-style: none; + margin: 0; + padding: 0; + + .item { + display: flex; + color: $white; + margin: auto 20px; + font-size: $font-20; + letter-spacing: 2px; - &.disabled { .label { - color: $white-alpha; + color: $white; + } + + &.active { + border-bottom: 2px solid $white; + } + + &.disabled { + .label { + color: $white-alpha; + } } } } - } - .sidebar-menu { - position: fixed; - top: $header-height-mobile; - left: 0; - height: calc(100vh - #{$header-height-mobile}); - background: $olive; - display: block; - list-style: none; - margin: 0; - padding: 0; - transform: translateX(-100%); - transition: transform .3s; - - .item { + .sidebar-menu { + position: fixed; + top: $header-height-mobile; + left: 0; + height: calc(100vh - #{$header-height-mobile}); + background: $olive; display: block; - color: $white; - margin: 20px; - font-size: $font-20; - letter-spacing: 2px; - padding: 20px; - border-bottom: 1px dotted $gray; - - .label { + list-style: none; + margin: 0; + padding: 0; + transform: translateX(-100%); + transition: transform .3s; + + .item { + display: block; color: $white; - } - - &.active { - //border-bottom: 2px solid $white; - } + margin: 20px; + font-size: $font-20; + letter-spacing: 2px; + padding: 20px; + border-bottom: 1px dotted $gray; - &.disabled { .label { - color: $white-alpha; + color: $white; + } + + &.active { + //border-bottom: 2px solid $white; + } + + &.disabled { + .label { + color: $white-alpha; + } } } - } - &.active { - transform: translateX(0%); + &.active { + transform: translateX(0%); + } } } } @@ -95,13 +131,35 @@ .component-header { height: $header-height; - .menu { - display: flex; - } + .header-wrapper { + .actions { + position: absolute; + right: 0; + + .icon { + margin: 0 5px; + font-size: $font-30; + + .qty { + position: absolute; + top: -15px; + right: -15px; + height: 25px; + width: 25px; + font-size: $font-20; + line-height: $font-24; + } + } + } - .sidebar-menu { - top: $header-height; - height: calc(100vh - #{$header-height}); + .menu { + display: flex; + } + + .sidebar-menu { + top: $header-height; + height: calc(100vh - #{$header-height}); + } } } } diff --git a/src/scss/global.scss b/src/scss/global.scss index 80f164a..00839e6 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -26,6 +26,11 @@ button { outline: none; text-decoration: none; } + + &::-moz-focus-inner { + border: 0 !important; + } + } .font-serif { @@ -101,7 +106,11 @@ button { .main-content { min-height: calc(100vh - #{$footer-height}); - padding: $header-height 40px 0 40px; + padding: $header-height-mobile 40px 0 40px; + + @media (min-width: map-get($grid-breakpoints, 'md')) { + padding: $header-height 40px 0 40px; + } &.container-fluid { &.full-width {