search-input.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import '../../button/style/mixin';
  4. @import './mixin';
  5. @search-prefix: ~'@{ant-prefix}-input-search';
  6. .@{search-prefix} {
  7. .@{ant-prefix}-input {
  8. &:hover,
  9. &:focus {
  10. border-color: @input-hover-border-color;
  11. + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
  12. border-left-color: @input-hover-border-color;
  13. }
  14. }
  15. }
  16. .@{ant-prefix}-input-affix-wrapper {
  17. border-radius: 0;
  18. }
  19. // fix slight height diff in Firefox:
  20. // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
  21. .@{ant-prefix}-input-lg {
  22. line-height: @line-height-base - 0.0002;
  23. }
  24. > .@{ant-prefix}-input-group {
  25. > .@{ant-prefix}-input-group-addon:last-child {
  26. left: -1px;
  27. padding: 0;
  28. border: 0;
  29. .@{search-prefix}-button {
  30. padding-top: 0;
  31. padding-bottom: 0;
  32. border-radius: 0 @border-radius-base @border-radius-base 0;
  33. }
  34. .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
  35. color: @text-color-secondary;
  36. &.@{ant-prefix}-btn-loading::before {
  37. top: 0;
  38. right: 0;
  39. bottom: 0;
  40. left: 0;
  41. }
  42. }
  43. }
  44. }
  45. &-button {
  46. height: @input-height-base;
  47. &:hover,
  48. &:focus {
  49. z-index: 1;
  50. }
  51. }
  52. &-large &-button {
  53. height: @input-height-lg;
  54. }
  55. &-small &-button {
  56. height: @input-height-sm;
  57. }
  58. // ===================== Compact Item Customized Styles =====================
  59. &.@{input-prefix-cls}-compact-item {
  60. &:not(.@{input-prefix-cls}-compact-item-rtl) {
  61. &:not(.@{input-prefix-cls}-compact-last-item) {
  62. .@{input-prefix-cls}-group-addon {
  63. .@{input-prefix-cls}-search-button {
  64. margin-right: -@border-width-base;
  65. border-radius: 0;
  66. }
  67. }
  68. }
  69. }
  70. &:not(.@{input-prefix-cls}-compact-first-item) {
  71. .@{input-prefix-cls},
  72. .@{input-prefix-cls}-affix-wrapper {
  73. border-radius: 0;
  74. }
  75. }
  76. > .@{input-prefix-cls}-group-addon .@{input-prefix-cls}-search-button,
  77. > .@{input-prefix-cls},
  78. .@{input-prefix-cls}-affix-wrapper {
  79. &:hover,
  80. &:focus,
  81. &:active {
  82. z-index: 2;
  83. }
  84. }
  85. > .@{input-prefix-cls}-affix-wrapper-focused {
  86. z-index: 2;
  87. }
  88. }
  89. // ===================== For RTL Compact Item Customized Styles =====================
  90. &.@{input-prefix-cls}-compact-item-rtl {
  91. &:not(.@{input-prefix-cls}-compact-last-item) {
  92. .@{input-prefix-cls}-group-addon:last-child {
  93. .@{input-prefix-cls}-search-button {
  94. margin-left: -@border-width-base;
  95. border-radius: 0;
  96. }
  97. }
  98. }
  99. }
  100. }