1 files changed, 180 insertions, 0 deletions
diff --git a/templates/@theme-base/pm-styles/_pm-navigation.scss b/templates/@theme-base/pm-styles/_pm-navigation.scss
new file mode 100644
index 0000000..d8e7e0a
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-navigation.scss
@@ -0,0 +1,180 @@
+/*
+ * navigation
+ */
+$navigation-fillcolor-icons: #6D7178 !default;
+$padding-left-link: 2rem !default;
+
+.navigation__link,
+.navigation__link--groupHeader {
+  padding: .95rem 1em .95rem $padding-left-link;
+  color: var(--color-nav-link, $white);
+  text-decoration: none;
+  display: block;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .navigation__link,
+    .navigation__link--groupHeader {
+      padding: .95rem $padding-left-link .95rem 1em;
+    }
+  }
+}
+
+.navigation__icon {
+  color: var(--fillcolor-icons, $navigation-fillcolor-icons);
+}
+
+.navigation__refresh {
+  display: none;
+}
+
+.navigation__link:focus,
+.navigation__link:hover {
+  background: $navigation-hover-bg-color;
+  color: var(--color-nav-link, $pm-global-light);
+  text-decoration: none;
+}
+[aria-current="page"].navigation__link {
+  background: $navigation-hover-bg-color;
+  color: var(--color-nav-active, $white);
+  font-weight: bold;
+
+  &:hover .navigation__icon:not(.navigation__icon--expand),
+  .navigation__icon {
+    color: var(--color-nav-active, $white);
+  }
+
+  .navigation__refresh {
+    display: inline-flex;
+  }
+
+}
+
+// labels/folders sections
+.navigation__link--groupHeader-link {
+  color: var(--color-nav-link, $white);
+  .navigation__icon--expand {
+    color: var(--fillcolor-icons, $navigation-fillcolor-icons);
+  }
+  //&:focus, // gimme focus-visible !!!!
+  &:hover {
+    color: var(--color-nav-link, $pm-global-light);
+    .navigation__icon {
+		color: var(--fillcolor-icons, $white);
+    }
+  }
+}
+
+/* expand hover only on button + groupHeader */
+.navigation__link--groupHeader-link {
+  color: var(--fillcolor-icons, $navigation-fillcolor-icons);
+}
+.navigation__link--expand:focus,
+.navigation__link--expand:hover,
+//.navigation__link--groupHeader-link:focus,
+.navigation__link--groupHeader-link:hover {
+  .navigation__icon--expand {
+    color: var(--fillcolor-icons, $white);
+  }
+}
+
+/* items counters */
+.navigation__counterItem {
+  background: $pm-primary;
+  color: $white;
+  font-size: 1.1rem;
+  padding: 0.2rem .4em 0; // em value for top gives non rounded value, so rem
+  border-radius: 1.1rem;
+  line-height: 1;
+  height: 1.6rem;
+  font-variant: tabular-nums;
+  &:empty {
+      display: none; // removes a bug on Webkit
+  }
+}
+
+
+/* Sub folders */
+.navigation__item {
+  [data-level="1"] {
+    padding-left: 1em;
+  }
+  [data-level="2"] {
+    padding-left: 2em;
+  }
+}
+
+
+
+/* Sub-navigation */
+.navigation__sublist {
+  margin-left: $padding-left-link;
+  overflow: hidden;
+  opacity: 1;
+  transition: visibility 0s ease, transform .5s ease, opacity .5s ease, max-height .5s ease ;
+  transform-origin: top center;
+  transform: scale(1,1);
+  max-height: 44em;
+  visibility: visible;
+  transition-delay: 0s;
+  &[aria-hidden="true"] {
+    display: block;
+    opacity: 0;
+    max-height: 0;
+    visibility: hidden;
+    transform: scale(1,0);
+    transition-duration: 0s, .25s, .25s, .25s;
+    transition-delay: .5s, 0s, 0s, 0s;
+  }
+}
+.navigation__subitem {
+  margin-left: .7rem;
+}
+.navigation__sublink {
+  border-left: 2px solid $navigation-fillcolor-icons;
+  display: block;
+  padding: .75rem 1rem .75rem 1.5rem;
+  text-decoration: none;
+  color:  var(--color-nav-link, $white);
+  &:focus,
+  &:hover {
+    background: $navigation-hover-bg-color;
+    color:  var(--color-nav-link, $pm-global-light);
+    text-decoration: none;
+  }
+  &:hover {
+    border-left: 2px solid var(--color-nav-link, rgba($pm-global-light, .5));
+  }
+  &[aria-current="true"] {
+    border-left: 2px solid var(--color-nav-active, $white);
+    font-weight: bold;
+  }
+}
+
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .navigation__sublist {
+      margin-left: 0;
+      margin-right: $padding-left-link;
+    }
+    .navigation__subitem {
+      margin-left: 0;
+      margin-right: .7rem;
+    }
+    .navigation__sublink {
+      border-left: 0;
+      border-right: 2px solid $navigation-fillcolor-icons;
+      padding: .75rem 1.5rem .75rem 1rem;
+      &:hover {
+        border-left: 0;
+        border-right: 2px solid var(--color-nav-link, $pm-global-light);
+      }
+      &[aria-current="true"] {
+        border-left: 0;
+        border-right: 2px solid var(--color-nav-active, $pm-primary);
+      }
+    }
+  }
+}