fix(bidi-demos): fixed broken demos

- fixed `rtl-prop` mixin to override `ltr` property when applied
- fixed checkbox demos
- fixed datepicker triangle alignment
- fixed divider demos
- fixed inset divider in list
- fixed tooltip demos

fixes #7399

Closes #7409

Author: EladBezalel

src/components/checkbox/demoBasicUsage/style.css

@@ -5,9 +5,7 @@ div.flex-xs {
 .checkboxDemo1 div {
   clear: both;
 }
-.checkboxDemo1 md-checkbox {
-  float: left;
-}
+
 p {
   padding-left: 8px;
 }

src/components/checkbox/demoSyncing/style.css

@@ -1,9 +1,6 @@
 .checkboxDemo1 div {
   clear: both;
 }
-.checkboxDemo1 md-checkbox {
-  float: left;
-}
 legend {
   color: #3F51B5;
 }

src/components/datepicker/datePicker.scss

@@ -137,7 +137,7 @@ $md-date-arrow-size: 5px;
   top: 0;
 
   // TODO(jelbourn): This position isn't great on all platforms.
-  transform: translateY(-25%) translateX(45%);
+  @include rtl(transform, translateY(-25%) translateX(45%), translateY(-25%) translateX(-45%));
 }
 
 // Need crazy specificity to override .md-button.md-icon-button.

src/components/divider/demoBasicUsage/index.html

@@ -29,7 +29,7 @@ <h2 class="md-toolbar-tools">
   <md-content>
     <md-list>
       <md-list-item class="md-3-line" ng-repeat="item in messages">
-        <img ng-src="{{item.face}}?{{$index}}" class="face" alt="{{item.who}}">
+        <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
         <div class="md-list-item-text">
           <h3>{{item.what}}</h3>
           <h4>{{item.who}}</h4>

src/components/divider/demoBasicUsage/style.css

@@ -201,7 +201,7 @@ md-list-item {
     &[md-inset] {
       @include rtl-prop(left, right, $list-item-inset-divider-offset);
       width: calc(100% - #{$list-item-inset-divider-offset});
-      margin: 0;
+      margin: 0 !important;
     }
   }
 

src/components/list/list.scss

@@ -19,18 +19,20 @@ <h2 class="md-toolbar-tools">
         The tooltip is visible when the button is hovered, focused, or touched.
       </p>
 
-      <md-button class="md-fab" aria-label="Insert Drive">
-        <md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
-        <md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
-          Insert Drive
-        </md-tooltip>
-      </md-button>
-      <md-button class="md-fab md-fab-top-right right" aria-label="Photos">
-        <md-tooltip>
-          Photos
-        </md-tooltip>
-        <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
-      </md-button>
+      <div layout="row" layout-align="space-between">
+        <md-button class="md-fab" aria-label="Insert Drive">
+          <md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
+          <md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
+            Insert Drive
+          </md-tooltip>
+        </md-button>
+        <md-button class="md-fab" aria-label="Photos">
+          <md-tooltip>
+            Photos
+          </md-tooltip>
+          <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
+        </md-button>
+      </div>
 
 
       <div style="margin-top: 40px;margin-bottom: -5px">

src/components/tooltip/demoBasicUsage/index.html

@@ -5,15 +5,4 @@ md-toolbar .md-toolbar-tools .md-button:hover {
   border: none;
   transform: none;
   -webkit-transform: none;
-}
-
-
-.left {
-  top:70px !important;
-  left:56px !important;
-}
-
-.right {
-  top:70px !important;
-  right:56px !important;
-}
+}

src/components/tooltip/demoBasicUsage/style.css

@@ -114,6 +114,7 @@
 @mixin rtl-prop($ltr-prop, $rtl-prop, $value) {
   #{$ltr-prop}: $value;
   [dir=rtl] & {
+    #{$ltr-prop}: auto;
     #{$rtl-prop}: $value;
   }
 }