autocomplete.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @import "mixins/mixins";
  2. @import "mixins/utils";
  3. @import "common/var";
  4. @import "./input.scss";
  5. @import "./scrollbar.scss";
  6. @import "./popper";
  7. @include b(autocomplete) {
  8. position: relative;
  9. display: inline-block;
  10. }
  11. @include b(autocomplete-suggestion) {
  12. margin: 5px 0;
  13. box-shadow: $--box-shadow-light;
  14. border-radius: $--border-radius-base;
  15. border: 1px solid $--border-color-light;
  16. box-sizing: border-box;
  17. background-color: $--color-white;
  18. @include e(wrap) {
  19. max-height: 280px;
  20. padding: 10px 0;
  21. box-sizing: border-box;
  22. }
  23. @include e(list) {
  24. margin: 0;
  25. padding: 0;
  26. }
  27. & li {
  28. padding: 0 20px;
  29. margin: 0;
  30. line-height: 34px;
  31. cursor: pointer;
  32. color: $--color-text-regular;
  33. font-size: $--font-size-base;
  34. list-style: none;
  35. white-space: nowrap;
  36. overflow: hidden;
  37. text-overflow: ellipsis;
  38. &:hover {
  39. background-color: $--select-option-hover-background;
  40. }
  41. &.highlighted {
  42. background-color: $--select-option-hover-background;
  43. }
  44. &.divider {
  45. margin-top: 6px;
  46. border-top: 1px solid $--color-black;
  47. }
  48. &.divider:last-child {
  49. margin-bottom: -6px;
  50. }
  51. }
  52. @include when(loading) {
  53. li {
  54. text-align: center;
  55. height: 100px;
  56. line-height: 100px;
  57. font-size: 20px;
  58. color: #999;
  59. @include utils-vertical-center;
  60. &:hover {
  61. background-color: $--color-white;
  62. }
  63. }
  64. & .el-icon-loading {
  65. vertical-align: middle;
  66. }
  67. }
  68. }