From d54971e536360795af31c45334f2ec0011bba812 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 25 Mar 2024 00:26:50 +0100 Subject: [PATCH 1/5] Use Dart Sass to compile SCSS files SassC/Libsass has been deprecated for years and has been replaced by Dart Sass. However, the dartsass-rails gem, maintained by the Rails team, doesn't support sprockets integration and doesn't allow glob imports (using `@import something/**/*` or similar). In particular, dartsass-rails needs to start a separate browser that makes it less straightforward to change a file and reload the browser. So we're using sassc-embedded, which provides Dart Sass integration with sprockets. While there's no guarantee this gem will be maintained a few years from now, we know for sure that SassC/Libsass won't be maintained at all, so using sassc-embedded is an improvement over our current situation. On my machine, this change reduces compilation times by about 35%. Note we still depend on the `sassc-rails` gem, for two reasons. First, we're still importing CSS/Sass content from a couple of gems (mainly, social-share-button and font-awesome) and we don't know how to import this content without the `sassc-rails` gem. And, second, it provides support for glob imports. Without it, we'd have to manually add every single (S)CSS file we import to the `application.scss` file instead of being able to write things like `@import admin/**/*";`. Note we're removing the `sass` gem from `Gemfile.lock`. We should have done it as part of e210682ac, but when we developed that branch, it didn't contain the changes where we removed another gem depending on the `sass` gem (which we removed in commit 2fa713c64), so Bundler didn't delete it. However, now that we're changing the Gemfile, Bundler is finally removing the no-longer-needed `sass` gem and its dependencies. --- Gemfile | 1 + Gemfile.lock | 16 ++++++++-------- config/application.rb | 1 + 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/Gemfile b/Gemfile index 88fed0372..7ec2a39c9 100644 --- a/Gemfile +++ b/Gemfile @@ -48,6 +48,7 @@ gem "redcarpet", "~> 3.6.0" gem "responders", "~> 3.1.1" gem "rinku", "~> 2.0.6", require: "rails_rinku" gem "ros-apartment", "~> 2.11.0", require: "apartment" +gem "sassc-embedded", "~> 1.70.1" gem "sassc-rails", "~> 2.1.2" gem "savon", "~> 2.15.0" gem "sitemap_generator", "~> 6.3.0" diff --git a/Gemfile.lock b/Gemfile.lock index 2a813ecf5..8156acee0 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -241,6 +241,8 @@ GEM request_store (~> 1.0) globalize-accessors (0.3.0) globalize (>= 5.0.0) + google-protobuf (4.26.0) + rake (>= 13) graphiql-rails (1.8.0) railties sprockets-rails @@ -485,9 +487,6 @@ GEM thor (~> 1.0) rainbow (3.1.1) rake (13.1.0) - rb-fsevent (0.11.2) - rb-inotify (0.10.1) - ffi (~> 1.0) rbtree3 (0.7.1) recipient_interceptor (0.3.1) mail @@ -561,13 +560,13 @@ GEM capistrano (~> 3.0) sshkit (>= 1.2) safely_block (0.4.0) - sass (3.7.4) - sass-listen (~> 4.0.0) - sass-listen (4.0.0) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) + sass-embedded (1.72.0) + google-protobuf (>= 3.25, < 5.0) + rake (>= 13.0.0) sassc (2.4.0) ffi (~> 1.9) + sassc-embedded (1.70.1) + sass-embedded (~> 1.70) sassc-rails (2.1.2) railties (>= 4.0.0) sassc (>= 2.0) @@ -757,6 +756,7 @@ DEPENDENCIES rubocop-rails (~> 2.23.1) rubocop-rspec (~> 2.27.0) rvm1-capistrano3 (~> 1.4.0) + sassc-embedded (~> 1.70.1) sassc-rails (~> 2.1.2) savon (~> 2.15.0) selenium-webdriver (~> 4.16.0) diff --git a/config/application.rb b/config/application.rb index b950ab321..a2cf9bfde 100644 --- a/config/application.rb +++ b/config/application.rb @@ -1,3 +1,4 @@ +require "sassc-embedded" require_relative "boot" require "rails" From 6df813fdb62800ab750c106e42154e1ea5913f83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Mar 2024 21:33:09 +0100 Subject: [PATCH 2/5] Use calc() where divisions are involved 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. --- .../stylesheets/account/permissions_list.scss | 2 +- .../stylesheets/account/verify-account.scss | 2 +- app/assets/stylesheets/admin.scss | 26 ++--- .../stylesheets/admin/budget_phases/form.scss | 2 +- .../stylesheets/admin/budgets/actions.scss | 2 +- .../stylesheets/admin/budgets/drafting.scss | 2 +- .../stylesheets/admin/budgets/form.scss | 2 +- .../admin/budgets/groups_and_headings.scss | 2 +- .../stylesheets/admin/budgets/help.scss | 2 +- .../stylesheets/admin/budgets/show.scss | 2 +- .../budgets_wizard/creation_timeline.scss | 4 +- .../stylesheets/admin/dashboard/index.scss | 2 +- .../admin/machine_learning/scripts.scss | 2 +- app/assets/stylesheets/admin/menu.scss | 10 +- .../stylesheets/admin/settings/table.scss | 2 +- .../stylesheets/admin/tenants/form.scss | 4 +- app/assets/stylesheets/advanced_search.scss | 2 +- .../stylesheets/autocomplete_overrides.scss | 4 +- .../budgets/ballot/investment.scss | 4 +- .../budgets/executions/filters.scss | 2 +- .../budgets/groups_and_headings.scss | 8 +- .../stylesheets/budgets/investments-list.scss | 2 +- .../budgets/investmentss/filters.scss | 4 +- app/assets/stylesheets/budgets/phases.scss | 12 +- app/assets/stylesheets/budgets/subheader.scss | 2 +- app/assets/stylesheets/dashboard.scss | 22 ++-- .../stylesheets/documents/document.scss | 2 +- .../stylesheets/documents/documents.scss | 6 +- app/assets/stylesheets/in_favor_against.scss | 2 +- app/assets/stylesheets/layout.scss | 104 +++++++++--------- .../stylesheets/layout/account_menu.scss | 2 +- .../stylesheets/layout/locale_switcher.scss | 8 +- app/assets/stylesheets/layout/social.scss | 4 +- .../stylesheets/layout/subnavigation.scss | 6 +- .../stylesheets/legislation_process.scss | 22 ++-- app/assets/stylesheets/map_location.scss | 2 +- app/assets/stylesheets/milestones.scss | 8 +- app/assets/stylesheets/mixins/forms.scss | 6 +- app/assets/stylesheets/mixins/sdg.scss | 2 +- app/assets/stylesheets/mixins/tags.scss | 4 +- app/assets/stylesheets/mixins/tooltips.scss | 2 +- app/assets/stylesheets/mixins/uploads.scss | 2 +- app/assets/stylesheets/notification_item.scss | 2 +- app/assets/stylesheets/pages.scss | 4 +- app/assets/stylesheets/participation.scss | 82 +++++++------- .../relationable/related_content_list.scss | 4 +- app/assets/stylesheets/sdg/goals/index.scss | 4 +- app/assets/stylesheets/sdg/goals/show.scss | 2 +- app/assets/stylesheets/sdg/goals/targets.scss | 2 +- .../sdg/related_list_selector.scss | 4 +- app/assets/stylesheets/stats.scss | 6 +- app/assets/stylesheets/subscriptions.scss | 2 +- .../stylesheets/widgets/feeds/feed.scss | 2 +- .../widgets/feeds/participation.scss | 2 +- 54 files changed, 214 insertions(+), 214 deletions(-) diff --git a/app/assets/stylesheets/account/permissions_list.scss b/app/assets/stylesheets/account/permissions_list.scss index fbd0a5043..6abe2165c 100644 --- a/app/assets/stylesheets/account/permissions_list.scss +++ b/app/assets/stylesheets/account/permissions_list.scss @@ -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; diff --git a/app/assets/stylesheets/account/verify-account.scss b/app/assets/stylesheets/account/verify-account.scss index 2ba30afe7..dee8d3ee4 100644 --- a/app/assets/stylesheets/account/verify-account.scss +++ b/app/assets/stylesheets/account/verify-account.scss @@ -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); diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index b9cfcffb3..b19590a97 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -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); } } diff --git a/app/assets/stylesheets/admin/budget_phases/form.scss b/app/assets/stylesheets/admin/budget_phases/form.scss index 4faa8ffd0..61fd9894e 100644 --- a/app/assets/stylesheets/admin/budget_phases/form.scss +++ b/app/assets/stylesheets/admin/budget_phases/form.scss @@ -29,7 +29,7 @@ .button { &.upload-image { - margin-bottom: $line-height / 2; + margin-bottom: calc(#{$line-height} / 2); } } } diff --git a/app/assets/stylesheets/admin/budgets/actions.scss b/app/assets/stylesheets/admin/budgets/actions.scss index c72a6bfac..6c5c3caca 100644 --- a/app/assets/stylesheets/admin/budgets/actions.scss +++ b/app/assets/stylesheets/admin/budgets/actions.scss @@ -22,7 +22,7 @@ dd { flex-basis: 20em; flex-grow: 1; - max-width: $global-width * 3 / 4; + max-width: calc(#{$global-width} * 3 / 4); } + * { diff --git a/app/assets/stylesheets/admin/budgets/drafting.scss b/app/assets/stylesheets/admin/budgets/drafting.scss index c343f4770..d99270909 100644 --- a/app/assets/stylesheets/admin/budgets/drafting.scss +++ b/app/assets/stylesheets/admin/budgets/drafting.scss @@ -11,7 +11,7 @@ } .callout { - flex-basis: $global-width / 3; + flex-basis: calc(#{$global-width} / 3); flex-grow: 1; margin-bottom: 0; } diff --git a/app/assets/stylesheets/admin/budgets/form.scss b/app/assets/stylesheets/admin/budgets/form.scss index bb1a87fd5..107c789db 100644 --- a/app/assets/stylesheets/admin/budgets/form.scss +++ b/app/assets/stylesheets/admin/budgets/form.scss @@ -4,7 +4,7 @@ .button { &.upload-image { - margin-bottom: $line-height / 2; + margin-bottom: calc(#{$line-height} / 2); } } diff --git a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss index 0d6c2d11b..86d9c2368 100644 --- a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss +++ b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss @@ -32,7 +32,7 @@ align-items: flex-start; + * { - margin-top: $line-height / 2; + margin-top: calc(#{$line-height} / 2); } .edit-link, diff --git a/app/assets/stylesheets/admin/budgets/help.scss b/app/assets/stylesheets/admin/budgets/help.scss index 0a055801f..0b8fbdfef 100644 --- a/app/assets/stylesheets/admin/budgets/help.scss +++ b/app/assets/stylesheets/admin/budgets/help.scss @@ -34,7 +34,7 @@ } &::after { - bottom: $padding / 2; + bottom: calc(#{$padding} / 2); color: $white; position: absolute; right: calc(#{$padding} + #{$quote-padding}); diff --git a/app/assets/stylesheets/admin/budgets/show.scss b/app/assets/stylesheets/admin/budgets/show.scss index f71179422..ce6ffd8c3 100644 --- a/app/assets/stylesheets/admin/budgets/show.scss +++ b/app/assets/stylesheets/admin/budgets/show.scss @@ -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); } } } diff --git a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss index 840f302b3..a17635bfc 100644 --- a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss +++ b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss @@ -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; diff --git a/app/assets/stylesheets/admin/dashboard/index.scss b/app/assets/stylesheets/admin/dashboard/index.scss index 78fe1aec3..772392b94 100644 --- a/app/assets/stylesheets/admin/dashboard/index.scss +++ b/app/assets/stylesheets/admin/dashboard/index.scss @@ -9,7 +9,7 @@ &::after { content: ""; display: block; - margin-bottom: $line-height / 3; + margin-bottom: calc(#{$line-height} / 3); } } diff --git a/app/assets/stylesheets/admin/machine_learning/scripts.scss b/app/assets/stylesheets/admin/machine_learning/scripts.scss index 6a516fd4e..5fc3e15d2 100644 --- a/app/assets/stylesheets/admin/machine_learning/scripts.scss +++ b/app/assets/stylesheets/admin/machine_learning/scripts.scss @@ -35,7 +35,7 @@ } form { - max-width: $global-width * 3 / 4; + max-width: calc(#{$global-width} * 3 / 4); } select { diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss index 74f816408..3a6cd7514 100644 --- a/app/assets/stylesheets/admin/menu.scss +++ b/app/assets/stylesheets/admin/menu.scss @@ -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 { diff --git a/app/assets/stylesheets/admin/settings/table.scss b/app/assets/stylesheets/admin/settings/table.scss index e41467509..e6bb52324 100644 --- a/app/assets/stylesheets/admin/settings/table.scss +++ b/app/assets/stylesheets/admin/settings/table.scss @@ -1,7 +1,7 @@ .admin { .featured-settings-table { td { - max-width: $global-width / 3; + max-width: calc($global-width / 3); } } diff --git a/app/assets/stylesheets/admin/tenants/form.scss b/app/assets/stylesheets/admin/tenants/form.scss index 4e68a4752..99a27e5da 100644 --- a/app/assets/stylesheets/admin/tenants/form.scss +++ b/app/assets/stylesheets/admin/tenants/form.scss @@ -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 { diff --git a/app/assets/stylesheets/advanced_search.scss b/app/assets/stylesheets/advanced_search.scss index 344176a48..9412080ff 100644 --- a/app/assets/stylesheets/advanced_search.scss +++ b/app/assets/stylesheets/advanced_search.scss @@ -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); } } diff --git a/app/assets/stylesheets/autocomplete_overrides.scss b/app/assets/stylesheets/autocomplete_overrides.scss index 25c759d8c..7021c2dab 100644 --- a/app/assets/stylesheets/autocomplete_overrides.scss +++ b/app/assets/stylesheets/autocomplete_overrides.scss @@ -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; } diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss index 5dc193fd0..97db9a1c1 100644 --- a/app/assets/stylesheets/budgets/ballot/investment.scss +++ b/app/assets/stylesheets/budgets/ballot/investment.scss @@ -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; } diff --git a/app/assets/stylesheets/budgets/executions/filters.scss b/app/assets/stylesheets/budgets/executions/filters.scss index 9517f4d20..1cef35df4 100644 --- a/app/assets/stylesheets/budgets/executions/filters.scss +++ b/app/assets/stylesheets/budgets/executions/filters.scss @@ -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); diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss index dafc3317c..0ef382fa9 100644 --- a/app/assets/stylesheets/budgets/groups_and_headings.scss +++ b/app/assets/stylesheets/budgets/groups_and_headings.scss @@ -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); } } } diff --git a/app/assets/stylesheets/budgets/investments-list.scss b/app/assets/stylesheets/budgets/investments-list.scss index f94f991d1..9bd83084b 100644 --- a/app/assets/stylesheets/budgets/investments-list.scss +++ b/app/assets/stylesheets/budgets/investments-list.scss @@ -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%; diff --git a/app/assets/stylesheets/budgets/investmentss/filters.scss b/app/assets/stylesheets/budgets/investmentss/filters.scss index a00be0801..e59aa3c8f 100644 --- a/app/assets/stylesheets/budgets/investmentss/filters.scss +++ b/app/assets/stylesheets/budgets/investmentss/filters.scss @@ -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] { diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss index 7c67897a6..0d4ad8e0d 100644 --- a/app/assets/stylesheets/budgets/phases.scss +++ b/app/assets/stylesheets/budgets/phases.scss @@ -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; diff --git a/app/assets/stylesheets/budgets/subheader.scss b/app/assets/stylesheets/budgets/subheader.scss index ee27b48f2..87453242b 100644 --- a/app/assets/stylesheets/budgets/subheader.scss +++ b/app/assets/stylesheets/budgets/subheader.scss @@ -8,7 +8,7 @@ } .button { - margin-top: $line-height / 2; + margin-top: calc(#{$line-height} / 2); } .callout { diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 33b05414d..746f7b1a2 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -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 diff --git a/app/assets/stylesheets/documents/document.scss b/app/assets/stylesheets/documents/document.scss index 47137d6c7..54ecd651c 100644 --- a/app/assets/stylesheets/documents/document.scss +++ b/app/assets/stylesheets/documents/document.scss @@ -1,6 +1,6 @@ .document { + .document { - margin-top: $line-height / 3; + margin-top: calc(#{$line-height} / 3); } a:first-of-type { diff --git a/app/assets/stylesheets/documents/documents.scss b/app/assets/stylesheets/documents/documents.scss index 6aab0c133..1d48cfc37 100644 --- a/app/assets/stylesheets/documents/documents.scss +++ b/app/assets/stylesheets/documents/documents.scss @@ -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 { diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss index a4dd6972c..85d73bb91 100644 --- a/app/assets/stylesheets/in_favor_against.scss +++ b/app/assets/stylesheets/in_favor_against.scss @@ -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) { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 26957cbba..2469052d8 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -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); } } } diff --git a/app/assets/stylesheets/layout/account_menu.scss b/app/assets/stylesheets/layout/account_menu.scss index 385513af8..8e6e2ab6a 100644 --- a/app/assets/stylesheets/layout/account_menu.scss +++ b/app/assets/stylesheets/layout/account_menu.scss @@ -1,7 +1,7 @@ .account-menu.menu { @include breakpoint(small only) { - margin-top: $line-height / 2; + margin-top: calc(#{$line-height} / 2); &, .menu { diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss index c403d15cc..a67251901 100644 --- a/app/assets/stylesheets/layout/locale_switcher.scss +++ b/app/assets/stylesheets/layout/locale_switcher.scss @@ -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; diff --git a/app/assets/stylesheets/layout/social.scss b/app/assets/stylesheets/layout/social.scss index 69f44a5d2..b7abf5bcf 100644 --- a/app/assets/stylesheets/layout/social.scss +++ b/app/assets/stylesheets/layout/social.scss @@ -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 { diff --git a/app/assets/stylesheets/layout/subnavigation.scss b/app/assets/stylesheets/layout/subnavigation.scss index e67a3b5a5..8165bcf7b 100644 --- a/app/assets/stylesheets/layout/subnavigation.scss +++ b/app/assets/stylesheets/layout/subnavigation.scss @@ -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; diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss index a18266d97..e0578ce1b 100644 --- a/app/assets/stylesheets/legislation_process.scss +++ b/app/assets/stylesheets/legislation_process.scss @@ -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); diff --git a/app/assets/stylesheets/map_location.scss b/app/assets/stylesheets/map_location.scss index f613d1dd6..6c81aa187 100644 --- a/app/assets/stylesheets/map_location.scss +++ b/app/assets/stylesheets/map_location.scss @@ -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, diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss index addc2d117..30011cd0f 100644 --- a/app/assets/stylesheets/milestones.scss +++ b/app/assets/stylesheets/milestones.scss @@ -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); } diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss index 4516b8b73..c733272eb 100644 --- a/app/assets/stylesheets/mixins/forms.scss +++ b/app/assets/stylesheets/mixins/forms.scss @@ -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; } } diff --git a/app/assets/stylesheets/mixins/sdg.scss b/app/assets/stylesheets/mixins/sdg.scss index 76442f551..6013d2efe 100644 --- a/app/assets/stylesheets/mixins/sdg.scss +++ b/app/assets/stylesheets/mixins/sdg.scss @@ -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}); diff --git a/app/assets/stylesheets/mixins/tags.scss b/app/assets/stylesheets/mixins/tags.scss index 47de272a2..e16038413 100644 --- a/app/assets/stylesheets/mixins/tags.scss +++ b/app/assets/stylesheets/mixins/tags.scss @@ -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 { diff --git a/app/assets/stylesheets/mixins/tooltips.scss b/app/assets/stylesheets/mixins/tooltips.scss index 50cf9674a..8c2d118a8 100644 --- a/app/assets/stylesheets/mixins/tooltips.scss +++ b/app/assets/stylesheets/mixins/tooltips.scss @@ -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 { diff --git a/app/assets/stylesheets/mixins/uploads.scss b/app/assets/stylesheets/mixins/uploads.scss index fa5fdbf70..7374f1266 100644 --- a/app/assets/stylesheets/mixins/uploads.scss +++ b/app/assets/stylesheets/mixins/uploads.scss @@ -72,7 +72,7 @@ &.errors { background-color: $alert-color; - margin-top: $line-height / 2; + margin-top: calc(#{$line-height} / 2); } } diff --git a/app/assets/stylesheets/notification_item.scss b/app/assets/stylesheets/notification_item.scss index d4bbc5aab..c0a5b44e2 100644 --- a/app/assets/stylesheets/notification_item.scss +++ b/app/assets/stylesheets/notification_item.scss @@ -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); diff --git a/app/assets/stylesheets/pages.scss b/app/assets/stylesheets/pages.scss index 27a09576b..abb89005d 100644 --- a/app/assets/stylesheets/pages.scss +++ b/app/assets/stylesheets/pages.scss @@ -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; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 73fa7e58d..ec74948bf 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -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; } diff --git a/app/assets/stylesheets/relationable/related_content_list.scss b/app/assets/stylesheets/relationable/related_content_list.scss index 0df728dc8..37a6b0697 100644 --- a/app/assets/stylesheets/relationable/related_content_list.scss +++ b/app/assets/stylesheets/relationable/related_content_list.scss @@ -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); } } diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index d166e610a..7c9031fdd 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -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 { diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss index 610c25a31..157842e22 100644 --- a/app/assets/stylesheets/sdg/goals/show.scss +++ b/app/assets/stylesheets/sdg/goals/show.scss @@ -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; diff --git a/app/assets/stylesheets/sdg/goals/targets.scss b/app/assets/stylesheets/sdg/goals/targets.scss index ec9fb307c..a7fde8d0a 100644 --- a/app/assets/stylesheets/sdg/goals/targets.scss +++ b/app/assets/stylesheets/sdg/goals/targets.scss @@ -12,7 +12,7 @@ } &:not(:last-child)::after { - margin-bottom: $line-height / 2; + margin-bottom: calc(#{$line-height} / 2); } } } diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 5a959e576..6cd2ecb98 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -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; } } diff --git a/app/assets/stylesheets/stats.scss b/app/assets/stylesheets/stats.scss index a4ad681a1..7da97608a 100644 --- a/app/assets/stylesheets/stats.scss +++ b/app/assets/stylesheets/stats.scss @@ -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 { diff --git a/app/assets/stylesheets/subscriptions.scss b/app/assets/stylesheets/subscriptions.scss index 6affddaaf..0c0f8d96f 100644 --- a/app/assets/stylesheets/subscriptions.scss +++ b/app/assets/stylesheets/subscriptions.scss @@ -1,5 +1,5 @@ .subscriptions-edit { form { - max-width: $global-width * 7 / 12; + max-width: calc(#{$global-width * 7} / 12); } } diff --git a/app/assets/stylesheets/widgets/feeds/feed.scss b/app/assets/stylesheets/widgets/feeds/feed.scss index a6004d309..e9e5be9a8 100644 --- a/app/assets/stylesheets/widgets/feeds/feed.scss +++ b/app/assets/stylesheets/widgets/feeds/feed.scss @@ -14,7 +14,7 @@ .proposal { margin-bottom: 0; margin-top: 0; - padding: $line-height / 2 0; + padding: calc(#{$line-height} / 2) 0; } } diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss index 76cdb67b2..eb9fa75e7 100644 --- a/app/assets/stylesheets/widgets/feeds/participation.scss +++ b/app/assets/stylesheets/widgets/feeds/participation.scss @@ -24,6 +24,6 @@ } .sdg-tag-list { - margin-top: $line-height / 2; + margin-top: calc(#{$line-height} / 2); } } From 1a797f2808ef23782a45a8ab27bf4dae0eaeda5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Mar 2024 21:37:27 +0100 Subject: [PATCH 3/5] Use multiplications instead of divisions in Sass variables In the previous commit, we used the `calc` function when assiging CSS properties in order to avoid 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($global-width, 2) or calc($global-width / 2) ``` In cases like dividing by two, there's a third alternative: multiplying by 0.5. We're applying this principle to all variable assignments where we were using divisions, since using the `calc` function here would sometimes result in errors due to these variables being used in arithmetical operations. We aren't using `math.div` because it makes the code harder to read. --- app/assets/stylesheets/_consul_settings.scss | 6 +++--- app/assets/stylesheets/_settings.scss | 4 ++-- app/assets/stylesheets/admin/budgets/actions.scss | 2 +- app/assets/stylesheets/admin/budgets/drafting.scss | 2 +- app/assets/stylesheets/admin/budgets/help.scss | 4 ++-- app/assets/stylesheets/budgets/ballot/investment.scss | 2 +- app/assets/stylesheets/budgets/groups_and_headings.scss | 2 +- app/assets/stylesheets/in_favor_against.scss | 4 ++-- app/assets/stylesheets/mixins/forms.scss | 2 +- app/assets/stylesheets/mixins/layouts.scss | 4 ++-- app/assets/stylesheets/mixins/sdg.scss | 2 +- app/assets/stylesheets/participation.scss | 2 +- 12 files changed, 18 insertions(+), 18 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 162671568..8f9ba72b1 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -53,8 +53,8 @@ $show-header-for-stacked: true !default; // 2. CONSUL DEMOCRACY variables // ----------------------------- -$body-margin: calc(50vw - #{$global-width / 2}) !default; -$full-width-margin: unquote("#{$global-width / 2} - 50vw") !default; +$body-margin: calc(50vw - #{$global-width * 0.5}) !default; +$full-width-margin: unquote("#{$global-width * 0.5} - 50vw") !default; $base-font-size: rem-calc(17) !default; $base-line: rem-calc(26) !default; @@ -160,7 +160,7 @@ $anchor-color-hover: darken($anchor-color, 20%) !default; $tab-background-active: $white !default; $tab-item-font-size: $base-font-size !default; -$tab-item-padding: $line-height / 2 0 !default; +$tab-item-padding: $line-height * 0.5 0 !default; $tab-content-border: $border !default; $tooltip-background-color: $brand !default; diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 9192029e6..afaef8113 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -436,7 +436,7 @@ $input-background-focus: $white !default; $input-background-disabled: $light-gray !default; $input-border: 1px solid $medium-gray !default; $input-border-focus: 1px solid $dark-gray !default; -$input-padding: $form-spacing / 2 !default; +$input-padding: $form-spacing * 0.5 !default; $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default; $input-shadow-focus: 0 0 5px $medium-gray !default; $input-cursor-disabled: not-allowed !default; @@ -778,7 +778,7 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h $table-is-striped: true !default; $table-striped-background: smart-scale($table-background, $table-color-scale) !default; $table-stripe: even !default; -$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default; +$table-head-background: smart-scale($table-background, $table-color-scale * 0.5) !default; $table-head-row-hover: darken($table-head-background, $table-hover-scale) !default; $table-foot-background: smart-scale($table-background, $table-color-scale) !default; $table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default; diff --git a/app/assets/stylesheets/admin/budgets/actions.scss b/app/assets/stylesheets/admin/budgets/actions.scss index 6c5c3caca..5d2527b29 100644 --- a/app/assets/stylesheets/admin/budgets/actions.scss +++ b/app/assets/stylesheets/admin/budgets/actions.scss @@ -1,7 +1,7 @@ .admin .budgets-actions { > * { $gap: $line-height; - $vertical-gap: $line-height / 2; + $vertical-gap: $line-height * 0.5; @include flex-with-gap($gap); align-items: center; flex-wrap: wrap; diff --git a/app/assets/stylesheets/admin/budgets/drafting.scss b/app/assets/stylesheets/admin/budgets/drafting.scss index d99270909..447357ea2 100644 --- a/app/assets/stylesheets/admin/budgets/drafting.scss +++ b/app/assets/stylesheets/admin/budgets/drafting.scss @@ -1,6 +1,6 @@ .admin .drafting { $vertical-gap: nth($callout-margin, 3); - @include flex-with-gap($line-height / 2); + @include flex-with-gap($line-height * 0.5); align-items: flex-start; flex-wrap: wrap; margin-bottom: $line-height * 1.5; diff --git a/app/assets/stylesheets/admin/budgets/help.scss b/app/assets/stylesheets/admin/budgets/help.scss index 0b8fbdfef..0a9fc5951 100644 --- a/app/assets/stylesheets/admin/budgets/help.scss +++ b/app/assets/stylesheets/admin/budgets/help.scss @@ -1,7 +1,7 @@ .admin .budgets-help { - $padding: $line-height / 2; + $padding: $line-height * 0.5; $quote-size: 1em; - $quote-padding: 2 * $quote-size / 5; + $quote-padding: $quote-size * 0.4; $quote-width: $quote-size + 2 * $quote-padding; @include has-fa-icon(quote-right, solid, after); diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss index 97db9a1c1..ea9d598b6 100644 --- a/app/assets/stylesheets/budgets/ballot/investment.scss +++ b/app/assets/stylesheets/budgets/ballot/investment.scss @@ -1,5 +1,5 @@ .ballot-list li { - $side-padding: $line-height / 2; + $side-padding: $line-height * 0.5; $close-icon-size: rem-calc(20); $close-icon-margin: rem-calc(6); diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss index 0ef382fa9..76c90cb2e 100644 --- a/app/assets/stylesheets/budgets/groups_and_headings.scss +++ b/app/assets/stylesheets/budgets/groups_and_headings.scss @@ -1,5 +1,5 @@ .public .groups-and-headings { - $spacing: $line-height / 2; + $spacing: $line-height * 0.5; .headings-list { @include flex-with-gap($spacing); diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss index 85d73bb91..0a0fd3123 100644 --- a/app/assets/stylesheets/in_favor_against.scss +++ b/app/assets/stylesheets/in_favor_against.scss @@ -1,8 +1,8 @@ .in-favor-against { - @include flex-with-gap($line-height / 4); + @include flex-with-gap($line-height * 0.25); @include breakpoint(medium) { - @include flex-with-gap($line-height * 3 / 4); + @include flex-with-gap($line-height * 0.75); } &, diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss index c733272eb..66c898cd7 100644 --- a/app/assets/stylesheets/mixins/forms.scss +++ b/app/assets/stylesheets/mixins/forms.scss @@ -22,7 +22,7 @@ $icon-size: $line-height * 4; $padding-right: rem-calc(20); $icon-size-with-padding: $icon-size + $padding-right; - $polygon-size: $icon-size / 2; + $polygon-size: $icon-size * 0.5; @include background-till-left-of-screen; @include brand-secondary-background; border: $border-width solid $brand-secondary; diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss index 93df188bc..65bba3a88 100644 --- a/app/assets/stylesheets/mixins/layouts.scss +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -33,7 +33,7 @@ } @mixin full-width-cover($adjust-margin: true, $adjust-padding: false) { - $global-padding: rem-calc(map-get($grid-column-gutter, medium)) / 2; + $global-padding: rem-calc(map-get($grid-column-gutter, medium)) * 0.5; bottom: 0; content: ""; display: block; @@ -44,7 +44,7 @@ top: 0; @if $adjust-padding { - $small-padding: rem-calc(map-get($grid-column-gutter, small)) / 2; + $small-padding: rem-calc(map-get($grid-column-gutter, small)) * 0.5; left: -$small-padding; right: -$small-padding; diff --git a/app/assets/stylesheets/mixins/sdg.scss b/app/assets/stylesheets/mixins/sdg.scss index 6013d2efe..a3655cf9a 100644 --- a/app/assets/stylesheets/mixins/sdg.scss +++ b/app/assets/stylesheets/mixins/sdg.scss @@ -1,5 +1,5 @@ @mixin sdg-goal-list($spacing: 1ch) { - $min-spacing: $sdg-icon-min-width / 10; + $min-spacing: $sdg-icon-min-width * 0.1; $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"}; display: flex; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index ec74948bf..364bac7cc 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1643,7 +1643,7 @@ } .poll-question-answers { - @include flex-with-gap($line-height / 4); + @include flex-with-gap($line-height * 0.25); flex-wrap: wrap; .button { From 6ddafd98273437298e9823c79983d8f8c7769f76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Mar 2024 21:49:24 +0100 Subject: [PATCH 4/5] Use percentages in hsla Sass function After moving to Dart Sass, we were getting warnings like: ``` Deprecation Warning: $saturation: Passing a number without unit % (78) is deprecated Deprecation Warning: $lightness: Passing a number without unit % (93) is deprecated ``` So we're passing percentages to the hsla function instead of passing numbers without units. --- .../stylesheets/annotator_overrides.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/annotator_overrides.scss b/app/assets/stylesheets/annotator_overrides.scss index c4af1c311..59c8a54f9 100644 --- a/app/assets/stylesheets/annotator_overrides.scss +++ b/app/assets/stylesheets/annotator_overrides.scss @@ -11,42 +11,42 @@ background: rgba(255, 249, 218, 0.75); &.weight-1 { - background: hsla(50, 100, 93, 0.5); + background: hsla(50, 100%, 93%, 0.5); .weight-1 { - background: hsla(50, 100, 93, 0.75); + background: hsla(50, 100%, 93%, 0.75); } } &.weight-2 { - background: hsla(63, 78, 86, 0.5); + background: hsla(63, 78%, 86%, 0.5); .weight-2 { - background: hsla(63, 78, 86, 0.75); + background: hsla(63, 78%, 86%, 0.75); } } &.weight-3 { - background: hsla(52, 100, 85, 0.5); + background: hsla(52, 100%, 85%, 0.5); .weight-3 { - background: hsla(52, 100, 85, 0.75); + background: hsla(52, 100%, 85%, 0.75); } } &.weight-4 { - background: hsla(51, 91, 75, 0.5); + background: hsla(51, 91%, 75%, 0.5); .weight-4 { - background: hsla(51, 91, 75, 0.75); + background: hsla(51, 91%, 75%, 0.75); } } &.weight-5 { - background: hsla(46, 83, 60, 0.5); + background: hsla(46, 83%, 60%, 0.5); .weight-5 { - background: hsla(46, 83, 60, 0.5); + background: hsla(46, 83%, 60%, 0.5); } } } From fae29069d4c8a9226e51e3b7ecf9499c1a47b9bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 1 Apr 2024 21:36:47 +0200 Subject: [PATCH 5/5] Ignore Sass warnings until we update our dependencies We're getting one warning when compiling the assets due to the code we use from font-awesome-sass, and a lot of warnings due to the code we use from foundation. Since these warnings are very annoying, and we get them both when deploying and every time we change an SCSS file in development, we're silencing them. I haven't found the way to pass the `quiet_deps` option to the Sprockets processor, so I'm monkey-patching the Sass engine instead. --- config/initializers/sass.rb | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 config/initializers/sass.rb diff --git a/config/initializers/sass.rb b/config/initializers/sass.rb new file mode 100644 index 000000000..7ab724bf5 --- /dev/null +++ b/config/initializers/sass.rb @@ -0,0 +1,8 @@ +# TODO: remove once we upgrade Foundation and Font Awesome +SassC::Engine.class_eval do + alias_method :original_initialize, :initialize + + def initialize(template, options = {}) + original_initialize(template, options.merge(quiet_deps: true)) + end +end