CSS cleanup

elastic · Apr 9, 2021 · c4627d5 · c4627d5
1 parent 6970b30
commit c4627d5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 58 deletions.
diff --git a/...ck/plugins/enterprise_search/public/applications/app_search/components/result/result.scss b/...ck/plugins/enterprise_search/public/applications/app_search/components/result/result.scss
@@ -1,10 +1,10 @@
 .appSearchResult {
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
   grid-template-areas:
-    'drag content actions'
-    'drag toggle actions';
+    'drag content'
+    'drag toggle';
   overflow: hidden; // Prevents child background-colors from clipping outside of panel border-radius
   border: $euiBorderThin; // TODO: Remove after EUI version is bumped beyond 31.8.0
 
@@ -35,29 +35,6 @@
     }
   }
 
-  &__actionButtons {
-    grid-area: actions;
-    display: flex;
-    flex-wrap: no-wrap;
-  }
-
-  &__actionButton {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $euiSize * 2;
-    border-left: $euiBorderThin;
-
-    &:first-child {
-      border-left: none;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $euiPageBackgroundColor;
-    }
-  }
-
   &__dragHandle {
     grid-area: drag;
     display: flex;

diff --git a/...ins/enterprise_search/public/applications/app_search/components/result/result_header.scss b/...ins/enterprise_search/public/applications/app_search/components/result/result_header.scss
@@ -1,26 +1,3 @@
 .appSearchResultHeader {
-  display: flex;
-  margin-bottom: $euiSizeS;
-
-  @include euiBreakpoint('xs') {
-    flex-direction: column;
-  }
-
-  &__column {
-    display: flex;
-    flex-wrap: wrap;
-
-    @include euiBreakpoint('xs') {
-      flex-direction: column;
-    }
-
-    & + &,
-    .appSearchResultHeaderItem + .appSearchResultHeaderItem {
-      margin-left: $euiSizeL;
-
-      @include euiBreakpoint('xs') {
-        margin-left: 0;
-      }
-    }
-  }
+  margin-bottom: $euiSizeM;
 }
diff --git a/...gins/enterprise_search/public/applications/app_search/components/result/result_header.tsx b/...gins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
@@ -38,8 +38,14 @@ export const ResultHeader: React.FC<Props> = ({
   });
 
   return (
-    <header style={{ margin: '0 0 .75rem 0' }}>
-      <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="spaceBetween">
+    <header className="appSearchResultHeader">
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap
+      >
         <EuiFlexItem grow>
           <ResultHeaderItem
             href={shouldLinkToDetailPage ? documentLink : undefined}

diff --git a/...nterprise_search/public/applications/app_search/components/result/result_header_item.scss b/...nterprise_search/public/applications/app_search/components/result/result_header_item.scss
@@ -1,12 +1,12 @@
-.euiFlexItem:not(:first-child):not(:last-child) .appSearchResultHeaderItem {
-  padding-right: .75rem;
-  box-shadow: inset -1px 0 0 0 $euiBorderColor;
-}
-
 .appSearchResultHeaderItem {
   @include euiCodeFont;
 
   &__score {
     color: $euiColorSuccessText;
   }
+
+  .euiFlexItem:not(:first-child):not(:last-child) & {
+    padding-right: $euiSizeS;
+    box-shadow: inset (-$euiBorderWidthThin) 0 0 0 $euiBorderColor;
+  }
 }