consul/nairobi
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 { li {
font-size: $small-font-size; font-size: $small-font-size;
margin-bottom: $line-height / 2; margin-bottom: calc(#{$line-height} / 2);
&::before { &::before {
font-size: 0.9em; font-size: 0.9em;

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

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

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

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

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

@@ -4,7 +4,7 @@
.button { .button {
&.upload-image { &.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; align-items: flex-start;
+ * { + * {
margin-top: $line-height / 2; margin-top: calc(#{$line-height} / 2);
} }
.edit-link, .edit-link,

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

@@ -34,7 +34,7 @@
} }
&::after { &::after {
bottom: $padding / 2; bottom: calc(#{$padding} / 2);
color: $white; color: $white;
position: absolute; position: absolute;
right: calc(#{$padding} + #{$quote-padding}); 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 { @each $size, $headers in $header-styles {
@include breakpoint($size) { @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; display: inline-block;
font-size: $small-font-size; font-size: $small-font-size;
font-weight: bold; font-weight: bold;
padding: $line-height / 2 $line-height * 3 0; padding: calc(#{$line-height} / 2) $line-height * 3 0;
text-transform: uppercase; text-transform: uppercase;
&::before { &::before {
@@ -17,7 +17,7 @@
border-radius: 50%; border-radius: 50%;
content: ""; content: "";
height: 20px; height: 20px;
margin-left: $line-height / 2; margin-left: calc(#{$line-height} / 2);
position: absolute; position: absolute;
top: -8px; top: -8px;
width: 20px; width: 20px;

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

@@ -9,7 +9,7 @@
&::after { &::after {
content: ""; content: "";
display: block; 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 { form {
max-width: $global-width * 3 / 4; max-width: calc(#{$global-width} * 3 / 4);
} }
select { select {

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

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

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

@@ -1,7 +1,7 @@
.admin { .admin {
.featured-settings-table { .featured-settings-table {
td { 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 { .radio-and-label {
display: flex; display: flex;
margin-bottom: $line-height / 3; margin-bottom: calc(#{$line-height} / 3);
&:last-of-type { &:last-of-type {
margin-bottom: $line-height * 2 / 3; margin-bottom: calc(#{$line-height * 2} / 3);
} }
input { input {

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

@@ -37,7 +37,7 @@
@include breakpoint(medium) { @include breakpoint(medium) {
align-self: flex-end; align-self: flex-end;
margin-bottom: 0; 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 { .ui-menu {
list-style: none; list-style: none;
padding: $line-height / 4 $line-height / 3; padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
display: block; display: block;
background: $body-background; background: $body-background;
border: 1px solid $border; border: 1px solid $border;
@@ -21,7 +21,7 @@
.ui-menu-item { .ui-menu-item {
.ui-menu-item-wrapper { .ui-menu-item-wrapper {
padding: $line-height / 4 $line-height / 3; padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
position: relative; position: relative;
} }

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

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

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

@@ -1,5 +1,5 @@
.budget-executions-filters { .budget-executions-filters {
margin-bottom: $line-height / 2; margin-bottom: calc(#{$line-height} / 2);
@include breakpoint(medium) { @include breakpoint(medium) {
@include flex-with-gap(1em); @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: 2px solid $border;
border-radius: rem-calc(6); border-radius: rem-calc(6);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-bottom: $line-height / 2; margin-bottom: calc(#{$line-height} / 2);
margin-top: $line-height / 4; margin-top: calc(#{$line-height} / 4);
padding: $line-height / 2; padding: calc(#{$line-height} / 2);
width: 100%; width: 100%;
@include breakpoint(medium) { @include breakpoint(medium) {
@@ -38,7 +38,7 @@
span { span {
display: block; display: block;
font-size: $small-font-size; 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; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
margin-bottom: $line-height / 2; margin-bottom: calc(#{$line-height} / 2);
position: relative; position: relative;
width: 100%; width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -30,7 +30,7 @@ $progress-bar-color: #fea230;
} }
.milestone-progress .row { .milestone-progress .row {
margin-bottom: $line-height / 2; margin-bottom: calc(#{$line-height} / 2);
} }
} }
} }
@@ -68,7 +68,7 @@ $progress-bar-color: #fea230;
} }
.milestone-content { .milestone-content {
padding: $line-height / 6 $line-height / 2; padding: calc(#{$line-height} / 6) calc(#{$line-height} / 2);
position: relative; position: relative;
@include breakpoint(medium) { @include breakpoint(medium) {
@@ -121,6 +121,6 @@ $progress-bar-color: #fea230;
@include background-with-text-contrast($budget); @include background-with-text-contrast($budget);
border-radius: rem-calc(4); border-radius: rem-calc(4);
display: inline-block; display: inline-block;
margin-top: $line-height / 6; margin-top: calc(#{$line-height} / 6);
padding: $line-height / 4 $line-height / 2; 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); font-size: rem-calc(44);
&::after { &::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 { &::before {
@@ -106,7 +106,7 @@
span { span {
display: block; display: block;
font-size: 0.75em; font-size: 0.75em;
margin-top: $line-height / 2; margin-top: calc(#{$line-height} / 2);
} }
} }
@@ -195,7 +195,7 @@
color: $admin-text; color: $admin-text;
font-size: $small-font-size; font-size: $small-font-size;
font-weight: bold; font-weight: bold;
padding-right: $line-height / 2; padding-right: calc(#{$line-height} / 2);
text-transform: uppercase; text-transform: uppercase;
} }
} }

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

@@ -5,7 +5,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; 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-left: calc(-1 * #{$max-spacing});
margin-top: calc(-1 * #{$max-spacing}); margin-top: calc(-1 * #{$max-spacing});
width: calc(100% + #{$spacing}); width: calc(100% + #{$spacing});

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

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

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

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

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

@@ -72,7 +72,7 @@
&.errors { &.errors {
background-color: $alert-color; 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; font-size: $circle-icon-size;
position: absolute; position: absolute;
left: $notification-icon-size - rem-calc(5); 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) { @include breakpoint(medium) {
$menu-link-left-padding: rem-calc(16); $menu-link-left-padding: rem-calc(16);

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

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

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

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

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

@@ -5,7 +5,7 @@
li { li {
border-bottom: 1px solid $border; border-bottom: 1px solid $border;
margin-bottom: 0 !important; margin-bottom: 0 !important;
padding: $line-height / 2; padding: calc(#{$line-height} / 2);
@include breakpoint(medium) { @include breakpoint(medium) {
display: flex; display: flex;
@@ -34,6 +34,6 @@
} }
.flag { .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 { li {
line-height: 0; line-height: 0;
margin-left: $spacing / 2; margin-left: calc(#{$spacing} / 2);
margin-right: $spacing / 2; margin-right: calc(#{$spacing} / 2);
width: calc(100% / 6 - #{$spacing}); width: calc(100% / 6 - #{$spacing});
.sdg-goal-icon { .sdg-goal-icon {

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

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

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

@@ -12,7 +12,7 @@
} }
&:not(:last-child)::after { &: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 { .input-section {
margin-bottom: 2 * $line-height / 3; margin-bottom: calc(#{2 * $line-height} / 3);
} }
.amsify-suggestags-area { .amsify-suggestags-area {
@@ -66,7 +66,7 @@
flex-wrap: wrap; flex-wrap: wrap;
> input { > input {
margin-bottom: $line-height / 4 !important; margin-bottom: calc(#{$line-height} / 4) !important;
order: -1; order: -1;
} }
} }

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

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

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

@@ -1,5 +1,5 @@
.subscriptions-edit { .subscriptions-edit {
form { 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 { .proposal {
margin-bottom: 0; margin-bottom: 0;
margin-top: 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 { .sdg-tag-list {
margin-top: $line-height / 2; margin-top: calc(#{$line-height} / 2);
} }
} }