bs-datepicker.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. /* .bs-datepicker */
  2. .bs-datepicker {
  3. display: flex;
  4. align-items: stretch;
  5. flex-flow: row wrap;
  6. background: #fff;
  7. box-shadow: 0 0 10px 0 #aaa;
  8. position: relative;
  9. z-index: 1;
  10. /* button */
  11. /* .bs-datepicker-head */
  12. /* .bs-datepicker-body */
  13. /* .current-timedate */
  14. /* .bs-datepicker-multiple */
  15. /* .bs-datepicker-btns */
  16. /*.bs-datepicker-custom-range */
  17. /* .bs-datepicker-predefined-btns */
  18. /* .bs-datepicker-buttons */ }
  19. .bs-datepicker:after {
  20. clear: both;
  21. content: '';
  22. display: block; }
  23. .bs-datepicker bs-day-picker {
  24. float: left; }
  25. .bs-datepicker button:hover,
  26. .bs-datepicker button:focus,
  27. .bs-datepicker button:active,
  28. .bs-datepicker input:hover,
  29. .bs-datepicker input:focus,
  30. .bs-datepicker input:active,
  31. .bs-datepicker-btns button:hover,
  32. .bs-datepicker-btns button:focus,
  33. .bs-datepicker-btns button:active,
  34. .bs-datepicker-predefined-btns button:active,
  35. .bs-datepicker-predefined-btns button:focus {
  36. outline: none; }
  37. .bs-datepicker-head {
  38. min-width: 270px;
  39. height: 50px;
  40. padding: 10px;
  41. border-radius: 3px 3px 0 0;
  42. text-align: justify;
  43. /* .bs-datepicker-head button */ }
  44. .bs-datepicker-head:after {
  45. content: "";
  46. display: inline-block;
  47. vertical-align: top;
  48. width: 100%; }
  49. .bs-datepicker-head button {
  50. display: inline-block;
  51. vertical-align: top;
  52. padding: 0;
  53. height: 30px;
  54. line-height: 30px;
  55. border: 0;
  56. background: transparent;
  57. text-align: center;
  58. cursor: pointer;
  59. color: #fff;
  60. transition: 0.3s; }
  61. .bs-datepicker-head button[disabled], .bs-datepicker-head button[disabled]:hover, .bs-datepicker-head button[disabled]:active {
  62. background: rgba(221, 221, 221, 0.3);
  63. color: #f5f5f5;
  64. cursor: not-allowed; }
  65. .bs-datepicker-head button.next, .bs-datepicker-head button.previous {
  66. border-radius: 50%;
  67. width: 30px;
  68. height: 30px; }
  69. .bs-datepicker-head button.next span, .bs-datepicker-head button.previous span {
  70. font-size: 28px;
  71. line-height: 1;
  72. display: inline-block;
  73. position: relative;
  74. height: 100%;
  75. width: 100%;
  76. border-radius: 50%; }
  77. .bs-datepicker-head button.current {
  78. border-radius: 15px;
  79. max-width: 155px;
  80. padding: 0 13px; }
  81. .bs-datepicker-head button:hover {
  82. background-color: rgba(0, 0, 0, 0.1); }
  83. .bs-datepicker-head button:active {
  84. background-color: rgba(0, 0, 0, 0.2); }
  85. .bs-datepicker-body {
  86. padding: 10px;
  87. border-radius: 0 0 3px 3px;
  88. min-height: 232px;
  89. min-width: 278px;
  90. border: 1px solid #e9edf0;
  91. /* .bs-datepicker-body table */ }
  92. .bs-datepicker-body .days.weeks {
  93. position: relative;
  94. z-index: 1; }
  95. .bs-datepicker-body table {
  96. width: 100%;
  97. border-collapse: separate;
  98. border-spacing: 0;
  99. /* .bs-datepicker-body table.days */
  100. /* .bs-datepicker-body table.weeks */ }
  101. .bs-datepicker-body table th {
  102. font-size: 13px;
  103. color: #9aaec1;
  104. font-weight: 400;
  105. text-align: center; }
  106. .bs-datepicker-body table td {
  107. color: #54708b;
  108. text-align: center;
  109. position: relative;
  110. padding: 0; }
  111. .bs-datepicker-body table td span {
  112. display: block;
  113. margin: 0 auto;
  114. font-size: 13px;
  115. border-radius: 50%;
  116. position: relative;
  117. /*z-index: 1;*/
  118. -moz-user-select: none;
  119. -webkit-user-select: none;
  120. -ms-user-select: none; }
  121. .bs-datepicker-body table td:not(.disabled):not(.week) span:not(.disabled):not(.is-other-month) {
  122. cursor: pointer; }
  123. .bs-datepicker-body table td.is-highlighted:not(.disabled):not(.selected) span,
  124. .bs-datepicker-body table td span.is-highlighted:not(.disabled):not(.selected) {
  125. background-color: #e9edf0;
  126. transition: 0s; }
  127. .bs-datepicker-body table td.is-active-other-month:not(.disabled):not(.selected) span,
  128. .bs-datepicker-body table td span.is-active-other-month:not(.disabled):not(.selected) {
  129. background-color: #e9edf0;
  130. transition: 0s;
  131. cursor: pointer; }
  132. .bs-datepicker-body table td span.disabled,
  133. .bs-datepicker-body table td.disabled span {
  134. color: #9aaec1; }
  135. .bs-datepicker-body table td span.selected,
  136. .bs-datepicker-body table td.selected span {
  137. color: #fff; }
  138. .bs-datepicker-body table td span.is-other-month,
  139. .bs-datepicker-body table td.is-other-month span {
  140. color: rgba(0, 0, 0, 0.25); }
  141. .bs-datepicker-body table td.active {
  142. position: relative; }
  143. .bs-datepicker-body table td.active.select-start:before {
  144. left: 35%; }
  145. .bs-datepicker-body table td.active.select-end:before {
  146. left: -85%; }
  147. .bs-datepicker-body table td span.active.select-start:after,
  148. .bs-datepicker-body table td span.active.select-end:after,
  149. .bs-datepicker-body table td.active.select-start span:after,
  150. .bs-datepicker-body table td.active.select-end span:after {
  151. content: "";
  152. display: block;
  153. position: absolute;
  154. z-index: -1;
  155. width: 100%;
  156. height: 100%;
  157. transition: 0.3s;
  158. top: 0;
  159. border-radius: 50%; }
  160. .bs-datepicker-body table td:before,
  161. .bs-datepicker-body table td span:before {
  162. content: "";
  163. display: block;
  164. position: absolute;
  165. z-index: -1;
  166. top: 6px;
  167. bottom: 6px;
  168. left: -2px;
  169. right: -2px;
  170. box-sizing: content-box;
  171. background: transparent; }
  172. .bs-datepicker-body table td.active.select-start + td.active:before {
  173. left: -20%; }
  174. .bs-datepicker-body table td:last-child.active:before {
  175. border-radius: 0 3px 3px 0;
  176. width: 125%;
  177. left: -25%; }
  178. .bs-datepicker-body table td span[class*="select-"],
  179. .bs-datepicker-body table td[class*="select-"] span {
  180. border-radius: 50%;
  181. color: #fff; }
  182. .bs-datepicker-body table.days td.active:not(.select-start):before, .bs-datepicker-body table.days td.in-range:not(.select-start):before,
  183. .bs-datepicker-body table.days span.active:not(.select-start):before,
  184. .bs-datepicker-body table.days span.in-range:not(.select-start):before {
  185. background: #e9edf0; }
  186. .bs-datepicker-body table.days span {
  187. width: 32px;
  188. height: 32px;
  189. line-height: 32px; }
  190. .bs-datepicker-body table.days span.select-start {
  191. z-index: 2; }
  192. .bs-datepicker-body table.days span.is-highlighted.in-range:before, .bs-datepicker-body table.days span.in-range.select-end:before {
  193. background: none;
  194. right: 0;
  195. left: 0; }
  196. .bs-datepicker-body table.days td.select-start + td.select-end:before,
  197. .bs-datepicker-body table.days td.select-start + td.is-highlighted:before,
  198. .bs-datepicker-body table.days td.active + td.is-highlighted:before,
  199. .bs-datepicker-body table.days td.active + td.select-end:before,
  200. .bs-datepicker-body table.days td.in-range + td.is-highlighted:before,
  201. .bs-datepicker-body table.days td.in-range + td.select-end:before {
  202. background: #e9edf0;
  203. width: 100%; }
  204. .bs-datepicker-body table.weeks tr td:nth-child(2).active:before {
  205. border-radius: 3px 0 0 3px;
  206. left: 0;
  207. width: 100%; }
  208. .bs-datepicker-body table:not(.weeks) tr td:first-child:before {
  209. border-radius: 3px 0 0 3px; }
  210. .bs-datepicker-body table.years td span {
  211. width: 46px;
  212. height: 46px;
  213. line-height: 45px;
  214. margin: 0 auto; }
  215. .bs-datepicker-body table.years tr:not(:last-child) td span {
  216. margin-bottom: 8px; }
  217. .bs-datepicker-body table.months td {
  218. height: 52px; }
  219. .bs-datepicker-body table.months td span {
  220. padding: 6px;
  221. border-radius: 15px; }
  222. .bs-datepicker .current-timedate {
  223. color: #54708b;
  224. font-size: 15px;
  225. text-align: center;
  226. height: 30px;
  227. line-height: 30px;
  228. border-radius: 20px;
  229. border: 1px solid #e9edf0;
  230. margin-bottom: 10px;
  231. cursor: pointer;
  232. text-transform: uppercase;
  233. -moz-user-select: none;
  234. -webkit-user-select: none;
  235. -ms-user-select: none; }
  236. .bs-datepicker .current-timedate span:not(:empty):before {
  237. content: "";
  238. width: 15px;
  239. height: 16px;
  240. display: inline-block;
  241. margin-right: 4px;
  242. vertical-align: text-bottom;
  243. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC); }
  244. .bs-datepicker-multiple {
  245. border-radius: 4px 0 0 4px; }
  246. .bs-datepicker-multiple + .bs-datepicker-multiple {
  247. margin-left: 10px; }
  248. .bs-datepicker-multiple .bs-datepicker {
  249. box-shadow: none;
  250. position: relative; }
  251. .bs-datepicker-multiple .bs-datepicker:not(:last-child) {
  252. padding-right: 10px; }
  253. .bs-datepicker-multiple .bs-datepicker + .bs-datepicker:after {
  254. content: "";
  255. display: block;
  256. width: 14px;
  257. height: 10px;
  258. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=);
  259. position: absolute;
  260. top: 25px;
  261. left: -8px; }
  262. .bs-datepicker-multiple .bs-datepicker .left {
  263. float: left; }
  264. .bs-datepicker-multiple .bs-datepicker .right {
  265. float: right; }
  266. .bs-datepicker-container {
  267. padding: 15px; }
  268. .bs-datepicker .bs-media-container {
  269. display: flex; }
  270. @media (max-width: 768px) {
  271. .bs-datepicker .bs-media-container {
  272. flex-direction: column; } }
  273. .bs-datepicker-custom-range {
  274. padding: 15px;
  275. background: #eee; }
  276. .bs-datepicker-predefined-btns button {
  277. width: 100%;
  278. display: block;
  279. height: 30px;
  280. background-color: #9aaec1;
  281. border-radius: 4px;
  282. color: #fff;
  283. border: 0;
  284. margin-bottom: 10px;
  285. padding: 0 18px;
  286. text-align: left;
  287. transition: 0.3s; }
  288. .bs-datepicker-predefined-btns button:active, .bs-datepicker-predefined-btns button:hover {
  289. background-color: #54708b; }
  290. .bs-datepicker-buttons {
  291. display: flex;
  292. flex-flow: row wrap;
  293. justify-content: flex-end;
  294. padding-top: 10px;
  295. border-top: 1px solid #e9edf0; }
  296. .bs-datepicker-buttons .btn-default {
  297. margin-left: 10px; }
  298. /* .bs-timepicker */
  299. .bs-timepicker-container {
  300. padding: 10px 0; }
  301. .bs-timepicker-label {
  302. color: #54708b;
  303. margin-bottom: 10px; }
  304. .bs-timepicker-controls {
  305. display: inline-block;
  306. vertical-align: top;
  307. margin-right: 10px; }
  308. .bs-timepicker-controls button {
  309. width: 20px;
  310. height: 20px;
  311. border-radius: 50%;
  312. border: 0;
  313. background-color: #e9edf0;
  314. color: #54708b;
  315. font-size: 16px;
  316. font-weight: 700;
  317. vertical-align: middle;
  318. line-height: 0;
  319. padding: 0;
  320. transition: 0.3s; }
  321. .bs-timepicker-controls button:hover {
  322. background-color: #d5dadd; }
  323. .bs-timepicker-controls input {
  324. width: 35px;
  325. height: 25px;
  326. border-radius: 13px;
  327. text-align: center;
  328. border: 1px solid #e9edf0; }
  329. .bs-timepicker .switch-time-format {
  330. text-transform: uppercase;
  331. min-width: 54px;
  332. height: 25px;
  333. border-radius: 20px;
  334. border: 1px solid #e9edf0;
  335. background: #fff;
  336. color: #54708b;
  337. font-size: 13px; }
  338. .bs-timepicker .switch-time-format img {
  339. vertical-align: initial;
  340. margin-left: 4px; }
  341. bs-datepicker-container,
  342. bs-daterangepicker-container {
  343. z-index: 1080; }
  344. /* screen size < 1024px */
  345. @media (max-width: 768px) {
  346. .bs-datepicker-multiple {
  347. display: flex; }
  348. .bs-datepicker-multiple + .bs-datepicker-multiple {
  349. margin-top: 10px;
  350. margin-left: 0; } }
  351. /* theming */
  352. .theme-default .bs-datepicker-head {
  353. background-color: #777; }
  354. .theme-default .bs-datepicker-body table td span.selected,
  355. .theme-default .bs-datepicker-body table td.selected span,
  356. .theme-default .bs-datepicker-body table td span[class*="select-"]:after,
  357. .theme-default .bs-datepicker-body table td[class*="select-"] span:after {
  358. background-color: #777; }
  359. .theme-default .bs-datepicker-body table td.week span {
  360. color: #777; }
  361. .theme-default .bs-datepicker-body table td.active-week span:hover {
  362. cursor: pointer;
  363. background-color: #777;
  364. color: #fff;
  365. opacity: 0.5;
  366. transition: 0s; }
  367. .theme-green .bs-datepicker-head {
  368. background-color: #5cb85c; }
  369. .theme-green .bs-datepicker-body table td span.selected,
  370. .theme-green .bs-datepicker-body table td.selected span,
  371. .theme-green .bs-datepicker-body table td span[class*="select-"]:after,
  372. .theme-green .bs-datepicker-body table td[class*="select-"] span:after {
  373. background-color: #5cb85c; }
  374. .theme-green .bs-datepicker-body table td.week span {
  375. color: #5cb85c; }
  376. .theme-green .bs-datepicker-body table td.active-week span:hover {
  377. cursor: pointer;
  378. background-color: #5cb85c;
  379. color: #fff;
  380. opacity: 0.5;
  381. transition: 0s; }
  382. .theme-blue .bs-datepicker-head {
  383. background-color: #5bc0de; }
  384. .theme-blue .bs-datepicker-body table td span.selected,
  385. .theme-blue .bs-datepicker-body table td.selected span,
  386. .theme-blue .bs-datepicker-body table td span[class*="select-"]:after,
  387. .theme-blue .bs-datepicker-body table td[class*="select-"] span:after {
  388. background-color: #5bc0de; }
  389. .theme-blue .bs-datepicker-body table td.week span {
  390. color: #5bc0de; }
  391. .theme-blue .bs-datepicker-body table td.active-week span:hover {
  392. cursor: pointer;
  393. background-color: #5bc0de;
  394. color: #fff;
  395. opacity: 0.5;
  396. transition: 0s; }
  397. .theme-dark-blue .bs-datepicker-head {
  398. background-color: #337ab7; }
  399. .theme-dark-blue .bs-datepicker-body table td span.selected,
  400. .theme-dark-blue .bs-datepicker-body table td.selected span,
  401. .theme-dark-blue .bs-datepicker-body table td span[class*="select-"]:after,
  402. .theme-dark-blue .bs-datepicker-body table td[class*="select-"] span:after {
  403. background-color: #337ab7; }
  404. .theme-dark-blue .bs-datepicker-body table td.week span {
  405. color: #337ab7; }
  406. .theme-dark-blue .bs-datepicker-body table td.active-week span:hover {
  407. cursor: pointer;
  408. background-color: #337ab7;
  409. color: #fff;
  410. opacity: 0.5;
  411. transition: 0s; }
  412. .theme-red .bs-datepicker-head {
  413. background-color: #d9534f; }
  414. .theme-red .bs-datepicker-body table td span.selected,
  415. .theme-red .bs-datepicker-body table td.selected span,
  416. .theme-red .bs-datepicker-body table td span[class*="select-"]:after,
  417. .theme-red .bs-datepicker-body table td[class*="select-"] span:after {
  418. background-color: #d9534f; }
  419. .theme-red .bs-datepicker-body table td.week span {
  420. color: #d9534f; }
  421. .theme-red .bs-datepicker-body table td.active-week span:hover {
  422. cursor: pointer;
  423. background-color: #d9534f;
  424. color: #fff;
  425. opacity: 0.5;
  426. transition: 0s; }
  427. .theme-orange .bs-datepicker-head {
  428. background-color: #f0ad4e; }
  429. .theme-orange .bs-datepicker-body table td span.selected,
  430. .theme-orange .bs-datepicker-body table td.selected span,
  431. .theme-orange .bs-datepicker-body table td span[class*="select-"]:after,
  432. .theme-orange .bs-datepicker-body table td[class*="select-"] span:after {
  433. background-color: #f0ad4e; }
  434. .theme-orange .bs-datepicker-body table td.week span {
  435. color: #f0ad4e; }
  436. .theme-orange .bs-datepicker-body table td.active-week span:hover {
  437. cursor: pointer;
  438. background-color: #f0ad4e;
  439. color: #fff;
  440. opacity: 0.5;
  441. transition: 0s; }
  442. /*# sourceMappingURL=bs-datepicker.css.map */