File: D:/HostingSpaces/Eurotools/euro-tools.nl/resources/assets/sass/site/partials/_header.sass
header
background: $euroBlack
color: white
font-size: 16px
font-weight: 500
line-height: 14px
padding-top: 50px
.primary-menu
font-size: 1rem
line-height: 1
font-weight: bold
background-color: $euroDarkGrey
position: fixed
top: 0
z-index: 999
+respond-to-width(950)
display: none
> .grid-row
+flex(space-between, center)
height: 50px
.logo
width: column(1, 12)
min-width: 144px
line-height: 0
nav
margin: 0
font-size: 0.9rem
line-height: 1.2
width: column(6.5,12)
margin-right: column(0.5, 12)
ul
list-style: none
display: flex
justify-content: space-evenly
margin: 0
padding: 0
li
+flex(center, center)
a
display: block
padding: 40px 40px 40px 0
position: relative
z-index: 2
text-decoration: none
color: #E6E6E6
font-family: $headerFontFamily
font-size: 16px
font-weight: 500
line-height: 14px
&:hover
color: darken(#E6E6E6, 10%)
&.active
a
color: $euroYellow
.shoppingCartButton
display: none
.secondary-menu
background: $euroYellow url('/img/bg_pattern.png') repeat
background-image: url('/img/bg_pattern.png'), linear-gradient(90deg, $euroYellow 0%, #FFDA0A 100%)
> .grid-row
height: 120px
+flex(center, center)
align-items: center
position: relative
> .category-menu
//margin-right: auto
height: 60px
width: column(4,12)
.menu-right
margin-left: auto
overflow: visible
a.button
//min-width: 155px
height: 44px
font-size: 15px
line-height: 22px
//background-color: $blue
//color: white
font-weight: bold
overflow: visible
padding-right: 40px
&:first-child
margin-right: 25px
&.shoppingCartButton
padding-right: 15px
transition: transform 0.2s // needed for JS magic
&.inflate
transform: scale(1.05)
p
margin: 0
padding: 0
display: inline-block
svg
display: inline-block
width: 18px
height: 18px
margin-right: 10px
top: 3px
position: relative
span
&.shoppingCartButtonCounter
position: absolute
right: -13px
top: -15px
//width: 1.7em
line-height: 1.7em
padding: 0 0.5em
min-width: 2em
text-align: center
border-radius: 999px
color: white
background-color: #F95D5D
transition: width 0.3s, height 0.3s
&:before
content: attr(data-counter)
.search
width: column(4, 12)
overflow: visible
input
position: relative
width: calc(100% - 41px)
height: 40px
padding: 15px 13px
border: none
z-index: 990
box-shadow: 1px 1px 20px 2px rgba(100,50,0,0.1)
&[type="submit"]
position: absolute
left: 0
padding: 5px 10px 5px 9px
background: transparent
top: 0
width: 100%
cursor: pointer
svg
position: absolute
left: calc(50% - 11px)
top: calc(50% - 9px)
.searchbutton
position: absolute
padding: 5px 10px 5px 9px
width: 40px
height: 40px
background-color: #3A414C
cursor: pointer
&:hover
background-color: lighten(#3A414C, 10%)
#searchForm
overflow: visible
label.form-title
color: #464646
font-size: 15px
font-weight: bold
line-height: 14px
margin-top: -18px
margin-bottom: 5px
display: block
.search-field
font-size: 14px
&:focus
outline: none
+placeholder
color: #A5AAAF
#searchresults
display: none
width: 100%
height: auto
min-height: 50px
background-color: white
background-image: url("/img/search-loader.gif")
background-size: 50px
background-repeat: no-repeat
background-position: center center
position: absolute
color: black
padding: 15px 0
z-index: 989
box-shadow: 1px 1px 20px 2px rgba(100,50,0,0.1)
&:before
content: ''
display: block
h4
margin: 0
color: #AAAAAA
text-transform: uppercase
font-size: 0.7rem
padding-left: 15px
hr
margin-top: 0
display: block
height: 1px
border: 0
border-top: 1px solid #AAAAAA
ul
margin: 0
padding: 0
list-style: none
background-color: white
li
&:last-child
padding-bottom: 10px
a
color: $euroDarkGrey
text-decoration: none
font-size: 0.8rem
position: relative
width: 100%
display: inline-block
padding: 5px 15px
&:hover
background-color: darken(white, 5%)
cursor: pointer
&:after
position: absolute
top: 5px
right: 15px
width: 5px
height: 10px
padding-top: 1em
content: ""
background-position: 0 center
background-repeat: no-repeat
background-image: url("/img/svg/arrow/arrow_dark.svg")
transition: background-position 0.2s
&.selected
a
background-color: darken(white, 5%)
.subheader
background-color: $euroLighterGrey
height: 40px
position: relative
overflow: hidden
.grid-row
height: 100%
+flex(space-between, center)
color: #67717A
position: relative
> .category-menu
width: 300px
margin-right: column(0.5, 12)
.left, .right
font-family: $headerFontFamily
font-size: 14px
font-weight: 600
line-height: 21px
a
color: #3291FF
text-decoration: none
strong
font-weight: 500
color: #3C414B
.right
font-weight: 300
margin-left: auto
+flex(space-between, center)
svg
margin-right: 10px
&.empty
.primary-menu
.grid-row
justify-content: center
position: relative
.logo
width: auto
.back-button
position: absolute
left: 0
top: 0
width: 65px
height: 100%
font-size: 12px
line-height: 100%
font-weight: bold
font-family: $headerFontFamily
text-transform: uppercase
text-decoration: none
color: rgba(white, 0.4)
+flex(space-between, center)
&:hover
color: rgba(white, 0.8)
svg
.cls-2
fill: rgba(white, 0.8)
svg
height: 12px
width: 20px
.secondary-menu
.grid-row
height: 300px
flex-direction: column
svg
width: 115px
height: 115px
margin-bottom: 45px
.cls-1
opacity: 1
fill: black
+respond-to-width(950)
svg
margin-bottom: 25px
h1
font-size: 28px
margin: 0
margin-bottom: 10px
color: $euroHeaderGrey
+respond-to-width(950)
font-size: 20px
h2
font-family: $fontFamily
font-style: italic
font-size: 20px
color: $euroHeaderGrey
font-weight: normal
margin: 0
+respond-to-width(950)
font-size: 15px
#backToTopButton
display: none
position: fixed
bottom: 0
right: column(1)
z-index: 99
border: none
outline: none
background-color: $euroYellow
color: $euroBlack
cursor: pointer
padding: 15px
border-radius: 10px 10px 0 0
font-size: 12px
font-weight: 600
line-height: 25px
&:hover
background-color: darken($euroYellow, 10%)
&.active
display: block
+respond-to-width(1280)
header
.primary-menu
.grid-row
width: 100%
padding: 0 30px
nav
width: column(8,12)
.secondary-menu
.grid-row
width: 100%
padding: 0 30px
> .category-menu
width: 315px
.subheader
.grid-row
width: 100%
padding: 0 30px
&.empty
.primary-menu
.grid-row
width: column(11, 12)
+respond-to-width(1050)
header
.secondary-menu
.grid-row
.menu-right
a.button:first-child
margin-right: auto
.subheader
height: auto
.grid-row
flex-direction: column-reverse
padding: 8px 20px 10px 20px
.right
width: 90%
left: 300px
margin-left: 0
justify-content: flex-start
svg
margin-right: 14px
+respond-to-width(1024)
header
.primary-menu
> .grid-row
.logo
margin-right: 30px
nav
ul
justify-content: space-between
li
a
padding-right: 20px
.language-menu
margin-left: 15px
.shoppingCartButton
background-color: transparent
border: solid 1px transparent
+flex(space-around, center)
p
display: none
span.shoppingCartButtonCounter
position: relative
right: -10px
top: 0
font-size: 15px
min-width: 2em
line-height: 1.7em
padding: 0 0.5em
text-align: center
border-radius: 999px
color: white
background-color: #F95D5D
transition: width 0.3s, height 0.3s
&[data-counter="00"]
display: none
&:before
content: attr(data-counter)
.secondary-menu
> .grid-row
.menu-right
.shoppingCartButton
display: none
&.empty
.primary-menu
> .grid-row
.logo
margin-right: 0
+respond-to-width(950)
header
padding-top: 65px
.secondary-menu
> .grid-row
padding: 0
height: 130px
flex-direction: column
.category-menu
display: none
.search
width: 100%
padding: 10px
background-color: #F0F5FA
#searchForm
label.form-title
display: none
#searchresults
width: calc(100% - 20px)
.menu-right
height: 80px
width: 100%
padding: 18px 20px
background-color: #FFD200
text-align: center
a.button
padding-right: 40px
&.register
display: inline-block
.subheader
> .grid-row
.category-menu, .left
display: none
.right
font-weight: normal
display: block
left: 0
margin-left: 0
width: 100%
text-align: center
svg
display: none
strong
font-weight: normal
color: #67717A
&.empty
padding-top: 50px
body.products
header
.subheader
&:after
content: ''
display: block
position: absolute
width: 100%
height: 520px
top: 40px
background-color: white
z-index: -1
box-shadow: 0px 0px 20px 0px rgba(100, 50, 0, 0.1)