feat(label): fix positioning of floating label for rtl (#11324)

* floating label rtl fix

add rtl fix to floating label

* single block, not nesting

* fix(floating-label): wp and ios issue for rtl

problems with transform-origin with both windows and ios platform for
rtl and also wrong translate3d for rtl for windows platform

* style(floating-label): remove html, 2 space indent

remove reference of "html", just plain '[dir="rtl"]
indent 2 space instead of 4

* refactor(floating-label): remove duplicate rule

remove unnecessary duplicate rule

Author: sijav

src/components/label/label.ios.scss

@@ -44,6 +44,10 @@ $label-ios-margin:             $item-ios-padding-top ($item-ios-padding-right /
   transition: transform 150ms ease-in-out;
 }
 
+[dir="rtl"] .label-ios[floating] {
+  transform-origin: right top;
+}
+
 .input-has-focus .label-ios[floating],
 .input-has-value .label-ios[floating] {
   transform: translate3d(0, 0, 0) scale(.8);

src/components/label/label.md.scss

@@ -48,6 +48,10 @@ $label-md-margin:                     $item-md-padding-top ($item-md-padding-rig
   transition: transform 150ms ease-in-out;
 }
 
+[dir="rtl"] .label-md[floating] {
+  transform-origin: right top;
+}
+
 .label-md[stacked],
 .label-md[floating] {
   margin-bottom: 0;

src/components/label/label.wp.scss

@@ -40,6 +40,11 @@ $label-wp-text-color-focused:         color($colors-wp, primary) !default;
   transform-origin: left top;
 }
 
+[dir="rtl"] .label-wp[floating] {
+  transform: translate3d(-8px, 34px, 0);
+  transform-origin: right top;
+}
+
 .label-wp[stacked],
 .label-wp[floating] {
   margin-bottom: 0;