VDatePickerMonth.sass 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. .v-date-picker-month
  5. display: flex
  6. justify-content: center
  7. padding: $date-picker-month-padding
  8. --v-date-picker-month-day-diff: 4px
  9. .v-date-picker-month__weeks
  10. display: grid
  11. grid-template-rows: min-content min-content min-content min-content min-content min-content min-content
  12. column-gap: $date-picker-month-column-gap
  13. font-size: $date-picker-month-font-size
  14. + .v-date-picker-month__days
  15. grid-row-gap: 0
  16. .v-date-picker-month__weekday
  17. font-size: $date-picker-month-font-size
  18. .v-date-picker-month__days
  19. display: grid
  20. grid-template-columns: min-content min-content min-content min-content min-content min-content min-content
  21. column-gap: $date-picker-month-column-gap
  22. flex: 1 1
  23. justify-content: space-around
  24. .v-date-picker-month__day
  25. align-items: center
  26. display: flex
  27. justify-content: center
  28. position: relative
  29. height: $date-picker-month-day-size
  30. width: $date-picker-month-day-size
  31. &--selected
  32. .v-btn
  33. background-color: rgb(var(--v-theme-surface-variant))
  34. color: rgb(var(--v-theme-on-surface-variant))
  35. .v-btn.v-date-picker-month__day-btn
  36. --v-btn-height: #{$date-picker-month-btn-height}
  37. --v-btn-size: #{$date-picker-month-btn-size}
  38. &--week
  39. font-size: var(--v-btn-size)
  40. .v-date-picker-month__day--adjacent
  41. opacity: 0.5
  42. .v-date-picker-month__day--hide-adjacent
  43. opacity: 0