Update package versions

package.json

@@ -27,25 +27,25 @@
   "dependencies": {
     "@liquid-js/sass-inline-svg": "^2.0.0",
     "autoprefixer": "^9.8.6",
-    "grunt": "^1.3.0",
+    "grunt": "^1.4.0",
-    "grunt-contrib-uglify": "^5.0.0",
+    "grunt-contrib-uglify": "^5.0.1",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-postcss": "^0.9.0",
     "grunt-sass": "^3.1.0",
-    "sass": "^1.26.11"
+    "sass": "^1.34.0"
   },
   "devDependencies": {
-    "eslint": "^7.9.0",
+    "eslint": "^7.27.0",
     "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.23.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-standard": "^4.1.0",
-    "husky": "^4.3.0",
+    "husky": "^4.3.8",
-    "lint-staged": "^10.4.0",
+    "lint-staged": "^10.5.4",
-    "stylelint": "^13.7.2",
+    "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.18.0"
+    "stylelint-scss": "^3.19.0"
   },
   "browserslist": [
     "last 2 versions",

src/sass/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 //
 // Variables
 // --------------------------------------------------
@@ -60,7 +62,7 @@ $shade-map: (
 
 @function shade($color, $shade: 500) {
   $mixer: if($shade < 500, $white, $black);
-  $saturation: if($shade < 500, 0, ($shade - 500) / 20);
+  $saturation: if($shade < 500, 0, math.div($shade - 500, 20));
   @return saturate(mix($mixer, $color, map-get($shade-map, $shade)), $saturation);
 }
 
@@ -575,7 +577,7 @@ $logo-image-width:              60px !default;
 $logo-image-height:             40px !default;
 $logo-position-horizontal:      $header-padding-vertical !default;
 $logo-position-vertical:        center !default;
-$logo-space:                    floor($header-padding-vertical / 2) !default;
+$logo-space:                    floor($header-padding-vertical * .5) !default;
 
 $main-menu-bg:                  $gray-100 !default;
 $main-menu-bg-hover:            $gray-100 !default;

src/sass/components/_base.scss

@@ -90,7 +90,7 @@ h4 {
 }
 
 p {
-  margin: 0 0 ($line-height-computed / 2);
+  margin: 0 0 ($line-height-computed * .5);
 }
 
 small {
@@ -113,7 +113,7 @@ table {
 
   form {
     p {
-      margin-bottom: ($line-height-computed / 2);
+      margin-bottom: ($line-height-computed * .5);
 
       &:last-child {
         margin-bottom: 0;
@@ -125,7 +125,7 @@ table {
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: ($line-height-computed * .5);
   padding-left: 1.5em;
 
   ul,
@@ -164,14 +164,14 @@ hr {
   border-top: 1px solid $hr-border;
 
   li & {
-    margin-top: $line-height-computed / 2;
+    margin-top: $line-height-computed * .5;
-    margin-bottom: $line-height-computed / 2;
+    margin-bottom: $line-height-computed * .5;
   }
 }
 
 blockquote {
   margin: 0 0 $line-height-computed;
-  padding: floor($line-height-computed / 4) $padding-large-horizontal;
+  padding: floor($line-height-computed * .25) $padding-large-horizontal;
   border-left: 4px solid $blockquote-border-color;
 
   > :first-child {

src/sass/components/_buttons.scss

@@ -63,7 +63,7 @@ form {
 //
 
 form[action*="repository/diff"] {
-  margin-bottom: $line-height-computed / 2;
+  margin-bottom: $line-height-computed * .5;
 }
 
 
@@ -151,7 +151,7 @@ p.buttons,
 .edit_time_entry,
 .edit_membership {
   input[type="submit"] + a {
-    margin-left: ceil($btn-padding-horizontal-small / 2);
+    margin-left: ceil($btn-padding-horizontal-small * .5);
   }
 }
 
@@ -164,7 +164,7 @@ form {
   button,
   select {
     ~ a {
-      margin-left: ceil($btn-padding-horizontal-small / 2);
+      margin-left: ceil($btn-padding-horizontal-small * .5);
       line-height: $input-height-base;
     }
   }
@@ -227,7 +227,7 @@ p.buttons {
 
     label {
       display: block;
-      margin-bottom: $line-height-computed / 2;
+      margin-bottom: $line-height-computed * .5;
       line-height: initial;
     }
   }

src/sass/components/_content.scss

@@ -107,7 +107,7 @@
 
   ul {
     &:nth-child(n) {
-      margin: 0 0 ($line-height-computed / 2);
+      margin: 0 0 ($line-height-computed * .5);
       padding: 0;
 
       @if $sidebar-position == "left" {
@@ -173,7 +173,7 @@
         > a.icon-only {
           position: absolute;
           top: $sidebar-padding-vertical;
-          right: $sidebar-padding-horizontal / 2;
+          right: $sidebar-padding-horizontal * .5;
           line-height: $line-height-computed;
 
           &::before {
@@ -196,8 +196,8 @@
 
         li {
           > a:not(.icon-only) {
-            padding-right: $sidebar-padding-horizontal / 2;
+            padding-right: $sidebar-padding-horizontal * .5;
-            padding-left: $sidebar-padding-horizontal / 2;
+            padding-left: $sidebar-padding-horizontal * .5;
 
             @if $sidebar-position == "right" {
               margin-left: 0;
@@ -205,7 +205,7 @@
           }
 
           .pages-hierarchy {
-            margin-left: $sidebar-padding-horizontal / 2 + 3px;
+            margin-left: $sidebar-padding-horizontal * .5 + 3px;
           }
         }
       }
@@ -245,7 +245,7 @@
         }
 
         .page-tree__list {
-          margin-left: $sidebar-padding-horizontal / 2 + 3px;
+          margin-left: $sidebar-padding-horizontal * .5 + 3px;
         }
 
         summary {
@@ -263,8 +263,8 @@
 
       li {
         > a:not(.icon-only) {
-          padding-right: $sidebar-padding-horizontal / 2;
+          padding-right: $sidebar-padding-horizontal * .5;
-          padding-left: $sidebar-padding-horizontal / 2;
+          padding-left: $sidebar-padding-horizontal * .5;
 
           @if $sidebar-position == "right" {
             margin-left: 0;
@@ -298,8 +298,8 @@
         &::before {
           content: "";
           position: absolute;
-          top: ($sidebar-padding-vertical + 1px) + ($line-height-computed - 16px) / 2;
+          top: ($sidebar-padding-vertical + 1px) + ($line-height-computed - 16px) * .5;
-          left: $sidebar-padding-horizontal / 2 + 6px;
+          left: $sidebar-padding-horizontal * .5 + 6px;
           width: 16px;
           height: 16px;
           background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));

src/sass/components/_elements.scss

@@ -190,12 +190,12 @@ img {
 }
 
 .splitcontentleft {
-  padding-right: ($padding-side / 2);
+  padding-right: ($padding-side * .5);
   float: left;
 }
 
 .splitcontentright {
-  padding-left: ($padding-side / 2);
+  padding-left: ($padding-side * .5);
   float: right;
 }
 
@@ -275,7 +275,7 @@ img {
 //
 
 p.subtitle {
-  margin-top: ($line-height-computed / -2);
+  margin-top: ($line-height-computed * -.5);
   margin-bottom: $line-height-computed;
   font-style: italic;
 }
@@ -360,13 +360,13 @@ a.close-icon {
 
   #list-left {
     width: 50%;
-    padding-right: ($padding-side / 2);
+    padding-right: ($padding-side * .5);
     float: left;
   }
 
   #list-right {
     width: 50%;
-    padding-left: ($padding-side / 2);
+    padding-left: ($padding-side * .5);
     float: right;
   }
 }
@@ -468,16 +468,16 @@ ul.projects {
     &.root {
       display: flex;
       flex-wrap: wrap;
-      margin-right: -($padding-side / 2);
+      margin-right: -($padding-side * .5);
-      margin-left: -($padding-side / 2);
+      margin-left: -($padding-side * .5);
 
       > li {
         display: block;
         box-sizing: border-box;
         flex: 0 1 auto;
         width: 100%;
-        margin-right: $padding-side / 2;
+        margin-right: $padding-side * .5;
-        margin-left: $padding-side / 2;
+        margin-left: $padding-side * .5;
         padding: $panel-body-padding;
         border: 1px solid $panel-border;
         border-radius: $border-radius-base;
@@ -500,7 +500,7 @@ ul.projects {
   }
 
   li.child {
-    margin-top: $line-height-computed / 2;
+    margin-top: $line-height-computed * .5;
   }
 
   a.project {
@@ -680,7 +680,7 @@ div#version-summary {
   left: 50%;
   box-sizing: border-box;
   width: 200px;
-  margin: (($padding-large-vertical * 2 + 1px * 2 + $line-height-computed) / -2) (200px / -2);
+  margin: (($padding-large-vertical * 2 + 1px * 2 + $line-height-computed) * -.5) (200px * -.5);
   padding: $padding-large-vertical $padding-large-horizontal;
   border: 1px solid $highlight-border;
   border-radius: $border-radius-base;
@@ -699,7 +699,7 @@ div#version-summary {
       box-sizing: border-box;
       width: $line-height-computed;
       height: $line-height-computed;
-      margin-right: $line-height-computed / 2;
+      margin-right: $line-height-computed * .5;
       animation: spin 1s linear infinite;
       border: 3px solid rgba($highlight-text, .3);
       border-radius: 50%;
@@ -765,7 +765,7 @@ div.table-list.boards {
 
 .controller-messages.action-show {
   h2 {
-    margin-bottom: $line-height-computed / 2;
+    margin-bottom: $line-height-computed * .5;
   }
 
   .message {
@@ -871,14 +871,14 @@ div.table-list.boards {
 .news.box {
   p > a:not(:last-child) {
     display: inline-block;
-    margin-bottom: floor($line-height-computed / 4);
+    margin-bottom: floor($line-height-computed * .25);
     font-size: $font-size-h4;
   }
 
   .summary,
   .author {
     display: block;
-    margin-bottom: floor($line-height-computed / 4);
+    margin-bottom: floor($line-height-computed * .25);
 
     + br {
       display: none;
@@ -893,7 +893,7 @@ div.table-list.boards {
 #edit-news + p {
   em {
     display: block;
-    margin-bottom: floor($line-height-computed / 4);
+    margin-bottom: floor($line-height-computed * .25);
 
     + br {
       display: none;
@@ -903,7 +903,7 @@ div.table-list.boards {
 
 .news.box .summary,
 #edit-news + p em {
-  padding: floor($line-height-computed / 4) $padding-base-horizontal;
+  padding: floor($line-height-computed * .25) $padding-base-horizontal;
   border-left: 4px solid $blockquote-border-color;
 }
 
@@ -914,7 +914,7 @@ div.table-list.boards {
 
   header {
     h3 {
-      margin-bottom: $line-height-computed / 2;
+      margin-bottom: $line-height-computed * .5;
 
       > a {
         font-weight: $font-weight-bold;
@@ -942,7 +942,7 @@ div.table-list.boards {
 #comments {
   > h4 {
     margin-top: $line-height-computed;
-    margin-bottom: $line-height-computed / 2;
+    margin-bottom: $line-height-computed * .5;
   }
 }
 

src/sass/components/_forms.scss

@@ -12,7 +12,7 @@ form {
     > input,
     > select {
       margin-right: 5px;
-      margin-bottom: $line-height-computed / 2;
+      margin-bottom: $line-height-computed * .5;
     }
   }
 
@@ -228,7 +228,7 @@ select:-moz-focusring {
 fieldset {
   min-width: 0;
   margin: 0;
-  padding: ($line-height-computed / 2) 0;
+  padding: ($line-height-computed * .5) 0;
   border: 0 none;
   border-top: 1px solid $legend-border-color;
 
@@ -297,7 +297,7 @@ em.info {
 
   p {
     @extend %clearfix;
-    margin: 0 0 ($line-height-computed / 2);
+    margin: 0 0 ($line-height-computed * .5);
     padding-left: $label-width + $label-space;
     clear: left;
     line-height: $input-height-base;
@@ -435,7 +435,7 @@ label[for="issue_description"] + a {
 //
 
 label[for="closed"] {
-  margin-bottom: $line-height-computed / 2;
+  margin-bottom: $line-height-computed * .5;
 }
 
 
@@ -481,7 +481,7 @@ label[for="closed"] {
 //
 
 .jstEditor {
-  margin-bottom: $line-height-computed / 2;
+  margin-bottom: $line-height-computed * .5;
 }
 
 //== User form
@@ -505,13 +505,13 @@ label[for="closed"] {
 .attachments_fields {
   > span {
     display: block;
-    margin-bottom: $line-height-computed / 4;
+    margin-bottom: $line-height-computed * .25;
   }
 
   input {
     width: 21.5em;
     margin-right: .5em;
-    margin-bottom: $line-height-computed / 4;
+    margin-bottom: $line-height-computed * .25;
 
     &.filename {
       padding-left: $input-padding-horizontal + 16px;
@@ -621,7 +621,7 @@ label[for="closed"] {
 #watchers_inputs {
   display: block;
   max-height: $check-list-max-height;
-  margin-bottom: $line-height-computed / 2;
+  margin-bottom: $line-height-computed * .5;
   overflow: auto;
 
   label {
@@ -757,7 +757,7 @@ fieldset#filters {
 .query_sort_criteria_count {
   display: inline-block;
   min-width: 1em;
-  margin-bottom: $line-height-computed / 4;
+  margin-bottom: $line-height-computed * .25;
   line-height: $input-height-base;
 }
 

src/sass/components/_issue.scss

@@ -27,7 +27,7 @@
           width: $issue-gravatar-size;
           height: $issue-gravatar-size;
           margin-right: 10px;
-          margin-bottom: $line-height-computed / 2;
+          margin-bottom: $line-height-computed * .5;
           float: left;
 
           &:nth-child(2) {
@@ -47,7 +47,7 @@
         width: $issue-gravatar-size;
         height: $issue-gravatar-size;
         margin-right: 10px;
-        margin-bottom: $line-height-computed / 2;
+        margin-bottom: $line-height-computed * .5;
         float: left;
       }
 
@@ -373,7 +373,7 @@ div.thumbnails {
   }
 
   .issues {
-    margin: ($line-height-computed / 2) 0 0;
+    margin: ($line-height-computed * .5) 0 0;
 
     tr {
       background-color: transparent;
@@ -406,7 +406,7 @@ div.thumbnails {
   display: none;
 
   dt {
-    margin: 0 0 ($line-height-computed / 4);
+    margin: 0 0 ($line-height-computed * .25);
   }
 
   dd {
@@ -671,7 +671,7 @@ div.thumbnails {
 
     > label {
       display: inline-block;
-      margin-bottom: $line-height-computed / 2;
+      margin-bottom: $line-height-computed * .5;
       line-height: $line-height-base;
     }
 
@@ -757,7 +757,7 @@ span.private {
   }
 
   div.changeset {
-    margin-top: $line-height-computed / 2 + 2px * 2;
+    margin-top: $line-height-computed * .5 + 2px * 2;
     padding: 0;
     overflow: hidden;
     border: 1px solid $bubble-border;

src/sass/components/_list.scss

@@ -252,7 +252,7 @@ tr.issue {
 
     > span {
       display: block;
-      margin-bottom: $line-height-computed / 4;
+      margin-bottom: $line-height-computed * .25;
       padding: $table-cell-padding;
       font-weight: $font-weight-bold;
     }
@@ -323,7 +323,7 @@ td.last_updated_by {
 }
 
 .sample-data {
-  margin: $line-height-computed / 2;
+  margin: $line-height-computed * .5;
   margin-bottom: $line-height-computed;
   border: 1px solid $table-border-color;
 
@@ -494,7 +494,7 @@ tr.entry {
         right: 5px;
         bottom: 0;
         left: 5px;
-        height: calc(50% - 2px / 2);
+        height: calc(50% - 2px * .5);
         transform: rotate(-4deg);
         transition: border-color $transition-time;
         border-top: 2px solid rgba($tracker-default-text, .95);

src/sass/components/_plugins.scss

@@ -6,7 +6,7 @@
 #sidebar .sidebar-additionals {
   ul,
   ol {
-    margin: 0 0 ($line-height-computed / 2);
+    margin: 0 0 ($line-height-computed * .5);
     padding-left: 1.5em;
 
     ul,
@@ -174,7 +174,7 @@
     p,
     ul,
     ol {
-      margin-bottom: $line-height-computed / 2;
+      margin-bottom: $line-height-computed * .5;
 
       &:last-child {
         margin-bottom: 0;
@@ -207,7 +207,7 @@
   > .heart-link-with-count {
     display: block;
     position: relative;
-    margin: -($line-height-computed / 2 + 1px) ($bubble-padding-horizontal - $padding-small-vertical) 0;
+    margin: -($line-height-computed * .5 + 1px) ($bubble-padding-horizontal - $padding-small-vertical) 0;
     float: right;
     border: 0;
     background-color: $body-bg;
@@ -252,7 +252,7 @@
     > a:first-child {
       margin-right: 0;
       margin-left: 4px;
-      padding-right: floor($btn-padding-horizontal-small / 2);
+      padding-right: floor($btn-padding-horizontal-small * .5);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
 
@@ -323,7 +323,7 @@ h2 {
   }
 
   .live_search {
-    margin-left: $padding-side / 2;
+    margin-left: $padding-side * .5;
   }
 
   .tags {
@@ -596,7 +596,7 @@ div.add-note {
           position: absolute;
           top: 50%;
           left: 8px;
-          margin: ($fa-font-size-base / -2) 0 0;
+          margin: ($fa-font-size-base * -.5) 0 0;
         }
       }
     }
@@ -755,8 +755,8 @@ span.tag-label-color {
     margin: 0;
 
     form > input {
-      width: $quick-search-width / 2;
+      width: $quick-search-width * .5;
-      min-width: $quick-search-width / 2;
+      min-width: $quick-search-width * .5;
     }
 
     a {

src/sass/components/_progress.scss

@@ -30,13 +30,13 @@ table.progress {
     border: 0 none;
 
     &:first-child {
-      border-top-left-radius: $progress-height / 2;
+      border-top-left-radius: $progress-height * .5;
-      border-bottom-left-radius: $progress-height / 2;
+      border-bottom-left-radius: $progress-height * .5;
     }
 
     &:last-child {
-      border-top-right-radius: $progress-height / 2;
+      border-top-right-radius: $progress-height * .5;
-      border-bottom-right-radius: $progress-height / 2;
+      border-bottom-right-radius: $progress-height * .5;
     }
 
     &.done {

src/sass/components/_responsive.scss

@@ -116,7 +116,7 @@ body {
 
       &__search {
         height: $responsive-header-height;
-        padding: ($padding-side / 2);
+        padding: ($padding-side * .5);
         line-height: normal;
 
         input[type="text"] {
@@ -249,13 +249,13 @@ body {
 
       #watchers {
         .contextual {
-          padding-top: $line-height-computed / 2;
+          padding-top: $line-height-computed * .5;
-          padding-bottom: $line-height-computed / 2;
+          padding-bottom: $line-height-computed * .5;
         }
 
         .watchers {
           li {
-            margin: ($line-height-computed / 2) 0 0;
+            margin: ($line-height-computed * .5) 0 0;
             padding: 0;
 
             img.gravatar {
@@ -451,7 +451,7 @@ body {
     .query-columns {
       span {
         display: block;
-        margin-bottom: $line-height-computed / 2;
+        margin-bottom: $line-height-computed * .5;
       }
 
       .buttons {

src/sass/components/_simple-list.scss

@@ -105,7 +105,7 @@
   input,
   select {
     margin-right: 5px;
-    margin-bottom: $line-height-computed / 2;
+    margin-bottom: $line-height-computed * .5;
   }
 
   label {

src/sass/components/_tabs.scss

@@ -84,7 +84,7 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
       }
 
       &.disabled {
-        opacity: $icon-opacity / 2;
+        opacity: $icon-opacity * .5;
       }
     }
 

src/sass/components/_top.scss

@@ -159,7 +159,7 @@
 
 #quick-search {
   #header & {
-    margin-top: floor(($header-title-line-height + $header-padding-vertical * 2 - $input-height-base) / 2) - 1px;
+    margin-top: floor(($header-title-line-height + $header-padding-vertical * 2 - $input-height-base) * .5) - 1px;
     margin-right: $header-padding-horizontal;
     float: right;
     color: $header-text;
@@ -203,7 +203,7 @@
     .drdn-trigger {
       z-index: 1003;
       height: auto;
-      padding-bottom: $header-padding-horizontal / 2;
+      padding-bottom: $header-padding-horizontal * .5;
       border-color: $quick-search-dropdown-bg;
       background-color: $quick-search-dropdown-bg;
 
@@ -223,7 +223,7 @@
       &::after {
         content: $fa-var-caret-down;
         position: absolute;
-        top: ($font-size-base / 2);
+        top: ($font-size-base * .5);
         right: $input-padding-horizontal;
       }
     }
@@ -233,7 +233,7 @@
       background: $quick-search-dropdown-bg;
 
       > .quick-search {
-        padding: $header-padding-horizontal / 2;
+        padding: $header-padding-horizontal * .5;
 
         > input {
           width: 100%;

src/sass/components/_wiki.scss

@@ -344,7 +344,7 @@ p.footnote {
     display: block;
     width: 300px;
     margin-top: $line-height-computed;
-    padding-top: $line-height-computed / 2;
+    padding-top: $line-height-computed * .5;
     border-top: 1px solid $gray-400;
   }
 
@@ -408,7 +408,7 @@ p.footnote {
     display: inline-block;
     padding: $padding-base-vertical $padding-base-horizontal;
     border: 1px solid $btn-default-border;
-    border-radius: ceil($font-size-base + ($padding-base-vertical + 1px) * 2) / 2;
+    border-radius: ceil($font-size-base + ($padding-base-vertical + 1px) * 2) * .5;
     background-color: $body-bg;
     line-height: 1;
     white-space: nowrap;

src/sass/lib/font-awesome/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Variables
 // --------------------------
 
@@ -8,7 +10,7 @@ $fa-css-prefix:                 fa !default;
 $fa-version:                    "4.7.0" !default;
 $fa-border-color:               #eee !default;
 $fa-inverse:                    #fff !default;
-$fa-li-width:                   (30em / 14) !default;
+$fa-li-width:                   math.div(30em, 14) !default;
 
 $fa-var-500px:                  "\f26e";
 $fa-var-address-book:           "\f2b9";

src/sass/plugins/redmine_backlogs/global.scss

@@ -256,8 +256,8 @@ ul.ui-sortable {
 .ui-tooltip {
   .ui-tooltip-content {
     hr {
-      margin-top: $line-height-computed / 2;
+      margin-top: $line-height-computed * .5;
-      margin-bottom: $line-height-computed / 2;
+      margin-bottom: $line-height-computed * .5;
       border: 0;
       border-top: 1px solid $hr-border;
     }

src/sass/plugins/redmine_backlogs/master_backlog.scss

@@ -51,17 +51,17 @@ $story-sp-input-width:          50px;
 //
 
 #backlogs_container {
-  padding: ($padding-side / 2) ($padding-side / 4);
+  padding: ($padding-side * .5) ($padding-side * .25);
 
   .backlogs-panel-inner {
-    padding: 0 ($padding-side / 4);
+    padding: 0 ($padding-side * .25);
   }
 
   @media screen and (min-width: $screen-md-min) {
-    padding: $padding-side ($padding-side / 2);
+    padding: $padding-side ($padding-side * .5);
 
     .backlogs-panel-inner {
-      padding: 0 ($padding-side / 2);
+      padding: 0 ($padding-side * .5);
     }
   }
 
@@ -158,7 +158,7 @@ $story-sp-input-width:          50px;
     @include nice-shadow(1);
     display: block;
     position: relative;
-    margin: 0 0 ($padding-side / 2);
+    margin: 0 0 ($padding-side * .5);
     border-radius: $border-radius-large $border-radius-large 0 0;
     background-color: $gray-100;
 
@@ -243,7 +243,7 @@ $story-sp-input-width:          50px;
     }
 
     .editing {
-      $editor-padding: (($header-line-height - $input-height-base) / 2);
+      $editor-padding: (($header-line-height - $input-height-base) * .5);
 
       .editors {
         display: block;
@@ -823,7 +823,7 @@ $story-sp-input-width:          50px;
 //
 
 #show_completed_sprints {
-  margin-left: $padding-side / 2;
+  margin-left: $padding-side * .5;
   color: $gray-950;
   cursor: pointer;
 }