diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 7bb6c0f0fe1..3dca55a0b04 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -6,6 +6,9 @@ /// @prop - Margin of the label $label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0 !default; +/// @prop - Margin of the label for RTL +$label-ios-margin-rtl: $item-ios-padding-top 0 $item-ios-padding-bottom ($item-ios-padding-right / 2) !default; + // iOS Default Label // -------------------------------------------------- @@ -14,6 +17,10 @@ $label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / margin: $label-ios-margin; } +[dir="rtl"] .label-ios { + margin: $label-ios-margin-rtl; +} + // iOS Default Label Inside An Input/Select Item // -------------------------------------------------- @@ -26,6 +33,13 @@ $label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / width: calc(100% - (#{$item-ios-padding-right} / 2) - #{$item-ios-padding-left}); } +[dir="rtl"] .label-ios + ion-input .text-input, +[dir="rtl"] .label-ios + ion-textarea .text-input, +[dir="rtl"] .label-ios + .input + .cloned-input { + margin-right: $item-ios-padding-left; + margin-left: 0; +} + // iOS Stacked & Floating Labels // -------------------------------------------------- diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 2ad4403803d..b41343e4271 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -12,6 +12,9 @@ $label-md-text-color-focused: color($colors-md, primary) !default; /// @prop - Margin of the label $label-md-margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default; +/// @prop - Margin of the label for RTL +$label-md-margin-rtl: $item-md-padding-top 0 $item-md-padding-bottom ($item-md-padding-right / 2) !default; + // Material Design Default Label // -------------------------------------------------- @@ -20,6 +23,10 @@ $label-md-margin: $item-md-padding-top ($item-md-padding-rig margin: $label-md-margin; } +[dir="rtl"] .label-md { + margin: $label-md-margin-rtl; +} + [text-wrap] .label-md { font-size: $item-md-body-text-font-size; line-height: $item-md-body-text-line-height; @@ -54,6 +61,12 @@ $label-md-margin: $item-md-padding-top ($item-md-padding-rig margin-left: 0; } +[dir="rtl"] .label-md[stacked], +[dir="rtl"] .label-md[floating] { + margin-right: 0; + margin-left: ($item-md-padding-right / 2); +} + .input-has-focus .label-md[stacked], .input-has-focus .label-md[floating] { color: $label-md-text-color-focused; diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index f39fc91587d..0b083a4a006 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -9,12 +9,22 @@ $label-wp-text-color: #999 !default; /// @prop - Text color of the label when it has focused $label-wp-text-color-focused: color($colors-wp, primary) !default; +/// @prop - Margin of the label +$label-wp-margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default; + +/// @prop - Margin of the label for RTL +$label-wp-margin-rtl: $item-wp-padding-top 0 $item-wp-padding-bottom ($item-wp-padding-right / 2) !default; + // Windows Default Label // -------------------------------------------------- .label-wp { - margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0; + margin: $label-wp-margin; +} + +[dir="rtl"] .label-wp { + margin: $label-wp-margin-rtl; } @@ -46,6 +56,12 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default; margin-left: 0; } +[dir="rtl"] .label-wp[stacked], +[dir="rtl"] .label-wp[floating] { + margin-right: 0; + margin-left: ($item-wp-padding-right / 2); +} + .input-has-focus .label-wp[stacked], .input-has-focus .label-wp[floating] { color: $label-wp-text-color-focused;