Account for the checkbox when aligning the option and fix RTL.

Author: crisbeto

src/lib/core/option/_option.scss

@@ -31,13 +31,14 @@
     }
   }
 
-  .md-option-content {
-    vertical-align: middle;
-  }
+  .md-option-pseudo-checkbox {
+    $margin: $md-menu-side-padding / 2;
+    margin-right: $margin;
 
-  // TODO: doesn't handle RTL yet
-  md-pseudo-checkbox {
-    margin-right: $md-menu-side-padding / 2;
+    [dir="rtl"] & {
+      margin-left: $margin;
+      margin-right: 0;
+    }
   }
 }
 

src/lib/core/option/option.html

@@ -1,5 +1,5 @@
-<md-pseudo-checkbox *ngIf="multiple" [state]="selected ? 'checked' : ''"
-    color="primary"></md-pseudo-checkbox>
-<span class="md-option-content"><ng-content></ng-content></span>
+<md-pseudo-checkbox class="md-option-pseudo-checkbox" *ngIf="multiple"
+    [state]="selected ? 'checked' : ''" color="primary"></md-pseudo-checkbox>
+<ng-content></ng-content>
 <div class="md-option-ripple" *ngIf="!disabled" md-ripple mdRippleBackgroundColor="rgba(0,0,0,0)"
     [mdRippleTrigger]="_getHostElement()"></div>

src/lib/select/select.ts

@@ -57,6 +57,17 @@ export const SELECT_OPTION_HEIGHT_ADJUSTMENT = 9;
 /** The panel's padding on the x-axis */
 export const SELECT_PANEL_PADDING_X = 16;
 
+/**
+ * Distance between the panel edge and the option text in
+ * multi-selection mode.
+ *
+ * (SELECT_PADDING * 1.75) + 20 = 48
+ * The padding is multiplied by 1.75, because the checkbox's margin is half the padding, and
+ * the browser adds ~4px, because we're using inline elements.
+ * The checkbox width is 20px.
+ */
+export const SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.75 + 20;
+
 /**
  * The panel's padding on the y-axis. This padding indicates there are more
  * options available if you scroll.
@@ -611,7 +622,11 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
 
   /** Calculates the scroll position and x- and y-offsets of the overlay panel. */
   private _calculateOverlayPosition(): void {
-    this._offsetX = this._isRtl() ? SELECT_PANEL_PADDING_X : -SELECT_PANEL_PADDING_X;
+    this._offsetX = this.multiple ? SELECT_MULTIPLE_PANEL_PADDING_X : SELECT_PANEL_PADDING_X;
+
+    if (!this._isRtl()) {
+      this._offsetX *= -1;
+    }
 
     const panelHeight =
         Math.min(this.options.length * SELECT_OPTION_HEIGHT, SELECT_PANEL_MAX_HEIGHT);