fix(sass): avoid using / for division

zwliew · zwliew · commit f2562ee0ee00 · 2023-08-10T10:11:28.000+08:00
diff --git a/website/src/styles/layout/site.scss b/website/src/styles/layout/site.scss
@@ -44,7 +44,7 @@ a {
 
   @include media-breakpoint-up(md) {
     > nav {
-      width: calc(#{$side-nav-width-md} + #{($grid-gutter-width / 2)});
+      width: calc(#{$side-nav-width-md} + #{($grid-gutter-width * 0.5)});
     }
 
     .main-content {
diff --git a/website/src/views/AppShell.scss b/website/src/views/AppShell.scss
@@ -34,11 +34,11 @@ $logo-vert-padding: 0.875rem;
 .navRight {
   display: flex;
   align-items: center;
-  padding: $vert-padding $grid-gutter-width/2;
+  padding: $vert-padding $grid-gutter-width*0.5;
 }
 
 .weekText {
-  padding-left: $grid-gutter-width/2;
+  padding-left: $grid-gutter-width*0.5;
   font-size: $font-size-xs;
   line-height: 1.15;
   text-align: right;
@@ -51,7 +51,7 @@ $logo-vert-padding: 0.875rem;
   }
 
   .navRight {
-    padding: $vert-padding $grid-gutter-width/2 $vert-padding 2rem;
+    padding: $vert-padding $grid-gutter-width*0.5 $vert-padding 2rem;
   }
 }
 
diff --git a/website/src/views/components/ColorPicker.scss b/website/src/views/components/ColorPicker.scss
@@ -35,7 +35,7 @@ $arrow-height: 1.5rem;
   // Remove last margin-bottom
   padding: $padding $padding ($padding - $margin-bottom);
   margin-top: $arrow-width;
-  margin-left: -$width/2 + $arrow-width/2 + 0.15rem;
+  margin-left: -$width*0.5 + $arrow-width*0.5 + 0.15rem;
   border-radius: 5px;
   background: $background-color;
   box-shadow: 0 6px 18px rgba(#000, 0.14), 0 1px 2px rgba(#000, 0.24);
@@ -49,7 +49,7 @@ $arrow-height: 1.5rem;
     content: '';
     position: absolute;
     top: -($arrow-height * 0.9);
-    left: $width/2 - $arrow-width;
+    left: $width*0.5 - $arrow-width;
     height: $arrow-height;
     border: $arrow-width solid $background-color;
     border-top-width: 0;
@@ -58,7 +58,7 @@ $arrow-height: 1.5rem;
   }
 
   @include media-breakpoint-down(sm) {
-    left: $width/2 - $arrow-width;
+    left: $width*0.5 - $arrow-width;
 
     &::before {
       left: 0;
diff --git a/website/src/views/components/SearchBox.scss b/website/src/views/components/SearchBox.scss
@@ -73,7 +73,7 @@
   }
 
   .leftAccessory {
-    left: $grid-gutter-width / 2;
+    left: $grid-gutter-width * 0.5;
 
     &.searchIcon {
       width: 1rem;
diff --git a/website/src/views/components/SearchkitSearchBox.scss b/website/src/views/components/SearchkitSearchBox.scss
@@ -14,7 +14,7 @@
   @include media-breakpoint-down(sm) {
     z-index: $module-finder-search-z-index-sm;
     padding: 0 0 $navtab-shadow-height;
-    margin: -1rem (-$grid-gutter-width / 2) 0;
+    margin: -1rem (-$grid-gutter-width * 0.5) 0;
     border-top: 1px solid var(--gray-lighter);
     background: linear-gradient(
       to bottom,
diff --git a/website/src/views/components/filters/styles.scss b/website/src/views/components/filters/styles.scss
@@ -1,7 +1,7 @@
 @import '~styles/utils/modules-entry.scss';
 
 $v-padding: 0.6rem;
-$h-padding: $grid-gutter-width / 2;
+$h-padding: $grid-gutter-width * 0.5;
 
 .heading {
   margin-bottom: 0;
@@ -77,7 +77,7 @@ $h-padding: $grid-gutter-width / 2;
 
   .searchWrapper {
     position: relative;
-    margin-right: ($grid-gutter-width / 2);
+    margin-right: ($grid-gutter-width * 0.5);
 
     // To select both the search glass icon and the chevron
     svg {
@@ -139,12 +139,12 @@ $h-padding: $grid-gutter-width / 2;
     }
 
     .searchWrapper {
-      margin: 0 ($grid-gutter-width / 2);
+      margin: 0 ($grid-gutter-width * 0.5);
     }
 
     select {
       width: calc(100% - #{$grid-gutter-width});
-      margin: 0.5rem ($grid-gutter-width / 2);
+      margin: 0.5rem ($grid-gutter-width * 0.5);
     }
   }
 }
diff --git a/website/src/views/components/map/LocationMap.scss b/website/src/views/components/map/LocationMap.scss
@@ -2,7 +2,7 @@
 
 .location {
   @include media-breakpoint-down(sm) {
-    margin: 0 $grid-gutter-width / 2;
+    margin: 0 $grid-gutter-width * 0.5;
   }
 }
 
diff --git a/website/src/views/layout/Navtabs.scss b/website/src/views/layout/Navtabs.scss
@@ -112,7 +112,7 @@
   composes: hiddenOnMobile;
   opacity: 0.6;
   flex: 0 0 1px;
-  margin: $margin ((100% - $size) / 2) 0;
+  margin: $margin ((100% - $size) * 0.5) 0;
   background: var(--gray-lighter);
 
   @include media-breakpoint-up(xl) {
diff --git a/website/src/views/modules/ModuleFinderSidebar.scss b/website/src/views/modules/ModuleFinderSidebar.scss
@@ -30,7 +30,7 @@
     padding-bottom: 4rem;
 
     .filterHeader {
-      padding: $navtab-height ($grid-gutter-width / 2) 0.6rem;
+      padding: $navtab-height ($grid-gutter-width * 0.5) 0.6rem;
 
       h3 {
         margin-bottom: 0;
diff --git a/website/src/views/settings/ThemeOption.scss b/website/src/views/settings/ThemeOption.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import '~styles/utils/modules-entry';
 
 $theme-selected-bg-color: var(--gray-lighter);
@@ -28,7 +30,7 @@ $theme-option-gap: 0.7rem;
   $number-colors: 8;
 
   .colorItem {
-    $size: 100% / $number-colors;
+    $size: math.div(100%, $number-colors);
 
     display: inline-block;
     width: $size;
diff --git a/website/src/views/timetable/CurrentTimeIndicator.scss b/website/src/views/timetable/CurrentTimeIndicator.scss
@@ -22,8 +22,8 @@ $line-width: 0.1rem;
 
 .circularPart {
   position: absolute;
-  top: -$circle-diameter / 2;
-  left: -$circle-diameter / 2;
+  top: -$circle-diameter * 0.5;
+  left: -$circle-diameter * 0.5;
   width: $circle-diameter;
   height: $circle-diameter;
   border-radius: 50%;
@@ -33,14 +33,14 @@ $line-width: 0.1rem;
 .linePart {
   position: relative;
   top: 0;
-  left: -$line-width / 2;
+  left: -$line-width * 0.5;
   width: $line-width;
   height: 100%;
   background: theme-color();
 }
 
 :global(.verticalMode) .linePart {
-  top: -$line-width / 2;
+  top: -$line-width * 0.5;
   left: 0;
   width: 100%;
   height: $line-width;
diff --git a/website/src/views/timetable/TimetableContent.scss b/website/src/views/timetable/TimetableContent.scss
@@ -14,8 +14,8 @@
 
   @include media-breakpoint-down(sm) {
     // Maximize the space taken by the timetable by overflowing into the grid gutters
-    margin-right: -($grid-gutter-width / 2);
-    margin-left: -($grid-gutter-width / 2);
+    margin-right: -($grid-gutter-width * 0.5);
+    margin-left: -($grid-gutter-width * 0.5);
   }
 }
 
diff --git a/website/src/views/venues/VenueDetails.scss b/website/src/views/venues/VenueDetails.scss
@@ -44,6 +44,6 @@
 
 .location {
   @include media-breakpoint-down(sm) {
-    margin: 0 ($grid-gutter-width / 2);
+    margin: 0 ($grid-gutter-width * 0.5);
   }
 }
diff --git a/website/src/views/venues/VenuesContainer.scss b/website/src/views/venues/VenuesContainer.scss
@@ -1,6 +1,6 @@
 @import '~styles/utils/modules-entry.scss';
 
-$gutter: $grid-gutter-width / 2;
+$gutter: $grid-gutter-width * 0.5;
 $sticky-top: $navbar-height + 1rem;
 $venue-list-width: 16rem;
 

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ a {`
`44`	`44`
`45`	`45`	`@include media-breakpoint-up(md) {`
`46`	`46`	`> nav {`
`47`		`- width: calc(#{$side-nav-width-md} + #{($grid-gutter-width / 2)});`
	`47`	`+ width: calc(#{$side-nav-width-md} + #{($grid-gutter-width * 0.5)});`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.main-content {`
Original file line number	Diff line number	Diff line change
`@@ -34,11 +34,11 @@ $logo-vert-padding: 0.875rem;`
`34`	`34`	`.navRight {`
`35`	`35`	`display: flex;`
`36`	`36`	`align-items: center;`
`37`		`- padding: $vert-padding $grid-gutter-width/2;`
	`37`	`+ padding: $vert-padding $grid-gutter-width*0.5;`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.weekText {`
`41`		`- padding-left: $grid-gutter-width/2;`
	`41`	`+ padding-left: $grid-gutter-width*0.5;`
`42`	`42`	`font-size: $font-size-xs;`
`43`	`43`	`line-height: 1.15;`
`44`	`44`	`text-align: right;`
`@@ -51,7 +51,7 @@ $logo-vert-padding: 0.875rem;`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`.navRight {`
`54`		`- padding: $vert-padding $grid-gutter-width/2 $vert-padding 2rem;`
	`54`	`+ padding: $vert-padding $grid-gutter-width*0.5 $vert-padding 2rem;`
`55`	`55`	`}`
`56`	`56`	`}`
`57`	`57`
Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`.leftAccessory {`
`76`		`- left: $grid-gutter-width / 2;`
	`76`	`+ left: $grid-gutter-width * 0.5;`
`77`	`77`
`78`	`78`	`&.searchIcon {`
`79`	`79`	`width: 1rem;`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@import '~styles/utils/modules-entry.scss';`
`2`	`2`
`3`	`3`	`$v-padding: 0.6rem;`
`4`		`-$h-padding: $grid-gutter-width / 2;`
	`4`	`+$h-padding: $grid-gutter-width * 0.5;`
`5`	`5`
`6`	`6`	`.heading {`
`7`	`7`	`margin-bottom: 0;`
`@@ -77,7 +77,7 @@ $h-padding: $grid-gutter-width / 2;`
`77`	`77`
`78`	`78`	`.searchWrapper {`
`79`	`79`	`position: relative;`
`80`		`- margin-right: ($grid-gutter-width / 2);`
	`80`	`+ margin-right: ($grid-gutter-width * 0.5);`
`81`	`81`
`82`	`82`	`// To select both the search glass icon and the chevron`
`83`	`83`	`svg {`
`@@ -139,12 +139,12 @@ $h-padding: $grid-gutter-width / 2;`
`139`	`139`	`}`
`140`	`140`
`141`	`141`	`.searchWrapper {`
`142`		`- margin: 0 ($grid-gutter-width / 2);`
	`142`	`+ margin: 0 ($grid-gutter-width * 0.5);`
`143`	`143`	`}`
`144`	`144`
`145`	`145`	`select {`
`146`	`146`	`width: calc(100% - #{$grid-gutter-width});`
`147`		`- margin: 0.5rem ($grid-gutter-width / 2);`
	`147`	`+ margin: 0.5rem ($grid-gutter-width * 0.5);`
`148`	`148`	`}`
`149`	`149`	`}`
`150`	`150`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	`.location {`
`4`	`4`	`@include media-breakpoint-down(sm) {`
`5`		`- margin: 0 $grid-gutter-width / 2;`
	`5`	`+ margin: 0 $grid-gutter-width * 0.5;`
`6`	`6`	`}`
`7`	`7`	`}`
`8`	`8`