/* ------------------------------------------------------------------------------
*
* # jQuery UI Datepicker
*
* Separate styles for jQuery UI library. Datepicker component
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
/* # Core
-------------------------------------------------- */
.ui-datepicker {
min-width: 270px;
background-color: @dropdown-bg;
padding: @list-spacing;
display: none;
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
z-index: 190!important;
// Make it flexible in sidebar
.sidebar & {
min-width: 0;
}
// Header
// ------------------------------
// Base
.ui-datepicker-header {
position: relative;
padding: 15px 0 20px 0;
}
// Title
.ui-datepicker-title {
margin: 0 40px;
font-size: @font-size-h6;
text-align: center;
// Show month
.ui-datepicker-month {
font-weight: 500;
}
// Show year
.ui-datepicker-year {
font-size: @font-size-small;
color: @text-muted;
}
// Date select
select {
margin: 0 1%;
&.ui-datepicker-month,
&.ui-datepicker-year {
width: 48%;
}
}
}
// Nav buttons
// ------------------------------
// Base
.ui-datepicker-prev,
.ui-datepicker-next {
position: absolute;
top: 10px;
line-height: 1;
color: @text-color;
padding: (@icon-font-size / 2);
border-radius: @border-radius-small;
// Icon base
&:after {
font-family: 'icomoon';
display: inline-block;
font-size: @icon-font-size;
width: @icon-font-size;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Hide text
span {
display: none;
}
}
// Prev button icon
.ui-datepicker-prev {
left: 0;
&:after {
content: '\e9c8';
}
}
// Next btn icon
.ui-datepicker-next {
right: 0;
&:after {
content: '\e9cb';
}
}
// Hover state
.ui-datepicker-prev-hover,
.ui-datepicker-next-hover {
background-color: @dropdown-link-hover-bg;
}
// Components
// ------------------------------
// Table
table {
width: 100%;
border-collapse: collapse;
margin: 0;
// Header cells
th {
text-align: center;
font-weight: 400;
border: 0;
padding-bottom: 10px;
font-size: @font-size-small;
color: @text-muted;
}
// Body cells
td {
border: 0;
padding: 1px;
position: relative;
// Day element
span,
a {
display: block;
padding: 6px;
text-align: center;
text-decoration: none;
border-radius: @border-radius-small;
color: @text-color;
min-width: 34px;
}
// Hover state
.ui-state-hover {
background-color: @dropdown-link-hover-bg;
}
&.ui-state-disabled span {
color: #ccc;
}
// Week column
&.ui-datepicker-week-col {
padding: 6px;
color: @text-muted;
}
// Active day
&.ui-datepicker-current-day .ui-state-active {
background-color: @color-teal-400;
color: #fff;
}
// Today
&.ui-datepicker-today .ui-state-highlight {
background-color: @brand-primary;
color: #fff;
&:after {
content: "";
position: absolute;
top: 3px;
right: 3px;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-left: 6px solid transparent;
}
}
a.ui-priority-secondary {
.opacity(0.6);
}
}
}
// Button panel
.ui-datepicker-buttonpane {
button {
float: right;
border: 1px solid @btn-default-border;
background-color: @btn-default-bg;
font-weight: 400;
margin-top: 5px;
cursor: pointer;
padding: @padding-base-vertical @padding-base-horizontal;
width: auto;
overflow: visible;
outline: 0;
// Hover state
&.ui-state-hover {
.box-shadow(0 0 0 100px fade(#000, 2%) inset);
}
// Current date
&.ui-datepicker-current {
float: left;
}
// Active state
&:active {
.box-shadow(0 0 0 100px fade(#000, 4%) inset);
}
}
}
// Multiple calendars
&.ui-datepicker-multi {
width: auto!important;
}
}
/* # Optional settings
-------------------------------------------------- */
// Inline datepicker
// ------------------------------
.datepicker-inline {
width: 264px;
max-width: 100%;
overflow-x: auto;
.full-width&,
.sidebar & {
width: 100%;
}
}
// Multiple datepickers
// ------------------------------
.ui-datepicker-multi {
.ui-datepicker-group {
float: left;
table {
width: 95%;
margin: 0 8px;
}
}
.ui-datepicker-group-last {
.ui-datepicker-header {
border-left-width: 0;
}
}
.ui-datepicker-buttonpane {
clear: left;
}
}
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 46%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
// Misc
// ------------------------------
// Trigger
.ui-datepicker-trigger {
position: absolute;
top: 4px;
right: 5px;
z-index: 2;
padding: 6px;
cursor: pointer;
}
// Clearfix
.ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0;
}
/* # RTL datepicker
-------------------------------------------------- */
.ui-datepicker-rtl {
direction: rtl;
// Nav buttons
.ui-datepicker-prev {
right: 0;
left: auto;
}
.ui-datepicker-next {
left: 0;
right: auto;
}
// Button panel
.ui-datepicker-buttonpane {
clear: right;
button {
float: left;
&.ui-datepicker-current {
float: right;
}
}
}
// Group
.ui-datepicker-group {
float: right;
}
// Header
.ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px;
}
}