File: D:/HostingSpaces/SBogers10/deensekroon.komma-mediadesign.nl/wwwroot/css/pages/_productShow.sass
/* Sections
========================================================================== */
.product-page-image-container,
.product-page-specs-container
+respond-to-width($bp_sm)
html:not(.ie) &
width: 40%
+respond-to-width($bp_mobile)
html:not(.ie) &
width: 100%
.product-page-main-container,
.product-page-relevant-products-container
+respond-to-width($bp_sm)
html:not(.ie) &
width: 60%
+respond-to-width($bp_mobile)
html:not(.ie) &
width: 100%
& > div
padding-left: 0
// Reset fonts
.product-page-image-section,
.product-page-main-section,
.product-page-specs-section,
.product-page-relevant-products-section
font-size: 15px
line-height: 1.4
margin-bottom: 50px
.product-page-image-section
position: relative
img
width: 100%
.product-page-main-section
padding-left: 50px
.product-page-relevant-products-section
padding-left: 50px
/* Content
========================================================================== */
// Image
.product-page-image-section
img
width: 100%
.product-page-image-holder
position: relative
#activate-hover
position: absolute
top: 0
left: 0
z-index: 10
width: 100%
height: 100%
cursor: pointer
background: url(../images/structure/spacer.gif)
.product-smallthumb-row
position: relative
margin: 0 0 8px 0
width: 100%
height: 72px
.product-smallthumb-holder
position: relative
float: left
margin: 0 8px 0 0
width: 72px
height: 72px
.product-smallthumb-image
overflow: hidden
width: 72px
height: 80px
cursor: pointer
.product-page-view-collection
position: relative
top: 40px
// Brand
.product-page-brand
display: block
margin-bottom: 10px
color: #9c9c9b
font-weight: 400
font-size: 18px
font-style: italic
font-variant: normal
text-decoration: none
&:hover
color: #0080C9
// Title
.product-page-title
display: block
margin: 0 0 0.5em 0
color: #565656
font-size: 28px
font-weight: 300
letter-spacing: 0
line-height: 26px
text-transform: none
// Price
.product-page-oldprice
display: block
color: #ababab
font-size: 18px
text-decoration: line-through
.product-page-currentprice
display: block
margin-bottom: 30px
color: #565656
font-size: 28px
line-height: 24px
// Stock
.product-page-instock
color: #19B94F
font-size: 14px
.product-page-notinstock
color: #ea004e
font-size: 14px
// Size
.customSelect
margin-bottom: 10px
// Order
/* order btn */
.order-button-holder
position: absolute
top: 0
right: 0
z-index: 50
width: 152px
text-align: right
.button-add-to-cart
position: relative
margin-bottom: 8px
width: 152px
height: 32px
cursor: pointer
input
position: absolute
top: 0
left: 0
z-index: 10
padding: 0
width: 144px
height: 32px
border: none
background: #999
opacity: 0
filter: alpha(opacity = 0)
cursor: pointer
.text
position: absolute
z-index: 8
top: 4px
left: 8px
font-weight: 600
font-size: 17px
color: #fff
.off
position: absolute
z-index: 2
width: 152px
height: 32px
background: url(../images/structure/deensekroon_sprite.png) 0 -328px
.over
position: absolute
z-index: 5
width: 152px
height: 32px
filter: alpha(opacity = 0)
opacity: 0
background: url(../images/structure/deensekroon_sprite.png) 0 -360px
.icon-arrow
position: absolute
z-index: 9
top: 12px
right: 8px
height: 14px
background: url(../images/structure/deensekroon_sprite.png) -132px -32px
// Description
.product-page-description
display: block
position: relative
margin-top: 45px
margin-bottom: 40px
font-size: 15px
line-height: 1.2
// Specifications
.specs-holder
font-size: 14px
line-height: 1.2
color: #aaa
.specs-title
display: block
color: #565656
font-weight: 700
font-size: 15px
border-bottom: 1px solid #eaeaea
// You may also like
.recommend-title
display: block
margin: 0 0 16px 0
padding: 0 8px
border-bottom: 1px solid #eaeaea
font-weight: 700
font-size: 15px
line-height: 1.2
text-align: left
.product-recommend-row
margin: 0 0 16px 0
.product-recommend-holder
position: relative
float: left
width: 33%
#product-recommend-arrow-down
position: relative
top: -6px