ionic-team
feat(safe-area): safe area mixin
Issue number: N/A
What is the current behavior?
The safe area defines the area within a view that isn't covered by a navigation bar, tab bar, toolbar, or other views a view controller might provide.
The safe areas are reliant on the device's direction, not the app's. This leads to using styles like padding-right and padding-left. However, this can cause issues with the app's direction (LTR/RTL). The team needs to add the correct styles, which can lead to either a bigger block of code or forgetting about the fact that it's based on device direction.
What is the new behavior?
I added a new mixin that will take accept two values: start and end. These values are the additional values that the developer wants to add to either --ion-safe-area-left or --ion-safe-area-right. For example, start will be added to ion-safe-area-left in ltr and ion-safe-area-right in rtl. The end will be added to ion-safe-area-right in ltr and ion-safe-area-left in rtl.
The team wouldn't have to manually do the math with the mixin.
Does this introduce a breaking change?
- [ ] Yes
- [x] No
Other information
I only updated the .item-divider-inner style to use the mixin to start with. The point of this PR is to introduce the mixin. Another PR will be created to add the mixin to the styles.
