File: D:/HostingSpaces/Eurotools/euro-tools.nl/resources/assets/sass/site/pages/_register.sass
/* ==========================================================================
Register page
========================================================================== */
.register-form
position: relative
&:before
content: ''
position: absolute
display: block
right: 0
bottom: 0
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
.clip-board
background-color: white
border-radius: 5px
margin-top: -175px
margin-bottom: 60px
width: column(10, 12)
min-height: 700px
margin-left: column(1, 12)
overflow: visible
text-align: center
box-shadow: 5px 5px 20px 0 rgba(33,48,112,0.05)
+respond-to-width(950)
margin-bottom: 0
border-radius: 0
box-shadow: none
> svg
margin-top: -80px
margin-bottom: 30px
width: 360px
.cls-1
opacity: 1
fill: #414650
.panel
padding: 0 column(1, 12) 90px column(1, 12)
.panel-heading
text-align: center
position: relative
&:before
content: ''
display: block
background-color: $euroDarkGrey
h1
color: $blue
font-size: 26px
line-height: 41px
margin-bottom: 0
h2
color: $euroHeaderGrey
font-size: 20px
line-height: 32px
margin-top: 0
.panel-body
.form
padding: 15px 0 60px 0
max-width: none
text-align: left
h3
color: #3291FF
font-size: 15px
font-weight: 600
line-height: 24px
text-transform: uppercase
width: column(12, 10)
margin-top: 45px
margin-left: column(-1, 10)
padding-left: column(1, 10)
padding-bottom: 10px
border-bottom: solid 1px #E0E1E3
position: relative
&:first-child
margin-top: 0
+ label
+respond-to-width(575)
padding-bottom: 40px
label.shippingToggle,
label.conditions
position: absolute
display: inline-block
width: auto
height: auto
top: 0
margin-bottom: 0
color: #67717A
font-size: 14px
line-height: 1.5
text-transform: none
input
position: relative
margin-top: -1px
display: inline-block
width: auto
margin-bottom: 0
opacity: 0
cursor: pointer
margin-right: 15px
&:checked ~ .checkmark:after
display: block
.checkmark
position: absolute
top: 0
left: 0
height: 22px
width: 22px
border: 1px solid #E0E1E3
&:after
content: ""
position: absolute
display: none
left: 9px
top: -10px
width: 5px
height: 22px
border: solid #6CD300
border-width: 0 3px 3px 0
transform: rotate(35deg)
+respond-to-width(575)
margin-left: 0
position: relative
top: 10px
display: block
margin-bottom: 10px
label.shippingToggle
margin-left: 20px
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
+respond-to-width(575)
margin-left: 0
.shipping-block
display: none
.form-group
+flex(space-between, flex-start)
margin-bottom: 15px
&.has-error
input
border: solid 1px rgba(#F95D5D, 0.3)
span.help-block
background-color: rgba(#F95D5D, 0.3)
display: block
padding: 5px 10px
font-size: 12px
color: #d40606
border-radius: 0 0 5px 5px
&:first-letter
text-transform: capitalize
.legal
span.help-block
position: relative
top: 25px
.grid-col
width: 45%
input.valid
border: solid 1px green
background-color: rgba(green, 0.3)
input.invalid
border: solid 1px #F95D5D
background-color: rgba(#F95D5D, 0.3)
select
-webkit-appearance: button
-moz-appearance: button
-webkit-user-select: none
-moz-user-select: none
-webkit-padding-end: 20px
-moz-padding-end: 20px
-webkit-padding-start: 20px
-moz-padding-start: 20px
background-color: rgba(103,113,122,0.05)
background-image: url("/img/svg/arrow/arrow_dark_select.svg")
background-position: 100% 50%
background-repeat: no-repeat
border: 1px solid #E0E1E3
border-radius: 0
box-shadow: none
font-size: 0.7em
color: $grey
margin: 0
overflow: hidden
padding-right: 20px
padding-top: 11.5px
padding-bottom: 11.5px
text-overflow: ellipsis
white-space: nowrap
width: 100%
&:first-child
margin-right: 60px
&.gender
position: relative
height: 75px
label
height: 100%
p
margin: 0
margin-bottom: 5px
width: 100%
display: block
input
display: none
.toggle
position: relative
cursor: pointer
top: 0
left: 0
right: 0
bottom: 0
-webkit-transition: .4s
transition: .4s
.male, .female
display: inline-block
width: 43px
border: 1px solid #3291FF
background-color: #F0F5FA
padding: 11.5px 15px
.female
border: 1px solid #E0E1E3
background-color: transparent
input[type=checkbox]:checked + .toggle
& > .male
border: 1px solid #E0E1E3
background-color: transparent
& > .female
border: 1px solid #3291FF
background-color: #F0F5FA
&.legal
color: #67717A
font-size: 14px
line-height: 14px
height: 30px
overflow: visible
position: relative
+respond-to-width(575)
height: auto
label.conditions
line-height: 0
input
display: inline-block
width: auto
a
color: #3291FF
text-decoration: none
text-transform: lowercase
.submit
label
text-transform: none
+respond-to-width(1280)
.register-form
.clip-board
width: 100%
margin-left: 0
+respond-to-width(950)
.register-form
.clip-board
.panel
padding-bottom: 0
.panel-body
.form
.form-group
flex-direction: column
margin-bottom: 0
.grid-col
width: 100%
input, select
margin-bottom: 30px
.help-block
margin-top: -30px
margin-bottom: 30px
&.has-error
.legal
span.help-block
top: 55px
+respond-to-width(575)
top: 25px
+respond-to-width(640)
.register-form
.grid-row
width: 100%
+respond-to-width(425)
.register-form
.clip-board
border-radius: 0
margin-top: -295px
margin-bottom: 0
box-shadow: none
svg
display: none