/home/blackyak/www/wordpress/wp-content/themes/travivu/assets/sass/template/_form.scss
.wpcf7-form, .wpcf7{
.row{
margin: 0 -10px;
> div{
padding: 0 10px;
}
}
p{
margin-bottom: 20px;
font-weight: 600;
}
.wpcf7-form-control-wrap{
display: block;
margin-bottom: 22px;
}
label{
display: inline-block;
font-weight: 500;
color: $black;
margin-bottom: 5px;
}
input[type*="email"], input[type*="text"], input[type*="tel"]{
width: 100%;
height: 50px;
padding: 0 20px;
border: 1px solid rgba(46, 87, 87, 0.3)!important;
background: transparent;
font-size: 14px;
border-radius: 30px;
transition: all 0.35s;
&:focus, &:active{
border-color: $theme-color!important;
}
}
select{
border: 1px solid rgba(46, 87, 87, 0.3)!important;
background: transparent;
line-height: 50px;
height: 50px;
width: 100%;
color: $body-color;
border-radius: 30px;
font-size: 14px;
&:focus, &:active{
border-color: $theme-color!important;
}
}
textarea{
width: 100%;
padding: 10px 20px;
max-height: 180px;
border: 1px solid rgba(46, 87, 87, 0.3)!important;
background: transparent;
font-size: 14px;
border-radius: 30px;
&::-webkit-input-placeholder {
color: $body-color;
}
&::-moz-placeholder {
color: $body-color;
}
&:-ms-input-placeholder {
color: $body-color;
}
&:-moz-placeholder {
color: $body-color;
}
&:focus, &:active{
border-color: $theme-color!important;
}
&.size-medium{
max-height: 135px;
}
}
.form-action{
text-align: center;
padding: 0;
position: relative;
input{
padding: 22px 50px 22px!important;
}
.ajax-loader{
position: absolute;
right: 0;
top: 50%;
margin-top: -8px;
}
.wpcf7-spinner{
position: absolute;
left: 0;
top: 50%;
margin-top: -8px;
}
}
}
.skin-border{
.wpcf7-form{
input[type*="email"], input[type*="text"], input[type*="tel"]{
border: 1px solid #2E5757!important;
&::-webkit-input-placeholder {
color: $white;
}
&::-moz-placeholder {
color: $white;
}
&:-ms-input-placeholder {
color: $white;
}
&:-moz-placeholder {
color: $white;
}
}
select{
border: 1px solid #2E5757!important;
-webkit-appearance: none;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, $theme-color 50%),
linear-gradient(135deg, $theme-color 50%, transparent 50%)!important;
background-size: 8px 7px, 8px 7px!important;
background-repeat: no-repeat!important;
background-position: calc(100% - 17px),calc(100% - 10px)!important;
}
textarea{
border: 1px solid #2E5757!important;
}
input, select, textarea{
color: $white;
&::-webkit-input-placeholder {
color: $white;
}
&::-moz-placeholder {
color: $white;
}
&:-ms-input-placeholder {
color: $white;
}
&:-moz-placeholder {
color: $white;
}
}
input[type*="submit"]:not(.fa):not(.btn-theme):not(.newsletter-submit):not(.las){
background: transparent;
border: 1px solid $theme-color-3;
color: $theme-color-3;
&:hover, &:focus{
background: $theme-color;
border-color: $theme-color;
color: $white;
}
}
}
}
.skin-full{
.wpcf7-form{
.row{
> div{
width: 100%;
}
}
input, select, textarea{
border-radius: 10px;
background: $bg-gray;
border-color: $bg-gray!important;
min-height: 60px;
}
}
}
.form-white{
.wpcf7-form{
input[type*="email"], input[type*="text"], input[type*="tel"]{
background: $white;
border: 1px solid $border-color!important;
border-radius: 6px;
}
}
select{
background: $white;
border: 1px solid $border-color!important;
border-radius: 6px;
}
textarea{
border-radius: 6px;
background: $white;
border: 1px solid $border-color!important;
&:focus, &:active{
border-color: $theme-color!important;
}
}
}
.newsletter{
&__form {
position: relative;
max-width: 800px;
overflow: hidden;
}
&__content {
position: relative;
display: flex;
align-items: center;
}
&__content input[type=email] {
text-align: left;
width: 100%;
line-height: 54px;
padding: 0 20px;
-webkit-transition: all .35s;
transition: all .35s;
font-size: 14px;
color: $body-color;
border-radius: 10px 0 0 10px;
background: #fff;
border: none;
&::-webkit-input-placeholder {
color: var(--welowe-footer-color)
}
&::-moz-placeholder {
color: var(--welowe-footer-color)
}
&::-ms-input-placeholder {
color: var(--welowe-footer-color)
}
&::-moz-placeholder {
color: var(--welowe-footer-color)
}
}
&__action {
display: inline-block;
width: 54px;
height: 54px;
background: $theme-color;
border-radius: 50%;
text-align: center;
color: #fff;
line-height: 54px;
-webkit-transition: all .35s;
transition: all .35s;
border-radius: 0 10px 10px 0;
&:hover,&:focus {
background: $theme-color-2;
}
}
&__icon {
font-size: 14px;
position: relative;
z-index: 11;
}
&__submit {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
z-index: 11;
border: none;
opacity: 0 !important;
font-size: 0 !important;
color: transparent !important;
padding: 0;
}
}
.newsletter-v2{
input.newsletter-submit{
background: $theme-color!important;
}
}