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/cdk' as cdk;
@use '~@angular/material' as mat; @use '~@angular/material' as mat;
@ -12,13 +13,13 @@ aio-cookies-popup {
position: fixed; position: fixed;
margin: 24px; margin: 24px;
max-width: 430px; 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; z-index: cdk.$overlay-container-z-index + 1;
.actions { .actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin: $inner-spacing $inner-spacing / -2 0 0; margin: $inner-spacing math.div($inner-spacing, -2) 0 0;
.mat-button { .mat-button {
text-transform: uppercase; text-transform: uppercase;

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

@ -1,3 +1,4 @@
@use 'sass:math';
@use '../../mixins'; @use '../../mixins';
$tocItemLineHeight: 24; $tocItemLineHeight: 24;
@ -9,10 +10,10 @@ $tocMarkerSize: 6;
border-radius: 50%; border-radius: 50%;
content: ""; content: "";
height: #{$tocMarkerSize}px; height: #{$tocMarkerSize}px;
left: -#{($tocMarkerSize - $tocMarkerRailSize) / 2}px; left: -#{math.div($tocMarkerSize - $tocMarkerRailSize, 2)}px;
position: absolute; position: absolute;
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px); top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px - #{math.div($tocMarkerSize, 2)}px);
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px); top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem - #{math.div($tocMarkerSize, 2)}px);
width: #{$tocMarkerSize}px; width: #{$tocMarkerSize}px;
} }
@ -158,13 +159,13 @@ aio-toc {
} }
&:first-child:before { &:first-child:before {
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px); top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px - #{math.div($tocMarkerSize, 2)}px);
top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px); top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem - #{math.div($tocMarkerSize, 2)}px);
} }
&:last-child:before { &:last-child:before {
bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px + #{$tocMarkerSize / 2}px)); bottom: calc(100% - (#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px + #{math.div($tocMarkerSize, 2)}px));
bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem + #{$tocMarkerSize / 2}px)); bottom: calc(100% - (#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem + #{math.div($tocMarkerSize, 2)}px));
} }
&:not(.active):hover { &:not(.active):hover {

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

@ -1,21 +1,22 @@
@use 'sass:list'; @use 'sass:list';
@use 'sass:math';
@use 'sass:selector'; @use 'sass:selector';
@use './constants'; @use './constants';
// REM Font Adjustments // REM Font Adjustments
@mixin font-size($sizeValue) { @mixin font-size($sizeValue) {
font-size: ($sizeValue) + px; font-size: ($sizeValue) + px;
font-size: ($sizeValue / 10) + rem; font-size: math.div($sizeValue, 10) + rem;
} }
@mixin letter-spacing($spacingValue) { @mixin letter-spacing($spacingValue) {
letter-spacing: ($spacingValue) + px; letter-spacing: ($spacingValue) + px;
letter-spacing: ($spacingValue / 10) + rem; letter-spacing: math.div($spacingValue, 10) + rem;
} }
@mixin line-height($heightValue) { @mixin line-height($heightValue) {
line-height: ($heightValue) + px; line-height: ($heightValue) + px;
line-height: ($heightValue / 10) + rem; line-height: math.div($heightValue, 10) + rem;
} }
// PLACEHOLDER // PLACEHOLDER