fb1441539dcedd6e5937d1ad203ec17072d29badc9f765091a7085bb345cfda564bd5d2e30ed0fd7837989837b74c7d96955ff58cccfce3db68e74411d32b6 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. @import "mixins/mixins";
  2. @import "common/var";
  3. @import "./input";
  4. @import "./popper";
  5. @import "./tag";
  6. @import "./cascader-panel";
  7. @include b(cascader) {
  8. display: inline-block;
  9. position: relative;
  10. font-size: $--font-size-base;
  11. line-height: $--input-height;
  12. &:not(.is-disabled):hover {
  13. .el-input__inner {
  14. cursor: pointer;
  15. border-color: $--input-hover-border;
  16. }
  17. }
  18. .el-input {
  19. cursor: pointer;
  20. .el-input__inner {
  21. text-overflow: ellipsis;
  22. &:focus {
  23. border-color: $--input-focus-border;
  24. }
  25. }
  26. .el-icon-arrow-down {
  27. transition: transform .3s;
  28. font-size: 14px;
  29. @include when(reverse) {
  30. transform: rotateZ(180deg);
  31. }
  32. }
  33. .el-icon-circle-close:hover {
  34. color: $--input-clear-hover-color;
  35. }
  36. @include when(focus) {
  37. .el-input__inner {
  38. border-color: $--input-focus-border;
  39. }
  40. }
  41. }
  42. @include m(medium) {
  43. font-size: $--input-medium-font-size;
  44. line-height: $--input-medium-height;
  45. }
  46. @include m(small) {
  47. font-size: $--input-small-font-size;
  48. line-height: $--input-small-height;
  49. }
  50. @include m(mini) {
  51. font-size: $--input-mini-font-size;
  52. line-height: $--input-mini-height;
  53. }
  54. @include when(disabled) {
  55. .el-cascader__label {
  56. z-index: #{$--index-normal + 1};
  57. color: $--disabled-color-base;
  58. }
  59. }
  60. @include e(dropdown) {
  61. margin: 5px 0;
  62. font-size: $--cascader-menu-font-size;
  63. background: $--cascader-menu-fill;
  64. border: $--cascader-menu-border;
  65. border-radius: $--cascader-menu-radius;
  66. box-shadow: $--cascader-menu-shadow;
  67. }
  68. @include e(tags) {
  69. position: absolute;
  70. left: 0;
  71. right: 30px;
  72. top: 50%;
  73. transform: translateY(-50%);
  74. display: flex;
  75. flex-wrap: wrap;
  76. line-height: normal;
  77. text-align: left;
  78. box-sizing: border-box;
  79. .el-tag {
  80. display: inline-flex;
  81. align-items: center;
  82. max-width: 100%;
  83. margin: 2px 0 2px 6px;
  84. text-overflow: ellipsis;
  85. background: $--cascader-tag-background;
  86. &:not(.is-hit) {
  87. border-color: transparent;
  88. }
  89. > span {
  90. flex: 1;
  91. overflow: hidden;
  92. text-overflow: ellipsis;
  93. }
  94. .el-icon-close {
  95. flex: none;
  96. background-color: $--color-text-placeholder;
  97. color: $--color-white;
  98. &:hover {
  99. background-color: $--color-text-secondary;
  100. }
  101. }
  102. }
  103. }
  104. @include e(suggestion-panel) {
  105. border-radius: $--cascader-menu-radius;
  106. }
  107. @include e(suggestion-list) {
  108. max-height: 204px;
  109. margin: 0;
  110. padding: 6px 0;
  111. font-size: $--font-size-base;
  112. color: $--cascader-menu-font-color;
  113. text-align: center;
  114. }
  115. @include e(suggestion-item) {
  116. display: flex;
  117. justify-content: space-between;
  118. align-items: center;
  119. height: 34px;
  120. padding: 0 15px;
  121. text-align: left;
  122. outline: none;
  123. cursor: pointer;
  124. &:hover, &:focus {
  125. background: $--cascader-node-background-hover;
  126. }
  127. &.is-checked {
  128. color: $--cascader-menu-selected-font-color;
  129. font-weight: bold;
  130. }
  131. > span {
  132. margin-right: 10px;
  133. }
  134. }
  135. @include e(empty-text) {
  136. margin: 10px 0;
  137. color: $--cascader-color-empty;
  138. }
  139. @include e(search-input) {
  140. flex: 1;
  141. height: 24px;
  142. min-width: 60px;
  143. margin: 2px 0 2px 15px;
  144. padding: 0;
  145. color: $--cascader-menu-font-color;
  146. border: none;
  147. outline: none;
  148. box-sizing: border-box;
  149. &::placeholder {
  150. color: $--color-text-placeholder;
  151. }
  152. }
  153. }