clockpicker.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /*!
  2. * ClockPicker v{package.version} for Bootstrap (http://weareoutman.github.io/clockpicker/)
  3. * Copyright 2014 Wang Shenwei.
  4. * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
  5. */
  6. .clockpicker .input-group-addon {
  7. cursor: pointer;
  8. }
  9. .clockpicker-moving {
  10. cursor: move;
  11. }
  12. .clockpicker-align-left.popover > .arrow {
  13. left: 25px;
  14. }
  15. .clockpicker-align-top.popover > .arrow {
  16. top: 17px;
  17. }
  18. .clockpicker-align-right.popover > .arrow {
  19. left: auto;
  20. right: 25px;
  21. }
  22. .clockpicker-align-bottom.popover > .arrow {
  23. top: auto;
  24. bottom: 6px;
  25. }
  26. .clockpicker-popover .popover-title {
  27. background-color: #fff;
  28. color: #999;
  29. font-size: 24px;
  30. font-weight: bold;
  31. line-height: 30px;
  32. text-align: center;
  33. }
  34. .clockpicker-popover .popover-title span {
  35. cursor: pointer;
  36. }
  37. .clockpicker-popover .popover-content {
  38. background-color: #f8f8f8;
  39. padding: 12px;
  40. }
  41. .popover-content:last-child {
  42. border-bottom-left-radius: 5px;
  43. border-bottom-right-radius: 5px;
  44. }
  45. .clockpicker-plate {
  46. background-color: #fff;
  47. border: 1px solid #ccc;
  48. border-radius: 50%;
  49. width: 200px;
  50. height: 200px;
  51. overflow: visible;
  52. position: relative;
  53. /* Disable text selection highlighting. Thanks to Hermanya */
  54. -webkit-touch-callout: none;
  55. -webkit-user-select: none;
  56. -khtml-user-select: none;
  57. -moz-user-select: none;
  58. -ms-user-select: none;
  59. user-select: none;
  60. }
  61. .clockpicker-canvas,
  62. .clockpicker-dial {
  63. width: 200px;
  64. height: 200px;
  65. position: absolute;
  66. left: -1px;
  67. top: -1px;
  68. }
  69. .clockpicker-minutes {
  70. visibility: hidden;
  71. }
  72. .clockpicker-tick {
  73. border-radius: 50%;
  74. color: #666;
  75. line-height: 26px;
  76. text-align: center;
  77. width: 26px;
  78. height: 26px;
  79. position: absolute;
  80. cursor: pointer;
  81. }
  82. .clockpicker-tick.active,
  83. .clockpicker-tick:hover {
  84. background-color: rgb(192, 229, 247);
  85. background-color: rgba(0, 149, 221, .25);
  86. }
  87. .clockpicker-button {
  88. background-image: none;
  89. background-color: #fff;
  90. border-width: 1px 0 0;
  91. border-top-left-radius: 0;
  92. border-top-right-radius: 0;
  93. margin: 0;
  94. padding: 10px 0;
  95. }
  96. .clockpicker-button:hover {
  97. background-image: none;
  98. background-color: #ebebeb;
  99. }
  100. .clockpicker-button:focus {
  101. outline: none!important;
  102. }
  103. .clockpicker-dial {
  104. -webkit-transition: -webkit-transform 350ms, opacity 350ms;
  105. -moz-transition: -moz-transform 350ms, opacity 350ms;
  106. -ms-transition: -ms-transform 350ms, opacity 350ms;
  107. -o-transition: -o-transform 350ms, opacity 350ms;
  108. transition: transform 350ms, opacity 350ms;
  109. }
  110. .clockpicker-dial-out {
  111. opacity: 0;
  112. }
  113. .clockpicker-hours.clockpicker-dial-out {
  114. -webkit-transform: scale(1.2, 1.2);
  115. -moz-transform: scale(1.2, 1.2);
  116. -ms-transform: scale(1.2, 1.2);
  117. -o-transform: scale(1.2, 1.2);
  118. transform: scale(1.2, 1.2);
  119. }
  120. .clockpicker-minutes.clockpicker-dial-out {
  121. -webkit-transform: scale(.8, .8);
  122. -moz-transform: scale(.8, .8);
  123. -ms-transform: scale(.8, .8);
  124. -o-transform: scale(.8, .8);
  125. transform: scale(.8, .8);
  126. }
  127. .clockpicker-canvas {
  128. -webkit-transition: opacity 175ms;
  129. -moz-transition: opacity 175ms;
  130. -ms-transition: opacity 175ms;
  131. -o-transition: opacity 175ms;
  132. transition: opacity 175ms;
  133. }
  134. .clockpicker-canvas-out {
  135. opacity: 0.25;
  136. }
  137. .clockpicker-canvas-bearing,
  138. .clockpicker-canvas-fg {
  139. stroke: none;
  140. fill: rgb(0, 149, 221);
  141. }
  142. .clockpicker-canvas-bg {
  143. stroke: none;
  144. fill: rgb(192, 229, 247);
  145. }
  146. .clockpicker-canvas-bg-trans {
  147. fill: rgba(0, 149, 221, .25);
  148. }
  149. .clockpicker-canvas line {
  150. stroke: rgb(0, 149, 221);
  151. stroke-width: 1;
  152. stroke-linecap: round;
  153. /*shape-rendering: crispEdges;*/
  154. }
  155. .clockpicker-button.am-button {
  156. margin: 1px;
  157. padding: 5px;
  158. border: 1px solid rgba(0, 0, 0, .2);
  159. border-radius: 4px;
  160. }
  161. .clockpicker-button.pm-button {
  162. margin: 1px 1px 1px 136px;
  163. padding: 5px;
  164. border: 1px solid rgba(0, 0, 0, .2);
  165. border-radius: 4px;
  166. }