Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(safe-area): safe area mixin #28224

Closed
wants to merge 6 commits into from
Closed

feat(safe-area): safe area mixin #28224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3e02621
style(safe-area): safe area mixin
thetaPC Sep 23, 2023
6954ff4
Merge branch 'main' of github.com:ionic-team/ionic-framework into saf…
thetaPC Nov 3, 2023
33f34e9
style(safe-area): add comment
thetaPC Nov 3, 2023
7a765e0
style(safe-area): inner-start not needed
thetaPC Nov 3, 2023
5675911
feat(safe-area): add layer of abstraction
thetaPC Jan 25, 2024
b878e47
Merge branch 'main' of github.com:ionic-team/ionic-framework into saf…
thetaPC Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 1 addition & 12 deletions core/src/components/item-divider/item-divider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,7 @@
.item-divider-inner {
@include margin(0);
@include padding(var(--inner-padding-top), null, var(--inner-padding-bottom), null);

/* stylelint-disable */
@include ltr() {
padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
padding-left: var(--inner-padding-start);
}

@include rtl() {
padding-right: var(--inner-padding-start);
padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
}
/* stylelint-enable */
@include safe-area-padding(null, var(--inner-padding-end));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is no longer using the --inner-padding-start property:

Before After 
.item-divider-inner {
  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
  padding-left: var(--inner-padding-start);
}

:host-context([dir=rtl]) .item-divider-inner {
  padding-right: var(--inner-padding-start);
  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
}

[dir=rtl] .item-divider-inner {
  padding-right: var(--inner-padding-start);
  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
}

@supports selector(:dir(rtl)) {
  .item-divider-inner:dir(rtl) {
    padding-right: var(--inner-padding-start);
    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
  }
}
 
.item-divider-inner {
  padding-right: calc(var(--ion-safe-area-right, 0) + var(--inner-padding-end));
}

:host-context([dir=rtl]) .item-divider-inner {
  padding-left: calc(var(--ion-safe-area-left, 0) + var(--inner-padding-end));
  padding-right: unset;
}

[dir=rtl] .item-divider-inner {
  padding-left: calc(var(--ion-safe-area-left, 0) + var(--inner-padding-end));
  padding-right: unset;
}

@supports selector(:dir(rtl)) {
  .item-divider-inner:dir(rtl) {
    padding-left: calc(var(--ion-safe-area-left, 0) + var(--inner-padding-end));
    padding-right: unset;
  }
}


display: flex;

Expand Down
50 changes: 50 additions & 0 deletions core/src/themes/ionic.mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,56 @@
@content;
}

// Add padding for the safe areas on the left and right of the device.
// @param {string} $start - amount to add to start.
// @param {string} $end - amount to add to end.
@mixin safe-area-padding($start, $end) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the goal to eventually include the top and bottom padding in this mixin as well? If not I think this should be called safe-area-padding-horizontal.

@include safe-area-horizontal('padding', $start, $end);
}

// Safe area horizontal
// --------------------------------------------------------------------------------
// Adds styles to the left and right of the element to account for the safe area.
// Safe area is dependent to the device direction, not the app direction.
// It is important to apply the styles to the correct side of the element.
// `start` will apply the styles to the left in ltr and right in rtl.
// `end` will apply the styles to the right in ltr and left in rtl.
//
// @param {string} $prop - property to add
// @param {string} $start - amount to add to start. Default: null
// This amount will be added to `ion-safe-area-left` in ltr and `ion-safe-area-right` in rtl.
// - Example: 10px
// @param {string} $end - amount to add to end. Default: null
// This amount will be added to `ion-safe-area-right` in ltr and `ion-safe-area-left` in rtl.
// - Example: 10px
// --------------------------------------------------------------------------------

@mixin safe-area-horizontal($prop: 'padding', $start: null, $end: null) {
@include ltr() {
@if $start != null {
#{$prop}-left: calc(var(--ion-safe-area-left, 0) + #{$start});
}
@if $end != null {
#{$prop}-right: calc(var(--ion-safe-area-right, 0) + #{$end});
}
}

@include rtl() {
@if $start != null and $end != null {
#{$prop}-left: calc(var(--ion-safe-area-left, 0) + #{$end});
#{$prop}-right: calc(var(--ion-safe-area-right, 0) + #{$start});
} @else if $start != null {
#{$prop}-right: calc(var(--ion-safe-area-right, 0) + #{$start});
// Unset left since it was set by ltr().
#{$prop}-left: unset;
} @else if $end != null {
#{$prop}-left: calc(var(--ion-safe-area-left, 0) + #{$end});
// Unset right since it was set by ltr().
#{$prop}-right: unset;
}
}
}


// SVG Background Image Mixin
// @param {string} $svg
Expand Down
Loading