index.css 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. .rc-picker {
  2. position: relative;
  3. display: inline-flex;
  4. }
  5. .rc-picker-rtl {
  6. direction: rtl;
  7. }
  8. .rc-picker-focused {
  9. border: 1px solid blue;
  10. }
  11. .rc-picker-invalid {
  12. box-shadow: 0 0 2px red;
  13. }
  14. .rc-picker-panels {
  15. display: flex;
  16. flex-wrap: nowrap;
  17. }
  18. .rc-picker-panel {
  19. display: inline-block;
  20. vertical-align: top;
  21. background: #fff0ff;
  22. border: 1px solid #666;
  23. }
  24. .rc-picker-panel-focused {
  25. border-color: blue;
  26. }
  27. .rc-picker-panel-rtl {
  28. direction: rtl;
  29. }
  30. .rc-picker-decade-panel,
  31. .rc-picker-year-panel,
  32. .rc-picker-month-panel,
  33. .rc-picker-week-panel,
  34. .rc-picker-date-panel,
  35. .rc-picker-time-panel {
  36. display: flex;
  37. flex-direction: column;
  38. }
  39. .rc-picker-decade-panel table,
  40. .rc-picker-year-panel table,
  41. .rc-picker-month-panel table,
  42. .rc-picker-week-panel table,
  43. .rc-picker-date-panel table,
  44. .rc-picker-time-panel table {
  45. text-align: center;
  46. border-collapse: collapse;
  47. }
  48. .rc-picker-header {
  49. display: flex;
  50. }
  51. .rc-picker-header > * {
  52. flex: none;
  53. }
  54. .rc-picker-header-view {
  55. flex: auto;
  56. text-align: center;
  57. }
  58. .rc-picker-header-view > button {
  59. padding: 0;
  60. border: 0;
  61. }
  62. .rc-picker-cell {
  63. color: #aaa;
  64. }
  65. .rc-picker-cell-disabled {
  66. opacity: 0.2;
  67. }
  68. .rc-picker-cell-inner {
  69. display: inline-block;
  70. box-sizing: border-box;
  71. width: 100%;
  72. height: 20px;
  73. margin: 0;
  74. padding: 0;
  75. font-size: 12px;
  76. line-height: 20px;
  77. background: transparent;
  78. border: 0;
  79. border: none;
  80. outline: none;
  81. cursor: pointer;
  82. transition: background 0.3s, border 0.3s;
  83. }
  84. .rc-picker-cell-inner:hover {
  85. background: rgba(0, 0, 255, 0.3);
  86. }
  87. .rc-picker-cell-in-view {
  88. color: #333;
  89. }
  90. .rc-picker-cell-in-range > .rc-picker-cell-inner {
  91. background: rgba(0, 0, 255, 0.05);
  92. }
  93. .rc-picker-cell-hover > .rc-picker-cell-inner {
  94. background: orange;
  95. }
  96. .rc-picker-cell-range-hover-start,
  97. .rc-picker-cell-range-hover-end,
  98. .rc-picker-cell-range-hover {
  99. position: relative;
  100. }
  101. .rc-picker-cell-range-hover-start::after,
  102. .rc-picker-cell-range-hover-end::after,
  103. .rc-picker-cell-range-hover::after {
  104. position: absolute;
  105. top: 3px;
  106. right: 0;
  107. bottom: 0;
  108. left: 0;
  109. border: 1px solid green;
  110. border-right: 0;
  111. border-left: 0;
  112. content: '';
  113. pointer-events: none;
  114. }
  115. .rc-picker-cell-range-hover-start::after {
  116. border-left: 1px solid green !important;
  117. }
  118. .rc-picker-cell-range-hover-end::after {
  119. border-right: 1px solid green !important;
  120. }
  121. .rc-picker-cell-today > .rc-picker-cell-inner {
  122. border: 1px solid blue;
  123. }
  124. .rc-picker-cell-range-start > .rc-picker-cell-inner,
  125. .rc-picker-cell-range-end > .rc-picker-cell-inner,
  126. .rc-picker-cell-selected > .rc-picker-cell-inner {
  127. background: rgba(0, 0, 255, 0.2);
  128. }
  129. .rc-picker-presets {
  130. background: #ccccff;
  131. }
  132. .rc-picker-presets ul {
  133. margin: 0;
  134. padding: 0;
  135. list-style: none;
  136. }
  137. .rc-picker-footer,
  138. .rc-picker-picker-footer {
  139. background: green;
  140. }
  141. .rc-picker-ranges {
  142. margin: 0;
  143. padding: 0;
  144. overflow: hidden;
  145. list-style: none;
  146. }
  147. .rc-picker-ranges > li {
  148. display: inline-block;
  149. }
  150. .rc-picker-ok {
  151. float: right;
  152. }
  153. .rc-picker-year-panel .rc-picker-cell-inner,
  154. .rc-picker-month-panel .rc-picker-cell-inner {
  155. width: 80px;
  156. }
  157. .rc-picker-week-panel-row:hover .rc-picker-cell {
  158. background: red;
  159. }
  160. .rc-picker-week-panel-row-selected .rc-picker-cell {
  161. background: rgba(0, 0, 255, 0.3);
  162. }
  163. .rc-picker-week-panel-row-range-hover .rc-picker-cell {
  164. background: rgba(0, 255, 0, 0.1);
  165. }
  166. .rc-picker-week-panel-row-range-start .rc-picker-cell,
  167. .rc-picker-week-panel-row-range-end .rc-picker-cell {
  168. background: rgba(0, 255, 0, 0.3);
  169. }
  170. .rc-picker-week-panel .rc-picker-cell,
  171. .rc-picker-week-panel .rc-picker-cell-inner {
  172. width: 20px;
  173. }
  174. .rc-picker-week-panel .rc-picker-cell-week {
  175. color: #999;
  176. font-weight: bold;
  177. font-size: 12px;
  178. }
  179. .rc-picker-week-panel .rc-picker-cell:hover > .rc-picker-cell-inner,
  180. .rc-picker-week-panel .rc-picker-cell-selected > .rc-picker-cell-inner {
  181. background: transparent;
  182. }
  183. .rc-picker-date-panel .rc-picker-cell-inner {
  184. width: 20px;
  185. }
  186. .rc-picker-time-panel {
  187. width: auto;
  188. }
  189. .rc-picker-time-panel .rc-picker-content {
  190. position: relative;
  191. display: flex;
  192. max-height: 200px;
  193. direction: ltr;
  194. }
  195. .rc-picker-time-panel-column-title {
  196. font-size: 14px;
  197. line-height: 20px;
  198. }
  199. .rc-picker-time-panel-column {
  200. flex: auto;
  201. width: 50px;
  202. margin: 0;
  203. padding: 0 0 180px;
  204. overflow-x: hidden;
  205. overflow-y: hidden;
  206. font-size: 12px;
  207. text-align: left;
  208. list-style: none;
  209. transition: background 0.3s;
  210. }
  211. .rc-picker-time-panel-column-active {
  212. background: rgba(0, 0, 255, 0.1);
  213. }
  214. .rc-picker-time-panel-column:hover {
  215. overflow-y: auto;
  216. }
  217. .rc-picker-time-panel-column > li {
  218. width: 50px;
  219. margin: 0;
  220. padding: 0;
  221. cursor: pointer;
  222. }
  223. .rc-picker-time-panel-column > li.rc-picker-time-panel-cell-disabled {
  224. opacity: 0.5;
  225. }
  226. .rc-picker-time-panel-column > li.rc-picker-time-panel-cell-selected {
  227. background: rgba(0, 0, 255, 0.5);
  228. }
  229. .rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
  230. display: block;
  231. width: 100%;
  232. height: 20px;
  233. margin: 0;
  234. color: #333;
  235. line-height: 20px;
  236. text-align: center;
  237. }
  238. .rc-picker-panel-rtl .rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
  239. padding: 0 12px 0 0;
  240. text-align: right;
  241. }
  242. .rc-picker-datetime-panel {
  243. display: flex;
  244. }
  245. .rc-picker-datetime-panel .rc-picker-time-panel {
  246. border-left: 1px solid #999;
  247. }
  248. .rc-picker-datetime-panel .rc-picker-date-panel,
  249. .rc-picker-datetime-panel .rc-picker-time-panel {
  250. transition: opacity 0.3s;
  251. }
  252. .rc-picker-datetime-panel-active .rc-picker-date-panel,
  253. .rc-picker-datetime-panel-active .rc-picker-time-panel {
  254. opacity: 0.3;
  255. }
  256. .rc-picker-datetime-panel-active .rc-picker-date-panel-active,
  257. .rc-picker-datetime-panel-active .rc-picker-time-panel-active {
  258. opacity: 1;
  259. }
  260. .rc-picker-input {
  261. position: relative;
  262. display: inline-flex;
  263. width: 100%;
  264. }
  265. .rc-picker-rtl .rc-picker-input {
  266. text-align: right;
  267. }
  268. .rc-picker-input-active > input {
  269. background: rgba(0, 0, 255, 0.05);
  270. }
  271. .rc-picker-input > input {
  272. width: 100%;
  273. }
  274. .rc-picker-input > input::-moz-placeholder {
  275. opacity: 1;
  276. }
  277. .rc-picker-input > input::placeholder {
  278. color: #bfbfbf;
  279. }
  280. .rc-picker-input > input:placeholder-shown {
  281. text-overflow: ellipsis;
  282. }
  283. .rc-picker-input-placeholder > input {
  284. color: #bfbfbf;
  285. }
  286. .rc-picker-clear {
  287. position: absolute;
  288. top: 0;
  289. inset-inline-end: 4px;
  290. cursor: pointer;
  291. }
  292. .rc-picker-clear-btn::after {
  293. content: '×';
  294. }
  295. .rc-picker-dropdown {
  296. position: absolute;
  297. box-shadow: 0 0 1px red;
  298. pointer-events: none;
  299. }
  300. .rc-picker-dropdown-range {
  301. padding: 10px 0;
  302. }
  303. .rc-picker-dropdown-hidden {
  304. display: none;
  305. }
  306. .rc-picker-dropdown-rtl {
  307. direction: rtl;
  308. }
  309. .rc-picker-dropdown-placement-topLeft .rc-picker-range-arrow,
  310. .rc-picker-dropdown-placement-topRight .rc-picker-range-arrow {
  311. bottom: 6px;
  312. transform: rotate(135deg);
  313. }
  314. .rc-picker-dropdown-placement-bottomLeft .rc-picker-range-arrow,
  315. .rc-picker-dropdown-placement-bottomRight .rc-picker-range-arrow {
  316. top: 6px;
  317. transform: rotate(-45deg);
  318. }
  319. .rc-picker-dropdown .rc-picker-range-arrow {
  320. position: absolute;
  321. z-index: 1;
  322. width: 10px;
  323. height: 10px;
  324. transition: all 0.3s;
  325. }
  326. .rc-picker-dropdown .rc-picker-range-arrow::before,
  327. .rc-picker-dropdown .rc-picker-range-arrow::after {
  328. position: absolute;
  329. top: 50%;
  330. inset-inline-start: 50%;
  331. box-sizing: border-box;
  332. transform: translate(-50%, -50%);
  333. content: '';
  334. }
  335. .rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::before,
  336. .rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::after {
  337. transform: translate(50%, -50%);
  338. }
  339. .rc-picker-dropdown .rc-picker-range-arrow::before {
  340. width: 10px;
  341. height: 10px;
  342. border: 5px solid blue;
  343. border-color: blue blue transparent transparent;
  344. }
  345. .rc-picker-dropdown .rc-picker-range-arrow::after {
  346. width: 8px;
  347. height: 8px;
  348. border: 4px solid blue;
  349. border-color: #fff0ff #fff0ff transparent transparent;
  350. }
  351. .rc-picker-range {
  352. position: relative;
  353. display: inline-flex;
  354. }
  355. .rc-picker-range-wrapper {
  356. display: flex;
  357. }
  358. .rc-picker-range .rc-picker-active-bar {
  359. bottom: 0;
  360. height: 3px;
  361. background: green;
  362. opacity: 0;
  363. transition: all 0.3s;
  364. pointer-events: none;
  365. }
  366. .rc-picker-range.rc-picker-focused .rc-picker-active-bar {
  367. opacity: 1;
  368. }
  369. .rc-picker-panel-container {
  370. display: inline-block;
  371. vertical-align: top;
  372. transition: margin 0.3s;
  373. pointer-events: all;
  374. }
  375. .rc-picker-panel-layout {
  376. display: flex;
  377. flex-wrap: nowrap;
  378. align-items: stretch;
  379. }
  380. .rc-picker-selector {
  381. width: 100%;
  382. }
  383. .rc-picker-selection-overflow {
  384. display: flex;
  385. flex-wrap: wrap;
  386. box-sizing: border-box;
  387. width: 100%;
  388. border: 1px solid green;
  389. min-height: 1em;
  390. }
  391. .rc-picker-selection-overflow-item {
  392. flex: none;
  393. max-width: 100%;
  394. }
  395. .rc-picker-selection-item {
  396. border: 1px solid blue;
  397. }
  398. .rc-picker-selection-placeholder {
  399. pointer-events: none;
  400. position: absolute;
  401. left: 0;
  402. top: 0;
  403. }
  404. .rc-picker-multiple-input {
  405. width: 10px;
  406. opacity: 0.1;
  407. }