File: D:/HostingSpaces/SBogers10/douven.komma.pro/resources/assets/sass/site/pages/products/_show.sass
/*==========================================================================
Category detail page
========================================================================== */
.product-holder,
.product-title
background-color: transparent
display: -ms-flexbox
display: -webkit-box
display: flex
flex-wrap: wrap
clear: both
.titleHolder
width: column(11, 12)
margin: 0 column(0.5, 12) 60px column(0.5, 12)
background-color: white
border-left: solid 15px $douvYellow
box-shadow: 15px 15px 40px 10px rgba(0, 0, 0, 0.05)
h1
margin: 15px
display: inline-block
font-weight: bold
font-size: 39px
letter-spacing: -0.19px
&:before
content: ''
display: inline-block
margin: 5px 15px -5px 10px
width: 35px
height: 38px
position: relative
background-image: url(/img/svg/icons.svg)
&.cooling
&:before
//background-position: -6px -158px
//background-repeat: no-repeat
//background-size: 170px
background-position: -6px -230px
background-repeat: no-repeat
background-size: 240px
&.events
&:before
background-position: -72px -232px
background-repeat: no-repeat
background-size: 240px
&.mobility
&:before
width: 45px
background-position: -130px -230px
background-repeat: no-repeat
background-size: 240px
.contact-dude
+inline-flex(flex-end, center)
position: relative
width: 275px
padding: 20px 0
top: 0
right: 20px
float: right
text-align: right
font-size: 18px
color: $douvBlue
.img-holder
display: inline-block
width: 90px
height: 90px
margin-left: 30px
border-radius: 50%
background: #E5E5E5 url('/img/Mark_Douven.png') repeat 50% 6%
background-size: 200%
p
display: inline-block
margin: 3px 0
a
font-weight: 600
text-decoration: none
color: $douvBlue
.left
border-left: none
padding-left: 0
width: column(5, 12)
margin-left: column(0.5, 12)
a.button
position: absolute
top: 0
.images
position: absolute
bottom: 0
z-index: 2
font-size: 1rem
line-height: 1.6
width: 100%
margin-top: 115px
ul
display: none
.right
background-color: white
width: column(6, 12)
padding: 60px column(1,12) column(0.5, 12) column(1,12)
font-size: 16px
line-height: 26px
letter-spacing: 0.08px
min-height: 775px
h3
margin-top: 0
font-size: 26px
color: $douvBlue
.spec-holder
+flex(flex-start, baseline)
flex-wrap: wrap
.top
width: 50%
.spec
width: 100%
.spec
width: 50%
font-size: 14px
&.measurements, &.specifics
width: 100%
.values
display: inline-block
margin-left: 5%
span
margin: 0 15px
color: $douvBlue
font-weight: bold
&.first
margin-left: 0
h4
position: relative
font-size: 16px
padding-right: 32px
color: $douvBlue
margin-bottom: 5px
&:before
content: ''
display: block
position: absolute
width: 18px
height: 19px
left: -25px
top: 4px
background-size: 18px 19px
background-position: 0 0
background-repeat: no-repeat
background-image: url(/img/svg/product_icons.svg)
&.insurance:before
background-image: url(/img/svg/product/insurance.svg)
&.measurements:before
background-image: url(/img/svg/product/dimensions.svg)
&.power:before
background-image: url(/img/svg/product/power.svg)
&.weight:before
background-image: url(/img/svg/product/weight.svg)
&.temp:before
background-image: url(/img/svg/product/temperature.svg)
&.specifics:before
background-image: url(/img/svg/product/misc.svg)
&.pricing:before
background: none
content: '\20AC'
color: $douvYellow
top: 0px
p
margin: 0
font-size: 14px
line-height: 18px
display: inline-block
ul
list-style: none
padding-left: 0
&:not(.specifics)
ul
list-style: none
margin: 0
padding: 0
font-size: 14px
line-height: 18px
.order-box
border: solid 2px $douvLightGray
padding: 8px
border-radius: 5px
margin-top: 30px
height: 66px
width: 100%
+flex(space-between, center)
.amount-label
font-weight: 600
font-size: 16px
color: $douvBlue
margin-left: 30px
.amount-box
width: 110px
border-radius: 5px
background-color: $douvLightGray20
display: inline-block
padding-right: 15px
+flex(space-evenly, center)
.amount
font-weight: 600
font-size: 30px
color: $douvBlue
margin: 0
width: 100%
background-color: transparent
border: none
text-align: right
.amount-changers
display: inline-block
height: 100%
width: 10px
a
border-radius: 3px
border: solid 2px $douvYellow
color: $douvYellow
text-decoration: none
padding: 5px 0 8px 0
width: 16px
line-height: 0
height: 16px
+flex(space-around, center)
margin: 5px 0
transition: color 0.2s, background-color 0.2s
&:hover
background-color: $douvYellow
color: white
a.button
color: white
transition: color 0.3s
&:hover
color: $douvDarkBlue
.related-products-header
line-height: 1em
font-size: 1em
padding-top: 90px
h3
font-size: 26px
margin-bottom: 30px
margin-left: column(1, 12)
color: $douvBlue
.related-products
+flex(space-between, flex-end)
flex-wrap: wrap
padding-bottom: 115px
z-index: 1
position: relative
min-height: 385px
.product
display: block
width: column(3, 12)
z-index: 1
&:first-child
margin-left: column(1, 12)
&:last-child
margin-right: column(1, 12)
a
text-decoration: none
color: $douvBlue
&:hover
.imgHolder
background-size: 105%
.yellow-block-overlay
&:after
width: 72px
height: 72px
.imgHolder
+flex(center, center)
width: 100%
padding-top: 60%
background-color: $douvLightGray
background-size: 100%
background-position: center center
position: relative
transition: background-size 0.3s
&:after
content: ''
position: absolute
width: 100%
height: 100%
left: 0
top: 0
background-color: $douvBlue
opacity: 0.2
transition: opacity 0.3s
.yellow-block-overlay
position: absolute
+flex(center, center)
width: 100%
height: 100%
top: 0
left: 0
z-index: 4
&:after
content: ''
width: 64px
height: 64px
border-radius: 3px
background: $douvDemiDarkYellow url('/img/svg/arrow_right.svg') no-repeat 50% 50%
background-size: 35%
transition: width 0.2s, height 0.2s
.titleHolder
background-color: $douvBlue
margin: 0
color: white
width: 100%
height: 112px
display: flex
padding: 15px
transition: background-color 0.2s
.temp-icon-holder
//border: solid 1px white
height: 100%
width: column(1, 3)
margin-left: -8px
margin-right: 3px
+flex(center, center)
span
position: relative
display: inline-block
height: 30px
font-size: 14px
&.temp-icon
background: url('/img/svg/temp_icons.svg') no-repeat -3.5% top
background-size: 360%
height: 65px
width: 35px
&.min-temp
text-align: right
&.cool
span
&.min-temp
top: -1px
right: -3px
&.max-temp
top: -13px
left: -5px
&.freeze
span
&.min-temp
top: 3px
right: -3px
&.temp-icon
background-position: 102.5% top
&.max-temp
top: -10px
left: -5px
.product-title
//width: column(2, 3)
//padding: 15px 0
display: inline-block
//h4
// font-size: 20px
// margin: 0
//
//p
// margin: 0
h4
font-size: 18px
margin: 0
font-weight: 600
p
margin: 0
font-size: 14px
.question-block
width: 100%
background-color: $douvDarkBlue
height: 100%
border-bottom: solid 5px $douvYellow
padding: 23% 0
color: white
font-size: 18px
line-height: 26px
font-weight: 600
letter-spacing: 0.08px
text-align: center
display: flex
align-items: center
justify-content: center
a
text-decoration: none
color: white
transition: color 0.3s
&:hover
color: $douvYellow
//
//html.ie
// .product-holder
// .right
// .spec-holder
// .spec
// h4
// &:before
// background-size: 1000%
// &.insurance::before
// background-position: center -32px //-38px = +6
//
// &.measurements:before
// background-position: center -75px
//
// &.power:before
// background-position: center 2px
//
// &.weight:before
// background-position: center -175px
//
// &.temp:before
// background-position: center -70px
//
// &.specifics:before
// background-position: center -138px
+respond-to-width(1300)
body.products
.content
.product-holder
.right
.spec
width: 100%
+respond-to-width(1220)
body.products
.content
.product-holder
.right
.amount-box
.amount
margin: 0 10px 0 0
.order-box
height: auto
.amount-label
margin-left: 5px
+respond-to-width(840)
body.products
header
height: 50px
.content
.product-title,
.product-holder,
.related-products-header,
.related-products
padding-left: column(0.5, 12)
padding-right: column(0.5, 12)
.product-title
.titleHolder
margin-left: 0
margin-right: 0
.contact-dude
+flex(flex-end, center)
position: relative
height: auto
right: 20px
bottom: 0
top: auto
.product-holder
.left
margin-left: 0
a.button
position: relative
.images
position: relative
margin-top: 60px
.right
padding-top: 15px
.spec-holder
.spec
width: 100%
.related-products-header
h3
margin-bottom: 0
margin-left: 0
.related-products
padding-bottom: 30px
.product
margin: 30px 0
+respond-to-width(650)
body.products
.content
.product-holder
.right
padding-top: 38px
.related-products-header
padding-top: 0
padding-bottom: 15px
+respond-to-width(435)
body.products
.content
.product-title,
.product-holder
padding-left: 0
padding-right: 0
.left
a.button
margin-left: column(0.5, 12)
width: column(11, 12)
.right
.spec-holder
padding-left: column(1, 12)
.order-box
flex-wrap: wrap
.amount-box
width: 75%
a.button
margin-top: 10px
width: 100%
.product-title
.titleHolder
h1
overflow-wrap: break-word
width: 88%
font-size: 32px
&:before
display: none
.related-products
.product
margin: 10px 0