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

Simplify calc rules with rem-calc inside

Browse Source 
The interpolation of the rem-calc function made the code harder to read.
Besides, for new code we've already agreed upon using rem units instead
of `rem-calc`.

For instance, we had the following code:

```
width: calc(100% - #{2 * rem-calc(10)});
```

Now, `2 * rem-calc(10)` is the same as `rem-calc(20)`, but we were using
`2 *` to make it clear that this value was related to the value of the
`margin-left` property, which was `rem-calc(10)`.

IMHO using `0.625rem` for the margin and `2 * 0.625rem` for the width
the code is easier to read because there are no interpolation and no
complex operations involved.
This commit is contained in:
Javi Martín
2025-02-28 13:26:33 +01:00
parent f3fe1ac6c1
commit cddce21f7b
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/admin/budgets/index.scss
View File

@@ -2,7 +2,7 @@
.budget-completed, .budget-completed,
.budget-draft { .budget-draft {
padding-left: calc(1em + #{rem-calc(10)}); padding-left: calc(1em + 0.625rem);
position: relative; position: relative;
&::before { &::before {

2
app/assets/stylesheets/admin/machine_learning/settings.scss
View File

@@ -5,7 +5,7 @@
flex-wrap: wrap; flex-wrap: wrap;
> * { > * {
flex-basis: calc((#{rem-calc(720)} - 100%) * 999); flex-basis: calc((45rem - 100%) * 999);
flex-grow: 1; flex-grow: 1;
} }

8
app/assets/stylesheets/legislation_process_form.scss
View File

@@ -9,13 +9,13 @@
bottom: 0; bottom: 0;
content: ""; content: "";
display: block; display: block;
margin-left: rem-calc(16); margin-left: 1rem;
position: absolute; position: absolute;
width: calc(100% - #{2 * rem-calc(16)}); width: calc(100% - 2 * 1rem);
@include breakpoint(small only) { @include breakpoint(small only) {
margin-left: rem-calc(10); margin-left: 0.625rem;
width: calc(100% - #{2 * rem-calc(10)}); width: calc(100% - 2 * 0.625rem);
} }
} }