fix

Author: Administrator

README.md

@@ -12,7 +12,7 @@
 
 ![](https://img.shields.io/github/downloads/code4bones/react-c4b-ui/treemenu/total) ![](https://img.shields.io/github/watchers/code4bones/react-c4b-ui) ![](https://img.shields.io/github/forks/code4bones/react-c4b-ui) ![](https://img.shields.io/github/tag/code4bones/react-c4b-ui) ![](https://img.shields.io/github/release/code4bones/react-c4b-ui) ![](https://img.shields.io/github/issues/code4bones/react-c4b-ui)
 
-###Links
+### Links
 
 [Change log](https://github.com/code4bones/react-c4b-ui/wiki/Change-Log "Change log")
 

rollup.build.css

@@ -1,12 +1,14 @@
 .tree-menu {
   --font-family: "Avenir Next", Helvetica, Arial, sans-serif;
+  --item-padding: 5px;
+  --item-height: 24px;
 }
 @media (prefers-color-scheme: light) {
   .tree-menu {
     --tree-background: #ffffff;
     --item-title: rgba(31, 31, 31, 0.787);
     --item-info: #79aaff;
-    --item-group-icon: red;
+    --item-group-icon: #babec2;
     --item-selected-background: rgba(129, 129, 129, 0.364);
     --item-selected-color: #202020;
     --item-hover-background: rgba(0, 0, 0, 0.063);
@@ -19,30 +21,32 @@
     --tree-background: #242539;
     --item-title: rgba(225, 225, 225, 0.787);
     --item-info: #c8a636;
-    --item-group-icon: red;
+    --item-group-icon: #ff8c00;
     --item-selected-background: rgba(148, 185, 247, 0.364);
     --item-selected-color: #ffffff;
     --item-hover-background: rgba(89, 100, 102, 0.692);
     --item-hover-color: #04c5ff;
     --item-disabled-color: rgba(129, 129, 129, 0.533);
   }
 }
+.dark.tree-menu,
 .dark .tree-menu {
   --tree-background: #242539;
   --item-title: rgba(225, 225, 225, 0.787);
   --item-info: #c8a636;
-  --item-group-icon: red;
+  --item-group-icon: #ff8c00;
   --item-selected-background: rgba(148, 185, 247, 0.364);
   --item-selected-color: #ffffff;
   --item-hover-background: rgba(89, 100, 102, 0.692);
   --item-hover-color: #04c5ff;
   --item-disabled-color: rgba(129, 129, 129, 0.533);
 }
+.light.tree-menu,
 .light .tree-menu {
   --tree-background: #ffffff;
   --item-title: rgba(31, 31, 31, 0.787);
   --item-info: #79aaff;
-  --item-group-icon: red;
+  --item-group-icon: #babec2;
   --item-selected-background: rgba(129, 129, 129, 0.364);
   --item-selected-color: #202020;
   --item-hover-background: rgba(0, 0, 0, 0.063);
@@ -69,6 +73,10 @@
   /* Internet Explorer/Edge */
   user-select: none;
   /* Non-prefixed version, currently */
+  /*
+  .wrapper {
+  }
+  */
 }
 .tree-menu .group {
   transition: all 0.3s cubic-bezier(0.81, 0.58, 0.48, 1.41);
@@ -95,6 +103,12 @@
 .tree-menu .item.hasChilds {
   font-weight: 800;
 }
+.tree-menu .item.hasChilds .folder {
+  display: flex;
+  margin-left: 5px;
+  justify-content: center;
+  align-items: center;
+}
 .tree-menu .item ~ .group {
   max-height: var(--mh);
   overflow: hidden;
@@ -107,14 +121,32 @@
   max-height: 0px;
   overflow: hidden;
 }
-.tree-menu .item.expanded .folder {
+.tree-menu .item.expanded {
+  /*
+          ~ .group {
+
+          }
+          */
+}
+.tree-menu .item.expanded .folder.enable-rotate {
   transform: rotate(90deg);
 }
 .tree-menu .item > .content {
-  padding: 10px;
+  padding: var(--item-padding);
+  min-height: var(--item-height);
   display: flex;
   flex-direction: row;
   align-items: center;
+  /*
+          > .folder {
+
+          }
+          */
+  /*
+          > .marker {
+
+          }
+          */
 }
 .tree-menu .item > .content:hover {
   color: var(--item-hover-color);
@@ -136,3 +168,12 @@
   background-color: var(--item-selected-background);
   color: var(--item-selected-color) !important;
 }
+/*
+.test {
+  &.tree-menu {
+    .item:hover {
+      background-color: red;
+    }
+  }
+}
+*/