index.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. @import '../style/var';
  2. .van-field {
  3. &__label {
  4. max-width: @field-label-max-width;
  5. &--center {
  6. text-align: center;
  7. }
  8. &--right {
  9. text-align: right;
  10. }
  11. }
  12. &__body {
  13. display: flex;
  14. align-items: center;
  15. }
  16. &__control {
  17. border: 0;
  18. margin: 0;
  19. padding: 0;
  20. width: 100%;
  21. resize: none;
  22. display: block;
  23. color: @field-input-text-color;
  24. box-sizing: border-box;
  25. background-color: transparent;
  26. &::placeholder {
  27. color: @field-placeholder-text-color;
  28. }
  29. &:disabled {
  30. opacity: 1;
  31. color: @field-input-disabled-text-color;
  32. background-color: transparent;
  33. }
  34. &--center {
  35. text-align: center;
  36. }
  37. &--right {
  38. text-align: right;
  39. }
  40. /* for ios wechat */
  41. &[type="date"],
  42. &[type="time"],
  43. &[type="datetime-local"] {
  44. min-height: @cell-line-height;
  45. }
  46. }
  47. &__clear,
  48. &__icon,
  49. &__button,
  50. &__right-icon {
  51. flex-shrink: 0;
  52. }
  53. &__clear,
  54. &__right-icon {
  55. padding: 0 10px;
  56. line-height: inherit;
  57. margin-right: -10px;
  58. }
  59. &__clear {
  60. color: @field-clear-icon-color;
  61. font-size: @field-clear-icon-size;
  62. }
  63. &__left-icon .van-icon,
  64. &__right-icon .van-icon {
  65. display: block;
  66. min-width: 1em;
  67. font-size: @field-icon-size;
  68. line-height: inherit;
  69. }
  70. &__left-icon {
  71. margin-right: 5px;
  72. }
  73. &__right-icon {
  74. color: @field-right-icon-color;
  75. }
  76. &__button {
  77. padding-left: 10px;
  78. }
  79. &__error-message {
  80. color: @field-error-message-color;
  81. font-size: @field-error-message-text-color;
  82. text-align: left;
  83. &--center {
  84. text-align: center;
  85. }
  86. &--right {
  87. text-align: right;
  88. }
  89. }
  90. &--disabled {
  91. .van-field__control {
  92. color: @field-input-disabled-text-color;
  93. }
  94. }
  95. &--error {
  96. .van-field__control {
  97. &,
  98. &::placeholder {
  99. color: @field-input-error-text-color;
  100. }
  101. }
  102. }
  103. &--min-height {
  104. .van-field__control {
  105. min-height: @field-text-area-min-height;
  106. }
  107. }
  108. }