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

Merge pull request #5477 from consuldemocracy/sassc_embedded

Browse Source 
Replace SassC/Libsass with Dart Sass
This commit is contained in:
Javi Martín
2024-04-04 16:49:58 +02:00
committed by GitHub
parent 21b7f4c96e fae29069d4
commit d358e464e1
62 changed files with 260 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Gemfile
View File

@@ -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"

16
Gemfile.lock
View File

@@ -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)

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

@@ -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;

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

@@ -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;

2
app/assets/stylesheets/account/permissions_list.scss
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20
app/assets/stylesheets/annotator_overrides.scss
View File

@@ -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);
}
}
}

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
.public .groups-and-headings {
$spacing: $line-height / 2;
$spacing: $line-height * 0.5;
.headings-list {
@include flex-with-gap($spacing);
@@ -13,9 +13,9 @@
border: 2px solid $border;
border-radius: rem-calc(6);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-bottom: $line-height / 2;
margin-top: $line-height / 4;
padding: $line-height / 2;
margin-bottom: calc(#{$line-height} / 2);
margin-top: calc(#{$line-height} / 4);
padding: calc(#{$line-height} / 2);
width: 100%;
@include breakpoint(medium) {
@@ -38,7 +38,7 @@
span {
display: block;
font-size: $small-font-size;
padding-top: $line-height / 2;
padding-top: calc(#{$line-height} / 2);
}
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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;
@@ -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;
}
}

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

@@ -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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1
config/application.rb
View File

@@ -1,3 +1,4 @@
require "sassc-embedded"
require_relative "boot"
require "rails"

8
config/initializers/sass.rb Normal file
View File

@@ -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