@mixin absolution-datepicker { .ui-datepicker { border-color: #ffffff; @include single-box-shadow(#282425, 0px, 0px, 5px, false); .ui-datepicker-header { padding: 0.5em 0.2em; border: none; @include border-bottom-radius(0px); @include jquery-ui-background($ui-titlebar-background-color, $ui-titlebar-background, $ui-titlebar-background-type); color: $ui-titlebar-color; .ui-icon { background-image: image-url("#{$ui-images-url}#{$ui-icons-hover}"); } } .ui-datepicker-prev, .ui-datepicker-next { top: 4px; border: 1px solid #000000; cursor: pointer; @include jquery-ui-background(#6a6b6e, linear-gradient(#6a6b6e, #3e3e3e), gradient); color: #ffffff; &:hover { color: $ui-hover-color; border-width: $ui-hover-border-width; border-style: $ui-hover-border-style; border-color: $ui-hover-border-color; @include jquery-ui-background($ui-hover-background-color, $ui-hover-background, gradient); } &:active { color: $ui-active-color; border-color: $ui-active-border-color; @include jquery-ui-background($ui-active-background-color, $ui-active-background, gradient); } } .ui-datepicker-prev .ui-icon { background-position: -96px 0; } .ui-datepicker-next .ui-icon { background-position: -32px 0; } table { .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #eeeeee; background: none; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border-color: $ui-default-border-color; @include border-radius(5px); color: $ui-default-color; @include jquery-ui-background($ui-default-background-color, $ui-default-background, gradient); } .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border-color: $ui-default-border-color; @include border-radius(5px); color: $ui-default-color; @include jquery-ui-background($ui-default-background-color, $ui-default-background, gradient); } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover { border-color: $ui-hover-border-color; @include border-radius(5px); color: $ui-hover-color; @include jquery-ui-background($ui-default-background-color, $ui-hover-background, gradient); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border-color: $ui-active-border-color; @include border-radius(5px); color: $ui-active-color; @include jquery-ui-background($ui-default-background-color, $ui-active-background, gradient); } } .ui-datepicker-prev, .ui-datepicker-prev:hover { left: 4px; } .ui-datepicker-next, .ui-datepicker-next:hover { right: 4px; } .ui-datepicker-prev span, .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; font-weight: normal; } .ui-datepicker-title select { font-size:1em; margin:1px 0; } select.ui-datepicker-month-year {width: 100%;} select.ui-datepicker-month, select.ui-datepicker-year { width: 49%;} table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } td { border: 0; padding: 0px; } td span, td a { display: block; padding: .6em; text-align: center; text-decoration: none; } .ui-datepicker-buttonpane { margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width:auto; } .ui-datepicker-multi .ui-datepicker-group { float:left; } .ui-datepicker-multi .ui-datepicker-group table { width:100%; margin:0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width:50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width:33.4%; } .ui-datepicker-multi-4 .ui-datepicker-group { width:25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; } .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } .ui-datepicker-row-break { clear:both; width:100%; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 4px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 4px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 4px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 4px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; } .ui-datepicker-rtl .ui-datepicker-group { float:right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; } .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; } /* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ .ui-datepicker-cover { position: absolute; /*must have*/ z-index: -1; /*must have*/ filter: mask(); /*must have*/ top: -4px; /*must have*/ left: -4px; /*must have*/ width: 200px; /*must have*/ height: 200px; /*must have*/ } }