This commit is contained in:
2018-03-22 22:33:32 +01:00
parent b652882bd0
commit 06f6692f12
14 changed files with 423 additions and 93 deletions

View File

@@ -135,38 +135,39 @@
.form__field {
width: 100%;
display: block;
margin-bottom: em(15px);
margin-bottom: em(25px);
position: relative;
}
.form__field--label {
padding-left: 30%;
label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 30%;
line-height: em(40px);
font-weight: 400;
padding-right: em(20px);
font-size: em(12px);
letter-spacing: 0.03em;
text-transform: uppercase;
span {
line-height: 1.3;
display: inline-block;
vertical-align: middle;
}
}
@media screen and (max-width: $small_breakpoint) {
padding: 0;
label {
position: relative;
width: 100%;
padding: 0;
margin-bottom: em(2px);
}
}
}
.form__field__label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 30%;
line-height: em(36px);
font-weight: 400;
padding-right: em(20px);
font-size: em(12px);
letter-spacing: 0.03em;
text-transform: uppercase;
span {
line-height: 1.3;
display: inline-block;
vertical-align: middle;
}
@media screen and (max-width: $small_breakpoint) {
position: relative;
width: 100%;
padding: 0;
margin-bottom: em(2px);
}
}
@@ -210,7 +211,14 @@
}
}
input, textarea {
input[type="checkbox"], input[type="radio"] {
display: none;
}
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="checkbox"] + label, input[type="radio"] + label,
textarea {
display: block;
width: 100%;
height: em(45px);
font-size: em(16px);
@@ -224,6 +232,7 @@ input, textarea {
-webkit-appearance: none;
border-radius: 0;
padding-right: em(5px);
position: relative;
&::placeholder {
color: $gray;
}
@@ -245,12 +254,79 @@ input, textarea {
}
}
.form__field__choice__icon {
display: inline-block;
position: absolute;
top: 50%;
left: em(14px);
width: em(24px);
height: em(24px);
margin-top: em(-12px);
border: 2px solid $gray;
background: $white;
will-change: transform;
svg {
display: none;
position: absolute;
top: -20%;
left: 15%;
width: 120%;
height: 120%;
fill: $green;
}
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: em(10px);
height: em(10px);
margin-top: em(-5px);
margin-left: em(-5px);
border-radius: 50%;
background: $green;
display: none;
}
}
input[type="checkbox"] + label, input[type="radio"] + label {
padding: em(12px) em(14px) em(12px) em(52px);
margin-bottom: em(10px);
text-indent: 0;
}
input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {
.form__field__choice__icon {
svg {
display: block;
}
}
}
input[type="radio"] + label {
.form__field__choice__icon {
border-radius: 50%;
}
}
input[type="radio"]:checked + label {
.form__field__choice__icon {
svg {
display: none;
}
&:before {
display: block;
}
}
}
textarea {
height: em(150px);
text-indent: 0;
padding: em(12px) em(14px);
resize: vertical;
min-height: em(100px);
line-height: 1.3;
}
.form__field__help_text {

View File

@@ -142,6 +142,33 @@
}
}
.slider__next {
color: $white;
text-decoration: none;
span {
border-bottom: 1px solid rgba($white, 0.5);
display: inline-block;
}
svg {
height: em(18px);
width: em(18px);
transform: none;
transition: transform 0.2s, opacity 0.2s;
margin-left: em(5px);
vertical-align: baseline;
fill: $white;
opacity: 0.5;
position: relative;
top: em(4px);
}
&:hover {
svg {
transform: translateX(em(5px));
opacity: 1;
}
}
}
.slider__images {
position: absolute;
top: -10%;