/* ------------------------------------------------------------------------------
*
* # Anytime picker
*
* jQuery datepicker/timepicker and a Date/String parse/format utility
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ------------------------------
// Base
.AnyTime-pkr {
text-align: center;
* {
margin: 0;
padding: 0;
list-style: none;
}
.AnyTime-date {
float: left;
& + .AnyTime-time {
margin-left: 50px;
float: left;
}
}
}
// Dropdown container
.AnyTime-win {
padding: @list-spacing;
background-color: @dropdown-bg;
border: 1px solid @dropdown-border;
display: inline-block;
border-radius: @border-radius-base;
z-index: 10;
}
// Clock
.AnyTime-cloak {
position: absolute;
.opacity(0.7);
}
// Title
.AnyTime-hdr {
font-size: @font-size-h6;
margin: 15px 10px;
line-height: 1;
}
// Close button
.AnyTime-x-btn {
font-size: 0;
cursor: pointer;
float: right;
border-radius: @border-radius-small;
.opacity(0.6);
&:hover {
.opacity(1);
}
// Icon
&:after {
content: '\ed6b';
font-family: 'icomoon';
font-size: @icon-font-size;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
// Label
.AnyTime-lbl {
font-size: @font-size-base;
margin-bottom: 10px;
font-weight: 500;
margin-top: 25px;
&:first-child {
margin-top: 5px;
}
}
// Highlight item colors
// ------------------------------
// Years
.AnyTime-yrs {
.ui-state-highlight {
&,
&:hover {
background-color: @brand-danger;
color: #fff;
}
}
}
// Months
.AnyTime-mons {
.ui-state-highlight {
&,
&:hover {
background-color: @color-teal-400;
color: #fff;
}
}
}
// Time
.AnyTime-time {
.ui-state-highlight {
&,
&:hover {
background-color: @color-slate-500;
color: #fff;
}
}
}
// Calendar
.AnyTime-dom-table,
.AnyTime-body-yr-selector {
.ui-state-highlight {
&,
&:hover {
background-color: @brand-primary;
color: #fff;
}
}
}
// Periods
// ------------------------------
// Years
.AnyTime-yrs-past-btn,
.AnyTime-yrs-ahead-btn {
display: inline-block;
}
.AnyTime-yr-prior-btn,
.AnyTime-yr-cur-btn,
.AnyTime-yr-next-btn {
display: inline-block;
min-width: 50px;
}
// Months
.AnyTime-mons:after {
content: "";
display: table;
clear: both;
}
// Date calendar
// ------------------------------
// Table
.AnyTime-dom-table {
width: 100%;
}
// Week days
.AnyTime-pkr th.AnyTime-dow {
color: @text-muted;
font-size: @font-size-small;
padding: @padding-base-vertical;
font-weight: 400;
}
// Buttons
.AnyTime-mon-btn {
float: left;
}
.AnyTime-mon7-btn {
clear: left;
}
.AnyTime-dom-btn:hover {
background-color: @dropdown-link-hover-bg;
}
.AnyTime-dom-btn-empty {
display: none;
}
// Make elements inline
.AnyTime-time,
.AnyTime-hrs-am,
.AnyTime-hrs-pm,
.AnyTime-mins-tens,
.AnyTime-mins-ones,
.AnyTime-secs-tens,
.AnyTime-secs-ones,
.AnyTime-hrs,
.AnyTime-mins,
.AnyTime-secs,
.AnyTime-offs {
display: inline-block;
}
// Button
.AnyTime-btn {
padding: @padding-base-vertical @padding-base-horizontal;
cursor: pointer;
border-radius: @border-radius-small;
&:hover {
background-color: @dropdown-link-hover-bg;
}
}
// Time
// ------------------------------
// Time buttons
.AnyTime-hr-btn,
.AnyTime-min-ten-btn,
.AnyTime-min-one-btn,
.AnyTime-sec-ten-btn,
.AnyTime-sec-one-btn {
min-width: 40px;
}
.AnyTime-hrs-pm,
.AnyTime-mins-ones,
.AnyTime-secs-ones {
margin-left: 2px;
}
.AnyTime-mins-tens,
.AnyTime-secs-tens {
margin-left: 20px;
}
// Off buttons
.AnyTime-off-cur-btn {
display: inline-block;
overflow: hidden;
}
.AnyTime-off-select-btn {
display: inline-block;
vertical-align: top;
}
.AnyTime-off-selector {
margin: 10px;
position: absolute;
}
.AnyTime-body-off-selector {
margin: 0;
overflow-x: hidden;
overflow-y: auto;
white-space: nowrap
}
.AnyTime-off-off-btn {
text-align: left;
}
// Year and era
// ------------------------------
// Year selector
.AnyTime-yr-selector {
position: absolute;
width: 90%;
}
.AnyTime-body-yr-selector {
margin: 0;
}
.AnyTime-yr-mil,
.AnyTime-yr-cent,
.AnyTime-yr-dec,
.AnyTime-yr-yr,
.AnyTime-yr-era {
display: inline-block;
vertical-align: top;
width: 20%;
}
// Era button
.AnyTime-era-btn {
margin-left: 10px;
}
// Media queries
@media (max-width: @screen-sm) {
.AnyTime-pkr .AnyTime-date {
float: none;
}
.AnyTime-mon-btn {
float: none;
display: inline-block;
}
.AnyTime-date + .AnyTime-time {
margin-left: 0;
margin-top: 25px;
float: none;
}
}