From 44e9b50467e69cb4458f830ccb7dc27d3e52f46d Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Wed, 20 Jul 2022 10:25:41 +0530
Subject: [PATCH] search bar style added

---
 src/frontend/styles/components/sidebar.pcss | 31 +++++++++++++--------
 src/frontend/svg/search.svg                 |  4 +++
 src/frontend/svg/shortcut.svg               |  3 ++
 3 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 src/frontend/svg/search.svg
 create mode 100644 src/frontend/svg/shortcut.svg

diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 2a455a4..12a0d02 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -1,6 +1,6 @@
 .docs-sidebar {
   width: 100vw;
-    
+
   @media (--desktop) {
     width: var(--layout-sidebar-width);
   }
@@ -14,7 +14,7 @@
     display: flex;
     flex-direction: column;
     overflow: auto;
-  
+
     @media (--desktop) {
       height: calc(100vh - var(--layout-height-header));
       border-right: 1px solid var(--color-line-gray);
@@ -31,6 +31,17 @@
     }
   }
 
+  &__search {
+    height: 34px;
+    appearance: none;
+    background: url("../svg/search.svg") left 10px center no-repeat,
+      url("../svg/shortcut.svg") right 10px center no-repeat;
+    background-color: var(--color-input-primary);
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 8px 35px;
+    padding-right: 45px;
+  }
 
   &__section {
     overflow: hidden;
@@ -105,7 +116,6 @@
     }
   }
 
-
   &__section-list-item-wrapper {
     padding: 1px 0;
     display: block;
@@ -117,7 +127,6 @@
     }
   }
 
-
   &__section-title:not(&__section-title--active),
   &__section-list-item:not(&__section-list-item--active) {
     @media (--can-hover) {
@@ -129,12 +138,12 @@
 
   &__section-title--active,
   &__section-list-item--active {
-    background: linear-gradient(270deg, #129BFF 0%, #8A53FF 100%);
+    background: linear-gradient(270deg, #129bff 0%, #8a53ff 100%);
     color: white;
 
     @media (--can-hover) {
       .docs-sidebar__section-toggler:hover {
-        background: rgba(0,0,0,0.3);
+        background: rgba(0, 0, 0, 0.3);
       }
     }
   }
@@ -157,7 +166,7 @@
     height: 24px;
     transition-property: background-color;
     transition-duration: 0.1s;
-    
+
     @apply --squircle;
 
     @media (--can-hover) {
@@ -171,14 +180,13 @@
     }
   }
 
-
   &__toggler {
     font-size: 13px;
     cursor: pointer;
     color: var(--color-text-second);
     padding: 20px 15px;
     border-bottom: 1px solid var(--color-line-gray);
-    
+
     @media (--desktop) {
       display: none;
     }
@@ -201,7 +209,7 @@
       display: block;
     }
 
-    &-image{
+    &-image {
       display: inline-flex;
     }
 
@@ -216,5 +224,4 @@
       padding: 8px;
     }
   }
-
-}
\ No newline at end of file
+}
diff --git a/src/frontend/svg/search.svg b/src/frontend/svg/search.svg
new file mode 100644
index 0000000..a37d686
--- /dev/null
+++ b/src/frontend/svg/search.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6.5" cy="6.5" r="5.5" stroke="#717682" stroke-width="2"/>
+<rect x="10.4143" y="10" width="5" height="2" rx="1" transform="rotate(45 10.4143 10)" fill="#717682"/>
+</svg>
diff --git a/src/frontend/svg/shortcut.svg b/src/frontend/svg/shortcut.svg
new file mode 100644
index 0000000..34b0f4c
--- /dev/null
+++ b/src/frontend/svg/shortcut.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.856 10.5C4.424 10.5 4.928 9.52 4.928 8.344V7.182H6.468V8.344C6.468 9.52 6.972 10.5 8.54 10.5C9.842 10.5 10.682 9.674 10.682 8.386C10.682 7.028 9.87 6.23 8.274 6.23H7.448V4.69H8.274C9.87 4.69 10.682 3.892 10.682 2.534C10.682 1.246 9.842 0.42 8.54 0.42C6.972 0.42 6.468 1.4 6.468 2.576V3.738H4.928V2.576C4.928 1.4 4.424 0.42 2.856 0.42C1.554 0.42 0.714 1.246 0.714 2.534C0.714 3.892 1.526 4.69 3.122 4.69H3.948V6.23H3.122C1.526 6.23 0.714 7.028 0.714 8.386C0.714 9.674 1.554 10.5 2.856 10.5ZM7.448 2.548C7.448 1.834 7.812 1.386 8.54 1.386C9.198 1.386 9.688 1.708 9.688 2.534C9.688 3.332 9.268 3.738 8.274 3.738H7.448V2.548ZM3.122 3.738C2.128 3.738 1.708 3.332 1.708 2.534C1.708 1.708 2.198 1.386 2.856 1.386C3.584 1.386 3.948 1.834 3.948 2.548V3.738H3.122ZM4.928 6.23V4.69H6.468V6.23H4.928ZM2.856 9.534C2.198 9.534 1.708 9.212 1.708 8.386C1.708 7.588 2.128 7.182 3.122 7.182H3.948V8.372C3.948 9.086 3.584 9.534 2.856 9.534ZM7.448 8.372V7.182H8.274C9.268 7.182 9.688 7.588 9.688 8.386C9.688 9.212 9.198 9.534 8.54 9.534C7.812 9.534 7.448 9.086 7.448 8.372ZM16.3313 0.635742V10.5H17.5618V6.97949H20.0432C21.8958 6.97949 23.2151 5.67383 23.2151 3.82812C23.2151 1.94824 21.9231 0.635742 20.0569 0.635742H16.3313ZM17.5618 1.72949H19.7356C21.1643 1.72949 21.9505 2.47461 21.9505 3.82812C21.9505 5.13379 21.137 5.88574 19.7356 5.88574H17.5618V1.72949Z" fill="#717682"/>
+</svg>