| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352 |
- @import "../../scss/_bootstrap-extended/include";
- @import "../../scss/_components/include";
-
-
- .daterangepicker {
- position: absolute;
- z-index: $picker-zindex;
- display: none;
- background-color: $picker-bg;
- box-shadow: $picker-box-shadow;
- margin-block-start: $picker-spacer;
- @include border-radius($picker-border-radius);
-
- .calendar-table{
- /* prev & next arrow wrapper styles */
- .next,
- .prev {
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: $picker-arrow-bg;
- block-size: $picker-arrow-wrapper-size;
- inline-size: $picker-arrow-wrapper-size;
- inset-block-start: .65rem;
- min-inline-size: unset;
- @include border-radius($picker-cell-border-radius);
- }
-
- /* prev & next arrow default styles with border */
- .next span,
- .prev span {
- display: inline-block;
- border-width: 0 2px 2px 0;
- border-style: solid;
- border-color: $picker-arrow-color;
- block-size: $picker-arrow-size;
- inline-size: $picker-arrow-size;
- @include border-radius(0);
- }
-
- .prev span {
- margin-inline-end: -$picker-arrow-size * .5;
- transform: rotate(135deg);
-
- :dir(rtl) & {
- transform: rotate(-45deg);
- }
- }
-
- .next span {
- margin-inline-start: -$picker-arrow-size * .5;
- transform: rotate(-45deg);
-
- :dir(rtl) & {
- margin-inline: 0;
- transform: rotate(135deg);
- }
- }
-
- /* picker table styles */
- table {
- border: 0;
- margin: 0;
- border-collapse: collapse;
- border-spacing: 0;
- inline-size: 100%;
- thead {
- tr:first-child {
- position: relative;
- block-size: $picker-header-size;
- }
- tr:last-child th {
- color: $picker-header-color;
- font-size: $font-size-sm;
- font-weight: $font-weight-medium;
- @include border-radius(0);
- }
- th select{
- background-color: transparent;
- }
- }
- th.month {
- inline-size: auto;
- }
- td {
- inline-size: $picker-cell-size;
- @include border-radius($picker-cell-border-radius);
- &.start-date:not(.end-date) {
- @include border-end-radius(0);
- }
-
- &.end-date:not(.start-date) {
- @include border-start-radius(0);
- }
-
- &.start-date:not(.end-date, .off),
- &.end-date:not(.start-date, .off) {
- border: 0;
- background-color: $picker-cell-active-bg;
- color: $picker-cell-active-color;
-
- &:hover {
- background-color: $picker-cell-active-bg;
- }
- }
- &.off{
- color: $picker-disabled-color;
- }
-
- /* week header styles */
- &.week{
- color: $picker-header-color;
- font-weight: $font-weight-normal;
- }
-
- /* active date styles */
- &.active.today.start-date:not(.off),
- &.active.today.end-date:not(.off),
- &.active:not(.off){
- background: $picker-cell-active-bg;
- box-shadow: $picker-cell-active-shadow;
- color: $picker-cell-active-color;
- }
-
- /* today date styles */
- &.today,
- &.today.active,
- &.today:hover {
- background: $picker-cell-today-bg;
- color: $picker-cell-today-color;
- }
-
- &.in-range:not(.start-date, .end-date) {
- @include border-radius(0);
- box-shadow: none;
- }
-
- /* hover & not in range date styles */
- &.in-range:not(.start-date, .end-date, .off) {
- &,
- &:hover {
- background-color: $picker-range-active-bg;
- color: $picker-range-active-color;
- }
- }
- }
- th{
- block-size: $picker-cell-size + .5rem;
- }
- th,
- td {
- block-size: $picker-cell-size;
- cursor: pointer;
- line-height: calc(#{$picker-cell-size} - 2px);
- min-inline-size: $picker-cell-size;
- text-align: center;
- vertical-align: middle;
- white-space: nowrap;
- &.available:not(.active, .in-range):hover {
- background-color: $picker-cell-hover-bg;
- }
- }
-
- td.disabled,
- option.disabled {
- color: $picker-disabled-color;
- cursor: not-allowed;
- text-decoration: line-through;
- }
- }
- }
- .input-mini.active {
- border-color: $picker-cell-active-bg;
- }
-
- /* dual date range picker styles */
- .drp-calendar:not(.single){
- &.left{
- .prev{
- inset-inline-start: .625rem;
- }
- }
- &.right{
- .next{
- inset-inline-end: .625rem;
- }
- }
- }
- .drp-calendar.single{
- .prev{
- inset-inline-start: .4rem;
- }
- }
- &:not(.single) {
- /* responsive above md */
- @include media-breakpoint-up(md) {
- .drp-calendar {
- float: inline-start;
- }
- }
- .drp-selected {
- display: inline-block;
- padding: 0;
- inline-size: auto;
- }
- }
-
- /* selected date range styles */
- .drp-selected{
- display: block;
- font-size: $font-size-sm;
- inline-size: 100%;
- padding-block-end: $picker-padding;
- }
-
-
- &.auto-apply .drp-buttons {
- display: none;
- }
-
- &.show-calendar .drp-calendar,
- &.show-calendar .drp-buttons {
- display: block;
- }
-
- .drp-calendar {
- display: none;
- padding: $picker-padding;
-
- &.single .calendar-table {
- border: 0;
- }
- }
-
- &.single {
- .drp-selected {
- display: none;
- }
-
- .daterangepicker .ranges,
- .drp-calendar {
- float: none;
- }
- }
-
- /* select dropdown styles */
- select {
- &.monthselect,
- &.yearselect {
- padding: 1px;
- border: 0;
- margin: 0;
- block-size: auto;
- cursor: default;
- }
-
- &:focus-visible {
- outline: 0;
- }
-
- &.hourselect,
- &.minuteselect,
- &.secondselect,
- &.ampmselect {
- padding: 2px;
- border: 1px solid transparent;
- background: $picker-select-bg;
- color: $picker-color;
- font-size: $font-size-sm;
- inline-size: $picker-select-width;
- margin-block: 0;
- margin-inline: auto;
- outline: 0;
- @include border-radius($picker-select-timer-radius);
- option {
- background: $picker-bg;
- }
- }
-
- &.monthselect {
- margin-inline-end: 4%;
- }
-
- &.yearselect {
- inline-size: 40%;
- }
- }
-
- /* time picker styles */
- .calendar-time {
- position: relative;
- line-height: 30px;
- margin-block: 0;
- margin-inline: auto;
- text-align: center;
-
- select.disabled {
- color: $picker-disabled-color;
- cursor: not-allowed;
- }
- }
-
- .drp-buttons {
- display: none;
- padding: $picker-padding;
- clear: both;
- text-align: end;
- vertical-align: middle;
-
- .btn {
- margin-inline-start: $picker-padding * 1.2;
- }
- }
-
- /* ranges styles */
- .ranges {
- margin: 0;
- float: inline-start;
- text-align: start;
-
- ul {
- padding: .5rem;
- inline-size: 100%;
- list-style: none;
- margin-block: 0;
- margin-inline: auto;
- li{
- @include border-radius($picker-border-radius);
- cursor: pointer;
- padding-block: $dropdown-item-padding-y;
- padding-inline: $dropdown-item-padding-x;
- &:not(:first-child) {
- margin-block-start: .125rem;
- }
- &:hover {
- background-color: $picker-cell-hover-bg;
- }
- &.active {
- background-color: $picker-cell-active-bg;
- color: $picker-cell-active-color;
- }
- }
- }
- }
-
- &.show-calendar .ranges {
- &:empty {
- display: none;
- }
- }
- }
|