From 7cf8469fac87705eb4c6cf78c53e81f7d8b9f359 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 21 Aug 2021 23:20:41 +0200 Subject: [PATCH] Improve RTL text support in flex-with-gap mixin Even if it was looking OK using `margin-left`, there were probably edge cases where it wouldn't behave as we expected. As mentioned in the previous commit, this won't be necessary once everyone uses browsers supporting the `gap` property in flexbox layouts, but this won't happen for a few years. In a few months we might also consider using the `margin-inline-start` property, which is currently supported by about 97% of the browsers [1]. [1] https://caniuse.com/css-logical-props --- app/assets/stylesheets/mixins/layouts.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss index f2d546790..93df188bc 100644 --- a/app/assets/stylesheets/mixins/layouts.scss +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -25,10 +25,10 @@ @mixin flex-with-gap($gap: rem-calc(map-get($grid-column-gutter, medium))) { display: flex; - margin-left: -$gap; + margin-#{$global-left}: -$gap; > * { - margin-left: $gap; + margin-#{$global-left}: $gap; } }