refactor(docs-infra): replace deprecated Sass `/` division with `math.div()` (#42776)
This commit replaces the deprecated `/` operators used for division in Sass files with the [recommended][1] `math.div()` function to get rid of build warnings ([example][2]). [1]: https://sass-lang.com/documentation/breaking-changes/slash-div [2]: https://circleci.com/gh/angular/angular/1017640 PR Close #42776
This commit is contained in:
parent
0ca196d784
commit
ed57e2415d
|
@ -1,3 +1,4 @@
|
|||
@use 'sass:math';
|
||||
@use '~@angular/cdk' as cdk;
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
|
@ -12,13 +13,13 @@ aio-cookies-popup {
|
|||
position: fixed;
|
||||
margin: 24px;
|
||||
max-width: 430px;
|
||||
padding: $inner-spacing $inner-spacing $inner-spacing / 2;
|
||||
padding: $inner-spacing $inner-spacing math.div($inner-spacing, 2);
|
||||
z-index: cdk.$overlay-container-z-index + 1;
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: $inner-spacing $inner-spacing / -2 0 0;
|
||||
margin: $inner-spacing math.div($inner-spacing, -2) 0 0;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase;
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
@use 'sass:math';
|
||||
@use '../../mixins';
|
||||
|
||||
$tocItemLineHeight: 24;
|
||||
|
@ -9,10 +10,10 @@ $tocMarkerSize: 6;
|
|||
border-radius: 50%;
|
||||
content: "";
|
||||
height: #{$tocMarkerSize}px;
|
||||
left: -#{($tocMarkerSize - $tocMarkerRailSize) / 2}px;
|
||||
left: -#{math.div($tocMarkerSize - $tocMarkerRailSize, 2)}px;
|
||||
position: absolute;
|
||||
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px);
|
||||
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px);
|
||||
top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px - #{math.div($tocMarkerSize, 2)}px);
|
||||
top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem - #{math.div($tocMarkerSize, 2)}px);
|
||||
width: #{$tocMarkerSize}px;
|
||||
}
|
||||
|
||||
|
@ -158,13 +159,13 @@ aio-toc {
|
|||
}
|
||||
|
||||
&:first-child:before {
|
||||
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px);
|
||||
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px);
|
||||
top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px - #{math.div($tocMarkerSize, 2)}px);
|
||||
top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem - #{math.div($tocMarkerSize, 2)}px);
|
||||
}
|
||||
|
||||
&:last-child:before {
|
||||
bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px + #{$tocMarkerSize / 2}px));
|
||||
bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem + #{$tocMarkerSize / 2}px));
|
||||
bottom: calc(100% - (#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px + #{math.div($tocMarkerSize, 2)}px));
|
||||
bottom: calc(100% - (#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem + #{math.div($tocMarkerSize, 2)}px));
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
|
|
|
@ -1,21 +1,22 @@
|
|||
@use 'sass:list';
|
||||
@use 'sass:math';
|
||||
@use 'sass:selector';
|
||||
@use './constants';
|
||||
|
||||
// REM Font Adjustments
|
||||
@mixin font-size($sizeValue) {
|
||||
font-size: ($sizeValue) + px;
|
||||
font-size: ($sizeValue / 10) + rem;
|
||||
font-size: math.div($sizeValue, 10) + rem;
|
||||
}
|
||||
|
||||
@mixin letter-spacing($spacingValue) {
|
||||
letter-spacing: ($spacingValue) + px;
|
||||
letter-spacing: ($spacingValue / 10) + rem;
|
||||
letter-spacing: math.div($spacingValue, 10) + rem;
|
||||
}
|
||||
|
||||
@mixin line-height($heightValue) {
|
||||
line-height: ($heightValue) + px;
|
||||
line-height: ($heightValue / 10) + rem;
|
||||
line-height: math.div($heightValue, 10) + rem;
|
||||
}
|
||||
|
||||
// PLACEHOLDER
|
||||
|
|
Loading…
Reference in New Issue