.date-picker-container {
position: absolute; z-index: 11; width: 392px; height: auto;
}
%date-picker-calendar {
position: absolute; width: 392px; padding: 0 16px; background-color: $white; background-clip: border-box; border: 1px solid $smoke; border-radius: 4px; // stylelint-disable-line property-blacklist box-shadow: 0 2px 4px 0 rgba($slate, .1), 0 4px 8px 0 rgba($slate, .2);
}
.date-picker-calendar-view {
@extend %date-picker-calendar; height: auto; min-height: 284px;
}
.date-picker-collapse-view {
@extend %date-picker-calendar; height: auto; min-height: 244px;
}
.date-picker-header {
display: flex; align-items: center; height: 52px; text-align: center;
}
.date-picker-header-title {
flex-grow: 5; font-weight: $font-weight-bold; cursor: pointer;
}
.date-picker-previous-button {
flex-grow: 1; padding-right: 16px; text-align: left; .ic { &:hover { cursor: pointer; } }
}
.date-picker-next-button {
flex-grow: 1; padding-left: 16px; text-align: right; .ic { &:hover { cursor: pointer; } }
}
%cell-current-state {
border-radius: 100%; // stylelint-disable-line property-blacklist -webkit-box-shadow: inset 0 0 0 1px $primary; // stylelint-disable-line property-no-vendor-prefix -moz-box-shadow: inset 0 0 0 1px $primary; // stylelint-disable-line property-no-vendor-prefix box-shadow: inset 0 0 0 1px $primary;
}
%cell-selected-state {
color: $white !important; // stylelint-disable-line declaration-no-important background-color: $primary !important; // stylelint-disable-line declaration-no-important border-radius: 100%; // stylelint-disable-line property-blacklist
}
%cell-disabled-state {
color: $muted !important; // stylelint-disable-line declaration-no-important background-color: transparent !important; // stylelint-disable-line declaration-no-important border-radius: 100%; // stylelint-disable-line property-blacklist &:hover { cursor: default; }
}
%cell-hover {
color: $dark; cursor: pointer; background-color: $cloud; border-radius: 100%; // stylelint-disable-line property-blacklist -webkit-box-shadow: none; // stylelint-disable-line property-no-vendor-prefix -moz-box-shadow: none; // stylelint-disable-line property-no-vendor-prefix box-shadow: none; // stylelint-disable-line property-no-vendor-prefix
}
.date-picker-row {
display: flex; flex-wrap: wrap; .date-picker-cell { flex: 1 1 0; margin: 2px 0; text-align: center; .date-picker-date-cell { width: 32px; height: 32px; margin: 0 auto; line-height: 32px; &.current-date { @extend %cell-current-state; } &.selected-date { @extend %cell-selected-state; } &.disabled-date { @extend %cell-disabled-state; } &:hover { @extend %cell-hover; } } .date-picker-month-cell { width: 40px; height: 40px; margin: 0 auto; margin-bottom: 12px; line-height: 40px; &.current-month { @extend %cell-current-state; } &.selected-month { @extend %cell-selected-state; } &.disabled-month { @extend %cell-disabled-state; } &:hover { @extend %cell-hover; } } .date-picker-year-cell { width: 48px; height: 48px; margin: 0 auto; margin-bottom: 4px; line-height: 48px; &.current-year { @extend %cell-current-state; } &.selected-year { @extend %cell-selected-state; } &.disabled-year { @extend %cell-disabled-state; } &:hover { @extend %cell-hover; } } &:hover { .date-picker-date-cell { @extend %cell-hover; } } }
}
.date-picker-day-container {
display: flex; margin-bottom: 16px; .date-picker-day { flex: 1 1 0; color: $slate; text-align: center; }
}
.date-picker-shortcut-button {
width: 360px; padding: 16px 0; color: $slate; text-align: center; cursor: pointer; &.disabled { color: $muted; cursor: not-allowed; }
}
.date-picker-break {
flex-basis: 100%; height: 0;
}
.date-picker–no-outline {
outline: none;
}