File: /var/www/html/wpprm/wp-content/themes/ronneby/assets/less.lib/visual-composer/contact-form-7.less
/*
Created on : 04.02.2015, 9:40:46
Author : DFD
Styles for : Contact Form 7 plugin custom forms
*/
.wpcf7 {
.underline_hover_effect() {
span.wpcf7-form-control-wrap {
width: 100%;
&:before {
content: "";
.block();
.abs();
width: 0;
height: 0;
bottom: -1px;
left: 0;
border-bottom: 2px solid @third-site-light-color;
.transition(width .5s ease);
z-index: 1;
}
&.active {
.right-border,
.top-border,
.left-border {
.hide();
}
&:before {
width: 100%;
}
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"] {
&:focus {
padding-left: 0;
}
}
}
}
form {
input, textarea, select {
-webkit-appearance: none;
.rounded(0);
}
p {
.rel();
&.dfd-half-size {
width: 50%;
float: left;
}
&.dfd-third-size {
width: 33.33%;
float: left;
}
&.dfd-third-size-left {
padding-right: 7px;
}
&.dfd-third-size-center {
padding-left: 7px;
padding-right: 7px;
}
&.dfd-third-size-right {
padding-left: 7px;
}
&.clear {
margin-bottom: 0 !important;
}
}
input[type="submit"] {
.box-name();
width: 100%;
text-align: center;
margin-top: 10px;
background: transparent;
border-width: 0;
padding: 15px 0;
cursor: pointer;
.transition(color .3s ease-in-out);
&:hover {
color: @main-site-light-color;
}
}
.dfd-contact-form-style-1 {
.wpcf7-form-control-wrap {
.rel();
.block();
border-bottom: 1px solid @border-color;
.wpcf7-not-valid-tip {
padding-left: 0;
.transition(padding-left .3s ease-in-out);
}
&.active {
.wpcf7-not-valid-tip {
padding-left: 15px;
}
}
}
p {
.rel();
margin-bottom: 10px;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"] {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
background: transparent;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
.box-shadow(none);
.transition(~"padding-left .3s ease-in-out, padding-right .3s ease-in-out");
&:focus {
padding-left: 15px;
padding-right: 15px;
background: transparent;
}
}
.dk-select {
.dk-selected {
padding-left: 0;
.transition(~"border-radius .3s ease, padding .3s ease");
}
&.dk-select-open-down {
.dk-selected {
padding-left: 20px;
}
}
}
span.chaffle,
input[type="submit"] {
.default-button();
width: auto;
margin-top: 15px;
padding: 0 50px;
&:hover {
background: darken(@main-site-light-color, 3%);
}
}
span.chaffle {
.abs();
background: transparent;
border-color: transparent;
&:hover {
background: transparent;
border-color: transparent;
}
}
.right-border,
.top-border,
.left-border {
.abs();
background: @gray-light;
}
.right-border {
width: 1px;
right: 0;
bottom: 0;
top: 100%;
.transition(top .1s ease-in-out .4s);
&.active {
top: 0;
.transition(top .1s ease-in-out);
}
}
.top-border {
height: 1px;
top: 0;
right: 0;
left: 100%;
.transition(left .3s ease-in-out .1s);
&.active {
left: 0;
.transition(left .3s ease-in-out .1s);
}
}
.left-border {
width: 1px;
left: 0;
top: 0;
bottom: 100%;
.transition(bottom .1s ease-in-out);
&.active {
bottom: 0;
.transition(bottom .1s ease-in-out .4s);
}
}
textarea {
border:transparent;
padding-left: 0px;
}
.box {
margin-bottom: 11px;
}
::-webkit-input-placeholder {color: @title-color;}
-moz-placeholder {color: @title-color;}
:-moz-placeholder {color: @title-color;}
-ms-input-placeholder {color: @title-color;}
}
.dfd-contact-from-style-2 {
.rel();
overflow: hidden;
border: 2px solid @title-color;
p {
.rel();
margin: 0;
&.dfd-border-bottom {
border-bottom: 2px solid @border-color;
}
&.dfd-border-right {
border-right: 2px solid @border-color;
}
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="submit"],
textarea {
background: transparent;
margin: 0;
border-width: 0;
.box-shadow(none);
}
.ajax-loader {
.abs();
right: 20px;
bottom: 20px;
}
input[type="submit"] {
.transition(~"background .3s ease, color .3s ease");
}
.wpcf7-not-valid-tip {
padding-left: 15px;
}
}
.dfd-contact-from-style-3 {
margin: 0 -10px;
p {
text-align: center;
padding: 0 10px;
margin-bottom: 15px;
&.dfd-half-size-left {
padding-left: 10px;
padding-right: 7px;
}
&.dfd-half-size-right {
padding-left: 7px;
padding-right: 10px;
}
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
margin-bottom: 0;
background: @background-grey;
border-color: transparent;
.rounded(3px);
.box-shadow(none);
}
input[type="submit"] {
.inline-block();
width: auto;
padding: 10px 20px;
background: transparent;
color: @title-color;
.transition(color .3s ease);
&:hover {
color: @main-site-light-color;
}
}
.ajax-loader {
.abs();
right: 20px;
bottom: 20px;
}
.wpcf7-not-valid-tip {
padding-left: 15px;
}
}
.dfd-contact-from-style-4 {
.rel();
overflow: hidden;
border: 2px solid @main-site-dark-color;
p {
margin: 0;
&.dfd-border-bottom {
border-bottom: 2px solid @main-site-dark-color;
}
&.dfd-border-right {
border-right: 2px solid @main-site-dark-color;
}
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="submit"],
textarea {
margin: 0;
border-width: 0;
.box-shadow(none);
color: @title-color;
background: transparent;
}
.ajax-loader {
.abs();
right: 20px;
bottom: 20px;
}
.wpcf7-not-valid-tip {
padding-left: 15px;
}
}
.dfd-contact-form-style-5 {
.wpcf7-form-control-wrap {
.block();
border-bottom: 1px solid @border-color;
.wpcf7-not-valid-tip {
padding-left: 0;
.transition(padding-left .3s ease-in-out);
}
}
p {
.rel();
margin-bottom: 10px;
.label {
.abs();
top: 50%;
left: 0;
.translate(0; -50%);
font-size: inherit;
letter-spacing: 0;
.transition(~"top .2s ease-in-out, font-size .2s ease-in-out, letter-spacing .2s ease-in-out");
&.active {
top: 10px;
font-size: 85%;
letter-spacing: -.8px;
}
}
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"] {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
background: transparent;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
.box-shadow(none);
.transition(~"padding-left .3s ease-in-out, padding-right .3s ease-in-out");
}
input[type="submit"] {
.default-button();
width: auto;
margin-top: 15px;
padding: 0 50px;
&:hover {
background: darken(@main-site-light-color, 3%);
}
}
}
.dfd-contact-from-style-6 {
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
margin-bottom: 0;
}
input[type="submit"] {
.default-button();
margin-top: 0;
padding: 0;
width: 100%;
}
}
/*input[type="date"] style*/
input[type="date"]::-webkit-outer-spin-button,
input[type="date"]::-webkit-inner-spin-button {
-moz-appearance: none;
-webkit-appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
height: 5px;
width: 8px;
padding: 17px 4px;
}
.wpcf7-not-valid-tip {
color: @subtitles-color;
}
:focus::-webkit-input-placeholder { color: transparent; }
:focus:-moz-placeholder { color: transparent; }
:focus::-moz-placeholder { color: transparent; }
:focus:-ms-input-placeholder { color: transparent; }
/*input[type="number"] style*/
input[type="number"]::-webkit-inner-spin-button {
&:before {
content: "";
.abs();
top: 50%;
right: 16px;
width: 15px;
height: 1px;
.translate(0; -50%);
background: @main-site-dark-color;
z-index: 3;
}
}
/*input[type="number"]::-webkit-inner-spin-button {
&:before {
}
&:after {
}
}*/
&.dfd_contact_form {
.dfd-contact-form-style-1 ::-webkit-input-placeholder,
.dfd-contact-form-style-compact ::-webkit-input-placeholder{
color:inherit;
}
.error {
font-family: @link-font-family;
.rounded(2px);
.box-shadow(0 2px 6px 1px fade(@forth-site-dark-color, 20%));
text-align: center;
display: block;
font-size: 12px;
//min-width: 166px;
position: absolute;
top: 5px;
padding: 4px;
padding: 8px 10px;
line-height: 1;
width: auto;
left: -30px;
z-index: 44;
color: @link-color;
opacity: 0;
background: white;
}
.req_text {
font-family: initial;
position: absolute;
top: -7px;
}
.select_elem > span {
display: block;
margin-top: 5px;
}
.cssload-spin-box {
left: 100%;
margin-right: 20px;
margin-top: 19px;
display: none;
}
&.preset1,
&.preset3 {
.wpcf7-submit {
height: 45px !important;
min-height: 45px !important;
}
.dfd-option-size {
.wpcf7-submit {
width: auto !important;
height: inherit !important;
line-height: inherit !important;
padding-left: @default-button-padding-left !important;
padding-right: @default-button-padding-right !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
}
&.preset2 {
.wpcf7-submit {
color: @title-color;
}
}
&.preset3 {
&.hover_style_input2_underline {
.underline_hover_effect();
}
}
.wpcf7-validation-errors {
.dfd-diagonal-bg();
margin: 10px 0 0;
border-width: 0;
padding: 10px 15px;
font-family: @link-font-family;
color: @link-color;
}
.wpcf7-display-none {display: none;}
::-webkit-input-placeholder { font-family: @subtitles-font-family; }
:-moz-placeholder { font-family: @subtitles-font-family; }
::-moz-placeholder { font-family: @subtitles-font-family; }
:-ms-input-placeholder { font-family: @subtitles-font-family; }
}
.select_elem{
>span{
min-height: 49px;
}
}
.dk_label{
display: block;
margin-top: 5px;
}
.dk_container,
.dk-selected {
.rounded(0);
background: @main-site-dark-color;
}
.dk_toggle {
padding: 7px 15px 7px;
&:before{
right: 23px;
}
}
}
@media (max-width: 479px){
p.dfd-half-size, p.dfd-fourth-size{
width:100% !important;
}
.padding-left{
padding-right: 0px !important;
}
.padding-center{
padding: 0 0px 0px 0px !important;
}
.padding-right{
padding-left: 0px !important;
padding-right: 0px;
}
}
}
.dfd_contact_form{
.cssload-spin-box {
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 8px;
height: 8px;
border-radius: 100%;
box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
-o-box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
-ms-box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
-webkit-box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
-moz-box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
animation: cssload-spin ease infinite 3.4s;
-o-animation: cssload-spin ease infinite 3.4s;
-ms-animation: cssload-spin ease infinite 3.4s;
-webkit-animation: cssload-spin ease infinite 3.4s;
-moz-animation: cssload-spin ease infinite 3.4s;
}
}
@media (max-width: @screen-small - 1) {
.wpcf7 form.dfd_contact_form p.dfd-third-size{
width: 100%;
}
}
@keyframes cssload-spin {
0%,
100% {
box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
}
25% {
box-shadow: -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73);
}
50% {
box-shadow: -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223);
}
75% {
box-shadow: 8px -8px #dfdfdf, 8px 8px #4f4d49, -8px 8px #dfdfdf, -8px -8px #4f4d49;
}
}
@-o-keyframes cssload-spin {
0%,
100% {
box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
}
25% {
box-shadow: -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73);
}
50% {
box-shadow: -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223);
}
75% {
box-shadow: 8px -8px #dfdfdf, 8px 8px #4f4d49, -8px 8px #dfdfdf, -8px -8px #4f4d49;
}
}
@-ms-keyframes cssload-spin {
0%,
100% {
box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
}
25% {
box-shadow: -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73);
}
50% {
box-shadow: -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223);
}
75% {
box-shadow: 8px -8px #dfdfdf, 8px 8px #4f4d49, -8px 8px #dfdfdf, -8px -8px #4f4d49;
}
}
@-webkit-keyframes cssload-spin {
0%,
100% {
box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
}
25% {
box-shadow: -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73);
}
50% {
box-shadow: -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223);
}
75% {
box-shadow: 8px -8px #dfdfdf, 8px 8px #4f4d49, -8px 8px #dfdfdf, -8px -8px #4f4d49;
}
}
@-moz-keyframes cssload-spin {
0%,
100% {
box-shadow: 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223);
}
25% {
box-shadow: -8px 8px rgb(223,223,223), -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73);
}
50% {
box-shadow: -8px -8px rgb(79,77,73), 8px -8px rgb(223,223,223), 8px 8px rgb(79,77,73), -8px 8px rgb(223,223,223);
}
75% {
box-shadow: 8px -8px #dfdfdf, 8px 8px #4f4d49, -8px 8px #dfdfdf, -8px -8px #4f4d49;
}
}