philipp lang
4 years ago
3 changed files with 244 additions and 188 deletions
@ -0,0 +1,188 @@ |
|||
:root { |
|||
--primary: hsl(82.3, 54.4%, 44.7%); |
|||
--secondary: hsl(194.5, 100.0%, 26.9%); |
|||
--gray: hsl(37.5, 25.0%, 93.7%); |
|||
--container: hsl(37.5, 50.0%, 96.9%); |
|||
} |
|||
|
|||
.stepper { |
|||
|
|||
.fancy-checkbox { |
|||
display: flex; |
|||
align-items: center; |
|||
input { |
|||
flex: 0 0 auto; |
|||
width: auto; |
|||
} |
|||
span { |
|||
flex: 1 0 auto; |
|||
} |
|||
} |
|||
|
|||
.slider { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
scroll-snap-type: x proximity; |
|||
scroll-behavior: smooth; |
|||
overflow-x: hidden; |
|||
|
|||
& > * { |
|||
flex: 0 0 100%; |
|||
scroll-snap-align: start; |
|||
} |
|||
} |
|||
|
|||
.button-row { |
|||
display: grid; |
|||
grid-template-columns: max-content 1fr; |
|||
grid-gap: 0.5rem; |
|||
} |
|||
|
|||
form { |
|||
font-family: sans-serif; |
|||
& > div { |
|||
h2 { |
|||
color: var(--secondary); |
|||
text-align: center; |
|||
} |
|||
|
|||
.radio-grid { |
|||
display: grid; |
|||
grid-gap: 2rem; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
margin-top: 1rem; |
|||
|
|||
label { |
|||
height: 20rem; |
|||
@media screen and (max-width: 1024px) { |
|||
height: 15rem; |
|||
} |
|||
@media screen and (max-width: 980px) { |
|||
height: 14rem; |
|||
} |
|||
@media screen and (max-width: 768px) { |
|||
height: 15rem; |
|||
} |
|||
@media screen and (max-width: 580px) { |
|||
height: 14rem; |
|||
} |
|||
position: relative; |
|||
|
|||
input { |
|||
visibility: hidden; |
|||
z-index: -99; |
|||
position: absolute; |
|||
} |
|||
input + span { |
|||
border: 1px var(--primary) solid; |
|||
border-radius: 2rem; |
|||
overflow: hidden; |
|||
cursor: pointer; |
|||
background: white; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
span:first-child { |
|||
display: flex; |
|||
flex: 1 0 0; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
flex: 0 0 4rem; |
|||
background: var(--gray); |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
input:checked + span { |
|||
border-color: var(--secondary); |
|||
} |
|||
|
|||
svg { |
|||
color: var(--secondary); |
|||
fill: currentColor; |
|||
width: 5.625rem; |
|||
height: 5.625rem; |
|||
@media screen and (max-width: 580px) { |
|||
width: 4rem; |
|||
height: 4rem; |
|||
&.icon-immobilienfinanzierung { |
|||
width: 5rem; |
|||
height: 5rem; |
|||
} |
|||
} |
|||
} |
|||
svg.icon-immobilienfinanzierung { |
|||
width: 9.6875rem; |
|||
height: 9.6875rem; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-container { |
|||
background: var(--container); |
|||
border-radius: 2rem; |
|||
padding: 3rem; |
|||
display: grid; |
|||
grid-gap: 1rem; |
|||
|
|||
.separator { |
|||
background: white; |
|||
height: 5px; |
|||
} |
|||
|
|||
.form-grid { |
|||
display: grid; |
|||
grid-gap: 0.5rem; |
|||
grid-template-columns: 2fr 3fr 30px; |
|||
align-items: center; |
|||
|
|||
input[type="text"], input[type="number"], input[type="tel"] { |
|||
font-weight: bold; |
|||
border: var(--primary) 1px solid; |
|||
text-align: right; |
|||
} |
|||
|
|||
input::-webkit-outer-spin-button, |
|||
input::-webkit-inner-spin-button { |
|||
-webkit-appearance: none; |
|||
margin: 0; |
|||
} |
|||
|
|||
.unit { |
|||
text-align: right; |
|||
} |
|||
|
|||
.comment { |
|||
grid-column: 1 / -1; |
|||
font-size: 1.5rem; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.step { |
|||
height: 5px; |
|||
position: relative; |
|||
|
|||
div { |
|||
position: absolute; |
|||
transition: width 0.5s; |
|||
top: 0; |
|||
left: 0; |
|||
height: 100%; |
|||
background: var(--primary); |
|||
} |
|||
} |
|||
} |
|||
@ -1,11 +1,60 @@ |
|||
<template> |
|||
<div> |
|||
aaa |
|||
<div class="slider" ref="stepper"> |
|||
<div> |
|||
<a href="#" @click.prevent="step++">weiter</a> |
|||
</div> |
|||
<div> |
|||
aaaa |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
data: function() { |
|||
return { |
|||
innerStep: 0, |
|||
slideCount: 2, |
|||
}; |
|||
}, |
|||
computed: { |
|||
step: { |
|||
set(index) { |
|||
var _self = this; |
|||
this.innerStep = index; |
|||
|
|||
this.$nextTick(function() { |
|||
_self.$refs.stepper.scrollLeft = _self.$refs.stepper.scrollWidth / _self.slideCount * index; |
|||
}); |
|||
}, |
|||
get() { |
|||
return this.innerStep; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
slideTo(e, index) { |
|||
if (e !== null) { |
|||
e.preventDefault(); |
|||
} |
|||
|
|||
var _self = this; |
|||
this.step = index; |
|||
|
|||
if (index === 0) { |
|||
window.setTimeout(function() { |
|||
_self.value.kind = null; |
|||
}, 500); |
|||
} |
|||
|
|||
jQuery('html, body').stop().animate({ |
|||
'scrollTop': jQuery('#stepper-main').offset().top |
|||
}, 600, 'swing'); |
|||
|
|||
this.$nextTick(function() { |
|||
_self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index; |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue