daterangepicker.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. .daterangepicker.dropdown-menu {
  2. max-width: none;
  3. }
  4. .daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
  5. float: left;
  6. margin: 4px;
  7. }
  8. .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {
  9. float: right;
  10. margin: 4px;
  11. }
  12. .daterangepicker .ranges {
  13. width: 160px;
  14. text-align: left;
  15. }
  16. .daterangepicker .ranges .range_inputs>div {
  17. float: left;
  18. }
  19. .daterangepicker .ranges .range_inputs>div:nth-child(2) {
  20. padding-left: 11px;
  21. }
  22. .daterangepicker .calendar {
  23. display: none;
  24. max-width: 230px;
  25. }
  26. .daterangepicker .calendar th, .daterangepicker .calendar td {
  27. font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  28. white-space: nowrap;
  29. text-align: center;
  30. }
  31. .daterangepicker .ranges label {
  32. color: #333;
  33. font-size: 11px;
  34. margin-bottom: 2px;
  35. text-transform: uppercase;
  36. text-shadow: 1px 1px 0 #fff;
  37. }
  38. .daterangepicker .ranges input {
  39. font-size: 11px;
  40. }
  41. .daterangepicker .ranges ul {
  42. list-style: none;
  43. margin: 0;
  44. padding: 0;
  45. }
  46. .daterangepicker .ranges li {
  47. font-size: 13px;
  48. background: #f5f5f5;
  49. border: 1px solid #f5f5f5;
  50. color: #08c;
  51. padding: 3px 12px;
  52. margin-bottom: 8px;
  53. -webkit-border-radius: 5px;
  54. -moz-border-radius: 5px;
  55. border-radius: 5px;
  56. cursor: pointer;
  57. }
  58. .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  59. background: #08c;
  60. border: 1px solid #08c;
  61. color: #fff;
  62. }
  63. .daterangepicker .calendar {
  64. border: 1px solid #ddd;
  65. padding: 4px;
  66. border-radius: 4px;
  67. background: #fff;
  68. }
  69. .daterangepicker {
  70. position: absolute;
  71. background: #fff;
  72. top: 100px;
  73. left: 20px;
  74. padding: 4px;
  75. margin-top: 1px;
  76. -webkit-border-radius: 4px;
  77. -moz-border-radius: 4px;
  78. border-radius: 4px;
  79. }
  80. .daterangepicker.opensleft:before {
  81. position: absolute;
  82. top: -7px;
  83. right: 9px;
  84. display: inline-block;
  85. border-right: 7px solid transparent;
  86. border-bottom: 7px solid #ccc;
  87. border-left: 7px solid transparent;
  88. border-bottom-color: rgba(0, 0, 0, 0.2);
  89. content: '';
  90. }
  91. .daterangepicker.opensleft:after {
  92. position: absolute;
  93. top: -6px;
  94. right: 10px;
  95. display: inline-block;
  96. border-right: 6px solid transparent;
  97. border-bottom: 6px solid #fff;
  98. border-left: 6px solid transparent;
  99. content: '';
  100. }
  101. .daterangepicker.opensright:before {
  102. position: absolute;
  103. top: -7px;
  104. left: 9px;
  105. display: inline-block;
  106. border-right: 7px solid transparent;
  107. border-bottom: 7px solid #ccc;
  108. border-left: 7px solid transparent;
  109. border-bottom-color: rgba(0, 0, 0, 0.2);
  110. content: '';
  111. }
  112. .daterangepicker.opensright:after {
  113. position: absolute;
  114. top: -6px;
  115. left: 10px;
  116. display: inline-block;
  117. border-right: 6px solid transparent;
  118. border-bottom: 6px solid #fff;
  119. border-left: 6px solid transparent;
  120. content: '';
  121. }
  122. .daterangepicker table {
  123. width: 100%;
  124. margin: 0;
  125. }
  126. .daterangepicker td, .daterangepicker th {
  127. text-align: center;
  128. width: 20px;
  129. height: 20px;
  130. -webkit-border-radius: 4px;
  131. -moz-border-radius: 4px;
  132. border-radius: 4px;
  133. cursor: pointer;
  134. white-space: nowrap;
  135. }
  136. .daterangepicker td.off {
  137. color: #999;
  138. }
  139. .daterangepicker td.disabled {
  140. color: #999;
  141. }
  142. .daterangepicker td.available:hover, .daterangepicker th.available:hover {
  143. background: #eee;
  144. }
  145. .daterangepicker td.active, .daterangepicker td.active:hover {
  146. background-color: #006dcc;
  147. background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  148. background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
  149. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  150. background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  151. background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  152. background-image: linear-gradient(top, #0088cc, #0044cc);
  153. background-repeat: repeat-x;
  154. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
  155. border-color: #0044cc #0044cc #002a80;
  156. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  157. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  158. color: #fff;
  159. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  160. }
  161. .daterangepicker td.week, .daterangepicker th.week {
  162. font-size: 80%;
  163. color: #ccc;
  164. }