/*! UIkit 2.20.3 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ /* ======================================================================== Component: Datepicker ========================================================================== */ /* * 1. Highest z-index * 2. Reset dropdown width * 3. Set animation * 4. Needed for scale animation */ .uk-datepicker { /* 1 */ z-index: 1050; /* 2 */ width: auto; /* 3 */ -webkit-animation: uk-fade 0.2s ease-in-out; animation: uk-fade 0.2s ease-in-out; /* 4 */ -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* Sub-object: `uk-datepicker-nav` ========================================================================== */ .uk-datepicker-nav { margin-bottom: 15px; text-align: center; line-height: 20px; &:before { content: ""; display: table; } &:after { content: ""; display: table; clear: both; } a { color: #444444; text-decoration: none; &:hover { color: #444444; } } } /* * Micro clearfix */ /* * Previous and next navigation */ .uk-datepicker-previous { float: left; } .uk-datepicker-next { float: right; } .uk-datepicker-previous:after, .uk-datepicker-next:after { width: 20px; font-family: FontAwesome; } .uk-datepicker-previous:after { content: "\f053"; } .uk-datepicker-next:after { content: "\f054"; } /* Sub-object: `uk-datepicker-heading` ========================================================================== */ /* Sub-object: `uk-datepicker-table` ========================================================================== */ /* Block element behavior */ .uk-datepicker-table { width: 100%; th, td { padding: 2px; } th { font-size: 12px; } a { display: block; width: 26px; line-height: 24px; text-align: center; color: #444444; text-decoration: none; border: 1px solid transparent; border-radius: 4px; background-origin: border-box; } } /* * Item */ /* * Sub-object: `uk-datepicker-table-muted` */ a.uk-datepicker-table-muted { color: #999999; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-datepicker-table a { &:hover, &:focus { background-color: #fafafa; color: #444444; /* 2 */ outline: none; border-color: rgba(0, 0, 0, 0.2); border-bottom-color: rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 #ffffff; } &:active { background-color: #f5f5f5; color: #444444; border-color: rgba(0, 0, 0, 0.2); border-top-color: rgba(0, 0, 0, 0.3); background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } &.uk-active { background: #009dd8; color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.2); border-bottom-color: rgba(0, 0, 0, 0.4); background-origin: border-box; background-image: -webkit-linear-gradient(top, #00b4f5, #008dc5); background-image: linear-gradient(to bottom, #00b4f5, #008dc5); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); } } /* OnClick */ /* * Active */