File: D:/HostingSpaces/Eurotools/euro-tools.nl/resources/assets/sass/site/partials/_shoppingCart.sass
body.shoppingcart
position: relative
&:before
content: ''
position: absolute
display: block
right: 0
bottom: 774px
width: 648px
height: 648px
background: url('/img/svg/big_hamer.svg')
background-size: 130%
background-position: 170% -25%
background-repeat: no-repeat
transform: scaleX(-1)
+respond-to-width(950)
display: none
.side-block
&.last
display: none
.shoppingCartContent
margin-bottom: 60px
div.shoppingcart-header
width: 100%
position: relative
h1
color: #2D323C
font-size: 26px
font-weight: 600
line-height: 41px
margin-top: 15px
margin-bottom: 30px
width: 80%
display: inline-block
a.button
display: inline-block
position: absolute
right: 0
margin-top: 15px
div.shoppingcartItemList
overflow: visible
vertical-align: top
width: column(5.5, 9)
div.remarks-box
background-color: white
box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)
margin-bottom: 30px
padding: 30px
h4
color: #323232
font-size: 12px
font-weight: 600
line-height: 20px
margin: 0
text-transform: uppercase
input
width: 100%
height: 43px
padding: 15px
border: 1px solid #E0E1E3
font-size: 14px
line-height: 14px
+placeholder
color: #67717A
ul
list-style: none
margin: 0
padding: 0
background-color: white
box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)
margin-bottom: 30px
li
display: block
position: relative
overflow: visible
width: 100%
padding: 20px 50px 20px 30px
border-bottom: 1px solid #E0E1E3
&:last-of-type
border-bottom: none
.close
display: block
position: absolute
right: 20px
top: 25px
width: 15px
height: 15px
color: #F95D5D
line-height: 0.4
text-decoration: none
font-weight: bold
font-size: 22px
.left, .right
display: inline-block
vertical-align: top
.left
width: 68%
font-size: 16px
line-height: 24px
p
text-transform: uppercase
color: #8791A0
font-size: 14px
font-weight: 500
line-height: 23px
label
color: #2D323C
font-weight: bold
h3
color: #3C414B
font-size: 20px
font-weight: 600
line-height: 32px
margin-top: 0
a
color: $blue
text-decoration: none
.right
width: 30%
text-align: right
.order-box
margin-top: 0
+inline-flex(flex-end, baseline)
.amount-label
margin-right: 10px
.amount-box
margin: 0
padding: 0
width: auto
.amount
margin-right: 0
.price
color: $blue
font-size: 20px
font-weight: bold
line-height: 24px
p
color: #7ED321
font-size: 15px
font-weight: 500
line-height: 24px
&.plain
color: #67717A
span.discount-price
color: #7ED321
span.old-price
color: #323232
font-size: 14px
font-weight: bold
line-height: 17px
text-decoration: line-through
margin-right: 15px
position: relative
bottom: 3px
a.button:not(.filled)
background-color: transparent
border: solid 2px $euroLighterGrey
.shoppingCartInfoBar
width: column(3, 9)
vertical-align: top
margin-left: column(0.5, 9)
.box
background-color: white
margin-bottom: 30px
padding: 30px
box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)
h3
color: #696E73
font-size: 15px
font-weight: 600
line-height: 24px
text-transform: uppercase
display: inline-block
vertical-align: top
margin-top: 0
&.second
margin-top: 30px
a.edit-adress
display: inline-block
color: #323232
font-family: $headerFontFamily
font-size: 12px
font-weight: 600
line-height: 24px
text-transform: uppercase
text-align: right
vertical-align: top
+respond-to-width(1200)
width: 100%
text-align: left
line-height: 12px
p
color: #67717A
font-family: $fontFamily
font-size: 16px
line-height: 24px
margin-bottom: 30px
b
color: #323232
hr
position: absolute
left: 0
width: 100%
border: 0
height: 0
border-bottom: 1px solid #E0E1E3
&.order-overview
.order-overview-header
+flex(space-between, center)
flex-wrap: wrap
h3
margin-bottom: 0
h5
color: #696E78
font-size: 16px
line-height: 24px
font-weight: normal
+flex(space-between, flex-start)
span
color: $blue
font-size: 20px
font-weight: 600
line-height: 32px
&.disclaimer
p:first-of-type
margin-top: 0
svg
position: relative
top: 5px
margin-right: 5px
circle
fill: $euroYellow
&.franco
+flex(center, flex-start)
flex-direction: column
padding: 20px 40px
p
margin: 0
color: #2D323C
font-size: 15px
p:first-child
font-weight: 600
color: #696E78
padding-left: 65px
margin-bottom: 15px
span
display: inline-block
height: 15px
font-size: 15px
font-weight: 600
margin-right: 20px
svg
position: relative
top: 2px
margin-right: 5px
input.hidden
display: none
.shopButtons
overflow: visible
a.button:first-of-type
margin-right: 30px
form
display: inline-block
.delete-modal
display: none
position: fixed
top: 0
left: 0
height: 100%
width: 100%
z-index: 9999
border: solid 1px red
justify-content: center
align-items: center
.modal-bg
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: rgba(0,0,0,0.3)
.modal-box
display: block
width: 400px
background-color: $euroBodyBg
+flex(center, center)
flex-direction: column
font-size: 16px
line-height: 24px
text-align: center
position: relative
padding: 30px
box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.2)
h3
color: $blue
margin: 0
.close
display: block
position: absolute
right: 20px
top: 25px
width: 15px
height: 15px
color: $euroLightGrey
line-height: 0.4
text-decoration: none
font-weight: bold
font-size: 22px
p
color: $euroLightGrey
.buttons
margin-top: 10px
a.button
text-transform: uppercase
&:first-of-type
margin-right: 10px
&.blue
background-color: $blue
&.yellow
background-color: $euroYellow
&:hover
transform: scale(1.05)
+respond-to-width(1100)
.shoppingCartContent
div.shoppingcartItemList,
.shoppingCartInfoBar
width: 100%
margin-left: 0
overflow: visible
+respond-to-width(1100)
.shoppingCartContent
div.shoppingcart-header
h1
width: auto
display: block
a.button
display: none
.shopButtons
padding: 30px 0
+respond-to-width(425)
.shoppingCartContent
margin-bottom: 0
div.shoppingcart-header,
div.shoppingcartItemList p
padding: 0 20px
.shopButtons
padding: 30px 20px
.shoppingCartInfoBar
.box
margin-bottom: 0
box-shadow: none
&.order-overview
border-bottom: 1px solid #E0E1E3