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> |
<template> |
||||
|
<div class="slider" ref="stepper"> |
||||
<div> |
<div> |
||||
aaa |
|
||||
|
<a href="#" @click.prevent="step++">weiter</a> |
||||
|
</div> |
||||
|
<div> |
||||
|
aaaa |
||||
|
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
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> |
</script> |
||||
|
|||||
Loading…
Reference in new issue