diff --git a/web/libs/css/daterangepicker.css b/web/libs/css/daterangepicker.css index 86f4b775..a9638049 100644 --- a/web/libs/css/daterangepicker.css +++ b/web/libs/css/daterangepicker.css @@ -3,267 +3,408 @@ color: inherit; background-color: #fff; border-radius: 4px; + border: 1px solid #ddd; width: 278px; - padding: 4px; - margin-top: 1px; + max-width: none; + padding: 0; + margin-top: 7px; top: 100px; left: 20px; - /* Calendars */ } - .daterangepicker:before, .daterangepicker:after { - position: absolute; - display: inline-block; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; } - .daterangepicker:before { - top: -7px; - border-right: 7px solid transparent; - border-left: 7px solid transparent; - border-bottom: 7px solid #ccc; } - .daterangepicker:after { - top: -6px; - border-right: 6px solid transparent; - border-bottom: 6px solid #fff; - border-left: 6px solid transparent; } - .daterangepicker.opensleft:before { - right: 9px; } - .daterangepicker.opensleft:after { - right: 10px; } - .daterangepicker.openscenter:before { - left: 0; - right: 0; - width: 0; - margin-left: auto; - margin-right: auto; } - .daterangepicker.openscenter:after { - left: 0; - right: 0; - width: 0; - margin-left: auto; - margin-right: auto; } - .daterangepicker.opensright:before { - left: 9px; } - .daterangepicker.opensright:after { - left: 10px; } - .daterangepicker.dropup { - margin-top: -5px; } - .daterangepicker.dropup:before { - top: initial; - bottom: -7px; - border-bottom: initial; - border-top: 7px solid #ccc; } - .daterangepicker.dropup:after { - top: initial; - bottom: -6px; - border-bottom: initial; - border-top: 6px solid #fff; } - .daterangepicker.dropdown-menu { - max-width: none; - z-index: 3001; } - .daterangepicker.single .ranges, .daterangepicker.single .calendar { - float: none; } - .daterangepicker.show-calendar .calendar { - display: block; } - .daterangepicker .calendar { - display: none; - max-width: 270px; - margin: 4px; } - .daterangepicker .calendar.single .calendar-table { - border: none; } - .daterangepicker .calendar th, .daterangepicker .calendar td { - white-space: nowrap; - text-align: center; - min-width: 32px; } - .daterangepicker .calendar-table { - border: 1px solid #fff; - padding: 4px; - border-radius: 4px; - background-color: #fff; } - .daterangepicker table { - width: 100%; - margin: 0; } - .daterangepicker td, .daterangepicker th { - text-align: center; - width: 20px; - height: 20px; - border-radius: 4px; - border: 1px solid transparent; - white-space: nowrap; - cursor: pointer; } - .daterangepicker td.available:hover, .daterangepicker th.available:hover { - background-color: #eee; - border-color: transparent; - color: inherit; } - .daterangepicker td.week, .daterangepicker th.week { - font-size: 80%; - color: #ccc; } - .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { - background-color: #fff; - border-color: transparent; - color: #999; } - .daterangepicker td.in-range { - background-color: #ebf4f8; - border-color: transparent; - color: #000; - border-radius: 0; } - .daterangepicker td.start-date { - border-radius: 4px 0 0 4px; } - .daterangepicker td.end-date { - border-radius: 0 4px 4px 0; } - .daterangepicker td.start-date.end-date { - border-radius: 4px; } - .daterangepicker td.active, .daterangepicker td.active:hover { - background-color: #357ebd; - border-color: transparent; - color: #fff; } - .daterangepicker th.month { - width: auto; } - .daterangepicker td.disabled, .daterangepicker option.disabled { - color: #999; - cursor: not-allowed; - text-decoration: line-through; } - .daterangepicker select.monthselect, .daterangepicker select.yearselect { - font-size: 12px; - padding: 1px; - height: auto; - margin: 0; - cursor: default; } - .daterangepicker select.monthselect { - margin-right: 2%; - width: 56%; } - .daterangepicker select.yearselect { - width: 40%; } - .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { - width: 50px; - margin-bottom: 0; } - .daterangepicker .input-mini { - border: 1px solid #ccc; - border-radius: 4px; - color: #555; - height: 30px; - line-height: 30px; - display: block; - vertical-align: middle; - margin: 0 0 5px 0; - padding: 0 6px 0 28px; - width: 100%; } - .daterangepicker .input-mini.active { - border: 1px solid #08c; - border-radius: 4px; } - .daterangepicker .daterangepicker_input { - position: relative; } - .daterangepicker .daterangepicker_input i { - position: absolute; - left: 8px; - top: 8px; } - .daterangepicker.rtl .input-mini { - padding-right: 28px; - padding-left: 6px; } - .daterangepicker.rtl .daterangepicker_input i { - left: auto; - right: 8px; } - .daterangepicker .calendar-time { - text-align: center; - margin: 5px auto; - line-height: 30px; - position: relative; - padding-left: 28px; } - .daterangepicker .calendar-time select.disabled { - color: #ccc; - cursor: not-allowed; } + z-index: 3001; + display: none; + font-family: arial; + font-size: 15px; + line-height: 1em; +} -.ranges { - font-size: 11px; +.daterangepicker:before, .daterangepicker:after { + position: absolute; + display: inline-block; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.daterangepicker:before { + top: -7px; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + border-bottom: 7px solid #ccc; +} + +.daterangepicker:after { + top: -6px; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + border-left: 6px solid transparent; +} + +.daterangepicker.opensleft:before { + right: 9px; +} + +.daterangepicker.opensleft:after { + right: 10px; +} + +.daterangepicker.openscenter:before { + left: 0; + right: 0; + width: 0; + margin-left: auto; + margin-right: auto; +} + +.daterangepicker.openscenter:after { + left: 0; + right: 0; + width: 0; + margin-left: auto; + margin-right: auto; +} + +.daterangepicker.opensright:before { + left: 9px; +} + +.daterangepicker.opensright:after { + left: 10px; +} + +.daterangepicker.drop-up { + margin-top: -7px; +} + +.daterangepicker.drop-up:before { + top: initial; + bottom: -7px; + border-bottom: initial; + border-top: 7px solid #ccc; +} + +.daterangepicker.drop-up:after { + top: initial; + bottom: -6px; + border-bottom: initial; + border-top: 6px solid #fff; +} + +.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar { float: none; - margin: 4px; - text-align: left; } - .ranges ul { - list-style: none; - margin: 0 auto; - padding: 0; - width: 100%; } - .ranges li { - font-size: 13px; - background-color: #f5f5f5; - border: 1px solid #f5f5f5; - border-radius: 4px; - color: #08c; - padding: 3px 12px; - margin-bottom: 8px; - cursor: pointer; } - .ranges li:hover { - background-color: #08c; - border: 1px solid #08c; - color: #fff; } - .ranges li.active { - background-color: #08c; - border: 1px solid #08c; - color: #fff; } +} + +.daterangepicker.single .drp-selected { + display: none; +} + +.daterangepicker.show-calendar .drp-calendar { + display: block; +} + +.daterangepicker.show-calendar .drp-buttons { + display: block; +} + +.daterangepicker.auto-apply .drp-buttons { + display: none; +} + +.daterangepicker .drp-calendar { + display: none; + max-width: 270px; +} + +.daterangepicker .drp-calendar.left { + padding: 8px 0 8px 8px; +} + +.daterangepicker .drp-calendar.right { + padding: 8px; +} + +.daterangepicker .drp-calendar.single .calendar-table { + border: none; +} + +.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { + color: #fff; + border: solid black; + border-width: 0 2px 2px 0; + border-radius: 0; + display: inline-block; + padding: 3px; +} + +.daterangepicker .calendar-table .next span { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); +} + +.daterangepicker .calendar-table .prev span { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); +} + +.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { + white-space: nowrap; + text-align: center; + vertical-align: middle; + min-width: 32px; + width: 32px; + height: 24px; + line-height: 24px; + font-size: 12px; + border-radius: 4px; + border: 1px solid transparent; + white-space: nowrap; + cursor: pointer; +} + +.daterangepicker .calendar-table { + border: 1px solid #fff; + border-radius: 4px; + background-color: #fff; +} + +.daterangepicker .calendar-table table { + width: 100%; + margin: 0; + border-spacing: 0; + border-collapse: collapse; +} + +.daterangepicker td.available:hover, .daterangepicker th.available:hover { + background-color: #eee; + border-color: transparent; + color: inherit; +} + +.daterangepicker td.week, .daterangepicker th.week { + font-size: 80%; + color: #ccc; +} + +.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { + background-color: #fff; + border-color: transparent; + color: #999; +} + +.daterangepicker td.in-range { + background-color: #ebf4f8; + border-color: transparent; + color: #000; + border-radius: 0; +} + +.daterangepicker td.start-date { + border-radius: 4px 0 0 4px; +} + +.daterangepicker td.end-date { + border-radius: 0 4px 4px 0; +} + +.daterangepicker td.start-date.end-date { + border-radius: 4px; +} + +.daterangepicker td.active, .daterangepicker td.active:hover { + background-color: #357ebd; + border-color: transparent; + color: #fff; +} + +.daterangepicker th.month { + width: auto; +} + +.daterangepicker td.disabled, .daterangepicker option.disabled { + color: #999; + cursor: not-allowed; + text-decoration: line-through; +} + +.daterangepicker select.monthselect, .daterangepicker select.yearselect { + font-size: 12px; + padding: 1px; + height: auto; + margin: 0; + cursor: default; +} + +.daterangepicker select.monthselect { + margin-right: 2%; + width: 56%; +} + +.daterangepicker select.yearselect { + width: 40%; +} + +.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { + width: 50px; + margin: 0 auto; + background: #eee; + border: 1px solid #eee; + padding: 2px; + outline: 0; + font-size: 12px; +} + +.daterangepicker .calendar-time { + text-align: center; + margin: 4px auto 0 auto; + line-height: 30px; + position: relative; +} + +.daterangepicker .calendar-time select.disabled { + color: #ccc; + cursor: not-allowed; +} + +.daterangepicker .drp-buttons { + clear: both; + text-align: right; + padding: 8px; + border-top: 1px solid #ddd; + display: none; + line-height: 12px; + vertical-align: middle; +} + +.daterangepicker .drp-selected { + display: inline-block; + font-size: 12px; + padding-right: 8px; +} + +.daterangepicker .drp-buttons .btn { + margin-left: 8px; + font-size: 12px; + font-weight: bold; + padding: 4px 8px; +} + +.daterangepicker.show-ranges.single.rtl .drp-calendar.left { + border-right: 1px solid #ddd; +} + +.daterangepicker.show-ranges.single.ltr .drp-calendar.left { + border-left: 1px solid #ddd; +} + +.daterangepicker.show-ranges.rtl .drp-calendar.right { + border-right: 1px solid #ddd; +} + +.daterangepicker.show-ranges.ltr .drp-calendar.left { + border-left: 1px solid #ddd; +} + +.daterangepicker .ranges { + float: none; + text-align: left; + margin: 0; +} + +.daterangepicker.show-calendar .ranges { + margin-top: 8px; +} + +.daterangepicker .ranges ul { + list-style: none; + margin: 0 auto; + padding: 0; + width: 100%; +} + +.daterangepicker .ranges li { + font-size: 12px; + padding: 8px 12px; + cursor: pointer; +} + +.daterangepicker .ranges li:hover { + background-color: #eee; +} + +.daterangepicker .ranges li.active { + background-color: #08c; + color: #fff; +} /* Larger Screen Styling */ @media (min-width: 564px) { .daterangepicker { - width: auto; } - .daterangepicker .ranges ul { - width: 160px; } - .daterangepicker.single .ranges ul { - width: 100%; } - .daterangepicker.single .calendar.left { - clear: none; } - .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar { - float: left; } - .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar { - float: right; } - .daterangepicker.ltr { - direction: ltr; - text-align: left; } - .daterangepicker.ltr .calendar.left { - clear: left; - margin-right: 0; } - .daterangepicker.ltr .calendar.left .calendar-table { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .daterangepicker.ltr .calendar.right { - margin-left: 0; } - .daterangepicker.ltr .calendar.right .calendar-table { - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - .daterangepicker.ltr .left .daterangepicker_input { - padding-right: 12px; } - .daterangepicker.ltr .calendar.left .calendar-table { - padding-right: 12px; } - .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar { - float: left; } - .daterangepicker.rtl { - direction: rtl; - text-align: right; } - .daterangepicker.rtl .calendar.left { - clear: right; - margin-left: 0; } - .daterangepicker.rtl .calendar.left .calendar-table { - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - .daterangepicker.rtl .calendar.right { - margin-right: 0; } - .daterangepicker.rtl .calendar.right .calendar-table { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .daterangepicker.rtl .left .daterangepicker_input { - padding-left: 12px; } - .daterangepicker.rtl .calendar.left .calendar-table { - padding-left: 12px; } - .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar { - text-align: right; - float: right; } } + width: auto; + } + + .daterangepicker .ranges ul { + width: 140px; + } + + .daterangepicker.single .ranges ul { + width: 100%; + } + + .daterangepicker.single .drp-calendar.left { + clear: none; + } + + .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar { + float: left; + } + + .daterangepicker { + direction: ltr; + text-align: left; + } + + .daterangepicker .drp-calendar.left { + clear: left; + margin-right: 0; + } + + .daterangepicker .drp-calendar.left .calendar-table { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .daterangepicker .drp-calendar.right { + margin-left: 0; + } + + .daterangepicker .drp-calendar.right .calendar-table { + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .daterangepicker .drp-calendar.left .calendar-table { + padding-right: 8px; + } + + .daterangepicker .ranges, .daterangepicker .drp-calendar { + float: left; + } +} + @media (min-width: 730px) { .daterangepicker .ranges { - width: auto; } - .daterangepicker.ltr .ranges { - float: left; } + width: auto; + } + + .daterangepicker .ranges { + float: left; + } + .daterangepicker.rtl .ranges { - float: right; } - .daterangepicker .calendar.left { - clear: none !important; } } + float: right; + } + + .daterangepicker .drp-calendar.left { + clear: none !important; + } +}