1a797f2808
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.
43 lines
872 B
SCSS
43 lines
872 B
SCSS
.admin .budgets-help {
|
|
$padding: $line-height * 0.5;
|
|
$quote-size: 1em;
|
|
$quote-padding: $quote-size * 0.4;
|
|
$quote-width: $quote-size + 2 * $quote-padding;
|
|
|
|
@include has-fa-icon(quote-right, solid, after);
|
|
background: $table-header;
|
|
border-radius: rem-calc(6);
|
|
clear: both;
|
|
color: $admin-text;
|
|
margin-bottom: $line-height;
|
|
padding: $padding;
|
|
padding-right: calc(2 * #{$padding} + #{$quote-width});
|
|
position: relative;
|
|
|
|
@include breakpoint(medium) {
|
|
width: 50%;
|
|
}
|
|
|
|
p {
|
|
font-size: $small-font-size;
|
|
font-style: italic;
|
|
}
|
|
|
|
&::before {
|
|
background: #ccd8e4;
|
|
content: "";
|
|
height: 100%;
|
|
position: absolute;
|
|
right: $padding;
|
|
top: 0;
|
|
width: $quote-width;
|
|
}
|
|
|
|
&::after {
|
|
bottom: calc(#{$padding} / 2);
|
|
color: $white;
|
|
position: absolute;
|
|
right: calc(#{$padding} + #{$quote-padding});
|
|
}
|
|
}
|