first commit
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Anytime picker
|
||||
*
|
||||
* jQuery datepicker/timepicker and a Date/String parse/format utility
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// 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 * 2);
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
display: inline-block;
|
||||
border-radius: @border-radius-base;
|
||||
z-index: 10;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
}
|
||||
|
||||
// Clock
|
||||
.AnyTime-cloak {
|
||||
position: absolute;
|
||||
.opacity(0.7);
|
||||
}
|
||||
|
||||
// Title
|
||||
.AnyTime-hdr {
|
||||
font-size: @font-size-h6;
|
||||
margin: @content-padding-base @content-padding-small;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.AnyTime-x-btn {
|
||||
display: none;
|
||||
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: @list-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Highlight item colors
|
||||
// ------------------------------
|
||||
|
||||
// Empty buttons in the table
|
||||
.AnyTime-dom-btn-empty,
|
||||
.AnyTime-min-ten-btn-empty,
|
||||
.AnyTime-min-one-btn-empty,
|
||||
.AnyTime-sec-ten-btn-empty,
|
||||
.AnyTime-sec-one-btn-empty {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #fff;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Years
|
||||
.AnyTime-yrs {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @brand-danger;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Months
|
||||
.AnyTime-mons {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time
|
||||
.AnyTime-time {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @color-slate-500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.AnyTime-dom-table,
|
||||
.AnyTime-body-yr-selector {
|
||||
.AnyTime-cur-btn {
|
||||
&,
|
||||
&: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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user