You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
512 lines
10 KiB
512 lines
10 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # Daterange picker
|
||
|
|
*
|
||
|
|
* Date range picker component for Bootstrap
|
||
|
|
*
|
||
|
|
* Version: 1.2
|
||
|
|
* Latest update: Mar 10, 2016
|
||
|
|
*
|
||
|
|
* ---------------------------------------------------------------------------- */
|
||
|
|
|
||
|
|
|
||
|
|
// Core
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
.daterangepicker {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
margin-top: 5px;
|
||
|
|
width: auto;
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
// Override default dropdown styles
|
||
|
|
&.dropdown-menu {
|
||
|
|
max-width: none;
|
||
|
|
background-color: transparent;
|
||
|
|
border: 0;
|
||
|
|
z-index: @zindex-dropdown;
|
||
|
|
.box-shadow(none);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Dropup
|
||
|
|
&.dropup {
|
||
|
|
margin-top: -(@list-spacing);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Align containers
|
||
|
|
.ranges,
|
||
|
|
.calendar {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Display calendars on left side
|
||
|
|
&.opensleft {
|
||
|
|
.calendars {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Display calendars on right side
|
||
|
|
&.opensright {
|
||
|
|
.calendars {
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// And remove floats in single picker
|
||
|
|
&.single {
|
||
|
|
.calendar {
|
||
|
|
float: none;
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hide range menu
|
||
|
|
.ranges {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Display calendars
|
||
|
|
&.show-calendar .calendar {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Calendar
|
||
|
|
.calendar {
|
||
|
|
display: none;
|
||
|
|
background-color: @dropdown-bg;
|
||
|
|
border: 1px solid @dropdown-border;
|
||
|
|
border-radius: @border-radius-base;
|
||
|
|
margin: @list-spacing;
|
||
|
|
padding: (@list-spacing * 2);
|
||
|
|
.box-shadow(0 1px 3px fade(#000, 10%));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Table
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
.daterangepicker {
|
||
|
|
|
||
|
|
// Table defaults
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
tbody {
|
||
|
|
th,
|
||
|
|
td {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Cells
|
||
|
|
th,
|
||
|
|
td {
|
||
|
|
white-space: nowrap;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
&.week {
|
||
|
|
font-size: 80%;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Header
|
||
|
|
th {
|
||
|
|
color: @text-muted;
|
||
|
|
font-weight: normal;
|
||
|
|
font-size: @font-size-small;
|
||
|
|
|
||
|
|
// Icons
|
||
|
|
> i {
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Arrow buttons
|
||
|
|
&.prev,
|
||
|
|
&.next {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Available dates
|
||
|
|
&.available {
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
color: @text-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Table content cells
|
||
|
|
td {
|
||
|
|
|
||
|
|
// Available days
|
||
|
|
&.available {
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
background-color: @dropdown-link-hover-bg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Inactive days
|
||
|
|
&.off,
|
||
|
|
&.disabled {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Disabled days
|
||
|
|
&.disabled {
|
||
|
|
cursor: @cursor-disabled;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Highlight dates in range
|
||
|
|
&.in-range {
|
||
|
|
background-color: @dropdown-link-hover-bg;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Active date
|
||
|
|
&.active {
|
||
|
|
&,
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
background-color: @color-teal-400;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: @border-radius-base;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Override default condensed styles
|
||
|
|
.table-condensed {
|
||
|
|
tr > th,
|
||
|
|
tr > td {
|
||
|
|
padding: @padding-xs-horizontal;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add extra top padding to day names
|
||
|
|
thead tr:last-child th {
|
||
|
|
padding-top: (@list-spacing * 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Month heading
|
||
|
|
.month {
|
||
|
|
font-size: @font-size-h6;
|
||
|
|
line-height: 1;
|
||
|
|
color: @text-color;
|
||
|
|
padding-top: @content-padding-base;
|
||
|
|
padding-bottom: @content-padding-base;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Elements
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
.daterangepicker {
|
||
|
|
|
||
|
|
// Selects
|
||
|
|
select {
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
&.monthselect {
|
||
|
|
margin-right: 2%;
|
||
|
|
width: 56%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.yearselect {
|
||
|
|
width: 40%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hourselect,
|
||
|
|
&.minuteselect,
|
||
|
|
&.secondselect,
|
||
|
|
&.ampmselect {
|
||
|
|
width: 60px;
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Text inputs
|
||
|
|
.daterangepicker_input {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
// Calendar icons
|
||
|
|
i {
|
||
|
|
position: absolute;
|
||
|
|
right: @padding-small-horizontal;
|
||
|
|
top: auto;
|
||
|
|
bottom: ((@input-height-base - @icon-font-size) / 2);
|
||
|
|
color: @text-muted;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add right padding for inputs
|
||
|
|
input {
|
||
|
|
padding-left: @padding-small-horizontal;
|
||
|
|
padding-right: (@padding-small-horizontal + @icon-font-size + @padding-base-vertical);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Time picker
|
||
|
|
.calendar-time {
|
||
|
|
text-align: center;
|
||
|
|
margin: @padding-base-horizontal 0;
|
||
|
|
|
||
|
|
// Disabled state
|
||
|
|
select.disabled {
|
||
|
|
color: #ccc;
|
||
|
|
cursor: @cursor-disabled;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Ranges dropdown
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
.ranges {
|
||
|
|
background-color: @dropdown-bg;
|
||
|
|
position: relative;
|
||
|
|
border: 1px solid @dropdown-border;
|
||
|
|
border-radius: @border-radius-base;
|
||
|
|
width: 200px;
|
||
|
|
margin-top: @list-spacing;
|
||
|
|
.box-shadow(0 1px 3px fade(#000, 10%));
|
||
|
|
|
||
|
|
// Remove left margin if on right side
|
||
|
|
.opensright & {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Remove left margin if on left side
|
||
|
|
.opensleft & {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// List with links
|
||
|
|
ul {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: @list-spacing 0;
|
||
|
|
|
||
|
|
// Add top border
|
||
|
|
& + .daterangepicker-inputs {
|
||
|
|
border-top: 1px solid @dropdown-divider-bg;
|
||
|
|
}
|
||
|
|
|
||
|
|
// List item
|
||
|
|
li {
|
||
|
|
color: @text-color;
|
||
|
|
padding: (@padding-base-vertical + 1) @padding-base-horizontal;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-top: 1px;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hover bg color
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
background-color: @dropdown-link-hover-bg;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Active item color
|
||
|
|
&.active {
|
||
|
|
color: @dropdown-link-active-color;
|
||
|
|
background-color: @color-teal-400;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Text inputs
|
||
|
|
.daterangepicker-inputs {
|
||
|
|
padding: @padding-base-horizontal;
|
||
|
|
padding-top: @padding-base-horizontal + @list-spacing; // we need to match menu vertical spacing
|
||
|
|
|
||
|
|
// Inputs container
|
||
|
|
.daterangepicker_input {
|
||
|
|
|
||
|
|
// Add top margin to the second field
|
||
|
|
& + .daterangepicker_input {
|
||
|
|
margin-top: @padding-base-horizontal + @list-spacing;;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Text label
|
||
|
|
> span {
|
||
|
|
display: block;
|
||
|
|
font-size: @font-size-small;
|
||
|
|
margin-bottom: @padding-base-vertical;
|
||
|
|
color: @text-muted;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add top divider
|
||
|
|
& + .range_inputs {
|
||
|
|
border-top: 1px solid @dropdown-divider-bg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Buttons area
|
||
|
|
.range_inputs {
|
||
|
|
padding: @padding-base-horizontal;
|
||
|
|
|
||
|
|
// Buttons
|
||
|
|
.btn {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.btn + .btn {
|
||
|
|
margin-top: @padding-base-horizontal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Setup mobile view
|
||
|
|
@media (min-width: @screen-sm) {
|
||
|
|
margin: @list-spacing;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Custom ranges layout
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Container
|
||
|
|
.daterange-custom {
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
// Clearing floats
|
||
|
|
&:after {
|
||
|
|
content: '';
|
||
|
|
display: table;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Labels and badges
|
||
|
|
.label,
|
||
|
|
.badge {
|
||
|
|
margin: 4px 0 0 @element-horizontal-spacing;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
.label-icon {
|
||
|
|
margin-top: 0;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Layout
|
||
|
|
.daterange-custom-display {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
padding-left: (@icon-font-size + 5);
|
||
|
|
line-height: 1;
|
||
|
|
|
||
|
|
// Arrow icon
|
||
|
|
&:after {
|
||
|
|
content: '\e9c9';
|
||
|
|
font-family: 'icomoon';
|
||
|
|
display: inline-block;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 0;
|
||
|
|
margin-top: -(@icon-font-size / 2);
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
.transition(all ease-in-out 0.2s);
|
||
|
|
|
||
|
|
// Rotate if open/closed
|
||
|
|
.daterange-custom.is-opened & {
|
||
|
|
.rotate(180deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Date number
|
||
|
|
> i {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
letter-spacing: @heading-letter-spacing;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Date details
|
||
|
|
b {
|
||
|
|
display: inline-block;
|
||
|
|
margin-left: 4px;
|
||
|
|
font-weight: 400;
|
||
|
|
|
||
|
|
// Month/year
|
||
|
|
> i {
|
||
|
|
font-size: @font-size-mini;
|
||
|
|
display: block;
|
||
|
|
line-height: @font-size-small;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Line divider
|
||
|
|
em {
|
||
|
|
line-height: 30px;
|
||
|
|
vertical-align: top;
|
||
|
|
margin: 0 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Setup mobile view
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
@media (max-width: @screen-sm) {
|
||
|
|
|
||
|
|
// Layout
|
||
|
|
.opensleft,
|
||
|
|
.opensright {
|
||
|
|
left: 0!important;
|
||
|
|
right: 0;
|
||
|
|
|
||
|
|
// Stack calendars container
|
||
|
|
.calendars {
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Stack elements
|
||
|
|
.daterangepicker& {
|
||
|
|
.ranges,
|
||
|
|
.calendar,
|
||
|
|
.calendars {
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Elements
|
||
|
|
.daterangepicker {
|
||
|
|
width: 100%;
|
||
|
|
padding-left: @grid-gutter-width;
|
||
|
|
padding-right: @grid-gutter-width;
|
||
|
|
|
||
|
|
// Remove side margin from calendars
|
||
|
|
.calendar {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Make ranges full width
|
||
|
|
.ranges {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|