fix(radioButton): demos are not support RTL properly.

* Currently the radioButton demo is only querying for a dir attribute on the HTML, but that is not consistent with our RTL mixins.
Additionally, these query is not necessary, because we can just apply on right and left a padding and the demo will look great on RTL as well.

Also it will wrap the text of the demo property in LTR and RTL.

Fixes #8233.

Closes #8243

src/components/radioButton/demoBasicUsage/index.html

@@ -1,5 +1,5 @@
 <div>
-  <form ng-submit="submit()" ng-controller="AppCtrl" class="bidi" ng-cloak>
+  <form ng-submit="submit()" ng-controller="AppCtrl" ng-cloak>
     <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
 
     <md-radio-group ng-model="data.group1">
@@ -51,12 +51,3 @@
     </md-radio-group>
   </form>
 </div>
-
-<style>
-
-  html[dir="rtl"] .bidi {
-    padding-right: 20px;
-    padding-left:0;
-  }
-
-</style>

src/components/radioButton/demoBasicUsage/style.css

@@ -4,11 +4,12 @@ body {
 }
 
 hr {
-  margin-left:-20px; opacity:0.3;
+  margin-left: -20px;
+  opacity: 0.3;
 }
 
 md-radio-group {
-  width:150px;
+  width: 150px;
 }
 
 p:last-child {
@@ -17,7 +18,7 @@ p:last-child {
 
 
 [ng-controller] {
-  padding-left: 20px;
+  padding: 0 20px;
 }
 
 .radioValue {
@@ -29,10 +30,9 @@ p:last-child {
 }
 
 md-icon {
-    margin: 20px;
-    margin-top: 0;
-    width: 128px;
-    height: 128px;
+  margin: 0 20px 20px;
+  width: 128px;
+  height: 128px;
 }