refactor(style): simplify checkmark ui #52

Changes to be committed:
modified:   demo/demo.md
modified:   src/auro-menu-option.js
modified:   src/style-base.scss
modified:   src/style-menu-option.scss

demo/demo.md

@@ -6,7 +6,7 @@ The `auro-menu` element should be used in situations where users will select one
 `auro-menu` will be used with `auro-dropdown`.
 
 
-### index selected option 2;
+### index selected option 2, checkmark;
 
 <div class="exampleWrapper">
   <auro-menu id="auroMenu2" indexSelectedOption="2" checkmark>
@@ -18,6 +18,18 @@ The `auro-menu` element should be used in situations where users will select one
   </auro-menu>
 </div>
 
+### index selected option 2;
+
+<div class="exampleWrapper">
+  <auro-menu id="auroMenu2" indexSelectedOption="2">
+    <auro-menu-option data-value="Stops">Stops</auro-menu-option>
+    <auro-menu-option disabled data-value="Price">(disabled) Price</auro-menu-option>
+    <auro-menu-option data-value="Duration">Duration</auro-menu-option>
+    <auro-menu-option data-value="Departure">Departure</auro-menu-option>
+    <auro-menu-option data-value="Arrival">Arrival</auro-menu-option>
+  </auro-menu>
+</div>
+
 ### Submenu Example
 
 <div class="exampleWrapper">

src/auro-menu-option.js

@@ -56,18 +56,11 @@ class AuroMenuOption extends LitElement {
 
   render() {
     return html`
-      <li>
-        <div class="content">
-          ${this.checkmark ? html`
-            <div class="checkmark">
-              ${this.selected ? html`
-                ${this.svg}
-              `
-              : undefined}
-            </div>
-          ` : undefined}
+      <li class="menuOption" part="menuOption">
+        ${this.checkmark ? html`
+          ${this.selected ? html`${this.svg}` : undefined}
+        ` : undefined}
         <slot></slot>
-        </div>
       </li>
     `;
   }

src/style-base.scss

@@ -17,13 +17,21 @@
   width: 100%;
 }
 
+:host([checkmark]) {
+  ::slotted(auro-menu-option) {
+    padding-left: 2rem;
+  }
+
+  ::slotted([selected]) {
+    padding-left: 0;
+  }
+}
+
 ul {
   display: inline-block;
   width: 100%;
   padding: 0;
   margin: 0;
-  color: var(--auro-color-text-primary-on-light);
-  size: var(--auro-text-body);
   vertical-align: middle;
 
   .hidden {

src/style-menu-option.scss

@@ -14,69 +14,39 @@
   white-space: nowrap;
 }
 
+:host(:hover) {
+  background-color: var(--auro-color-brand-neutral-100);
+  color: var(--auro-color-text-primary-on-light);
+}
+
 :host(:focus) {
   background-color: var(--auro-color-alert-notification-on-light);
-  box-shadow: inset 0 0 0 3px var(--auro-color-alert-notification-on-light);
   color: var(--auro-color-base-white);
-  outline: none;
 
   svg {
     fill: var(--auro-color-base-white);
   }
 }
 
-li {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  list-style-type: none;
-  outline: 0;
-
-  .checkmark {
-    width: var(--auro-size-lg);
-    height: 100%;
-    margin-right: var(--auro-size-xs);
-  }
-
-  &:hover {
-    background-color: var(--auro-color-brand-neutral-100);
-    color: var(--auro-color-text-primary-on-light);
-  }
-
-  &:focus {
-    background-color: var(--auro-color-alert-notification-on-light);
-    color: var(--auro-color-base-white);
-
-    svg {
-      fill: var(--auro-color-base-white);
-    }
-  }
+:host([disabled]) {
+  color: var(--auro-color-text-disabled-on-light);
+  pointer-events: none;
+  user-select: none;
 }
 
-.content {
+.menuOption {
   display: flex;
   overflow: hidden;
   height: var(--auro-size-lg);
   flex: 1;
   align-items: center;
   padding: var(--auro-size-xxs) var(--auro-size-xs);
+  cursor: pointer;
   line-height: 1;
+  list-style-type: none;
   text-overflow: ellipsis;
-}
 
-// TODO: review and refactor this
-@include auro_breakpoint--sm {
-  li {
-    height: var(--auro-size-xxl);
+  svg {
+    margin-right: var(--auro-size-xs);
   }
 }
-
-:host([disabled]) {
-  color: var(--auro-color-text-disabled-on-light);
-  pointer-events: none;
-  user-select: none;
-}