Haina
/
data.chinahighlights.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

游船移动端表单

Browse Source
master
CandiceSong 6 years ago
parent b3366ce106
commit c49eb40b34
1 changed files with 59 additions and 149 deletions
Show Stats Download Patch File Download Diff File

208
css/forms/inquiry-form-tour-mobile.css
Unescape Escape View File

@ -1,14 +1,14 @@
@charset "utf-8";
/* CSS Document */
sup.copyright { color:#fff ;}
sup { color:#a31022 ;}
body { background:#fff;}
label { font-weight: normal ; width: 100%;}
sup.copyright { color:#fff !important;}
sup { color:#a31022 !important;}
body { background:#f1f1f1;}
label { font-weight: normal !important; width: 100%;}
.whoTravel { display: block; margin: 0 auto;}
.whoTravel { display: block; margin: 45px 0 20px;}
#header { height: 30px ; background-color: #a31022 ; background-image: none ; }
#header { height: 30px !important; background-color: #a31022 !important; background-image: none !important; }
.logobox {
position: absolute;
top: -26px;
@ -33,23 +33,23 @@ label { font-weight: normal ; width: 100%;}
.specialRequest textarea { height: 120px ; }
.specialRequest textarea { height: 120px !important; }
.hotelBlock { display: block; }
.hotelBlock { display: block; margin: -10px 0 30px; }
.travelBlock { padding: 0 15px 0 15px;}
.whoTravel label { display:inherit;}
.datesArrival .daysBlock { display: block; margin-top:-5px; padding-left: 0px;
padding-right: 0px; margin-bottom: 0px ; }
.datesArrival .daysBlock input[type="radio"] { margin-left: 0 }
padding-right: 0px; margin-bottom: 0px !important; }
.datesArrival .daysBlock input[type="radio"] { margin-left: 0 !important }
.datesArrival .daysBlock label { width: 20%; margin-left: 8px; }
.datesArrival .daysBlock label .FlexYes { margin-left: 10px; padding-top: 10px; font-size: 14px;}
.datesArrival .daysBlock .FlexibleDate { font-size: 14px; float: left; display: block; margin-top: 10px;}
.datesArrival .daysBlock input.Flexibility { float: left; height: 10px; width: 10px;}
.datesArrival .item-list input {padding: 12px 0 12px 15px ;
.datesArrival .item-list input {padding: 12px 0 12px 15px !important;
font-size: 16px;
width: 100%;
display: inline-block;
@ -58,49 +58,45 @@ border: 1px solid #d1d1d1;
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
border-radius: 4px;
background-position: 96% 9px ;
background-image: url(https://data.chinahighlights.com/pic/tour/tm-form-calender-bg.png);
background-position: 96% 9px !important;
background-image: url(/pic/tailor/calendar-icon.png);
background-repeat: no-repeat;}
.datesArrival { display: block; padding: 0 15px;}
.datesArrival input[type="text"] { border: 1px solid #d1d1d1;; background: url(https://data.chinahighlights.com/pic/tour/tm-form-calender-bg.png); padding: 11px 3px; text-align: center; width: 100%; border-radius: 4px; color: #555; font-family: Verdana, Geneva, sans-serif; }
.datesArrival { display: block; margin: 5px 0 30px; position: relative }
.datesArrival input[type="text"] { border: 1px solid #d1d1d1;; background: url(/css/images/calender.GIF) no-repeat 98% 6px #fff; padding: 11px 3px; text-align: center; width: 100%; border-radius: 4px; color: #555; font-family: Verdana, Geneva, sans-serif; }
@media(max-width:750px) {
.tourSelected ul li { padding-left:0 ;}
.tourSelected { display: block; background: #fff; padding:25px 15px 15px 15px; border-radius: 4px; background: #f1f1f1; margin-bottom: 45px;}
.tourSelected ul li { padding-left:0 !important;}
.tourSelected { display: block; background: #fff; box-shadow: 0 0 2px #999; padding:25px 10px; border-radius: 4px;}
.tourSelected ul { margin: 0 }
.tourSelected ul .info { text-align: left;}
.tourSelected ul .infodetail { padding-left:0; color: #000;
font-weight: 300; line-height: 25px; }
.tourSelected ul .info { text-align:right;}
.tourSelected ul .infodetail { padding-left:0; font-size:14px;}
.tourSelected ul li { line-height: 20px; margin-bottom: 8px; font-size: 16px; padding-left: 15px; }
.tourSelected ul li strong { color:#555; font-weight: normal; }
.tourSelected ul li strong { color:#999; font-weight: normal; font-size:14px;}
.tourSelected ul li.first { margin-bottom: 10px; font-size: 16px; }
.tourSelected ul li.tourname { margin-bottom: 20px;color: #000;
font-size: 20px;
font-style: italic;
font-weight: 600;}
.hotelStyle { padding: 0 ; width: auto }
.fiveStar, .fourStarL, .fourStarV, .threeStar { background: none ; text-align: left }
.tourSelected ul li.tourname { margin-bottom: 10px; font-size: 16px; border-bottom:1px solid #ddd; padding-bottom:15px;}
.hotelStyle { padding: 0 !important; width: auto !important }
.fiveStar, .fourStarL, .fourStarV, .threeStar { background: none !important; text-align: left !important }
.whotravel, .hotelBlock { margin-bottom:0; }
.hotelgroup { padding-left:0;}
.hotelBlock .HotelLevel { font-size: 15px;}
.whotravel { margin-bottom:10px ;}
.whotravel { margin-bottom:10px !important;}
.datesArrival input { margin-bottom:10px ; border-radius: 4px;}
.datesArrival { margin-bottom:0 }
.hotelgroup { margin-left:-15px ;}
.datesArrival input { margin-bottom:10px !important; border-radius: 4px;}
.datesArrival { margin-bottom:0 !important}
.hotelgroup { margin-left:-15px !important;}
}
.input-group-addon { padding: 10px 12px ;}
.input-group-addon { padding: 10px 12px !important;}
.whoTravel h2.whotravel { text-align:right;}
.specialRequest { display: block; }
.specialRequest { display: block; margin: 5px 0 30px; }
.specialRequest textarea { border: 1px solid #d1d1d1; background: #fff; padding: 10px; height: 190px; border-radius: 4px; font-family: Verdana, Geneva, sans-serif; color: #555; font-size: 12px; width:100%; }
.contactInfo { display: block; margin: 0 auto; padding: 0 15px;}
.contactInfo label { height: 55px; line-height: 50px;}
.contactInfo { display: block; margin: 5px 0 -15px; }
#tailorRight .contactInfo h2, #tailorRight .hotelBlock h2, #tailorRight .travelDays h2 { margin-bottom:10px;}
@ -114,7 +110,7 @@ input.nationality { text-transform: capitalize; }
.requiredArea { border-bottom: 1px dashed #a31022; clear: both; color: #a31022; display: block; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 15px ; padding: 2px 0 4px 10px; }
.requiredArea { border-bottom: 1px dashed #a31022; clear: both; color: #a31022; display: block; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em !important; padding: 2px 0 4px 10px; }
input.inquiryform { width:16px; height:16px;}
/* rewrite icons style */
@ -127,135 +123,49 @@ input.inquiryform { width:16px; height:16px;}
/* public */
.mobileLogo a { color: #fff; text-decoration: none;}
#wrapper { background-image: none ; background-color: #fff ; }
h2 {
margin-bottom: 0px;
font-size: 22px;
padding: 18px 0 0 ;
display: block;
color: #000;}
#wrapper { background-image: none !important; background-color: #f7f6f2 !important; }
h2 { margin: 0 -15px !important; font-size: 18px; padding: 18px 0 17px !important; display: block; border-bottom: 1px solid #cfcfcf; color: #296691 !important; font-weight: bold !important }
/* --- */
.transportBlock, .guideBlock, .hotelBlock, .whoTravel, .travelDays, .datesArrival, .specialRequest { margin-bottom: 0; padding: 0 15px;}
.transportBlock, .guideBlock, .hotelBlock, .whoTravel, .travelDays, .datesArrival, .specialRequest { margin-bottom: 0 !important }
/* form */
.item-list { font-size: 16px; padding: 15px 0 10px; }
.item-title { margin-bottom: 15px; display: block;font-size: 16px;
color: #000; }
.hotelBlock input { display: none;}
input:checked+label {
border: 2px solid #a31022;
}
label { font-size: 16px;
text-align: center;
width: 100%;
height: 80px;
font-weight: 400;
color: #777;
background-color: #fff;
border: 1px #d1d1d1 solid;
border-radius: 4px;
float: left;
margin-top: 15px;
display: grid;
align-items: center;
padding: 0 15px;
}
.item-list { font-size: 1.5rem; padding: 15px 0 10px; margin: 0 -15px; display: block; overflow: hidden; }
.item-list .item-title { padding-top: 4px; display: inline-block; }
.city-list { font-size: 16px; padding: 15px 0 10px; margin: 0 -15px; border-bottom: 1px solid #fefefe; display: block; overflow: hidden; }
.contact-list { font-size: 1.5rem;
padding: 0 -15px;
margin: 0 -15px;
display: block;
overflow: hidden; }
.contact-list input[type="text"], .contact-list input[type="email"], .contact-list input[type="tel"] { padding: 12px 0 12px 15px ; font-size: 16px; width: 100%; display: inline-block; background: #fff; border: none; font-family: Arial, Helvetica, sans-serif; border-radius: 0 }
.contact-list input[type="text"], .contact-list input[type="email"], .contact-list input[type="tel"] { padding: 12px 0 12px 15px !important; font-size: 16px; width: 100%; display: inline-block; background: #fff; border: none; font-weight: bold; font-family: Arial, Helvetica, sans-serif; border-radius: 0!important }
.contact-list input::-webkit-input-placeholder {
font-weight: normal
font-weight: normal !important
}
.contact-list input[type="text"] { text-transform: capitalize; }
.contact-list .titleIcon { width: 18%; display: inline-block; float: left; text-align: center; padding: 12px 15px 0; }
.contact-list .titleIcon img { height: 25px ; }
.contact-list .inputBox { width: 100%; display: inline-block; margin-top: 15px; border-radius: 4px; padding: 0 15px; }
.contact-list .inputBox input { border: 1px solid #d1d1d1;
height: 58px;
border-radius: 0 4px 4px 0;
width: 77%;}
.contact-list .inputBox.first-child { padding: 7px 15px; background: #fff; font-size: 16px; color: #000; font-weight: bold ; margin-top: 15px; }
.contact-list .titleIcon img { height: 25px !important; }
.contact-list .inputBox { width: 100%; display: inline-block; margin-top: 15px; border: 1px solid #d1d1d1; border-radius: 4px;}
.contact-list .inputBox.first-child { padding: 7px 15px; background: #fff; font-size: 16px; color: #000; font-weight: bold !important; margin-top: 15px; border: 1px solid #d1d1d1;border-radius: 4px; }
.contact-list .inputBox label { margin-top: 5px; width:48%; }
.item-list .item-right { margin-top: -5px; }
.item-list .item-right.removeMargin { margin-top: 0 ; }
.item-list .item-right { float: right; text-align: right; margin-top: -5px; }
.item-list .item-right.removeMargin { margin-top: 0 !important; }
.item-right label { display: inline-block; margin-left: 10px; }
.num-control { float: left;
height: 55px;
overflow: hidden;
border-top: 1px solid #b5b5b5;
border: 1px solid #b5b5b5;
border-radius: 4px;
margin-bottom: 15px;width: 100%; }
.num-control a { display: inline-block;
border-left: 1px solid #b5b5b5;
border-right: 1px solid #b5b5b5;
text-align: center;
width: 50px;
line-height: 35px;
color: #000;
font-size: 40px;
background: #fff;
text-decoration: none;
font-weight: 300;
height: 54px;
padding-top: 5px;
background: #efefef;
border: none; }
.num-control input { border: none;
text-align: center;
background: #fff;
border-radius: 0;
box-shadow: none;
font-size: 20px;
height: 60px;
position: relative;
top: -5px;
display: inline-block;
width: calc(100% - 109px);}
.datesArrival input { width: 100%; margin: 0 auto 5px auto ; padding: 10px ; font-size: 16px; height: auto ; border-width: 1px ; background-position: 96% 9px ; background-image: url(https://data.chinahighlights.com/pic/tailor/calendar-icon.png); background-repeat: no-repeat; min-height: 40px; color: #000; }
.num-control { display: inline-block; float: right; height: 37px; line-height: 35px; position: relative; overflow: hidden; border-top: 1px solid #b5b5b5; border-bottom: 1px solid #b5b5b5; }
.num-control a { display: inline-block; border-left: 1px solid #b5b5b5; border-right: 1px solid #b5b5b5; text-align: center; width: 32px; height: 35px; line-height: 35px; color: #626262; font-size: 18px; background: #fff; text-decoration: none; }
.num-control input { border: none; width: 34px; margin-left: -4px; margin-right: -6px; height: 35px; text-align: center; background: #fff; border-radius: 0!important; box-shadow: none !important; }
.datesArrival input { width: 100%; margin: 0 auto 5px auto !important; padding: 10px !important; font-size: 16px; height: auto !important; border-width: 1px !important; background-position: 96% 9px !important; background-image: url(/pic/tailor/calendar-icon.png); background-repeat: no-repeat; min-height: 40px; color: #000; }
.mobileSend {
width: 100%;
z-index: 9999;
margin: 50px 0;
display: block;
font-size: 30px;
text-align: center;
color: #333;
background: url(https://data.chinahighlights.com/image/tour-detail/amp-image/beijing-index-arrow.jpg) no-repeat top center #e5e5e5;
padding-top: 55px;
margin-top: 40px;
height: 145px;
margin-bottom: 0px; }
.mobileSend input { background: #a31022 none repeat scroll 0 0;
border: medium none;
color: #fff;
display: block;
font-size: 23px;
padding: 8px 0;
text-align: center;
width: 80%;
border-radius: 30px;
font-weight: 300;
text-transform: uppercase;
margin: 0 auto;}
padding: 0 -15px;
margin: 0 -15px;
display: block;
overflow: hidden; }
.mobileSend input { background: #a31022 none repeat scroll 0 0; border: medium none !important; color: #fff; display: block; font-size: 20px; padding: 10px 0; text-align: center; width: 100%; border-radius: 4px; }
.tipText { display: block; color: #999; margin: 0 -15px 0; padding: 10px 15px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-bottom: 1px solid #cfcfcf; }
.citySelect { margin: 0 ; overflow: visible }
textarea { width: 100% ; margin-left: 0; margin-bottom: 5px ; border-width: 1px ; font-size: 14px ; color: #000 }
.inputtag {
background: #efefef;
width: 23%;
display: inline-block;
float: left;
font-size: 20px;
border: 1px solid #d1d1d1;
border-right: none;
border-radius: 4px 0 0 4px;
}
.citySelect { margin: 0 !important; overflow: visible !important }
textarea { width: 100% !important; margin-left: 0!important; margin-bottom: 5px !important; border-width: 1px !important; font-size: 14px !important; color: #000 !important }
/* --- */
@-webkit-keyframes click-wave { 0% {
width: 40px;
@ -313,9 +223,9 @@ textarea { width: 100% ; margin-left: 0; margin-bottom: 5px ; border-width: 1px
opacity: 0.0;
}
}
.option-input { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; position: relative; top: 13px; width: 20px; height: 20px; -webkit-transition: all 0.15s ease-out 0; -moz-transition: all 0.15s ease-out 0; transition: all 0.15s ease-out 0; background: #fff; color: #fff; cursor: pointer; display: inline-block ; outline: none; position: relative; margin-right: 5px ; margin-top: -30px ; border: 2px solid #999; vertical-align: middle; z-index: 1000; padding-top: 0 }
.option-input { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; position: relative; top: 13px; width: 20px; height: 20px; -webkit-transition: all 0.15s ease-out 0; -moz-transition: all 0.15s ease-out 0; transition: all 0.15s ease-out 0; background: #fff; color: #fff; cursor: pointer; display: inline-block !important; outline: none; position: relative; margin-right: 5px !important; margin-top: -30px !important; border: 2px solid #999; vertical-align: middle; z-index: 1000; padding-top: 0 !important }
.option-input:hover { background: #9faab7; }
.option-input:checked { background: #6ab34d; border: none }
.option-input:checked { background: #6ab34d; border: none !important }
.option-input:checked::before { width: 19px; height: 20px; content: ':)'; display: inline-block; text-align: center; line-height: 20px; }
.option-input:checked::after { -webkit-animation: click-wave 0.65s; -moz-animation: click-wave 0.65s; animation: click-wave 0.65s; background: #40e0d0; content: ''; display: block; position: relative; z-index: 100; }
.option-input.radio { border-radius: 50%; }

Write Preview
Loading…
Cancel
Save