VTimePickerControls.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. .v-time-picker-controls {
  2. display: flex;
  3. align-items: center;
  4. justify-content: center;
  5. font-size: 0.875rem;
  6. padding-top: 4px;
  7. padding-bottom: 4px;
  8. margin-bottom: 36px;
  9. }
  10. .v-time-picker-controls__text {
  11. padding-bottom: 12px;
  12. }
  13. .v-time-picker-controls__time {
  14. display: flex;
  15. white-space: nowrap;
  16. direction: ltr;
  17. justify-content: center;
  18. }
  19. .v-time-picker-controls__time__btn.v-btn--density-default.v-btn {
  20. width: 96px;
  21. height: 80px;
  22. font-size: 56px;
  23. }
  24. .v-time-picker-controls__time__btn.v-btn--density-default.v-btn__active {
  25. background: rgb(var(--v-theme-primary));
  26. }
  27. .v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-ampm__btn {
  28. width: 96px;
  29. height: 80px;
  30. }
  31. .v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-seconds__btn {
  32. width: 64px;
  33. height: 80px;
  34. font-size: 40px;
  35. }
  36. .v-time-picker-controls__time__separator {
  37. font-size: 56px;
  38. height: 80px;
  39. width: 24px;
  40. text-align: center;
  41. }
  42. .v-time-picker-controls__time__separator.v-time-picker-controls--with-seconds__time__separator {
  43. height: 80px;
  44. font-size: 56px;
  45. }
  46. .v-time-picker-controls__ampm {
  47. margin-left: 12px;
  48. align-self: flex-end;
  49. display: flex;
  50. flex-direction: column;
  51. font-size: 18px;
  52. text-transform: uppercase;
  53. }
  54. .v-time-picker-controls__ampm--readonly {
  55. pointer-events: none;
  56. }
  57. .v-time-picker-controls__ampm--readonly .v-picker__title__btn.v-picker__title__btn--active {
  58. opacity: 0.6;
  59. }
  60. .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default {
  61. font-size: 18px;
  62. padding: 0 8px;
  63. min-width: 52px;
  64. height: 40px;
  65. }
  66. .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__am {
  67. border-radius: 4px 4px 0 0;
  68. border: 1px solid;
  69. }
  70. .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__pm {
  71. border-radius: 0 0 4px 4px;
  72. border: 1px solid;
  73. border-top: none;
  74. }
  75. .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default__active {
  76. background: rgb(var(--v-theme-primary));
  77. }
  78. .v-picker__title--landscape .v-time-picker-controls {
  79. flex-direction: column;
  80. justify-content: center;
  81. height: 100%;
  82. }
  83. .v-picker__title--landscape .v-time-picker-controls__time {
  84. text-align: right;
  85. }
  86. .v-picker__title--landscape .v-time-picker-controls__time .v-picker__title__btn,
  87. .v-picker__title--landscape .v-time-picker-controls__time span {
  88. height: 55px;
  89. font-size: 55px;
  90. }
  91. .v-picker__title--landscape .v-time-picker-controls__ampm {
  92. margin: 16px 0 0;
  93. align-self: initial;
  94. text-align: center;
  95. }
  96. .v-picker--time .v-picker__title--landscape {
  97. padding: 0;
  98. }
  99. .v-picker--time .v-picker__title--landscape .v-time-picker-controls__time {
  100. text-align: center;
  101. }