@mst101/vue-datepicker/dist/style.css

A simple, but powerful, Vue 3 datepicker component. Supports disabling of dates, inline mode, translations & custom slots

:root {
  --vdp-width: 300px;
  --vdp-border-width: 1px;
  --vdp-header-height: 40px;
  --vdp-day-header-height: 40px;
  --vdp-cell-height: 40px;
  --vdp-bg: #fff;
  --vdp-text: #000;
  --vdp-text-disabled: #ddd;
  --vdp-border: #ccc;
  --vdp-today-bg: #eee;
  --vdp-button-hover-bg: #eee;
  --vdp-cell-selected-bg: #4bd;
  --vdp-cell-selected-text: #06262d;
  --vdp-cell-hover-border: #4bd;
  --vdp-cell-focus-outline: #000;
  --vdp-cell-highlighted-bg: #cae5ed;
  --vdp-cell-highlighted-text: #104756;
  --vdp-cell-highlighted-disabled-text: #accad2;
  --vdp-cell-edge-dates-text: #757575;
  --vdp-cell-edge-dates-selected-text: #104756;
  --vdp-cell-edge-dates-highlighted-text: #196676;
}
html.dark {
  --vdp-bg: #121212;
  --vdp-text: #eee;
  --vdp-text-disabled: #666;
  --vdp-border: #333;
  --vdp-today-bg: #333;
  --vdp-button-hover-bg: #333;
  --vdp-cell-selected-bg: #24a0c4;
  --vdp-cell-selected-text: #092831;
  --vdp-cell-hover-border: #24a0c4;
  --vdp-cell-focus-outline: #fff;
  --vdp-cell-highlighted-bg: #092831;
  --vdp-cell-highlighted-text: #ecf8fc;
  --vdp-cell-highlighted-disabled-text: #16647a;
  --vdp-cell-edge-dates-text: #aaa;
  --vdp-cell-edge-dates-selected-text: #ecf8fc;
  --vdp-cell-edge-dates-highlighted-text: #9db8c2;
}
.rtl {
  direction: rtl;
}
.vdp-datepicker {
  font-family: Arial, serif;
  position: relative;
  text-align: left;
  box-sizing: border-box;
}
.vdp-datepicker__calendar {
  background: var(--vdp-bg);
  border: var(--vdp-border-width) solid var(--vdp-border);
  position: absolute;
  width: var(--vdp-width);
  z-index: 10;
}
.vdp-datepicker__calendar > div {
  background: var(--vdp-bg);
  width: calc(var(--vdp-width) - 2 * var(--vdp-border-width));
}
.vdp-datepicker__calendar .today {
  background-color: var(--vdp-today-bg);
}
.vdp-datepicker__calendar * {
  box-sizing: border-box;
}
.vdp-datepicker__calendar.vdp-datepicker__calendar--inline {
  position: relative;
}
.vdp-datepicker__calendar button {
  background: inherit;
  color: var(--vdp-text);
  text-align: center;
}
.vdp-datepicker__calendar button:disabled {
  color: var(--vdp-text-disabled);
}
.vdp-datepicker__calendar header {
  display: flex;
  height: var(--vdp-header-height);
  justify-content: space-between;
}
.vdp-datepicker__calendar header button {
  border: none;
}
.vdp-datepicker__calendar header button:hover:not(:disabled) {
  background: var(--vdp-button-hover-bg);
  cursor: pointer;
}
.vdp-datepicker__calendar header button.vdp-datepicker__up {
  color: var(--vdp-text);
  flex-grow: 5;
}
.vdp-datepicker__calendar header .prev,
.vdp-datepicker__calendar header .next {
  flex-grow: 1;
  position: relative;
}
.vdp-datepicker__calendar header .prev .default,
.vdp-datepicker__calendar header .next .default {
  display: flex;
  text-indent: -10000px;
}
.vdp-datepicker__calendar header .prev .default:after,
.vdp-datepicker__calendar header .next .default:after {
  border: 6px solid transparent;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.vdp-datepicker__calendar header .prev.rtl,
.vdp-datepicker__calendar header .next.rtl {
  transform: rotate(180deg);
}
.vdp-datepicker__calendar header .prev .default:after {
  border-right: 10px solid var(--vdp-text);
  margin-left: -5px;
}
.vdp-datepicker__calendar header .prev:disabled .default:after {
  border-right: 10px solid var(--vdp-text-disabled);
}
.vdp-datepicker__calendar header .next .default:after {
  border-left: 10px solid var(--vdp-text);
  margin-left: 5px;
}
.vdp-datepicker__calendar header .next:disabled .default:after {
  border-left: 10px solid var(--vdp-text-disabled);
}
.vdp-datepicker__calendar .cell {
  border: 1px solid transparent;
  display: inline-block;
  font-size: 100%;
  height: var(--vdp-cell-height);
  padding: 0 5px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 14.2857142857%;
}
.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {
  cursor: pointer;
}
.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
  border: 0.1em solid var(--vdp-cell-hover-border);
}
.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:not(.btn):focus, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:not(.btn):focus, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:not(.btn):focus {
  outline: 0.1em solid var(--vdp-cell-focus-outline);
  outline-offset: -0.1em;
}
.vdp-datepicker__calendar .cell:hover {
  outline: 0.1em solid var(--vdp-cell-hover-outline) !important;
}
.vdp-datepicker__calendar .cell.selected, .vdp-datepicker__calendar .cell.selected:hover {
  background: var(--vdp-cell-selected-bg);
  color: var(--vdp-cell-selected-text);
}
.vdp-datepicker__calendar .cell.selected.highlighted, .vdp-datepicker__calendar .cell.selected:hover.highlighted {
  background: var(--vdp-cell-selected-bg);
  color: var(--vdp-cell-selected-text);
}
.vdp-datepicker__calendar .cell.highlighted {
  background: var(--vdp-cell-highlighted-bg);
  color: var(--vdp-cell-highlighted-text);
}
.vdp-datepicker__calendar .cell.highlighted.disabled {
  color: var(--vdp-cell-highlighted-disabled-text);
}
.vdp-datepicker__calendar .cell.muted {
  color: var(--vdp-cell-edge-dates-text);
}
.vdp-datepicker__calendar .cell.muted.selected {
  color: var(--vdp-cell-edge-dates-selected-text);
}
.vdp-datepicker__calendar .cell.muted.highlighted {
  color: var(--vdp-cell-edge-dates-highlighted-text);
}
.vdp-datepicker__calendar .cell.muted.disabled:not(.selected) {
  color: var(--vdp-text-disabled);
}
.vdp-datepicker__calendar .cell.muted.disabled:not(.selected).highlighted {
  color: var(--vdp-cell-highlighted-disabled-text);
}
.vdp-datepicker__calendar .day-header span {
  color: var(--vdp-text);
  display: inline-block;
  font-size: 75%;
  height: var(--vdp-day-header-height);
  line-height: var(--vdp-day-header-height);
  padding: 0 5px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  width: 14.2857142857%;
}
.vdp-datepicker__calendar .month,
.vdp-datepicker__calendar .year {
  width: 33.333%;
}
.vdp-datepicker__calendar .picker-view {
  width: inherit;
}
.vdp-datepicker__calendar .picker-view .cells-wrapper {
  overflow: hidden;
  position: relative;
}
.vdp-datepicker__calendar .picker-view .cells-wrapper .picker-cells {
  transition: all 250ms ease-in-out;
}
.vdp-datepicker__calendar .picker-view .slide-right-enter-active {
  top: 0;
}
.vdp-datepicker__calendar .picker-view .slide-right-leave-active {
  position: absolute;
  top: 0;
}
.vdp-datepicker__calendar .picker-view .slide-right-enter-from {
  transform: translate(100%, 0);
}
.vdp-datepicker__calendar .picker-view .slide-right-leave-to {
  transform: translate(-100%, 0);
}
.vdp-datepicker__calendar .picker-view .slide-left-enter-active {
  top: 0;
}
.vdp-datepicker__calendar .picker-view .slide-left-leave-active {
  position: absolute;
  top: 0;
}
.vdp-datepicker__calendar .picker-view .slide-left-enter-from {
  transform: translate(-100%, 0);
}
.vdp-datepicker__calendar .picker-view .slide-left-leave-to {
  transform: translate(100%, 0);
}
.toggle-enter-active,
.toggle-leave-active {
  transition: all 250ms ease;
}
.toggle-enter-from,
.toggle-leave-to {
  opacity: 0;
}
.view-leave-active {
  position: absolute;
}
.view-enter-active,
.view-leave-active {
  transition: all 250ms ease;
}
.view-enter-from,
.view-leave-to {
  opacity: 0;
}
.vdp-datepicker__clear-button,
.vdp-datepicker__calendar-button {
  background: var(--vdp-today-bg);
  border: 1px solid var(--vdp-border);
  cursor: pointer;
  padding: 0.5em;
}
.vdp-datepicker__clear-button.input-group-prepend, .vdp-datepicker__clear-button.input-group-append,
.vdp-datepicker__calendar-button.input-group-prepend,
.vdp-datepicker__calendar-button.input-group-append {
  padding: 0;
}