implement list item styles

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;
   }
 }
 

src/components/basic_user_card/basic_user_card.vue

@@ -47,7 +47,6 @@
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding: 0.6em 1em;
 
   --emoji-size: 14px;
 

src/components/chat_list_item/chat_list_item.scss

@@ -1,8 +1,6 @@
 .chat-list-item {
   display: flex;
   flex-direction: row;
-  padding: 0.75em;
-  height: 5em;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
@@ -12,7 +10,6 @@
   }
 
   &:hover {
-    background-color: var(--selectedPost, $fallback--lightBg);
     box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
   }
 
@@ -29,7 +26,7 @@
 
   .heading {
     width: 100%;
-    display: inline-flex;
+    display: flex;
     justify-content: space-between;
     line-height: 1em;
   }
@@ -47,18 +44,17 @@
   }
 
   .chat-preview {
-    display: inline-flex;
+    display: flex;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: $fallback--text;
+    color: var(--faintText);
-    color: var(--faint, $fallback--text);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink, $fallback--link);
+    color: var(--faintLink);
     text-decoration: none;
     pointer-events: none;
   }

src/components/list/list.vue

@@ -7,6 +7,7 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
+      :class="getClass(item)"
       role="listitem"
     >
       <slot
@@ -33,24 +34,11 @@ export default {
     getKey: {
       type: Function,
       default: item => item.id
+    },
+    getClass: {
+      type: Function,
+      default: item => ''
     }
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../variables";
-
-.list {
-  &-item:not(:last-child) {
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
-}
-</style>

src/components/list/list_item.style.js

@@ -0,0 +1,48 @@
+export default {
+  name: 'ListItem',
+  selector: '.list-item',
+  states: {
+    active: '.-active',
+    hover: ':hover'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover', 'active'],
+      directives: {
+        background: '--inheritedBackground, 20',
+        opacity: 1
+      }
+    }
+  ]
+}

src/components/menu_item.style.js

@@ -12,7 +12,7 @@ export default {
   ],
   states: {
     hover: ':hover',
-    active: '.active'
+    active: '.-active'
   },
   defaultRules: [
     {

src/components/nav_panel/nav_panel.vue

@@ -37,8 +37,8 @@
         </NavigationEntry>
         <div
           v-show="showTimelines"
-          class="timelines-background"
+          class="timelines-background menu-item-collapsible"
-          :class="{ expanded: showTimelines }"
+          :class="{ '-expanded': showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -75,8 +75,8 @@
         </NavigationEntry>
         <div
           v-show="showLists"
-          class="timelines-background"
+          class="timelines-background menu-item-collapsible"
-          :class="{ expanded: showTimelines }"
+          :class="{ '-expanded': showLists }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
@@ -132,11 +132,6 @@
     padding: 0 0 0 0.6em;
   }
 
-  .timelines-background.expanded + .NavigationEntry {
-    border-top: 1px solid;
-    border-color: var(--border);
-  }
-
   .nav-panel-heading {
     // breaks without a unit
     // stylelint-disable-next-line length-zero-no-unit

src/components/panel.style.js

@@ -17,7 +17,8 @@ export default {
     'UserCard',
     'Chat',
     'Attachment',
-    'Tab'
+    'Tab',
+    'ListItem'
   ],
   defaultRules: [
     {

src/components/popover/popover.vue

@@ -42,8 +42,6 @@
 <script src="./popover.js" />
 
 <style lang="scss">
-@import "../../variables";
-
 .popover-trigger-button {
   display: inline-block;
 }
@@ -89,12 +87,11 @@
     height: 0;
     margin: 0.5rem 0;
     overflow: hidden;
-    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border);
-    border-top: 1px solid var(--border, $fallback--border);
   }
 
   .dropdown-item {
-    border-bottom: none;
+    border: none;
 
     &-icon {
       svg {

src/components/selectable_list/selectable_list.vue

@@ -23,6 +23,7 @@
     <List
       :items="items"
       :get-key="getKey"
+      :get-class="item => isSelected(item) ? '-active' : ''"
     >
       <template #item="{item}">
         <div
@@ -51,9 +52,11 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .selectable-list {
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
   &-item-inner {
     display: flex;
     align-items: center;
@@ -63,24 +66,12 @@
     }
   }
 
-  &-item-selected-inner {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
-  }
-
   &-header {
     display: flex;
     align-items: center;
-    padding: 0.6em 0;
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
-    border-bottom: 2px solid;
+    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border);
-    border-bottom-color: var(--border, $fallback--border);
 
     &-actions {
       flex: 1;
@@ -88,7 +79,7 @@
   }
 
   &-checkbox-wrapper {
-    padding: 0 10px;
+    padding-right: var(--__horizontal-gap);
     flex: none;
   }
 }