matrix_home_web/bower_components/uikit/scss/components/datepicker.scss

// Name:            Datepicker
// Description:     Defines styles for a datepicker
//
// Component:       `uk-datepicker`
//
// Modifiers:       `uk-datepicker-nav`
//                  `uk-datepicker-previous`
//                  `uk-datepicker-next`
//                  `uk-datepicker-heading`
//                  `uk-datepicker-table`
//                  `uk-datepicker-table-muted`
//
// ========================================================================


// Variables
// ========================================================================

$datepicker-z-index:                             1050 !default;
$datepicker-animation:                           uk-fade !default;

$datepicker-nav-height:                          20px !default;
$datepicker-nav-margin-bottom:                   15px !default;
$datepicker-nav-color:                           #444 !default;
$datepicker-nav-hover-color:                     #444 !default;
$datepicker-previous-icon:                       "\f053" !default;
$datepicker-next-icon:                           "\f054" !default;

$datepicker-table-width:                         26px !default;
$datepicker-table-height:                        24px !default;
$datepicker-table-color:                         #444 !default;

$datepicker-table-hover-background:              #ddd !default;
$datepicker-table-hover-color:                   #444 !default;
$datepicker-table-onclick-background:            #ccc !default;
$datepicker-table-onclick-color:                 #444 !default;

$datepicker-table-active-background:             #00a8e6 !default;
$datepicker-table-active-color:                  #fff !default;

$datepicker-table-muted-color:                   #999 !default;


/* ========================================================================
   Component: Datepicker
 ========================================================================== */

/*
 * 1. Highest z-index
 * 2. Reset dropdown width
 * 3. Set animation
 * 4. Needed for scale animation
 */

.uk-datepicker {
    /* 1 */
    z-index: $datepicker-z-index;
    /* 2 */
    width: auto;
    /* 3 */
    -webkit-animation: $datepicker-animation 0.2s ease-in-out;
    animation: $datepicker-animation 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: $datepicker-nav-margin-bottom;
    text-align: center;
    line-height: $datepicker-nav-height;
    @include hook-datepicker-nav();
}

/*
 * Micro clearfix
 */

.uk-datepicker-nav:before,
.uk-datepicker-nav:after {
    content: "";
    display: table;
}

.uk-datepicker-nav:after { clear: both; }

/*
 * Previous and next navigation
 */

.uk-datepicker-nav a {
    color: $datepicker-nav-color;
    text-decoration: none;
    @include hook-datepicker-nav-item();
}

.uk-datepicker-nav a:hover { color: $datepicker-nav-hover-color; }

.uk-datepicker-previous { float: left; }
.uk-datepicker-next { float: right; }

.uk-datepicker-previous:after,
.uk-datepicker-next:after {
    width: $datepicker-nav-height;
    font-family: FontAwesome;
}

.uk-datepicker-previous:after { content: $datepicker-previous-icon; }
.uk-datepicker-next:after { content: $datepicker-next-icon; }


/* Sub-object: `uk-datepicker-heading`
========================================================================== */

.uk-datepicker-heading {}


/* Sub-object: `uk-datepicker-table`
========================================================================== */

/* Block element behavior */
.uk-datepicker-table { width: 100%; }

.uk-datepicker-table th,
.uk-datepicker-table td { padding: 2px; }

.uk-datepicker-table th { font-size: 12px; }

/*
 * Item
 */

.uk-datepicker-table a {
    display: block;
    width: $datepicker-table-width;
    line-height: $datepicker-table-height;
    text-align: center;
    color: $datepicker-table-color;
    text-decoration: none;
    @include hook-datepicker-table-item();
}

/*
 * Sub-object: `uk-datepicker-table-muted`
 */

a.uk-datepicker-table-muted { color: $datepicker-table-muted-color; }

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */

.uk-datepicker-table a:hover,
.uk-datepicker-table a:focus { // 1
    background-color: $datepicker-table-hover-background;
    color: $datepicker-table-hover-color;
    /* 2 */
    outline: none;
    @include hook-datepicker-table-item-hover();
}

/* OnClick */
.uk-datepicker-table a:active {
    background-color: $datepicker-table-onclick-background;
    color: $datepicker-table-onclick-color;
    @include hook-datepicker-table-item-onclick();
}

/*
 * Active
 */

.uk-datepicker-table a.uk-active {
    background: $datepicker-table-active-background;
    color: $datepicker-table-active-color;
    @include hook-datepicker-table-item-active();
}


// Hooks
// ========================================================================

@include hook-datepicker-misc();

// @mixin hook-datepicker-nav(){}
// @mixin hook-datepicker-nav-item(){}
// @mixin hook-datepicker-table-item(){}
// @mixin hook-datepicker-table-item-hover(){}
// @mixin hook-datepicker-table-item-onclick(){}
// @mixin hook-datepicker-table-item-active(){}
// @mixin hook-datepicker-misc(){}