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
This commit is contained in:
Sina
2017-04-24 20:20:47 +04:30
committed by Brandy Carney
parent cc1eb02337
commit 0ec71cd188
3 changed files with 13 additions and 0 deletions

View File

@ -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);

View File

@ -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;

View File

@ -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;