.tribe-ui-datepicker.ui-datepicker { body, button, input, select, textarea { font-family: "Verdana", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } table { border: none; } } .tribe-ui-datepicker .ui-datepicker-month { font-weight: bold; } /* Interaction Cues ----------------------------------*/ .tribe-ui-datepicker .ui-state-disabled { cursor: default !important; pointer-events: none; } /* Icons ----------------------------------*/ .tribe-ui-datepicker.ui-datepicker { .ui-datepicker-group span.ui-icon { display: inline-block; vertical-align: middle; margin-top: -.25rem; position: relative; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; background-image: none; } } .tribe-ui-datepicker .ui-widget-icon-block { left: 50%; margin-left: -8px; display: block; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .tribe-ui-datepicker.ui-datepicker { background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,.5); width: 17em; padding: 1em; display: none; } .tribe-ui-datepicker.ui-datepicker .ui-datepicker-header { margin-bottom: 1rem; position: relative; padding: 0; border: 0; background-color: transparent; background-image: none; } .tribe-ui-datepicker.ui-datepicker .ui-datepicker-prev, .tribe-ui-datepicker.ui-datepicker .ui-datepicker-next { position: absolute; top: 50%; transform: translateY(-50%); line-height: 1.8em; text-align: center; } .tribe-ui-datepicker.ui-datepicker .ui-datepicker-prev { &:before { color: #b1b1b1; content: '\2190'; cursor: pointer; } &:hover { &:before { color: #000; } } } .tribe-ui-datepicker.ui-datepicker .ui-datepicker-next { &:before { color: #b1b1b1; content: '\2192'; cursor: pointer; } &:hover { &:before { color: #000; } } } .tribe-ui-datepicker .ui-datepicker-prev-hover, .tribe-ui-datepicker .ui-datepicker-next-hover { color: darken(#b1b1b1, 10%); border: 0; background: none; } .tribe-ui-datepicker.ui-datepicker { .ui-datepicker-prev { left: 1px; } .ui-datepicker-next { right: 1px; } .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker-next-hover { right: 1px; } .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8; text-align: center; } } .tribe-ui-datepicker select.ui-datepicker-month, .tribe-ui-datepicker select.ui-datepicker-year { border: none; box-shadow: 0 1px 0 rgba(0,0,0,0.1); margin-right: 1px; width: 4.5rem; } .tribe-ui-datepicker.ui-datepicker { table { width: 100%; font-size: .9rem; border-collapse: collapse; margin: 0 0 .4rem; } th { color: #b1b1b1; padding: .7rem .3rem; text-align: center; border: 0; } .ui-datepicker-calendar td { border: 1px solid #ddd; padding: 1px; } td.ui-datepicker-unselectable { border: none; } a.ui-state-active { background: #0085ba; color: #fff; } td span, td a { display: block; padding: .5rem .2rem; text-align: center; text-decoration: none; } .ui-datepicker-buttonpane { background-image: none; margin: .7rem 0 0 0; padding: 0 .2rem; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker-buttonpane button { float: right; margin: .5rem .2rem .4rem; cursor: pointer; padding: .2rem .6rem .3rem .6rem; width: auto; overflow: visible; } .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; background: #fff; border: 1px solid #b1b1b1; } button.ui-datepicker-close { background: linear-gradient(354deg, rgba(10,85,160,1.00) 0%, rgba(18,136,235,1.00) 100%); border: 1px solid #0085ba; color: #fff !important; font-weight: 400; } } /* with multiple calendars */ .tribe-ui-datepicker.ui-datepicker.ui-datepicker-multi { width: auto; } .tribe-ui-datepicker.ui-datepicker-multi .ui-datepicker-group { float: left; } .tribe-ui-datepicker.ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4rem; } .tribe-ui-datepicker.ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .tribe-ui-datepicker.ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .tribe-ui-datepicker.ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .tribe-ui-datepicker.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .tribe-ui-datepicker.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .tribe-ui-datepicker.ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .tribe-ui-datepicker .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* Component containers ----------------------------------*/ .tribe-ui-datepicker.ui-widget { font-size: 1.2rem; font-family: inherit; } .tribe-ui-datepicker.ui-widget .ui-widget { font-size: 1rem; } .tribe-ui-datepicker.ui-widget input, .tribe-ui-datepicker.ui-widget select, .tribe-ui-datepicker.ui-widget textarea, .tribe-ui-datepicker.ui-widget button { font-size: 1rem; } .tribe-ui-datepicker.ui-widget-content a, .tribe-ui-datepicker .ui-widget-header a { color: #23282d; } /* Interaction states ----------------------------------*/ .tribe-ui-datepicker .ui-state-default, .tribe-ui-datepicker.ui-widget-content .ui-state-default, .tribe-ui-datepicker .ui-widget-header .ui-state-default, .tribe-ui-datepicker .ui-button, /* We use html here because we need a greater specificity to make sure disabled works properly when clicked or hovered */ html .tribe-ui-datepicker .ui-button.ui-state-disabled:hover, html .tribe-ui-datepicker .ui-button.ui-state-disabled:active { color: #23282d; border: 0; background-color: transparent; background-image: none; } .tribe-ui-datepicker { .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { color: #23282d; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { color: #000; border: 0; background: none; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus { color: #b1b1b1; text-decoration: none; background-color: none; background-image: none; } .ui-visual-focus { box-shadow: 0 0 3px 1px rgb(94, 158, 214); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background: linear-gradient(354deg, rgba(10,85,160,1.00) 0%, rgba(18,136,235,1.00) 100%); color: #fff; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #dddddd; background-color: #1c94c4; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #23282d; text-decoration: none; } } /* Interaction Cues ----------------------------------*/ .tribe-ui-datepicker .ui-state-highlight, .tribe-ui-datepicker.ui-widget-content .ui-state-highlight, .tribe-ui-datepicker .ui-widget-header .ui-state-highlight { background: #ffffff; color: #363636; border: 0; background-image: none; } .tribe-ui-datepicker .ui-state-checked { background: #ffffff; } .tribe-ui-datepicker .ui-state-highlight a, .tribe-ui-datepicker.ui-widget-content .ui-state-highlight a, .tribe-ui-datepicker .ui-widget-header .ui-state-highlight a { color: #363636; } .tribe-ui-datepicker .ui-state-error, .tribe-ui-datepicker.ui-widget-content .ui-state-error, .tribe-ui-datepicker .ui-widget-header .ui-state-error { background: #b81900; color: #ffffff; } .tribe-ui-datepicker .ui-state-error a, .tribe-ui-datepicker.ui-widget-content .ui-state-error a, .tribe-ui-datepicker .ui-widget-header .ui-state-error a { color: #ffffff; } .tribe-ui-datepicker .ui-state-error-text, .tribe-ui-datepicker.ui-widget-content .ui-state-error-text, .tribe-ui-datepicker .ui-widget-header .ui-state-error-text { color: #ffffff; } .tribe-ui-datepicker .ui-priority-secondary, .tribe-ui-datepicker.ui-widget-content .ui-priority-secondary, .tribe-ui-datepicker .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .tribe-ui-datepicker .ui-state-disabled, .tribe-ui-datepicker.ui-widget-content .ui-state-disabled, .tribe-ui-datepicker .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .tribe-ui-datepicker .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Corner radius */ .tribe-ui-datepicker { .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 4px; } } /* Overlays */ .tribe-ui-datepicker { .ui-widget-overlay { background: #666666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat; opacity: .5; filter: Alpha(Opacity=50); /* support: IE8 */ } .ui-widget-shadow { -webkit-box-shadow: -5px -5px 5px #000000; box-shadow: -5px -5px 5px #000000; } .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } } /* RTL support */ .tribe-ui-datepicker.ui-datepicker-rtl { direction: rtl; .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-group { float: right; } .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } }