index.less 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @import './var.less';
  2. :root {
  3. --van-search-padding: @search-padding;
  4. --van-search-background-color: @search-background-color;
  5. --van-search-content-background-color: @search-content-background-color;
  6. --van-search-input-height: @search-input-height;
  7. --van-search-label-padding: @search-label-padding;
  8. --van-search-label-color: @search-label-color;
  9. --van-search-label-font-size: @search-label-font-size;
  10. --van-search-left-icon-color: @search-left-icon-color;
  11. --van-search-action-padding: @search-action-padding;
  12. --van-search-action-text-color: @search-action-text-color;
  13. --van-search-action-font-size: @search-action-font-size;
  14. }
  15. .van-search {
  16. display: flex;
  17. align-items: center;
  18. box-sizing: border-box;
  19. padding: var(--van-search-padding);
  20. background: var(--van-search-background-color);
  21. &__content {
  22. display: flex;
  23. flex: 1;
  24. padding-left: var(--van-padding-sm);
  25. background: var(--van-search-content-background-color);
  26. border-radius: var(--van-border-radius-sm);
  27. &--round {
  28. border-radius: var(--van-border-radius-max);
  29. }
  30. }
  31. &__label {
  32. padding: var(--van-search-label-padding);
  33. color: var(--van-search-label-color);
  34. font-size: var(--van-search-label-font-size);
  35. line-height: var(--van-search-input-height);
  36. }
  37. &__field {
  38. flex: 1;
  39. align-items: center;
  40. padding: 0 var(--van-padding-xs) 0 0;
  41. height: var(--van-search-input-height);
  42. background-color: transparent;
  43. .van-field__left-icon {
  44. color: var(--van-search-left-icon-color);
  45. }
  46. }
  47. &--show-action {
  48. padding-right: 0;
  49. }
  50. input {
  51. &::-webkit-search-decoration,
  52. &::-webkit-search-cancel-button,
  53. &::-webkit-search-results-button,
  54. &::-webkit-search-results-decoration {
  55. display: none;
  56. }
  57. }
  58. &__action {
  59. padding: var(--van-search-action-padding);
  60. color: var(--van-search-action-text-color);
  61. font-size: var(--van-search-action-font-size);
  62. line-height: var(--van-search-input-height);
  63. cursor: pointer;
  64. user-select: none;
  65. &:active {
  66. background-color: var(--van-active-color);
  67. }
  68. }
  69. }