VDatePickerMonth.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. .v-date-picker-month {
  2. display: flex;
  3. justify-content: center;
  4. padding: 0 12px 8px;
  5. --v-date-picker-month-day-diff: 4px;
  6. }
  7. .v-date-picker-month__weeks {
  8. display: grid;
  9. grid-template-rows: min-content min-content min-content min-content min-content min-content min-content;
  10. column-gap: 4px;
  11. font-size: 0.85rem;
  12. }
  13. .v-date-picker-month__weeks + .v-date-picker-month__days {
  14. grid-row-gap: 0;
  15. }
  16. .v-date-picker-month__weekday {
  17. font-size: 0.85rem;
  18. }
  19. .v-date-picker-month__days {
  20. display: grid;
  21. grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
  22. column-gap: 4px;
  23. flex: 1 1;
  24. justify-content: space-around;
  25. }
  26. .v-date-picker-month__day {
  27. align-items: center;
  28. display: flex;
  29. justify-content: center;
  30. position: relative;
  31. height: 40px;
  32. width: 40px;
  33. }
  34. .v-date-picker-month__day--selected .v-btn {
  35. background-color: rgb(var(--v-theme-surface-variant));
  36. color: rgb(var(--v-theme-on-surface-variant));
  37. }
  38. .v-date-picker-month__day .v-btn.v-date-picker-month__day-btn {
  39. --v-btn-height: 24px;
  40. --v-btn-size: 0.85rem;
  41. }
  42. .v-date-picker-month__day--week {
  43. font-size: var(--v-btn-size);
  44. }
  45. .v-date-picker-month__day--adjacent {
  46. opacity: 0.5;
  47. }
  48. .v-date-picker-month__day--hide-adjacent {
  49. opacity: 0;
  50. }