68 lines
2.4 KiB
SCSS
68 lines
2.4 KiB
SCSS
// ui-datepicker: The outer container of the datepicker. If the datepicker is inline, this element will additionally have a ui-datepicker-inline class. If the isRTL option is set, this element will additionally have a class of ui-datepicker-rtl.
|
|
// ui-datepicker-header: The container for the datepicker's header.
|
|
// ui-datepicker-prev: The control used to select previous months.
|
|
// ui-datepicker-next: The control used to select subsequent months.
|
|
// ui-datepicker-title: The container for the datepicker's title containing the month and year.
|
|
// ui-datepicker-month: The textual display of the month or a <select> element if the changeMonth option is set.
|
|
// ui-datepicker-year: The textual display of the year or a <select> element if the changeYear option is set.
|
|
// ui-datepicker-calendar: The table that contains the calendar itself.
|
|
// ui-datepicker-week-end: Cells containing weekend days.
|
|
// ui-datepicker-other-month: Cells containing days that occur in a month other than the currently selected month.
|
|
// ui-datepicker-unselectable: Cells containing days that are not selectable by the user.
|
|
// ui-datepicker-current-day: The cell containing the selected day.
|
|
// ui-datepicker-today: The cell containing today's date.
|
|
// ui-datepicker-buttonpane: The buttonpane that is used when the showButtonPanel option is set.
|
|
// ui-datepicker-current: The button used to select today's date.
|
|
|
|
.ui-datepicker {
|
|
top: 0;
|
|
left: 0;
|
|
padding: 4px;
|
|
margin-top: 1px;
|
|
@include border-radius(4px);
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: -7px;
|
|
left: 6px;
|
|
display: inline-block !important;
|
|
content: "";
|
|
border-right: 7px solid transparent;
|
|
border-bottom: 7px solid #ccc;
|
|
border-bottom-color: rgba(#000, 0.2);
|
|
border-left: 7px solid transparent;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 7px;
|
|
display: inline-block !important;
|
|
content: "";
|
|
border-right: 6px solid transparent;
|
|
border-bottom: 6px solid #fff;
|
|
border-left: 6px solid transparent;
|
|
}
|
|
|
|
.ui-datepicker-header {
|
|
font-weight: 500;
|
|
color: #808080;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.ui-state-default {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.ui-state-highlight {
|
|
background: #fefbe2 !important;
|
|
border: solid 1px darken(#fefbe2, 50%) !important;
|
|
}
|
|
|
|
.ui-state-active {
|
|
color: #fff !important;
|
|
background: $primary-color !important;
|
|
border: solid 1px darken($primary-color, 10%) !important;
|
|
}
|
|
}
|