ListItem.module.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. @import "../../styles/common";
  2. .root {
  3. display: flex;
  4. &.selected:not(.is_tray):hover {
  5. .edit {
  6. display: block;
  7. }
  8. }
  9. .edit {
  10. z-index: 10;
  11. //background: var(--swh-selected-bg);
  12. padding: 0 2px;
  13. display: none;
  14. cursor: pointer;
  15. svg {
  16. opacity: 0.5;
  17. transition: 0.3s;
  18. }
  19. &:hover {
  20. svg {
  21. opacity: 1;
  22. }
  23. }
  24. }
  25. }
  26. .title {
  27. flex: 1 1 auto;
  28. position: relative;
  29. //padding-left: 10px;
  30. height: var(--swh-tree-row-height);
  31. overflow: hidden;
  32. text-overflow: ellipsis;
  33. white-space: nowrap;
  34. cursor: default;
  35. }
  36. .folder_open {
  37. .folder_arrow {
  38. transform: rotate(90deg);
  39. margin-top: 1px;
  40. margin-left: -10px;
  41. }
  42. }
  43. .folder_arrow {
  44. position: absolute;
  45. margin-top: 1px;
  46. margin-left: -10px;
  47. cursor: pointer;
  48. transition: 0.3s;
  49. font-size: 8px;
  50. }
  51. .icon {
  52. margin-right: 0.5em;
  53. display: inline-block;
  54. vertical-align: middle;
  55. &.folder {
  56. cursor: pointer;
  57. }
  58. svg {
  59. position: relative;
  60. top: -1px;
  61. }
  62. }
  63. .status {
  64. flex: 0 0 auto;
  65. display: flex;
  66. align-items: center;
  67. gap: 5px;
  68. margin: auto 6px auto auto;
  69. }
  70. .children {
  71. overflow: hidden;
  72. transition: 0.3s;
  73. }