Skip to content

Commit

Permalink
fix(sass): use math.div instead of division since it's deprecated
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaursen committed Aug 13, 2021
1 parent 126fb5a commit d8c3f12
Show file tree
Hide file tree
Showing 7 changed files with 18 additions and 8 deletions.
2 changes: 1 addition & 1 deletion packages/app-bar/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ $rmd-app-bar-keyline: 1rem !default;
/// @require $rmd-button-icon-size
/// @type Number
$rmd-app-bar-nav-margin: $rmd-app-bar-keyline -
(($rmd-button-icon-size - $rmd-icon-size) / 2);
(($rmd-button-icon-size - $rmd-icon-size) * 0.5);

/// The keyline for the `AppBarTitle` to use when used with the `AppBarNav` or
/// the `offset` prop is enabled.
Expand Down
2 changes: 1 addition & 1 deletion packages/form/src/toggle/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ $rmd-switch-container-vertical-padding: 0.5rem !default;
/// enough so that the ball does not overlap the label or other elements.
///
/// @type Number
$rmd-switch-container-horizontal-padding: $rmd-switch-ball-size / 2 !default;
$rmd-switch-container-horizontal-padding: $rmd-switch-ball-size * 0.5 !default;

/// The color to use for the switch's ball when it is toggled on and disabled.
///
Expand Down
4 changes: 3 additions & 1 deletion packages/media/src/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group media
////

@use "sass:math";

@import '~@react-md/theme/dist/mixins';
@import '~@react-md/utils/dist/functions';
@import './variables';
Expand All @@ -25,7 +27,7 @@
/// @param {Number} width - The width to enforce for the responsive media
/// @param {Number} height - The height to enforce for the responsive media
@mixin rmd-media-aspect-ratio($width, $height) {
padding-bottom: percentage($height / $width);
padding-bottom: percentage(math.div($height, $width));
}

/// Creates the styles for a media container that should enforce a specific
Expand Down
4 changes: 3 additions & 1 deletion packages/media/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group media
////

@use "sass:math";

@import '~@react-md/theme/dist/color-palette';

/// The background color for a media overlay.
Expand All @@ -21,7 +23,7 @@ $rmd-media-selectors: (img '>svg' iframe video embed object) !default;
/// enforced.
///
/// @type Number
$rmd-media-default-aspect-ratio: percentage(9 / 16) !default;
$rmd-media-default-aspect-ratio: percentage(math.div(9, 16)) !default;

/// A Map including the default aspect ratios to create for responsive media
/// with a forced aspect ratio. Each key must be a string for a class name
Expand Down
2 changes: 1 addition & 1 deletion packages/progress/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ $rmd-circular-progress-start-offset: $rmd-circular-progress-dasharray !default;
/// The ending dashoffset for the ciruclar progress animation. This will be used
/// for the `50%` value in the animation keyframes by default.
/// @type Number
$rmd-circular-progress-end-offset: $rmd-circular-progress-dasharray / 4 !default;
$rmd-circular-progress-end-offset: $rmd-circular-progress-dasharray * 0.25 !default;

/// The circular progress styles to apply for the rotation transition. Each key
/// in this map will be set immediately at the root of the `keyframes` and then
Expand Down
8 changes: 6 additions & 2 deletions packages/theme/src/_color-a11y.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group theme
////

@use "sass:math";

@import './color-palette';

/// This is the default contrast ratio to use for color accessibility between
Expand Down Expand Up @@ -190,8 +192,10 @@ $rmd-theme-linear-channel-values: (
$back-luminance: rmd-theme-luminance($back) + 0.05;
$front-luminance: rmd-theme-luminance($front) + 0.05;

@return max($back-luminance, $front-luminance) /
min($back-luminance, $front-luminance);
@return math.div(
max($back-luminance, $front-luminance),
min($back-luminance, $front-luminance)
);
}

/// Determines if a provided color is considered light or dark.
Expand Down
4 changes: 3 additions & 1 deletion packages/typography/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
/// @group typography
////

@use "sass:math";

/// Gets the global variable value for a provided typography style name. This
/// assumes that the global variable exists already.
///
Expand Down Expand Up @@ -76,7 +78,7 @@
/// @param {Number} font-size - The font size to use
/// @return {Number} the letter spacing value in em
@function rmd-typography-get-letter-spacing($tracking, $font-size) {
@return $tracking / ($font-size * 16) * 1em;
@return math.div($tracking, $font-size * 16) * 1em;
}

/// The font family to use throughout the entire application.
Expand Down

0 comments on commit d8c3f12

Please sign in to comment.