From 6a558582d552a8f07f1d658465de16874bf6a929 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 6 Jan 2022 13:09:52 +0000
Subject: [PATCH] Fix deprecated sass (#43753)

---
 public/sass/base/_forms.scss                  |  4 ++--
 public/sass/base/_type.scss                   |  2 +-
 .../sass/base/font-awesome/_fixed-width.scss  |  2 +-
 public/sass/base/font-awesome/_larger.scss    |  4 ++--
 public/sass/base/font-awesome/_list.scss      |  4 ++--
 public/sass/base/font-awesome/_variables.scss |  2 +-
 public/sass/components/_dropdown.scss         |  2 +-
 public/sass/components/_gf-form.scss          |  7 +++---
 public/sass/components/_modals.scss           |  2 +-
 .../components/_panel_gettingstarted.scss     |  4 ++--
 public/sass/components/_panel_pluginlist.scss |  4 ++--
 public/sass/components/_tabs.scss             |  2 +-
 public/sass/mixins/_grid-framework.scss       |  4 ++--
 public/sass/mixins/_grid.scss                 | 24 +++++++++----------
 public/sass/mixins/_mixins.scss               |  2 +-
 15 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss
index b9ab130e1fc..0f0cc97aab8 100644
--- a/public/sass/base/_forms.scss
+++ b/public/sass/base/_forms.scss
@@ -202,8 +202,8 @@ input[type='checkbox'].cr1:checked + label {
 .form-control-danger {
   padding-right: $space-xl;
   background-repeat: no-repeat;
-  background-position: center right ($input-height / 4);
-  background-size: ($input-height / 2) ($input-height / 2);
+  background-position: center right calc($input-height / 4);
+  background-size: calc($input-height / 2) calc($input-height / 2);
 }
 
 // Form validation states
diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss
index d26fbcd1c3f..585c82b0d33 100644
--- a/public/sass/base/_type.scss
+++ b/public/sass/base/_type.scss
@@ -90,7 +90,7 @@ dt {
   font-weight: $font-weight-semi-bold;
 }
 dd {
-  margin-left: $line-height-base / 2;
+  margin-left: calc($line-height-base / 2);
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
diff --git a/public/sass/base/font-awesome/_fixed-width.scss b/public/sass/base/font-awesome/_fixed-width.scss
index b221c98133a..7102bbac0ca 100644
--- a/public/sass/base/font-awesome/_fixed-width.scss
+++ b/public/sass/base/font-awesome/_fixed-width.scss
@@ -1,6 +1,6 @@
 // Fixed Width Icons
 // -------------------------
 .#{$fa-css-prefix}-fw {
-  width: (18em / 14);
+  width: calc(18em / 14);
   text-align: center;
 }
diff --git a/public/sass/base/font-awesome/_larger.scss b/public/sass/base/font-awesome/_larger.scss
index 5d7bebcda14..9e47f7720bb 100644
--- a/public/sass/base/font-awesome/_larger.scss
+++ b/public/sass/base/font-awesome/_larger.scss
@@ -3,8 +3,8 @@
 
 /* makes the font 33% larger relative to the icon container */
 .#{$fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
+  font-size: calc(4em / 3);
+  line-height: calc(3em / 4);
   vertical-align: -15%;
 }
 .#{$fa-css-prefix}-2x {
diff --git a/public/sass/base/font-awesome/_list.scss b/public/sass/base/font-awesome/_list.scss
index 9e30bee7447..728bc3fe678 100644
--- a/public/sass/base/font-awesome/_list.scss
+++ b/public/sass/base/font-awesome/_list.scss
@@ -13,9 +13,9 @@
   position: absolute;
   left: -$fa-li-width;
   width: $fa-li-width;
-  top: (2em / 14);
+  top: calc(2em / 14);
   text-align: center;
   &.#{$fa-css-prefix}-lg {
-    left: -$fa-li-width + (4em / 14);
+    left: -$fa-li-width + calc(4em / 14);
   }
 }
diff --git a/public/sass/base/font-awesome/_variables.scss b/public/sass/base/font-awesome/_variables.scss
index 1e91e831e66..63f6a72f61a 100644
--- a/public/sass/base/font-awesome/_variables.scss
+++ b/public/sass/base/font-awesome/_variables.scss
@@ -9,7 +9,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: calc(30em / 14) !default;
 
 $fa-var-500px: '\f26e';
 $fa-var-address-book: '\f2b9';
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index f33e8d1a91c..f3613f6b7da 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -316,7 +316,7 @@
 .dropdown-menu.dropdown-menu--new {
   li a,
   li button {
-    padding: $spacer/2 $spacer;
+    padding: calc($spacer/2) $spacer;
     border-left: 2px solid $side-menu-bg;
     background: $side-menu-bg;
 
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index d2741fb1920..abbb7b10f61 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -1,3 +1,4 @@
+@use "sass:list";
 $input-border: 1px solid $input-border-color;
 
 .gf-form {
@@ -261,7 +262,7 @@ $input-border: 1px solid $input-border-color;
       font-size: 11px;
       background-color: transparent;
       color: $text-color;
-      font: normal normal normal $font-size-sm/1 FontAwesome;
+      font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
       content: '\f0d7';
       pointer-events: none;
     }
@@ -345,7 +346,7 @@ $input-border: 1px solid $input-border-color;
     right: 11px;
     background-color: transparent;
     color: $text-color;
-    font: normal normal normal $font-size-sm/1 FontAwesome;
+    font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
     content: '\f0d7';
     pointer-events: none;
     font-size: 11px;
@@ -391,7 +392,7 @@ $input-border: 1px solid $input-border-color;
     right: $space-sm;
     background-color: transparent;
     color: $input-color;
-    font: normal normal normal $font-size-sm/1 FontAwesome;
+    font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
     content: '\f0d7';
     pointer-events: none;
     font-size: 11px;
diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss
index 9696b2d4a34..0f03cdc9909 100644
--- a/public/sass/components/_modals.scss
+++ b/public/sass/components/_modals.scss
@@ -114,7 +114,7 @@
   .confirm-modal-buttons {
     margin-bottom: $spacer;
     button {
-      margin-right: $spacer/2;
+      margin-right: calc($spacer/2);
     }
   }
 
diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss
index 2d02bc0108b..5f32fa8bd56 100644
--- a/public/sass/components/_panel_gettingstarted.scss
+++ b/public/sass/components/_panel_gettingstarted.scss
@@ -5,9 +5,9 @@ $progress-line-uncompleted: lightOrDark($gray-3, $gray-1);
 
 // Sizing
 $marker-size: 60px !default;
-$marker-size-half: ($marker-size / 2);
+$marker-size-half: calc($marker-size / 2);
 $path-height: 2px !default;
-$path-position: $marker-size-half - ($path-height / 2);
+$path-position: $marker-size-half - calc($path-height / 2);
 
 .progress-tracker-container {
   height: 100%;
diff --git a/public/sass/components/_panel_pluginlist.scss b/public/sass/components/_panel_pluginlist.scss
index c8276848583..68018124222 100644
--- a/public/sass/components/_panel_pluginlist.scss
+++ b/public/sass/components/_panel_pluginlist.scss
@@ -14,7 +14,7 @@
 .pluginlist-icon {
   vertical-align: sub;
   font-size: $font-size-h1;
-  margin-right: $spacer / 2;
+  margin-right: calc($spacer / 2);
 }
 
 .pluginlist-image {
@@ -22,7 +22,7 @@
 }
 
 .pluginlist-title {
-  margin-right: $spacer / 3;
+  margin-right: calc($spacer / 3);
 }
 
 .pluginlist-version {
diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss
index f05bd98e970..0bf6208c321 100644
--- a/public/sass/components/_tabs.scss
+++ b/public/sass/components/_tabs.scss
@@ -12,7 +12,7 @@
 
 .gf-tabs-link {
   padding: $tabs-padding;
-  margin-right: $spacer/2;
+  margin-right: calc($spacer/2);
   position: relative;
   display: block;
   border: solid transparent;
diff --git a/public/sass/mixins/_grid-framework.scss b/public/sass/mixins/_grid-framework.scss
index c14671f6628..092182edead 100644
--- a/public/sass/mixins/_grid-framework.scss
+++ b/public/sass/mixins/_grid-framework.scss
@@ -15,8 +15,8 @@
           flex-grow: 1;
           max-width: 100%;
           min-height: 1px;
-          padding-right: ($grid-gutter-width / 2);
-          padding-left: ($grid-gutter-width / 2);
+          padding-right: calc($grid-gutter-width / 2);
+          padding-left: calc($grid-gutter-width / 2);
         }
       }
 
diff --git a/public/sass/mixins/_grid.scss b/public/sass/mixins/_grid.scss
index abfc28ab61c..97a751b5bfe 100644
--- a/public/sass/mixins/_grid.scss
+++ b/public/sass/mixins/_grid.scss
@@ -5,8 +5,8 @@
 @mixin make-container($gutter: $grid-gutter-width) {
   margin-left: auto;
   margin-right: auto;
-  padding-left: ($gutter / 2);
-  padding-right: ($gutter / 2);
+  padding-left: calc($gutter / 2);
+  padding-right: calc($gutter / 2);
   @if not $enable-flex {
     @include clearfix();
   }
@@ -28,38 +28,38 @@
   } @else {
     @include clearfix();
   }
-  margin-left: ($gutter / -2);
-  margin-right: ($gutter / -2);
+  margin-left: calc($gutter / -2);
+  margin-right: calc($gutter / -2);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
   position: relative;
   min-height: 1px;
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: calc($grid-gutter-width / 2);
+  padding-left: calc($grid-gutter-width / 2);
 
   @if $enable-flex {
-    flex: 0 0 percentage($size / $columns);
+    flex: 0 0 percentage(calc($size / $columns));
     // 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
     // do not appear to require this.
-    max-width: percentage($size / $columns);
+    max-width: percentage(calc($size / $columns));
   } @else {
     float: left;
-    width: percentage($size / $columns);
+    width: percentage(calc($size / $columns));
   }
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  margin-left: percentage($size / $columns);
+  margin-left: percentage(calc($size / $columns));
 }
 
 @mixin make-col-push($size, $columns: $grid-columns) {
-  left: if($size > 0, percentage($size / $columns), auto);
+  left: if($size > 0, percentage(calc($size / $columns)), auto);
 }
 
 @mixin make-col-pull($size, $columns: $grid-columns) {
-  right: if($size > 0, percentage($size / $columns), auto);
+  right: if($size > 0, percentage(calc($size / $columns)), auto);
 }
 
 @mixin make-col-modifier($type, $size, $columns) {
diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss
index 5525b2fa870..7be0a7d7392 100644
--- a/public/sass/mixins/_mixins.scss
+++ b/public/sass/mixins/_mixins.scss
@@ -245,7 +245,7 @@
 
 // Opacity
 @mixin opacity($opacity) {
-  opacity: $opacity / 100;
+  opacity: calc($opacity / 100);
 }
 
 // BACKGROUNDS