diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index c2a99e1fd8..4a1a09e84b 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -59,15 +59,73 @@ } :host(.menu-side-start) .menu-inner { + /** + * Menu does not cover the whole screen so we need to set the safe area for the + * side that touches the screen edge only. Since safe area is not logical, it + * needs to be applied to the correct side depending on the language direction. + * Otherwise, the content will have less space on both sides. + * + * LTR: + * The left side of the menu touches the screen edge. The safe area padding has + * already been set in the core styles, so there's no need to set it again. + * The right side of the menu is not touching the screen edge. Padding is not + * applied to the right side of the menu. A value of 0 is set. + */ --ion-safe-area-right: 0px; @include position(0, auto, 0, 0); + + @include rtl() { + /** + * Menu does not cover the whole screen so we need to set the safe area for the + * side that touches the screen edge only. Since safe area is not logical, it + * needs to be applied to the correct side depending on the language direction. + * Otherwise, the content will have less space on both sides. + * + * RTL: + * The right side of the menu touches the screen edge. The safe area padding has + * already been set in the core styles, so there's no need to set it again. + * The left side of the menu is not touching the screen edge. Padding is not + * applied to the left side of the menu. A value of 0 is set. + */ + --ion-safe-area-right: env(safe-area-inset-right); + --ion-safe-area-left: 0px; + } } :host(.menu-side-end) .menu-inner { + /** + * Menu does not cover the whole screen so we need to set the safe area for the + * side that touches the screen edge only. Since safe area is not logical, it + * needs to be applied to the correct side depending on the language direction. + * Otherwise, the content will have less space on both sides. + * + * LTR: + * The right side of the menu touches the screen edge. The safe area padding has + * already been set in the core styles, so there's no need to set it again. + * The left side of the menu is not touching the screen edge. Padding is not + * applied to the left side of the menu. A value of 0 is set. + */ --ion-safe-area-left: 0px; @include position(0, 0, 0, auto); + + @include rtl() { + /** + * Menu does not cover the whole screen so we need to set the safe area for the + * side that touches the screen edge only. Since safe area is not logical, it + * needs to be applied to the correct side depending on the language direction. + * Otherwise, the content will have less space on both sides. + * + * RTL: + * The left side of the menu touches the screen edge. The safe area padding has + * already been set in the core styles, so there's no need to set it again. + * The right side of the menu is not touching the screen edge. Padding is not + * applied to the right side of the menu. A value of 0 is set. + */ + --ion-safe-area-left: env(safe-area-inset-left); + --ion-safe-area-right: 0px; + } } ion-backdrop { diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index bd286d3662..92cf570651 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -28,7 +28,6 @@ --opacity-scale: 1; @include font-smoothing(); - @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right)); display: block; @@ -36,6 +35,11 @@ width: 100%; + // stylelint-disable-next-line property-disallowed-list + padding-right: var(--ion-safe-area-right); + // stylelint-disable-next-line property-disallowed-list + padding-left: var(--ion-safe-area-left); + color: var(--color); font-family: $font-family-base;