// header markup retake
This commit is contained in:
Kevin Granger
@@ -42,6 +42,158 @@ textarea
|
||||
#right_column
|
||||
#footer
|
||||
|
||||
|
||||
|
||||
header
|
||||
z-index: 1
|
||||
position: relative
|
||||
background: $light-background
|
||||
#banner-row
|
||||
background: black
|
||||
#nav-row
|
||||
background: $dark-background
|
||||
nav
|
||||
float: right
|
||||
#header-row
|
||||
position: relative
|
||||
#header_logo
|
||||
// min 768px max 991px
|
||||
@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
|
||||
width: 250px
|
||||
top: 35px
|
||||
// min 480px max 767px
|
||||
@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
|
||||
width: 174px
|
||||
left: 15px
|
||||
top: 48px
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 200px
|
||||
left: 50%
|
||||
margin-left: -100px
|
||||
top: 20px
|
||||
.header_user_info
|
||||
float: left
|
||||
border-left: 1px solid #515151
|
||||
border-right: 1px solid #515151
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 25%
|
||||
text-align: center
|
||||
a
|
||||
color: $light-text-color
|
||||
font-weight: bold
|
||||
display: block
|
||||
padding: 8px 9px 11px 8px
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
font-size: 11px
|
||||
.shop-phone
|
||||
display: block
|
||||
padding: 5px 0 10px
|
||||
// max 767px
|
||||
@media (max-width: $screen-xs-max)
|
||||
display: none
|
||||
i
|
||||
font-size: 21px
|
||||
line-height: 21px
|
||||
color: $light-text-color
|
||||
padding-right: 7px
|
||||
strong
|
||||
color: $light-text-color
|
||||
|
||||
|
||||
//languages/currencies
|
||||
#currencies-block-top,
|
||||
#languages-block-top
|
||||
float: right
|
||||
border-left: 1px solid #515151
|
||||
position: relative
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 25%
|
||||
span.firstWord
|
||||
display: none
|
||||
div.current
|
||||
font-weight: bold
|
||||
padding: 8px 10px 10px 10px
|
||||
color: $light-text-color
|
||||
text-shadow: 1px 1px rgba(0,0,0,0.2)
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
text-align: center
|
||||
padding: 9px 5px 10px
|
||||
font-size: 11px
|
||||
strong
|
||||
color: #777777
|
||||
&:after
|
||||
content: "\f0d7"
|
||||
font-family: $font-icon
|
||||
font-size: 18px
|
||||
line-height: 18px
|
||||
color: #686666
|
||||
vertical-align: -2px
|
||||
padding-left: 12px
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
padding-left: 2px
|
||||
font-size: 13px
|
||||
line-height: 13px
|
||||
vertical-align: 0
|
||||
.cur-label
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
display: none
|
||||
ul
|
||||
display: none
|
||||
position: absolute
|
||||
top: 37px
|
||||
left: 0
|
||||
width: 157px
|
||||
background: $dark-background
|
||||
z-index: 2
|
||||
li
|
||||
color: $light-text-color
|
||||
line-height: 35px
|
||||
font-size: 13px
|
||||
a,
|
||||
> span
|
||||
padding: 0 10px 0 12px
|
||||
display: block
|
||||
color: $light-text-color
|
||||
&.selected, &:hover a
|
||||
background: #484848
|
||||
#contact-link
|
||||
float: right
|
||||
border-left: 1px solid #515151
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 25%
|
||||
text-align: center
|
||||
a
|
||||
display: block
|
||||
color: $light-text-color
|
||||
font-weight: bold
|
||||
padding: 8px 10px 11px 10px
|
||||
text-shadow: 1px 1px rgba(0,0,0,0.2)
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
font-size: 11px
|
||||
padding-left: 5px
|
||||
padding-right: 5px
|
||||
#contact-link a,
|
||||
#header-row .header_user_info a,
|
||||
#currencies-block-top div.current,
|
||||
#languages-block-top div.current
|
||||
cursor: pointer
|
||||
&:hover, &.active
|
||||
background: #2b2b2b
|
||||
|
||||
.ie8 #header #header_logo
|
||||
width: 350px
|
||||
|
||||
|
||||
|
||||
//title
|
||||
#center_column
|
||||
.page_product_box
|
||||
@@ -1449,163 +1601,10 @@ div.star a:hover
|
||||
|
||||
.listcomment .authorcomment
|
||||
|
||||
//HEADER
|
||||
.banner-top
|
||||
background: #000
|
||||
|
||||
.header-container
|
||||
background: $light-background
|
||||
|
||||
#header
|
||||
padding-bottom: 21px
|
||||
position: relative
|
||||
background: $light-background
|
||||
.header-row
|
||||
position: relative
|
||||
&:first-child
|
||||
background-color: $dark-background
|
||||
> .container
|
||||
position: relative
|
||||
.shop-phone
|
||||
display: block
|
||||
padding: 5px 0 10px
|
||||
// max 767px
|
||||
@media (max-width: $screen-xs-max)
|
||||
display: none
|
||||
i
|
||||
font-size: 21px
|
||||
line-height: 21px
|
||||
color: $light-text-color
|
||||
padding-right: 7px
|
||||
strong
|
||||
color: $light-text-color
|
||||
nav
|
||||
float: right
|
||||
.header_user_info
|
||||
float: left
|
||||
border-left: 1px solid #515151
|
||||
border-right: 1px solid #515151
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 25%
|
||||
text-align: center
|
||||
a
|
||||
color: $light-text-color
|
||||
font-weight: bold
|
||||
display: block
|
||||
padding: 8px 9px 11px 8px
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
font-size: 11px
|
||||
#header_logo
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 27px
|
||||
z-index: 1
|
||||
// min 768px max 991px
|
||||
@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
|
||||
width: 250px
|
||||
top: 35px
|
||||
// min 480px max 767px
|
||||
@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
|
||||
width: 174px
|
||||
left: 15px
|
||||
top: 48px
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 200px
|
||||
left: 50%
|
||||
margin-left: -100px
|
||||
top: 20px
|
||||
|
||||
//languages/currencies
|
||||
#currencies-block-top,
|
||||
#languages-block-top
|
||||
float: right
|
||||
border-left: 1px solid #515151
|
||||
position: relative
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 25%
|
||||
span.firstWord
|
||||
display: none
|
||||
div.current
|
||||
font-weight: bold
|
||||
padding: 8px 10px 10px 10px
|
||||
color: $light-text-color
|
||||
text-shadow: 1px 1px rgba(0,0,0,0.2)
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
text-align: center
|
||||
padding: 9px 5px 10px
|
||||
font-size: 11px
|
||||
strong
|
||||
color: #777777
|
||||
&:after
|
||||
content: "\f0d7"
|
||||
font-family: $font-icon
|
||||
font-size: 18px
|
||||
line-height: 18px
|
||||
color: #686666
|
||||
vertical-align: -2px
|
||||
padding-left: 12px
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
padding-left: 2px
|
||||
font-size: 13px
|
||||
line-height: 13px
|
||||
vertical-align: 0
|
||||
.cur-label
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
display: none
|
||||
ul
|
||||
display: none
|
||||
position: absolute
|
||||
top: 37px
|
||||
left: 0
|
||||
width: 157px
|
||||
background: $dark-background
|
||||
z-index: 2
|
||||
li
|
||||
color: $light-text-color
|
||||
line-height: 35px
|
||||
font-size: 13px
|
||||
a,
|
||||
> span
|
||||
padding: 0 10px 0 12px
|
||||
display: block
|
||||
color: $light-text-color
|
||||
&.selected, &:hover a
|
||||
background: #484848
|
||||
#contact-link
|
||||
float: right
|
||||
border-left: 1px solid #515151
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 25%
|
||||
text-align: center
|
||||
a
|
||||
display: block
|
||||
color: $light-text-color
|
||||
font-weight: bold
|
||||
padding: 8px 10px 11px 10px
|
||||
text-shadow: 1px 1px rgba(0,0,0,0.2)
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
font-size: 11px
|
||||
padding-left: 5px
|
||||
padding-right: 5px
|
||||
#contact-link a,
|
||||
.header-row .header_user_info a,
|
||||
#currencies-block-top div.current,
|
||||
#languages-block-top div.current
|
||||
cursor: pointer
|
||||
&:hover, &.active
|
||||
background: #2b2b2b
|
||||
|
||||
.ie8 #header #header_logo
|
||||
width: 350px
|
||||
|
||||
// BREADCRUMB
|
||||
.breadcrumb
|
||||
|
||||
Reference in New Issue
Block a user