datepicker.less 4.8 KB

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