File: D:/HostingSpaces/Eurotools/euro-tools.nl/resources/assets/sass/site/_base.sass
/* ==========================================================================
Expend Basic style settings
========================================================================== */
/*
* Set up the html
*
* 1. Makes sue that some fonts are better rendered
*/
html
-webkit-font-smoothing: antialiased /* 2 */
-moz-osx-font-smoothing: grayscale
text-rendering: optimizeLegibility
/*
* Set up the body
*
* 1. Set font to lining figures
*/
body
margin: 0
background-color: $euroBodyBg
font-family: $fontFamily
line-height: 1.6
font-feature-settings: 'lnum' /* 1 */
/*
* Set default settings for all elements
*
* 1. Default selection styling
*
*/
*
::selection /* 2 */
background: $blue
color: white
h2
color: $euroHeaderGrey
font-family: $headerFontFamily
font-size: 20px
font-weight: 600
line-height: 32px
/*
* Set default styling for input and textarea
*
* 1. Set font because else the agent will overrule them with an ugly font
*/
input, textarea
font-family: $fontFamily /* 1 */
input[type=submit]
border: none
// IE 11 hide selectbox down arrow
select::-ms-expand
display: none
form
.submitButtonHolder
position: relative
display: inline-block
input[type=submit]
border: none
font-size: 0.75rem
line-height: 24px
&:focus
outline: none
span.arrow
position: absolute
top: calc(50% - 3px)
right: 15px
width: 5px
height: 9px
content: ""
background-position: 0 center
background-repeat: no-repeat
background-image: url("/img/svg/arrow/arrow_white.svg")
transition: background-position 0.2s
/*
* Set default styling for a button
*
*/
.button
display: inline-block
padding: 10px 15px
background-color: white
border-radius: 5px
text-decoration: none
color: $euroDarkGrey
font-size: 15px
font-weight: 600
position: relative
cursor: pointer
text-align: left
transition: color 0.1s, background-color 0.1s, box-shadow 0.1s, transform 0.1s, border 0.1s
&:hover
box-shadow: 1px 1px 10px 5px rgba(0,0,0,0.05)
background-color: darken(white, 5%)
cursor: pointer
&.arrow
padding-right: 40px
// Set up arrow position
&:after
position: absolute
top: calc(50% - 4px)
right: 15px
width: 5px
height: 9px
content: ""
background-position: 0 center
background-repeat: no-repeat
background-image: url("/img/svg/arrow/arrow_dark.svg")
transition: background-position 0.2s
&.left-arrow
min-width: 230px
padding-left: 8%
// Set up arrow position
&:before
position: absolute
left: 5%
width: 14px
padding-top: 1.7em
content: ""
background-position: center center
background-size: 102px 12.5px
background-repeat: no-repeat
background-image: url("/img/svg/arrow/arrow_dark.svg")
+transform(scaleX(-1))
transition: background-position 0.2s
&.stroked.yellow
border: 1px solid $euroYellow
&:hover
background-color: $euroYellow
border: none
&.blue
background-color: $blue
color: white
&:after
background-image: url("/img/svg/arrow/arrow_white.svg")
&:hover
background-color: darken($blue, 10%)
border: none
&.filled.yellow
border: none
background-color: $euroYellow
&:before
background-image: url("/img/svg/arrow/arrow_dark.svg")
&:after
background-image: url("/img/svg/arrow/arrow_dark.svg")
&:hover
background-color: darken($euroYellow, 10%)
border: none
.no-products
color: #848D9B
font-size: 16px
line-height: 24px
text-align: center
width: 100%
.btw-message
position: relative
+flex(center, center)
margin-bottom: 30px
p
background-color: white
border-radius: 999px
padding: 12px 30px
color: #848D9B
font-size: 14px
line-height: 24px
text-align: center
width: auto
strong
color: #3C414B
font-weight: normal
body
> .content
display: flex
p, ul
color: #696E78
font-size: 16px
line-height: 24px
&.emptyContent
display: block
> .left
width: 300px
top: -100px
height: 100%
vertical-align: top
overflow: visible
+respond-to-width(1050)
top: -125px
> .right
width: column(9.5, 12)
height: 100%
vertical-align: top
overflow: visible
padding-left: column(0.5, 12)
> .grid-row
width: 100%
+respond-to-width(1280)
width: 100%
padding: 0 30px
body
> .content
.right
.products
overflow: visible
+flex(space-between, flex-start)
flex-wrap: wrap
.product
width: column(2.2, 9.5)
margin-bottom: 30px
border-radius: 5px
background-color: white
transition: transform 0.2s
&:hover
box-shadow: 0 0 20px 2px rgba(0,0,0,0.05)
cursor: pointer
transform: scale(1.02)
+respond-to-width(450)
margin-bottom: 0
a
height: 100%
text-decoration: none
.img-holder
height: 0
border-radius: 5px 5px 0 0
padding-bottom: 81%
width: 100%
background-size: contain
background-repeat: no-repeat
background-position: center center
h3
font-size: 12px
font-weight: 600
line-height: 25px
text-align: center
text-transform: uppercase
background-color: $euroYellow
color: $euroHeaderGrey
width: 100%
margin: 0
word-wrap: break-word
h4
font-size: 15px
font-weight: 600
line-height: 24px
color: $euroHeaderGrey
text-align: center
margin: 7px 0
padding: 0 15px
width: 100%
word-wrap: break-word
p
margin: 5px 0
padding: 7px 5%
border-top: 1px solid rgba(103,113,122,0.1)
font-size: 13px
font-style: italic
line-height: 20px
color: #848D9B
label
width: 50%
display: inline-block
text-align: right
span
text-align: left
color: $blue
padding-top: 5px
padding-left: 5px
@supports (display: grid)
body
> .content
.right
.products
display: grid
//grid-template-columns: column(2.2, 9.5) column(2.2, 9.5) column(2.2, 9.5) column(2.2, 9.5)
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
grid-column-gap: 30px
grid-row-gap: 30px
.product
width: 100%
+respond-to-width(950)
body
> .content
display: block
padding: 0
> .left, > .right
width: 100%
top: 0
padding: 0
> .right
padding: 0 column(0.5, 12)
+respond-to-width(425)
body
> .content
> .right
padding: 0