VTimePickerClock.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. .v-time-picker-clock {
  2. background: rgb(var(--v-theme-background));
  3. color: rgb(var(--v-theme-on-background));
  4. }
  5. .v-time-picker-clock:after {
  6. color: rgb(var(--v-theme-primary));
  7. }
  8. .v-time-picker-clock .v-time-picker-clock__item--active {
  9. background-color: rgb(var(--v-theme-surface-variant));
  10. color: rgb(var(--v-theme-on-surface-variant));
  11. }
  12. .v-time-picker-clock {
  13. margin: 0 auto;
  14. background: rgb(var(--v-theme-surface-light));
  15. border-radius: 50%;
  16. position: relative;
  17. transition: none;
  18. user-select: none;
  19. height: 256px;
  20. width: 256px;
  21. flex: 1 0 auto;
  22. }
  23. .v-time-picker-clock__container {
  24. display: flex;
  25. flex-direction: column;
  26. flex-basis: 290px;
  27. justify-content: center;
  28. padding: 10px;
  29. }
  30. .v-time-picker-clock__hand {
  31. background-color: currentColor;
  32. height: calc(50% - 4px);
  33. width: 2px;
  34. bottom: 50%;
  35. left: calc(50% - 1px);
  36. transform-origin: center bottom;
  37. position: absolute;
  38. will-change: transform;
  39. z-index: 1;
  40. }
  41. .v-time-picker-clock__hand:before {
  42. background: transparent;
  43. border-width: 2px;
  44. border-style: solid;
  45. border-color: currentColor;
  46. border-radius: 100%;
  47. width: 10px;
  48. height: 10px;
  49. content: "";
  50. position: absolute;
  51. top: -4px;
  52. left: 50%;
  53. transform: translate(-50%, -50%);
  54. }
  55. .v-time-picker-clock__hand:after {
  56. content: "";
  57. position: absolute;
  58. height: 8px;
  59. width: 8px;
  60. top: 100%;
  61. left: 50%;
  62. border-radius: 100%;
  63. background-color: currentColor;
  64. transform: translate(-50%, -50%);
  65. }
  66. .v-time-picker-clock__hand--inner:after {
  67. height: 14px;
  68. }
  69. .v-time-picker-clock--readonly {
  70. pointer-events: none;
  71. }
  72. .v-time-picker-clock .v-time-picker-clock__item--disabled {
  73. opacity: var(--v-disabled-opacity);
  74. }
  75. .v-picker--full-width .v-time-picker-clock__container {
  76. max-width: 290px;
  77. }
  78. .v-time-picker-clock__inner {
  79. position: absolute;
  80. bottom: 27px;
  81. left: 27px;
  82. right: 27px;
  83. top: 27px;
  84. }
  85. .v-time-picker-clock__item {
  86. align-items: center;
  87. border-radius: 100%;
  88. cursor: default;
  89. display: flex;
  90. font-size: 16px;
  91. justify-content: center;
  92. height: 40px;
  93. position: absolute;
  94. text-align: center;
  95. width: 40px;
  96. user-select: none;
  97. transform: translate(-50%, -50%);
  98. }
  99. .v-time-picker-clock__item > span {
  100. z-index: 1;
  101. }
  102. .v-time-picker-clock__item:before, .v-time-picker-clock__item:after {
  103. content: "";
  104. border-radius: 100%;
  105. position: absolute;
  106. top: 50%;
  107. left: 50%;
  108. height: 14px;
  109. width: 14px;
  110. transform: translate(-50%, -50%);
  111. }
  112. .v-time-picker-clock__item:after, .v-time-picker-clock__item:before {
  113. height: 40px;
  114. width: 40px;
  115. }
  116. .v-time-picker-clock__item--active {
  117. cursor: default;
  118. z-index: 2;
  119. }
  120. .v-time-picker-clock__item--disabled {
  121. pointer-events: none;
  122. }
  123. .v-picker--landscape .v-time-picker-clock__container {
  124. flex-direction: row;
  125. }