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.
68 lines
1.0 KiB
SCSS
68 lines
1.0 KiB
SCSS
.admin .budgets-actions {
|
|
> * {
|
|
$gap: $line-height;
|
|
$vertical-gap: $line-height * 0.5;
|
|
@include flex-with-gap($gap);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-top: -$vertical-gap;
|
|
|
|
> * {
|
|
margin-top: $vertical-gap;
|
|
}
|
|
|
|
dt {
|
|
flex-basis: 12em;
|
|
}
|
|
|
|
&:only-child dt {
|
|
flex-basis: auto;
|
|
}
|
|
|
|
dd {
|
|
flex-basis: 20em;
|
|
flex-grow: 1;
|
|
max-width: calc(#{$global-width} * 3 / 4);
|
|
}
|
|
|
|
+ * {
|
|
border-top: $admin-border;
|
|
clip-path: inset(0 0 0 $gap);
|
|
margin-top: $line-height * 1.5;
|
|
padding-top: $line-height * 1.5;
|
|
}
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
|
|
.calculate-winners-link {
|
|
@include hollow-button;
|
|
}
|
|
|
|
.ballots-link {
|
|
@include regular-button;
|
|
}
|
|
|
|
.destroy-link {
|
|
@include regular-button($alert-color);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $color-alert;
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.calculate-winners-link,
|
|
.ballots-link,
|
|
.destroy-link {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|