Add and apply function-calculation-no-interpolation rule

This stylelint-scss rule is useful because we were inconsistent when
using calc(); sometimes we added interpolation to Sass variables, and
sometimes we didn't. The reason why we originally added interpolation
was that it was necessary until we migrated to Dart Sass in commit
d54971e53. Since then, we can omit the interpolation, which is also what
the Sass documentation recommends [1].

[1] https://sass-lang.com/documentation/values/calculations/
This commit is contained in:
Javi Martín
2025-02-28 13:25:52 +01:00
parent a60926c44b
commit f460d3bc31
63 changed files with 243 additions and 242 deletions

View File

@@ -66,6 +66,7 @@ rules:
scss/at-mixin-pattern: "^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$"
scss/dollar-variable-colon-space-before: never
scss/dollar-variable-pattern: "^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$"
scss/function-calculation-no-interpolation: true
scss/load-no-partial-leading-underscore: true
scss/load-partial-extension: never
scss/no-unused-private-members: true

View File

@@ -57,7 +57,7 @@ $switch-background: $dark-gray !default;
// 2. CONSUL DEMOCRACY variables
// -----------------------------
$body-margin: calc(50vw - #{$global-width * 0.5}) !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;

View File

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

View File

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

View File

@@ -119,7 +119,7 @@ $table-header: #ecf1f6;
th {
background: $table-header;
color: $admin-text;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
a {
color: inherit;
@@ -144,7 +144,7 @@ $table-header: #ecf1f6;
}
[type="submit"] ~ a {
margin-left: calc(#{$line-height} / 2);
margin-left: calc($line-height / 2);
}
[type="checkbox"] {
@@ -192,11 +192,11 @@ $table-header: #ecf1f6;
.menu.simple,
.order-links {
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
h2 {
font-weight: bold;
margin-bottom: calc(#{$line-height} / 3);
margin-bottom: calc($line-height / 3);
}
.is-active {
@@ -333,7 +333,7 @@ code {
font-size: rem-calc(16);
font-weight: normal;
margin-bottom: $line-height;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
strong {
font-size: rem-calc(18);
@@ -346,7 +346,7 @@ code {
border-bottom-right-radius: rem-calc(6);
border-top: 2px solid;
font-size: $small-font-size;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
}
.admin-budget-investment-info {
@@ -354,7 +354,7 @@ code {
border: 2px solid $highlight;
border-radius: rem-calc(4);
margin-bottom: $line-height;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
p {
font-size: $small-font-size;
@@ -436,7 +436,7 @@ table {
height: $line-height * 2;
line-height: $line-height * 2;
margin: 0;
padding: 0 calc(#{$line-height} / 2);
padding: 0 calc($line-height / 2);
}
}

View File

@@ -5,7 +5,7 @@
margin: $line-height 0;
@include breakpoint(medium) {
margin: calc(#{$line-height} / 2) 0 0;
margin: calc($line-height / 2) 0 0;
}
}
@@ -13,11 +13,11 @@
background: $highlight;
clear: both;
margin: $line-height 0;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
.filter {
display: inline-block;
margin: 0 calc(#{$line-height} / 2);
margin: 0 calc($line-height / 2);
label {
font-weight: normal;
@@ -26,7 +26,7 @@
}
.button {
margin-top: calc(#{$line-height} / 2);
margin-top: calc($line-height / 2);
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -11,7 +11,7 @@
color: $admin-text;
margin-bottom: $line-height;
padding: $padding;
padding-right: calc(2 * #{$padding} + #{$quote-width});
padding-right: calc(2 * $padding + $quote-width);
position: relative;
@include breakpoint(medium) {
@@ -34,9 +34,9 @@
}
&::after {
bottom: calc(#{$padding} / 2);
bottom: calc($padding / 2);
color: $white;
position: absolute;
right: calc(#{$padding} + #{$quote-padding});
right: calc($padding + $quote-padding);
}
}

View File

@@ -5,7 +5,7 @@
@each $size, $headers in $header-styles {
@include breakpoint($size) {
font-size: calc(#{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);
}
}
}

View File

@@ -9,7 +9,7 @@
display: inline-block;
font-size: $small-font-size;
font-weight: bold;
padding: calc(#{$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: calc(#{$line-height} / 2);
margin-left: calc($line-height / 2);
position: absolute;
top: -8px;
width: 20px;

View File

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

View File

@@ -19,7 +19,7 @@
> [type="hidden"] + fieldset,
> fieldset + fieldset {
@include admin-fieldset-separator;
padding-top: calc(#{$line-height} / 4);
padding-top: calc($line-height / 4);
}
.collection-radio-buttons,
@@ -30,7 +30,7 @@
@each $elements in 10, 15, 20, 25, 30 {
&:has(label:nth-of-type(#{$elements})) {
column-count: calc(#{$elements} / 5);
column-count: calc($elements / 5);
}
}
}

View File

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

View File

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

View File

@@ -3,7 +3,7 @@
container-type: inline-size;
display: flex;
flex-wrap: wrap;
gap: calc(#{$line-height} / 2);
gap: calc($line-height / 2);
> :first-child {
align-items: flex-start;

View File

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

View File

@@ -16,12 +16,12 @@
display: block;
font-size: $small-font-size;
list-style: none;
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
padding: calc($line-height / 4) calc($line-height / 3);
.ui-menu-item {
.ui-menu-item-wrapper {
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
padding: calc($line-height / 4) calc($line-height / 3);
position: relative;
}

View File

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

View File

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

View File

@@ -9,11 +9,11 @@
margin-bottom: $line-height;
@include breakpoint(medium) {
width: calc(100% / 2 - #{$spacing});
width: calc(100% / 2 - $spacing);
}
@include breakpoint(large) {
width: calc(100% / 3 - #{$spacing});
width: calc(100% / 3 - $spacing);
}
}
}

View File

@@ -31,7 +31,7 @@
}
.budget-execution-info {
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
}
.author {

View File

@@ -13,17 +13,17 @@
border: 2px solid $border;
border-radius: rem-calc(6);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-bottom: calc(#{$line-height} / 2);
margin-top: calc(#{$line-height} / 4);
padding: calc(#{$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) {
width: calc(100% / 3 - #{$spacing});
width: calc(100% / 3 - $spacing);
}
@include breakpoint(large) {
width: calc(100% / 6 - #{$spacing});
width: calc(100% / 6 - $spacing);
}
a {
@@ -38,7 +38,7 @@
span {
display: block;
font-size: $small-font-size;
padding-top: calc(#{$line-height} / 2);
padding-top: calc($line-height / 2);
}
}
}

View File

@@ -14,14 +14,14 @@
border-radius: rem-calc(6);
display: flex;
flex-direction: column;
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
padding: 0;
position: relative;
width: 100%;
@include breakpoint(medium) {
$gap: rem-calc(map-get($grid-margin-gutters, medium));
width: calc(33.33% - #{$gap});
width: calc(33.33% - $gap);
}
img {

View File

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

View File

@@ -21,13 +21,13 @@
display: block;
font-size: rem-calc(36);
font-weight: bold;
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
}
}
.phase-title {
@include tabs-title;
margin: calc(#{$line-height} / 6);
margin: calc($line-height / 6);
margin-left: 0;
position: relative;
text-align: center;
@@ -36,19 +36,19 @@
$triangle-width: 1em;
$item-margin: rem-calc(3);
margin-left: calc(-1 * (#{$triangle-width} - #{$item-margin}));
margin-left: calc(-1 * ($triangle-width - $item-margin));
margin-right: 0;
transform: translateX(calc(#{$triangle-width} - #{$item-margin}));
transform: translateX(calc($triangle-width - $item-margin));
&,
a {
clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, #{$triangle-width} 50%, 0 0);
clip-path: polygon(calc(100% - $triangle-width) 0, 100% 50%, calc(100% - $triangle-width) 100%, 0 100%, #{$triangle-width} 50%, 0 0);
}
&:first-child {
&,
a {
clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, 0 0);
clip-path: polygon(calc(100% - $triangle-width) 0, 100% 50%, calc(100% - $triangle-width) 100%, 0 100%, 0 0);
}
a {
@@ -99,7 +99,7 @@
&.current-phase-tab a {
@include brand-secondary-background;
padding-top: calc(#{$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: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
text-transform: uppercase;
}

View File

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

View File

@@ -25,7 +25,7 @@
.label {
display: inline-block;
margin-left: calc(#{$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: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
text-align: center;
@include breakpoint(medium only) {
.change-behaviour {
float: left;
margin-top: calc(#{$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: calc(#{$line-height} / 2);
height: calc($line-height / 2);
}
.progress-meter {
@@ -109,7 +109,7 @@
.action-content {
display: inline-block;
margin-left: calc(#{$line-height} / 4);
margin-left: calc($line-height / 4);
max-width: 90%;
word-break: break-all;
@@ -118,7 +118,7 @@
}
.label {
margin-left: calc(#{$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: calc(#{$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: calc(#{$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: calc(#{$line-height} / 2) calc(#{$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: calc(#{$line-height} / 2);
margin-left: calc($line-height / 2);
}
}
@@ -455,7 +455,7 @@
.community-poll {
border-bottom: 1px solid $border;
margin-bottom: $line-height;
padding-bottom: calc(#{$line-height} / 2);
padding-bottom: calc($line-height / 2);
}
// 09. Email preview

View File

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

View File

@@ -10,7 +10,7 @@
}
ul li {
padding-top: calc(#{$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: calc(#{$line-height} / 2) 0;
padding: calc(#{$line-height} / 2);
margin: calc($line-height / 2) 0;
padding: calc($line-height / 2);
position: relative;
p {

View File

@@ -234,12 +234,12 @@ button,
.menu.simple {
border-bottom: 1px solid $border;
clear: both;
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
li {
font-size: $base-font-size;
margin-bottom: 0;
margin-right: calc(#{$line-height} / 2);
margin-right: calc($line-height / 2);
@include breakpoint(medium) {
margin-right: $line-height * 1.5;
@@ -264,7 +264,7 @@ button,
}
&:not(.is-active) {
margin-bottom: calc(#{$line-height} / 3);
margin-bottom: calc($line-height / 3);
}
}
@@ -322,7 +322,7 @@ button,
}
.close-button {
top: calc(#{$line-height} / 2);
top: calc($line-height / 2);
}
.back,
@@ -330,7 +330,7 @@ button,
clear: both;
color: $text-medium;
display: inline-block;
padding-right: calc(#{$line-height} / 2);
padding-right: calc($line-height / 2);
}
.back:not([class^="icon-"]) {
@@ -386,7 +386,7 @@ button,
}
.button.float-right ~ .button.float-right {
margin: 0 calc(#{$line-height} / 2);
margin: 0 calc($line-height / 2);
}
.pagination .current {
@@ -670,13 +670,13 @@ body > header,
.submenu {
border-bottom: 1px solid $border;
clear: both;
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
a {
@include text-colored-link;
display: inline-block;
font-weight: bold;
margin-right: calc(#{$line-height} / 2);
margin-right: calc($line-height / 2);
position: relative;
text-align: left;
@@ -764,7 +764,7 @@ footer {
.subfooter {
border-top: 1px solid $text-light;
font-size: $small-font-size;
padding-top: calc(#{$line-height} / 2);
padding-top: calc($line-height / 2);
.legal {
display: inline-block;
@@ -815,8 +815,8 @@ footer {
display: inline-block;
font-size: rem-calc(16);
font-weight: bold;
margin: -1px 0 calc(#{$line-height} / 2);
padding-top: calc(#{$line-height} / 4);
margin: -1px 0 calc($line-height / 2);
padding-top: calc($line-height / 4);
text-transform: uppercase;
}
@@ -877,9 +877,9 @@ footer {
background: $body-background;
box-decoration-break: clone;
font-weight: bold;
padding: 0 calc(#{$line-height} / 2);
padding: 0 calc($line-height / 2);
position: relative;
top: calc(#{-$line-height} / 2);
top: calc(-1 * $line-height / 2);
}
}
@@ -935,7 +935,7 @@ form {
}
[type=file] {
margin: calc(#{$line-height} / 2) 0 calc(#{$line-height} / 2) calc(#{$line-height} / 4);
margin: calc($line-height / 2) 0 calc($line-height / 2) calc($line-height / 4);
}
.cke {
@@ -1110,7 +1110,7 @@ form {
background: $alert-bg;
color: $color-alert;
display: inline-block;
margin: 0 calc(#{$line-height} / 4);
margin: 0 calc($line-height / 4);
a {
color: $color-alert;
@@ -1132,7 +1132,7 @@ form {
select {
height: $line-height * 2;
margin-right: calc(#{$line-height} / 2);
margin-right: calc($line-height / 2);
}
.final-votes-info {
@@ -1140,10 +1140,10 @@ form {
border: 1px solid $warning-border;
color: $color-warning;
margin-top: $line-height;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
ul li {
margin: calc(#{$line-height} / 2) 0;
margin: calc($line-height / 2) 0;
}
.icon-box {
@@ -1190,9 +1190,9 @@ form {
.notification {
border: 1px solid $border;
display: block;
margin-bottom: calc(#{$line-height} / 4);
margin-bottom: calc($line-height / 4);
margin-left: $line-height;
padding: calc(#{$line-height} / 2) $line-height;
padding: calc($line-height / 2) $line-height;
position: relative;
@include breakpoint(medium) {
@@ -1354,7 +1354,7 @@ table {
td {
line-height: $line-height;
padding: calc(#{$line-height} / 2) calc(#{$line-height} / 4);
padding: calc($line-height / 2) calc($line-height / 4);
}
&:nth-child(odd) {
@@ -1445,7 +1445,7 @@ table {
@include breakpoint(medium) {
.left + .left {
margin-left: calc(#{$line-height} / 2);
margin-left: calc($line-height / 2);
}
}
@@ -1477,7 +1477,7 @@ table {
background: #f6f6f6;
font-weight: bold;
line-height: rem-calc(20);
padding-top: calc(#{$line-height} / 4);
padding-top: calc($line-height / 4);
text-transform: uppercase;
vertical-align: top;
@@ -1509,7 +1509,7 @@ table {
.button + form {
display: inline-block;
margin-left: calc(#{$line-height} / 2);
margin-left: calc($line-height / 2);
}
.verification-list {
@@ -1558,7 +1558,7 @@ table {
color: $color-info;
font-size: rem-calc(24);
margin-left: -27px;
padding: 0 calc(#{$line-height} / 2);
padding: 0 calc($line-height / 2);
position: absolute;
top: -12px;
}
@@ -1589,7 +1589,7 @@ table {
.comment {
line-height: $list-lineheight;
margin: calc(#{$line-height} / 4) 0;
margin: calc($line-height / 4) 0;
position: relative;
p {
@@ -1609,7 +1609,7 @@ table {
img,
svg {
margin-#{$global-right}: calc(#{$line-height} / 2);
margin-#{$global-right}: calc($line-height / 2);
}
.reply {
@@ -1617,8 +1617,8 @@ table {
border-left: 0;
border-right: 0;
font-size: $small-font-size;
margin: calc(#{$line-height} / 4) 0;
padding: calc(#{$line-height} / 4);
margin: calc($line-height / 4) 0;
padding: calc($line-height / 4);
position: relative;
&:empty {
@@ -1631,7 +1631,7 @@ table {
}
.comment-form form {
margin-top: calc(#{$line-height} / 2);
margin-top: calc($line-height / 2);
}
}
@@ -1684,9 +1684,9 @@ table {
}
.comment-user {
margin-top: calc(#{$line-height} / 4);
margin-top: calc($line-height / 4);
overflow: hidden;
padding: calc(#{$line-height} / 4) 0;
padding: calc($line-height / 4) 0;
&.level-1,
&.level-2,
@@ -1697,7 +1697,7 @@ table {
&.is-admin,
&.is-moderator {
background: rgba(70, 219, 145, 0.3);
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
padding: calc($line-height / 4) calc($line-height / 2);
}
&.level-1 {
@@ -1717,7 +1717,7 @@ table {
}
.comment-list {
margin: calc(#{$line-height} / 4) 0;
margin: calc($line-height / 4) 0;
.comment-list {
border-left: 1px dashed $border;
@@ -1838,7 +1838,7 @@ table {
.public-interests {
li {
margin-right: calc(#{$line-height} / 4);
margin-right: calc($line-height / 4);
span {
background: none;
@@ -1851,10 +1851,10 @@ table {
.follow-list {
list-style-type: circle;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
li {
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
margin-left: $line-height;
}
}
@@ -1916,7 +1916,7 @@ table {
}
.card {
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
.card {
border: 0;
@@ -2030,7 +2030,7 @@ table {
background: #fafafa;
margin-bottom: $line-height;
margin-top: rem-calc(-25);
padding: $line-height 0 calc(#{$line-height} / 2);
padding: $line-height 0 calc($line-height / 2);
@include breakpoint(medium) {
padding-top: 0;
@@ -2058,8 +2058,8 @@ table {
background: $body-background;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
display: block;
margin-bottom: calc(#{$line-height} / 4);
padding: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 4);
padding: calc($line-height / 2);
z-index: 1;
&:hover:not(:focus-within) {
@@ -2091,8 +2091,8 @@ table {
background: $highlight-soft;
border: 1px solid $highlight;
display: block;
margin: calc(#{$line-height} / 2) 0;
padding: calc(#{$line-height} / 2);
margin: calc($line-height / 2) 0;
padding: calc($line-height / 2);
position: relative;
a {
@@ -2187,8 +2187,8 @@ table {
&::before {
$button-padding-left: nth($button-padding, 2);
margin-left: calc(#{-$button-padding-left} / 2);
margin-right: calc(#{$button-padding-left} / 2);
margin-left: calc(-1 * $button-padding-left / 2);
margin-right: calc($button-padding-left / 2);
}
}
}
@@ -2219,8 +2219,8 @@ table {
margin-top: rem-calc(-48);
@include breakpoint($global-width) {
margin-left: calc(#{$full-width-margin});
margin-right: calc(#{$full-width-margin});
margin-left: calc($full-width-margin);
margin-right: calc($full-width-margin);
}
}
@@ -2256,7 +2256,7 @@ table {
p,
.sdg-tag-list {
padding: 0 calc(#{$line-height} / 4);
padding: 0 calc($line-height / 4);
}
}
@@ -2273,7 +2273,7 @@ table {
@include brand-border(top, 4px);
display: inline-block;
margin-bottom: 0;
padding: calc(#{$line-height} / 2) 0;
padding: calc($line-height / 2) 0;
}
}
@@ -2295,7 +2295,7 @@ table {
border-bottom: 1px solid $border;
display: block;
font-size: $small-font-size;
margin: $line-height 0 calc(#{$line-height} / 2);
margin: $line-height 0 calc($line-height / 2);
text-align: right;
width: 100%;
}
@@ -2338,7 +2338,7 @@ table {
color: #fff;
font-size: rem-calc(24);
line-height: rem-calc(24);
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
padding: calc($line-height / 4) calc($line-height / 2);
position: absolute;
text-transform: uppercase;
width: 100%;
@@ -2363,7 +2363,7 @@ table {
display: inline-block;
font-size: $small-font-size;
font-weight: bold;
margin-bottom: calc(#{$line-height} / 4);
margin-bottom: calc($line-height / 4);
padding: rem-calc(4) rem-calc(8);
}
}
@@ -2378,7 +2378,7 @@ table {
.date-of-birth {
select {
float: left;
margin-right: calc(#{$line-height} / 4);
margin-right: calc($line-height / 4);
width: 30%;
}
}

View File

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

View File

@@ -1,6 +1,6 @@
.locale {
margin-bottom: calc(#{$line-height} / 4);
margin-top: calc(#{$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: calc(#{$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;

View File

@@ -16,7 +16,7 @@
a {
font-size: rem-calc(24);
margin: 0 calc(#{$line-height} / 2);
margin: 0 calc($line-height / 2);
text-decoration: none;
&:hover {

View File

@@ -27,8 +27,8 @@
a {
color: inherit;
display: inline-block;
padding-bottom: calc(#{$line-height} / 2);
padding-top: calc(#{$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: calc(#{$line-height} / 4);
padding-top: calc($line-height / 4);
@include breakpoint(medium) {
margin-bottom: 0;

View File

@@ -70,7 +70,7 @@
border-top-right-radius: rem-calc(6);
display: inline-block;
margin-bottom: 0;
margin-right: calc(#{$line-height} / 4);
margin-right: calc($line-height / 4);
margin-top: 0;
&:hover:not(.is-active) {
@@ -84,7 +84,7 @@
a {
display: block;
padding: calc(#{$line-height} / 4) calc(#{$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: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
margin-right: $line-height;
padding: calc(#{$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: calc(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);
}
@@ -672,7 +672,7 @@
border-bottom: 1px solid $border;
font-size: $small-font-size;
margin-bottom: rem-calc(16);
padding-bottom: calc(#{$line-height} / 2);
padding-bottom: calc($line-height / 2);
.comment-text {
margin-bottom: rem-calc(8);
@@ -941,7 +941,7 @@
$margin: rem-calc(map-get($grid-column-gutter, "medium"));
margin-right: $margin;
width: calc(75% - #{$margin});
width: calc(75% - $margin);
}
}
}
@@ -955,17 +955,17 @@
padding-top: rem-calc(16);
&:not(:last-child) {
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
}
}
.question-title:not(:only-child) {
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
}
.annotation-title {
margin-bottom: calc(#{$line-height} / 2);
margin-top: calc(#{$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: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
> :first-child {
background-color: rgba(217, 216, 243, 0.2);

View File

@@ -30,7 +30,7 @@ $progress-bar-color: #fea230;
}
.milestone-progress .row {
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
}
}
}
@@ -68,7 +68,7 @@ $progress-bar-color: #fea230;
}
.milestone-content {
padding: calc(#{$line-height} / 6) calc(#{$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: calc(#{$line-height} / 6);
padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
margin-top: calc($line-height / 6);
padding: calc($line-height / 4) calc($line-height / 2);
}

View File

@@ -5,8 +5,8 @@
background-image: linear-gradient(
to right,
#{$color} 0,
#{$color} calc(100% - #{$final-color-width} - 1px),
#{$body-background} calc(100% - #{$final-color-width}),
#{$color} calc(100% - $final-color-width - 1px),
#{$body-background} calc(100% - $final-color-width),
#{$body-background} 100%
);
}
@@ -52,14 +52,14 @@
display: block;
height: 100%;
position: absolute;
right: calc(#{$icon-size-with-padding} - #{$rounding-error});
right: calc($icon-size-with-padding - $rounding-error);
top: 0;
width: $polygon-size;
}
}
&::before {
height: calc(100% + #{$border-width * 2});
height: calc(100% + $border-width * 2);
top: -$border-width;
}
@@ -92,7 +92,7 @@
font-size: rem-calc(44);
&::after {
right: calc(#{$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: calc(#{$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: calc(#{$line-height} / 2);
padding-right: calc($line-height / 2);
text-transform: uppercase;
}
}

View File

@@ -58,11 +58,11 @@
@include breakpoint($global-width) {
@if $adjust-padding and $adjust-margin {
left: calc(#{$full-width-margin} - #{$global-padding});
right: calc(#{$full-width-margin} - #{$global-padding});
left: calc($full-width-margin - $global-padding);
right: calc($full-width-margin - $global-padding);
} @else if $adjust-margin {
left: calc(#{$full-width-margin});
right: calc(#{$full-width-margin});
left: calc($full-width-margin);
right: calc($full-width-margin);
}
}
}

View File

@@ -5,11 +5,11 @@
display: flex;
flex-wrap: wrap;
list-style: none;
margin: -$spacing 0 calc(#{$line-height} / 3) -#{$spacing};
margin-left: calc(-1 * #{$max-spacing});
margin-top: calc(-1 * #{$max-spacing});
width: calc(100% + #{$spacing});
width: calc(100% + #{$max-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);
width: calc(100% + $max-spacing);
> *,
> .tabs-title {
@@ -41,7 +41,7 @@
label,
li {
min-width: $sdg-icon-min-width;
width: calc(100% / 17 - #{$spacing});
width: calc(100% / 17 - $spacing);
&:hover {
cursor: pointer;

View File

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

View File

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

View File

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

View File

@@ -20,7 +20,7 @@
font-size: $circle-icon-size;
left: $notification-icon-size - rem-calc(5);
position: absolute;
top: calc(#{$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);

View File

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

View File

@@ -32,7 +32,7 @@
border-bottom-right-radius: rem-calc(3);
border-top-right-radius: rem-calc(3);
display: block;
height: calc(#{$line-height} / 2);
height: calc($line-height / 2);
}
}
@@ -102,7 +102,7 @@
color: $color-warning;
display: none;
line-height: $line-height;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
text-align: center;
width: 100%;
@@ -134,7 +134,7 @@
li {
@include has-fa-icon(check, solid);
margin: calc(#{$line-height} / 2) 0;
margin: calc($line-height / 2) 0;
&::before {
margin-right: $font-icon-margin * 1.5;
@@ -194,7 +194,7 @@
clear: both;
color: $text-medium;
font-size: $small-font-size;
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
position: relative;
span:not(.label) {
@@ -280,8 +280,8 @@
background: $highlight-soft;
border: 1px solid $highlight;
display: block;
margin: calc(#{$line-height} / 2) 0;
padding: calc(#{$line-height} / 2);
margin: calc($line-height / 2) 0;
padding: calc($line-height / 2);
position: relative;
a {
@@ -339,7 +339,7 @@
.budget-investment-show {
.supports {
padding: calc(#{$line-height} / 2) 0 0;
padding: calc($line-height / 2) 0 0;
}
.share-supported {
@@ -371,7 +371,7 @@
@include full-width-background;
background: $highlight;
margin-bottom: $line-height;
padding-top: calc(#{$line-height} / 4);
padding-top: calc($line-height / 4);
}
}
@@ -380,7 +380,7 @@
@include breakpoint(medium down) {
background: $body-background;
margin-bottom: rem-calc(-1) !important;
padding-top: calc(#{$line-height} / 2);
padding-top: calc($line-height / 2);
}
}
@@ -417,7 +417,7 @@
.panel {
&.with-image {
padding: 0 calc(#{$line-height} / 2) 0 0;
padding: 0 calc($line-height / 2) 0 0;
}
}
@@ -430,7 +430,7 @@
}
.column:last-child:not(:first-child) {
padding-top: calc(#{$line-height} / 2);
padding-top: calc($line-height / 2);
}
img {
@@ -462,7 +462,7 @@
h3 {
font-weight: bold;
margin-top: calc(#{$line-height} / 2);
margin-top: calc($line-height / 2);
a {
color: inherit;
@@ -491,7 +491,7 @@
.budget-investment-show,
.legislation,
.communities-show {
margin: calc(#{$line-height} / 4) 0;
margin: calc($line-height / 4) 0;
.panel {
@extend %panel;
@@ -603,7 +603,7 @@
.votes {
border-top: 1px solid $border;
margin-top: $line-height;
padding: calc(#{$line-height} / 2) 0;
padding: calc($line-height / 2) 0;
position: relative;
@include breakpoint(medium) {
@@ -636,7 +636,7 @@
.proposal-show .votes,
.debate-show .votes {
border: 0;
padding: calc(#{$line-height} / 2) 0;
padding: calc($line-height / 2) 0;
}
.proposal,
@@ -756,7 +756,7 @@
background: #fafafa;
margin-bottom: $line-height;
margin-top: -$line-height;
padding-bottom: calc(#{$line-height} / 2);
padding-bottom: calc($line-height / 2);
padding-top: $line-height;
h1 {
@@ -771,7 +771,7 @@
margin-bottom: 0;
li {
padding: calc(#{$line-height} / 4) 0;
padding: calc($line-height / 4) 0;
padding-left: $line-height;
}
}
@@ -784,7 +784,7 @@
background: #eee;
height: rem-calc(36);
margin-bottom: 0;
padding: calc(#{$line-height} / 4);
padding: calc($line-height / 4);
width: rem-calc(36);
&::before {
@@ -862,7 +862,7 @@
}
.panel h3 {
margin: 0 0 calc(#{$line-height} / 2);
margin: 0 0 calc($line-height / 2);
@include breakpoint(medium) {
margin: 0;
@@ -877,7 +877,7 @@
.featured-debates,
.featured-proposals,
.enquiries-list {
padding: calc(#{$line-height} / 2) 0;
padding: calc($line-height / 2) 0;
@include breakpoint(medium) {
margin-left: 0 !important;
@@ -1014,7 +1014,7 @@
content: "";
display: block;
margin: 0 auto;
padding-top: calc(#{$line-height} / 2);
padding-top: calc($line-height / 2);
width: 20%;
}
}
@@ -1055,7 +1055,7 @@
min-width: rem-calc(240);
&::after {
margin-left: calc(#{$line-height} / 4);
margin-left: calc($line-height / 4);
}
}
}
@@ -1135,7 +1135,7 @@
.amount-available {
display: block;
font-size: $small-font-size;
margin-top: calc(#{$line-height} / 8);
margin-top: calc($line-height / 8);
position: relative;
text-align: right;
white-space: nowrap;
@@ -1148,7 +1148,7 @@
line-height: 0;
position: absolute;
right: -0.5em;
top: calc(#{-$line-height} / 8);
top: calc(-1 * $line-height / 8);
}
span {
@@ -1184,19 +1184,19 @@
.ballot-content {
border: 2px solid #f9f9f9;
border-radius: rem-calc(6);
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
}
.subtitle {
@include brand-border(left, 2px);
margin: calc(#{$line-height} / 2) 0;
padding-left: calc(#{$line-height} / 2);
margin: calc($line-height / 2) 0;
padding-left: calc($line-height / 2);
}
.amount-spent {
background: $success-bg;
font-weight: normal;
padding: calc(#{$line-height} / 2);
padding: calc($line-height / 2);
span {
font-size: rem-calc(24);
@@ -1212,8 +1212,8 @@
.select-district a {
display: inline-block;
margin: calc(#{$line-height} / 4) 0;
padding: calc(#{$line-height} / 4);
margin: calc($line-height / 4) 0;
padding: calc($line-height / 4);
}
.select-district .is-active a {
@@ -1221,7 +1221,7 @@
border-radius: rem-calc(3);
color: $budget;
font-weight: bold;
padding: calc(#{$line-height} / 4);
padding: calc($line-height / 4);
&::after {
content: "\56";
@@ -1251,7 +1251,7 @@
height: auto;
left: 0;
padding: $line-height;
padding-bottom: calc(#{$line-height} / 2);
padding-bottom: calc($line-height / 2);
position: fixed;
top: 0;
width: 100%;
@@ -1407,8 +1407,8 @@
.orbit-bullets button {
background-color: #ccc;
height: calc(#{$line-height} / 2);
width: calc(#{$line-height} / 2);
height: calc($line-height / 2);
width: calc($line-height / 2);
&.is-active {
@include brand-background;
@@ -1465,8 +1465,8 @@
.public .poll,
.poll-question {
border: 1px solid $border;
margin-bottom: calc(#{$line-height} / 2);
padding: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
padding: calc($line-height / 2);
position: relative;
}
@@ -1515,7 +1515,7 @@
content: "\6c";
font-family: "icons" !important;
font-size: rem-calc(12);
padding: calc(#{$line-height} / 4);
padding: calc($line-height / 4);
position: absolute;
right: -6px;
top: -6px;
@@ -1533,7 +1533,7 @@
table-layout: fixed;
caption {
padding: calc(#{$line-height} / 2) 0;
padding: calc($line-height / 2) 0;
text-align: left;
}

View File

@@ -2,7 +2,7 @@
&.with-image {
@include breakpoint(medium) {
padding: 0 calc(#{$line-height} / 2) 0 0;
padding: 0 calc($line-height / 2) 0 0;
}
.image-container img {
@@ -71,7 +71,7 @@
.dates {
color: $text-medium;
font-size: $small-font-size;
margin-bottom: calc(#{$line-height} / 2);
margin-bottom: calc($line-height / 2);
}
h4 {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -7,7 +7,7 @@
width: $icon-width;
&::before {
font-size: calc(#{$icon-width} / 2);
font-size: calc($icon-width / 2);
margin-right: 0;
}

View File

@@ -16,7 +16,7 @@
}
ul {
margin-left: calc(#{$line-height} / 2);
margin-left: calc($line-height / 2);
margin-top: 0;
padding: 0;
}
@@ -37,7 +37,7 @@
&::before {
display: inline-block;
margin-right: calc(#{$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: calc(#{$line-height} / 2);
height: calc($line-height / 2);
}
.progress-meter {

View File

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

View File

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

View File

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