implement list item styles

1 files changed, 28 insertions, 4 deletions

diff --git a/src/App.scss b/src/App.scss
index 8c60a05d..219269a1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -384,7 +384,8 @@ nav {
   }
 }
 
-.menu-item {
+.menu-item,
+.list-item {
   display: block;
   box-sizing: border-box;
   border: none;
@@ -397,9 +398,11 @@ nav {
   color: inherit;
   clear: both;
   position: relative;
-  border-bottom: 1px solid;
   white-space: nowrap;
   border-color: var(--border);
+  border-style: solid;
+  border-width: 0;
+  border-top-width: 1px;
   width: 100%;
   line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
@@ -408,8 +411,28 @@ nav {
   --__horizontal-gap: 0.75em;
   --__vertical-gap: 0.5em;
 
+  &.-active,
+  &:hover {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+  }
+
+  &.-active + &,
+  &:hover + & {
+    border-top-width: 0;
+  }
+
+  &:hover + .menu-item-collapsible:not(.-expanded) + &,
+  &.-active + .menu-item-collapsible:not(.-expanded) + & {
+    border-top-width: 0;
+  }
+
+  &[aria-expanded="true"] {
+    border-bottom-width: 1px;
+  }
+
   a,
-  button {
+  button:not(.button-default) {
     text-align: initial;
     padding: 0;
     background: none;
@@ -425,12 +448,13 @@ nav {
   &:first-child {
     border-top-right-radius: var(--roundness);
     border-top-left-radius: var(--roundness);
+    border-top-width: 0;
   }
 
   &:last-child {
     border-bottom-right-radius: var(--roundness);
     border-bottom-left-radius: var(--roundness);
-    border: none;
+    border-bottom-width: 0;
   }
 }