pikaday.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. /*!
  2. * Pikaday
  3. * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
  4. */
  5. .pika-single {
  6. z-index: 9999;
  7. display: block;
  8. position: relative;
  9. color: #333;
  10. background: #fff;
  11. border: 1px solid #ccc;
  12. border-bottom-color: #bbb;
  13. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  14. &.is-hidden {
  15. display: none;
  16. }
  17. &.is-bound {
  18. position: absolute;
  19. box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
  20. }
  21. }
  22. // clear child float (pika-lendar), using the famous micro clearfix hack
  23. // http://nicolasgallagher.com/micro-clearfix-hack/
  24. .pika-single {
  25. *zoom: 1;
  26. &:before,
  27. &:after {
  28. content: " ";
  29. display: table;
  30. }
  31. &:after { clear: both }
  32. }
  33. .pika-lendar {
  34. float: left;
  35. width: 240px;
  36. margin: 8px;
  37. }
  38. .pika-title {
  39. position: relative;
  40. text-align: center;
  41. select {
  42. cursor: pointer;
  43. position: absolute;
  44. z-index: 9998;
  45. margin: 0;
  46. left: 0;
  47. top: 5px;
  48. filter: alpha(opacity=0);
  49. opacity: 0;
  50. }
  51. }
  52. .pika-label {
  53. display: inline-block;
  54. *display: inline;
  55. position: relative;
  56. z-index: 9999;
  57. overflow: hidden;
  58. margin: 0;
  59. padding: 5px 3px;
  60. font-size: 14px;
  61. line-height: 20px;
  62. font-weight: bold;
  63. background-color: #fff;
  64. }
  65. .pika-prev,
  66. .pika-next {
  67. display: block;
  68. cursor: pointer;
  69. position: relative;
  70. outline: none;
  71. border: 0;
  72. padding: 0;
  73. width: 20px;
  74. height: 30px;
  75. text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
  76. white-space: nowrap;
  77. overflow: hidden;
  78. background-color: transparent;
  79. background-position: center center;
  80. background-repeat: no-repeat;
  81. background-size: 75% 75%;
  82. opacity: .5;
  83. *position: absolute;
  84. *top: 0;
  85. &:hover {
  86. opacity: 1;
  87. }
  88. &.is-disabled {
  89. cursor: default;
  90. opacity: .2;
  91. }
  92. }
  93. .pika-prev,
  94. .is-rtl .pika-next {
  95. float: left;
  96. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
  97. *left: 0;
  98. }
  99. .pika-next,
  100. .is-rtl .pika-prev {
  101. float: right;
  102. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
  103. *right: 0;
  104. }
  105. .pika-select {
  106. display: inline-block;
  107. *display: inline;
  108. }
  109. .pika-table {
  110. width: 100%;
  111. border-collapse: collapse;
  112. border-spacing: 0;
  113. border: 0;
  114. th,
  115. td {
  116. width: 14.285714285714286%;
  117. padding: 0;
  118. }
  119. th {
  120. color: #999;
  121. font-size: 12px;
  122. line-height: 25px;
  123. font-weight: bold;
  124. text-align: center;
  125. }
  126. abbr {
  127. border-bottom: none;
  128. cursor: help;
  129. }
  130. }
  131. .pika-button {
  132. cursor: pointer;
  133. display: block;
  134. -moz-box-sizing: border-box;
  135. box-sizing: border-box;
  136. outline: none;
  137. border: 0;
  138. margin: 0;
  139. width: 100%;
  140. padding: 5px;
  141. color: #666;
  142. font-size: 12px;
  143. line-height: 15px;
  144. text-align: right;
  145. background: #f5f5f5;
  146. .is-today & {
  147. color: #33aaff;
  148. font-weight: bold;
  149. }
  150. .is-selected & {
  151. color: #fff;
  152. font-weight: bold;
  153. background: #33aaff;
  154. box-shadow: inset 0 1px 3px #178fe5;
  155. border-radius: 3px;
  156. }
  157. .is-disabled & {
  158. pointer-events: none;
  159. cursor: default;
  160. color: #999;
  161. opacity: .3;
  162. }
  163. &:hover {
  164. color: #fff;
  165. background: #ff8000;
  166. box-shadow: none;
  167. border-radius: 3px;
  168. }
  169. }
  170. .pika-week {
  171. font-size: 11px;
  172. color: #999;
  173. }
  174. .is-inrange .pika-button {
  175. background: #D5E9F7;
  176. }
  177. .is-startrange .pika-button {
  178. color: #fff;
  179. background: #6CB31D;
  180. box-shadow: none;
  181. border-radius: 3px;
  182. }
  183. .is-endrange .pika-button {
  184. color: #fff;
  185. background: #33aaff;
  186. box-shadow: none;
  187. border-radius: 3px;
  188. }