Chore: Theme consistency, rems => pixels or variables (#16235)

* repalced rems with pixels and variables

* replaced rems with pixels and variables

public/sass/components/_alerts.scss

@@ -49,14 +49,14 @@
 }
 
 .alert-close {
-  padding: 0 0 0 1rem;
+  padding: 0 0 0 $space-md;
   border: none;
   background: none;
   display: flex;
   align-items: center;
   .fa {
     align-self: flex-end;
-    font-size: 1.5rem;
+    font-size: 21px;
     color: rgba(255, 255, 255, 0.75);
   }
 }
@@ -66,13 +66,13 @@
 }
 
 .alert-icon {
-  padding: 0 1rem 0 0;
+  padding: 0 $space-md 0 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
+  width: 35px;
   .fa {
-    font-size: 1.5rem;
+    font-size: 21px;
   }
 }
 

public/sass/components/_buttons.scss

@@ -58,7 +58,7 @@
   padding-bottom: $btn-padding-y-xl - 3;
   .gicon {
     font-size: 31px;
-    margin-right: 1rem;
+    margin-right: $space-md;
   }
 }
 
@@ -182,8 +182,8 @@ $btn-service-icon-width: 35px;
   left: 0;
   height: 100%;
   top: 0;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: $space-sm;
+  padding-right: $space-sm;
   width: $btn-service-icon-width;
   text-align: center;
 

public/sass/components/_drop.scss

-$popover-arrow-size: 0.7rem;
+$popover-arrow-size: 10px;
 $color: inherit;
 $color: $text-color;
 $useDropShadow: false;

public/sass/components/_page_header.scss

@@ -5,11 +5,11 @@
 }
 
 .page-header {
-  padding: 2.5rem 0 0 0;
+  padding: $space-xl 0 0 0;
 
   .btn {
     float: right;
-    margin-left: 1rem;
+    margin-left: $space-md;
 
     // better align icons
     .fa {
@@ -22,7 +22,7 @@
 .page-header__inner {
   flex-grow: 1;
   display: flex;
-  margin-bottom: 2.5rem;
+  margin-bottom: $space-xl;
 }
 
 .page-header__title {

public/sass/components/_tagsinput.scss

@@ -13,7 +13,7 @@
     border-radius: 0;
     padding: 8px 6px;
     height: 100%;
-    width: 5rem;
+    width: 70px;
     box-sizing: border-box;
 
     &.gf-form-input--has-help-icon {

public/sass/mixins/_drop_element.scss

@@ -9,9 +9,9 @@
       font-family: inherit;
       background: $theme-bg;
       color: $theme-color;
-      padding: 0.65rem;
+      padding: $space-sm;
       word-wrap: break-word;
-      max-width: 20rem;
+      max-width: 280px;
       border: 1px solid $border-color;
 
       &:before {
@@ -29,7 +29,7 @@
 
     &.drop-wide {
       .drop-content {
-        max-width: 40rem;
+        max-width: 560px;
       }
     }
 

public/sass/pages/_dashboard.scss

@@ -268,7 +268,7 @@ div.flot-text {
   span {
     display: inline-block;
     @include brand-bottom-border();
-    padding: 0.5rem 0.5rem 0.2rem 0.5rem;
+    padding: $space-sm $space-sm $space-xxs $space-sm;
   }
 }
 

public/sass/pages/_explore.scss

@@ -219,9 +219,9 @@
   position: absolute;
   left: 0;
   right: 0;
-  top: 3.5rem;
+  top: 48px;
   text-align: center;
-  font-size: 0.8rem;
+  font-size: 11px;
 }
 
 .graph-legend {
@@ -267,7 +267,7 @@
   align-items: flex-start;
 
   & + & {
-    margin-top: 0.5rem;
+    margin-top: $space-sm;
   }
 }
 

public/sass/pages/_history.scss

@@ -6,7 +6,7 @@
 // JSON
 @for $i from 0 through 16 {
   .diff-indent-#{$i} {
-    padding-left: $i * 1.5rem;
+    padding-left: $i * 21px;
     margin-left: 10px;
   }
 }
@@ -108,7 +108,7 @@
   font-size: 16px;
   font-style: normal;
   padding: 10px 15px;
-  margin: 1rem 0;
+  margin: $space-md 0;
 
   & .diff-group {
     padding: 0 5px;
@@ -153,7 +153,7 @@
   border-radius: 3px;
   color: $diff-label-fg;
   display: inline;
-  font-size: 0.95rem;
+  font-size: $font-size-base;
   margin: 0 5px;
   padding: 3px 8px;
 }

public/sass/pages/_plugins.scss

@@ -2,7 +2,7 @@
   color: $gray-3;
   font-size: $font-size-sm;
   position: relative;
-  top: 1.2rem;
+  top: $space-md;
 
   &:hover {
     color: $link-hover-color;