VDatePickerHeader.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. .v-date-picker-header {
  2. align-items: flex-end;
  3. height: 70px;
  4. display: grid;
  5. grid-template-areas: "prepend content append";
  6. grid-template-columns: min-content minmax(0, 1fr) min-content;
  7. overflow: hidden;
  8. padding-inline: 24px 12px;
  9. padding-bottom: 12px;
  10. }
  11. .v-date-picker-header__append {
  12. grid-area: append;
  13. }
  14. .v-date-picker-header__prepend {
  15. grid-area: prepend;
  16. padding-inline-start: 8px;
  17. }
  18. .v-date-picker-header__content {
  19. align-items: center;
  20. display: inline-flex;
  21. font-size: 32px;
  22. line-height: 40px;
  23. grid-area: content;
  24. justify-content: space-between;
  25. }
  26. .v-date-picker-header--clickable .v-date-picker-header__content {
  27. cursor: pointer;
  28. }
  29. .v-date-picker-header--clickable .v-date-picker-header__content:not(:hover) {
  30. opacity: 0.7;
  31. }
  32. .date-picker-header-transition-enter-active,
  33. .date-picker-header-reverse-transition-enter-active {
  34. transition-duration: 0.3s;
  35. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  36. }
  37. .date-picker-header-transition-leave-active,
  38. .date-picker-header-reverse-transition-leave-active {
  39. transition-duration: 0.3s;
  40. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  41. }
  42. .date-picker-header-transition-enter-from {
  43. transform: translate(0, 100%);
  44. }
  45. .date-picker-header-transition-leave-to {
  46. opacity: 0;
  47. transform: translate(0, -100%);
  48. }
  49. .date-picker-header-reverse-transition-enter-from {
  50. transform: translate(0, -100%);
  51. }
  52. .date-picker-header-reverse-transition-leave-to {
  53. opacity: 0;
  54. transform: translate(0, 100%);
  55. }