%PDF- %PDF-
Direktori : /home/jalalj2hb/public_html/ftm-admin/bower_components/uikit/less/components/ |
Current File : /home/jalalj2hb/public_html/ftm-admin/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() {}