Commit e6c267bd authored by ancoats's avatar ancoats
Browse files

Fix Sass deprecation warnings

parent e47e206e
@use 'sass:math';
$banner-background-color: #{map-get($colors, 'green-may')};
$banner-background-color-contrast: #{mix(map-get($colors, 'green-may'), map-get($colors, 'black'), 90%)};
$banner-color: #{map-get($colors, 'black')};
......@@ -39,7 +41,7 @@ $banner-color: #{map-get($colors, 'black')};
mask-image: url('../img/logos/logo-circle.svg');
mask-position: 50% 50%;
mask-repeat: no-repeat;
mask-size: auto percentage(2/3);
mask-size: auto percentage(math.div(2, 3));
position: absolute;
top: 0;
width: 100%;
......
@use 'sass:math';
.c-bookend {
@extend %bookend;
@extend %margin-auto;
@extend %width-max-1_2;
@media (max-width: #{(($width-page-max / 5) * 2)}) {
@media (max-width: #{(math.div($width-page-max, 5) * 2)}) {
flex-direction: column;
}
}
......@@ -11,7 +13,7 @@
.c-bookend + .c-bookend {
margin-top: map-get($spacing-units, '2');
@media (max-width: #{(($width-page-max / 5) * 2)}) {
@media (max-width: #{(math.div($width-page-max, 5) * 2)}) {
margin-top: map-get($spacing-units, '3');
}
}
......@@ -45,7 +47,7 @@
font-size: map-get($font-units, 'small');
transform: none;
@media (max-width: #{(($width-page-max / 5) * 2)}) {
@media (max-width: #{(math.div($width-page-max, 5) * 2)}) {
margin-top: map-get($spacing-units, '2');
}
}
......
@use 'sass:math';
.c-card {
display: flex;
flex-direction: column;
......@@ -36,7 +38,7 @@
content: '';
display: block;
height: 0;
padding-bottom: percentage(9/16);
padding-bottom: percentage(math.div(9, 16));
width: 100%;
}
}
@use 'sass:math';
.c-entry-list {
@extend %stack;
......@@ -31,7 +33,7 @@
--heading-font-size: #{map-get($font-units, 'h3')};
align-items: flex-start;
@media (max-width: #{($width-page-max / 2)}) {
@media (max-width: #{math.div($width-page-max, 2)}) {
flex-flow: column nowrap;
}
......
@use 'sass:math';
%icon {
@include size(2em);
display: inline-block;
......@@ -50,6 +52,6 @@
background-color: currentColor;
mask-image: url('../img/logos/logo-circle.svg');
mask-repeat: no-repeat;
mask-size: percentage(2/3);
mask-size: percentage(math.div(2, 3));
}
}
@use 'sass:math';
/*figure*/.c-image-reel {
background-color: map-get($colors, 'black');
display: flex;
......@@ -12,13 +14,13 @@
* 2. Offset the element against the global container.
*/
$width: ((100 / strip-unit($width-container)) * 100%); /* 1 */
$width: (math.div(100, strip-unit($width-container)) * 100%); /* 1 */
margin-left: ((($width - 100%) / 2) * -1); /* 2 */
margin-left: (math.div(($width - 100%), 2) * -1); /* 2 */
width: $width;
.c-image {
flex: 1 0 percentage(3/10);
flex: 1 0 percentage(math.div(3, 10));
min-width: map-get($width-units, '4');
max-width: map-get($width-units, '6');
scroll-snap-align: center;
......
@use 'sass:math';
%panel {
position: relative;
......@@ -6,7 +8,7 @@
* container *plus* its horizontal margins.
*/
$width: ((100 / strip-unit($width-container)) * 100%); /* 1 */
$width: (math.div(100, strip-unit($width-container)) * 100%); /* 1 */
&:before {
background-color: inherit;
......
@use 'sass:math';
/**
* Modifiers.
*/
......@@ -6,7 +8,7 @@
colgroup col {
&:nth-child(1) {
min-width: map-get($spacing-units, '9');
width: percentage(1/4);
width: percentage(math.div(1, 4));
}
&:nth-child(n+3) {
......
@use 'sass:math';
$tile-background-color: #{map-get($colors, 'green-may')};
$tile-background-color-contrast: #{mix(map-get($colors, 'green-may'), map-get($colors, 'black'), 90%)};
$tile-color: #{map-get($colors, 'black')};
......@@ -37,7 +39,7 @@ $tile-color: #{map-get($colors, 'black')};
mask-image: url('../img/logos/logo-circle.svg');
mask-position: 50% 50%;
mask-repeat: no-repeat;
mask-size: auto percentage(2/3);
mask-size: auto percentage(math.div(2, 3));
position: absolute;
top: 0;
width: 100%;
......
@use 'sass:math';
.c-video__viewport {
height: 0;
padding-bottom: percentage(9/16);
padding-bottom: percentage(math.div(9, 16));
overflow: hidden;
position: relative;
width: 100%;
......
@use 'sass:math';
table {
width: 100%;
......@@ -5,7 +7,7 @@ table {
tfoot:before {
content: '';
display: block;
height: ($gutter-width / 2);
height: math.div($gutter-width, 2);
height: calc(var(--gutter-width, #{$gutter-width}) / 2);
width: 100%;
}
......@@ -39,7 +41,7 @@ table {
thead th,
tbody th,
tbody td {
padding-bottom: ($gutter-width / 2);
padding-bottom: math.div($gutter-width, 2);
padding-bottom: calc(var(--gutter-width, #{$gutter-width}) / 2);
}
......@@ -58,7 +60,7 @@ table {
tbody tr + tr th,
tbody tr + tr td,
tfoot td {
padding-top: ($gutter-width / 2);
padding-top: math.div($gutter-width, 2);
padding-top: calc(var(--gutter-width, #{$gutter-width}) / 2);
}
......
@use 'sass:math';
.r-site-header {
@extend %bookend;
@extend %panel;
......@@ -15,7 +17,7 @@
margin-left: calc(var(--gutter-width) * 2);
}
@media (max-width: #{(($width-page-max / 5) * 2)}) {
@media (max-width: #{(math.div($width-page-max, 5) * 2)}) {
flex-direction: column;
.c-button-group {
......
@use 'sass:math';
/**
* Define a list of key/value pairs which can be used to output media query-enclosed
* rulesets via the mixin `media-query` (see tools.mixins.scss).
*/
$media-queries: (
'25%': '(min-width: #{($width-page-max / 4)})',
'50%': '(min-width: #{($width-page-max / 2)})',
'75%': '(min-width: #{(($width-page-max / 4) * 3)})',
'25%': '(min-width: #{math.div($width-page-max, 4)})',
'50%': '(min-width: #{math.div($width-page-max, 2)})',
'75%': '(min-width: #{(math.div($width-page-max, 4) * 3)})',
'landscape': '(orientation: landscape)',
'portrait': '(orientation: portrait)',
......
@use 'sass:math';
%grid,
.grid {
......@@ -7,11 +9,11 @@
* 2. Offset the element against the global container.
*/
$width: ((100 / strip-unit($width-container)) * 100%); /* 1 */
$width: (math.div(100, strip-unit($width-container)) * 100%); /* 1 */
display: flex;
flex-flow: row wrap;
margin-left: ((($width - 100%) / 2) * -1); /* 2 */
margin-left: (math.div(($width - 100%), 2) * -1); /* 2 */
width: $width;
> * {
......
@use 'sass:math';
.template-archive-actions {
.love-and-rage,
.rebel-for-life {
......@@ -26,7 +28,7 @@
* container *plus* its horizontal margins.
*/
$width: ((100 / strip-unit($width-container)) * 100%); /* 1 */
$width: (math.div(100, strip-unit($width-container)) * 100%); /* 1 */
&:after {
background-color: var(--page-header-background-color-contrast);
......
@use 'sass:math';
.c-banner,
.c-tile {
&[data-theme="butterfly-house"] {
......@@ -8,9 +10,9 @@
@include feature-query('mask-image') {
&:before {
background-image: repeating-linear-gradient(to right,
map-get($colors, 'purple') 0 percentage(1/3),
mix(map-get($colors, 'yellow'), map-get($colors, 'lemon'), 25%) percentage(1/3) percentage(2/3),
map-get($colors, 'red') percentage(2/3) 100%
map-get($colors, 'purple') 0 percentage(math.div(1, 3)),
mix(map-get($colors, 'yellow'), map-get($colors, 'lemon'), 25%) percentage(math.div(1, 3)) percentage(math.div(2, 3)),
map-get($colors, 'red') percentage(math.div(2, 3)) 100%
);
background-size: 120% auto;
mask-repeat: repeat-x;
......
......@@ -2,7 +2,7 @@
.c-tile {
&[data-theme="extinction-part-one"] {
--theme-background-color: #{map-get($colors, 'blue-lazuli')};
--theme-background-color-contrast: #{mix(map-get($colors, 'blue-lazuli'), map-get($colors, 'black'), 75%);};
--theme-background-color-contrast: #{mix(map-get($colors, 'blue-lazuli'), map-get($colors, 'black'), 75%)};
--theme-color: #{map-get($colors, 'white')};
@include feature-query('mask-image') {
......
@use 'sass:math';
.c-tile[data-theme="royal-rebellion"] {
--tile-background-color: #{map-get($colors, 'yellow')};
--tile-background-color-contrast: #{mix(map-get($colors, 'yellow'), map-get($colors, 'white'), 75%)};
......@@ -27,9 +29,9 @@
@include feature-query('mask-image') {
background-color: transparent;
background-image: repeating-linear-gradient(to right,
mix(map-get($colors, 'red'), map-get($colors, 'black'), 75%) 0% #{percentage(1/3)},
mix(map-get($colors, 'red'), map-get($colors, 'yellow'), 60%) #{percentage(1/3)} #{percentage(2/3)},
lighten(map-get($colors, 'red'), 5%) #{percentage(2/3)} 100%
mix(map-get($colors, 'red'), map-get($colors, 'black'), 75%) 0% #{percentage(math.div(1, 3))},
mix(map-get($colors, 'red'), map-get($colors, 'yellow'), 60%) #{percentage(math.div(1, 3))} #{percentage(math.div(2, 3))},
lighten(map-get($colors, 'red'), 5%) #{percentage(math.div(2, 3))} 100%
);
background-size: ($spacing-unit * 31.5) auto;
mask-image: url('../img/stencils/stencil-bee-hexagon.png');
......
@use 'sass:math';
/**
* @function modular-scale
*
......@@ -20,7 +22,7 @@
@else if ($increment < 0) {
@for $i from $increment through -1 {
$value: ($value / $ratio);
$value: math.div($value, $ratio);
}
}
......@@ -41,7 +43,7 @@
@return $val;
}
@else if type-of($val) == 'number' and unitless($val) == false {
@return ceil($val / ($val * 0 + 1));
@return ceil(math.div($val, ($val * 0 + 1)));
}
@else {
@error 'The supplied value (#{$val}) is not a unit or integer.';
......
@use 'sass:math';
:root {
@each $alias, $unit in $width-units {
--width-#{$alias}: #{$unit};
......@@ -17,15 +19,15 @@
%width-max-1_2,
.u-max-width-1\/2 {
max-width: ($width-page-max / 2) !important;
max-width: math.div($width-page-max, 2) !important;
}
%width-max-2_3,
.u-max-width-2\/3 {
max-width: (($width-page-max / 3) * 2) !important;
max-width: (math.div($width-page-max, 3) * 2) !important;
}
%width-max-3_4,
.u-max-width-3\/4 {
max-width: (($width-page-max / 4) * 3) !important;
max-width: (math.div($width-page-max, 4) * 3) !important;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment