matrix_home_web/bower_components/uikit/less/components/datepicker.less

// 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;
@datepicker-animation:                          uk-fade;

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

@datepicker-table-width:                        26px;
@datepicker-table-height:                       24px;
@datepicker-table-color:                        #444;

@datepicker-table-hover-background:             #ddd;
@datepicker-table-hover-color:                  #444;
@datepicker-table-onclick-background:           #ccc;
@datepicker-table-onclick-color:                #444;

@datepicker-table-active-background:            #00a8e6;
@datepicker-table-active-color:                 #fff;

@datepicker-table-muted-color:                  #999;


/* ========================================================================
   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;
    .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;
    .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;
    .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;
    .hook-datepicker-table-item-hover;
}

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

/*
 * Active
 */

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


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

.hook-datepicker-misc;

.hook-datepicker-nav() {}
.hook-datepicker-nav-item() {}
.hook-datepicker-table-item() {}
.hook-datepicker-table-item-hover() {}
.hook-datepicker-table-item-onclick() {}
.hook-datepicker-table-item-active() {}
.hook-datepicker-misc() {}