fixes
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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%;
|
||||
|
||||
Reference in New Issue
Block a user