✨ feat(lists.scss): Add new helper class to toggle tree-nav visibility

Spiderpig86 · Sep 10, 2023 · 623a19d · 623a19d
1 parent 2248631
commit 623a19d
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 9 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -13662,12 +13662,12 @@ ul .divider::after {
     /* Create the area to click to close the menu */
     /* Reset max-width in mobile */
   }
-  .tree-nav:target {
+  .tree-nav.tree-nav--shown, .tree-nav:target {
     transform: translateX(0);
     transition: transform var(--animation-duration) ease;
     /* Show the darkened area when the tree nav menu is clicked */
   }
-  .tree-nav:target + .tree-nav-close {
+  .tree-nav.tree-nav--shown + .tree-nav-close, .tree-nav:target + .tree-nav-close {
     display: block;
     background-color: rgba(0, 0, 0, 0.15);
     height: 100%;

diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -12241,12 +12241,12 @@ ul .divider::after {
     /* Create the area to click to close the menu */
     /* Reset max-width in mobile */
   }
-  .tree-nav:target {
+  .tree-nav.tree-nav--shown, .tree-nav:target {
     transform: translateX(0);
     transition: transform var(--animation-duration) ease;
     /* Show the darkened area when the tree nav menu is clicked */
   }
-  .tree-nav:target + .tree-nav-close {
+  .tree-nav.tree-nav--shown + .tree-nav-close, .tree-nav:target + .tree-nav-close {
     display: block;
     background-color: rgba(0, 0, 0, 0.15);
     height: 100%;

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -12242,12 +12242,12 @@ ul .divider::after {
     /* Create the area to click to close the menu */
     /* Reset max-width in mobile */
   }
-  .tree-nav:target {
+  .tree-nav.tree-nav--shown, .tree-nav:target {
     transform: translateX(0);
     transition: transform var(--animation-duration) ease;
     /* Show the darkened area when the tree nav menu is clicked */
   }
-  .tree-nav:target + .tree-nav-close {
+  .tree-nav.tree-nav--shown + .tree-nav-close, .tree-nav:target + .tree-nav-close {
     display: block;
     background-color: rgba(0, 0, 0, 0.15);
     height: 100%;

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/components/lists.scss b/src/components/lists.scss
@@ -318,6 +318,7 @@
 
             /* Open the menu from the side */
             /* Use a link and add the id of this element as the url */
+            &.tree-nav--shown,
             &:target {
                 transform: translateX(0);
                 transition: transform var(--animation-duration) ease;