186 lines
2.9 KiB
SCSS
186 lines
2.9 KiB
SCSS
//
|
|
// Datepicker
|
|
//
|
|
|
|
.datepicker {
|
|
border: 1px solid $gray-100;
|
|
padding: 8px;
|
|
z-index: 999 !important;
|
|
right: auto;
|
|
direction: rtl;
|
|
|
|
table {
|
|
tr {
|
|
th {
|
|
font-weight: 500;
|
|
|
|
&.next,
|
|
&.prev {
|
|
font-family: arial, $font-family-base;
|
|
}
|
|
}
|
|
|
|
td {
|
|
|
|
&.active,
|
|
&.active:hover,
|
|
.active.disabled,
|
|
&.active.disabled:hover,
|
|
&.today,
|
|
&.today:hover,
|
|
&.today.disabled,
|
|
&.today.disabled:hover,
|
|
&.selected,
|
|
&.selected:hover,
|
|
&.selected.disabled,
|
|
&.selected.disabled:hover {
|
|
background-color: $primary !important;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
color: $white !important;
|
|
}
|
|
|
|
&.day.focused,
|
|
&.day:hover,
|
|
span.focused,
|
|
span:hover {
|
|
background: $gray-200;
|
|
}
|
|
|
|
&.new,
|
|
&.old,
|
|
span.new,
|
|
span.old {
|
|
color: $gray-500;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&.range,
|
|
&.range.disabled,
|
|
&.range.disabled:hover,
|
|
&.range:hover {
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
span {
|
|
float: right;
|
|
|
|
&.active:hover {
|
|
background: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.table-condensed {
|
|
|
|
>thead>tr>th,
|
|
>tbody>tr>td {
|
|
padding: 6px 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.datepicker-switch:hover,
|
|
.next:hover,
|
|
.prev:hover,
|
|
tfoot tr th:hover,
|
|
table tr td.day.focused,
|
|
table tr td.day:hover,
|
|
table tr td span.focused,
|
|
table tr td span:hover {
|
|
background: $datepicker-hover;
|
|
}
|
|
|
|
&.datepicker-dropdown {
|
|
|
|
&.datepicker-orient-top {
|
|
&:before {
|
|
border-top-color: $gray-100;
|
|
}
|
|
&:after {
|
|
border-top-color: $datepicker-background;
|
|
}
|
|
}
|
|
&.datepicker-orient-bottom {
|
|
&:before {
|
|
border-bottom-color: $gray-100;
|
|
}
|
|
&:after {
|
|
border-bottom-color: $datepicker-background;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-datepicker {
|
|
color: inherit;
|
|
background-color: $datepicker-background;
|
|
border: 1px solid $datepicker-border;
|
|
|
|
.ui-state-default {
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
td:not(.ui-state-disabled) .ui-state-default:hover {
|
|
background: $datepicker-hover;
|
|
}
|
|
|
|
.ui-datepicker-today .ui-state-default {
|
|
background: $datepicker-today;
|
|
}
|
|
|
|
.ui-state-default.ui-state-active {
|
|
background: $primary !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.ui-datepicker-header .btn.ui-state-hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.ui-datepicker-header {
|
|
border-bottom: 1px solid $datepicker-border;
|
|
}
|
|
|
|
.ui-datepicker-buttonpane {
|
|
background: transparent;
|
|
border-top: 1px solid $datepicker-border;
|
|
|
|
.btn {
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background: $datepicker-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-priority-secondary,
|
|
.ui-widget-content .ui-priority-secondary,
|
|
.ui-widget-header .ui-priority-secondary {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.ui-state-disabled,
|
|
.ui-widget-content .ui-state-disabled,
|
|
.ui-widget-header .ui-state-disabled {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
select {
|
|
color: inherit;
|
|
background-color: $datepicker-select;
|
|
border: 1px solid $datepicker-border;
|
|
outline: none;
|
|
}
|
|
|
|
td {
|
|
span, a {
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
}
|
|
}
|
|
}
|