You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

244 line
4.7 KiB

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