Sanding and shimming in CSS related to Create menu

- Create menu labels can now wrap.
- Line height, padding adjusted for menu items.
- Create menu filter input slimmed down a bit.

src/api/menu/components/SuperMenu.vue

@@ -27,13 +27,12 @@
     :style="styleObject"
   >
     <div class="c-super-menu__left-col">
-      <div v-if="options.filterable" class="c-super-menu__filter">
+      <div v-if="options.filterable" class="c-super-menu__filter l-input-lg">
         <input
           ref="filterInput"
           v-model="searchTerm"
           type="text"
           placeholder="Filter..."
-          class="c-super-menu__filter-input"
           @input="filterItems"
           @keydown.stop="handleKeyDown"
           @click.stop

src/styles/_constants-darkmatter.scss

@@ -348,7 +348,7 @@ $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.8) 0 2px 10px;
 $shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
 $shdwMenuText: none;
-$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+$menuItemPad: 4px, 6px;
 
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;

src/styles/_constants-espresso.scss

@@ -317,7 +317,7 @@ $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.8) 0 2px 10px;
 $shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
 $shdwMenuText: none;
-$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+$menuItemPad: 4px, 6px;
 
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;

src/styles/_constants-maelstrom.scss

@@ -333,7 +333,7 @@ $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.8) 0 2px 10px;
 $shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
 $shdwMenuText: none;
-$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+$menuItemPad: 4px, 6px;
 
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;

src/styles/_constants-snow.scss

@@ -316,7 +316,7 @@ $colorMenuElementHilite: darken($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.8) 0 2px 10px;
 $shdwMenuInner: none;
 $shdwMenuText: none;
-$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+$menuItemPad: 4px, 6px;
 
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;

src/styles/_controls.scss

@@ -58,9 +58,11 @@
 @mixin menuInner() {
   li {
     @include cControl();
+    align-items: baseline;
     justify-content: start;
     cursor: pointer;
     display: flex;
+    line-height: 1.2em;
     padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
     white-space: nowrap;
 
@@ -651,38 +653,16 @@ select {
   padding: $interiorMarginLg;
   flex-direction: row;
 
-  > [class*='__'] {
-    //flex: 1 1 50%;
-    //&:first-child {
-    //  margin-right: $m;
-    //}
-
-    &:last-child {
-      //border-left: 1px solid $colorInteriorBorder;
-      //padding-left: $m;
-    }
-  }
-
   &__left-col {
     display: flex;
     flex-direction: column;
     flex: 1 1 50%;
+    gap: $interiorMargin;
     margin-right: $m;
   }
 
   &__filter {
     flex: 0 0 auto;
-    width: 100%;
-    margin-bottom: $interiorMarginLg;
-
-    .c-super-menu__filter-input {
-      @include nice-input();
-      width: 100%;
-      padding: $interiorMargin;
-      &:focus {
-        background: $colorInputBg;
-      }
-    }
   }
 
   &__menu {
@@ -696,6 +676,7 @@ select {
 
     li {
       border-radius: $controlCr;
+      white-space: normal; // Let long names wrap
     }
   }