default/public/css/pickadate.css
/**
* Default mobile-first, responsive styling for pickadate.js
* Demo: http://amsul.github.com/pickadate.js/themes.htm#default
*/
/**
* Colors used:
*
* #0089ec -> Base blue
* #b1dcfb -> Hover blue bg
*
* #0059bc -> Dark blue for "today" tag
* #aaa -> Light grey for "today" tag if disabled
*
* #f5f5f5 -> Dimmed grey bg for disabled days
* #ddd -> Less dimmed grey for text in disabled & outfocus days
*
* #777 -> Grey for calendar border
* #888 -> Slightly lighter grey for calendar top border
*
* #999 -> Medium grey used for year & weekday labels
*
* #e20 -> Red used for "clear" icon
*
* #000 -> Black
* #fff -> White
*
*/
/**
* When the calendar is open
*/
/* Prevent the page from scrolling */
/*body*/.pickadate__active {
overflow: hidden;
}
/* And add the "active" state to the input */
/*input*/.pickadate__input--active {
border-color: #0089ec !important;
}
/**
* The holder that fills the entire screen
*/
.pickadate__holder {
/* The base font-size */
font-size: 16px;
line-height: 1.2;
color: #000;
position: fixed;
z-index: 10000;
width: 100%;
height: 100%;
/* Fade out the background, then immediately hide the holder */
-webkit-transition: background .15s ease-out, top 0s .2s;
-moz-transition: background .15s ease-out, top 0s .2s;
transition: background .15s ease-out, top 0s .2s;
}
/**
* The frame that bounds the calendar
*/
.pickadate__frame {
min-width: 256px;
max-width: 666px;
width: 100%;
margin: 0 auto;
position: absolute;
/* Allow the frame to be scrolled in case the screen is too small */
overflow: auto;
-webkit-overflow-scrolling: touch;
/* Animate the frame in and out of view */
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
transition: all .15s ease-out;
}
/**
* Make the calendar holder and frame fullscreen
*/
.pickadate__holder,
.pickadate__frame {
top: 100%;
bottom: 0;
left: 0;
right: 0;
}
/**
* When the calendar opens
*/
.pickadate__holder--opened {
/* Show a translucent black background (order is important for IE) */
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000); /* IE6 & 7 */
zoom: 1;
background: rgba(0,0,0,.32); /* Normal browsers */
/* Animate in the background */
-webkit-transition: background .15s ease-out;
-moz-transition: background .15s ease-out;
transition: background .15s ease-out;
}
/* Bring the holder and frame into view */
.pickadate__holder--opened,
.pickadate__holder--opened .pickadate__frame {
top: 0;
}
/**
* The calendar wrapper
*/
.pickadate__wrap {
display: table;
width: 100%;
height: 100%;
}
/**
* The calendar itself
*/
.pickadate__calendar {
display: table-cell;
vertical-align: middle;
background: #fff;
padding: 1em;
}
/**
* The calendar table of dates
*/
.pickadate__table {
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
font-size: inherit;
width: 100%;
margin-top: .5em;
}
/* Remove browser stylings on a table cell */
.pickadate__table td {
margin: 0;
padding: 0;
}
/**
* The header containing the month and year tags/selectors
*/
.pickadate__header {
text-align: center;
position: relative;
}
.pickadate__nav--prev,
.pickadate__nav--next {
position: absolute;
top: -.1em;
padding: .5em;
margin: -.5em;
text-align: center;
min-width: 24px;
height: 24px;
line-height: 26px;
}
.pickadate__nav--prev {
left: 0;
}
.pickadate__nav--next {
right: 0;
}
.pickadate__month,
.pickadate__year {
font-weight: 500;
display: inline-block;
}
.pickadate__year {
color: #999;
font-size: .8em;
font-style: italic;
margin-left: .5em;
}
.pickadate__select--month,
.pickadate__select--year {
font-size: .8em;
border: 1px solid #ccc;
height: 2.5em;
padding: .66em .25em; /* For firefox */
margin-top: -.5em;
}
.pickadate__select--month {
width: 35%;
}
.pickadate__select--year {
width: 22.5%;
margin-left: .5em;
}
.pickadate__select--month:focus,
.pickadate__select--year:focus {
border-color: #0089ec;
}
/**
* The weekday labels
*/
.pickadate__weekday {
width: 14.285714286%; /* 100/7 */
font-size: .75em;
padding-bottom: .25em;
color: #999;
font-weight: 500;
}
/**
* The days on the calendar
*/
.pickadate__day {
padding: .33em 0 .25em;
font-weight: 100;
border: 1px solid #fff;
margin-bottom: 1px;
}
/**
* The various states of a day
*/
.pickadate__day--today {
color: #0089ec;
position: relative;
}
.pickadate__day--today:before {
content: " ";
position: absolute;
top: 2px;
right: 2px;
width: 0;
height: 0;
border-top: .5em solid #0059bc;
border-left: .5em solid transparent;
}
.pickadate__day--selected,
.pickadate__day--selected:hover {
border-color: #0089ec;
}
.pickadate__day--highlighted {
background: #fff;
}
.pickadate__day--disabled:before {
border-top-color: #aaa;
}
.pickadate__day--outfocus {
color: #ddd;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
}
/**
* The footer containing the "today" and "clear" buttons
*/
.pickadate__footer {
text-align: center;
margin: .25em 0 -.75em;
}
.pickadate__button--today,
.pickadate__button--clear {
border: 1px solid #fff;
background: #fff;
font-size: .8em;
padding: .66em 0;
margin: 0 2.5%;
font-weight: bold;
width: 40%;
}
.pickadate__button--today:before,
.pickadate__button--clear:before {
position: relative;
display: inline-block;
height: 0;
}
.pickadate__button--today:before {
content: " ";
margin-right: .45em;
top: -.05em;
width: 0;
border-top: .66em solid #0059bc;
border-left: .66em solid transparent;
}
.pickadate__button--clear:before {
content: "\D7";
margin-right: .35em;
top: -.1em;
color: #e20;
vertical-align: top;
font-size: 1.1em;
}
.pickadate__button--today:focus,
.pickadate__button--clear:focus {
background: #b1dcfb;
border-color: #0089ec;
outline: none;
}
/**
* The hover effect on any buttons
*/
.pickadate__day--infocus:hover,
.pickadate__day--outfocus:hover,
.pickadate__nav--prev:hover,
.pickadate__nav--next:hover,
.pickadate__button--today:hover,
.pickadate__button--clear:hover {
cursor: pointer;
color: #000;
background: #b1dcfb;
}
.pickadate__day--disabled,
.pickadate__day--disabled:hover {
background: #f5f5f5;
border-color: #f5f5f5;
color: #ddd;
cursor: default;
}
.pickadate__day--highlighted:hover,
.pickadate__holder--focused .pickadate__day--highlighted {
background: #0089ec;
color: #fff;
}
/**
* Adjust the calendar for not so tiny screens
* by just increasing the font size a bit
*/
@media (min-height: 342px) {
.pickadate__calendar {
font-size: 1.25em;
}
}
/**
* For bigger viewports, adjust the calendar
* to not cover the entire screen
*/
@media (min-height: 424px) {
/* Align the frame to the bottom, rather than top */
.pickadate__frame {
overflow: visible;
top: auto;
bottom: -100%;
}
.pickadate__holder--opened .pickadate__frame {
top: auto;
bottom: 0;
}
/* Remove the calendar middle-aligned styling */
.pickadate__wrap,
.pickadate__calendar {
display: block;
}
.pickadate__calendar {
/* Increase the font size a bit more */
font-size: 1.33em;
/* Add the borders except the bottom one */
border: 1px solid #777;
border-top-color: #888;
border-bottom-width: 0;
/* Make 'em rounded at the top corners */
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
/* And finally, add a nice shadow */
-webkit-box-shadow: 0 12px 36px 16px rgba(0,0,0,.24);
-moz-box-shadow: 0 12px 36px 16px rgba(0,0,0,.24);
box-shadow: 0 12px 36px 16px rgba(0,0,0,.24);
}
/* Increase the spacing a tad */
.pickadate__table {
margin-top: .75em;
}
.pickadate__weekday {
padding-bottom: .5em;
}
.pickadate__footer {
margin: .5em 0 -.5em;
}
}
/**
* For bigger monitors still, move it away
* from the bottom edge of the screen
* and round the top and bottom corners.
*/
@media (min-height: 542px) {
.pickadate__frame {
margin-bottom: 5%;
}
.pickadate__calendar {
font-size: 1.5em;
border-bottom-width: 1px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
}