Refactor: Theme & Removed the last rems (#16245)

* repalced rems with pixels and variables

* replaced rems with pixels and variables

* removed last rems by deleting unused classes or replacing with pixels and variables

* restored edit-sidemenu etc with comment

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -195,7 +195,7 @@ $input-bg-disabled: $dark-6;
 
 
 $input-color: $gray-4;
 $input-color: $gray-4;
 $input-border-color: $dark-6;
 $input-border-color: $dark-6;
-$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
+$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
 $input-border-focus: $dark-6 !default;
 $input-border-focus: $dark-6 !default;
 $input-box-shadow-focus: $blue-light !default;
 $input-box-shadow-focus: $blue-light !default;
 $input-color-placeholder: $gray-1 !default;
 $input-color-placeholder: $gray-1 !default;

public/sass/_variables.dark.generated.scss

@@ -198,7 +198,7 @@ $input-bg-disabled: $dark-6;
 
 
 $input-color: $gray-4;
 $input-color: $gray-4;
 $input-border-color: $dark-6;
 $input-border-color: $dark-6;
-$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
+$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
 $input-border-focus: $dark-6 !default;
 $input-border-focus: $dark-6 !default;
 $input-box-shadow-focus: $blue-light !default;
 $input-box-shadow-focus: $blue-light !default;
 $input-color-placeholder: $gray-1 !default;
 $input-color-placeholder: $gray-1 !default;

public/sass/components/_footer.scss

@@ -4,7 +4,7 @@
 
 
 .footer {
 .footer {
   color: $footer-link-color;
   color: $footer-link-color;
-  padding: 1rem 0 1rem 0;
+  padding: $space-md 0 $space-md 0;
   font-size: $font-size-sm;
   font-size: $font-size-sm;
   position: relative;
   position: relative;
   width: 98%; /* was causing horiz scrollbars - need to examine */
   width: 98%; /* was causing horiz scrollbars - need to examine */
@@ -51,14 +51,14 @@
   .footer {
   .footer {
     bottom: $spacer;
     bottom: $spacer;
     position: absolute;
     position: absolute;
-    padding: 1rem 0 1rem 0;
+    padding: $space-md 0 $space-md 0;
   }
   }
 }
 }
 
 
 @include media-breakpoint-up(sm) {
 @include media-breakpoint-up(sm) {
   .login-page {
   .login-page {
     .footer {
     .footer {
-      padding: 5rem 0 1rem 0;
+      padding: 70px 0 $space-md 0;
     }
     }
   }
   }
 }
 }

public/sass/components/_navs.scss

@@ -52,20 +52,6 @@
   margin-bottom: -1px;
   margin-bottom: -1px;
 }
 }
 
 
-// Actual tabs (as links)
-.nav-tabs > li > a {
-  padding: 0.4rem 1rem 0.35rem 1rem;
-  margin-right: $spacer/2;
-  line-height: $line-height-base;
-  border: 1px solid transparent;
-  position: relative;
-
-  &:hover,
-  &:focus {
-    color: $link-hover-color;
-  }
-}
-
 // Active state, and it's :hover/:focus to override normal :hover/:focus
 // Active state, and it's :hover/:focus to override normal :hover/:focus
 .nav-tabs > .active > a,
 .nav-tabs > .active > a,
 .nav-tabs > .active > a:hover,
 .nav-tabs > .active > a:hover,

public/sass/components/edit_sidemenu.scss

@@ -8,10 +8,12 @@
   min-width: 0;
   min-width: 0;
 }
 }
 
 
+//Deprecated class but maybe used by plugins (in panel settings)
 .edit-sidemenu-aside {
 .edit-sidemenu-aside {
   margin-right: $spacer * 2;
   margin-right: $spacer * 2;
 }
 }
 
 
+//Deprecated class but maybe used by plugins (in panel settings)
 .edit-sidemenu {
 .edit-sidemenu {
   width: 100%;
   width: 100%;
   list-style: none;
   list-style: none;
@@ -37,11 +39,13 @@
     flex-direction: column;
     flex-direction: column;
   }
   }
 
 
+  //Deprecated class but maybe used by plugins (in panel settings)
   .edit-sidemenu-aside {
   .edit-sidemenu-aside {
     width: 100%;
     width: 100%;
     margin-bottom: 2rem;
     margin-bottom: 2rem;
   }
   }
 
 
+  //Deprecated class but maybe used by plugins (in panel settings)
   .edit-sidemenu {
   .edit-sidemenu {
     li {
     li {
       float: left;
       float: left;