hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make margins/paddings automatically adapt in rtl

Browse Source 
No need for separate rules for rtl, yay!
This commit is contained in:
daudix
2024-07-05 05:54:19 +03:00
parent 4edb6e9760
commit 1758eb99a8
13 changed files with 40 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
sass/_article-list.scss
View File

@ -9,12 +9,7 @@
position: relative;
h3 {
margin-right: 8rem;
:root[dir*="rtl"] & {
margin-right: unset;
margin-left: 8rem;
}
margin-inline-end: 8rem;
}
}
@ -132,6 +127,7 @@
.icon {
vertical-align: -0.125em;
margin-inline-end: 0.25rem;
width: 1rem;
height: 1rem;
}
@ -159,7 +155,8 @@
color: var(--purple-fg);
.icon {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%3E%3C/svg%3E");
// $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%3E%3C/svg%3E");
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 1C.89 1 0 1.89 0 3v2c0 .751.41 1.402 1.018 1.744A2 2 0 0 0 1 7v7c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7a2 2 0 0 0-.018-.256A2 2 0 0 0 16 5V3c0-1.11-.89-2-2-2zm0 2h12v2H2zm1 4h10v7H3zm3 1v1h4V8z'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
mask-image: $icon;
background-color: var(--purple-fg);