diff --git a/packages/mdc-rtl/README.md b/packages/mdc-rtl/README.md index d7e06744625..658599e6d02 100644 --- a/packages/mdc-rtl/README.md +++ b/packages/mdc-rtl/README.md @@ -40,6 +40,7 @@ Both `mdc-rtl-reflexive-property` and `mdc-rtl-reflexive-box` work with one base | `mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector)` | Applies the value to the `#{$base-property}-#{$default-direction}` property in a LTR context, and flips the direction in an RTL context. **This mixin zeros out the original value in an RTL context.** | | `mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector)` | Emits rules that assign `#{$base-property}`-left to `#{left-value}` and `#{base-property}`-right to `#{right-value}` in a LTR context, and vice versa in a RTL context. **Basically it flips values between a LTR and RTL context.** | | `mdc-rtl-reflexive-position($position-property, $value, $root-selector)` | Applies the value to the specified position in a LTR context, and flips the direction in an RTL context. `$position-property` is a horizontal position, either "left" or "right". | +| `mdc-rtl-reflexive($left-property, $left-value, $right-property, $right-value, $root-selector)` | Applies the pair of property values to the specified position in a LTR context, and flips the direction in an RTL context. | **A note about [dir="rtl"]**: `mdc-rtl($root-selector)` checks for `[dir="rtl"]` on the ancestor element. This works in most cases, it will sometimes lead to false negatives for more complex layouts, e.g. diff --git a/packages/mdc-rtl/_mixins.scss b/packages/mdc-rtl/_mixins.scss index a236c3bce80..3413fedf2d1 100644 --- a/packages/mdc-rtl/_mixins.scss +++ b/packages/mdc-rtl/_mixins.scss @@ -168,7 +168,7 @@ $prop-left: #{$base-property}-left; $prop-right: #{$base-property}-right; - @include mdc-rtl-reflexive_($prop-left, $left-value, $prop-right, $right-value, $root-selector); + @include mdc-rtl-reflexive($prop-left, $left-value, $prop-right, $right-value, $root-selector); } // Takes an argument specifying a horizontal position property (either "left" or "right") as well @@ -209,10 +209,34 @@ $left-value: initial; } - @include mdc-rtl-reflexive_(left, $left-value, right, $right-value, $root-selector); + @include mdc-rtl-reflexive(left, $left-value, right, $right-value, $root-selector); } -@mixin mdc-rtl-reflexive_( +// Takes pair of properties with values as arguments and flips it in RTL context. +// For example: +// +// ```scss +// .mdc-foo { +// @include mdc-rtl-reflexive(left, 2px, right, 5px); +// position: absolute; +// } +// ``` +// is equivalent to: +// +// ```scss +// .mdc-foo { +// position: absolute; +// left: 2px; +// right: 5px; +// +// @include mdc-rtl { +// right: 2px; +// left: 5px; +// } +// } +// ``` +// An optional fifth $root-selector argument may also be given, which is passed to `mdc-rtl`. +@mixin mdc-rtl-reflexive( $left-property, $left-value, $right-property, diff --git a/packages/mdc-top-app-bar/_mixins.scss b/packages/mdc-top-app-bar/_mixins.scss index 7055134b154..57bac44fa03 100644 --- a/packages/mdc-top-app-bar/_mixins.scss +++ b/packages/mdc-top-app-bar/_mixins.scss @@ -46,7 +46,7 @@ } @mixin mdc-top-app-bar-short-border-radius($border-radius: $mdc-top-app-bar-short-collapsed-border-radius) { - @include mdc-rtl-reflexive_(border-bottom-left-radius, 0, border-bottom-right-radius, $border-radius); + @include mdc-rtl-reflexive(border-bottom-left-radius, 0, border-bottom-right-radius, $border-radius); } @mixin mdc-top-app-bar-mobile-breakpoint_($mobile-breakpoint: $mdc-top-app-bar-mobile-breakpoint) {