Preview: forms.less
Size: 12.66 KB
/home/nshryvcy/himaltourism.com/wp-content/themes/adventure-tours/assets/less/elements/forms.less
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"]
{
display:block;
width:100%;
height:45px;
line-height:21px;
margin-bottom:10px;
padding:12px 15px;
-webkit-appearance:none;
-moz-appearance:none;
}
textarea{
width:100%;
min-height:200px;
margin-bottom:10px;
padding:5px 15px;
-webkit-appearance:none;
-moz-appearance:none;
}
input, textarea{
background:@main-color-white;
border:1px solid #e3e3e3;
border-radius:@main-border-radius;
.mix-placeholder();
&:focus{
outline:0;
}
&:active{
outline:0;
}
}
input[type="checkbox"],
input[type="radio"]{
background: none;
border:none;
}
.form-contact{
.text-align(left);
.mix-direction-change(@bi-app-direction);
&__fields-short{
&:after{
content:" ";
display:block;
clear:both;
}
}
&__item-short{
display:inline-block;
width:50% !important;
.padding-right(5px);
.float(left);
position:relative;
&:nth-last-child(2){
.padding-left(5px);
.padding-right(0);
.float(right);
}
input{
width:100%;
}
}
input, textarea{
.padding-left(20px);
.padding-right(20px);
.mix-transition(@main-animation-forms);
.text-align(left);
&:focus{
border:1px solid #d0d0d0;
}
}
input{
.mix-placeholder(#c4c4c4);
}
textarea{
width:100%;
min-height:180px;
padding-top:10px;
padding-bottom:10px;
.mix-placeholder(#c4c4c4, normal 300 ~"0.933em/2em" @main-font-family);
}
p{
margin:0;
}
.wpcf7-not-valid-tip{
display:none;
}
}
// Plugin contact form 7
div.wpcf7-response-output{
.margin-left(0);
.margin-right(0);
padding:0;
border:none;
font-size:0.933em;
.mix-alternative-text();
}
div.wpcf7-mail-sent-ng,
div.wpcf7-validation-errors{
color:@warning-color;
&:before{
content:"\f071";
font-family:FontAwesome;
.margin-right(8px);
}
}
div.wpcf7-mail-sent-ok{
color:@main-color3;
&:before{
content:"\f00c";
font-family:FontAwesome;
.margin-right(8px);
}
}
.form-block{
padding:35px 25px;
background:@forms-bg;
border-radius:@main-border-radius;
position:relative;
text-align:center;
z-index:3;
&__title{
margin:0 0 20px;
color:@main-color-white;
font-family:@subheading-font-family;
font-size:1.467em;
font-weight:normal;
& + .form-block__description{
margin-top:-15px;
}
}
&__description{
margin:0 0 15px;
color:@main-color-white;
}
&__fields-short{
&:after{
content:" ";
display:block;
clear:both;
}
}
&__field-width-icon{
position:relative;
input,
.bootstrap-select .btn{
.padding-right(40px !important);
}
i{
pointer-events: none;
position:absolute;
top:55%;
.right(10px);
.translate(0, -50%);
color:fade(@forms-bg, 50%);
font-size:1.200em;
}
}
&__field-short{
display:inline-block;
width:33%;
.padding-right(5px);
.float(left);
&--wide{
width:66%;
}
&:nth-last-child(2){
.padding-left(5px);
.padding-right(0);
.float(right);
}
input{
margin-bottom:0 !important;
}
}
&__label{
display:block;
.text-align(left);
color:@main-color-white;
}
&__item{
margin-bottom:10px;
position:relative;
input, textarea, button{
margin-bottom:0;
&[disabled]{
opacity:0.8;
}
}
&>input[type=hidden]+i{
display:none;
}
a{
border-bottom:none;
}
.bootstrap-select{
&.open{
.btn-default{
border:none !important;
}
}
.btn-default{
border:none !important;
}
.dropdown-menu{
border:none !important;
}
.caret{
display:none;
}
}
// price slider for search tour
& > .price_slider_amount{
padding:15px 15px 10px;
background:fade(@main-color-white, 90%);
border-radius:@main-border-radius;
// without js
& > .price_slider_amount{
margin:-15px -15px -10px;
overflow:hidden;
input{
display:inline-block;
background:transparent;
}
#min_price{
width:48%;
float:left;
border-right:10px solid @forms-bg;
border-radius:@main-border-radius 0 0 @main-border-radius;
}
#max_price{
width:48%;
float:right;
border-radius:0 @main-border-radius @main-border-radius 0;
}
}
}
.ui-slider{
height:0.5em;
.margin-left(10px);
position:relative;
border:1px solid #ddd;
border-radius:@main-border-radius !important;
& + .price_slider_amount{
margin:0 !important;
}
}
.ui-slider-range{
height:100%;
position:absolute;
z-index:1;
border-radius:0 !important;
background:@main-color2;
border:none;
}
.ui-slider-handle{
width:15px;
height:15px;
.margin-left(-10px);
position:absolute;
z-index:2;
cursor:ew-resize;
top:-0.3em;
border:none !important;
background:@main-color2 !important;
border-radius:100% !important;
outline:0;
}
}
&__button{
padding:9px 15px;
background:@forms__button-bg !important;
color:@main-color-white;
text-transform:uppercase;
.mix-alternative-text();
&[disabled]{
color:fade(@main-color-white, 30%);
}
}
&__validation-error{
margin-bottom:10px;
color:@main-color-white;
i{
.margin-right(5px);
}
}
&__validation-success{
color:@main-color-white;
}
input{
width:100%;
//height:45px;
//line-height:21px;
//padding:12px 15px;
border:none;
&:focus{
outline:0;
}
&:last-child{
margin:0;
}
}
input, textarea{
background:fade(@main-color-white, 90%);
.mix-transition(@main-animation-forms);
.mix-placeholder(#c4c4c4);
&:focus{
background:fade(@main-color-white, 100%);
}
}
&--style-dark{
background:#4a6a8c;
.form-block{
&__title{
font-size:1.333em;
}
}
input, textarea{
width:100%;
border:1px solid rgba(255, 255, 255, 0.5);
background:transparent;
color:@main-color-white;
.mix-transition(@main-animation-forms);
.mix-placeholder(fade(@main-color-white, 50%), @placeholder-font);
&:focus{
border:1px solid rgba(255, 255, 255, 1);
}
}
textarea{
min-height:100px;
resize:none;
}
}
&--style2{
.form-block{
&__title{
font-size:1.333em;
}
}
textarea{
min-height:100px;
//line-height:45px;
vertical-align:top;
resize:none;
}
}
&--style3{
padding-bottom:30px;
.form-block{
&__button{
width:auto;
height:50px;
line-height:50px;
padding:0 35px;
background:@main-color2 !important;
border:2px solid @body-bg;
position:absolute;
bottom:-22px;
.left(50%);
.translate(-50%, 0);
border-radius:5px;
}
}
}
&--tour-booking{
margin-bottom: @layout-indent + 10px;
input[type=number]{
//.padding(12px, 0, 12px, 15px);
.padding-right(0);
}
@media(min-width:992px) and (max-width:1199px) {
.form-block__field-short.form-block__field-width-icon{
i {
display:none;
}
input{
padding:12px !important;
}
}
}
}
&__clear-attribute-fields{
color:@main-color-white;
&:hover{
color:@main-color-white;
}
background:fadeout(@main-color-white, 60%);
margin-top:10px;
display: block;
line-height:45px;
text-transform: uppercase;
.border-radius(@main-border-radius);
&:after{
display:block;
.float(right);
margin:0 10px;
content:"\f00d";
font-family:FontAwesome;
font-size:1.2em;
}
}
&__errors-block{
color:@main-color-white;
background:@warning-color !important;
border-radius:@main-border-radius;
padding:3px;
margin-bottom:10px;
display:none;
}
&__price-details{
color:@main-color-white;
&--in-progress{
position:relative;
min-height:27px;
opacity:0.7;
&:after{
content:' ';
display:block;
position:absolute;
.left(0);
top:0;
width:100%;
height:100%;
background:transparent url("@{assetsUrl}images/ajax-loader.gif") no-repeat 50% 50%;
}
}
}
&--faq{
padding:35px 25px 25px;
& + .block-after-indent{
margin-top:@layout-indent !important;
}
}
&--cftb{
.form-block{
&__item{
.wpcf7-form-control-wrap{
display:block;
}
br{
display:none;
}
}
}
p{
height:0;
margin:0 !important;
}
.wpcf7-not-valid-tip{
display:none;
}
}
&--horizontal{
padding:0;
background:transparent;
text-align:left;
.form-block{
&__form{
padding:20px 30px 0 30px;
background:@forms-bg;
border-radius:@main-border-radius;
}
&__item{
.margin(0, 0, 20px, 0);
width:100%;
// price slider for search tour
& > .price_slider_amount{
padding:11px 10px 1px;
& > .price_slider_amount{
margin:-11px -10px -1px;
}
.ui-slider{
height:6px;
}
.price_label{
font-size:13px;
text-align:center;
}
.ui-slider-handle{
width:10px;
height:10px;
top:-3px;
}
}
}
}
button,
input{
&[type="submit"]{
max-width:100%;
overflow:hidden;
margin-bottom:20px;
}
}
}
&__field-pair{
input{
display:inline-block;
width:48%;
&:nth-last-child(2){
.margin-right(4%);
}
}
}
&--vertical{
@media(max-width:1200px) and (min-width:992px){
.form-block__field-pair{
input{
width:100%;
&:nth-last-child(2){
.margin-right(0);
margin-bottom:10px;
}
}
}
}
}
&--with-border{
.form-block{
&__form{
border:6px solid fade(@main-color-white, 20%);
}
}
}
&--full-width{
.form-block{
&__form{
.mix-outside-of-container();
}
}
}
&--big-indent{
.form-block{
&__form{
padding-top:30px;
padding-bottom:10px;
}
}
}
&--light-style{
&.form-block--with-title{
.form-block{
&__form{
.padding-left(150px);
position:relative;
}
}
.title{
margin:0;
padding:0;
width:130px;
height:100%;
border-bottom:none;
position:absolute;
top:0;
.left(0);
z-index:1;
background:@main-color1;
overflow:hidden;
.border-radius(@main-border-radius, 0, 0, @main-border-radius);
&:before{
content:" ";
display:block;
width:200%;
height:200%;
position:absolute;
background:fade(@main-color-white, 10%);
top:10px;
.left(45px);
.rotate(-65deg);
}
&:after{
display:none;
}
&__primary{
padding:10px 16px;
width:100%;
position:absolute;
top:50%;
.left(0);
.mix-transform(translate(0,-50%));
color:@main-color-white;
font-family:@subheading-font-family;
font-size:1.267em;
text-transform:none;
font-weight:normal;
}
}
}
&.form-block--with-border{
border:6px solid fade(@main-color-white, 20%);
.form-block{
&__form{
border:none;
}
}
}
.form-block{
&__form{
background:fade(@main-color-white, 90%);
}
&__item{
display:inline-block;
border:1px solid #e1eaf2;
border-radius:@main-border-radius;
input{
.mix-placeholder(fade(@main-text-color, 40%));
}
.bootstrap-select button.selectpicker--empty{
color:fade(@main-text-color, 40%);
}
// price slider for search tour
& > .price_slider_amount{
border:1px solid #e1eaf2;
}
}
&__field-double{
border:none !important;
.form-block{
&__field-pair{
input{
border:1px solid #e1eaf2;
}
}
}
}
}
button,
input{
&[type="submit"]{
background:fade(@main-color1, 80%);
&:hover{
background:@main-color1;
}
}
}
}
&--with-label{
.form-block{
&__form{
.row{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
align-items:flex-end;
}
}
&__item-label{
margin-bottom:10px;
color:@main-color-white;
font-size:1.067em;
.mix-alternative-text();
text-transform:uppercase;
.text-align(left);
}
}
}
&--button-align-left{
.text-align(left);
}
&--button-align-center{
text-align:center;
}
&--button-align-right{
.text-align(right);
}
}
// Responsive
@media(max-width:@responsive-breakpoint2){
.form-block{
&--faq{
& + .block-after-indent{
margin-top:@layout-indent-small !important;
}
}
&--with-label{
.form-block{
&__form{
.row{
display:block;
}
}
}
}
}
}
@media(max-width:@responsive-breakpoint3){
.form-block{
&--full-width{
.form-block{
&__form{
.mix-outside-of-container() !important;
}
}
}
&--light-style{
&.form-block--with-title{
.form-block__form{
padding:30px !important;
}
.title{
width:100%;
position:static;
border-radius:@main-border-radius @main-border-radius 0 0;
&:before,
&:after{
display:none !important;
}
&__primary{
padding:15px 30px;
position:static;
.mix-transform(translate(0, 0));
}
}
}
}
}
}
Directory Contents
Dirs: 0 × Files: 51