mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
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:
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Reference in New Issue
Block a user