/home/arranoyd/magicraft/wp-content/themes/massive-dynamic/lib/shortcodes/md_contactform/style.css
/* -------------------------------------------------
Contact form Shortcode
----------------------------------------------------*/
/*------------ classic -----------*/
.form-container-classic .form-name,
.form-container-classic .form-subject,
.form-container-classic .form-email {
float: left;
width: 33%;
}
.form-container-classic .message-container {
width: 99%;
}
.form-container-classic .form-name input,
.form-container-classic .form-email input,
.form-container-classic .form-subject input,
.form-container-classic .form-message textarea {
width: 97%;
border-radius: 5px;
display: block;
border: 1px solid;
}
.form-container-classic .form-message textarea {
width: 99%;
}
.form-container-classic .form-name input,
.form-container-classic .form-email input,
.form-container-classic .form-subject input {
padding: 0 5.5%;
height: 63px;
}
.contact-form .form-container-classic .form-message textarea {
padding: 12px 2%;
margin-top: 1.2%;
height: 230px;
}
.form-container-classic .form-submit {
text-align: center;
}
.form-container-classic .form-submit input {
border-radius: 5px;
border: none;
margin-top: 20px;
height: 56px;
}
/*------------ business -----------*/
.form-container-business,
.form-container-classic {
width: 92%;
margin: auto;
}
.form-container-business .inputs-container,
.form-container-business .message-container {
float: left;
width: 50%;
}
.form-container-business .form-name,
.form-container-business .form-email,
.form-container-business .form-subject {
margin-bottom: 2.5%;
}
.form-container-business .form-name input,
.form-container-business .form-email input,
.form-container-business .form-subject input,
.form-container-business .form-message textarea {
width: 97%;
border-radius: 3px;
display: block;
border: 1px solid;
}
.form-container-business .form-name input,
.form-container-business .form-email input,
.form-container-business .form-subject input {
padding: 0 4%;
height: 61px!important;
}
.form-container-business .form-message textarea {
padding: 12px 4%;
height: 203px!important;
}
.form-container-business .form-submit input {
display: block;
width: 98.5%;
border-radius: 3px;
border: none;
height: 61px!important;
}
.wpcf7-not-valid-tip {
display: none !important;
}
/*--------------general------------------*/
.contact-form {
text-align: center;
width: 880px;
max-width: 100%;
}
.contact-form.md-align-left{margin-left: 0}
.contact-form.md-align-left .form-container-business,.contact-form.md-align-left .form-container-classic{float: left}
.contact-form.md-align-center{margin: 0 auto;}
.contact-form.md-align-center .form-container-business,.contact-form.md-align-center .form-container-classic{float: none}
.contact-form.md-align-right{margin-left:auto; margin-right: 0}
.contact-form.md-align-right .form-container-business,.contact-form.md-align-right .form-container-classic{float: right}
.contact-form .form-title {
margin-bottom: 2.5%;
font-size: 35px;
font-weight: bold;
}
.contact-form .form-description {
margin-bottom: 8%;
font-size: 15px;
line-height: 20px;
}
.contact-form .form-message textarea {
height: 221px;
}
.contact-form .form-submit input {
color: #fff;
transition: background-color 300ms;
}
.contact-form input,
.contact-form textarea {
outline: none;
font-size: 13px;
}
.contact-form input:focus,
.contact-form textarea:focus {
border: 2px solid;
}
.contact-form div.wpcf7-validation-errors,
.contact-form div.wpcf7-mail-sent-ng {
border: none;
font-size: 13px;
}
/*-------------- modern ------------------*/
.form-container-modern .input {
position: relative;
z-index: 1;
margin-right:25px;
max-width: 350px;
width: calc(100% /3 - 17px);
vertical-align: top;
display: block;
float: left;
}
.form-container-modern .top-elems{
margin-bottom: 75px;
}
.form-container-modern .top-elems .input:last-child{
margin-right: 0;
}
.form-container-modern .wpcf7-form-control-wrap .input__field{
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 100%;
border: none;
border-radius: 0;
font-weight: bold;
font-size: 15px;
box-shadow: none;
-webkit-appearance: none;
}
.form-container-modern .wpcf7-form-control-wrap .wpcf7-not-valid{
box-shadow: none !important;
}
.form-container-modern .wpcf7-form-control-wrap .wpcf7-not-valid-tip{
display: block !important;
position: absolute;
min-width: 210px;
top: 10px;
left: 64px;
font-size: 12px;
text-align: right;
}
.form-container-modern .wpcf7-form-control-wrap textarea + .wpcf7-not-valid-tip{
top:60px;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
background-color: rgba(255,255,255,0);
}
.form-container-modern .wpcf7-form-control-wrap .input__field:focus,
.form-container-modern .submit-button:focus{
outline: none;
border: none;
}
.form-container-modern .input__label{
display: inline-block;
float: right;
padding: 0 1em;
width: 40%;
color: #929296;
font-weight: bold;
font-size: 70.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.form-container-modern .input__label-content {
position: relative;
display: block;
padding: 0;
font-size: 14px;
font-weight: 400;
width: 100%;
-webkit-filter:blur(0px);
}
.form-container-modern .input--filled .input__label-content{
font-size: 12px;
}
.form-container-modern .submit-button{
width:150px;
height: 50px;
background-color:rgba(47,47,47,1);
font-size: 13px;
border-radius:35px;
border:none;
color: #ffffff;
transition: background-color .3s;
margin: 50px auto 0;
text-transform: capitalize;
}
.form-container-modern .submit-button:hover{
background-color:rgba(47,47,47,.9);
}
.form-container-modern .input--hoshi {
overflow: hidden;
}
.form-container-modern .bottom-elem .input {
width: 100%;
max-width: none;
margin-right: 0;
}
.form-container-modern .bottom-elem .input textarea{
height: 90px;
resize: none;
overflow: hidden;
margin-bottom: 15px;
}
.form-container-modern .bottom-elem .input__label-content,
.form-container-modern .bottom-elem .input--filled .input__label-content{
top:50px;
}
.form-container-modern .bottom-elem .input .focus + .input__label .input__label-content,
.form-container-modern .bottom-elem .input--filled .input__label-content{
top:0;
}
.form-container-modern .wpcf7-form-control-wrap .input__field--hoshi {
margin-top: 1em;
padding: 0.85em 0.15em;
width: 100%;
font-weight:400;
background: transparent;
}
.form-container-modern .input__label--hoshi {
position: absolute;
bottom: 0;
left: 0;
padding: 0 0.25em;
width: 100%;
height: calc(100% - 1em);
text-align: left;
pointer-events: none;
}
.form-container-modern .input__label-content--hoshi {
position: absolute;
}
.form-container-modern .input__label--hoshi::before,
.form-container-modern .input__label--hoshi::after {
content: '';
position: absolute;
top: 0;
left: -1px;
width: 100%;
height: calc(100% - 10px);
border-bottom: 1px solid #000;
}
.form-container-modern .input__label--hoshi::after {
border-bottom: 3px solid #000000;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.form-container-modern .input__label--hoshi-color::after {
border-color: hsl(0, 0%, 0%);
}
.form-container-modern .focus + .input__label--hoshi::after,
.form-container-modern .input--filled .input__label--hoshi::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.form-container-modern .focus + .input__label--hoshi .input__label-content--hoshi,
.form-container-modern .input--filled .input__label-content--hoshi {
-webkit-animation: anim-1 0.3s forwards;
animation: anim-1 0.3s forwards;
}
@-webkit-keyframes anim-1 {
50% {
opacity: 0;
-webkit-transform: translate3d(1em, 0, 0);
transform: translate3d(1em, 0, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(-1em, -40%, 0);
transform: translate3d(-1em, -40%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, -40%, 0);
transform: translate3d(0, -40%, 0);
}
}
@keyframes anim-1 {
50% {
opacity: 0;
-webkit-transform: translate3d(1em, 0, 0);
transform: translate3d(1em, 0, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(-1em, -40%, 0);
transform: translate3d(-1em, -40%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, -40%, 0);
transform: translate3d(0, -40%, 0);
}
}