datepicker.less 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. .datepicker {
  2. padding: 4px;
  3. .border-radius(4px);
  4. &-inline {
  5. width: 220px;
  6. }
  7. direction: ltr;
  8. &&-rtl {
  9. direction: rtl;
  10. table tr td span {
  11. float: right;
  12. }
  13. }
  14. &-dropdown {
  15. top: 0;
  16. left: 0;
  17. &:before {
  18. content: '';
  19. display: inline-block;
  20. border-left: 7px solid transparent;
  21. border-right: 7px solid transparent;
  22. border-bottom: 7px solid #ccc;
  23. border-top: 0;
  24. border-bottom-color: rgba(0,0,0,.2);
  25. position: absolute;
  26. }
  27. &:after {
  28. content: '';
  29. display: inline-block;
  30. border-left: 6px solid transparent;
  31. border-right: 6px solid transparent;
  32. border-bottom: 6px solid @white;
  33. border-top: 0;
  34. position: absolute;
  35. }
  36. &.datepicker-orient-left:before { left: 6px; }
  37. &.datepicker-orient-left:after { left: 7px; }
  38. &.datepicker-orient-right:before { right: 6px; }
  39. &.datepicker-orient-right:after { right: 7px; }
  40. &.datepicker-orient-top:before { top: -7px; }
  41. &.datepicker-orient-top:after { top: -6px; }
  42. &.datepicker-orient-bottom:before {
  43. bottom: -7px;
  44. border-bottom: 0;
  45. border-top: 7px solid #999;
  46. }
  47. &.datepicker-orient-bottom:after {
  48. bottom: -6px;
  49. border-bottom: 0;
  50. border-top: 6px solid @white;
  51. }
  52. }
  53. > div {
  54. display: none;
  55. }
  56. &.days .datepicker-days,
  57. &.months .datepicker-months,
  58. &.years .datepicker-years {
  59. display: block;
  60. }
  61. table {
  62. margin: 0;
  63. -webkit-touch-callout: none;
  64. -webkit-user-select: none;
  65. -khtml-user-select: none;
  66. -moz-user-select: none;
  67. -ms-user-select: none;
  68. user-select: none;
  69. }
  70. td, th {
  71. text-align: center;
  72. width: 20px;
  73. height: 20px;
  74. .border-radius(4px);
  75. border: none;
  76. }
  77. // Inline display inside a table presents some problems with
  78. // border and background colors.
  79. .table-striped & table tr {
  80. td, th {
  81. background-color: transparent;
  82. }
  83. }
  84. table tr td {
  85. &.day:hover,
  86. &.day.focused {
  87. background: @grayLighter;
  88. cursor: pointer;
  89. }
  90. &.old,
  91. &.new {
  92. color: @grayLight;
  93. }
  94. &.disabled,
  95. &.disabled:hover {
  96. background: none;
  97. color: @grayLight;
  98. cursor: default;
  99. }
  100. &.highlighted {
  101. background: @infoBackground;
  102. border-radius: 0;
  103. }
  104. &.today,
  105. &.today:hover,
  106. &.today.disabled,
  107. &.today.disabled:hover {
  108. @todayBackground: lighten(@orange, 30%);
  109. .buttonBackground(@todayBackground, spin(@todayBackground, 20));
  110. color: #000;
  111. }
  112. &.today:hover:hover { // Thank bootstrap 2.0 for this selector...
  113. // TODO: Bump min BS to 2.1, use @textColor in buttonBackground above
  114. color: #000;
  115. }
  116. &.today.active:hover {
  117. color: #fff;
  118. }
  119. &.range,
  120. &.range:hover,
  121. &.range.disabled,
  122. &.range.disabled:hover {
  123. background: @grayLighter;
  124. .border-radius(0);
  125. }
  126. &.range.today,
  127. &.range.today:hover,
  128. &.range.today.disabled,
  129. &.range.today.disabled:hover {
  130. @todayBackground: mix(@orange, @grayLighter, 50%);
  131. .buttonBackground(@todayBackground, spin(@todayBackground, 20));
  132. .border-radius(0);
  133. }
  134. &.selected,
  135. &.selected:hover,
  136. &.selected.disabled,
  137. &.selected.disabled:hover {
  138. .buttonBackground(lighten(@grayLight, 10), darken(@grayLight, 10));
  139. color: #fff;
  140. text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  141. }
  142. &.active,
  143. &.active:hover,
  144. &.active.disabled,
  145. &.active.disabled:hover {
  146. .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
  147. color: #fff;
  148. text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  149. }
  150. span {
  151. display: block;
  152. width: 23%;
  153. height: 54px;
  154. line-height: 54px;
  155. float: left;
  156. margin: 1%;
  157. cursor: pointer;
  158. .border-radius(4px);
  159. &:hover {
  160. background: @grayLighter;
  161. }
  162. &.disabled,
  163. &.disabled:hover {
  164. background: none;
  165. color: @grayLight;
  166. cursor: default;
  167. }
  168. &.active,
  169. &.active:hover,
  170. &.active.disabled,
  171. &.active.disabled:hover {
  172. .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
  173. color: #fff;
  174. text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  175. }
  176. &.old,
  177. &.new {
  178. color: @grayLight;
  179. }
  180. }
  181. }
  182. .datepicker-switch {
  183. width: 145px;
  184. }
  185. thead tr:first-child th,
  186. tfoot tr th {
  187. cursor: pointer;
  188. &:hover {
  189. background: @grayLighter;
  190. }
  191. }
  192. // Basic styling for calendar-week cells
  193. .cw {
  194. font-size: 10px;
  195. width: 12px;
  196. padding: 0 2px 0 5px;
  197. vertical-align: middle;
  198. }
  199. thead tr:first-child .cw {
  200. cursor: default;
  201. background-color: transparent;
  202. }
  203. }
  204. .input-append,
  205. .input-prepend {
  206. &.date .add-on {
  207. cursor: pointer;
  208. i {
  209. margin-top: 3px;
  210. }
  211. }
  212. }
  213. .input-daterange {
  214. input {
  215. text-align:center;
  216. }
  217. input:first-child {
  218. .border-radius(3px 0 0 3px);
  219. }
  220. input:last-child {
  221. .border-radius(0 3px 3px 0);
  222. }
  223. .add-on {
  224. display: inline-block;
  225. width: auto;
  226. min-width: 16px;
  227. height: @baseLineHeight;
  228. padding: 4px 5px;
  229. font-weight: normal;
  230. line-height: @baseLineHeight;
  231. text-align: center;
  232. text-shadow: 0 1px 0 @white;
  233. vertical-align: middle;
  234. background-color: @grayLighter;
  235. border: 1px solid #ccc;
  236. margin-left: -5px;
  237. margin-right: -5px;
  238. }
  239. }