calendar.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. .pika-single {
  2. z-index: 9999;
  3. display: block;
  4. position: relative;
  5. background: #fff;
  6. border-radius: 4px;
  7. }
  8. .pika-single:before {
  9. content: '';
  10. position: absolute;
  11. top: -6px;
  12. right: 7px;
  13. width: 0;
  14. height: 0;
  15. border-left: 7px solid transparent;
  16. border-right: 7px solid transparent;
  17. border-bottom: 7px solid #ffffff;
  18. }
  19. .pika-single.is-hidden {
  20. display: none;
  21. }
  22. .pika-single.is-bound {
  23. position: absolute;
  24. box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
  25. }
  26. .pika-lendar {
  27. float: left;
  28. width: 240px;
  29. margin: 8px;
  30. }
  31. .pika-title {
  32. position: relative;
  33. text-align: center;
  34. display: flex;
  35. align-items: center;
  36. justify-content: center;
  37. margin-bottom: 4px;
  38. }
  39. .pika-label {
  40. display: inline-block;
  41. *display: inline;
  42. position: relative;
  43. z-index: 9999;
  44. overflow: hidden;
  45. margin: 0;
  46. padding: 5px 3px;
  47. background-color: #fff;
  48. font-weight: 500;
  49. font-size: 14px;
  50. line-height: 16px;
  51. }
  52. .pika-title select {
  53. cursor: pointer;
  54. position: absolute;
  55. z-index: 9998;
  56. margin: 0;
  57. left: 0;
  58. top: 5px;
  59. filter: alpha(opacity=0);
  60. opacity: 0;
  61. }
  62. .pika-prev,
  63. .pika-next {
  64. display: block;
  65. cursor: pointer;
  66. position: absolute;
  67. top: 50%;
  68. transform: translateY(-50%);
  69. outline: none;
  70. border: 0;
  71. padding: 0;
  72. min-width: 16px;
  73. max-width: 16px;
  74. height: 16px;
  75. /* hide text using text-indent trick, using width value (it's enough) */
  76. text-indent: 20px;
  77. overflow: hidden;
  78. background-color: transparent;
  79. background-position: center center;
  80. background-repeat: no-repeat;
  81. transition: 0.3s;
  82. }
  83. .pika-prev {
  84. left: 0;
  85. }
  86. .pika-next {
  87. right: 0;
  88. }
  89. .pika-prev,
  90. .is-rtl .pika-next {
  91. background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.47 11.06L7.41664 8L10.47 4.94L9.52997 4L5.52997 8L9.52997 12L10.47 11.06Z' fill='%23757575'/%3E%3C/svg%3E%0A");
  92. }
  93. .pika-next,
  94. .is-rtl .pika-prev {
  95. background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.53003 4.94L8.58336 8L5.53003 11.06L6.47003 12L10.47 8L6.47003 4L5.53003 4.94Z' fill='%23757575'/%3E%3C/svg%3E%0A");
  96. }
  97. .pika-prev.is-disabled,
  98. .pika-next.is-disabled {
  99. cursor: default;
  100. opacity: .2;
  101. }
  102. .pika-select {
  103. display: inline-block;
  104. *display: inline;
  105. }
  106. .pika-table {
  107. width: 100%;
  108. border-collapse: collapse;
  109. border-spacing: 0;
  110. border: 0;
  111. }
  112. .pika-table thead {
  113. display: none;
  114. }
  115. .pika-table th,
  116. .pika-table td {
  117. padding: 2px 0;
  118. }
  119. .pika-button {
  120. cursor: pointer;
  121. display: flex;
  122. align-items: center;
  123. justify-content: center;
  124. box-sizing: border-box;
  125. outline: none;
  126. border: 0;
  127. padding: 5px;
  128. font-weight: 500;
  129. font-size: 12px;
  130. line-height: 16px;
  131. color: #000000;
  132. min-width: 30px;
  133. max-width: 30px;
  134. height: 30px;
  135. border-radius: 15px;
  136. margin: 0 auto;
  137. transition: 0.3s;
  138. }
  139. .is-today .pika-button {
  140. color: #fff;
  141. background: #0D63B3;
  142. }
  143. .is-selected .pika-button {
  144. color: #fff;
  145. font-weight: bold;
  146. background: #0D63B3;
  147. }
  148. .is-inrange .pika-button {
  149. background: #D5E9F7;
  150. }
  151. .is-startrange .pika-button {
  152. color: #fff;
  153. background: #6CB31D;
  154. box-shadow: none;
  155. }
  156. .is-endrange .pika-button {
  157. color: #fff;
  158. background: #0D63B3;
  159. box-shadow: none;
  160. }
  161. .is-disabled .pika-button {
  162. pointer-events: none;
  163. cursor: default;
  164. color: #F0F0F0;
  165. }
  166. .pika-button:hover {
  167. color: #fff;
  168. background: #0D63B3;
  169. box-shadow: none;
  170. }
  171. .pika-table abbr {
  172. border-bottom: none;
  173. cursor: help;
  174. }