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/account/permissions_list.scss
View File

@@ -5,7 +5,7 @@
li {
font-size: $small-font-size;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
&::before {
font-size: 0.9em;

2
app/assets/stylesheets/account/verify-account.scss
View File

@@ -1,5 +1,5 @@
.verify-account {
padding-right: $line-height / 2;
padding-right: calc(#{$line-height} / 2);
.already-verified {
@include has-fa-icon(check, solid);

26
app/assets/stylesheets/admin.scss
View File

@@ -110,7 +110,7 @@ $table-header: #ecf1f6;
th {
background: $table-header;
color: $admin-text;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
a {
color: inherit;
@@ -135,7 +135,7 @@ $table-header: #ecf1f6;
}
[type="submit"] ~ a {
margin-left: $line-height / 2;
margin-left: calc(#{$line-height} / 2);
}
[type="checkbox"] {
@@ -183,11 +183,11 @@ $table-header: #ecf1f6;
.menu.simple,
.order-links {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
h2 {
font-weight: bold;
margin-bottom: $line-height / 3;
margin-bottom: calc(#{$line-height} / 3);
}
.is-active {
@@ -239,7 +239,7 @@ $table-header: #ecf1f6;
&:hover .on-hover-block {
display: block;
margin: 0;
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
width: 100%;
}
}
@@ -440,7 +440,7 @@ code {
font-size: rem-calc(16);
font-weight: normal;
margin-bottom: $line-height;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
strong {
font-size: rem-calc(18);
@@ -453,7 +453,7 @@ code {
border-bottom-right-radius: rem-calc(6);
border-top: 2px solid;
font-size: $small-font-size;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
}
.admin-budget-investment-info {
@@ -461,7 +461,7 @@ code {
border: 2px solid $highlight;
border-radius: rem-calc(4);
margin-bottom: $line-height;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
p {
font-size: $small-font-size;
@@ -548,7 +548,7 @@ table {
height: $line-height * 2;
line-height: $line-height * 2;
margin: 0;
padding: 0 $line-height / 2;
padding: 0 calc(#{$line-height} / 2);
}
}
@@ -945,19 +945,19 @@ table {
margin: $line-height 0;
@include breakpoint(medium) {
margin: $line-height / 2 0 0;
margin: calc(#{$line-height} / 2) 0 0;
}
}
.advanced-filters-content {
background: $highlight;
clear: both;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
margin: $line-height 0;
.filter {
display: inline-block;
margin: 0 $line-height / 2;
margin: 0 calc(#{$line-height} / 2);
label {
font-weight: normal;
@@ -966,7 +966,7 @@ table {
}
.button {
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
}
}

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 {

2
app/assets/stylesheets/advanced_search.scss
View File

@@ -37,7 +37,7 @@
@include breakpoint(medium) {
align-self: flex-end;
margin-bottom: 0;
margin-top: $line-height / 4;
margin-top: calc(#{$line-height} / 4);
}
}

4
app/assets/stylesheets/autocomplete_overrides.scss
View File

@@ -12,7 +12,7 @@
----------------------------------*/
.ui-menu {
list-style: none;
padding: $line-height / 4 $line-height / 3;
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
display: block;
background: $body-background;
border: 1px solid $border;
@@ -21,7 +21,7 @@
.ui-menu-item {
.ui-menu-item-wrapper {
padding: $line-height / 4 $line-height / 3;
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
position: relative;
}

4
app/assets/stylesheets/budgets/ballot/investment.scss
View File

@@ -6,7 +6,7 @@
background: #f1f1f1;
border-radius: rem-calc(12);
line-height: $line-height;
margin-bottom: $line-height / 4;
margin-bottom: calc(#{$line-height} / 4);
padding: $line-height $side-padding;
position: relative;
@@ -23,7 +23,7 @@
@include brand-color;
display: block;
font-weight: bold;
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
text-align: right;
}

2
app/assets/stylesheets/budgets/executions/filters.scss
View File

@@ -1,5 +1,5 @@
.budget-executions-filters {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
@include breakpoint(medium) {
@include flex-with-gap(1em);

8
app/assets/stylesheets/budgets/groups_and_headings.scss
View File

@@ -13,9 +13,9 @@
border: 2px solid $border;
border-radius: rem-calc(6);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-bottom: $line-height / 2;
margin-top: $line-height / 4;
padding: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
margin-top: calc(#{$line-height} / 4);
padding: calc(#{$line-height} / 2);
width: 100%;
@include breakpoint(medium) {
@@ -38,7 +38,7 @@
span {
display: block;
font-size: $small-font-size;
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
}
}
}

2
app/assets/stylesheets/budgets/investments-list.scss
View File

@@ -15,7 +15,7 @@
display: flex;
flex-direction: column;
padding: 0;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
position: relative;
width: 100%;

4
app/assets/stylesheets/budgets/investmentss/filters.scss
View File

@@ -8,8 +8,8 @@
a {
display: inline-block;
padding-bottom: $line-height / 4;
padding-top: $line-height / 4;
padding-bottom: calc(#{$line-height} / 4);
padding-top: calc(#{$line-height} / 4);
}
[aria-current] {

12
app/assets/stylesheets/budgets/phases.scss
View File

@@ -21,13 +21,13 @@
display: block;
font-size: rem-calc(36);
font-weight: bold;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
}
}
.phase-title {
@include tabs-title;
margin: $line-height / 6;
margin: calc(#{$line-height} / 6);
margin-left: 0;
position: relative;
text-align: center;
@@ -99,7 +99,7 @@
&.current-phase-tab a {
@include brand-secondary-background;
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
}
}
@@ -107,7 +107,7 @@
display: block;
font-size: $small-font-size;
font-weight: bold;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
text-transform: uppercase;
}
@@ -136,8 +136,8 @@
border-radius: rem-calc(3);
display: flex;
font-size: rem-calc(36);
height: 1em * 4 / 3;
width: 1em * 4 / 3;
height: calc(4em / 3);
width: calc(4em / 3);
&::before {
margin: auto;

2
app/assets/stylesheets/budgets/subheader.scss
View File

@@ -8,7 +8,7 @@
}
.button {
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
}
.callout {

22
app/assets/stylesheets/dashboard.scss
View File

@@ -25,7 +25,7 @@
.label {
display: inline-block;
margin-left: $line-height / 2;
margin-left: calc(#{$line-height} / 2);
vertical-align: top;
}
}
@@ -34,13 +34,13 @@
border: 2px solid $highlight;
border-radius: rem-calc(6);
margin-bottom: $line-height;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
text-align: center;
@include breakpoint(medium only) {
.change-behaviour {
float: left;
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
padding: $line-height;
width: 100%;
}
@@ -69,7 +69,7 @@
.progress {
background: #f0efea;
border-radius: rem-calc(6);
height: $line-height / 2;
height: calc(#{$line-height} / 2);
}
.progress-meter {
@@ -109,7 +109,7 @@
.action-content {
display: inline-block;
margin-left: $line-height / 4;
margin-left: calc(#{$line-height} / 4);
max-width: 90%;
word-break: break-all;
@@ -118,7 +118,7 @@
}
.label {
margin-left: $line-height / 2;
margin-left: calc(#{$line-height} / 2);
}
a {
@@ -155,7 +155,7 @@
border-radius: rem-calc(4);
display: inline-block;
height: rem-calc(20);
margin-top: $line-height / 6;
margin-top: calc(#{$line-height} / 6);
width: rem-calc(20);
}
}
@@ -251,7 +251,7 @@
.help-text {
color: $text-medium;
display: block;
padding-top: $line-height / 4;
padding-top: calc(#{$line-height} / 4);
}
}
@@ -309,7 +309,7 @@
display: inline-block;
font-size: rem-calc(24);
line-height: $line-height;
padding: $line-height / 2 $line-height / 4;
padding: calc(#{$line-height} / 2) calc(#{$line-height} / 4);
padding-left: 0;
vertical-align: middle;
}
@@ -323,7 +323,7 @@
&.resources {
border-left: 1px solid $border;
margin-left: $line-height / 2;
margin-left: calc(#{$line-height} / 2);
}
}
@@ -447,7 +447,7 @@
.community-poll {
border-bottom: 1px solid $border;
margin-bottom: $line-height;
padding-bottom: $line-height / 2;
padding-bottom: calc(#{$line-height} / 2);
}
// 09. Email preview

2
app/assets/stylesheets/documents/document.scss
View File

@@ -1,6 +1,6 @@
.document {
+ .document {
margin-top: $line-height / 3;
margin-top: calc(#{$line-height} / 3);
}
a:first-of-type {

6
app/assets/stylesheets/documents/documents.scss
View File

@@ -10,7 +10,7 @@
}
ul li {
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
&:not(:first-child) {
border-top: 1px solid $highlight;
@@ -22,8 +22,8 @@
border: 2px solid $highlight;
border-radius: rem-calc(5);
display: block;
margin: $line-height / 2 0;
padding: $line-height / 2;
margin: calc(#{$line-height} / 2) 0;
padding: calc(#{$line-height} / 2);
position: relative;
p {

2
app/assets/stylesheets/in_favor_against.scss
View File

@@ -75,7 +75,7 @@
display: inline-block;
font-size: $small-font-size;
line-height: $line-height * 2;
padding-right: $line-height / 2;
padding-right: calc(#{$line-height} / 2);
vertical-align: top;
@include breakpoint(medium) {

104
app/assets/stylesheets/layout.scss
View File

@@ -226,12 +226,12 @@ button,
.menu.simple {
border-bottom: 1px solid $border;
clear: both;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
li {
font-size: $base-font-size;
margin-bottom: 0;
margin-right: $line-height / 2;
margin-right: calc(#{$line-height} / 2);
@include breakpoint(medium) {
margin-right: $line-height * 1.5;
@@ -256,7 +256,7 @@ button,
}
&:not(.is-active) {
margin-bottom: $line-height / 3;
margin-bottom: calc(#{$line-height} / 3);
}
}
@@ -314,7 +314,7 @@ button,
}
.close-button {
top: $line-height / 2;
top: calc(#{$line-height} / 2);
}
.back,
@@ -322,7 +322,7 @@ button,
clear: both;
color: $text-medium;
display: inline-block;
padding-right: $line-height / 2;
padding-right: calc(#{$line-height} / 2);
}
.back:not([class^="icon-"]) {
@@ -378,7 +378,7 @@ button,
}
.button.float-right ~ .button.float-right {
margin: 0 $line-height / 2;
margin: 0 calc(#{$line-height} / 2);
}
.pagination .current {
@@ -643,13 +643,13 @@ body > header,
.submenu {
border-bottom: 1px solid $border;
clear: both;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
a {
@include text-colored-link;
display: inline-block;
font-weight: bold;
margin-right: $line-height / 2;
margin-right: calc(#{$line-height} / 2);
position: relative;
text-align: left;
@@ -737,7 +737,7 @@ footer {
.subfooter {
border-top: 1px solid $text-light;
font-size: $small-font-size;
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
.legal {
display: inline-block;
@@ -788,8 +788,8 @@ footer {
display: inline-block;
font-size: rem-calc(16);
font-weight: bold;
margin: -1px 0 $line-height / 2;
padding-top: $line-height / 4;
margin: -1px 0 calc(#{$line-height} / 2);
padding-top: calc(#{$line-height} / 4);
text-transform: uppercase;
}
@@ -850,9 +850,9 @@ footer {
background: $body-background;
box-decoration-break: clone;
font-weight: bold;
padding: 0 $line-height / 2;
padding: 0 calc(#{$line-height} / 2);
position: relative;
top: -$line-height / 2;
top: calc(#{-$line-height} / 2);
}
}
@@ -908,7 +908,7 @@ form {
}
[type=file] {
margin: $line-height / 2 0 $line-height / 2 $line-height / 4;
margin: calc(#{$line-height} / 2) 0 calc(#{$line-height} / 2) calc(#{$line-height} / 4);
}
.cke {
@@ -1034,7 +1034,7 @@ form {
background: $alert-bg;
color: $color-alert;
display: inline-block;
margin: 0 $line-height / 4;
margin: 0 calc(#{$line-height} / 4);
a {
color: $color-alert;
@@ -1056,7 +1056,7 @@ form {
select {
height: $line-height * 2;
margin-right: $line-height / 2;
margin-right: calc(#{$line-height} / 2);
}
.final-votes-info {
@@ -1064,10 +1064,10 @@ form {
border: 1px solid $warning-border;
color: $color-warning;
margin-top: $line-height;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
ul li {
margin: $line-height / 2 0;
margin: calc(#{$line-height} / 2) 0;
}
.icon-box {
@@ -1114,9 +1114,9 @@ form {
.notification {
border: 1px solid $border;
display: block;
margin-bottom: $line-height / 4;
margin-bottom: calc(#{$line-height} / 4);
margin-left: $line-height;
padding: $line-height / 2 $line-height;
padding: calc(#{$line-height} / 2) $line-height;
position: relative;
@include breakpoint(medium) {
@@ -1230,7 +1230,7 @@ table {
td {
line-height: $line-height;
padding: $line-height / 2 $line-height / 4;
padding: calc(#{$line-height} / 2) calc(#{$line-height} / 4);
}
&:nth-child(odd) {
@@ -1293,7 +1293,7 @@ table {
width: $icon-width;
&::before {
font-size: $icon-width / 2;
font-size: calc(#{$icon-width} / 2);
margin-right: 0;
}
@@ -1396,7 +1396,7 @@ table {
@include breakpoint(medium) {
.left + .left {
margin-left: $line-height / 2;
margin-left: calc(#{$line-height} / 2);
}
}
@@ -1428,7 +1428,7 @@ table {
background: #f6f6f6;
font-weight: bold;
line-height: rem-calc(20);
padding-top: $line-height / 4;
padding-top: calc(#{$line-height} / 4);
text-transform: uppercase;
vertical-align: top;
@@ -1460,7 +1460,7 @@ table {
.button + form {
display: inline-block;
margin-left: $line-height / 2;
margin-left: calc(#{$line-height} / 2);
}
.verification-list {
@@ -1509,7 +1509,7 @@ table {
color: $color-info;
font-size: rem-calc(24);
margin-left: -27px;
padding: 0 $line-height / 2;
padding: 0 calc(#{$line-height} / 2);
position: absolute;
top: -12px;
}
@@ -1540,7 +1540,7 @@ table {
.comment {
line-height: $list-lineheight;
margin: $line-height / 4 0;
margin: calc(#{$line-height} / 4) 0;
position: relative;
p {
@@ -1559,7 +1559,7 @@ table {
.notification-body {
img {
margin-right: $line-height / 2;
margin-right: calc(#{$line-height} / 2);
}
.reply {
@@ -1567,8 +1567,8 @@ table {
border-left: 0;
border-right: 0;
font-size: $small-font-size;
margin: $line-height / 4 0;
padding: $line-height / 4;
margin: calc(#{$line-height} / 4) 0;
padding: calc(#{$line-height} / 4);
position: relative;
&:empty {
@@ -1581,7 +1581,7 @@ table {
}
.comment-form form {
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
}
}
@@ -1629,8 +1629,8 @@ table {
}
.comment-user {
margin-top: $line-height / 4;
padding: $line-height / 4 0;
margin-top: calc(#{$line-height} / 4);
padding: calc(#{$line-height} / 4) 0;
overflow: hidden;
&.level-1,
@@ -1642,7 +1642,7 @@ table {
&.is-admin,
&.is-moderator {
background: rgba(70, 219, 145, 0.3);
padding: $line-height / 4 $line-height / 2;
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
}
&.level-1 {
@@ -1662,7 +1662,7 @@ table {
}
.comment-list {
margin: $line-height / 4 0;
margin: calc(#{$line-height} / 4) 0;
.comment-list {
border-left: 1px dashed $border;
@@ -1783,7 +1783,7 @@ table {
.public-interests {
li {
margin-right: $line-height / 4;
margin-right: calc(#{$line-height} / 4);
span {
background: none;
@@ -1796,10 +1796,10 @@ table {
.follow-list {
list-style-type: circle;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
li {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
margin-left: $line-height;
}
}
@@ -1861,7 +1861,7 @@ table {
}
.card {
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
.card {
border: 0;
@@ -1975,7 +1975,7 @@ table {
background: #fafafa;
margin-bottom: $line-height;
margin-top: rem-calc(-25);
padding: $line-height 0 $line-height / 2;
padding: $line-height 0 calc(#{$line-height} / 2);
@include breakpoint(medium) {
padding-top: 0;
@@ -2003,8 +2003,8 @@ table {
background: $body-background;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
display: block;
margin-bottom: $line-height / 4;
padding: $line-height / 2;
margin-bottom: calc(#{$line-height} / 4);
padding: calc(#{$line-height} / 2);
z-index: 1;
&:hover:not(:focus-within) {
@@ -2028,8 +2028,8 @@ table {
background: $highlight-soft;
border: 1px solid $highlight;
display: block;
margin: $line-height / 2 0;
padding: $line-height / 2;
margin: calc(#{$line-height} / 2) 0;
padding: calc(#{$line-height} / 2);
position: relative;
a {
@@ -2124,8 +2124,8 @@ table {
&::before {
$button-padding-left: nth($button-padding, 2);
margin-left: -$button-padding-left / 2;
margin-right: $button-padding-left / 2;
margin-left: calc(#{-$button-padding-left} / 2);
margin-right: calc(#{$button-padding-left} / 2);
}
}
}
@@ -2193,7 +2193,7 @@ table {
p,
.sdg-tag-list {
padding: 0 $line-height / 4;
padding: 0 calc(#{$line-height} / 4);
}
}
@@ -2210,7 +2210,7 @@ table {
@include brand-border(top, 4px);
display: inline-block;
margin-bottom: 0;
padding: $line-height / 2 0;
padding: calc(#{$line-height} / 2) 0;
}
}
@@ -2232,7 +2232,7 @@ table {
border-bottom: 1px solid $border;
display: block;
font-size: $small-font-size;
margin: $line-height 0 $line-height / 2;
margin: $line-height 0 calc(#{$line-height} / 2);
text-align: right;
width: 100%;
}
@@ -2276,7 +2276,7 @@ table {
font-size: rem-calc(24);
line-height: rem-calc(24);
text-transform: uppercase;
padding: $line-height / 4 $line-height / 2;
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
position: absolute;
width: 100%;
z-index: 3;
@@ -2300,7 +2300,7 @@ table {
display: inline-block;
font-size: $small-font-size;
font-weight: bold;
margin-bottom: $line-height / 4;
margin-bottom: calc(#{$line-height} / 4);
padding: rem-calc(4) rem-calc(8);
}
}
@@ -2316,7 +2316,7 @@ table {
select {
float: left;
width: 30%;
margin-right: $line-height / 4;
margin-right: calc(#{$line-height} / 4);
}
}
}

2
app/assets/stylesheets/layout/account_menu.scss
View File

@@ -1,7 +1,7 @@
.account-menu.menu {
@include breakpoint(small only) {
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
&,
.menu {

8
app/assets/stylesheets/layout/locale_switcher.scss
View File

@@ -1,6 +1,6 @@
.locale {
margin-bottom: $line-height / 4;
margin-top: $line-height / 4;
margin-bottom: calc(#{$line-height} / 4);
margin-top: calc(#{$line-height} / 4);
position: relative;
.locale-form {
@@ -34,8 +34,8 @@
height: $line-height;
margin-bottom: 0;
outline: none;
padding-left: $line-height / 4;
padding-right: calc(#{$line-height / 4} + 1em);
padding-left: calc(#{$line-height} / 4);
padding-right: calc(#{$line-height} / 4 + 1em);
transition: none;
width: auto;

4
app/assets/stylesheets/layout/social.scss
View File

@@ -3,7 +3,7 @@
text-align: right;
@include breakpoint(medium) {
width: 1 * 100% / 3;
width: calc(100% / 3);
}
ul {
@@ -16,7 +16,7 @@
a {
font-size: rem-calc(24);
margin: 0 $line-height / 2;
margin: 0 calc(#{$line-height} / 2);
text-decoration: none;
&:hover {

6
app/assets/stylesheets/layout/subnavigation.scss
View File

@@ -27,8 +27,8 @@
a {
color: inherit;
display: inline-block;
padding-bottom: $line-height / 2;
padding-top: $line-height / 2;
padding-bottom: calc(#{$line-height} / 2);
padding-top: calc(#{$line-height} / 2);
position: relative;
text-align: left;
@@ -53,7 +53,7 @@
}
.input-group {
padding-top: $line-height / 4;
padding-top: calc(#{$line-height} / 4);
@include breakpoint(medium) {
margin-bottom: 0;

22
app/assets/stylesheets/legislation_process.scss
View File

@@ -70,7 +70,7 @@
border-top-left-radius: rem-calc(6);
border-top-right-radius: rem-calc(6);
margin-bottom: 0;
margin-right: $line-height / 4;
margin-right: calc(#{$line-height} / 4);
margin-top: 0;
&:hover:not(.is-active) {
@@ -84,7 +84,7 @@
a {
display: block;
padding: $line-height / 4 $line-height / 2;
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
@include breakpoint(large) {
display: inline-block;
@@ -245,9 +245,9 @@
color: #555;
cursor: pointer;
display: inline-block;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
margin-right: $line-height;
padding: $line-height / 2 $line-height * 2;
padding: calc(#{$line-height} / 2) $line-height * 2;
position: relative;
}
@@ -455,7 +455,7 @@
@include breakpoint(medium) {
margin: 0 auto;
max-width: 3 * $grid-row-width / 4;
max-width: calc(3 * #{$grid-row-width} / 4);
padding: rem-calc(32) rem-calc(32) rem-calc(32) rem-calc(48);
}
@@ -670,7 +670,7 @@
.comment {
border-bottom: 1px solid $border;
padding-bottom: $line-height / 2;
padding-bottom: calc(#{$line-height} / 2);
margin-bottom: rem-calc(16);
font-size: $small-font-size;
@@ -955,17 +955,17 @@
padding-top: rem-calc(16);
&:not(:last-child) {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
}
}
.question-title:not(:only-child) {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
}
.annotation-title {
margin-bottom: $line-height / 2;
margin-top: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
margin-top: calc(#{$line-height} / 2);
}
.annotation-quote {
@@ -974,7 +974,7 @@
}
.comment-summary {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
> :first-child {
background-color: rgba(217, 216, 243, 0.2);

2
app/assets/stylesheets/map_location.scss
View File

@@ -4,7 +4,7 @@
color: $delete;
cursor: pointer;
margin-bottom: $line-height;
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
&:hover,
&:active,

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

@@ -30,7 +30,7 @@ $progress-bar-color: #fea230;
}
.milestone-progress .row {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
}
}
}
@@ -68,7 +68,7 @@ $progress-bar-color: #fea230;
}
.milestone-content {
padding: $line-height / 6 $line-height / 2;
padding: calc(#{$line-height} / 6) calc(#{$line-height} / 2);
position: relative;
@include breakpoint(medium) {
@@ -121,6 +121,6 @@ $progress-bar-color: #fea230;
@include background-with-text-contrast($budget);
border-radius: rem-calc(4);
display: inline-block;
margin-top: $line-height / 6;
padding: $line-height / 4 $line-height / 2;
margin-top: calc(#{$line-height} / 6);
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
}

6
app/assets/stylesheets/mixins/forms.scss
View File

@@ -92,7 +92,7 @@
font-size: rem-calc(44);
&::after {
right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
right: calc(#{$icon-size-with-padding + $polygon-size + $heading-icon-size} / 2);
}
&::before {
@@ -106,7 +106,7 @@
span {
display: block;
font-size: 0.75em;
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
}
}
@@ -195,7 +195,7 @@
color: $admin-text;
font-size: $small-font-size;
font-weight: bold;
padding-right: $line-height / 2;
padding-right: calc(#{$line-height} / 2);
text-transform: uppercase;
}
}

2
app/assets/stylesheets/mixins/sdg.scss
View File

@@ -5,7 +5,7 @@
display: flex;
flex-wrap: wrap;
list-style: none;
margin: -$spacing 0 $line-height / 3 -#{$spacing};
margin: -$spacing 0 calc(#{$line-height} / 3) -#{$spacing};
margin-left: calc(-1 * #{$max-spacing});
margin-top: calc(-1 * #{$max-spacing});
width: calc(100% + #{$spacing});

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

@@ -19,8 +19,8 @@
color: color-pick-contrast(#ececec);
display: inline-block;
font-size: $small-font-size;
margin-bottom: $line-height / 3;
padding: $line-height / 4 $line-height / 3;
margin-bottom: calc(#{$line-height} / 3);
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
text-decoration: none;
&:hover {

2
app/assets/stylesheets/mixins/tooltips.scss
View File

@@ -1,7 +1,7 @@
@mixin bottom-tooltip {
@include tooltip;
line-height: $global-lineheight;
margin-top: $line-height / 8;
margin-top: calc(#{$line-height} / 8);
width: max-content;
&::before {

2
app/assets/stylesheets/mixins/uploads.scss
View File

@@ -72,7 +72,7 @@
&.errors {
background-color: $alert-color;
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
}
}

2
app/assets/stylesheets/notification_item.scss
View File

@@ -20,7 +20,7 @@
font-size: $circle-icon-size;
position: absolute;
left: $notification-icon-size - rem-calc(5);
top: $menu-link-top-padding - $circle-icon-size / 2;
top: calc(#{$menu-link-top-padding} - #{$circle-icon-size} / 2);
@include breakpoint(medium) {
$menu-link-left-padding: rem-calc(16);

4
app/assets/stylesheets/pages.scss
View File

@@ -46,7 +46,7 @@
@include breakpoint(medium) {
display: inline-block;
margin-right: $line-height / 2;
margin-right: calc(#{$line-height} / 2);
}
}
}
@@ -111,7 +111,7 @@
.sidebar-card {
border: 1px solid $border;
margin-bottom: $line-height;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
&.light {
background: #ecf0f1;

82
app/assets/stylesheets/participation.scss
View File

@@ -30,7 +30,7 @@
border-bottom-right-radius: rem-calc(3);
border-top-right-radius: rem-calc(3);
display: block;
height: $line-height / 2;
height: calc(#{$line-height} / 2);
}
}
@@ -100,7 +100,7 @@
color: $color-warning;
display: none;
line-height: $line-height;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
text-align: center;
width: 100%;
@@ -132,7 +132,7 @@
li {
@include has-fa-icon(check, solid);
margin: $line-height / 2 0;
margin: calc(#{$line-height} / 2) 0;
&::before {
margin-right: $font-icon-margin * 1.5;
@@ -192,7 +192,7 @@
clear: both;
color: $text-medium;
font-size: $small-font-size;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
position: relative;
span:not(.label) {
@@ -278,8 +278,8 @@
background: $highlight-soft;
border: 1px solid $highlight;
display: block;
margin: $line-height / 2 0;
padding: $line-height / 2;
margin: calc(#{$line-height} / 2) 0;
padding: calc(#{$line-height} / 2);
position: relative;
a {
@@ -337,7 +337,7 @@
.budget-investment-show {
.supports {
padding: $line-height / 2 0 0;
padding: calc(#{$line-height} / 2) 0 0;
}
.share-supported {
@@ -369,7 +369,7 @@
@include full-width-background;
background: $highlight;
margin-bottom: $line-height;
padding-top: $line-height / 4;
padding-top: calc(#{$line-height} / 4);
}
}
@@ -378,7 +378,7 @@
@include breakpoint(medium down) {
background: $body-background;
margin-bottom: rem-calc(-1) !important;
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
}
}
@@ -415,7 +415,7 @@
.panel {
&.with-image {
padding: 0 $line-height / 2 0 0;
padding: 0 calc(#{$line-height} / 2) 0 0;
}
}
@@ -428,7 +428,7 @@
}
.column:last-child:not(:first-child) {
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
}
img {
@@ -460,7 +460,7 @@
h3 {
font-weight: bold;
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
a {
color: inherit;
@@ -489,7 +489,7 @@
.budget-investment-show,
.legislation,
.communities-show {
margin: $line-height / 4 0;
margin: calc(#{$line-height} / 4) 0;
.panel {
@extend %panel;
@@ -601,7 +601,7 @@
.votes {
border-top: 1px solid $border;
margin-top: $line-height;
padding: $line-height / 2 0;
padding: calc(#{$line-height} / 2) 0;
position: relative;
@include breakpoint(medium) {
@@ -634,7 +634,7 @@
.proposal-show .votes,
.debate-show .votes {
border: 0;
padding: $line-height / 2 0;
padding: calc(#{$line-height} / 2) 0;
}
.proposal,
@@ -754,7 +754,7 @@
background: #fafafa;
margin-top: -$line-height;
margin-bottom: $line-height;
padding-bottom: $line-height / 2;
padding-bottom: calc(#{$line-height} / 2);
padding-top: $line-height;
h1 {
@@ -769,7 +769,7 @@
margin-bottom: 0;
li {
padding: $line-height / 4 0;
padding: calc(#{$line-height} / 4) 0;
padding-left: $line-height;
}
}
@@ -782,7 +782,7 @@
background: #eee;
height: rem-calc(36);
margin-bottom: 0;
padding: $line-height / 4;
padding: calc(#{$line-height} / 4);
width: rem-calc(36);
&::before {
@@ -860,7 +860,7 @@
}
.panel h3 {
margin: 0 0 $line-height / 2;
margin: 0 0 calc(#{$line-height} / 2);
@include breakpoint(medium) {
margin: 0;
@@ -875,7 +875,7 @@
.featured-debates,
.featured-proposals,
.enquiries-list {
padding: $line-height / 2 0;
padding: calc(#{$line-height} / 2) 0;
@include breakpoint(medium) {
margin-left: 0 !important;
@@ -1011,7 +1011,7 @@
border-bottom: 2px solid #fff;
content: "";
margin: 0 auto;
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
display: block;
width: 20%;
}
@@ -1053,7 +1053,7 @@
min-width: rem-calc(240);
&::after {
margin-left: $line-height / 4;
margin-left: calc(#{$line-height} / 4);
}
}
}
@@ -1133,7 +1133,7 @@
.amount-available {
display: block;
font-size: $small-font-size;
margin-top: $line-height / 8;
margin-top: calc(#{$line-height} / 8);
position: relative;
text-align: right;
white-space: nowrap;
@@ -1146,7 +1146,7 @@
line-height: 0;
position: absolute;
right: -0.5em;
top: -$line-height / 8;
top: calc(#{-$line-height} / 8);
}
span {
@@ -1182,19 +1182,19 @@
.ballot-content {
border: 2px solid #f9f9f9;
border-radius: rem-calc(6);
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
}
.subtitle {
@include brand-border(left, 2px);
margin: $line-height / 2 0;
padding-left: $line-height / 2;
margin: calc(#{$line-height} / 2) 0;
padding-left: calc(#{$line-height} / 2);
}
.amount-spent {
background: $success-bg;
font-weight: normal;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
span {
font-size: rem-calc(24);
@@ -1210,8 +1210,8 @@
.select-district a {
display: inline-block;
margin: $line-height / 4 0;
padding: $line-height / 4;
margin: calc(#{$line-height} / 4) 0;
padding: calc(#{$line-height} / 4);
}
.select-district .is-active a {
@@ -1219,7 +1219,7 @@
border-radius: rem-calc(3);
color: $budget;
font-weight: bold;
padding: $line-height / 4;
padding: calc(#{$line-height} / 4);
&::after {
content: "\56";
@@ -1249,7 +1249,7 @@
height: auto;
left: 0;
padding: $line-height;
padding-bottom: $line-height / 2;
padding-bottom: calc(#{$line-height} / 2);
position: fixed;
top: 0;
width: 100%;
@@ -1321,7 +1321,7 @@
}
.budget-execution-info {
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
}
.author {
@@ -1460,8 +1460,8 @@
.orbit-bullets button {
background-color: #ccc;
height: $line-height / 2;
width: $line-height / 2;
height: calc(#{$line-height} / 2);
width: calc(#{$line-height} / 2);
&.is-active {
@include brand-background;
@@ -1520,7 +1520,7 @@
&.with-image {
@include breakpoint(medium) {
padding: 0 $line-height / 2 0 0;
padding: 0 calc(#{$line-height} / 2) 0 0;
}
.image-container img {
@@ -1534,8 +1534,8 @@
.poll,
.poll-question {
border: 1px solid $border;
margin-bottom: $line-height / 2;
padding: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
padding: calc(#{$line-height} / 2);
position: relative;
.icon-poll-answer {
@@ -1607,7 +1607,7 @@
.dates {
color: $text-medium;
font-size: $small-font-size;
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
}
h4 {
@@ -1666,7 +1666,7 @@
color: #fff;
font-family: "icons" !important;
font-size: rem-calc(12);
padding: $line-height / 4;
padding: calc(#{$line-height} / 4);
position: absolute;
right: -6px;
top: -6px;
@@ -1684,7 +1684,7 @@
table-layout: fixed;
caption {
padding: $line-height / 2 0;
padding: calc(#{$line-height} / 2) 0;
text-align: left;
}

4
app/assets/stylesheets/relationable/related_content_list.scss
View File

@@ -5,7 +5,7 @@
li {
border-bottom: 1px solid $border;
margin-bottom: 0 !important;
padding: $line-height / 2;
padding: calc(#{$line-height} / 2);
@include breakpoint(medium) {
display: flex;
@@ -34,6 +34,6 @@
}
.flag {
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
}
}

4
app/assets/stylesheets/sdg/goals/index.scss
View File

@@ -33,8 +33,8 @@
li {
line-height: 0;
margin-left: $spacing / 2;
margin-right: $spacing / 2;
margin-left: calc(#{$spacing} / 2);
margin-right: calc(#{$spacing} / 2);
width: calc(100% / 6 - #{$spacing});
.sdg-goal-icon {

2
app/assets/stylesheets/sdg/goals/show.scss
View File

@@ -6,7 +6,7 @@
align-items: center;
color: $sdg-text;
display: flex;
margin: $line-height / 2 0;
margin: calc(#{$line-height} / 2) 0;
text-shadow: 0 0 1px $black;
min-width: fit-content;

2
app/assets/stylesheets/sdg/goals/targets.scss
View File

@@ -12,7 +12,7 @@
}
&:not(:last-child)::after {
margin-bottom: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
}
}
}

4
app/assets/stylesheets/sdg/related_list_selector.scss
View File

@@ -50,7 +50,7 @@
}
.input-section {
margin-bottom: 2 * $line-height / 3;
margin-bottom: calc(#{2 * $line-height} / 3);
}
.amsify-suggestags-area {
@@ -66,7 +66,7 @@
flex-wrap: wrap;
> input {
margin-bottom: $line-height / 4 !important;
margin-bottom: calc(#{$line-height} / 4) !important;
order: -1;
}
}

6
app/assets/stylesheets/stats.scss
View File

@@ -16,7 +16,7 @@
}
ul {
margin-left: $line-height / 2;
margin-left: calc(#{$line-height} / 2);
margin-top: 0;
padding: 0;
}
@@ -37,7 +37,7 @@
&::before {
display: inline-block;
margin-right: $line-height / 2;
margin-right: calc(#{$line-height} / 2);
vertical-align: top;
}
@@ -99,7 +99,7 @@
.progress {
background: #ebf0f4;
border-radius: rem-calc(20);
height: $line-height / 2;
height: calc(#{$line-height} / 2);
}
.progress-meter {

2
app/assets/stylesheets/subscriptions.scss
View File

@@ -1,5 +1,5 @@
.subscriptions-edit {
form {
max-width: $global-width * 7 / 12;
max-width: calc(#{$global-width * 7} / 12);
}
}

2
app/assets/stylesheets/widgets/feeds/feed.scss
View File

@@ -14,7 +14,7 @@
.proposal {
margin-bottom: 0;
margin-top: 0;
padding: $line-height / 2 0;
padding: calc(#{$line-height} / 2) 0;
}
}

2
app/assets/stylesheets/widgets/feeds/participation.scss
View File

@@ -24,6 +24,6 @@
}
.sdg-tag-list {
margin-top: $line-height / 2;
margin-top: calc(#{$line-height} / 2);
}
}