Feedback: Convert static CSS values to EUI variables where possible

scottybollinger · Jul 2, 2020 · 0ce0314 · 0ce0314
1 parent 12421b8
commit 0ce0314
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/...nterprise_search/public/applications/app_search/components/empty_states/empty_states.scss b/...nterprise_search/public/applications/app_search/components/empty_states/empty_states.scss
@@ -16,6 +16,6 @@
   }
 
   .euiEmptyPrompt > .euiIcon {
-    margin-bottom: 8px;
+    margin-bottom: $euiSizeS;
   }
 }
diff --git a/...ise_search/public/applications/app_search/components/engine_overview/engine_overview.scss b/...ise_search/public/applications/app_search/components/engine_overview/engine_overview.scss
@@ -11,17 +11,17 @@
   width: 100%;
 
   .euiPanel {
-    padding: 35px;
+    padding: $euiSizeXL;
   }
 
   .euiPageContent .euiPageContentHeader {
-    margin-bottom: 10px;
+    margin-bottom: $euiSizeM;
   }
 
   .engine-icon {
     display: inline-block;
-    width: 15px;
-    height: 15px;
-    margin-right: 5px;
+    width: $euiSize;
+    height: $euiSize;
+    margin-right: $euiSizeXS;
   }
 }
diff --git a/.../enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss b/.../enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss
@@ -16,38 +16,38 @@
   .euiPageSideBar {
     flex-basis: 300px;
     flex-shrink: 0;
-    padding: 24px;
+    padding: $euiSizeL;
     margin-right: 0;
 
-    background-color: #f5f7fa; // $euiColorLightestShade
-    border-color: #d3dae6; // $euiColorLightShade
+    background-color: $euiColorLightestShade;
+    border-color: $euiBorderColor;
     border-style: solid;
-    border-width: 0 0 1px 0; // bottom - mobile view
+    border-width: 0 0 $euiBorderWidthThin 0; // bottom - mobile view
 
-    @media (min-width: 766px) {
-      border-width: 0 1px 0 0; // right - desktop view
+    @include euiBreakpoint('m', 'l', 'xl') {
+      border-width: 0 $euiBorderWidthThin 0 0; // right - desktop view
     }
-    @media (min-width: 1000px) {
+    @include euiBreakpoint('m', 'l') {
       flex-basis: 400px;
     }
-    @media (min-width: 1200px) {
+    @include euiBreakpoint('xl') {
       flex-basis: 500px;
     }
   }
 
   .euiPageBody {
     align-self: start;
-    padding: 24px;
+    padding: $euiSizeL;
 
-    @media (min-width: 1000px) {
-      padding: 40px 50px;
+    @include euiBreakpoint('l') {
+      padding: $euiSizeXXL ($euiSizeXXL * 1.25);
     }
   }
 
   &__thumbnail {
     display: block;
     max-width: 100%;
     height: auto;
-    margin: 24px auto;
+    margin: $euiSizeL auto;
   }
 }