From 0e5e2ab1de9cb6c304b7ee0fe115793941e99f94 Mon Sep 17 00:00:00 2001
From: nstriedinger <nathan00@gmail.com>
Date: Wed, 18 Mar 2020 09:03:11 -0400
Subject: [PATCH] remove grid and tweaks

---
 src/components/_fs-aside.scss                 |   7 +-
 src/components/_fs-main.scss                  |  19 ++
 .../federated-solr-faceted-search.js          |   4 +-
 .../sort-menu/_fs-search-scope.scss           |  33 +---
 .../text-search/_fs-autocomplete.scss         |  12 --
 .../text-search/_fs-search-form.scss          |   8 -
 src/global-scss/_fs-init.scss                 |   2 -
 src/global-scss/grid-layouts/_fs-l-25-75.scss |  24 ---
 .../grid-layouts/_fs-l-singularity.scss       |  47 -----
 src/styles.css                                | 163 +++---------------
 src/styles.scss                               |   5 +-
 11 files changed, 56 insertions(+), 268 deletions(-)
 create mode 100644 src/components/_fs-main.scss
 delete mode 100644 src/global-scss/grid-layouts/_fs-l-25-75.scss
 delete mode 100644 src/global-scss/grid-layouts/_fs-l-singularity.scss

diff --git a/src/components/_fs-aside.scss b/src/components/_fs-aside.scss
index 54051c8..504a563 100644
--- a/src/components/_fs-aside.scss
+++ b/src/components/_fs-aside.scss
@@ -5,7 +5,12 @@
  * @copyright Copyright (c) 2017-2019 Palantir.net
  */
 
-aside.fs-aside {
+.fs-aside {
+  width: 22.85714%;
+  float: left;
+  margin-right: -100%;
+  margin-left: 0;
+  clear: both;
   margin-bottom: rhythm(1);
   background-color: $c-bg-gray;
 
diff --git a/src/components/_fs-main.scss b/src/components/_fs-main.scss
new file mode 100644
index 0000000..d9bd1b1
--- /dev/null
+++ b/src/components/_fs-main.scss
@@ -0,0 +1,19 @@
+/**
+ * aside.scss
+ * Define aside styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+
+.fs-main {
+  width: 74.28571%;
+  float: right;
+  margin-left: 0;
+  margin-right: 0;
+  clear: none;
+  margin-bottom: rhythm(1);
+
+  @include breakpoint($bp2) {
+    padding-top: rhythm(1);
+  }
+}
diff --git a/src/components/federated-solr-faceted-search.js b/src/components/federated-solr-faceted-search.js
index bf02e86..19810c5 100644
--- a/src/components/federated-solr-faceted-search.js
+++ b/src/components/federated-solr-faceted-search.js
@@ -101,7 +101,7 @@ class FederatedSolrFacetedSearch extends React.Component {
     return (
       <LiveAnnouncer>
         <div className="fs-container">
-          <aside className="fs-aside fs-l-25-75--1">
+          <aside className="fs-aside">
             <SearchFieldContainerComponent
               bootstrapCss={bootstrapCss}
               onNewSearch={this.resetFilters}
@@ -137,7 +137,7 @@ class FederatedSolrFacetedSearch extends React.Component {
               }
             </SearchFieldContainerComponent>
           </aside>
-          <div className="fs-l-25-75--2">
+          <div className="fs-main">
             {pageTitle}
             <div className="fs-search-form" autoComplete="on">
               <FederatedTextSearch
diff --git a/src/components/sort-menu/_fs-search-scope.scss b/src/components/sort-menu/_fs-search-scope.scss
index c196feb..5e9e975 100644
--- a/src/components/sort-menu/_fs-search-scope.scss
+++ b/src/components/sort-menu/_fs-search-scope.scss
@@ -11,35 +11,6 @@
 }
 
 .fs-search-scope__filter {
-  @include float-span(6);
-
-  @include breakpoint($bp1) {
-    @include float-span(4);
-  }
-
-  &:nth-of-type(3n+1) {
-    @include float-span(6, 'first');
-
-    @include breakpoint($bp1) {
-      @include isolation-span(4, 1, 'both');
-    }
-  }
-
-  &:nth-of-type(3n+2) {
-    @include float-span(6, 'last');
-
-    @include breakpoint($bp1) {
-      @include isolation-span(4, 5, 'none');
-    }
-  }
-
-  &:nth-of-type(3n+3) {
-    @include float-span(6, 'first');
-
-    @include breakpoint($bp1) {
-      @include isolation-span(4, 9, 'none');
-    }
-  }
 }
 
 .fs-search-scope__select {
@@ -53,7 +24,7 @@
   width: 100% !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.3 2.8c.3-.3.7-.3 1 0 .3.3.3.7 0 1L5.4 7.6c-.3.3-.7.3-1 0L.5 3.7c-.3-.3-.3-.7 0-1 .3-.3.7-.3 1 0l3.4 3.1 3.4-3z'%3E%3C/path%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: 90% 50%;
+  background-position: 96% 50%;
   background-size: .6em .6em;
   background-color: $white;
   padding: .7rem 1.5rem .7rem .7rem;
@@ -61,7 +32,7 @@
   @include breakpoint($bp2) {
     padding: .35rem 1rem .35rem .35rem;
     margin-bottom: rhythm(.5);
-    background-position: 97% 50%;
+    background-position: 99% 50%;
   }
 
   &::-ms-expand {
diff --git a/src/components/text-search/_fs-autocomplete.scss b/src/components/text-search/_fs-autocomplete.scss
index b2a29f9..ebe3e7e 100644
--- a/src/components/text-search/_fs-autocomplete.scss
+++ b/src/components/text-search/_fs-autocomplete.scss
@@ -8,18 +8,6 @@
 
 .fs-search-form__autocomplete-container {
   display: flex;
-
-  @include breakpoint($bp1) {
-    width: 75%;
-  }
-
-  @include breakpoint($bp3) {
-    width: 50%;
-  }
-
-  .fs-search-form__input-wrapper {
-    width: 100%;
-  }
 }
 
 /** These classes are outside of Federated Search app namespace. **/
diff --git a/src/components/text-search/_fs-search-form.scss b/src/components/text-search/_fs-search-form.scss
index cf38116..4bd5878 100644
--- a/src/components/text-search/_fs-search-form.scss
+++ b/src/components/text-search/_fs-search-form.scss
@@ -21,14 +21,6 @@
   border-radius: 3px;
   display: flex;
   justify-content: space-between;
-
-  @include breakpoint($bp1) {
-    width: 75%;
-  }
-
-  @include breakpoint($bp3) {
-    width: 50%;
-  }
 }
 
 .fs-search-form__input {
diff --git a/src/global-scss/_fs-init.scss b/src/global-scss/_fs-init.scss
index 6618221..94d5d1e 100644
--- a/src/global-scss/_fs-init.scss
+++ b/src/global-scss/_fs-init.scss
@@ -126,8 +126,6 @@ $indent-amount: 1em;
 // Partials to be shared with all .scss files.
 // =============================================================================
 
-// Add the Singularity Grids responsive layout mixins.
-@import '../node_modules/singularitygs/stylesheets/singularitygs';
 // Add the Breakpoint mixin.
 @import '../node_modules/breakpoint-sass/stylesheets/breakpoint';
 
diff --git a/src/global-scss/grid-layouts/_fs-l-25-75.scss b/src/global-scss/grid-layouts/_fs-l-25-75.scss
deleted file mode 100644
index 4377955..0000000
--- a/src/global-scss/grid-layouts/_fs-l-25-75.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @file
- * Layout rules for 4-up content
- */
-
-// =============================================================================
-// Basic 25-75 Isolation layout
-// =============================================================================
-
-.fs-l-25-75--1 {
-  @include isolation-span(12, 1, 'both');
-
-  @include breakpoint($bp2) {
-    @include isolation-span(3, 1, 'both');
-  }
-}
-
-.fs-l-25-75--2 {
-  @include isolation-span(12, 1, 'both');
-
-  @include breakpoint($bp2) {
-    @include isolation-span(9, 4, 'none');
-  }
-}
diff --git a/src/global-scss/grid-layouts/_fs-l-singularity.scss b/src/global-scss/grid-layouts/_fs-l-singularity.scss
deleted file mode 100644
index a8c2dd7..0000000
--- a/src/global-scss/grid-layouts/_fs-l-singularity.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * @file
- * Define singularity gs base settings here.
- * @see https://github.com/at-import/Singularity
- */
-
-//////////////////////////////////////////
-// Singularity: Setup
-//////////////////////////////////////////
-
-// Debug mode: Set to true for background grid overlay.
-@include sgs-change('debug', true);
-
-// If you want/need to use fixed width gutters, you must add
-// split and fixed gutter styles so that singularity uses the
-// right maths.
-// @include add-gutter-style('split' 'fixed');
-
-// Set default grid for each breakpoint.
-@include add-grid(12);
-//
-// Set default gutter.
-@include add-gutter(1/2);
-
-
-
-//////////////////////////////////////////
-// Singularity: Centered container
-//////////////////////////////////////////
-
-.fs-container {
-  // @include background-grid($color: rgba(blue, .2));
-  @extend %fs-clearfix;
-  width: 100%;
-  min-width: 260px; /* enforces a min-width in FF. */
-  padding: 0 rhythm(1);
-  margin: 0 auto;
-
-  @include breakpoint($bp2) {
-    width: 90%;
-    padding: 0;
-  }
-
-  @include breakpoint($bp3) {
-    max-width: 1400px;
-  }
-}
diff --git a/src/styles.css b/src/styles.css
index 43cb8ab..2ca4205 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -41,7 +41,6 @@
  * can otherwise occur with extends.
  */
 .fs-clearfix:after,
-.fs-container:after,
 .fs-search-filters__form:after,
 .fs-search-scope:after {
   content: '';
@@ -187,62 +186,6 @@
   max-width: 100%;
   border: 0; }
 
-/* Layout rules */
-/**
- * @file
- * Define singularity gs base settings here.
- * @see https://github.com/at-import/Singularity
- */
-.fs-container {
-  width: 100%;
-  min-width: 260px;
-  /* enforces a min-width in FF. */
-  padding: 0 1.46667em;
-  margin: 0 auto; }
-  @media (min-width: 900px) {
-    .fs-container {
-      width: 90%;
-      padding: 0; } }
-  @media (min-width: 1100px) {
-    .fs-container {
-      max-width: 1400px; } }
-
-/**
- * @file
- * Layout rules for 4-up content
- */
-.fs-l-25-75--1 {
-  -sgs-span-settings: ("span": 12, "location": 1, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ("clear": both));
-  width: 100%;
-  float: right;
-  margin-left: 0;
-  margin-right: 0;
-  clear: both; }
-  @media (min-width: 900px) {
-    .fs-l-25-75--1 {
-      -sgs-span-settings: ("span": 3, "location": 1, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ("clear": both));
-      width: 22.85714%;
-      float: left;
-      margin-right: -100%;
-      margin-left: 0;
-      clear: both; } }
-
-.fs-l-25-75--2 {
-  -sgs-span-settings: ("span": 12, "location": 1, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ("clear": both));
-  width: 100%;
-  float: right;
-  margin-left: 0;
-  margin-right: 0;
-  clear: both; }
-  @media (min-width: 900px) {
-    .fs-l-25-75--2 {
-      -sgs-span-settings: ("span": 9, "location": 4, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ("clear": none));
-      width: 74.28571%;
-      float: right;
-      margin-left: 0;
-      margin-right: 0;
-      clear: none; } }
-
 /* Component (SMACSS module) rules */
 /**
  * fs-search-form.scss
@@ -265,12 +208,6 @@
   border-radius: 3px;
   display: flex;
   justify-content: space-between; }
-  @media (min-width: 600px) {
-    .fs-search-form__input-wrapper {
-      width: 75%; } }
-  @media (min-width: 1100px) {
-    .fs-search-form__input-wrapper {
-      width: 50%; } }
 
 .fs-search-form__input {
   font-size: 0.8em;
@@ -318,14 +255,6 @@
  */
 .fs-search-form__autocomplete-container {
   display: flex; }
-  @media (min-width: 600px) {
-    .fs-search-form__autocomplete-container {
-      width: 75%; } }
-  @media (min-width: 1100px) {
-    .fs-search-form__autocomplete-container {
-      width: 50%; } }
-  .fs-search-form__autocomplete-container .fs-search-form__input-wrapper {
-    width: 100%; }
 
 /** These classes are outside of Federated Search app namespace. **/
 .react-autosuggest__container {
@@ -595,11 +524,33 @@
  *
  * @copyright Copyright (c) 2017-2019 Palantir.net
  */
-aside.fs-aside {
+.fs-aside {
+  width: 22.85714%;
+  float: left;
+  margin-right: -100%;
+  margin-left: 0;
+  clear: both;
   margin-bottom: 1.46667em;
   background-color: #f6f6f6; }
   @media (min-width: 900px) {
-    aside.fs-aside {
+    .fs-aside {
+      padding-top: 1.46667em; } }
+
+/**
+ * aside.scss
+ * Define aside styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+.fs-main {
+  width: 74.28571%;
+  float: right;
+  margin-left: 0;
+  margin-right: 0;
+  clear: none;
+  margin-bottom: 1.46667em; }
+  @media (min-width: 900px) {
+    .fs-main {
       padding-top: 1.46667em; } }
 
 /**
@@ -671,68 +622,6 @@ aside.fs-aside {
 .fs-search-scope {
   margin: 1.46667em 0; }
 
-.fs-search-scope__filter {
-  -sgs-span-settings: ("span": 6, "location": 1, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
-  width: 48.57143%;
-  clear: right;
-  float: left;
-  margin-left: 0;
-  margin-right: 2.85714%; }
-  @media (min-width: 600px) {
-    .fs-search-scope__filter {
-      -sgs-span-settings: ("span": 4, "location": 1, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
-      width: 31.42857%;
-      clear: right;
-      float: left;
-      margin-left: 0;
-      margin-right: 2.85714%; } }
-  .fs-search-scope__filter:nth-of-type(3n+1) {
-    -sgs-span-settings: ("span": 6, "location": 1, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
-    width: 48.57143%;
-    clear: right;
-    float: left;
-    margin-left: 0;
-    margin-right: 2.85714%;
-    clear: both; }
-    @media (min-width: 600px) {
-      .fs-search-scope__filter:nth-of-type(3n+1) {
-        -sgs-span-settings: ("span": 4, "location": 1, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ("clear": both));
-        width: 31.42857%;
-        float: left;
-        margin-right: -100%;
-        margin-left: 0;
-        clear: both; } }
-  .fs-search-scope__filter:nth-of-type(3n+2) {
-    -sgs-span-settings: ("span": 6, "location": 7, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
-    width: 48.57143%;
-    clear: right;
-    float: right;
-    margin-right: 0; }
-    @media (min-width: 600px) {
-      .fs-search-scope__filter:nth-of-type(3n+2) {
-        -sgs-span-settings: ("span": 4, "location": 5, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ("clear": none));
-        width: 31.42857%;
-        float: left;
-        margin-right: -100%;
-        margin-left: 34.28571%;
-        clear: none; } }
-  .fs-search-scope__filter:nth-of-type(3n+3) {
-    -sgs-span-settings: ("span": 6, "location": 1, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
-    width: 48.57143%;
-    clear: right;
-    float: left;
-    margin-left: 0;
-    margin-right: 2.85714%;
-    clear: both; }
-    @media (min-width: 600px) {
-      .fs-search-scope__filter:nth-of-type(3n+3) {
-        -sgs-span-settings: ("span": 4, "location": 9, "grid": 12, "gutter": 0.5, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ("clear": none));
-        width: 31.42857%;
-        float: right;
-        margin-left: 0;
-        margin-right: 0;
-        clear: none; } }
-
 .fs-search-scope__select {
   font-size: 0.8em;
   line-height: 1.46667em;
@@ -744,7 +633,7 @@ aside.fs-aside {
   width: 100% !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.3 2.8c.3-.3.7-.3 1 0 .3.3.3.7 0 1L5.4 7.6c-.3.3-.7.3-1 0L.5 3.7c-.3-.3-.3-.7 0-1 .3-.3.7-.3 1 0l3.4 3.1 3.4-3z'%3E%3C/path%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: 90% 50%;
+  background-position: 96% 50%;
   background-size: .6em .6em;
   background-color: #fff;
   padding: .7rem 1.5rem .7rem .7rem; }
@@ -752,7 +641,7 @@ aside.fs-aside {
     .fs-search-scope__select {
       padding: .35rem 1rem .35rem .35rem;
       margin-bottom: 0.73333em;
-      background-position: 97% 50%; } }
+      background-position: 99% 50%; } }
   .fs-search-scope__select::-ms-expand {
     display: none; }
 
diff --git a/src/styles.scss b/src/styles.scss
index 89d0f5a..a7a9ff7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -17,15 +17,12 @@
 /* HTML element (SMACSS base) rules */
 @import "global-scss/fs-global-base-helpers";
 
-/* Layout rules */
-@import "global-scss/grid-layouts/_fs-l-singularity";
-@import "global-scss/grid-layouts/_fs-l-25-75";
-
 /* Component (SMACSS module) rules */
 @import "components/text-search/fs-search-form";
 @import "components/text-search/fs-autocomplete";
 @import "components/fs-search-filters";
 @import "components/fs-aside";
+@import "components/fs-main";
 @import "components/results/fs-search-results";
 @import "components/sort-menu/fs-search-scope";
 @import "components/results/fs-pagination";