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

Use calc() where divisions are involved

Browse Source 
The division operator `/` from Sass is deprecated because `/` is used in
CSS for uses other than dividing numbers. That's why we were getting
many warnings like:

```
Deprecation Warning: Using / for division outside of calc() is
deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($line-height, 2) or calc($line-height / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

margin-top: $line-height / 2;
```

Since using math.div makes the code harder to read and `calc` is
universally supported by all browsers (although the implementation in
Internet Explorer doesn't work in certain cases), we're using `calc`
when assigning the value to a CSS property.

However, we're also using divisions when assigning Sass variables, and
in those cases using `calc` is trickier because sometimes these
variables are used in other operations. We'll handle these cases in the
next commit.
This commit is contained in:
Javi Martín
2024-03-27 21:33:09 +01:00
parent d54971e536
commit 6df813fdb6
54 changed files with 214 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/admin/budget_phases/form.scss
View File

@@ -29,7 +29,7 @@
.button {
&.upload-image {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
}
}
}

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

@@ -22,7 +22,7 @@
dd {
flex-basis: 20em;
flex-grow: 1;
max-width: $global-width * 3 / 4;
max-width: calc(#{$global-width} * 3 / 4);
}
+ * {

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

@@ -11,7 +11,7 @@
}
.callout {
flex-basis: $global-width / 3;
flex-basis: calc(#{$global-width} / 3);
flex-grow: 1;
margin-bottom: 0;
}

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

@@ -4,7 +4,7 @@
.button {
&.upload-image {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
}
}

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

@@ -32,7 +32,7 @@
align-items: flex-start;
+ * {
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
}
.edit-link,

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

@@ -34,7 +34,7 @@
}
&::after {
bottom: $padding / 2;
bottom: calc(#{$padding} / 2);
color: $white;
position: absolute;
right: calc(#{$padding} + #{$quote-padding});

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

@@ -5,7 +5,7 @@
@each $size, $headers in $header-styles {
@include breakpoint($size) {
font-size: (rem-calc(map-get(map-get($headers, h2), font-size)) + rem-calc(map-get(map-get($headers, h3), font-size))) / 2;
font-size: calc(#{rem-calc(map-get(map-get($headers, h2), font-size)) + rem-calc(map-get(map-get($headers, h3), font-size))} / 2);
}
}
}

4
app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
View File

@@ -9,7 +9,7 @@
display: inline-block;
font-size: $small-font-size;
font-weight: bold;
padding: $line-height / 2 $line-height * 3 0;
padding: calc(#{$line-height} / 2) $line-height * 3 0;
text-transform: uppercase;
&::before {
@@ -17,7 +17,7 @@
border-radius: 50%;
content: "";
height: 20px;
margin-left: $line-height / 2;
margin-left: calc(#{$line-height} / 2);
position: absolute;
top: -8px;
width: 20px;

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

@@ -9,7 +9,7 @@
&::after {
content: "";
display: block;
margin-bottom: $line-height / 3;
margin-bottom: calc(#{$line-height} / 3);
}
}

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

@@ -35,7 +35,7 @@
}
form {
max-width: $global-width * 3 / 4;
max-width: calc(#{$global-width} * 3 / 4);
}
select {

10
app/assets/stylesheets/admin/menu.scss
View File

@@ -113,9 +113,9 @@
li {
ul {
margin-left: $line-height / 1.5;
margin-left: calc(#{$line-height * 2} / 3);
border-left: 1px solid $sidebar-hover;
padding-left: $line-height / 2;
padding-left: calc(#{$line-height} / 2);
}
&.is-active a,
@@ -136,7 +136,7 @@
li a {
color: inherit;
display: block;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
vertical-align: top;
&:hover {
@@ -163,11 +163,11 @@
margin-left: $line-height;
li:first-child {
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
}
li:last-child {
padding-bottom: $line-height / 2;
padding-bottom: calc(#{$line-height} / 2);
}
a {

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

@@ -1,7 +1,7 @@
.admin {
.featured-settings-table {
td {
max-width: $global-width / 3;
max-width: calc($global-width / 3);
}
}

4
app/assets/stylesheets/admin/tenants/form.scss
View File

@@ -6,10 +6,10 @@
.radio-and-label {
display: flex;
margin-bottom: $line-height / 3;
margin-bottom: calc(#{$line-height} / 3);
&:last-of-type {
margin-bottom: $line-height * 2 / 3;
margin-bottom: calc(#{$line-height * 2} / 3);
}
input {