[fancytree] Removed fancy-tree2 from css

bin/style.css

@@ -5036,7 +5036,7 @@ fancy-tree {
 fancy-tree:focus {
   outline: none;
 }
-fancy-tree fancy-wrapper {
+fancy-tree fancy-scroll {
   display: block;
   width: 100%;
   flex: 1 1;
@@ -5044,164 +5044,13 @@ fancy-tree fancy-wrapper {
   overflow-x: clip;
   overflow-y: auto;
 }
-fancy-tree fancy-wrapper fancy-tree-item {
-  --depth: 0;
-  display: flex;
-  flex-direction: column;
-  --highlight: 0;
-  box-sizing: border-box;
-}
-fancy-tree fancy-wrapper fancy-tree-item.hide-search {
-  overflow: hidden;
-  height: 0px;
-  display: none;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-children {
-  height: 0px;
-  overflow: hidden;
-  display: none;
-}
-fancy-tree fancy-wrapper fancy-tree-item.open > fancy-tree-children {
-  display: block;
-  height: auto;
-}
-fancy-tree fancy-wrapper fancy-tree-item.open > fancy-tree-children:has(fancy-tree-name:focus) {
-  overflow: visible;
-}
-fancy-tree fancy-wrapper fancy-tree-item.open > fancy-tree-header .caret::before {
-  transform: rotate(90deg);
-}
-fancy-tree fancy-wrapper fancy-tree-item:has(fancy-tree-children .selected) > fancy-tree-header fancy-tree-name {
-  text-decoration: underline var(--selection);
-}
-fancy-tree fancy-wrapper fancy-tree-item.current:not(.selected) {
-  --highlight: 10;
-}
-fancy-tree fancy-wrapper fancy-tree-item.selected > fancy-tree-header {
-  color: white;
-  --background: var(--selection);
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header {
-  padding-left: calc((var(--depth) - 1) * 1em + 0.25em);
-  box-sizing: border-box;
-  height: 20px;
-  max-height: 20px;
-  min-height: 20px;
-  --background: #222;
-  background-color: hsl(from var(--background) h s calc(var(--highlight) + l));
-  display: flex;
-  position: relative;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header:has(>.caret:hover, >fancy-tree-name:hover) {
-  --highlight: 10;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header fancy-tree-icon {
-  align-self: center;
-  width: 16px;
-  height: 16px;
-  display: block;
-  flex-shrink: 0;
-  filter: drop-shadow(1px 1px rgba(0, 0, 0, 0.5));
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header fancy-tree-icon.caret {
-  width: 16px;
-  height: 16px;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header fancy-tree-icon.caret::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 2px;
-  width: 12px;
-  height: 12px;
-  transition: transform var(--anim-speed);
-  background-color: currentColor;
-  mask-image: url("res/icons/svg/right_caret.svg");
-  mask-position: center;
-  mask-repeat: no-repeat;
-  mask-size: contain;
-  pointer-events: all;
-  cursor: pointer;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header fancy-tree-name {
-  display: block;
-  text-overflow: ellipsis;
-  align-self: stretch;
-  overflow: clip;
-  text-wrap: nowrap;
-  flex-shrink: 1;
-  cursor: pointer;
-  filter: drop-shadow(1px 1px rgba(0, 0, 0, 0.5));
-  min-width: 2em;
-  padding: 1px;
-  padding-left: 0;
-  align-content: center;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header fancy-tree-name:focus {
-  z-index: 100;
-  background-color: #222;
-  outline-offset: 1px;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header.feedback-drop-top::after {
-  position: absolute;
-  content: "";
-  display: block;
-  left: 0;
-  right: 0;
-  top: 0;
-  border-top: solid 1px var(--selection);
-  z-index: 10;
-  pointer-events: none;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header.feedback-drop-bot::after {
-  position: absolute;
-  content: "";
-  display: block;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-top: solid 1px var(--selection);
-  z-index: 10;
-  pointer-events: none;
-}
-fancy-tree fancy-wrapper fancy-tree-item fancy-tree-header.feedback-drop-in::after {
-  position: absolute;
-  content: "";
-  display: block;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  border: solid 1px var(--selection);
-  z-index: 10;
-  pointer-events: none;
-}
-fancy-tree2 {
-  --anim-speed: 0.1s;
-  background-color: #222;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-fancy-tree2:focus {
-  outline: none;
-}
-fancy-tree2 fancy-scroll {
-  display: block;
-  width: 100%;
-  flex: 1 1;
-  min-width: 100px;
-  overflow-x: clip;
-  overflow-y: auto;
-}
-fancy-tree2 fancy-scroll fancy-item-container {
+fancy-tree fancy-scroll fancy-item-container {
   position: relative;
   display: block;
   overflow: hidden;
   contain: layout paint size style;
 }
-fancy-tree2 fancy-scroll fancy-tree-item {
+fancy-tree fancy-scroll fancy-tree-item {
   position: absolute;
   --depth: 0;
   --highlight: 0;
@@ -5215,35 +5064,35 @@ fancy-tree2 fancy-scroll fancy-tree-item {
   background-color: hsl(from var(--background) h s calc(var(--highlight) + l));
   display: flex;
 }
-fancy-tree2 fancy-scroll fancy-tree-item.hide-search {
+fancy-tree fancy-scroll fancy-tree-item.hide-search {
   overflow: hidden;
   height: 0px;
   display: none;
 }
-fancy-tree2 fancy-scroll fancy-tree-item.open > .caret::before {
+fancy-tree fancy-scroll fancy-tree-item.open > .caret::before {
   transform: rotate(90deg);
 }
-fancy-tree2 fancy-scroll fancy-tree-item:has(fancy-tree-children .selected) > fancy-tree-header fancy-tree-name {
+fancy-tree fancy-scroll fancy-tree-item:has(fancy-tree-children .selected) > fancy-tree-header fancy-tree-name {
   text-decoration: underline var(--selection);
 }
-fancy-tree2 fancy-scroll fancy-tree-item.current {
+fancy-tree fancy-scroll fancy-tree-item.current {
   outline: dashed 1px #AAA;
   z-index: 10;
   outline-offset: -1px;
 }
-fancy-tree2 fancy-scroll fancy-tree-item.selected {
+fancy-tree fancy-scroll fancy-tree-item.selected {
   color: white;
   --background: var(--selection);
 }
-fancy-tree2 fancy-scroll fancy-tree-item:hover {
+fancy-tree fancy-scroll fancy-tree-item:hover {
   --highlight: 10;
   cursor: pointer;
 }
-fancy-tree2 fancy-scroll fancy-tree-item .hidden {
+fancy-tree fancy-scroll fancy-tree-item .hidden {
   visibility: hidden;
   pointer-events: none;
 }
-fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-icon {
+fancy-tree fancy-scroll fancy-tree-item fancy-tree-icon {
   align-self: center;
   width: 16px;
   height: 16px;
@@ -5251,11 +5100,11 @@ fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-icon {
   flex-shrink: 0;
   filter: drop-shadow(1px 1px rgba(0, 0, 0, 0.5));
 }
-fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-icon.caret {
+fancy-tree fancy-scroll fancy-tree-item fancy-tree-icon.caret {
   width: 16px;
   height: 16px;
 }
-fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-icon.caret::before {
+fancy-tree fancy-scroll fancy-tree-item fancy-tree-icon.caret::before {
   content: "";
   position: absolute;
   top: 0;
@@ -5271,7 +5120,7 @@ fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-icon.caret::before {
   mask-size: contain;
   pointer-events: all;
 }
-fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-name {
+fancy-tree fancy-scroll fancy-tree-item fancy-tree-name {
   display: block;
   text-overflow: ellipsis;
   align-self: stretch;
@@ -5284,16 +5133,16 @@ fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-name {
   padding-left: 0;
   align-content: center;
 }
-fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-name:focus {
+fancy-tree fancy-scroll fancy-tree-item fancy-tree-name:focus {
   z-index: 100;
   background-color: #222;
   outline-offset: 1px;
 }
-fancy-tree2 fancy-scroll fancy-tree-item fancy-tree-name > span.search-hl {
+fancy-tree fancy-scroll fancy-tree-item fancy-tree-name > span.search-hl {
   background-color: var(--selection);
   color: white;
 }
-fancy-tree2 fancy-scroll fancy-tree-item.feedback-drop-top::after {
+fancy-tree fancy-scroll fancy-tree-item.feedback-drop-top::after {
   position: absolute;
   content: "";
   display: block;
@@ -5304,7 +5153,7 @@ fancy-tree2 fancy-scroll fancy-tree-item.feedback-drop-top::after {
   z-index: 10;
   pointer-events: none;
 }
-fancy-tree2 fancy-scroll fancy-tree-item.feedback-drop-bot::after {
+fancy-tree fancy-scroll fancy-tree-item.feedback-drop-bot::after {
   position: absolute;
   content: "";
   display: block;
@@ -5315,7 +5164,7 @@ fancy-tree2 fancy-scroll fancy-tree-item.feedback-drop-bot::after {
   z-index: 10;
   pointer-events: none;
 }
-fancy-tree2 fancy-scroll fancy-tree-item.feedback-drop-in::after {
+fancy-tree fancy-scroll fancy-tree-item.feedback-drop-in::after {
   position: absolute;
   content: "";
   display: block;

bin/style.less

@@ -6020,203 +6020,6 @@ fancy-tree {
 		outline: none;
 	}
 
-	fancy-wrapper {
-		display: block;
-		width: 100%;
-		flex: 1 1;
-		min-width: 100px;
-		overflow-x: clip;
-		overflow-y: auto;
-
-		fancy-tree-item {
-			--depth: 0;
-
-			display: flex;
-
-			flex-direction: column;
-
-			&.hide-search {
-				overflow: hidden;
-				height: 0px;
-				display: none;
-			}
-
-			fancy-tree-children {
-				height: 0px;
-				overflow: hidden;
-				display: none;
-			}
-
-			&.open > fancy-tree-children {
-				display: block;
-				height: auto;
-
-				&:has(fancy-tree-name:focus) {
-					overflow: visible;
-				}
-			}
-
-			&.open>fancy-tree-header .caret::before {
-				transform: rotate(90deg);
-			}
-
-			// Select if we have a children that is selected
-			&:has(fancy-tree-children .selected) > fancy-tree-header {
-				fancy-tree-name {
-					text-decoration: underline var(--selection);
-				}
-			}
-
-			--highlight: 0;
-			&.current:not(.selected) {
-				--highlight: 10;
-			}
-
-			&.selected > fancy-tree-header {
-				color: white;
-				--background: var(--selection);
-			}
-
-			box-sizing: border-box;
-
-
-			fancy-tree-header {
-				padding-left: calc((var(--depth) - 1) * 1.0em + 0.25em);
-				position: relative;
-				box-sizing: border-box;
-
-				height: 20px;
-				max-height: 20px;
-				min-height: 20px;
-
-				--background: #222;
-				background-color: e("hsl(from var(--background) h s calc(var(--highlight) + l))");
-
-
-				display: flex;
-
-				position: relative;
-
-				&:has(>.caret:hover, >fancy-tree-name:hover) {
-					--highlight: 10;
-				}
-
-				fancy-tree-icon {
-					align-self: center;
-					width: 16px;
-					height: 16px;
-
-					display: block;
-
-					flex-shrink: 0;
-
-					filter: drop-shadow(1px 1px rgba(0,0,0,0.5));
-
-					&.caret {
-						width: 16px;
-						height: 16px;
-						&::before {
-							content: "";
-							position: absolute;
-							top: 0; left: 0;
-							margin: 2px;
-							width: 12px; height: 12px;
-
-							transition: transform var(--anim-speed);
-							background-color: currentColor;
-							mask-image: url("res/icons/svg/right_caret.svg");
-
-							mask-position: center;
-							mask-repeat: no-repeat;
-							mask-size: contain;
-
-							pointer-events: all;
-							cursor: pointer;
-						}
-					}
-				}
-
-				fancy-tree-name {
-					display: block;
-					text-overflow: ellipsis;
-					align-self: stretch;
-					overflow: clip;
-					text-wrap: nowrap;
-					flex-shrink: 1;
-					cursor: pointer;
-					filter: drop-shadow(1px 1px rgba(0,0,0,0.5));
-					min-width: 2em;
-					padding: 1px;
-					padding-left: 0;
-					align-content: center;
-
-					&:focus {
-						z-index: 100;
-						background-color: #222;
-						outline-offset: 1px;
-					}
-
-				}
-
-				&.feedback-drop-top::after {
-					position: absolute;
-					content: "";
-					display: block;
-					left: 0;
-					right: 0;
-					top: 0;
-					border-top: solid 1px var(--selection);
-					z-index: 10;
-					pointer-events: none;
-				}
-
-				&.feedback-drop-bot::after {
-					position: absolute;
-					content: "";
-					display: block;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					border-top: solid 1px var(--selection);
-					z-index: 10;
-					pointer-events: none;
-				}
-
-				&.feedback-drop-in::after {
-					position: absolute;
-					content: "";
-					display: block;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					top: 0;
-					border: solid 1px var(--selection);
-					z-index: 10;
-					pointer-events: none;
-				}
-			}
-
-
-
-		}
-	}
-
-
-}
-
-fancy-tree2 {
-	--anim-speed: 0.1s;
-
-	background-color: #222;
-
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	&:focus {
-		outline: none;
-	}
-
 	fancy-scroll {
 		display: block;
 		width: 100%;

hide/comp/FancyTree.hx

@@ -77,13 +77,13 @@ class FancyTree<TreeItem> extends hide.comp.Component {
 	public function new(parent: Element, ?saveKey: String) {
 		saveDisplayKey = saveKey;
 		var el = new Element('
-			<fancy-tree2 tabindex="-1">
+			<fancy-tree tabindex="-1">
 				<fancy-closable><fancy-search></fancy-search></fancy-closable>
 				<fancy-scroll>
 				<fancy-item-container>
 				</fancy-item-container>
 				</fancy-scroll>
-			</fancy-tree2>'
+			</fancy-tree>'
 		);
 		super(parent, el);