consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve RTL text support in flex-with-gap mixin

Browse Source 
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
This commit is contained in:
Javi Martín
2021-08-21 23:20:41 +02:00
parent 4fea839c54
commit 7cf8469fac
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/mixins/layouts.scss
View File

@@ -25,10 +25,10 @@
@mixin flex-with-gap($gap: rem-calc(map-get($grid-column-gutter, medium))) { @mixin flex-with-gap($gap: rem-calc(map-get($grid-column-gutter, medium))) {
display: flex; display: flex;
margin-left: -$gap; margin-#{$global-left}: -$gap;
> * { > * {
margin-left: $gap; margin-#{$global-left}: $gap;
} }
} }