@material/rtl
Advanced tools
@material/rtl - npm Package Compare versions
Comparing version 0.1.6 to 0.1.7
| { | ||
| "name": "@material/rtl", | ||
| "description": "Material Components for the web RTL Scss helpers", | ||
| "version": "0.1.6", | ||
| "version": "0.1.7", | ||
| "license": "Apache-2.0", | ||
@@ -6,0 +6,0 @@ "keywords": [ |
207
README.md
@@ -11,5 +11,3 @@ <!--docs: | ||
| MDC RTL provides sass mixins to assist with RTL / bi-directional layouts within MDC-Web components. | ||
| Because we would like to achieve a standard approach to RTL throughout MDC-Web, we highly recommend | ||
| that any MDC-Web component that needs RTL support leverage this package. | ||
| UIs 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. | ||
@@ -32,73 +30,19 @@ ## Design & API Documentation | ||
| Simply `@import "@material/rtl/mixins";` and start using the mixins. Each mixin is described below. | ||
| ### Sass Mixins | ||
| ### mdc-rtl | ||
| `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. | ||
| ```scss | ||
| @mixin mdc-rtl($root-selector: null) | ||
| ``` | ||
| Both `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. | ||
| Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout. | ||
| `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. | ||
| Usage Example: | ||
| | Mixin | Description | | ||
| | ----------------------------------------------- | - | | ||
| | `mdc-rtl($root-selector)` | Creates a rule that is applied when the root element is within an RTL context | | ||
| | `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". | | ||
| ```scss | ||
| .mdc-foo { | ||
| position: absolute; | ||
| left: 0; | ||
| **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. | ||
| @include mdc-rtl { | ||
| left: auto; | ||
| right: 0; | ||
| } | ||
| &__bar { | ||
| margin-left: 4px; | ||
| @include mdc-rtl(".mdc-foo") { | ||
| margin-left: auto; | ||
| margin-right: 4px; | ||
| } | ||
| } | ||
| } | ||
| .mdc-foo--mod { | ||
| padding-left: 4px; | ||
| @include mdc-rtl { | ||
| padding-left: auto; | ||
| padding-right: 4px; | ||
| } | ||
| } | ||
| ``` | ||
| will emit the following css: | ||
| ```css | ||
| .mdc-foo { | ||
| position: absolute; | ||
| left: 0; | ||
| } | ||
| [dir="rtl"] .mdc-foo, .mdc-foo[dir="rtl"] { | ||
| left: auto; | ||
| right: 0; | ||
| } | ||
| .mdc-foo__bar { | ||
| margin-left: 4px; | ||
| } | ||
| [dir="rtl"] .mdc-foo .mdc-foo__bar, .mdc-foo[dir="rtl"] .mdc-foo__bar { | ||
| margin-left: auto; | ||
| margin-right: 4px; | ||
| } | ||
| .mdc-foo--mod { | ||
| padding-left: 4px; | ||
| } | ||
| [dir="rtl"] .mdc-foo--mod, .mdc-foo--mod[dir="rtl"] { | ||
| padding-left: auto; | ||
| padding-right: 4px; | ||
| } | ||
| ``` | ||
| **N.B.**: checking for `[dir="rtl"]` on an ancestor element works in most cases, it will sometimes | ||
| lead to false negatives for more complex layouts, e.g. | ||
| ```html | ||
@@ -113,127 +57,2 @@ <html dir="rtl"> | ||
| Unfortunately, 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. | ||
| ### mdc-rtl-reflexive-box | ||
| ```scss | ||
| @mixin mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector: null) | ||
| ``` | ||
| Takes a base box-model property - e.g. margin / border / padding - along with a default | ||
| direction and value, and emits rules which apply the value to the | ||
| `#{$base-property}-#{$default-direction}` property by default, but flips the direction | ||
| when within an RTL context. | ||
| For example: | ||
| ```scss | ||
| .mdc-foo { | ||
| @include mdc-rtl-reflexive-box(margin, left, 8px); | ||
| } | ||
| ``` | ||
| is equivalent to: | ||
| ```scss | ||
| .mdc-foo { | ||
| margin-left: 8px; | ||
| @include mdc-rtl { | ||
| margin-right: 8px; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| ``` | ||
| Whereas: | ||
| ```scss | ||
| .mdc-foo { | ||
| @include mdc-rtl-reflexive-box(margin, right, 8px); | ||
| } | ||
| ``` | ||
| is equivalent to: | ||
| ```scss | ||
| .mdc-foo { | ||
| margin-right: 8px; | ||
| @include mdc-rtl { | ||
| margin-right: 0; | ||
| margin-left: 8px; | ||
| } | ||
| } | ||
| ``` | ||
| You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`, | ||
| e.g. `@include mdc-rtl-reflexive-box-property(margin, left, 8px, ".mdc-component")`. | ||
| Note that this function will always zero out the original value in an RTL context. If you're | ||
| trying to flip the values, use `mdc-rtl-reflexive-property`. | ||
| ### mdc-rtl-reflexive-property | ||
| ```scss | ||
| @mixin mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector: null) | ||
| ``` | ||
| Takes a base property and 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. | ||
| For example: | ||
| ```scss | ||
| .mdc-foo { | ||
| @include mdc-rtl-reflexive-property(margin, auto, 12px); | ||
| } | ||
| ``` | ||
| is equivalent to: | ||
| ```scss | ||
| .mdc-foo { | ||
| margin-left: auto; | ||
| margin-right: 12px; | ||
| @include mdc-rtl { | ||
| margin-left: 12px; | ||
| margin-right: auto; | ||
| } | ||
| } | ||
| ``` | ||
| A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`. | ||
| ### mdc-rtl-reflexive-position | ||
| ```scss | ||
| @mixin mdc-rtl-reflexive-position($pos, $value, $root-selector: null) | ||
| ``` | ||
| Takes an argument specifying a horizontal position property (either "left" or "right") as well | ||
| as a value, and applies that value to the specified position in a LTR context, and flips it in a | ||
| RTL context. | ||
| For example: | ||
| ```scss | ||
| .mdc-foo { | ||
| @include mdc-rtl-reflexive-position(left, 0); | ||
| position: absolute; | ||
| } | ||
| ``` | ||
| is equivalent to: | ||
| ```scss | ||
| .mdc-foo { | ||
| position: absolute; | ||
| left: 0; | ||
| right: initial; | ||
| @include mdc-rtl { | ||
| right: 0; | ||
| left: initial; | ||
| } | ||
| } | ||
| ``` | ||
| An optional third `$root-selector` argument may also be given, which is passed to `mdc-rtl`. | ||
| Unfortunately, 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. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Number of medium supply chain risk alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-16.82%
9209
- Number of lines in readme file
- decreased by-76.37%
56
No dependency changes