Update scss syntax for division

"Slash as Division" is deprecated and won't be supported in the future: https://sass-lang.com/documentation/breaking-changes/slash-div
mick-schroeder · Jul 1, 2021 · ade997a · ade997a
1 parent 196d75d
commit ade997a
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 24 deletions.
diff --git a/src/scss/components/_bibliography-section.scss b/src/scss/components/_bibliography-section.scss
@@ -29,10 +29,10 @@
 	}
 
 	.empty-title {
-		margin-bottom: $lead-font-size-mobile / 2;
+		margin-bottom: $lead-font-size-mobile * 0.5;
 
 		@media (min-width: $bp-md) {
-			margin-bottom: $lead-font-size / 2;
+			margin-bottom: $lead-font-size * 0.5;
 		}
 	}
 

diff --git a/src/scss/components/_bibliography.scss b/src/scss/components/_bibliography.scss
@@ -8,7 +8,7 @@
 	text-align: left;
 
 	.write & {
-		margin: $space-lg (-$grid-gutter-width / 2);
+		margin: $space-lg (-$grid-gutter-width * 0.5);
 
 		@media (min-width: $bp-md) {
 			margin: $space-lg 0;

diff --git a/src/scss/components/_creators.scss b/src/scss/components/_creators.scss
@@ -3,6 +3,8 @@
 // --------------------------------------------------
 
 // Creators field
+@use "sass:math";
+
 .creators-entry {
 	position: relative;
 
@@ -85,7 +87,7 @@
 				flex-basis:
 					calc(
 						(100% - #{2 * $default-padding-x-touch + $input-border-width + $space-lg})
-						* #{$metadata-list-offset / 100%}
+						* #{math.div($metadata-list-offset, 100%)}
 					); // Align with creators
 			}
 		}

diff --git a/src/scss/components/_editor.scss b/src/scss/components/_editor.scss
@@ -54,11 +54,11 @@
 			padding-left: $space-xs;
 
 			> *:not(:first-child) {
-				margin-left: $space-min / 2;
+				margin-left: $space-min * 0.5;
 			}
 
 			> *:not(:last-child) {
-				margin-right: $space-min / 2;
+				margin-right: $space-min * 0.5;
 			}
 		}
 	}
@@ -159,11 +159,11 @@
 
 			@media (min-width: $bp-md) {
 				> *:not(:first-child) {
-					margin-left: $space-min / 2;
+					margin-left: $space-min * 0.5;
 				}
 
 				> *:not(:last-child) {
-					margin-right: $space-min / 2;
+					margin-right: $space-min * 0.5;
 				}
 			}
 
@@ -194,7 +194,7 @@
 
 				@media (min-width: $bp-md) {
 					flex: 0 0 auto;
-					margin-right: $space-min / 2;
+					margin-right: $space-min * 0.5;
 
 					&:last-child {
 						margin-right: 0;

diff --git a/src/scss/components/_message.scss b/src/scss/components/_message.scss
@@ -8,7 +8,7 @@
 	justify-content: space-between;
 	align-items: center;
 	color: $message-color;
-	padding: $space-xl ($grid-gutter-width / 2);
+	padding: $space-xl ($grid-gutter-width * 0.5);
 	text-align: center;
 	font-size: $message-font-size-mobile;
 	font-weight: 300;
@@ -19,7 +19,7 @@
 		flex-direction: row;
 		font-size: $message-font-size;
 		line-height: $line-height-base + 0.1;
-		padding: ($space-xxl - 11px) ($grid-gutter-width / 2) ($space-xxl - 11px) 92px;
+		padding: ($space-xxl - 11px) ($grid-gutter-width * 0.5) ($space-xxl - 11px) 92px;
 
 		&::before {
 			content: ""; // Center/right justification hack
@@ -52,7 +52,7 @@
 			order: 0;
 			width: $space-xxxl;
 			height: $space-xxxl;
-			margin: (-$space-xl / 2) $space-sm (-$space-xl / 2) 0;
+			margin: (-$space-xl * 0.5) $space-sm (-$space-xl * 0.5) 0;
 		}
 
 		&:focus {

diff --git a/src/scss/components/_multiple-choice-dialog.scss b/src/scss/components/_multiple-choice-dialog.scss
@@ -55,7 +55,7 @@
 		}
 
 		.title-container {
-			margin-right: $space-min + $space-min / 2;
+			margin-right: $space-min + $space-min * 0.5;
 		}
 
 		.description {

diff --git a/src/scss/components/_react-modal.scss b/src/scss/components/_react-modal.scss
@@ -121,11 +121,11 @@
 
 	.btn {
 		&:not(:first-child) {
-			margin-left: $space-sm / 2;
+			margin-left: $space-sm * 0.5;
 		}
 
 		&:not(:last-child) {
-			margin-right: $space-sm / 2;
+			margin-right: $space-sm * 0.5;
 		}
 	}
 }

diff --git a/src/scss/layout/_faq.scss b/src/scss/layout/_faq.scss
@@ -4,7 +4,7 @@
 
 .back-link {
 	position: absolute;
-	left: $grid-gutter-width / 2;
+	left: $grid-gutter-width * 0.5;
 	top: $space-sm;
 
 	@media (max-width: $bp-md - 1px) {

diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
@@ -1,5 +1,5 @@
 footer {
-	padding: (43px - 6px) ($grid-gutter-width / 2) (43px - 5px);
+	padding: (43px - 6px) ($grid-gutter-width * 0.5) (43px - 5px);
 	text-align: center;
 	border-top: 1px solid $shade-2;
 
@@ -22,8 +22,8 @@ footer {
 		&::before {
 			content: "";
 			position: absolute;
-			left: $grid-gutter-width / 2;
-			right: $grid-gutter-width / 2;
+			left: $grid-gutter-width * 0.5;
+			right: $grid-gutter-width * 0.5;
 			top: -1px;
 			height: 1px;
 			background-color: $shade-2;

diff --git a/src/scss/layout/_forms.scss b/src/scss/layout/_forms.scss
@@ -14,10 +14,10 @@
 .form-row {
 	display: flex;
 	flex-wrap: wrap;
-	margin: 0 (-$form-gutter-width / 2);
+	margin: 0 (-$form-gutter-width * 0.5);
 
 	> [class*=col-] {
-		padding: 0 ($form-gutter-width / 2);
+		padding: 0 ($form-gutter-width * 0.5);
 	}
 
 	.col-xs-6 {
@@ -146,6 +146,6 @@ label {
 
 	[type] {
 		font-size: inherit;
-		margin: $space-min ($space-min + $space-min / 2) 0 0;
+		margin: $space-min ($space-min + $space-min * 0.5) 0 0;
 	}
 }
diff --git a/src/scss/layout/_grid.scss b/src/scss/layout/_grid.scss
@@ -5,7 +5,7 @@
 .container {
 	max-width: $container-width;
 	margin: auto;
-	padding: 0 ($grid-gutter-width / 2);
+	padding: 0 ($grid-gutter-width * 0.5);
 
 	@media (min-width: $bp-md) {
 		width: calc(100% - #{$space-xxl});

diff --git a/src/scss/layout/_section-cite.scss b/src/scss/layout/_section-cite.scss
@@ -13,7 +13,7 @@
 
 	.meta-nav {
 		position: absolute;
-		right: $grid-gutter-width / 2;
+		right: $grid-gutter-width * 0.5;
 		top: $space-sm;
 		cursor: pointer;