index.less 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. @import '../style/var';
  2. .van-field {
  3. &__label {
  4. flex: none;
  5. box-sizing: border-box;
  6. width: @field-label-width;
  7. margin-right: @field-label-margin-right;
  8. color: @field-label-color;
  9. text-align: left;
  10. word-wrap: break-word;
  11. &--center {
  12. text-align: center;
  13. }
  14. &--right {
  15. text-align: right;
  16. }
  17. }
  18. &--disabled {
  19. .van-field__label {
  20. color: @field-disabled-text-color;
  21. }
  22. }
  23. &__value {
  24. overflow: visible;
  25. }
  26. &__body {
  27. display: flex;
  28. align-items: center;
  29. }
  30. &__control {
  31. display: block;
  32. box-sizing: border-box;
  33. width: 100%;
  34. min-width: 0; // for flex-shrink in field__button
  35. margin: 0;
  36. padding: 0;
  37. color: @field-input-text-color;
  38. line-height: inherit;
  39. text-align: left;
  40. background-color: transparent;
  41. border: 0;
  42. resize: none;
  43. &::placeholder {
  44. color: @field-placeholder-text-color;
  45. }
  46. &:disabled {
  47. color: @field-input-disabled-text-color;
  48. cursor: not-allowed;
  49. opacity: 1;
  50. // fix disabled color in mobile safari
  51. -webkit-text-fill-color: @field-input-disabled-text-color;
  52. }
  53. &:read-only {
  54. cursor: default;
  55. }
  56. &--center {
  57. justify-content: center;
  58. text-align: center;
  59. }
  60. &--right {
  61. justify-content: flex-end;
  62. text-align: right;
  63. }
  64. &--custom {
  65. display: flex;
  66. align-items: center;
  67. min-height: @cell-line-height;
  68. }
  69. // for ios wechat
  70. &[type='date'],
  71. &[type='time'],
  72. &[type='datetime-local'] {
  73. min-height: @cell-line-height;
  74. }
  75. // for safari
  76. &[type='search'] {
  77. -webkit-appearance: none;
  78. }
  79. }
  80. &__clear,
  81. &__icon,
  82. &__button,
  83. &__right-icon {
  84. flex-shrink: 0;
  85. }
  86. &__clear,
  87. &__right-icon {
  88. margin-right: -@padding-xs;
  89. padding: 0 @padding-xs;
  90. line-height: inherit;
  91. }
  92. &__clear {
  93. color: @field-clear-icon-color;
  94. font-size: @field-clear-icon-size;
  95. cursor: pointer;
  96. }
  97. &__left-icon .van-icon,
  98. &__right-icon .van-icon {
  99. display: block;
  100. font-size: @field-icon-size;
  101. line-height: inherit;
  102. }
  103. &__left-icon {
  104. margin-right: @padding-base;
  105. }
  106. &__right-icon {
  107. color: @field-right-icon-color;
  108. }
  109. &__button {
  110. padding-left: @padding-xs;
  111. }
  112. &__error-message {
  113. color: @field-error-message-color;
  114. font-size: @field-error-message-font-size;
  115. text-align: left;
  116. &--center {
  117. text-align: center;
  118. }
  119. &--right {
  120. text-align: right;
  121. }
  122. }
  123. &__word-limit {
  124. margin-top: @padding-base;
  125. color: @field-word-limit-color;
  126. font-size: @field-word-limit-font-size;
  127. line-height: @field-word-limit-line-height;
  128. text-align: right;
  129. }
  130. &--error {
  131. .van-field__control {
  132. &,
  133. &::placeholder {
  134. color: @field-input-error-text-color;
  135. -webkit-text-fill-color: currentColor;
  136. }
  137. }
  138. }
  139. &--min-height {
  140. .van-field__control {
  141. min-height: @field-text-area-min-height;
  142. }
  143. }
  144. }