daterangepicker-bs3.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. /*!
  2. * Stylesheet for the Date Range Picker, for use with Bootstrap 3.x
  3. *
  4. * Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
  5. * Licensed under the Apache License v2.0
  6. * http://www.apache.org/licenses/LICENSE-2.0
  7. *
  8. * Built for http://www.improvely.com
  9. */
  10. .daterangepicker.dropdown-menu {
  11. max-width: none;
  12. z-index: 3000;
  13. }
  14. .daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
  15. float: left;
  16. margin: 4px;
  17. }
  18. .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {
  19. float: right;
  20. margin: 4px;
  21. }
  22. .daterangepicker .ranges {
  23. width: 160px;
  24. text-align: left;
  25. }
  26. .daterangepicker .ranges .range_inputs>div {
  27. float: left;
  28. }
  29. .daterangepicker .ranges .range_inputs>div:nth-child(2) {
  30. padding-left: 11px;
  31. }
  32. .daterangepicker .calendar {
  33. display: none;
  34. max-width: 270px;
  35. }
  36. .daterangepicker.show-calendar .calendar {
  37. display: block;
  38. }
  39. .daterangepicker .calendar.single .calendar-date {
  40. border: none;
  41. }
  42. .daterangepicker .calendar th, .daterangepicker .calendar td {
  43. font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  44. white-space: nowrap;
  45. text-align: center;
  46. min-width: 32px;
  47. }
  48. .daterangepicker .daterangepicker_start_input label,
  49. .daterangepicker .daterangepicker_end_input label {
  50. color: #333;
  51. display: block;
  52. font-size: 11px;
  53. font-weight: normal;
  54. height: 20px;
  55. line-height: 20px;
  56. margin-bottom: 2px;
  57. text-shadow: #fff 1px 1px 0px;
  58. text-transform: uppercase;
  59. width: 74px;
  60. }
  61. .daterangepicker .ranges input {
  62. font-size: 11px;
  63. }
  64. .daterangepicker .ranges .input-mini {
  65. background-color: #eee;
  66. border: 1px solid #ccc;
  67. border-radius: 4px;
  68. color: #555;
  69. display: block;
  70. font-size: 11px;
  71. height: 30px;
  72. line-height: 30px;
  73. vertical-align: middle;
  74. margin: 0 0 10px 0;
  75. padding: 0 6px;
  76. width: 74px;
  77. }
  78. .daterangepicker .ranges ul {
  79. list-style: none;
  80. margin: 0;
  81. padding: 0;
  82. }
  83. .daterangepicker .ranges li {
  84. font-size: 13px;
  85. background: #f5f5f5;
  86. border: 1px solid #f5f5f5;
  87. color: #08c;
  88. padding: 3px 12px;
  89. margin-bottom: 8px;
  90. -webkit-border-radius: 5px;
  91. -moz-border-radius: 5px;
  92. border-radius: 5px;
  93. cursor: pointer;
  94. }
  95. .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  96. background: #08c;
  97. border: 1px solid #08c;
  98. color: #fff;
  99. }
  100. .daterangepicker .calendar-date {
  101. border: 1px solid #ddd;
  102. padding: 4px;
  103. border-radius: 4px;
  104. background: #fff;
  105. }
  106. .daterangepicker .calendar-time {
  107. text-align: center;
  108. margin: 8px auto 0 auto;
  109. line-height: 30px;
  110. }
  111. .daterangepicker {
  112. position: absolute;
  113. background: #fff;
  114. top: 100px;
  115. left: 20px;
  116. padding: 4px;
  117. margin-top: 1px;
  118. -webkit-border-radius: 4px;
  119. -moz-border-radius: 4px;
  120. border-radius: 4px;
  121. }
  122. .daterangepicker.opensleft:before {
  123. position: absolute;
  124. top: -7px;
  125. right: 9px;
  126. display: inline-block;
  127. border-right: 7px solid transparent;
  128. border-bottom: 7px solid #ccc;
  129. border-left: 7px solid transparent;
  130. border-bottom-color: rgba(0, 0, 0, 0.2);
  131. content: '';
  132. }
  133. .daterangepicker.opensleft:after {
  134. position: absolute;
  135. top: -6px;
  136. right: 10px;
  137. display: inline-block;
  138. border-right: 6px solid transparent;
  139. border-bottom: 6px solid #fff;
  140. border-left: 6px solid transparent;
  141. content: '';
  142. }
  143. .daterangepicker.opensright:before {
  144. position: absolute;
  145. top: -7px;
  146. left: 9px;
  147. display: inline-block;
  148. border-right: 7px solid transparent;
  149. border-bottom: 7px solid #ccc;
  150. border-left: 7px solid transparent;
  151. border-bottom-color: rgba(0, 0, 0, 0.2);
  152. content: '';
  153. }
  154. .daterangepicker.opensright:after {
  155. position: absolute;
  156. top: -6px;
  157. left: 10px;
  158. display: inline-block;
  159. border-right: 6px solid transparent;
  160. border-bottom: 6px solid #fff;
  161. border-left: 6px solid transparent;
  162. content: '';
  163. }
  164. .daterangepicker table {
  165. width: 100%;
  166. margin: 0;
  167. }
  168. .daterangepicker td, .daterangepicker th {
  169. text-align: center;
  170. width: 20px;
  171. height: 20px;
  172. -webkit-border-radius: 4px;
  173. -moz-border-radius: 4px;
  174. border-radius: 4px;
  175. cursor: pointer;
  176. white-space: nowrap;
  177. }
  178. .daterangepicker td.off {
  179. color: #999;
  180. }
  181. .daterangepicker td.disabled {
  182. color: #999;
  183. }
  184. .daterangepicker td.available:hover, .daterangepicker th.available:hover {
  185. background: #eee;
  186. }
  187. .daterangepicker td.in-range {
  188. background: #ebf4f8;
  189. -webkit-border-radius: 0;
  190. -moz-border-radius: 0;
  191. border-radius: 0;
  192. }
  193. .daterangepicker td.active, .daterangepicker td.active:hover {
  194. background-color: #357ebd;
  195. border-color: #3071a9;
  196. color: #fff;
  197. }
  198. .daterangepicker td.week, .daterangepicker th.week {
  199. font-size: 80%;
  200. color: #ccc;
  201. }
  202. .daterangepicker select.monthselect, .daterangepicker select.yearselect {
  203. font-size: 12px;
  204. padding: 1px;
  205. height: auto;
  206. margin: 0;
  207. cursor: default;
  208. }
  209. .daterangepicker select.monthselect {
  210. margin-right: 2%;
  211. width: 56%;
  212. }
  213. .daterangepicker select.yearselect {
  214. width: 40%;
  215. }
  216. .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect {
  217. width: 50px;
  218. margin-bottom: 0;
  219. }
  220. .daterangepicker_start_input {
  221. float: left;
  222. }
  223. .daterangepicker_end_input {
  224. float: left;
  225. padding-left: 11px
  226. }
  227. .daterangepicker th.month {
  228. width: auto;
  229. }