martyna
/
hswro_org
forked from fleg/hswro_org
1
0
Fork 0
Code Pull Requests Activity

Fixed all deprecation warnings with scss-migrator

This commit is contained in:
Peter Gao 2023-07-25 12:55:48 -05:00
parent 3875dd4913
commit a1e4916ba6
6 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_sass/bootstrap/_variables.scss
View File

@ -299,7 +299,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default; $h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default; $h6-font-size: $font-size-base !default;
$headings-margin-bottom: $spacer / 2 !default; $headings-margin-bottom: $spacer * 0.5 !default;
$headings-font-family: null !default; $headings-font-family: null !default;
$headings-font-weight: 500 !default; $headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default; $headings-line-height: 1.2 !default;
@ -495,7 +495,7 @@ $input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default; $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default; $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default; $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * 0.5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default; $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; $input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@ -565,7 +565,7 @@ $custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default; $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
$custom-switch-width: $custom-control-indicator-size * 1.75 !default; $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; $custom-switch-indicator-border-radius: $custom-control-indicator-size * 0.5 !default;
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default; $custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
$custom-select-padding-y: $input-padding-y !default; $custom-select-padding-y: $input-padding-y !default;
@ -710,12 +710,12 @@ $nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default; $nav-pills-link-active-bg: $component-active-bg !default;
$nav-divider-color: $gray-200 !default; $nav-divider-color: $gray-200 !default;
$nav-divider-margin-y: $spacer / 2 !default; $nav-divider-margin-y: $spacer * 0.5 !default;
// Navbar // Navbar
$navbar-padding-y: $spacer / 2 !default; $navbar-padding-y: $spacer * 0.5 !default;
$navbar-padding-x: $spacer !default; $navbar-padding-x: $spacer !default;
$navbar-nav-link-padding-x: .5rem !default; $navbar-nav-link-padding-x: .5rem !default;
@ -724,7 +724,7 @@ $navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
$navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default; $navbar-toggler-padding-x: .75rem !default;
@ -844,7 +844,7 @@ $card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default; $card-img-overlay-padding: 1.25rem !default;
$card-group-margin: $grid-gutter-width / 2 !default; $card-group-margin: $grid-gutter-width * 0.5 !default;
$card-deck-margin: $card-group-margin !default; $card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default; $card-columns-count: 3 !default;

4
_sass/bootstrap/mixins/_grid-framework.scss
View File

@ -8,8 +8,8 @@
%grid-column { %grid-column {
position: relative; position: relative;
width: 100%; width: 100%;
padding-right: $gutter / 2; padding-right: $gutter * 0.5;
padding-left: $gutter / 2; padding-left: $gutter * 0.5;
} }
@each $breakpoint in map-keys($breakpoints) { @each $breakpoint in map-keys($breakpoints) {

24
_sass/bootstrap/mixins/_grid.scss
View File

@ -2,10 +2,12 @@
// //
// Generate semantic grid columns with these mixins. // Generate semantic grid columns with these mixins.
@use "sass:math";
@mixin make-container($gutter: $grid-gutter-width) { @mixin make-container($gutter: $grid-gutter-width) {
width: 100%; width: 100%;
padding-right: $gutter / 2; padding-right: $gutter * 0.5;
padding-left: $gutter / 2; padding-left: $gutter * 0.5;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -13,8 +15,8 @@
@mixin make-row($gutter: $grid-gutter-width) { @mixin make-row($gutter: $grid-gutter-width) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: -$gutter / 2; margin-right: -$gutter * 0.5;
margin-left: -$gutter / 2; margin-left: -$gutter * 0.5;
} }
// For each breakpoint, define the maximum width of the container in a media query // For each breakpoint, define the maximum width of the container in a media query
@ -33,16 +35,16 @@
// always setting `width: 100%;`. This works because we use `flex` values // always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width. // later on to override this initial width.
width: 100%; width: 100%;
padding-right: $gutter / 2; padding-right: $gutter * 0.5;
padding-left: $gutter / 2; padding-left: $gutter * 0.5;
} }
@mixin make-col($size, $columns: $grid-columns) { @mixin make-col($size, $columns: $grid-columns) {
flex: 0 0 percentage($size / $columns); flex: 0 0 percentage(math.div($size, $columns));
// Add a `max-width` to ensure content within each column does not blow out // Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this. // do not appear to require this.
max-width: percentage($size / $columns); max-width: percentage(math.div($size, $columns));
} }
@mixin make-col-auto() { @mixin make-col-auto() {
@ -52,7 +54,7 @@
} }
@mixin make-col-offset($size, $columns: $grid-columns) { @mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns; $num: math.div($size, $columns);
margin-left: if($num == 0, 0, percentage($num)); margin-left: if($num == 0, 0, percentage($num));
} }
@ -63,7 +65,7 @@
// style grid. // style grid.
@mixin row-cols($count) { @mixin row-cols($count) {
> * { > * {
flex: 0 0 100% / $count; flex: 0 0 math.div(100%, $count);
max-width: 100% / $count; max-width: math.div(100%, $count);
} }
} }

24
_sass/bootstrap/vendor/_rfs.scss vendored
View File

@ -9,6 +9,8 @@
// Configuration // Configuration
// Base font size // Base font size
@use "sass:math";
$rfs-base-font-size: 1.25rem !default; $rfs-base-font-size: 1.25rem !default;
$rfs-font-size-unit: rem !default; $rfs-font-size-unit: rem !default;
@ -43,10 +45,10 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
// Remove px-unit from $rfs-base-font-size for calculations // Remove px-unit from $rfs-base-font-size for calculations
@if $rfs-base-font-size-unit == "px" { @if $rfs-base-font-size-unit == "px" {
$rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1); $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
} }
@else if $rfs-base-font-size-unit == "rem" { @else if $rfs-base-font-size-unit == "rem" {
$rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value); $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + math.div(1, $rfs-rem-value));
} }
// Cache $rfs-breakpoint unit to prevent multiple calls // Cache $rfs-breakpoint unit to prevent multiple calls
@ -54,10 +56,10 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations // Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == "px" { @if $rfs-breakpoint-unit-cache == "px" {
$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1); $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
} }
@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" { @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value); $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
} }
// Responsive font-size mixin // Responsive font-size mixin
@ -79,15 +81,15 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove px-unit from $fs for calculations // Remove px-unit from $fs for calculations
@if $fs-unit == "px" { @if $fs-unit == "px" {
$fs: $fs / ($fs * 0 + 1); $fs: math.div($fs, $fs * 0 + 1);
} }
@else if $fs-unit == "rem" { @else if $fs-unit == "rem" {
$fs: $fs / ($fs * 0 + 1 / $rfs-rem-value); $fs: math.div($fs, $fs * 0 + math.div(1, $rfs-rem-value));
} }
// Set default font-size // Set default font-size
@if $rfs-font-size-unit == rem { @if $rfs-font-size-unit == rem {
$rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; $rfs-static: #{math.div($fs, $rfs-rem-value)}rem#{$rfs-suffix};
} }
@else if $rfs-font-size-unit == px { @else if $rfs-font-size-unit == px {
$rfs-static: #{$fs}px#{$rfs-suffix}; $rfs-static: #{$fs}px#{$rfs-suffix};
@ -103,20 +105,20 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
$variable-unit: null; $variable-unit: null;
// Calculate minimum font-size for given font-size // Calculate minimum font-size for given font-size
$fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor; $fs-min: $rfs-base-font-size + math.div($fs - $rfs-base-font-size, $rfs-factor);
// Calculate difference between given font-size and minimum font-size for given font-size // Calculate difference between given font-size and minimum font-size for given font-size
$fs-diff: $fs - $fs-min; $fs-diff: $fs - $fs-min;
// Base font-size formatting // Base font-size formatting
// No need to check if the unit is valid, because we did that before // No need to check if the unit is valid, because we did that before
$min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px); $min-width: if($rfs-font-size-unit == rem, #{math.div($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
// If two-dimensional, use smallest of screen width and height // If two-dimensional, use smallest of screen width and height
$variable-unit: if($rfs-two-dimensional, vmin, vw); $variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint // Calculate the variable width between 0 and $rfs-breakpoint
$variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit}; $variable-width: #{math.div($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Set the calculated font-size. // Set the calculated font-size.
$rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix}; $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
@ -132,7 +134,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// RFS breakpoint formatting // RFS breakpoint formatting
@if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem { @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
$mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}; $mq-value: #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit};
} }
@else if $rfs-breakpoint-unit == px { @else if $rfs-breakpoint-unit == px {
$mq-value: #{$rfs-breakpoint}px; $mq-value: #{$rfs-breakpoint}px;

4
_sass/libraries/hamburgers/_base.scss
View File

@ -1,5 +1,7 @@
// Hamburger // Hamburger
// ================================================== // ==================================================
@use "sass:math";
.hamburger { .hamburger {
padding: $hamburger-padding-y $hamburger-padding-x; padding: $hamburger-padding-y $hamburger-padding-x;
display: inline-block; display: inline-block;
@ -55,7 +57,7 @@
.hamburger-inner { .hamburger-inner {
display: block; display: block;
top: 50%; top: 50%;
margin-top: $hamburger-layer-height / -2; margin-top: math.div($hamburger-layer-height, -2);
&, &,
&::before, &::before,

6
_sass/libraries/hamburgers/types/_slider.scss
View File

@ -1,10 +1,12 @@
@use "sass:math";
@if index($hamburger-types, slider) { @if index($hamburger-types, slider) {
/* /*
* Slider * Slider
*/ */
.hamburger--slider { .hamburger--slider {
.hamburger-inner { .hamburger-inner {
top: $hamburger-layer-height / 2; top: $hamburger-layer-height * 0.5;
&::before { &::before {
top: $hamburger-layer-height + $hamburger-layer-spacing; top: $hamburger-layer-height + $hamburger-layer-spacing;
@ -25,7 +27,7 @@
transform: translate3d(0, $y-offset, 0) rotate(45deg); transform: translate3d(0, $y-offset, 0) rotate(45deg);
&::before { &::before {
transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0); transform: rotate(-45deg) translate3d(math.div($hamburger-layer-width, -7), $hamburger-layer-spacing * -1, 0);
opacity: 0; opacity: 0;
} }