File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/* ==========================================================================
$BASE-DATE-PICKER
========================================================================== */
/**
* The picker box.
*/
.picker__box {
padding: 0 5px;
}
/**
* The header containing the month and year stuff.
*/
.picker__header {
text-align: center;
position: relative;
padding: 12px 0;
position: relative;
}
.picker__header::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100% + 11px); height: 100%; z-index: -1; background-color: #6a718a; border-radius: 5px 5px 0 0;}
/**
* The month and year labels.
*/
.picker__month,
.picker__year {
font-weight: 400;
display: inline-block;
margin-left: .25em;
margin-right: .25em;
color: #fff;
font-size: 18px;
}
.picker__year {
color: #fff;
font-size: 18px;
font-weight: 400;
}
/**
* The month and year selectors.
*/
.picker__select--month,
.picker__select--year {
border: 1px solid transparent;
padding: 5px 0 0 5px;
margin-left: .25em;
margin-right: .25em;
background-color: transparent;
font-size: 18px;
color: #fff;
background-image: url(/publish/image/content/select2.png);
background-repeat: no-repeat;
background-position: right 55%;
}
@media (min-width: 24.5em) {
.picker__select--month,
.picker__select--year {
margin-top: -0.5em;
}
}
.picker__select--month {
width: 22.5%;
}
.picker__select--year {
width: 22.5%;
}
.picker__select--month:focus,
.picker__select--year:focus {
border-color: #0089ec;
}
/**
* The month navigation buttons.
*/
.picker__nav--prev,
.picker__nav--next {
position: absolute;
padding: .5em 1.25em;
width: 1em;
height: 1em;
box-sizing: content-box;
top: -0.25em;
}
@media (min-width: 24.5em) {
.picker__nav--prev,
.picker__nav--next {
top: 14%;
}
}
.picker__nav--prev {
left: -1em;
padding-right: 1.25em;
}
@media (min-width: 24.5em) {
.picker__nav--prev {
padding-right: 1.5em;
}
}
.picker__nav--next {
right: -1em;
padding-left: 1.25em;
}
@media (min-width: 24.5em) {
.picker__nav--next {
padding-left: 1.5em;
}
}
.picker__nav--prev:before,
.picker__nav--next:before {
content: " ";
border-top: .5em solid transparent;
border-bottom: .5em solid transparent;
border-right: 0.75em solid #fff;
width: 0;
height: 0;
display: block;
margin: 0 auto;
}
.picker__nav--next:before {
border-right: 0;
border-left: 0.75em solid #fff;
}
.picker__nav--prev:hover,
.picker__nav--next:hover {
cursor: pointer;
color: #000;
/* background: #b1dcfb; */
}
.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
cursor: default;
background: none;
border-right-color: #f5f5f5;
border-left-color: #f5f5f5;
}
/**
* The calendar table of dates
*/
.picker__table {
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
font-size: inherit;
width: 100%;
margin-top: .75em;
margin-bottom: .5em;
}
@media (min-height: 33.875em) {
.picker__table {
margin-bottom: .75em;
}
}
.picker__table tbody {background-color: #f5f5f5;}
.picker__table tr:first-child {
border-top: inherit !important;
}
.picker__table tr {
border-bottom: inherit !important;
}
.picker__table th {
min-width: inherit !important;
height: inherit !important;
vertical-align: inherit !important;
font-size: inherit !important;
text-align: inherit !important;
line-height: inherit !important;
}
.picker__table td {
padding: 0 !important;
margin: 0;
line-height: inherit !important;
vertical-align: inherit !important;
font-weight: inherit !important;
}
/**
* The weekday labels
*/
.picker__weekday {
width: 14.285714286%;
font-size: 15px;
padding-bottom: .25em;
color: #555;
font-weight: 400;
/* Increase the spacing a tad */
}
@media (min-height: 33.875em) {
.picker__weekday {
padding-bottom: .5em;
}
}
/**
* The days on the calendar
*/
.picker__day {
padding: .3125em 0;
font-weight: 200;
border: 1px solid #fff;
font-size: 15px;
}
.picker__day--today {
position: relative;
}
.picker__day--today:before {
content: " ";
position: absolute;
top: 2px;
right: 2px;
width: 0;
height: 0;
border-top: 0.5em solid #4681d1;
border-left: .5em solid transparent;
}
.picker__day--disabled:before {
border-top-color: #aaa;
}
.picker__day--outfocus {
color: #ddd;
}
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
cursor: pointer;
color: #000;
background: #b1dcfb;
}
.picker__day--highlighted {
border-color: #4681d1;
}
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
cursor: pointer;
color: #000;
background: #e7f5ff;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
background: #4681d1;
color: #fff;
}
.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
background: #f5f5f5;
border-color: #f5f5f5;
color: #ddd;
cursor: default;
}
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
background: #bbb;
}
/**
* The footer containing the "today", "clear", and "close" buttons.
*/
.picker__footer {
margin-bottom: 10px;
}
.picker__button--today,
.picker__button--clear,
.picker__button--close {
border: 1px solid #fff;
background: #fff;
font-size: .8em;
padding: .66em 0;
line-height: 20px !important;
font-weight: bold;
width: 33%;
display: inline-block;
vertical-align: bottom;
}
.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
cursor: pointer;
color: #000;
background-color: #f1f1f1 !important;
border: 1px solid #ccc !important;
}
.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
background: #b1dcfb;
border-color: #0089ec;
outline: none;
}
.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
position: relative;
display: inline-block;
height: 0;
}
.picker__button--today:before,
.picker__button--clear:before {
content: " ";
margin-right: .45em;
}
.picker__button--today:before {
top: -0.05em;
width: 0;
border-top: 0.66em solid #0059bc;
border-left: .66em solid transparent;
}
.picker__button--clear:before {
top: -0.25em;
width: .66em;
border-top: 3px solid #e20;
}
.picker__button--close:before {
content: "\D7";
top: -0.1em;
vertical-align: top;
font-size: 1.1em;
margin-right: .35em;
color: #777;
}
.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
background: #f5f5f5;
border-color: #f5f5f5;
color: #ddd;
cursor: default;
}
.picker__button--today[disabled]:before {
border-top-color: #aaa;
}
.picker__button--clear {float: right;}
.picker__button--close {float: right;}
.picker__footer button {
background-color: #eee !important;
border: 1px solid #dadada !important;
font-size: 14px !important;
padding: 3px 10px !important;
margin: 0 3px;
vertical-align: middle;
color: #222 !important;
height: auto !important;
width: auto;
border-radius: 0 !important;
font-weight: 400;
}
/* ==========================================================================
$CLASSIC-DATE-PICKER
========================================================================== */