Kevin Granger
2801 lines
61 KiB
Sass
2801 lines
61 KiB
Sass
@import compass
|
|
@import compass/reset
|
|
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,600,600italic,700,700italic,800,800italic)
|
|
@import theme_variables
|
|
@import bootstrap
|
|
|
|
@import ../css/font-awesome.css
|
|
|
|
|
|
a:hover
|
|
text-decoration: none
|
|
|
|
@media only screen and (min-width: 1200px)
|
|
.container
|
|
padding-left: 0
|
|
padding-right: 0
|
|
|
|
body
|
|
min-width: 320px
|
|
height: 100%
|
|
background: $dark-background
|
|
line-height: 18px
|
|
font-size: 13px
|
|
color: $base-body-color
|
|
&.content_only
|
|
background: none
|
|
textarea
|
|
resize: none
|
|
|
|
//structure
|
|
#page
|
|
#header
|
|
z-index: 10
|
|
.columns-container
|
|
background: $light-background
|
|
#columns
|
|
z-index: 1
|
|
position: relative
|
|
padding-bottom: 50px
|
|
#left_column
|
|
#center_column
|
|
#right_column
|
|
#footer
|
|
|
|
//title
|
|
#center_column
|
|
.page_product_box
|
|
h3
|
|
@include sub-heading
|
|
|
|
|
|
|
|
//text
|
|
p.info-title
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
margin-bottom: 25px
|
|
|
|
p.info-account
|
|
margin: -4px 0 24px 0
|
|
|
|
.dark
|
|
color: $base-text-color
|
|
|
|
.main-page-indent
|
|
margin-bottom: $base-page-indent
|
|
|
|
.alert
|
|
font-weight: bold
|
|
ul, ol
|
|
padding-left: 15px
|
|
margin-left: 27px
|
|
li
|
|
list-style-type: decimal
|
|
font-weight: normal
|
|
&.alert-success
|
|
text-shadow: 1px 1px rgba(0,0,0,0.1)
|
|
&:before
|
|
font-family: $font-icon
|
|
content: ""
|
|
font-size: 20px
|
|
vertical-align: -2px
|
|
padding-right: 7px
|
|
&.alert-danger
|
|
text-shadow: 1px 1px rgba(0,0,0,0.1)
|
|
&:before
|
|
font-family: $font-icon
|
|
content: ""
|
|
font-size: 20px
|
|
vertical-align: -2px
|
|
padding-right: 7px
|
|
float: left
|
|
|
|
.label
|
|
white-space: normal
|
|
display: inline-block
|
|
padding: 6px 10px
|
|
|
|
label
|
|
&.required
|
|
&:before
|
|
content: "*"
|
|
color: red
|
|
font-size: 14px
|
|
position: relative
|
|
line-height: 12px
|
|
|
|
.unvisible
|
|
display: none
|
|
|
|
label
|
|
color: $base-title-color
|
|
|
|
.checkbox
|
|
line-height: 16px
|
|
label
|
|
color: #777777
|
|
|
|
.close
|
|
opacity: 1
|
|
&:hover
|
|
opacity: 1
|
|
|
|
//buttons
|
|
input.button_mini,
|
|
input.button_small,
|
|
input.button,
|
|
input.button_large,
|
|
input.button_mini_disabled,
|
|
input.button_small_disabled,
|
|
input.button_disabled,
|
|
input.button_large_disabled,
|
|
input.exclusive_mini,
|
|
input.exclusive_small,
|
|
input.exclusive,
|
|
input.exclusive_large,
|
|
input.exclusive_mini_disabled,
|
|
input.exclusive_small_disabled,
|
|
input.exclusive_disabled,
|
|
input.exclusive_large_disabled,
|
|
a.button_mini,
|
|
a.button_small,
|
|
a.button,
|
|
a.button_large,
|
|
a.exclusive_mini,
|
|
a.exclusive_small,
|
|
a.exclusive,
|
|
a.exclusive_large,
|
|
span.button_mini,
|
|
span.button_small,
|
|
span.button,
|
|
span.button_large,
|
|
span.exclusive_mini,
|
|
span.exclusive_small,
|
|
span.exclusive,
|
|
span.exclusive_large,
|
|
span.exclusive_large_disabled
|
|
position: relative
|
|
display: inline-block
|
|
padding: 5px 7px
|
|
border: 1px solid #cc9900
|
|
font-weight: bold
|
|
color: #000
|
|
background: url(../img/bg_bt.gif) repeat-x 0 0 #f4b61b
|
|
cursor: pointer
|
|
white-space: normal
|
|
text-align: left
|
|
|
|
*:first-child+html input.button_mini,
|
|
*:first-child+html input.button_small,
|
|
*:first-child+html input.button,
|
|
*:first-child+html input.button_large,
|
|
*:first-child+html input.button_mini_disabled,
|
|
*:first-child+html input.button_small_disabled,
|
|
*:first-child+html input.button_disabled,
|
|
*:first-child+html input.button_large_disabled,
|
|
*:first-child+html input.exclusive_mini,
|
|
*:first-child+html input.exclusive_small,
|
|
*:first-child+html input.exclusive,
|
|
*:first-child+html input.exclusive_large,
|
|
*:first-child+html input.exclusive_mini_disabled,
|
|
*:first-child+html input.exclusive_small_disabled,
|
|
*:first-child+html input.exclusive_disabled,
|
|
*:first-child+html input.exclusive_large_disabled
|
|
border: none
|
|
|
|
//hover button
|
|
input.button_mini:hover,
|
|
input.button_small:hover,
|
|
input.button:hover,
|
|
input.button_large:hover,
|
|
input.exclusive_mini:hover,
|
|
input.exclusive_small:hover,
|
|
input.exclusive:hover,
|
|
input.exclusive_large:hover,
|
|
a.button_mini:hover,
|
|
a.button_small:hover,
|
|
a.button:hover,
|
|
a.button_large:hover,
|
|
a.exclusive_mini:hover,
|
|
a.exclusive_small:hover,
|
|
a.exclusive:hover,
|
|
a.exclusive_large:hover
|
|
text-decoration: none
|
|
background-position: left -50px
|
|
|
|
//active button
|
|
input.button_mini:active,
|
|
input.button_small:active,
|
|
input.button:active,
|
|
input.button_large:active,
|
|
input.exclusive_mini:active,
|
|
input.exclusive_small:active,
|
|
input.exclusive:active,
|
|
input.exclusive_large:active,
|
|
a.button_mini:active,
|
|
a.button_small:active,
|
|
a.button:active,
|
|
a.button_large:active,
|
|
a.exclusive_mini:active,
|
|
a.exclusive_small:active,
|
|
a.exclusive:active,
|
|
a.exclusive_large:active
|
|
background-position: left -100px
|
|
|
|
input.button_disabled,
|
|
input.exclusive_disabled,
|
|
span.exclusive
|
|
border: 1px solid #ccc
|
|
color: #999
|
|
background: url(../img/bg_bt_2.gif) repeat-x 0 0 #CCCCCC
|
|
cursor: default
|
|
|
|
.btn.disabled,
|
|
.btn[disabled]:hover
|
|
opacity: 0.3
|
|
|
|
.button.button-small
|
|
font: bold 13px/17px $font-famaly
|
|
color: $button-text-color
|
|
background: $button-small-bg
|
|
border: 1px solid
|
|
border-color: #666666 #5f5f5f #292929 #5f5f5f
|
|
padding: 0
|
|
text-shadow: 1px 1px rgba(0,0,0,0.24)
|
|
@include border-radius(0)
|
|
span
|
|
display: block
|
|
padding: 3px 8px 3px 8px
|
|
border: 1px solid
|
|
border-color: #8b8a8a
|
|
i
|
|
vertical-align: 0px
|
|
margin-right: 5px
|
|
&.right
|
|
margin-right: 0
|
|
margin-left: 5px
|
|
&:hover
|
|
background: $button-small-hover-bg
|
|
border-color: #303030 #303030 #666666 #444444
|
|
|
|
.button.button-medium
|
|
font-size: 17px
|
|
line-height: 21px
|
|
color: $button-text-color
|
|
padding: 0
|
|
font-weight: bold
|
|
background: rgb(67,183,84)
|
|
background: -moz-linear-gradient(top, rgba(67,183,84,1) 0%, rgba(65,183,87,1) 2%, rgba(65,184,84,1) 4%, rgba(67,183,86,1) 6%, rgba(65,179,84,1) 38%, rgba(68,179,85,1) 40%, rgba(69,175,85,1) 66%, rgba(65,174,83,1) 74%, rgba(66,172,82,1) 91%, rgba(65,174,85,1) 94%, rgba(67,171,84,1) 96%, rgba(66,172,82,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(67,183,84,1)), color-stop(2%,rgba(65,183,87,1)), color-stop(4%,rgba(65,184,84,1)), color-stop(6%,rgba(67,183,86,1)), color-stop(38%,rgba(65,179,84,1)), color-stop(40%,rgba(68,179,85,1)), color-stop(66%,rgba(69,175,85,1)), color-stop(74%,rgba(65,174,83,1)), color-stop(91%,rgba(66,172,82,1)), color-stop(94%,rgba(65,174,85,1)), color-stop(96%,rgba(67,171,84,1)), color-stop(100%,rgba(66,172,82,1)))
|
|
background: -webkit-linear-gradient(top, rgba(67,183,84,1) 0%,rgba(65,183,87,1) 2%,rgba(65,184,84,1) 4%,rgba(67,183,86,1) 6%,rgba(65,179,84,1) 38%,rgba(68,179,85,1) 40%,rgba(69,175,85,1) 66%,rgba(65,174,83,1) 74%,rgba(66,172,82,1) 91%,rgba(65,174,85,1) 94%,rgba(67,171,84,1) 96%,rgba(66,172,82,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(67,183,84,1) 0%,rgba(65,183,87,1) 2%,rgba(65,184,84,1) 4%,rgba(67,183,86,1) 6%,rgba(65,179,84,1) 38%,rgba(68,179,85,1) 40%,rgba(69,175,85,1) 66%,rgba(65,174,83,1) 74%,rgba(66,172,82,1) 91%,rgba(65,174,85,1) 94%,rgba(67,171,84,1) 96%,rgba(66,172,82,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(67,183,84,1) 0%,rgba(65,183,87,1) 2%,rgba(65,184,84,1) 4%,rgba(67,183,86,1) 6%,rgba(65,179,84,1) 38%,rgba(68,179,85,1) 40%,rgba(69,175,85,1) 66%,rgba(65,174,83,1) 74%,rgba(66,172,82,1) 91%,rgba(65,174,85,1) 94%,rgba(67,171,84,1) 96%,rgba(66,172,82,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(67,183,84,1) 0%,rgba(65,183,87,1) 2%,rgba(65,184,84,1) 4%,rgba(67,183,86,1) 6%,rgba(65,179,84,1) 38%,rgba(68,179,85,1) 40%,rgba(69,175,85,1) 66%,rgba(65,174,83,1) 74%,rgba(66,172,82,1) 91%,rgba(65,174,85,1) 94%,rgba(67,171,84,1) 96%,rgba(66,172,82,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43b754', endColorstr='#42ac52',GradientType=0 )
|
|
border: 1px solid
|
|
border-color: #399a49 #247f32 #1a6d27 #399a49
|
|
@include border-radius(0)
|
|
span
|
|
display: block
|
|
padding: 10px 10px 10px 14px
|
|
border: 1px solid
|
|
border-color: #74d578
|
|
// max 480px
|
|
@media (max-width: $screen-xs)
|
|
font-size: 15px
|
|
padding-right: 7px
|
|
padding-left: 7px
|
|
i
|
|
&.left
|
|
font-size: 24px
|
|
vertical-align: -2px
|
|
margin: -4px 10px 0 0
|
|
display: inline-block
|
|
// max 480px
|
|
@media (max-width: $screen-xs)
|
|
margin-right: 5px
|
|
&.right
|
|
margin-right: 0
|
|
margin-left: 9px
|
|
// max 480px
|
|
@media (max-width: $screen-xs)
|
|
margin-left: 5px
|
|
&:hover
|
|
background: rgb(58,160,76)
|
|
background: -moz-linear-gradient(top, rgba(58,160,76,1) 0%, rgba(58,160,74,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(58,160,76,1)), color-stop(100%,rgba(58,160,74,1)))
|
|
background: -webkit-linear-gradient(top, rgba(58,160,76,1) 0%,rgba(58,160,74,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(58,160,76,1) 0%,rgba(58,160,74,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(58,160,76,1) 0%,rgba(58,160,74,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(58,160,76,1) 0%,rgba(58,160,74,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3aa04c', endColorstr='#3aa04a',GradientType=0 )
|
|
border-color: #196f28 #399a49 #399a49 #258033
|
|
|
|
.button.button-medium.exclusive
|
|
border-color: #db8600 #d98305 #c86d26 #d98305
|
|
background: rgb(253,170,2)
|
|
background: -moz-linear-gradient(top, rgba(253,170,2,1) 0%, rgba(254,151,2,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,170,2,1)), color-stop(100%,rgba(254,151,2,1)))
|
|
background: -webkit-linear-gradient(top, rgba(253,170,2,1) 0%,rgba(254,151,2,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(253,170,2,1) 0%,rgba(254,151,2,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(253,170,2,1) 0%,rgba(254,151,2,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(253,170,2,1) 0%,rgba(254,151,2,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdaa02', endColorstr='#fe9702',GradientType=0 )
|
|
span
|
|
border-color: #fec133 #febc33 #feb233 #febc33
|
|
&:hover
|
|
filter: none
|
|
background: #f89609
|
|
border-color: #a6550c #ba6708 #db8600 #ba6708
|
|
span
|
|
border-color: #fec133
|
|
|
|
.link-button
|
|
font-weight: bold
|
|
i
|
|
margin-right: 5px
|
|
&.large
|
|
font-size: 26px
|
|
line-height: 26px
|
|
vertical-align: -3px
|
|
color: #c0c0c0
|
|
|
|
.btn.button-plus,
|
|
.btn.button-minus
|
|
font-size: 14px
|
|
line-height: 14px
|
|
color: $button-pm-color
|
|
text-shadow: 1px -1px rgba(0,0,0,0.05)
|
|
padding: 0
|
|
border: 1px solid
|
|
border-color: #dedcdc #c1bfbf #b5b4b4 #dad8d8
|
|
@include border-radius(0)
|
|
span
|
|
display: block
|
|
border: 1px solid $light-border-color
|
|
vertical-align: middle
|
|
width: 25px
|
|
height: 25px
|
|
text-align: center
|
|
vertical-align: middle
|
|
padding: 4px 0 0 0
|
|
background: rgb(30,87,153)
|
|
background: rgb(255,255,255)
|
|
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(251,251,251,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(251,251,251,1)))
|
|
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(251,251,251,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(251,251,251,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(251,251,251,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(251,251,251,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fbfbfb',GradientType=0)
|
|
&:hover
|
|
color: $base-text-color
|
|
span
|
|
filter: none
|
|
background: #f6f6f6
|
|
|
|
.button.exclusive-medium
|
|
font-size: 17px
|
|
padding: 0
|
|
line-height: 21px
|
|
color: $button-em-color
|
|
font-weight: bold
|
|
border: 1px solid
|
|
border-color: #cacaca #b7b7b7 #9a9a9a #b7b7b7
|
|
text-shadow: 1px 1px rgba(255,255,255,1)
|
|
span
|
|
border: 1px solid
|
|
border-color: $light-border-color
|
|
display: block
|
|
padding: 9px 10px 11px 10px
|
|
background: rgb(247,247,247)
|
|
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(237,237,237,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(237,237,237,1)))
|
|
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0)
|
|
// max 480px
|
|
@media (max-width: $screen-xs)
|
|
font-size: 15px
|
|
padding-right: 7px
|
|
padding-left: 7px
|
|
&:hover
|
|
border-color: #9e9e9e #c2c2c2 #c8c8c8 #c2c2c2
|
|
span
|
|
background: rgb(231,231,231)
|
|
background: -moz-linear-gradient(top, rgba(231,231,231,1) 0%, rgba(231,231,231,1) 0%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(231,231,231,1)), color-stop(0%,rgba(231,231,231,1)))
|
|
background: -webkit-linear-gradient(top, rgba(231,231,231,1) 0%,rgba(231,231,231,1) 0%)
|
|
background: -o-linear-gradient(top, rgba(231,231,231,1) 0%,rgba(231,231,231,1) 0%)
|
|
background: -ms-linear-gradient(top, rgba(231,231,231,1) 0%,rgba(231,231,231,1) 0%)
|
|
background: linear-gradient(to bottom, rgba(231,231,231,1) 0%,rgba(231,231,231,1) 0%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e7e7e7',GradientType=0)
|
|
|
|
.button.ajax_add_to_cart_button
|
|
font: 700 17px/21px $font-famaly
|
|
color: $button-text-color
|
|
text-shadow: 1px 1px rgba(0,0,0,0.2)
|
|
padding: 0
|
|
border: 1px solid
|
|
border-color: #0079b6 #006fa8 #012740 #006fa8
|
|
span
|
|
border: 1px solid
|
|
border-color: #06b2e6
|
|
padding: 10px 14px
|
|
display: block
|
|
background: rgb(0,154,208)
|
|
background: -moz-linear-gradient(top, rgba(0,154,208,1) 0%, rgba(0,122,183,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,154,208,1)), color-stop(100%,rgba(0,122,183,1)))
|
|
background: -webkit-linear-gradient(top, rgba(0,154,208,1) 0%,rgba(0,122,183,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(0,154,208,1) 0%,rgba(0,122,183,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(0,154,208,1) 0%,rgba(0,122,183,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(0,154,208,1) 0%,rgba(0,122,183,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ad0', endColorstr='#007ab7',GradientType=0)
|
|
&:hover
|
|
border-color: #01314e #004b74 #0079b6 #004b74
|
|
span
|
|
filter: none
|
|
background: #0084bf
|
|
|
|
.button.lnk_view
|
|
font: 700 17px/21px $font-famaly
|
|
color: $base-text-color
|
|
text-shadow: 1px 1px rgba(255,255,255,1)
|
|
padding: 0
|
|
border: 1px solid
|
|
border-color: #cacaca #b7b7b7 #9a9a9a #b7b7b7
|
|
span
|
|
border: 1px solid
|
|
border-color: $light-border-color
|
|
padding: 10px 14px
|
|
display: block
|
|
background: rgb(247,247,247)
|
|
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(237,237,237,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(237,237,237,1)))
|
|
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0)
|
|
&:hover
|
|
border-color: #9e9e9e #9e9e9e #c8c8c8 #9e9e9e
|
|
span
|
|
filter: none
|
|
background: #e7e7e7
|
|
i.left
|
|
padding-right: 8px
|
|
color: #777777
|
|
|
|
//form
|
|
.form-control
|
|
padding: 3px 5px
|
|
height: 27px
|
|
@include box-shadow(none)
|
|
&.grey
|
|
background: $base-box-bg
|
|
|
|
//table
|
|
table.std,
|
|
table.table_block
|
|
margin-bottom: 20px
|
|
width: 100%
|
|
border: 1px solid #999
|
|
border-bottom: none
|
|
background: white
|
|
border-collapse: inherit
|
|
|
|
table.std th,
|
|
table.table_block th
|
|
padding: 14px 12px
|
|
font-size: 12px
|
|
color: $light-text-color
|
|
font-weight: bold
|
|
text-transform: uppercase
|
|
text-shadow: 0 1px 0 #000
|
|
background: #999
|
|
|
|
table.std tr.alternate_item,
|
|
table.table_block tr.alternate_item
|
|
background-color: #f3f3f3
|
|
|
|
table.std td,
|
|
table.table_block td
|
|
padding: 12px
|
|
border-right: 1px solid #e9e9e9
|
|
border-bottom: 1px solid #e9e9e9
|
|
font-size: 12px
|
|
vertical-align: top
|
|
|
|
.table
|
|
margin-bottom: 30px
|
|
> thead
|
|
> tr
|
|
> th
|
|
background: $table-background
|
|
border-bottom-width: 1px
|
|
color: $base-text-color
|
|
td
|
|
a.color-myaccount
|
|
color: $link-color
|
|
text-decoration: underline
|
|
&:hover
|
|
text-decoration: none
|
|
tfoot
|
|
tr
|
|
background: $table-background
|
|
|
|
//product elements
|
|
.product-name
|
|
font-size: 17px
|
|
line-height: 23px
|
|
color: $product-name-color
|
|
margin-bottom: 0
|
|
a
|
|
font-size: 17px
|
|
line-height: 23px
|
|
color: $product-name-color
|
|
&:hover
|
|
color: $product-name-hover-color
|
|
|
|
.price
|
|
font-size: 13px
|
|
color: $price-color
|
|
|
|
.price.product-price
|
|
font: 600 21px/26px $font-custom
|
|
color: $product-price-color
|
|
|
|
.old-price
|
|
color: $product-old-price-color
|
|
text-decoration: line-through
|
|
|
|
.old-price.product-price
|
|
font-size: 17px
|
|
|
|
.special-price
|
|
color: $product-special-price-color
|
|
|
|
.price-percent-reduction
|
|
background: #f13340
|
|
border: 1px solid #d02a2c
|
|
font: 600 21px/24px $font-custom
|
|
color: $light-text-color
|
|
padding: 0 5px 0 3px
|
|
display: inline-block
|
|
&.small
|
|
font: 700 14px/17px $font-famaly
|
|
padding: 1px 6px
|
|
|
|
|
|
//Labels New/Sale
|
|
.new-box,
|
|
.sale-box
|
|
position: absolute
|
|
top: -4px
|
|
overflow: hidden
|
|
height: 74px
|
|
width: 74px
|
|
text-align: center
|
|
z-index: 0
|
|
|
|
.new-box
|
|
left: -4px
|
|
|
|
.sale-box
|
|
right: -5px
|
|
|
|
.new-label
|
|
font: 700 15px/18px $font-famaly
|
|
color: $light-text-color
|
|
background: #6ad4ff
|
|
text-transform: uppercase
|
|
padding: 9px 0 7px
|
|
text-shadow: 1px 1px rgba(0,0,0,0.24)
|
|
width: 113px
|
|
text-align: center
|
|
display: block
|
|
position: absolute
|
|
left: -33px
|
|
top: 6px
|
|
z-index: 1
|
|
@include rotate(-45deg)
|
|
&:before
|
|
position: absolute
|
|
bottom: -3px
|
|
right: 5px
|
|
width: 0px
|
|
height: 0px
|
|
border-style: solid
|
|
border-width: 4px 4px 0px 4px
|
|
border-color: #21a3d8 transparent transparent transparent
|
|
content: "."
|
|
text-indent: -5000px
|
|
@include rotate(225deg)
|
|
&:after
|
|
position: absolute
|
|
bottom: -3px
|
|
left: 4px
|
|
width: 0px
|
|
height: 0px
|
|
border-style: solid
|
|
border-width: 4px 4px 0px 4px
|
|
border-color: #21a3d8 transparent transparent transparent
|
|
content: "."
|
|
text-indent: -5000px
|
|
@include rotate(145deg)
|
|
|
|
.sale-label
|
|
font: 700 15px/18px $font-famaly
|
|
color: $light-text-color
|
|
background: #f13340
|
|
text-transform: uppercase
|
|
padding: 9px 0 7px
|
|
text-shadow: 1px 1px rgba(0,0,0,0.24)
|
|
width: 113px
|
|
text-align: center
|
|
display: block
|
|
position: absolute
|
|
right: -33px
|
|
top: 6px
|
|
z-index: 1
|
|
@include rotate(45deg)
|
|
&:before
|
|
position: absolute
|
|
bottom: -3px
|
|
right: 4px
|
|
width: 0px
|
|
height: 0px
|
|
border-style: solid
|
|
border-width: 4px 4px 0px 4px
|
|
border-color: #ad2b34 transparent transparent transparent
|
|
content: "."
|
|
text-indent: -5000px
|
|
@include rotate(225deg)
|
|
&:after
|
|
position: absolute
|
|
bottom: -3px
|
|
left: 5px
|
|
width: 0px
|
|
height: 0px
|
|
border-style: solid
|
|
border-width: 4px 4px 0px 4px
|
|
border-color: #ad2b34 transparent transparent transparent
|
|
content: "."
|
|
text-indent: -5000px
|
|
@include rotate(136deg)
|
|
|
|
.ie8
|
|
.new-label
|
|
left: 0px
|
|
top: 0px
|
|
width: auto
|
|
padding: 5px 15px
|
|
&:after
|
|
display: none
|
|
&:before
|
|
display: none
|
|
.sale-label
|
|
right: 0px
|
|
top: 0px
|
|
width: auto
|
|
padding: 5px 15px
|
|
&:after
|
|
display: none
|
|
&:before
|
|
display: none
|
|
.new-box
|
|
top: -1px
|
|
left: -1px
|
|
.sale-box
|
|
right: -1px
|
|
top: -1px
|
|
|
|
//BOXES
|
|
.box
|
|
background: $base-box-bg
|
|
border: 1px solid $base-border-color
|
|
padding: $base-box-padding
|
|
margin: $base-box-indent
|
|
line-height: 23px
|
|
p
|
|
margin-bottom: 0
|
|
&.box-small
|
|
padding: 9px 10px 9px 20px
|
|
.dark
|
|
padding-top: 10px
|
|
padding-right: 20px
|
|
margin-bottom: 0
|
|
width: auto
|
|
|
|
.page-product-box
|
|
padding-bottom: 10px
|
|
|
|
.product-box
|
|
width: 178px
|
|
float: left
|
|
@include box-sizing(border-box)
|
|
.product-image
|
|
border: $main_border
|
|
background: white
|
|
padding: 5px
|
|
display: block
|
|
margin-bottom: 11px
|
|
img
|
|
max-width: 100%
|
|
width: 100%
|
|
height: auto
|
|
|
|
//Homepage Tabs
|
|
#home-page-tabs
|
|
border: none
|
|
background: $light-background
|
|
// min 768px
|
|
@media (min-width: $screen-sm)
|
|
padding: 10px 0
|
|
margin: 0 0 0 -18px
|
|
> li
|
|
margin-bottom: 0
|
|
// min 768px
|
|
@media (min-width: $screen-sm)
|
|
border-left: 1px solid $base-border-color
|
|
margin: 0 0px 0 9px
|
|
padding: 0 0px 0 9px
|
|
// max 479px
|
|
@media (max-width: $screen-xs - 1)
|
|
width: 100%
|
|
a
|
|
font: 600 21px/24px $font-custom
|
|
color: $base-heading-color
|
|
text-transform: uppercase
|
|
border: none
|
|
outline: none
|
|
margin: 0
|
|
padding: 10px
|
|
// min 768px
|
|
@media (min-width: $screen-sm)
|
|
padding: 1px 10px
|
|
&:first-child
|
|
border: none
|
|
> li.active a,
|
|
>li a:hover
|
|
background: $dark-background
|
|
color: $light-text-color
|
|
padding: 10px
|
|
// min 768px
|
|
@media (min-width: $screen-sm)
|
|
margin: -9px 0
|
|
|
|
|
|
#index
|
|
.tab-content
|
|
margin-top: 35px
|
|
margin-bottom: 34px
|
|
|
|
.block
|
|
margin-bottom: 30px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
margin-bottom: 0px
|
|
.block_content
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
margin-bottom: 20px
|
|
|
|
|
|
.block
|
|
.title_block,
|
|
h4
|
|
font: 600 18px/22px $font-custom
|
|
color: $base-heading-color
|
|
background: #f6f6f6
|
|
border-top: 5px solid $dark-border-color
|
|
text-transform: uppercase
|
|
padding: 14px 5px 17px 20px
|
|
margin-bottom: 20px
|
|
@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
|
|
font-size: 14px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
position: relative
|
|
&:after
|
|
display: block
|
|
font-family: $font-icon
|
|
content: ""
|
|
position: absolute
|
|
right: 0
|
|
top: 15px
|
|
height: 36px
|
|
width: 36px
|
|
font-size: 26px
|
|
font-weight: normal
|
|
&.active:after
|
|
content: ""
|
|
a
|
|
color: $base-heading-color
|
|
&:hover
|
|
color: $base-text-color
|
|
|
|
&#contact_block
|
|
background: $dark-background
|
|
|
|
.title_block
|
|
border-color: #e4e3e3
|
|
background: $dark-background
|
|
color: $light-text-color
|
|
margin-bottom: 0
|
|
padding-bottom: 9px
|
|
.list-block
|
|
margin-top: -8px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
margin-top: 0
|
|
li
|
|
padding: 5px 0 6px 20px
|
|
border-top: 1px solid $base-border-color
|
|
a
|
|
i
|
|
display: none
|
|
&:before
|
|
content: ""
|
|
display: inline
|
|
font-family: $font-icon
|
|
color: $base-text-color
|
|
padding-right: 8px
|
|
&:hover
|
|
color: $base-text-color
|
|
font-weight: bold
|
|
&:first-child
|
|
border-top: none
|
|
.form-group
|
|
padding-top: 20px
|
|
border-top: 1px solid $base-border-color
|
|
margin-bottom: 0
|
|
select
|
|
max-width: 270px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
width: 270px
|
|
.btn
|
|
margin-top: 12px
|
|
.products-block
|
|
li
|
|
padding: 0 0 20px 0
|
|
margin-bottom: 20px
|
|
border-bottom: 1px solid $base-border-color
|
|
.products-block-image
|
|
float: left
|
|
border: 1px solid $base-border-color
|
|
margin-right: 19px
|
|
// min 768px max 991px
|
|
@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
|
|
float: none
|
|
display: inline-block
|
|
margin: 0 auto 10px
|
|
text-align: center
|
|
.product-content
|
|
overflow: hidden
|
|
h5
|
|
margin: -3px 0 0 0
|
|
.product-name
|
|
font-size: 15px
|
|
line-height: 18px
|
|
.product-description
|
|
margin-bottom: 14px
|
|
.price-percent-reduction
|
|
font: 700 14px/17px $font-famaly
|
|
padding: 1px 6px
|
|
|
|
//Block CATEGORIES
|
|
#categories_block_top
|
|
clear: both
|
|
position: relative
|
|
top: 30px
|
|
.sf-menu
|
|
position: relative
|
|
> li
|
|
position: static
|
|
> ul
|
|
width: 100%
|
|
top: 60px
|
|
margin: 0 20px
|
|
> li
|
|
display: block
|
|
float: left
|
|
width: 20%
|
|
-webkit-box-sizing: border-box
|
|
-moz-box-sizing: border-box
|
|
box-sizing: border-box
|
|
padding: 0 10px
|
|
> .category_thumb
|
|
display: block
|
|
clear: both
|
|
overflow: hidden
|
|
width: 100%
|
|
img
|
|
display: inline-block
|
|
width: 33%
|
|
h4
|
|
a
|
|
font-size: 1.1em
|
|
&:before
|
|
display: none
|
|
.main-level-submenus
|
|
position: relative
|
|
display: block !important
|
|
visibility: visible !important
|
|
top: 0
|
|
background: none
|
|
box-shadow: none
|
|
padding: 0
|
|
left: 0
|
|
.category_thumb
|
|
display: none
|
|
|
|
#categories_block_left
|
|
.block_content > ul
|
|
border-top: 1px solid $base-border-color
|
|
li
|
|
position: relative
|
|
a
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
display: block
|
|
font-size: 13px
|
|
line-height: 30px
|
|
padding: 0 30px 0 19px
|
|
border-bottom: 1px solid $base-border-color
|
|
span.grower
|
|
display: block
|
|
background: #f6f6f6
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
cursor: pointer
|
|
font-family: $font-icon
|
|
font-size: 14px
|
|
&.OPEN,
|
|
&.CLOSE
|
|
&:before
|
|
content: ""
|
|
display: block
|
|
vertical-align: middle
|
|
width: 30px
|
|
height: 30px
|
|
color: $base-text-color
|
|
line-height: 30px
|
|
text-align: center
|
|
&.CLOSE:before
|
|
content: ""
|
|
color: #c0c0c0
|
|
& span.grower:hover + a,
|
|
a:hover,
|
|
a.selected
|
|
background: #f6f6f6
|
|
li
|
|
a
|
|
font-weight: normal
|
|
color: #777777
|
|
&:before
|
|
content: ""
|
|
font-family: $font-icon
|
|
line-height: 29px
|
|
padding-right: 8px
|
|
|
|
|
|
.page-heading
|
|
font: 600 18px/22px $font-custom
|
|
color: $base-heading-color
|
|
text-transform: uppercase
|
|
padding: 0px 0px 17px 0px
|
|
margin-bottom: 30px
|
|
border-bottom: 1px solid $base-border-color
|
|
overflow: hidden
|
|
|
|
span.heading-counter
|
|
font: bold 13px/22px $font-famaly
|
|
float: right
|
|
color: $base-text-color
|
|
text-transform: none
|
|
@media (max-width: $screen-xs)
|
|
float: none
|
|
display: block
|
|
padding-top: 5px
|
|
span.lighter
|
|
color: #9c9c9c
|
|
&.bottom-indent
|
|
margin-bottom: 16px
|
|
&.product-listing
|
|
border-bottom: none
|
|
margin-bottom: 0
|
|
|
|
.page-subheading
|
|
font-family: $font-custom
|
|
font-weight: 600
|
|
text-transform: uppercase
|
|
color: $base-heading-color
|
|
font-size: 18px
|
|
padding: 0 0 15px
|
|
line-height: normal
|
|
margin-bottom: 12px
|
|
border-bottom: 1px solid $base-border-color
|
|
|
|
h3.page-product-heading
|
|
@include sub-heading
|
|
|
|
// BLOCK .footer_links (cms pages)
|
|
ul.footer_links
|
|
padding: 20px 0 0px 0
|
|
border-top: 1px solid $base-border-color
|
|
height: 65px
|
|
li
|
|
float: left
|
|
&+li
|
|
margin-left: 10px
|
|
|
|
// barre comparaison / tri
|
|
.content_sortPagiBar
|
|
.sortPagiBar
|
|
border-top: 1px solid $base-border-color
|
|
border-bottom: 1px solid $base-border-color
|
|
padding: 19px 0 10px 0
|
|
#productsSortForm
|
|
float: left
|
|
margin-right: 20px
|
|
margin-bottom: 10px
|
|
select
|
|
max-width: 192px
|
|
float: left
|
|
@media (max-width: $screen-sm-max)
|
|
max-width: 160px
|
|
.selector
|
|
float: left
|
|
.nbrItemPage
|
|
float: left
|
|
select
|
|
max-width: 59px
|
|
float: left
|
|
.clearfix > span
|
|
padding: 3px 0 0 12px
|
|
display: inline-block
|
|
float: left
|
|
#uniform-nb_item
|
|
float: left
|
|
label,
|
|
select
|
|
float: left
|
|
label
|
|
padding: 3px 6px 0 0
|
|
&.instant_search
|
|
#productsSortForm
|
|
display: none
|
|
.display,
|
|
.display_m
|
|
float: right
|
|
margin-top: -4px
|
|
li
|
|
float: left
|
|
padding-left: 12px
|
|
text-align: center
|
|
a
|
|
color: $GL-text-color
|
|
font-size: 11px
|
|
line-height: 14px
|
|
i
|
|
display: block
|
|
font-size: 24px
|
|
height: 24px
|
|
line-height: 24px
|
|
margin-bottom: -3px
|
|
color: $GL-icon-color
|
|
a:hover,
|
|
&.selected
|
|
i
|
|
color: $GL-icon-color-hover
|
|
&.selected
|
|
a
|
|
cursor: default
|
|
&.display-title
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
padding: 7px 6px 0 0
|
|
|
|
//pagination
|
|
.top-pagination-content,
|
|
.bottom-pagination-content
|
|
text-align: center
|
|
padding: 12px 0 12px 0
|
|
position: relative
|
|
div.pagination
|
|
margin: 0
|
|
float: right
|
|
width: 530px
|
|
text-align: center
|
|
// min 992px max 1199px
|
|
@media (min-width: $screen-md) and (max-width: $screen-md-max)
|
|
width: 380px
|
|
// max 991px
|
|
@media (max-width: $screen-sm-max)
|
|
float: left
|
|
width: auto
|
|
.showall
|
|
float: right
|
|
margin: 8px 53px 8px 14px
|
|
// min 992px max 1199px
|
|
@media (min-width: $screen-md) and (max-width: $screen-md-max)
|
|
margin-right: 11px
|
|
// max 991px
|
|
@media (max-width: $screen-sm-max)
|
|
margin-right: 0
|
|
.btn
|
|
span
|
|
font-size: 13px
|
|
padding: 3px 5px 4px 5px
|
|
line-height: normal
|
|
ul.pagination
|
|
margin: 8px 0px 8px 0
|
|
// max 991px
|
|
@media (max-width: $screen-sm-max)
|
|
float: left
|
|
li
|
|
display: inline-block
|
|
float: left
|
|
> a,
|
|
> span
|
|
margin: 0 1px 0 0px
|
|
padding: 0
|
|
font-weight: bold
|
|
border: 1px solid
|
|
border-color: #dfdede #d2d0d0 #b0afaf #d2d0d0
|
|
display: block
|
|
span
|
|
border: 1px solid $light-border-color
|
|
padding: 2px 8px
|
|
display: block
|
|
background: url(../img/pagination-li.gif) 0 0 repeat-x $pagination-bgcolor
|
|
> a:hover
|
|
span
|
|
background: $pagination-hover-bg
|
|
&.pagination_previous,
|
|
&.pagination_next
|
|
color: $pagination-prevnext-color
|
|
font-weight: bold
|
|
> a,
|
|
> span
|
|
border: none
|
|
background: none
|
|
display: block
|
|
padding: 4px 0
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
b
|
|
display: none
|
|
span
|
|
border: none
|
|
padding: 0
|
|
background: none
|
|
b
|
|
font-weight: bold
|
|
&.pagination_previous
|
|
margin-right: 10px
|
|
&.pagination_next
|
|
margin-left: 10px
|
|
&.active
|
|
> span
|
|
color: $base-text-color
|
|
border-color: #dfdede #d2d0d0 #b0afaf #d2d0d0
|
|
span
|
|
background: $pagination-hover-bg
|
|
|
|
.compare-form
|
|
float: right
|
|
// max 479px
|
|
@media (max-width: $screen-xs - 1)
|
|
float: left
|
|
width: 100%
|
|
text-align: left
|
|
padding-bottom: 10px
|
|
clear: both
|
|
.product-count
|
|
padding: 11px 0 0 0
|
|
float: left
|
|
// max 991px
|
|
@media (max-width: $screen-sm-max)
|
|
clear: left
|
|
|
|
.bottom-pagination-content
|
|
border-top: 1px solid $base-border-color
|
|
|
|
//CART steps
|
|
ul.step
|
|
margin-bottom: 30px
|
|
overflow: hidden
|
|
//min 480px
|
|
@media (min-width: $screen-xs)
|
|
@include border-radius(4px)
|
|
li
|
|
float: left
|
|
width: 20%
|
|
text-align: left
|
|
border: 1px solid
|
|
border-top-color: #cacaca
|
|
border-bottom-color: #9a9a9a
|
|
border-right-color: #b7b7b7
|
|
border-left-width: 0px
|
|
// max 480px
|
|
@media (max-width: $screen-xs - 1)
|
|
width: 100%
|
|
border-left-width: 1px
|
|
a,
|
|
span,
|
|
&.step_current span,
|
|
&.step_current_end span
|
|
display: block
|
|
padding: 13px 10px 14px 13px
|
|
color: $base-text-color
|
|
font-size: 17px
|
|
line-height: 21px
|
|
font-weight: bold
|
|
text-shadow: 1px 1px rgba(255,255,255,1)
|
|
position: relative
|
|
// min 991px
|
|
@media (min-width: $screen-md)
|
|
&:after
|
|
content: "."
|
|
position: absolute
|
|
top: 0
|
|
right: -31px
|
|
z-index: 0
|
|
text-indent: -5000px
|
|
display: block
|
|
width: 31px
|
|
height: 52px
|
|
margin-top: -2px
|
|
&:focus
|
|
text-decoration: none
|
|
outline: none
|
|
&.first
|
|
border-left-width: 1px
|
|
border-left-color: #b7b7b7
|
|
//min 480px
|
|
@media (min-width: $screen-xs)
|
|
@include border-top-left-radius(4px)
|
|
@include border-bottom-left-radius(4px)
|
|
span,
|
|
a
|
|
z-index: 5
|
|
padding-left: 13px !important
|
|
//min 480px
|
|
@media (min-width: $screen-xs)
|
|
@include border-top-left-radius(4px)
|
|
@include border-bottom-left-radius(4px)
|
|
&.second
|
|
span, a
|
|
z-index: 4
|
|
&.third
|
|
span, a
|
|
z-index: 3
|
|
&.four
|
|
span, a
|
|
z-index: 2
|
|
&.last
|
|
span
|
|
z-index: 1
|
|
//min 480px
|
|
@media (min-width: $screen-xs)
|
|
@include border-top-right-radius(4px)
|
|
@include border-bottom-right-radius(4px)
|
|
span
|
|
@include border-top-right-radius(4px)
|
|
@include border-bottom-right-radius(4px)
|
|
&.step_current
|
|
font-weight: bold
|
|
background: rgb(66,184,86)
|
|
background: -moz-linear-gradient(top, rgba(66,184,86,1) 0%, rgba(67,171,84,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,184,86,1)), color-stop(100%,rgba(67,171,84,1)))
|
|
background: -webkit-linear-gradient(top, rgba(66,184,86,1) 0%,rgba(67,171,84,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(66,184,86,1) 0%,rgba(67,171,84,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(66,184,86,1) 0%,rgba(67,171,84,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(66,184,86,1) 0%,rgba(67,171,84,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42b856', endColorstr='#43ab54',GradientType=0)
|
|
border-color: #399b49 #51ae5c #208931 #369946
|
|
span
|
|
color: $light-text-color
|
|
text-shadow: 1px 1px rgba(32,137,49,1)
|
|
border: 1px solid
|
|
border-color: #73ca77 #74c776 #74c175 #74c776
|
|
position: relative
|
|
//min 991px
|
|
@media (min-width: $screen-md)
|
|
padding-left: 38px
|
|
&:after
|
|
background: url(../img/order-step-a.png) right 0 no-repeat
|
|
|
|
&.step_current_end
|
|
font-weight: bold
|
|
|
|
&.step_todo
|
|
background: rgb(247,247,247)
|
|
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(237,237,237,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(237,237,237,1)))
|
|
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0)
|
|
span
|
|
display: block
|
|
border: 1px solid
|
|
border-color: $light-border-color
|
|
color: $base-text-color
|
|
position: relative
|
|
// min 991px
|
|
@media (min-width: $screen-md)
|
|
padding-left: 38px
|
|
&:after
|
|
background: url(../img/order-step-current.png) right 0 no-repeat
|
|
&.step_done
|
|
border-color: #666666 #5f5f5f #292929 #5f5f5f
|
|
background: rgb(114,113,113)
|
|
background: -moz-linear-gradient(top, rgba(114,113,113,1) 0%, rgba(102,102,102,1) 100%)
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,113,113,1)), color-stop(100%,rgba(102,102,102,1)))
|
|
background: -webkit-linear-gradient(top, rgba(114,113,113,1) 0%,rgba(102,102,102,1) 100%)
|
|
background: -o-linear-gradient(top, rgba(114,113,113,1) 0%,rgba(102,102,102,1) 100%)
|
|
background: -ms-linear-gradient(top, rgba(114,113,113,1) 0%,rgba(102,102,102,1) 100%)
|
|
background: linear-gradient(to bottom, rgba(114,113,113,1) 0%,rgba(102,102,102,1) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727171', endColorstr='#666666',GradientType=0)
|
|
a
|
|
color: $light-text-color
|
|
text-shadow: 1px 1px rgba(0,0,0,0.3)
|
|
border: 1px solid
|
|
border-color: #8b8a8a
|
|
// min 991px
|
|
@media (min-width: $screen-md)
|
|
padding-left: 38px
|
|
&:after
|
|
background: url(../img/order-step-done.png) right 0 no-repeat
|
|
&.step_done.step_done_last
|
|
// min 991px
|
|
@media (min-width: $screen-md)
|
|
a:after
|
|
background: url(../img/order-step-done-last.png) right 0 no-repeat
|
|
&#step_end
|
|
span
|
|
// min 991px
|
|
@media (min-width: $screen-md)
|
|
&:after
|
|
display: none
|
|
|
|
em
|
|
font-style: normal
|
|
// min 480px max 767px
|
|
@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
|
|
display: none
|
|
|
|
|
|
// module productcomments
|
|
.rating
|
|
clear: both
|
|
display: block
|
|
margin: 2em
|
|
cursor: pointer
|
|
|
|
.rating:after
|
|
content: '.'
|
|
display: block
|
|
height: 0
|
|
width: 0
|
|
clear: both
|
|
visibility: hidden
|
|
|
|
.cancel, .star
|
|
overflow: hidden
|
|
float: left
|
|
margin: 0 1px 0 0
|
|
width: 16px
|
|
height: 16px
|
|
cursor: pointer
|
|
|
|
.cancel, .cancel a
|
|
background: url(../../../modules/productcomments/img/delete.gif) no-repeat 0 -16px !important
|
|
|
|
.star, .star a
|
|
|
|
.cancel a, .star a
|
|
display: block
|
|
width: 100%
|
|
height: 100%
|
|
background-position: 0 0
|
|
|
|
div.star_on a
|
|
background-position: 0 -16px
|
|
|
|
div.star_hover a,
|
|
div.star a:hover
|
|
background-position: 0 -32px
|
|
|
|
.pack_content
|
|
margin: 10px 0 10px 0
|
|
|
|
.confirmation
|
|
margin: 0 0 10px
|
|
padding: 10px
|
|
border: 1px solid #e6db55
|
|
font-size: 13px
|
|
background: none repeat scroll 0 0 #ffffe0
|
|
|
|
#page .rte
|
|
background: transparent none repeat scroll 0 0
|
|
|
|
.listcomment
|
|
list-style-type: none
|
|
margin: 0 0 20px 0 !important
|
|
|
|
.listcomment li
|
|
padding: 10px 0
|
|
border-bottom: 1px dotted $base-border-color
|
|
color: #666
|
|
|
|
.listcomment .titlecomment
|
|
display: block
|
|
font-weight: bold
|
|
font-size: 12px
|
|
color: $base-text-color
|
|
|
|
.listcomment .txtcomment
|
|
display: block
|
|
padding: 5px 0
|
|
color: $base-text-color
|
|
|
|
.listcomment .authorcomment
|
|
|
|
//HEADER
|
|
.banner-top
|
|
background: #000
|
|
|
|
.header-container
|
|
background: $light-background
|
|
|
|
#header
|
|
padding-bottom: 21px
|
|
position: relative
|
|
background: $light-background
|
|
.header-row
|
|
background: $dark-background
|
|
.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
|
|
|
|
#header_user_info
|
|
float: right
|
|
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-row-2
|
|
position: relative
|
|
z-index: 1
|
|
#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
|
|
#header_right
|
|
position: relative
|
|
|
|
//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: ""
|
|
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
|
|
display: inline-block
|
|
padding: 0 11px 0 0
|
|
border: 1px solid $base-border-color
|
|
font-weight: bold
|
|
font-size: 12px
|
|
line-height: 24px
|
|
min-height: 6px
|
|
@include border-radius(3px)
|
|
overflow: hidden
|
|
margin-bottom: 16px
|
|
position: relative
|
|
z-index: 1
|
|
.navigation-pipe
|
|
width: 18px
|
|
display: inline-block
|
|
text-indent: -5000px
|
|
a
|
|
display: inline-block
|
|
background: $light-background
|
|
padding: 0 8px 0 22px
|
|
margin-left: -26px
|
|
position: relative
|
|
z-index: 2
|
|
color: $base-text-color
|
|
&.home
|
|
font-size: 17px
|
|
color: $text-color
|
|
width: 38px
|
|
text-align: center
|
|
padding: 0
|
|
margin: 0
|
|
@include border-top-left-radius(3px)
|
|
@include border-bottom-left-radius(3px)
|
|
z-index: 99
|
|
line-height: 22px
|
|
display: inline-block
|
|
height: 24px
|
|
i
|
|
vertical-align: -1px
|
|
&:after
|
|
display: inline-block
|
|
content: "."
|
|
position: absolute
|
|
right: -10px
|
|
top: 3px
|
|
width: 18px
|
|
height: 18px
|
|
background: $light-background
|
|
border-right: 1px solid $base-border-color
|
|
border-top: 1px solid $base-border-color
|
|
border-radius: 2px
|
|
text-indent: -5000px
|
|
z-index: -1
|
|
@include rotate(45deg)
|
|
&:hover
|
|
color: #777
|
|
.ie8
|
|
.breadcrumb
|
|
min-height: 1px
|
|
a:after
|
|
display: none
|
|
.navigation-pipe
|
|
width: 20px
|
|
|
|
// FOOTER
|
|
.footer-container
|
|
padding: 0 0 100px 0
|
|
// min 768px
|
|
@media (min-width: $screen-sm)
|
|
background: url(../img/footer-bg.gif) repeat-x
|
|
#footer
|
|
color: #777
|
|
position: relative
|
|
.footer-block
|
|
margin-top: 45px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
margin-top: 20px
|
|
a
|
|
color: #777
|
|
&:hover
|
|
color: $light-text-color
|
|
h4
|
|
font: 600 18px/22px $font-custom
|
|
color: $light-text-color
|
|
margin: 0 0 13px 0
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
position: relative
|
|
margin-bottom: 0
|
|
padding-bottom: 13px
|
|
|
|
&:after
|
|
display: block
|
|
content: ""
|
|
font-family: $font-icon
|
|
position: absolute
|
|
right: 0
|
|
top: 1px
|
|
&.active:after
|
|
content: ""
|
|
a
|
|
color: $light-text-color
|
|
ul
|
|
li
|
|
padding-bottom: 8px
|
|
a
|
|
font-weight: bold
|
|
text-shadow: 1px 1px 0px rgba(0,0,0,0.4)
|
|
#block_contact_infos
|
|
border-left: 1px solid #515151
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
border: none
|
|
> div
|
|
padding: 0 0 0 5px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
padding-left: 0
|
|
ul
|
|
li
|
|
padding: 0 0 7px 4px
|
|
overflow: hidden
|
|
line-height: 30px
|
|
> span,
|
|
> span a
|
|
color: $light-text-color
|
|
font-weight: normal
|
|
i
|
|
font-size: 25px
|
|
width: 32px
|
|
text-align: center
|
|
padding-right: 12px
|
|
float: left
|
|
color: #908f8f
|
|
|
|
.blockcategories_footer
|
|
clear: left
|
|
#social_block
|
|
float: left
|
|
width: 50%
|
|
padding: 22px 15px 0 15px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
width: 100%
|
|
float: left
|
|
padding-top: 5px
|
|
ul
|
|
float: right
|
|
@media (max-width: $screen-xs-max)
|
|
float: none
|
|
li
|
|
float: left
|
|
width: 40px
|
|
text-align: center
|
|
a
|
|
display: inline-block
|
|
color: #908f8f
|
|
font-size: 28px
|
|
span
|
|
display: none
|
|
&:before
|
|
display: inline-block
|
|
font-family: $font-icon
|
|
vertical-align: -5px
|
|
&:hover
|
|
color: $light-text-color
|
|
&.facebook
|
|
a
|
|
&:before
|
|
content: ""
|
|
&.twitter
|
|
a
|
|
&:before
|
|
content: ""
|
|
&.rss
|
|
a
|
|
&:before
|
|
content: ""
|
|
h4
|
|
float: right
|
|
margin-bottom: 0
|
|
font-size: 21px
|
|
line-height: 25px
|
|
text-transform: none
|
|
padding: 0 10px 0 0
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
display: none
|
|
text-align: center
|
|
.bottom-footer
|
|
position: absolute
|
|
bottom: -55px
|
|
left: 0
|
|
div
|
|
padding: 15px 0 0 0
|
|
border-top: 1px solid #515151
|
|
width: 100%
|
|
|
|
// Make sure lists are correctly displayed in tinyMCE BO edition mode too
|
|
#short_description_content ul,
|
|
#short_description_content ol,
|
|
#short_description_content dl,
|
|
#tinymce ul,
|
|
#tinymce ol,
|
|
#tinymce dl
|
|
margin-left: 20px
|
|
|
|
.block_hidden_only_for_screen
|
|
display: none
|
|
|
|
// PAIMENT - PAGE ORDER
|
|
|
|
//nav bottom
|
|
.cart_navigation
|
|
margin: 0 0 20px
|
|
.button-medium
|
|
float: right
|
|
@include border-radius(4px)
|
|
font-size: 20px
|
|
line-height: 24px
|
|
span
|
|
@include border-radius(4px)
|
|
padding: 11px 15px 10px 15px
|
|
i.right
|
|
font-size: 25px
|
|
line-height: 25px
|
|
vertical-align: -4px
|
|
margin-left: 6px
|
|
.button-exclusive
|
|
border: none
|
|
background: none
|
|
padding: 0
|
|
font-size: 17px
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
margin: 9px 0 0 0
|
|
i
|
|
color: #777777
|
|
margin-right: 8px
|
|
&:hover, &:focus, &:active
|
|
color: $link-hover-color
|
|
@include box-shadow(none)
|
|
@media (max-width: $screen-xs)
|
|
> span
|
|
display: block
|
|
width: 100%
|
|
padding-bottom: 15px
|
|
|
|
// step 1 - cart
|
|
.cart_last_product
|
|
display: none
|
|
.cart_quantity .cart_quantity_input
|
|
height: 27px
|
|
line-height: 27px
|
|
padding: 0
|
|
text-align: center
|
|
width: 57px
|
|
|
|
.table
|
|
tbody > tr > td
|
|
vertical-align: middle
|
|
&.cart_quantity
|
|
padding: 41px 14px 25px
|
|
width: 88px
|
|
.cart_quantity_button
|
|
margin-top: 3px
|
|
a
|
|
float: left
|
|
margin-right: 3px
|
|
&+ a
|
|
margin-right: 0
|
|
&.cart_delete,
|
|
&.price_discount_del
|
|
padding: 5px
|
|
tfoot > tr > td
|
|
vertical-align: middle
|
|
|
|
.cart_delete a.cart_quantity_delete,
|
|
a.price_discount_delete
|
|
font-size: 23px
|
|
color: $base-text-color
|
|
&:hover
|
|
color: #c0c0c0
|
|
|
|
#cart_summary
|
|
tbody
|
|
td
|
|
&.cart_product
|
|
padding: 19px
|
|
width: 137px
|
|
img
|
|
border: 1px solid $table-border-color
|
|
&.cart_unit
|
|
.price
|
|
span
|
|
display: block
|
|
&.price-percent-reduction
|
|
margin: 5px auto
|
|
display: inline-block
|
|
&.old-price
|
|
text-decoration: line-through
|
|
&.cart_description
|
|
width: 480px
|
|
small
|
|
display: block
|
|
padding: 5px 0 0 0
|
|
&.cart_avail
|
|
tfoot
|
|
td
|
|
&.text-right
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
&.price
|
|
text-align: right
|
|
&.total_price_container
|
|
span
|
|
font: 600 18px/22px $font-custom
|
|
color: #555454
|
|
text-transform: uppercase
|
|
&#total_price_container
|
|
font: 600 21px/25px $font-custom
|
|
color: $product-price-color
|
|
background: $light-background
|
|
|
|
@media (max-width: 767px)
|
|
#order-detail-content
|
|
#cart_summary
|
|
table, thead, tbody, th, td, tr
|
|
display: block
|
|
thead tr
|
|
position: absolute
|
|
top: -9999px
|
|
left: -9999px
|
|
tr
|
|
border-bottom: 1px solid #ccc
|
|
overflow: hidden
|
|
td
|
|
border: none
|
|
position: relative
|
|
width: 50%
|
|
float: left
|
|
white-space: normal
|
|
&.cart_product
|
|
&.cart_description
|
|
&.cart_avail
|
|
clear: both
|
|
&.cart_unit
|
|
&.cart_quantity
|
|
clear: both
|
|
padding: 9px 8px 11px 18px
|
|
&.cart_total
|
|
&.cart_delete
|
|
width: 100%
|
|
clear: both
|
|
text-align: right
|
|
&:before
|
|
display: inline-block
|
|
padding-right: 0.5em
|
|
position: relative
|
|
top: -3px
|
|
div
|
|
display: inline
|
|
td:before
|
|
content: attr(data-title)
|
|
display: block
|
|
tfoot
|
|
td
|
|
float: none
|
|
width: 100%
|
|
&:before
|
|
display: inline
|
|
tr
|
|
.text-right, .price
|
|
display: block
|
|
float: left
|
|
width: 50%
|
|
|
|
.cart_voucher
|
|
vertical-align: top !important
|
|
h4
|
|
font: 600 18px/22px $font-custom
|
|
color: $base-heading-color
|
|
text-transform: uppercase
|
|
padding: 7px 0 10px 0
|
|
.title-offers
|
|
color: $base-text-color
|
|
font-weight: bold
|
|
margin-bottom: 6px
|
|
fieldset
|
|
margin-bottom: 10px
|
|
#discount_name
|
|
float: left
|
|
width: 219px
|
|
margin-right: 11px
|
|
#display_cart_vouchers
|
|
span
|
|
font-weight: bold
|
|
cursor: pointer
|
|
color: $link-color
|
|
&:hover
|
|
color: $link-hover-color
|
|
|
|
.enable-multishipping
|
|
margin: -13px 0 17px
|
|
label
|
|
font-weight: normal
|
|
|
|
#HOOK_SHOPPING_CART
|
|
#loyalty
|
|
i
|
|
font-size: 26px
|
|
line-height: 26px
|
|
color: #cfcccc
|
|
#order_carrier
|
|
clear: both
|
|
margin-top: 20px
|
|
border: 1px solid #999
|
|
background: $light-background
|
|
#order_carrier .title_block
|
|
padding: 0 15px
|
|
height: 29px
|
|
font-weight: bold
|
|
line-height: 29px
|
|
color: $light-text-color
|
|
font-weight: bold
|
|
text-transform: uppercase
|
|
background: url(../img/bg_table_th.png) repeat-x 0 -10px #999
|
|
#order_carrier span
|
|
display: block
|
|
padding: 15px
|
|
font-weight: bold
|
|
.multishipping_close_container
|
|
text-align: center
|
|
table#cart_summary .gift-icon
|
|
color: white
|
|
background: #0088CC
|
|
line-height: 20px
|
|
padding: 2px 5px
|
|
border-radius: 5px
|
|
|
|
// step 3 - address
|
|
#multishipping_mode_box
|
|
padding-top: 12px
|
|
padding-bottom: 19px
|
|
.title
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
margin-bottom: 15px
|
|
|
|
.description_off
|
|
display: none
|
|
div
|
|
margin-bottom: 10px
|
|
|
|
.description_off a:hover,
|
|
.description a:hover
|
|
background: #f3f3f3
|
|
border: 1px solid #ccc
|
|
|
|
#multishipping_mode_box.on .description_off
|
|
display: block
|
|
|
|
.multishipping-cart
|
|
.cart_address_delivery
|
|
&.form-control
|
|
width: 198px
|
|
|
|
#order .address_add.submit
|
|
margin-bottom: 20px
|
|
#ordermsg
|
|
margin-bottom: 30px
|
|
|
|
#id_address_invoice.form-control,
|
|
#id_address_delivery.form-control
|
|
width: 269px
|
|
.checkbox.addressesAreEquals
|
|
margin: 0 0 25px 0
|
|
|
|
// step 4 - paiement
|
|
#order .delivery_option,
|
|
#order-opc .delivery_option
|
|
> div
|
|
display: block
|
|
margin-bottom: 20px
|
|
font-weight: normal
|
|
> table
|
|
background: $light-background
|
|
margin-bottom: 0
|
|
&.resume
|
|
height: 53px
|
|
&.delivery_option_carrier
|
|
margin-top: 10px
|
|
width: 100%
|
|
background: $state-info-bg
|
|
color: $state-info-text
|
|
border: 1px solid $state-info-border
|
|
font-weight: bold
|
|
td
|
|
padding: 8px 11px 7px 11px
|
|
i
|
|
font-size: 20px
|
|
margin-right: 7px
|
|
vertical-align: -2px
|
|
td
|
|
&.delivery_option_radio
|
|
width: 54px
|
|
padding-left: 0
|
|
padding-right: 0
|
|
text-align: center
|
|
&.delivery_option_logo
|
|
width: 97px
|
|
padding-left: 21px
|
|
&.delivery_option_price
|
|
width: 162px
|
|
|
|
.order_carrier_content
|
|
line-height: normal
|
|
padding-bottom: 16px
|
|
.carrier_title
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
.checkbox
|
|
input
|
|
margin-top: 2px
|
|
.delivery_options_address
|
|
.carrier_title
|
|
margin-bottom: 17px
|
|
& + div
|
|
padding-bottom: 15px
|
|
|
|
#carrierTable
|
|
border: 1px solid #999
|
|
border-bottom: none
|
|
background: $light-background
|
|
|
|
#carrierTable tbody
|
|
border-bottom: 1px solid #999
|
|
|
|
#carrierTable th
|
|
padding: 0 15px
|
|
height: 29px
|
|
font-weight: bold
|
|
line-height: 29px
|
|
color: $light-text-color
|
|
text-transform: uppercase
|
|
background: url(../img/bg_table_th.png) repeat-x 0 -10px #999
|
|
#carrierTable td
|
|
padding: 15px
|
|
font-weight: bold
|
|
border-right: 1px solid #e9e9e9
|
|
|
|
#carrierTable td.carrier_price
|
|
border: none
|
|
p.checkbox.gift
|
|
margin-bottom: 10px
|
|
|
|
#gift_div
|
|
display: none
|
|
margin-top: 5px
|
|
margin-bottom: 10px
|
|
|
|
a.iframe
|
|
color: $base-text-color
|
|
text-decoration: underline
|
|
&:hover
|
|
text-decoration: none
|
|
|
|
//step 5 - paiement
|
|
p.payment_module
|
|
margin-bottom: 10px
|
|
a
|
|
display: block
|
|
border: 1px solid $table-border-color
|
|
@include border-radius(4px)
|
|
font-size: 17px
|
|
line-height: 23px
|
|
color: $base-text-color
|
|
font-weight: bold
|
|
padding: 33px 40px 34px 99px
|
|
letter-spacing: -1px
|
|
position: relative
|
|
&.bankwire
|
|
background: url(../img/bankwire.png) 15px 12px no-repeat $base-box-bg
|
|
&.cheque
|
|
background: url(../img/cheque.png) 15px 15px no-repeat $base-box-bg
|
|
&.cheque, &.bankwire
|
|
&:after
|
|
display: block
|
|
content: ""
|
|
position: absolute
|
|
right: 0px
|
|
margin-top: -11px
|
|
top: 50%
|
|
font-family: $font-icon
|
|
font-size: 25px
|
|
height: 22px
|
|
width: 14px
|
|
color: $link-color
|
|
&:hover
|
|
background-color: #f6f6f6
|
|
span
|
|
font-weight: bold
|
|
color: $base-body-color
|
|
|
|
.payment_module.box
|
|
margin-top: 20px
|
|
p.cheque-indent
|
|
margin-bottom: 9px
|
|
.cheque-box
|
|
.form-group
|
|
margin-bottom: 0px
|
|
.form-control
|
|
width: 269px
|
|
|
|
.order-confirmation.box
|
|
line-height: 29px
|
|
a
|
|
text-decoration: underline
|
|
&:hover
|
|
text-decoration: none
|
|
|
|
//PAGE ORDER-OPC
|
|
.delivery_option_carrier td
|
|
width: 200px
|
|
.delivery_option_carrier td + td
|
|
width: 280px
|
|
.delivery_option_carrier td + td + td
|
|
width: 200px
|
|
.delivery_option_carrier tr td
|
|
padding: 5px
|
|
.delivery_option_carrier.selected
|
|
display: table
|
|
.delivery_option_carrier.not-displayable
|
|
display: none
|
|
|
|
|
|
//PAGES ADRESSES, IDENTITY
|
|
#address,
|
|
#identity,
|
|
#account-creation_form,
|
|
#new_account_form,
|
|
#opc_account_form,
|
|
#authentication
|
|
.box
|
|
padding-bottom: 20px
|
|
line-height: 20px
|
|
p.required
|
|
color: #f13340
|
|
margin: 9px 0 16px 0
|
|
p.inline-infos
|
|
color: #f00
|
|
.form-group
|
|
margin-bottom: 4px
|
|
.form-control
|
|
max-width: 271px
|
|
&#adress_alias
|
|
margin-bottom: 20px
|
|
&.phone-number
|
|
// min 1200px
|
|
@media (min-width: $screen-lg)
|
|
float: left
|
|
width: 270px
|
|
margin-right: 13px
|
|
+ p
|
|
@media (min-width: $screen-lg)
|
|
padding: 23px 0 0 0px
|
|
margin-bottom: 0
|
|
.gender-line
|
|
margin-bottom: 4px
|
|
padding-top: 4px
|
|
> label
|
|
margin-right: 10px
|
|
margin-bottom: 0
|
|
.radio-inline
|
|
label
|
|
font-weight: normal
|
|
color: #777
|
|
#identity,
|
|
#authentication,
|
|
#order-opc
|
|
#center_column
|
|
form.std
|
|
.row
|
|
margin-left: -5px
|
|
margin-right: -5px
|
|
.col-xs-4
|
|
padding-left: 5px
|
|
padding-right: 5px
|
|
max-width: 94px
|
|
.form-control
|
|
max-width: 84px
|
|
.footer_links
|
|
border: none
|
|
padding-top: 0
|
|
|
|
#new_account_form .box
|
|
line-height: 20px
|
|
.date-select
|
|
padding-bottom: 10px
|
|
.top-indent
|
|
padding-top: 10px
|
|
.customerprivacy
|
|
padding-top: 15px
|
|
|
|
#authentication
|
|
fieldset.account_creation
|
|
margin-bottom: 20px
|
|
|
|
// PASSWORD
|
|
#password
|
|
.box
|
|
p
|
|
margin-bottom: 9px
|
|
.form-group
|
|
margin-bottom: 20px
|
|
.form-control
|
|
width: 263px
|
|
.footer_links
|
|
padding-top: 0
|
|
border: none
|
|
|
|
//PAGE SEARCH
|
|
#instant_search_results
|
|
a.close
|
|
font-size: 13px
|
|
font-weight: 600
|
|
opacity: 1
|
|
line-height: inherit
|
|
text-transform: none
|
|
font-family: $font-famaly
|
|
&:hover
|
|
color: $link-hover-color
|
|
|
|
// MANUFACTURERS/SUPPLIERS
|
|
#manufacturers_list,
|
|
#suppliers_list
|
|
h3
|
|
font-size: 17px
|
|
line-height: 23px
|
|
.description
|
|
line-height: 18px
|
|
.product-counter
|
|
a
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
&:hover
|
|
color: $link-hover-color
|
|
&.list
|
|
li
|
|
.mansup-container
|
|
border-top: 1px solid $base-border-color
|
|
padding: 31px 0 30px 0
|
|
// < 768
|
|
@media (max-width: $screen-xs-max)
|
|
text-align: center
|
|
&:first-child
|
|
.mansup-container
|
|
border-top: 0
|
|
.left-side
|
|
text-align: center
|
|
|
|
h3
|
|
margin-top: -5px
|
|
padding-bottom: 8px
|
|
.middle-side
|
|
padding-left: 0
|
|
// < 768
|
|
@media (max-width: $screen-xs-max)
|
|
padding-right: 15px
|
|
padding-left: 15px
|
|
.right-side-content
|
|
border-left: 1px solid $base-border-color
|
|
padding: 0 0 32px 31px
|
|
min-height: 108px
|
|
// < 768
|
|
@media (max-width: $screen-xs-max)
|
|
min-height: 1px
|
|
padding: 0
|
|
border: none
|
|
.product-counter
|
|
position: relative
|
|
top: -6px
|
|
margin-bottom: 12px
|
|
// < 768
|
|
@media (max-width: $screen-xs-max)
|
|
top: 0
|
|
&.grid
|
|
li
|
|
text-align: center
|
|
|
|
.product-container
|
|
padding-top: 40px
|
|
padding-bottom: 20px
|
|
border-bottom: 1px solid $base-border-color
|
|
.left-side
|
|
padding-bottom: 42px
|
|
h3
|
|
padding-bottom: 10px
|
|
.product-counter
|
|
margin-bottom: 12px
|
|
// > 1199
|
|
@media (min-width: $screen-lg)
|
|
li.first-in-line
|
|
clear: left
|
|
li.last-line
|
|
.product-container
|
|
border-bottom: none
|
|
//768 -> 1199
|
|
@media (min-width: $screen-sm) and (max-width: $screen-md-max)
|
|
li.first-item-of-tablet-line
|
|
clear: left
|
|
li.last-tablet-line
|
|
.product-container
|
|
border-bottom: none
|
|
// < 768
|
|
@media (max-width: $screen-xs-max)
|
|
li.item-last
|
|
.product-container
|
|
border-bottom: none
|
|
|
|
#manufacturer,
|
|
#supplier
|
|
.description_box
|
|
padding-top: 20px
|
|
padding-bottom: 20px
|
|
border-top: 1px solid $base-border-color
|
|
.hide_desc
|
|
display: none
|
|
.bottom-pagination-content,
|
|
.top-pagination-content
|
|
min-height: 69px
|
|
.top-pagination-content.bottom-line
|
|
border-bottom: 1px solid $base-border-color
|
|
|
|
//DISCOUNT PAGE
|
|
table.discount
|
|
i
|
|
font-size: 20px
|
|
line-height: 20px
|
|
vertical-align: -2px
|
|
&.icon-ok
|
|
color: #46a74e
|
|
&.icon-remove
|
|
color: #f13340
|
|
|
|
//GUEST TRACKING
|
|
#guestTracking
|
|
.form-control
|
|
max-width: 271px
|
|
// > 1200px
|
|
@media (min-width: $screen-lg)
|
|
.form-group
|
|
overflow: hidden
|
|
i
|
|
padding-left: 10px
|
|
.form-control
|
|
float: left
|
|
label
|
|
float: left
|
|
clear: both
|
|
width: 100%
|
|
|
|
//PAGE 404
|
|
#pagenotfound
|
|
.pagenotfound
|
|
max-width: 824px
|
|
margin: 0 auto
|
|
text-align: center
|
|
.img-404
|
|
padding: 8px 0 27px 0
|
|
img
|
|
max-width: 100%
|
|
h1
|
|
font: 600 28px/34px $font-custom
|
|
color: $base-text-color
|
|
text-transform: uppercase
|
|
margin-bottom: 7px
|
|
p
|
|
font: 600 16px/20px $font-custom
|
|
color: #555454
|
|
text-transform: uppercase
|
|
border-bottom: 1px solid $base-border-color
|
|
padding-bottom: 19px
|
|
margin-bottom: 20px
|
|
h3
|
|
font-weight: bold
|
|
color: $base-text-color
|
|
font-size: 13px
|
|
line-height: normal
|
|
margin-bottom: 18px
|
|
|
|
label
|
|
font-weight: normal
|
|
@media (max-width: $screen-xs-max)
|
|
display: block
|
|
.form-control
|
|
max-width: 293px
|
|
display: inline-block
|
|
margin-right: 5px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
margin: 0 auto 15px auto
|
|
display: block
|
|
.buttons
|
|
padding: 48px 0 20px 0
|
|
.button-medium
|
|
i.left
|
|
font-size: 17px
|
|
|
|
//addon RerversoForm
|
|
#account-creation_form fieldset.reversoform
|
|
padding: 10px !important
|
|
#account-creation_form fieldset.reversoform .text label
|
|
display: block
|
|
padding: 0 0 10px 0
|
|
width: 100%
|
|
text-align: left
|
|
|
|
#account-creation_form fieldset.reversoform .infos-sup
|
|
padding: 0 !important
|
|
font-size: 10px
|
|
font-style: italic
|
|
text-align: right
|
|
|
|
//addon customer privacy
|
|
#account-creation_form fieldset.customerprivacy label,
|
|
fieldset.customerprivacy label
|
|
cursor: pointer
|
|
|
|
//addon referralprogram
|
|
.tab-content
|
|
margin-top: 20px
|
|
|
|
//addons comments products
|
|
form#sendComment fieldset
|
|
padding: 10px
|
|
border: 1px solid #ccc
|
|
background: #eee
|
|
|
|
form#sendComment h3
|
|
font-size: 14px
|
|
#new_comment_form p.text
|
|
margin-bottom: 0
|
|
padding-bottom: 0
|
|
|
|
#sendComment p.text label,
|
|
#sendComment p.textarea label
|
|
display: block
|
|
margin: 12px 0 4px
|
|
font-weight: bold
|
|
font-size: 12px
|
|
|
|
#sendComment p.text input
|
|
padding: 0 5px
|
|
height: 28px
|
|
width: 498px
|
|
border: 1px solid #ccc
|
|
background: url(../img/bg_input.png) repeat-x 0 0 $light-background
|
|
|
|
#sendComment p.textarea textarea
|
|
height: 80px
|
|
width: 508px
|
|
border: 1px solid #ccc
|
|
|
|
#sendComment p.submit
|
|
padding: 0
|
|
text-align: right
|
|
|
|
#sendComment p.closeform
|
|
float: right
|
|
padding: 0
|
|
height: 12px
|
|
width: 12px
|
|
text-indent: -5000px
|
|
background: url(../img/icon/delete.gif) no-repeat 0 0
|
|
.star
|
|
position: relative
|
|
top: -1px
|
|
float: left
|
|
width: 14px
|
|
overflow: hidden
|
|
cursor: pointer
|
|
font-size: 14px
|
|
font-weight: normal
|
|
.star
|
|
display: block
|
|
a
|
|
display: block
|
|
position: absolute
|
|
text-indent: -5000px
|
|
div.star
|
|
&:after
|
|
content: ""
|
|
font-family: $font-icon
|
|
display: inline-block
|
|
color: #777676
|
|
|
|
div.star.star_on
|
|
display: block
|
|
&:after
|
|
content: ""
|
|
font-family: $font-icon
|
|
display: inline-block
|
|
color: #ef8743
|
|
|
|
div.star.star_hover
|
|
&:after
|
|
content: ""
|
|
font-family: $font-icon
|
|
display: inline-block
|
|
color: #ef8743
|
|
|
|
|
|
//CSS Modules
|
|
//IMPORTANT - Internet Explorer can read 31 CSS files max. Some CSS have been put here and erased from their own module folder.
|
|
|
|
//Block ADVERTISING
|
|
.advertising_block
|
|
width: 191px
|
|
margin-bottom: 1em
|
|
text-align: center
|
|
|
|
//footer
|
|
.blockcategories_footer ul ul
|
|
display: none !important
|
|
|
|
//Form validate
|
|
.form-group
|
|
&.form-error
|
|
input, textarea
|
|
border: 1px solid #f13340
|
|
color: #f13340
|
|
background: url(../img/icon/form-error.png) 98% 5px no-repeat #fff1f2
|
|
&.form-ok
|
|
input, textarea
|
|
border: 1px solid #46a74e
|
|
color: #35b33f
|
|
background: url(../img/icon/form-ok.png) 98% 5px no-repeat #ddf9e1
|
|
&.form-error, &.form-ok
|
|
.form-control
|
|
padding-right: 30px
|
|
|
|
//uniform
|
|
.radio-inline, .checkbox
|
|
padding-left: 0
|
|
.checker
|
|
float: left
|
|
span
|
|
top: 0px
|
|
div.radio
|
|
display: inline-block
|
|
span
|
|
float: left
|
|
top: 0px
|
|
|
|
.fancybox-skin
|
|
background: $light-background !important
|
|
|
|
.fancybox-skin .fancybox-close
|
|
top: 8px
|
|
right: 8px
|
|
width: 28px
|
|
height: 28px
|
|
background: none
|
|
font-size: 28px
|
|
line-height: 28px
|
|
color: $base-text-color
|
|
text-align: center
|
|
&:hover
|
|
color: $link-hover-color
|
|
&:after
|
|
content: ""
|
|
font-family: $font-icon
|
|
|
|
//Homepage pre-footer
|
|
#facebook_block,
|
|
#cmsinfo_block
|
|
margin-top: 40px
|
|
overflow: hidden
|
|
background: $homepage-footer-bg
|
|
min-height: 344px
|
|
padding-right: 29px
|
|
padding-left: 29px
|
|
// max 991px
|
|
@media (max-width: $screen-sm-max)
|
|
padding-left: 15px
|
|
padding-right: 15px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
width: 100%
|
|
min-height: 1px
|
|
h4
|
|
font: 600 21px/25px $font-custom
|
|
color: $base-heading-color
|
|
margin-bottom: 26px
|
|
// max 991px
|
|
@media (max-width: $screen-sm-max)
|
|
font-size: 16px
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
padding-top: 20px !important
|
|
#facebook_block
|
|
h4
|
|
padding-top: 44px
|
|
.facebook-fanbox
|
|
background: $light-background
|
|
border: 1px solid #aaaaaa
|
|
padding-bottom: 10px
|
|
#cmsinfo_block
|
|
border-left: 1px solid $homepage-footer-border
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
border: none
|
|
margin-top: 10px
|
|
> div
|
|
padding-top: 45px
|
|
padding-left: 0
|
|
// max 767px
|
|
@media (max-width: $screen-xs-max)
|
|
padding-top: 20px
|
|
// max 479px
|
|
@media (max-width: $screen-xs - 1)
|
|
width: 100%
|
|
border-top: 1px solid $homepage-footer-border
|
|
> div + div
|
|
border-left: 1px solid $homepage-footer-border
|
|
min-height: 344px
|
|
padding-left: 29px
|
|
// max 479px
|
|
@media (max-width: $screen-xs - 1)
|
|
border-left: none
|
|
padding-left: 10px
|
|
min-height: 1px
|
|
padding-bottom: 15px
|
|
h3
|
|
margin-bottom: 12px
|
|
em
|
|
float: left
|
|
font-size: 35px
|
|
color: $light-text-color
|
|
width: 59px
|
|
height: 59px
|
|
line-height: 59px
|
|
text-align: center
|
|
background: $dark-background
|
|
@include border-radius(100px)
|
|
margin: 3px 10px 0 0
|
|
// max 991px
|
|
@media (max-width: $screen-sm-max)
|
|
width: 30px
|
|
height: 30px
|
|
line-height: 30px
|
|
font-size: 20px
|
|
.type-text
|
|
overflow: hidden
|
|
h3
|
|
font: 600 21px/25px $font-custom
|
|
color: $base-heading-color
|
|
// max 1199px
|
|
@media (max-width: $screen-md-max)
|
|
font-size: 18px
|
|
ul
|
|
li
|
|
padding-bottom: 22px
|
|
// max 1199px
|
|
@media (max-width: $screen-md-max)
|
|
padding-bottom: 10px
|
|
// max 991px
|
|
@media (max-width: $screen-sm-max)
|
|
padding-bottom: 0
|
|
.ie8
|
|
#facebook_block,
|
|
#cmsinfo_block
|
|
height: 344px
|
|
//Zoom
|
|
// max 1199px
|
|
@media (max-width: $screen-md-max)
|
|
.zoomdiv
|
|
display: none !important |