DEV: Refactor (#90)

common/common.scss

@@ -1,17 +1,12 @@
-@import "common/foundation/mixins";
+// these are add-on styles controlled by settings
+@import "special-styles";
 
-$max-width: 600px;
-
-.welcome-banner {
+.welcome-banner:not(.below-site-header-outlet, .above-main-container-outlet),
+.header-search--enabled .floating-search-input-wrapper,
+.search-header--visible .floating-search-input-wrapper {
   display: none;
 }
 
-.display-search-banner {
-  #main-outlet {
-    padding-top: 0;
-  }
-}
-
 .search-banner {
   background-image: var(--custom-bg);
 
@@ -23,71 +18,7 @@ $max-width: 600px;
   }
 }
 
-// hide search icon from default search menu
-.search-menu.glimmer-search-menu .search-icon {
-  display: none;
-}
-
-.custom-search-banner-wrap {
-  box-sizing: border-box;
-  position: relative;
-  padding: 2.5em 0 3em;
-  margin: 1em auto;
-
-  @include breakpoint(tablet) {
-    padding: 1em 8px 1.25em;
-    margin-top: 0.5em;
-  }
-
-  > div {
-    margin: 0 auto;
-    max-width: $max-width;
-  }
-
-  .search-menu {
-    display: flex;
-    position: relative;
-
-    .search-menu-container {
-      width: 100%;
-      min-width: 0;
-    }
-  }
-
-  .menu-panel-results .menu-panel {
-    position: unset;
-    padding: 0;
-  }
-
-  .d-icon-search {
-    margin: 0;
-  }
-
-  .browser-search-tip {
-    display: none;
-  }
-
-  .search-input {
-    input.search-term__input {
-      min-width: 0;
-      flex: 1 1;
-    }
-  }
-
-  h1 {
-    font-size: var(--font-up-6);
-    line-height: $line-height-medium;
-
-    @include breakpoint(tablet) {
-      font-size: var(--font-up-4);
-    }
-  }
-
-  h1,
-  p {
-    text-align: center;
-  }
-
+.welcome-banner {
   .btn.search-icon:not(.has-search-button-text) {
     z-index: 2;
     background: transparent;
@@ -128,58 +59,20 @@ $max-width: 600px;
   }
 
   .btn.search-icon.has-search-button-text {
-    order: 2;
     margin-left: 0.5em;
     column-gap: 0.5em;
     background-color: var(--tertiary);
     color: var(--secondary);
-    flex: none;
+    position: unset;
+    height: unset;
 
     &:hover {
       background-color: var(--tertiary-hover);
+      color: var(--secondary);
     }
 
     .d-icon {
       color: var(--secondary);
     }
   }
-
-  .results {
-    box-sizing: border-box;
-    background: var(--secondary);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
-    position: absolute;
-    z-index: 9;
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    top: 2.75em;
-    right: 0;
-    padding: 0.5em;
-
-    @include breakpoint(mobile-extra-large) {
-      width: 100%;
-    }
-
-    ul,
-    ol {
-      list-style-type: none;
-      margin: 0;
-    }
-
-    .d-icon-search {
-      display: none;
-    }
-  }
-
-  .search-link .d-icon {
-    color: var(--primary-medium);
-  }
-
-  span.keyword {
-    color: var(--primary);
-  }
 }
-
-// these are add-on styles controlled by settings
-@import "special-styles";

javascripts/discourse/components/search-banner.hbs

@@ -1,17 +1,18 @@
 {{#if this.shouldDisplay}}
   <div
-    class="{{concat (theme-setting 'plugin_outlet') '-outlet'}} search-banner"
+    class="{{concat (theme-setting 'plugin_outlet') '-outlet'}}
+      search-banner welcome-banner"
   >
     <div
-      class="custom-search-banner"
+      class="custom-search-banner welcome-banner__inner-wrapper"
       {{did-insert this.didInsert}}
       {{will-destroy this.willDestroy}}
     >
-      <div class="wrap custom-search-banner-wrap">
+      <div class="custom-search-banner-wrap welcome-banner__wrap">
         <h1>{{html-safe (theme-i18n "search_banner.headline")}}</h1>
         <PluginOutlet @name="search-banner-below-headline" />
         <p>{{html-safe (theme-i18n "search_banner.subhead")}}</p>
-        <div class="search-menu">
+        <div class="search-menu welcome-banner__search-menu">
           {{#unless this.buttonText}}
             <SearchIcon />
           {{/unless}}

stylesheets/special-styles.scss

@@ -1,6 +1,14 @@
 @if $special-style == "big search, no text" {
+  .welcome-banner {
+    margin-bottom: 0;
+  }
+
+  .above-main-container-outlet .custom-search-banner-wrap {
+    padding: 0 0 1em 0;
+  }
+
   .custom-search-banner-wrap {
-    padding: 0;
+    padding: 1em;
 
     @if $background-image-light != "" {
       background-image: var(--custom-bg);
@@ -14,6 +22,13 @@
     .results {
       max-width: unset;
       width: 100%;
+      font-size: var(--font-down-3);
+      top: 3.45em;
+      padding: 0;
+
+      .search-result-topic .first-line {
+        font-size: var(--font-up-1);
+      }
     }
 
     .search-context {
@@ -31,16 +46,6 @@
       max-width: unset;
     }
 
-    .results {
-      font-size: var(--font-down-3);
-      top: 3.45em;
-      padding: 0;
-
-      .search-result-topic .first-line {
-        font-size: var(--font-up-1);
-      }
-    }
-
     .blurb {
       font-size: var(--font-down-2);
       max-width: 600px;
@@ -61,6 +66,7 @@
     .search-menu-recent {
       font-size: var(--font-down-1);
       margin-top: 0;
+
       li:last-child {
         .search-link {
           margin-bottom: 0;
@@ -74,7 +80,7 @@
     }
 
     .no-results {
-      padding: 1em;
+      padding: 1em !important;
     }
 
     .results > * {
@@ -100,6 +106,7 @@
 
       .show-more {
         margin-top: 0.33em;
+
         .search-link {
           margin-bottom: 0;
         }
@@ -113,9 +120,5 @@
     .search-input .searching {
       top: 0.45em;
     }
-
-    .no-results {
-      padding: 1em !important;
-    }
   }
 }