index.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @import (reference) './variable.less';
  2. @import '../style/mixins/hairline.less';
  3. @pickerPrefix: ant-picker;
  4. .@{pickerPrefix} {
  5. display: inline-flex;
  6. align-items: center;
  7. color: @COLOR_TEXT_PRIMARY;
  8. &-disabled {
  9. color: @COLOR_TEXT_WEAK;
  10. }
  11. &-header {
  12. position: relative;
  13. display: flex;
  14. align-items: center;
  15. justify-content: space-between;
  16. padding: @picker-header-padding;
  17. box-sizing: border-box;
  18. .hairline('bottom', @COLOR_BORDER);
  19. &-item {
  20. display: flex;
  21. align-items: center;
  22. height: 100%;
  23. white-space: nowrap;
  24. font-size: @picker-header-action-size;
  25. color: @picker-header-action-color;
  26. box-sizing: border-box;
  27. }
  28. &-title {
  29. display: flex;
  30. justify-content: center;
  31. overflow: hidden;
  32. -webkit-line-clamp: 1;
  33. box-orient: vertical;
  34. white-space: normal;
  35. color: @picker-item-color;
  36. width: @picker-header-title-width;
  37. }
  38. }
  39. &-content {
  40. background: @COLOR_CARD;
  41. .a-picker-view-picker-item {
  42. color: @COLOR_TEXT_PRIMARY;
  43. }
  44. .a-picker-view-picker-indicator {
  45. &::before,
  46. &::after {
  47. border-color: @COLOR_BORDER;
  48. }
  49. }
  50. .a-picker-view-picker-mask {
  51. background-image: linear-gradient(
  52. to bottom,
  53. fade(@COLOR_CARD, 95),
  54. fade(@COLOR_CARD, 60)
  55. ),
  56. linear-gradient(to top, fade(@COLOR_CARD, 95), fade(@COLOR_CARD, 60));
  57. will-change: transform;
  58. }
  59. }
  60. &-value {
  61. &-placeholder,
  62. &-text {
  63. &:not(:nth-child(1)) {
  64. display: none;
  65. }
  66. }
  67. &-placeholder {
  68. color: @picker-placeholder-color;
  69. }
  70. }
  71. }