/* ------------------------------------------------------------------------------
*
* # Daterange picker
*
* Date range picker component for Bootstrap
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// 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 {
.ranges,
.calendar {
float: 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);
}
}
// 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;
min-width: (@icon-font-size + (@padding-xs-horizontal * 2));
// Icons
> i {
top: 0;
color: @color-grey-400;
}
// Arrow buttons
&.prev,
&.next {
cursor: pointer;
}
// Available dates
&.available {
&:hover,
&:focus {
> i {
color: @text-color;
}
}
}
}
// Table content cells
td {
&.available {
&:hover,
&:focus {
background-color: @dropdown-link-hover-bg;
}
}
&.off,
&.disabled {
color: #ccc;
}
&.disabled {
cursor: @cursor-disabled;
}
// Highlight dates in range
&.in-range {
background-color: @dropdown-link-hover-bg;
&:not(.active) + .available:not(.in-range) {
//background-color: @dropdown-link-hover-bg;
}
}
// Active date
&.active {
&,
&:hover,
&:focus {
background-color: @color-teal-400;
color: #fff;
border-radius: @border-radius-small;
}
}
}
// Override default condensed styles
.table-condensed {
tr > th,
tr > td {
padding: @padding-xs-horizontal;
line-height: 1;
}
// 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;
margin-bottom: 0;
display: inline-block;
}
}
// Text inputs
.daterangepicker_input {
position: relative;
// Calendar icons
i {
position: absolute;
right: @padding-base-horizontal;
top: auto;
bottom: ((@icon-font-size / 2) + 2); // half icon size + borders
color: @text-muted;
}
// Add right padding for inputs
.form-control {
padding-right: (@padding-base-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;
// 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%;
}
}
}