draggableNest.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. @import "../variables.scss";
  2. .#{$prefix}draggable-nest {
  3. flex: 1;
  4. width: 100%;
  5. overflow-y: auto;
  6. .flip-list {
  7. transition: all 0.3s ease-in-out;
  8. }
  9. .flip-list-move {
  10. transition: transform 0.3s;
  11. }
  12. //.no-move {
  13. // transition: transform 0s;
  14. //}
  15. // 拖动时候的样式
  16. .ghost {
  17. //opacity: 0.5;
  18. //background: rgba(87, 129, 244, .2);
  19. //box-shadow: 1px 1px 5px 2px rgb(0 0 0 / 15%);
  20. //cursor: move;
  21. //box-shadow: #007bfc 0 0 6px -2px inset;
  22. //background: var(--el-color-danger);
  23. box-shadow: 1px 1px 5px 2px rgba(0,0,0,.15);
  24. cursor: move;
  25. transition: .18s ease;
  26. }
  27. .chosen {
  28. //box-shadow: 1px 1px 5px 2px rgba(0,0,0,.15);
  29. box-shadow: inset 0 0 6px -2px rgba(0, 0, 0, 0.15);
  30. }
  31. &-item {
  32. padding-left: 12px;
  33. &:hover {
  34. background: $le-hover-color_1;
  35. }
  36. .itemWrap {
  37. display: flex;
  38. align-items: center;
  39. line-height: 34px;
  40. padding-right: 4px;
  41. //color: #333;
  42. color: var(--el-text-color-regular);
  43. font-size: 14px;
  44. cursor: pointer;
  45. //transition: .18s ease;
  46. width: 100%;
  47. // 不能拖动 不能删除
  48. &.disabled {
  49. color: var(--el-text-color-disabled);
  50. cursor: not-allowed;
  51. opacity: unset;
  52. box-shadow: none;
  53. &.ghost {
  54. background: unset;
  55. }
  56. & > .dragEl {
  57. cursor: not-allowed;
  58. }
  59. .disabled_fixed {
  60. width: 28px;
  61. margin-left: auto;
  62. cursor: pointer;
  63. color: #007bfc;
  64. }
  65. }
  66. .dragEl {
  67. font-size: 16px;
  68. cursor: move;
  69. margin-right: 8px;
  70. }
  71. .label_txt{
  72. display: inline-block;
  73. padding-left: 10px;
  74. flex: 1;
  75. //width: 80%;
  76. white-space: nowrap;
  77. overflow: hidden;
  78. text-overflow: ellipsis;
  79. }
  80. & > .delEl {
  81. display: none;
  82. margin-left: auto;
  83. }
  84. &:not(.disabled):hover {
  85. color: #007bfc;
  86. & > .delEl {
  87. display: inline-block;
  88. }
  89. }
  90. }
  91. .checkbox-hide {
  92. visibility: hidden;
  93. }
  94. }
  95. }