picker.css 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. .container {
  2. min-width: 170px;
  3. cursor: text;
  4. position: relative;
  5. font-size: 14px;
  6. overflow: hidden;
  7. }
  8. .input {
  9. font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  10. width: 100%;
  11. height: 32px;
  12. margin: 0;
  13. padding: 4px 11px;
  14. outline: none;
  15. line-height: 1.5;
  16. box-sizing: border-box;
  17. font-size: 14px;
  18. color: rgba(0, 0, 0, 0.65);
  19. border: none;
  20. border-bottom: 1px solid #ccc;
  21. }
  22. .line {
  23. width: 100%;
  24. position: absolute;
  25. bottom: 0;
  26. left: 0;
  27. border-bottom: 1px solid #1890ff;
  28. transform: translateX(-100%);
  29. transition: transform .15s cubic-bezier(0.17, 1.05, 0.9,-0.15);
  30. }
  31. .input-focus {
  32. transform: translateX(0);
  33. }
  34. .calendar {
  35. position: absolute;
  36. margin-top: 8px;
  37. right: 11px;
  38. display: inline-block;
  39. width: 16px;
  40. height: 16px;
  41. background-image: url('../../static/icon-calendar.svg');
  42. background-position: center;
  43. background-size: 16px 16px;
  44. }