first commit
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Picker base
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Jul 5, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Picker base
|
||||
.picker {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
z-index: 990;
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
// Input element
|
||||
.picker__input {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// The base of the picker
|
||||
.picker__holder {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: @dropdown-bg;
|
||||
border: 1px solid @dropdown-border;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
max-width: 290px;
|
||||
max-height: 0;
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
// When the picker opens
|
||||
.picker--opened & {
|
||||
max-height: 480px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Date picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Picker box
|
||||
.picker__box {
|
||||
padding: (@list-spacing * 2);
|
||||
}
|
||||
|
||||
// Header
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: @font-size-h6;
|
||||
line-height: 1;
|
||||
padding-top: @content-padding-base;
|
||||
padding-bottom: @content-padding-base;
|
||||
}
|
||||
|
||||
|
||||
// Selectors
|
||||
// ------------------------------
|
||||
|
||||
// Month and year labels
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.picker__year {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
// Month and year selectors
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
border-color: @input-border;
|
||||
height: @input-height-mini;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-small;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
outline: 0;
|
||||
}
|
||||
.picker__select--month {
|
||||
width: 35%;
|
||||
}
|
||||
.picker__select--year {
|
||||
width: 22.5%;
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
// ------------------------------
|
||||
|
||||
// Navigation buttons
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: (@icon-font-size / 2);
|
||||
top: 50%;
|
||||
margin-top: -(@icon-font-size);
|
||||
border-radius: @border-radius-small;
|
||||
line-height: 1;
|
||||
|
||||
&:before {
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
font-size: @icon-font-size;
|
||||
width: @icon-font-size;
|
||||
text-align: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Previous button
|
||||
.picker__nav--prev {
|
||||
left: 0;
|
||||
|
||||
&:before {
|
||||
content: '\e9c8';
|
||||
}
|
||||
}
|
||||
|
||||
// Next button
|
||||
.picker__nav--next {
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
content: '\e9cb'
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.picker__nav--disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:before,
|
||||
&:before:hover {
|
||||
cursor: default;
|
||||
background: none;
|
||||
border-right-color: #f5f5f5;
|
||||
border-left-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tables
|
||||
// ------------------------------
|
||||
|
||||
// Calendar table of dates
|
||||
.picker__table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
font-size: inherit;
|
||||
width: 100%;
|
||||
margin-bottom: (@list-spacing * 2);
|
||||
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Weekday labels
|
||||
.picker__weekday {
|
||||
width: 14.285714286%;
|
||||
font-size: @font-size-small;
|
||||
text-align: center;
|
||||
padding-bottom: @content-padding-small;
|
||||
padding-top: (@list-spacing * 2);
|
||||
color: @text-muted;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Days on the calendar
|
||||
.picker__day {
|
||||
padding: @padding-base-vertical;
|
||||
}
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid @color-teal-400;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// States
|
||||
// ------------------------------
|
||||
|
||||
// Date focus
|
||||
.picker__day--outfocus {
|
||||
color: #ccc;
|
||||
}
|
||||
.picker__day--infocus:hover,
|
||||
.picker__day--outfocus:hover {
|
||||
cursor: pointer;
|
||||
color: @text-color;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
// Highlighted date
|
||||
.picker__day--highlighted:before {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.picker__day--highlighted,
|
||||
.picker__day--selected {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.picker__day--highlighted,
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused .picker__day--selected {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Disabled date
|
||||
.picker__day--disabled {
|
||||
&,
|
||||
&:hover {
|
||||
background: #fafafa;
|
||||
color: @text-muted;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top-color: #999;
|
||||
}
|
||||
|
||||
.picker__day--highlighted & {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Footer
|
||||
// ------------------------------
|
||||
|
||||
// Contains the "today" and "clear" buttons
|
||||
.picker__footer {
|
||||
text-align: center;
|
||||
|
||||
// Footer buttons
|
||||
button {
|
||||
border: 0;
|
||||
background: #fff;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
border-radius: @border-radius-base;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.picker__button--today:before {
|
||||
content: '';
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -1px;
|
||||
width: 0;
|
||||
border-top: 6px solid @brand-primary;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
.picker__button--close:before {
|
||||
content: '\D7';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
top: 1px;
|
||||
line-height: 1;
|
||||
font-size: @icon-font-size;
|
||||
}
|
||||
.picker__button--clear:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
width: 8px;
|
||||
margin-right: 5px;
|
||||
border-top: 2px solid @brand-danger;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pick-a-date - Time picker
|
||||
*
|
||||
* The mobile-friendly, responsive, and lightweight jQuery date & time input picker
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// ------------------------------
|
||||
|
||||
// Container size
|
||||
.picker--time {
|
||||
min-width: 256px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
// Remove padding from picker box
|
||||
.picker--time .picker__box {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// List of items
|
||||
// ------------------------------
|
||||
|
||||
// Items list
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: @list-spacing 0;
|
||||
margin: 0;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// The times on the clock.
|
||||
.picker__list-item {
|
||||
position: relative;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// The clear button
|
||||
.picker--time .picker__button--clear {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
background-color: @btn-default-bg;
|
||||
margin-top: 1px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
text-align: center;
|
||||
margin-bottom: -(@list-spacing);
|
||||
margin-top: @list-spacing;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// States
|
||||
// ------------------------------
|
||||
|
||||
// Highlighted and hovered/focused time
|
||||
.picker__list-item--highlighted {
|
||||
z-index: 10;
|
||||
}
|
||||
.picker__list-item--highlighted,
|
||||
.picker__list-item--highlighted:hover,
|
||||
.picker--focused .picker__list-item--highlighted {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background-color: @color-teal-400;
|
||||
}
|
||||
|
||||
// Selected and hovered/focused time
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
background-color: @color-teal-400;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Disabled time
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
background-color: #fafafa;
|
||||
color: @text-muted;
|
||||
cursor: @cursor-disabled;
|
||||
z-index: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user