Created
March 19, 2014 13:13
-
-
Save sean-clayton/9641328 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#qbt { | |
/* Insert global styles here */ | |
box-sizing: border-box; | |
} | |
/*********************************************************** | |
****************************TABS************************** | |
************************************************************/ | |
#qbt-tabs{ | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
background: #f3f3f3; | |
z-index: 1; | |
} | |
ul#qbt-tabs-ul { | |
margin: 0; | |
padding: 0; | |
} | |
#qbt-tabs-ul li { | |
list-style: none; | |
text-align: center; | |
float: left; | |
width: auto; | |
line-height: 30px; | |
padding: 0; | |
margin: 0; | |
border-left: 1px solid #ccc; | |
} | |
#qbt-tabs-ul li:first-child { | |
border-left: none; | |
} | |
#qbt-tabs-ul li:last-child { | |
border-right: 1px solid #ccc; | |
} | |
#qbt-tabs-ul li.active{ | |
background: #fff; | |
color: #333; | |
} | |
#qbt-tabs-ul li:hover{ | |
background-color: #f8f8f8; | |
z-index: 1; | |
} | |
#qbt-tabs-ul li a { | |
position: relative; | |
top: 1px; | |
z-index: 1; | |
text-decoration: none; | |
display: block; | |
color: #101010; | |
padding: .5em 1em; | |
} | |
/*********************************************************** | |
*********************QBT TAB CONTENT****************** | |
************************************************************/ | |
#qbt-wrap{ | |
padding: 1em; | |
height: 100%; | |
max-height: 100%; | |
z-index: 0; | |
position: relative; | |
top: 0; | |
} | |
.qbt-form-element{ | |
margin: 1em 0; | |
} | |
#qbt label{ | |
z-index: 0; | |
display: block; | |
} | |
#qbt input[type="date"], | |
#qbt input[type="text"], | |
#qbt select { | |
width:92%; | |
padding: 0; | |
font-size: 1em; | |
font-family: sans-serif; | |
line-height: 1; | |
border-radius: 0; | |
border: 1px solid #ccc; | |
-webkit-transition: .2s border-color; | |
-moz-transition: .2s border-color; | |
-ms-transition: .2s border-color; | |
-o-transition: .2s border-color; | |
transition: .2s border-color; | |
} | |
#qbt input[type="date"]:hover, | |
#qbt input[type="text"]:hover, | |
#qbt select:hover { | |
border: 1px solid #a7d4ff; | |
} | |
#qbt input[type="date"]:active, | |
#qbt input[type="text"]:active, | |
#qbt select:active { | |
border: 1px solid #2e89ff; | |
} | |
#qbt input[type="text"] { | |
padding: .5em; | |
} | |
#qbt input[type="date"] { | |
padding: .5em; | |
} | |
#qbt input[type="date"]:hover { | |
border: 1px solid #a7d4ff; | |
} | |
#qbt input[type="date"]:focus { | |
border: 1px solid #2e89ff; | |
} | |
#qbt select { | |
background: #fff; | |
border: 1px solid #ccc; | |
border-radius: 0; | |
width: 89%; | |
padding: .425em; | |
} | |
.qbt-btm-section{ | |
margin: 15px 0 0; | |
} | |
.submit-button { | |
position: relative; | |
float: right; | |
text-decoration: none; | |
text-align: center; | |
padding: 1em; | |
color: #fff; | |
top: 0px; | |
background-color: #3eba43; | |
box-shadow: 0 3px 0 #2a8729; | |
text-shadow: 0 1px 1px rgba(0,0,0,.5); | |
/* | |
The average click is 80ms from mouse down to mouse up, | |
so half is 40ms per transition (click and release). | |
This makes the button really squishy and kind of fun :) | |
*/ | |
-webkit-transition: .15s background-color, top 40ms, box-shadow 40ms; | |
-moz-transition: .15s background-color, top 40ms, box-shadow 40ms; | |
-ms-transition: .15s background-color, top 40ms, box-shadow 40ms; | |
-o-transition: .15s background-color, top 40ms, box-shadow 40ms; | |
transition: .15s background-color, top 40ms, box-shadow 40ms; | |
} | |
.submit-button:hover{ | |
background-color: #3fd53d; | |
box-shadow: 0 3px 0 #3eba43; | |
} | |
.submit-button:active { | |
top: 3px; | |
box-shadow: none; | |
} | |
/* Date Picker Tweaking */ | |
.picker__input:hover { | |
cursor: pointer !important; | |
} | |
.picker__holder { | |
z-index: 1000 !important; | |
} | |
.picker__holder:hover { | |
cursor: pointer; | |
} | |
.picker__frame:hover { | |
cursor: default; | |
} | |
/*********************************************************** | |
*********************FLIGHT TAB CONTENT****************** | |
************************************************************/ | |
#qbt-flt-search-type label{ | |
display: inline; | |
} | |
#qbt-flt-departDate, #qbt-flt-departTime, #qbt-flt-returnDate, #qbt-flt-returnTime { | |
float: left; | |
width: 49.5%; | |
} | |
#qbt-flt-departTime, #qbt-flt-returnTime{ | |
margin-left: 1%; | |
} | |
.qbt-flt-passenger{ | |
float: left; | |
width: 32%; | |
margin: 5px 0 0 2%; | |
} | |
#qbt-flt-adults{ | |
margin: 5px 0 0 0; | |
} | |
/*********************************************************** | |
*****************RESPONSIVE MEDIA QUERIES************ | |
************************************************************/ | |
/* Devices 1050px wide and lower (like a tablet) */ | |
@media (max-width: 1050px) { | |
/* Hotel Tab Content */ | |
#qbt-htl-checkin, #qbt-htl-checkout, #qbt-htl-adults, #qbt-htl-children { | |
float: left; | |
width: 49.5%; | |
} | |
#qbt-htl-checkout { | |
margin-left: 1%; | |
} | |
#qbt-htl-children { | |
margin-left: 1%; | |
} | |
/* Car Tab Content */ | |
#qbt-car-pickupDate, #qbt-car-pickupTime, #qbt-car-dropoffDate, #qbt-car-dropoffTime { | |
float: left; | |
width: 49.5%; | |
} | |
#qbt-car-pickupTime, #qbt-car-dropoffTime { | |
margin-left: 1%; | |
} | |
/* Vacations Tab Content */ | |
#qbt-vacation-departure-section, #qbt-vacation-destination-section, #qbt-vacation-checkin, #qbt-vacation-checkout { | |
float: left; | |
width: 49.5%; | |
} | |
#qbt-vacation-destination-section, #qbt-vacation-checkout { | |
margin-left: 1%; | |
} | |
/* Cruise Tab Content */ | |
#qbt-cruise-destination, #qbt-cruise-length, #qbt-cruise-departure-month, #qbt-cruise-departure-year { | |
float: left; | |
width: 49.5%; | |
} | |
#qbt-cruise-length, #qbt-cruise-departure-year { | |
margin-left: 1%; | |
} | |
} | |
/* Devices 449px wide and lower (like a smartphone) */ | |
@media (max-width: 449px) { | |
#qbt-flt-departDate, #qbt-flt-departTime, #qbt-flt-returnDate, #qbt-flt-returnTime { | |
float: none; | |
width: 100%; | |
margin-left: 0; | |
} | |
.submit-button { | |
margin: 0 0 0 0; | |
display: box; | |
width: 100%; | |
} | |
#qbt-tabs-ul li a { | |
padding: .5em .5em; | |
} | |
/* Hotel Tab Content */ | |
#qbt-htl-destination, #qbt-htl-checkin, #qbt-htl-checkout, #qbt-htl-adults, #qbt-htl-children { | |
margin: 1em 0; | |
float: none; | |
width: 100%; | |
} | |
/* Car Tab Content */ | |
#qbt-car-pickupDate, #qbt-car-pickupTime, #qbt-car-dropoffDate, #qbt-car-dropoffTime { | |
margin-left: 0; | |
float: none; | |
width: 100%; | |
} | |
/* Vacations Tab Content */ | |
#qbt-vacation-departure-section, #qbt-vacation-destination-section, #qbt-vacation-checkin, #qbt-vacation-checkout { | |
margin-left: 0; | |
float: none; | |
width: 100%; | |
} | |
/* Cruise Tab Content */ | |
#qbt-cruise-destination, #qbt-cruise-length, #qbt-cruise-departure-month, #qbt-cruise-departure-year { | |
margin-left: 0; | |
float: none; | |
width: 100%; | |
} | |
#qbt-cruise-departure-month { | |
margin-bottom: .25em; | |
} | |
} | |
@media(max-width: 311px) { | |
#qbt-tabs-ul li a { | |
padding: .25em 4px; | |
font-size: 14px; | |
} | |
#qbt-tabs-ul li { | |
height: 35px; | |
} | |
} | |
/*** Global CLEAR ***/ | |
.clear{clear:both;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment