honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
George Kalpakas 2021-07-07 14:36:03 +03:00 committed by Andrew Scott
parent 0ca196d784
commit ed57e2415d
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
aio/src/styles/2-modules/cookies-popup/_cookies-popup.scss
View File

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

15
aio/src/styles/2-modules/toc/_toc.scss
View File

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

7
aio/src/styles/_mixins.scss
View File

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