Chore: Theme consistency, rems => pixels (#16145)

* replaced rem with pixels or variables

* replaced rems with pixels or variables

* repalced rems with pixels and variables

public/sass/components/_gf-form.scss

@@ -415,9 +415,9 @@ select.gf-form-input ~ .gf-form-help-icon {
 
 .cta-form {
   position: relative;
-  padding: 1.5rem;
+  padding: $space-lg;
   background-color: $empty-list-cta-bg;
-  margin-bottom: 2rem;
+  margin-bottom: $space-lg;
   border-top: 3px solid $green-base;
 }
 

public/sass/components/_json_explorer.scss

@@ -9,13 +9,13 @@
   }
 
   .json-formatter-row {
-    margin-left: 1rem;
+    margin-left: $space-md;
   }
 
   .json-formatter-children {
     &.json-formatter-empty {
       opacity: 0.5;
-      margin-left: 1rem;
+      margin-left: $space-md;
 
       &::after {
         display: none;
@@ -66,7 +66,7 @@
   .json-formatter-key {
     color: $json-explorer-key-color;
     cursor: pointer;
-    padding-right: 0.2rem;
+    padding-right: $space-xxs;
     margin-right: 4px;
   }
 
@@ -79,12 +79,12 @@
   }
 
   .json-formatter-toggler {
-    line-height: 1.2rem;
-    font-size: 0.7rem;
+    line-height: 16px;
+    font-size: $font-size-xs;
     vertical-align: middle;
     opacity: $json-explorer-toggler-opacity;
     cursor: pointer;
-    padding-right: 0.2rem;
+    padding-right: $space-xxs;
 
     &::after {
       display: inline-block;

public/sass/components/_jsontree.scss

@@ -35,7 +35,7 @@ json-tree {
   }
 
   li {
-    line-height: 1.3rem;
+    line-height: 18px;
   }
 
   .json-tree-key {

public/sass/components/_panel_graph.scss

@@ -263,7 +263,7 @@
     text-align: center;
     position: relative;
     top: -3px;
-    padding: 0.2rem;
+    padding: $space-xxs;
     font-weight: bold;
     color: $text-color;
   }
@@ -279,7 +279,7 @@
 
   .graph-tooltip-series-name {
     display: table-cell;
-    padding: 0.15rem;
+    padding: $space-xxs;
     max-width: 650px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -329,7 +329,7 @@
   }
 
   .graph-annotation__body {
-    padding: 0.65rem;
+    padding: $space-sm;
   }
 
   .graph-annotation__user {
@@ -397,21 +397,23 @@
       top: 0px;
       float: left;
       border-right: 1px solid $btn-divider-left;
-      padding: 0.5rem 0.3rem 0.4rem 0.4rem;
+      padding: 6px 4px 4px 6px;
     }
   }
 
   .alert-handle-value {
     border-left: 1px solid $btn-divider-right;
-    padding: 0.5rem;
-    line-height: 2rem;
+    padding: $space-xs $space-sm;
+    padding: 7px;
+    line-height: 24px;
+    height: 24px;
 
     .alert-handle-grip {
       background: url($btn-drag-image) no-repeat 50% 50%;
       background-size: 8px;
       float: right;
-      width: 1rem;
-      height: 2rem;
+      width: 16px;
+      height: 24px;
       margin-right: 2px;
     }
   }

public/sass/components/_panel_piechart.scss

@@ -25,7 +25,7 @@
     .piechart-tooltip-time {
       text-align: center;
       position: relative;
-      padding: 0.2rem;
+      padding: $space-xxs;
       font-weight: bold;
       color: #d8d9da;
 

public/sass/components/_row.scss

@@ -37,14 +37,14 @@
 
 .dashboard-row__title {
   flex-grow: 0;
-  font-size: 1.15rem;
+  font-size: $font-size-h5;
   font-weight: $font-weight-semi-bold;
   color: $text-color;
 
   .fa {
     color: $text-muted;
     font-size: $font-size-xs;
-    padding: 0 0.5rem;
+    padding: 0 $space-sm;
   }
 }
 
@@ -75,7 +75,7 @@
 
 .dashboard-row__drag {
   cursor: move;
-  width: 1rem;
+  width: 16px;
   height: 100%;
   background: url('../img/grab_dark.svg') no-repeat 50% 50%;
   background-size: 8px;

public/sass/components/_search.scss

@@ -28,8 +28,7 @@
 
   & > input {
     max-width: 653px;
-    //padding: 0.5rem 1.5rem 0.5rem 0;
-    padding: 1rem 1rem 0.75rem 1rem;
+    padding: $space-md $space-md $space-sm $space-md;
     height: 51px;
     box-sizing: border-box;
     outline: none;
@@ -45,7 +44,7 @@
 
 .search-field-icon {
   font-size: $font-size-lg;
-  padding: 1rem 1rem 0.75rem 1.5rem;
+  padding: $space-md $space-md $space-sm $space-md;
 }
 
 .search-dropdown {
@@ -112,7 +111,7 @@
   padding: $spacer;
   position: relative;
   flex-grow: 10;
-  margin-bottom: 1rem;
+  margin-bottom: $space-md;
 
   // Fix for search scroller in mobile view
   height: unset;
@@ -274,7 +273,7 @@
 
   .search-dropdown__col_2 {
     display: flex;
-    margin-bottom: 1rem;
+    margin-bottom: $space-md;
   }
 }
 

public/sass/components/_sidemenu.scss

@@ -34,7 +34,7 @@
 }
 
 .sidemenu__top {
-  padding-top: 3rem;
+  padding-top: 40px;
   flex-grow: 1;
 }
 
@@ -161,7 +161,7 @@
 }
 
 .sidemenu-subtitle {
-  padding: 0.5rem 1rem 0.5rem;
+  padding: $space-sm $space-md $space-sm;
   font-size: $font-size-sm;
   color: $text-color-weak;
   border-bottom: 1px solid $dropdownDividerBottom;
@@ -186,7 +186,7 @@ li.sidemenu-org-switcher {
 
 .sidemenu-org-switcher__switch {
   font-size: $font-size-sm;
-  padding-left: 1.5rem;
+  padding-left: $space-lg;
   display: flex;
   align-items: center;
   > i.fa.fa-random {
@@ -197,7 +197,7 @@ li.sidemenu-org-switcher {
 
 .sidemenu__logo {
   display: block;
-  padding: 0.4rem 1rem 0.4rem 0.65rem;
+  padding: 6px 14px 6px 9px;
   min-height: $navbarHeight;
   position: relative;
   height: $navbarHeight - 1px;
@@ -263,7 +263,7 @@ li.sidemenu-org-switcher {
     }
 
     .sidemenu__top {
-      padding-top: 0rem;
+      padding-top: 0;
     }
 
     .side-menu-header {

public/sass/components/_tabbed_view.scss

@@ -19,16 +19,10 @@
 
 .tabbed-view-title {
   float: left;
-  padding-top: 0.5rem;
+  padding-top: $space-sm;
   margin: 0 $spacer * 3 0 0;
 }
 
-.tabbed-view-panel-title {
-  float: left;
-  padding-top: 9px;
-  margin: 0 2rem 0 0;
-}
-
 .tabbed-view-close-btn {
   float: right;
   margin: 0;
@@ -58,5 +52,5 @@
 
 .section-heading {
   font-size: $font-size-md;
-  margin-bottom: 0.6rem;
+  margin-bottom: $space-sm;
 }

public/sass/layout/_lists.scss

@@ -4,7 +4,7 @@
   list-style: none;
 
   > li {
-    margin-bottom: 0.3125rem;
+    margin-bottom: $space-xs;
 
     &:last-child {
       margin-bottom: 0;