// Date Picker
.usa-date-picker__wrapper {
display: none; position: relative; &:focus { outline: 0; }
}
// Date Picker – initialized
%usa-date-picker__button {
background-color: color("base-lightest"); border: 0; width: 100%; &:not([disabled]) { cursor: pointer; &:focus { outline-offset: -4px; } &:hover { background-color: color("base-lighter"); } &:active { background-color: color("base-light"); } }
}
.usa-date-picker–active {
.usa-date-picker__button { background-color: #f0f0f0; } .usa-date-picker__calendar { z-index: z-index(400); }
}
.usa-date-picker__button {
@extend %usa-date-picker__button; @include add-background-svg("usa-icons/calendar_today"); align-self: stretch; background-color: transparent; background-position: center; background-size: units(3); margin-top: 0.5em; width: 3em;
}
.usa-date-picker–initialized {
.usa-date-picker__wrapper { display: flex; }
}
// Date Picker - Calendar View
.usa-date-picker__calendar {
background-color: color("base-lightest"); left: 0; position: absolute; width: 100%; z-index: z-index(100);
}
// Date Picker - Table
.usa-date-picker__calendar__table {
border-spacing: 0; border-collapse: collapse; table-layout: fixed; text-align: center; width: 100%; th { font-weight: normal; } td { padding: 0; }
}
// Date Picker - Grid
.usa-date-picker__calendar__row {
@include grid-row; text-align: center; width: 100%;
}
.usa-date-picker__calendar__cell {
background-color: color("base-lightest"); flex: 1;
}
.usa-date-picker__calendar__cell–center-items {
display: flex; justify-content: center; align-items: center;
}
// Date Picker - Date Selection View
.usa-date-picker__calendar__previous-year, .usa-date-picker__calendar__previous-month, .usa-date-picker__calendar__next-year, .usa-date-picker__calendar__next-month {
@extend %usa-date-picker__button; background-position: center; background-size: auto units(3); height: units(3); padding: 20px 10px;
}
.usa-date-picker__calendar__previous-year:not() {
@include add-background-svg("usa-icons/navigate_far_before");
}
.usa-date-picker__calendar__previous-month:not() {
@include add-background-svg("usa-icons/navigate_before");
}
.usa-date-picker__calendar__next-year:not() {
@include add-background-svg("usa-icons/navigate_far_next");
}
.usa-date-picker__calendar__next-month:not() {
@include add-background-svg("usa-icons/navigate_next");
}
.usa-date-picker__calendar__day-of-week {
padding: 6px 0px;
}
.usa-date-picker__calendar__date {
@extend %usa-date-picker__button; padding: 10px 0px; &--focused { @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v"); position: relative; z-index: z-index(100); } &--next-month:not([disabled]), &--previous-month:not([disabled]) { color: color("gray-warm-60"); } &--selected, &--range-date { background-color: color("primary-vivid"); color: color("gray-2"); &:not([disabled]) { background-color: color("primary-vivid"); color: color("gray-2"); &:hover { background-color: color("primary-vivid"); color: color("gray-10"); } &:focus { background-color: color("primary-vivid"); color: color("gray-2"); } &:active { background-color: color("primary-dark"); } } } &--range-date-start { border-top-left-radius: 10%; border-bottom-left-radius: 10%; } &--range-date-end { border-top-right-radius: 10%; border-bottom-right-radius: 10%; } &--within-range { background-color: color("blue-10v"); &:not([disabled]) { background-color: color("blue-10v"); &:hover { background-color: color("blue-10v"); } &:focus { background-color: color("blue-10v"); } &:active { background-color: color("blue-10v"); } } }
}
.usa-date-picker__calendar__month-label {
flex: 4; text-align: center;
}
.usa-date-picker__calendar__year-selection, .usa-date-picker__calendar__month-selection {
@extend %usa-date-picker__button; display: inline-block; height: 100%; padding: 8px 4px; width: auto;
}
// Date Picker - Month Selection View
.usa-date-picker__calendar__month-picker {
padding: 20px 5px;
}
.usa-date-picker__calendar__month {
@extend %usa-date-picker__button; padding: 10px 0; &--focused { @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v"); position: relative; z-index: z-index(100); } &--selected { background-color: color("primary-vivid"); color: color("gray-2"); &:not([disabled]) { background-color: color("primary-vivid"); color: color("gray-2"); &:hover { background-color: color("primary-vivid"); color: color("gray-10"); } &:focus { background-color: color("primary-vivid"); color: color("gray-2"); } &:active { background-color: color("primary-dark"); } } }
}
// Date Picker - Year Selection View
.usa-date-picker__calendar__year-picker {
padding: 20px 5px;
}
.usa-date-picker__calendar__previous-year-chunk, .usa-date-picker__calendar__next-year-chunk {
@extend %usa-date-picker__button; background-position: center; background-size: auto units(4); margin: auto; padding: 40px 0;
}
.usa-date-picker__calendar__previous-year-chunk:not() {
@include add-background-svg("usa-icons/navigate_before");
}
.usa-date-picker__calendar__next-year-chunk:not() {
@include add-background-svg("usa-icons/navigate_next");
}
.usa-date-picker__calendar__year {
@extend %usa-date-picker__button; padding: 10px 0; &--focused { @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v"); position: relative; z-index: z-index(100); } &--selected { background-color: color("primary-vivid"); color: color("gray-2"); &:not([disabled]) { background-color: color("primary-vivid"); color: color("gray-2"); &:hover { background-color: color("primary-vivid"); color: color("gray-10"); } &:focus { background-color: color("primary-vivid"); color: color("gray-2"); } &:active { background-color: color("primary-dark"); } } }
}