{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caae659e35a9bf1b9d91c734c8a3315a81bcde21","tarball":"https://registry.npmjs.org/@material/rtl/-/rtl-0.35.0.tgz","fileCount":3,"integrity":"sha512-Cn5xpwgVuB37NUTAPS+TMZ+XLJaztp7oDrv5y73zu0ZjTnf9HPAsS16ovauf8HQqMaZyAj9B3tvZHL05g4y5pA==","signatures":[{"sig":"MEQCIBFhLkjWrxS7drqpgCnv179vWn76TnCVEhnALMPmGsKHAiA3aviVcN+Jefd6lgpCM+PRd3W6sMCBcsR0Suq8F3wUsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mEjCRA9TVsSAnZWagAApmEP/jwj1aoMNOHLOlV5EGnQ\n9bOpi1mwcPIKPM8TAyurwyaREfR2pKlFzOF2UIPMdp/Ym83vNgVNprHazIW4\nIi1vVUETu51FqNg4BGE6s6/LSU6yBrAdbwVxxm4CqVdwI9cu8k2LrPMcTcCw\n86TZldrmwigyu8ngp42adufb/I4VHOaCQw6qrBTWU/BY1t7WkOfh2MozZYkc\ndi1Q0yVJwk0/PxI6QeweOPbeWYg/Oaed9fSF/4U6CIwxgdFqiTTVyScEO8Nf\nwavDzLeYI456ziUxdS3xAKwyvT8tyDXoQ6kAfoi3HK09GwZaVObzBb67U4eW\neVNXxdidCbO6I4jNYwZ9sLxKz2GNPBnxqELMtbUMuRjWiotBE5OCwTw/qDo5\n3cQgRnNDF8hcY2OKwntorwVfQ7AWAJHEiROskKQrETkI2Ma/I/PMA6PA0YvV\nNkmqBoR5AGLkYjSLeNYBwW9yrgidRLa2ilCTrrA2JUFDo62YHG+XG49T9ZoV\ntVuKPQlXY5SCmg91r8Oi2tB3HOaa6xuz4R9TYBDY90CD+yofx5L2S+BsgNuc\njrpQkUQvnMhLHawc3N1V/rpyODqKKuaVWljAswt2eXL3Ebc1hcZQhguXf3C3\nej6S44TegTVedJ5Wv4EHbFxT5PCMuHi9BcNylCtmRXl284Aj58leEMdL8UZm\ns0lF\r\n=FW1q\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/rtl","readme":"<!--docs:\ntitle: \"RTL\"\nlayout: detail\nsection: components\nexcerpt: \"Right-to-left and bi-directional text layout via SCSS helpers.\"\npath: /catalog/rtl/\n-->\n\n# RTL\n\nUIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/usability/bidirectionality.html\">Material Design guidelines: Bidirectionality</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/rtl\n```\n\n## Usage\n\n### Sass Mixins\n\n`mdc-rtl` is the most flexible mixin, because it can work with multiple CSS properties. All other RTL mixins logic could be engineered by only using `mdc-rtl`, but we provide these mixins for convenience.\n\nBoth `mdc-rtl-reflexive-property` and `mdc-rtl-reflexive-box` work with one base box-model property, e.g. margin, border, padding. But `mdc-rtl-reflexive-property` is more flexible because it accepts different left and right values. `mdc-rtl-reflexive-box` assumes the left and right values are the same, and therefore that the box-model is symmetrical.\n\n`mdc-rtl-reflexive-position` is the least flexible mixin. It only works with one horizontal position property, \"left\" or \"right\". It also assumes the left and right values are the same.\n\n| Mixin | Description |\n| ----------------------------------------------- | - |\n| `mdc-rtl($root-selector)` | Creates a rule that is applied when the root element is within an RTL context |\n| `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.**  |\n| `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.** |\n| `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\". |\n\n**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.\n\n```html\n<html dir=\"rtl\">\n  <!-- ... -->\n  <div dir=\"ltr\">\n    <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n  </div>\n</html>\n```\n\nUnfortunately, we've found that this is the best we can do for now. In the future, selectors such as [:dir](http://mdn.io/:dir) will help us mitigate this.\n","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","rtl","right to left"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web RTL Scss helpers","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"8.7.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/rtl_0.35.0_1524523298053_0.9005558313889834","host":"s3://npm-registry-packages"},"_id":"@material/rtl@0.35.0","version":"0.35.0"}