fix(Menu): label now fills width

GetTerminus · Oct 25, 2019 · f0a3131 · f0a3131
1 parent ec7d6a6
commit f0a3131
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/terminus-ui/checkbox/src/checkbox.component.scss b/terminus-ui/checkbox/src/checkbox.component.scss
@@ -60,12 +60,21 @@ $ts-select-item-height: 3em !default;
   }
 
   // Target checkboxes inside a material menu dropdown panel
-  .mat-menu-panel & {
+  .ts-menu__panel & {
     // Match the material button line-height and spacing
     .c-checkbox {
       line-height: 2em;
       padding: 0 spacing(default);
     }
+
+    // By default the label doesn't fill the width even though the cursor signifies interaction
+    .mat-checkbox-layout {
+      width: 100%;
+    }
+
+    .mat-checkbox-label {
+      flex: 1;
+    }
   }
 
   // Target checkboxes inside a TsOptionComponent

diff --git a/terminus-ui/menu/src/menu.component.html b/terminus-ui/menu/src/menu.component.html
@@ -7,6 +7,8 @@
     [yPosition]="menuPositionY"
     [xPosition]="menuPositionX"
     [overlapTrigger]="shouldOverlapTrigger"
+    backdropClass="ts-menu__backdrop"
+    class="ts-menu__panel"
   >
     <ng-container [ngTemplateOutlet]="menuItemsTemplate"></ng-container>
   </mat-menu>