Add unit price information into the cart

- .total-price element must be a div (display: block) to be text right aligned (and not being float: right)
 - use .option-text to display a grey text
 - use display: flex to display question mark icon and text information

app/assets/stylesheets/darkswarm/cart-dropdown.scss

@@ -52,6 +52,12 @@
         font-size: 1.5em;
       }
     }
+
+    .unit-price {
+      justify-content: flex-end;
+      align-items: baseline;
+    }
+
   }
 
   .go-shopping {
@@ -82,7 +88,8 @@
           padding: 0.5em 0 0.5em 1em;
         }
 
-        span {
+        span,
+        .total-price {
           color: $grey-800;
           font-size: 16px;
           line-height: 1.4em;

app/views/shared/menu/_cart_sidebar.html.haml

@@ -22,7 +22,15 @@
           %td.text-right
             %span.quantity {{ line_item.quantity }}
           %td
-            %span.total-price.right {{ line_item.total_price | localizeCurrency }}
+            .total-price.text-right {{ line_item.total_price | localizeCurrency }}
+            .flex.unit-price
+              %div{:style => "margin-right: 5px"}
+                %question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
+                "question-mark-with-tooltip-append-to-body" => "true",
+                "question-mark-with-tooltip-placement" => "top",
+                "question-mark-with-tooltip-animation" => true}
+              .options-text
+                {{ line_item.variant.unit_price_price | localizeCurrency }} / {{ line_item.variant.unit_price_unit }}
 
       .cart-empty{"ng-show" => "Cart.line_items.length == 0"}
         %p