Hide search icon on larger breakpoints again

- Now we are just using bootstrap utilities
  since they handle chaining multiple responsive
  classes correctly

Changelog: fixed

app/assets/stylesheets/startup/startup-dark.scss

@@ -337,6 +337,9 @@ h1 {
 .d-none {
   display: none !important;
 }
+.d-inline-block {
+  display: inline-block !important;
+}
 .d-block {
   display: block !important;
 }
@@ -344,6 +347,9 @@ h1 {
   .d-sm-none {
     display: none !important;
   }
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
 }
 @media (min-width: 768px) {
   .d-md-block {
@@ -351,6 +357,9 @@ h1 {
   }
 }
 @media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
   .d-lg-block {
     display: block !important;
   }
@@ -2287,24 +2296,11 @@ body.gl-dark {
 .gl-display-none {
   display: none;
 }
-@media (min-width: 62rem) {
-  .gl-lg-display-none {
-    display: none;
-  }
-}
 @media (min-width: 36rem) {
   .gl-sm-display-block {
     display: block;
   }
 }
-.gl-display-inline-block {
-  display: inline-block;
-}
-@media (min-width: 36rem) {
-  .gl-sm-display-inline-block {
-    display: inline-block;
-  }
-}
 .gl-absolute {
   position: absolute;
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -322,6 +322,9 @@ h1 {
 .d-none {
   display: none !important;
 }
+.d-inline-block {
+  display: inline-block !important;
+}
 .d-block {
   display: block !important;
 }
@@ -329,6 +332,9 @@ h1 {
   .d-sm-none {
     display: none !important;
   }
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
 }
 @media (min-width: 768px) {
   .d-md-block {
@@ -336,6 +342,9 @@ h1 {
   }
 }
 @media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
   .d-lg-block {
     display: block !important;
   }
@@ -2070,24 +2079,11 @@ body.sidebar-refactoring
 .gl-display-none {
   display: none;
 }
-@media (min-width: 62rem) {
-  .gl-lg-display-none {
-    display: none;
-  }
-}
 @media (min-width: 36rem) {
   .gl-sm-display-block {
     display: block;
   }
 }
-.gl-display-inline-block {
-  display: inline-block;
-}
-@media (min-width: 36rem) {
-  .gl-sm-display-inline-block {
-    display: inline-block;
-  }
-}
 .gl-absolute {
   position: absolute;
 }

app/views/layouts/header/_default.html.haml

@@ -37,7 +37,7 @@
             - search_menu_item = top_nav_search_menu_item_attrs
             %li.nav-item.d-none.d-lg-block.m-auto
               = render 'layouts/search' unless current_controller?(:search)
-            %li.nav-item{ class: use_top_nav_redesign ? "gl-display-none gl-sm-display-inline-block gl-lg-display-none" : "gl-display-inline-block gl-lg-display-none" }
+            %li.nav-item{ class: use_top_nav_redesign ? 'd-none d-sm-inline-block d-lg-none' : 'd-inline-block d-lg-none' }
               = link_to search_menu_item.fetch(:href), title: search_menu_item.fetch(:title), aria: { label: search_menu_item.fetch(:title) }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = sprite_icon(search_menu_item.fetch(:icon))
           - if header_link?(:issues)

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -337,6 +337,9 @@ h1 {
 .d-none {
   display: none !important;
 }
+.d-inline-block {
+  display: inline-block !important;
+}
 .d-block {
   display: block !important;
 }
@@ -344,6 +347,9 @@ h1 {
   .d-sm-none {
     display: none !important;
   }
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
 }
 @media (min-width: 768px) {
   .d-md-block {
@@ -351,6 +357,9 @@ h1 {
   }
 }
 @media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
   .d-lg-block {
     display: block !important;
   }
@@ -2287,24 +2296,11 @@ body.gl-dark {
 .gl-display-none {
   display: none;
 }
-@media (min-width: 62rem) {
-  .gl-lg-display-none {
-    display: none;
-  }
-}
 @media (min-width: 36rem) {
   .gl-sm-display-block {
     display: block;
   }
 }
-.gl-display-inline-block {
-  display: inline-block;
-}
-@media (min-width: 36rem) {
-  .gl-sm-display-inline-block {
-    display: inline-block;
-  }
-}
 .gl-absolute {
   position: absolute;
 }

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -322,6 +322,9 @@ h1 {
 .d-none {
   display: none !important;
 }
+.d-inline-block {
+  display: inline-block !important;
+}
 .d-block {
   display: block !important;
 }
@@ -329,6 +332,9 @@ h1 {
   .d-sm-none {
     display: none !important;
   }
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
 }
 @media (min-width: 768px) {
   .d-md-block {
@@ -336,6 +342,9 @@ h1 {
   }
 }
 @media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
   .d-lg-block {
     display: block !important;
   }
@@ -2070,24 +2079,11 @@ body.sidebar-refactoring
 .gl-display-none {
   display: none;
 }
-@media (min-width: 62rem) {
-  .gl-lg-display-none {
-    display: none;
-  }
-}
 @media (min-width: 36rem) {
   .gl-sm-display-block {
     display: block;
   }
 }
-.gl-display-inline-block {
-  display: inline-block;
-}
-@media (min-width: 36rem) {
-  .gl-sm-display-inline-block {
-    display: inline-block;
-  }
-}
 .gl-absolute {
   position: absolute;
 }