From 0d9a0e32fa183259fdc68b5b301af47d5c3c9960 Mon Sep 17 00:00:00 2001
From: Brian Miller <brian@parameter1.com>
Date: Mon, 22 Aug 2022 11:39:49 -0500
Subject: [PATCH] add directory facet and section search css

---
 .../components/blocks/_directory-facets.scss  | 112 ++++++++++++++++++
 .../components/blocks/_section-search.scss    |  40 +++++++
 2 files changed, 152 insertions(+)
 create mode 100644 packages/marko-web-theme-monorail/scss/components/blocks/_directory-facets.scss
 create mode 100644 packages/marko-web-theme-monorail/scss/components/blocks/_section-search.scss

diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_directory-facets.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_directory-facets.scss
new file mode 100644
index 000000000..c35aabb3f
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_directory-facets.scss
@@ -0,0 +1,112 @@
+.directory-facets-toggle {
+  display: flex;
+  padding: 20px;
+  margin-bottom: map-get($spacers, block);
+  background-color: #f1f1f1;
+  &__label {
+    align-self: center;
+  }
+
+  &__button {
+    @include theme-toggle-button();
+    align-self: center;
+    margin-left: auto;
+  }
+}
+
+.directory-facets,
+.directory-country-facets,
+.content-type-facets {
+  @include theme-card();
+  $color: $gray-200;
+  $self: &;
+
+  &--open {
+    display: block;
+  }
+
+  &__title {
+    @include theme-card-header();
+    @include border-top-radius($theme-item-list-border-radius);
+    padding: $marko-web-node-list-padding;
+    margin-bottom: 0;
+    line-height: $line-height-base;
+    &:empty {
+      display: none;
+    }
+
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    max-height: 600px;
+    padding: 0;
+    overflow: scroll;
+    #{ $self } {
+      &__list {
+        display: none;
+        max-height: 100%;
+        padding: $marko-web-node-list-padding;
+        padding-bottom: 0;
+        overflow: initial;
+      }
+    }
+  }
+
+  &__link {
+    position: relative;
+    display: inline;
+    color: #333;
+    &:hover {
+      color: #333;
+      text-decoration: underline;
+    }
+    &--active {
+      font-weight: 700;
+      color: $primary;
+    }
+  }
+
+  &__item {
+    position: relative;
+    display: block;
+    padding: ($marko-web-node-list-padding / 2);
+    font-size: 18px;
+    line-height: 1.25;
+    &--open {
+      > #{ $self } {
+        &__list {
+          display: flex;
+        }
+      }
+    }
+  }
+
+  &__toggle {
+    @include theme-toggle-button();
+    position: absolute;
+    top: .5rem;
+    right: .75rem;
+    padding: 0;
+    margin-left: auto;
+
+    & > .icon {
+      @include theme-navbar-link-color(( active: $primary, hover: $primary, default: $black ));
+    }
+  }
+}
+
+.directory-country-facets {
+  &__list {
+    max-height: 200px;
+  }
+}
+
+.breadcrumbs {
+  &--directory {
+    .breadcrumb {
+      padding-bottom: 16px;
+    }
+  }
+}
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-search.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-search.scss
new file mode 100644
index 000000000..aa16c4273
--- /dev/null
+++ b/packages/marko-web-theme-monorail/scss/components/blocks/_section-search.scss
@@ -0,0 +1,40 @@
+.section-search {
+  position: relative;
+  &__title {
+    margin-bottom: 18px;
+    font-size: 18px;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+  .form-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0;
+    outline: none;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    &:focus {
+      border-color: #ebebeb;
+      box-shadow: none;
+    }
+  }
+  .list-group {
+    @include box-shadow($theme-card-box-shadow);
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    max-height: 10em;
+    padding: map-get($spacers, 2);
+    overflow: scroll;
+    background: $white;
+    border: 1px solid #ebebeb;
+  }
+}