From 0ea91de6450f2ae97f2debf988687aa70ddad1dd Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Mon, 30 Nov 2020 16:27:52 -0500
Subject: [PATCH] worked on search tool and accordion buttons

---
 src/assets/pages/resources-landing-page.html  | 34 ++++++++++++--
 .../pages/styles/resources-landing-page.scss  | 13 +++++-
 src/assets/pages/styles/theme-base.scss       | 44 +++++++++++++++++++
 src/assets/pages/styles/theme-dark.scss       |  2 +
 src/assets/pages/styles/theme-light.scss      |  3 ++
 5 files changed, 91 insertions(+), 5 deletions(-)

diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index a98a925..6dfc2ab 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -88,11 +88,37 @@
             <div class="justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
 
                 <div class="album py-5">
-                    <div class="container">
-                        <input type="text" class="form-control w-100 bg-info border border-boxborder text-searchfont"
-                               placeholder="Search"
-                               aria-label="Search">
+                            
+                    <div class="input-group w-100">
+                        <input type="text" class="form-control width-100 bg-info border border-boxborder text-searchfont"
+                        placeholder="Search"
+                        aria-label="Search">
+
+                        <div class="input-group-append">
+                            <button class="searchbutton">
+                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="info" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
+                            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
+                            </svg>
+                            </button>
+                        </div>
                     </div>
+                </div>
+
+
+
+                <div class="sb-example-1">
+         <div class="search">
+            <input type="text" class="searchTerm" placeholder="Search">
+            <button type="submit" class="searchbutton">
+                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="info" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
+                            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
+                            </svg>
+              <i class="fa fa-search"></i>
+           </button>
+         </div>
+      </div>
 
 
                     <div class="album py-5 ">
diff --git a/src/assets/pages/styles/resources-landing-page.scss b/src/assets/pages/styles/resources-landing-page.scss
index cf1f04f..5271be5 100644
--- a/src/assets/pages/styles/resources-landing-page.scss
+++ b/src/assets/pages/styles/resources-landing-page.scss
@@ -7,8 +7,9 @@ html {
   }
 }
 
-.container {
+.input-group {
   max-width: 960px;
+  margin: auto;
 }
 
 .main {
@@ -121,6 +122,16 @@ body {
   box-shadow: none;
 }
 
+.searchbutton {
+  background-color: transparent;
+  color: searchhint;
+  border-radius: 25px;
+}
+
+.searchbutton svg {
+  fill: searchhint;
+}
+
 .card-image-background {
   display: flex;
 }
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index 4928fc1..80d24b8 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -78,4 +78,48 @@ body {
   color: map-get($theme-colors, searchhint) !important;
 }
 
+.sb-example-1 .search {
+  width: 100%;
+  position: relative;
+  display: flex;
+}
+
+.sb-example-1 .searchTerm {
+  width: 100%;
+  border: 1px solid;
+  border-color: map-get($theme-colors, boxborder2);
+  border-right: none;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-radius: 25px 0 0 25px;
+  stroke: map-get($theme-colors, searchicon);
+  background-color: map-get($theme-colors, info);
+  box-shadow: none;
+}
+
+.sb-example-1 .searchTerm:focus{
+  stroke: map-get($theme-colors, searchicon);
+  background-color: map-get($theme-colors, info);
+  box-shadow: none;
+}
+
+.sb-example-1 .searchbutton {
+  width: 40px;
+  height: 50px;
+  border: 1px solid;
+  border-color: map-get($theme-colors, boxborder2);
+  background-color: map-get($theme-colors, info);
+  text-align: center;
+  stroke: map-get($theme-colors, searchicon);
+  border-radius: 0 25px 25px 0;
+  cursor: pointer;
+  font-size: 15px;
+  box-shadow: none;
+}
+
+.sb-example-1 .searchButton i{
+  color: #0000ff;
+  background-color: #ff0000;
+}
+
 
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index 4e01088..275b415 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -10,10 +10,12 @@ $theme-colors: (
         "inactivecard": #333337,
         "activecard": #4f4f56,
         "boxborder": #272727,
+        "boxborder2": #303030,
         "activecardfont":#e1e4e8,
         "searchhint": #787572,
         "searchfont": #bababa, 
         "sidebarfill": #202023,
+        "searchicon": #606060,
         "sidebartext": #787572,
         "webcardimagebackground": #707070,
         "webcardimagebackgroundhover": #98928F,
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index 3c96b98..9d9630f 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -10,10 +10,13 @@ $theme-colors: (
         "inactivecard": #ffffff,
         "activecard": #13a04a,
         "boxborder": #c0c2c6,
+        "boxborder2": #c0c2c6,
         "activecardfont": #e1e4e8,
+        "searchhint": #c0c2c6,
         "searchfont": #2c2c2c,
         "sidebarfill": #f6f6f6,
         "sidebartext": #545455,
+        "searchicon": #545455,
         "webcardimagebackground": #eeeeee,
         "webcardimagebackgroundhover": #f0f0f0,
         "headertextcolor": #434344,