Files
ostal.pl/wp-content/themes/ostal_WP/sass/05-components/_forms.scss
2024-12-20 12:48:12 +01:00

92 lines
2.9 KiB
SCSS

@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;
@use "../01-base/typography" as *;
.wpcf7{
.wpcf7-form{
h2{
@include heading--md;
color: $white-color;
}
label{
display: block;
font-size: 1.8rem;
line-height: 150%;
color: $white-color;
.wpcf7-form-control-wrap{
display: block;
height: 40px;
margin: 5px 0px 10px;
input, textarea{
width: 100%;
background-color: transparent;
color: $white-color;
font-size: 1.4rem;
padding: 5px 15px;
border: 1px solid $white-color;
border-radius: 7px;
&:focus{
border: 1px solid $accent-color;
}
}
textarea{
max-height: 82px;
}
.wpcf7-not-valid-tip{
font-size: 1rem;
}
&[data-name="your-message"]{
height: 80px;
textarea{
height: 82px;
}
}
}
&.terms-and-conditions{
display: flex;
font-size: 1.2rem;
margin-bottom: 10px;
.wpcf7-form-control-wrap{
display: block;
margin: 0;
.wpcf7-list-item{
margin-left: 0;
}
}
span{
display: block;
}
input[type="checkbox"]{
width: 20px;
height: 20px;
margin: 0 10px 0 0;
background-color: $dark-color!important;
background: transparent;
border: none!important;
border-radius: 20px;
box-shadow: 0 0 0 1px $white-color inset;
outline-color: transparent;
&:checked{
background-color: $accent-color!important;
border: 1px solid $accent-color!important;
accent-color: $accent-color!important;
}
}
a{
color: $white-color;
transition: color 0.3s ease;
&:hover{
color: $accent-color;
}
}
}
}
.wpcf7-response-output{
border: 1px solid $accent-color!important;
border-radius: 7px;
color: $white-color;
padding: 2px;
margin: 4px 0;
}
}
}