From a2b41f82f1105877d75b3c968b7a985ee01a995a Mon Sep 17 00:00:00 2001
From: DhammaCharts <100090806+DhammaCharts@users.noreply.github.com>
Date: Wed, 13 Jul 2022 14:10:58 +0100
Subject: [PATCH] add nice arrow in tree. needs cleaning css
---
assets/styles/column.scss | 149 +++++++++++++++++++++++++++++++++-----
1 file changed, 129 insertions(+), 20 deletions(-)
diff --git a/assets/styles/column.scss b/assets/styles/column.scss
index 2ece72873..a7b1083ee 100644
--- a/assets/styles/column.scss
+++ b/assets/styles/column.scss
@@ -4,32 +4,141 @@ div.sticky {
top: 0;
// background-color: yellow;
}
+
+// old tree
+// .tree,
+// .tree ol {
+// list-style: none;
+// margin: 0;
+// padding: 0;
+// }
+//
+// .tree ol {
+// padding-left: 1em;
+// }
+// .tree summary {
+// // color: #6b879a;
+// position: relative;
+// left: -1em;
+// margin-top: 0.2em;
+// cursor: pointer;
+//
+// }
+// .tree details {
+// margin-bottom: 0.3em;
+// }
+// .tree a{
+// // font-weight:unset;
+// // color: black;
+// font-weight: 600;
+// // font-size: 0.9rem;
+// }
+
+// new tree
+.tree {
+ user-select: none;
+ -moz-user-select: none;
+}
+.tree ::-webkit-details-marker {
+ display: none;
+}
+.tree>details>summary {
+ display: none;
+}
+.tree details>summary::-webkit-details-marker {
+ display: none;
+}
.tree,
.tree ol {
- list-style: none;
- margin: 0;
- padding: 0;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ padding-left: 1em;
}
-
-.tree ol {
- padding-left: 1em;
+.tree a,
+.tree summary {
+ position: relative;
+ left: -1em;
+ margin-top: 0.2em;
+ cursor: pointer;
+}
+.tree a {
+ font-weight: 600;
}
.tree summary {
- color: #6b879a;
- position: relative;
- left: -1em;
- margin-top: 0.2em;
+ list-style-type: none;
+ outline: none;
+}
+.tree details>:not(details),
+.tree details {
+ position: relative;
+}
+.tree details :not(summary) {
+ // margin-left: 20px;
+}
+.tree.nodots details :not(summary) {
+ // margin-left: 12px;
+}
+.tree details::before,
+.tree details>:not(details)::before {
+ content: '';
+ width: 10px;
+ display: block;
+ position: absolute;
+}
+.tree details::before,
+.tree details>:not(details)::before {
+ // background: url('data:image/svg+xml;utf8,') left top / 2px 2px;
+}
+.tree.dark details::before,
+.tree.dark details>:not(summary)::before {
+ background-image: url('data:image/svg+xml;utf8,');
+}
+.tree.nodots details::before,
+.tree.nodots details>:not(summary)::before {
+ background-image: none;
+}
+.tree details::before {
+ top: 0;
+ height: 100%;
+ background-repeat: repeat-y;
+ left: 5px;
+ z-index: -1;
+}
+.tree details>:not(details)::before {
+ top: 8px;
+ height: calc(100% - 8px);
+ background-repeat: repeat-x;
+ left: -15px;
+}
+.tree details>summary::before {
+ // background: url('data:image/svg+xml;utf8,') center center / 12px 12px no-repeat;
+ background: url('data:image/svg+xml;utf8,')center center / 12px 12px no-repeat;
+ left: -22px;
+ top: 2px;
+ width: 16px;
+ height: 16px;
+}
+.tree details[open]>summary::before {
+ background: url('data:image/svg+xml;utf8,') center center / 12px 12px no-repeat;
+ // background-image: url('data:image/svg+xml;utf8,');
}
-.tree details {
- margin-bottom: 0.3em;
-}
-.tree a{
- // font-weight:unset;
- // color: black;
- font-weight: 600;
- // font-size: 0.9rem;
-}
+
+// .tree details>summary::before {
+// // background: url('data:image/svg+xml;utf8,') center center / 12px 12px no-repeat;
+// background: url('data:image/svg+xml;utf8,')center center / 12px 12px no-repeat;
+// left: -22px;
+// top: 2px;
+// width: 16px;
+// height: 16px;
+// }
+// .tree details[open]>summary::before {
+// background: url('data:image/svg+xml;utf8,') center center / 12px 12px no-repeat;
+// // background-image: url('data:image/svg+xml;utf8,');
+// }
a.active{
// color: #f28482;
@@ -37,7 +146,7 @@ a.active{
padding: 0.2em 0.5em ;
// padding: 0.25em 1em;
position: relative;
- left: -0.5em;
+ left: -1.5em;
border: var(--outlinegray) 1px solid;
border-radius: 5px
}