fix: tighten up the menu to fit more content (#76)

src/sass/_config.sass

@@ -29,6 +29,7 @@ $le-font-size: 14px !default
 $le-font-size-small: 12px !default
 $le-font-size-large: 18px !default
 $le-font-size-icon: 18px !default
+$le-font-size-icon-menu: 16px !default
 $le-font-size-icon-small: 14px !default
 $le-font-size-icon-large: 22px !default
 $le-line-height: 1 !default

src/sass/ui/_actions.sass

@@ -2,19 +2,18 @@
   align-items: center
   display: flex
   flex-flow: row
+  column-gap: $le-space-xxsmall
   margin: 0 $le-space-medium
+  position: absolute
+  right: 0
 
   &--slim
-    margin: 0 $le-space-small
+    margin: 0 $le-space-xsmall
 
 .le__actions__action
-  margin-right: $le-space-small
+  background: var(--list-item-background-color)
+  border-radius: $le-radius-medium
 
-  &--extreme
-    color: $le-color-extreme
-
-  &--warning
-    color: $le-color-warning
-
-  &:first-child
-    margin-left: $le-space-small
+  &:hover
+    color: var(--color-on-background)
+    background: var(--color-background)

src/sass/ui/_list.sass

@@ -1,4 +1,6 @@
 .le__list
+  cursor: default
+
   &:last-child
     margin-bottom: $le-space-medium
 
@@ -7,7 +9,7 @@
     overflow-y: auto
 
   &--indent
-    padding-left: $le-space-large
+    padding-left: $le-space-medium
 
   > .le__list
     padding-left: $le-space-medium
@@ -100,12 +102,15 @@
     color: var(--color-secondary-dark)
     font-weight: 700
 
+    // Prevent item immediately under the heading from indenting.
+    & + .le__list
+      padding-left: 0
+
   &--emphasis
     font-weight: 700
 
   .le__actions
     opacity: 0
-    transition: opacity $le-speed-xfast
 
   &.le__clickable
     position: relative
@@ -115,6 +120,7 @@
       z-index: 1
 
   &.le__clickable::after
+    background-color: var(--list-item-background-color)
     bottom: 0
     content: ''
     display: block
@@ -125,14 +131,12 @@
     z-index: 0
 
   &.le__clickable:hover
+    --list-item-background-color: var(--color-tertiary)
     color: var(--color-on-tertiary)
 
     .le__actions
       opacity: 1
 
-    &::after
-      background-color: var(--color-tertiary)
-
   &--primary.le__clickable,
   &--primary.le__clickable:hover
     color: var(--color-primary)
@@ -143,11 +147,9 @@
 
   &--selected,
   &--selected.le__clickable:hover
+    --list-item-background-color: var(--color-secondary)
     color: var(--color-on-secondary)
 
-    &::after
-      background-color: var(--color-secondary)
-
 .le__list__item__label
   flex-grow: 1
   line-height: $le-line-height-paragraph
@@ -166,4 +168,15 @@
     margin: $le-space-small 0
 
   .le__list__item--pad_vertical &
-    margin: 0 $le-space-medium 0 0
+    margin: 0 $le-space-medium 0 0
+
+.le__list__item__icon
+  align-items: center
+  display: flex
+  justify-content: center
+  height: $le-font-size-icon-menu
+  width: $le-font-size-icon-menu
+
+  .material-icons
+    font-size: $le-font-size-icon-menu
+    padding: 0