table-select.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. @use '../helpers/baseMixin.scss';
  2. @use '../helpers/placement.scss';
  3. .vxe-table-select {
  4. position: relative;
  5. display: inline-block;
  6. width: 180px;
  7. color: var(--vxe-ui-font-color);
  8. text-align: left;
  9. & > .vxe-input {
  10. .vxe-input--inner {
  11. cursor: pointer;
  12. }
  13. }
  14. &.is--disabled {
  15. & > .vxe-input {
  16. .vxe-input--inner {
  17. cursor: no-drop;
  18. }
  19. }
  20. }
  21. &.is--loading {
  22. & > .vxe-input {
  23. .vxe-input--inner {
  24. cursor: progress;
  25. }
  26. }
  27. }
  28. & > .vxe-input {
  29. width: 100%;
  30. .vxe-input--suffix-icon > i {
  31. display: inline-block;
  32. @include baseMixin.createAnimationTransition(transform, .2s);
  33. }
  34. }
  35. &.is--active {
  36. &:not(.is--filter) {
  37. & > .vxe-input {
  38. border-color: var(--vxe-ui-font-primary-color);
  39. }
  40. }
  41. }
  42. }
  43. .vxe-table-select--readonly {
  44. color: var(--vxe-ui-font-color);
  45. display: inline-flex;
  46. }
  47. .vxe-table-select--panel {
  48. @include placement.createPlacementPanel();
  49. }
  50. .vxe-table-select--panel-search {
  51. display: block;
  52. .vxe-table-select-search--input {
  53. width: 100%;
  54. }
  55. }
  56. .vxe-table-select--panel-wrapper {
  57. display: inline-flex;
  58. position: relative;
  59. border-radius: var(--vxe-ui-base-border-radius);
  60. border: 1px solid var(--vxe-ui-base-popup-border-color);
  61. box-shadow: var(--vxe-ui-base-popup-box-shadow);
  62. background-color: var(--vxe-ui-layout-background-color);
  63. pointer-events: auto;
  64. }
  65. .vxe-table-select--panel-header {
  66. border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
  67. }
  68. .vxe-table-select--panel-footer {
  69. border-top: 1px solid var(--vxe-ui-base-popup-border-color);
  70. }
  71. .vxe-table-select--panel-header,
  72. .vxe-table-select--panel-footer {
  73. padding: 4px 0;
  74. }
  75. .vxe-table-select-grid--wrapper {
  76. position: relative;
  77. overflow: auto;
  78. padding: var(--vxe-ui-layout-padding-default);
  79. height: 21em;
  80. width: 36em;
  81. outline: 0;
  82. }
  83. .vxe-table-select,
  84. .vxe-table-select--panel {
  85. font-size: var(--vxe-ui-font-size-default);
  86. &.size--medium {
  87. font-size: var(--vxe-ui-font-size-medium);
  88. }
  89. &.size--small {
  90. font-size: var(--vxe-ui-font-size-small);
  91. }
  92. &.size--mini {
  93. font-size: var(--vxe-ui-font-size-mini);
  94. }
  95. }