💄 #133 rework searchbar for configuration menu

JAGFx · Jul 24, 2022 · 3af25c7 · 3af25c7
1 parent 0eafcc5
commit 3af25c7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/src/application/components/menu/ConfigurationTab.vue b/src/application/components/menu/ConfigurationTab.vue
@@ -2,13 +2,40 @@
   <div>
     <div class="row my-2 configuration-tab">
       <div class="col-12">
-        <div class="d-flex-center-center">
+        <!--        <div class="d-flex-center-center">-->
+        <div class="input-group">
           <input
             type="search"
-            class="form-control form-control-sm w-100 bg-acrylic"
+            class="form-control bg-acrylic"
             placeholder="Type to search..."
           />
-          <div class="dropdown dropdown-acrylic mx-1">
+          <button
+            class="btn btn-acrylic dropdown-toggle d-flex-center-center px-2 py-1 m-0 d-flex-center-center"
+            type="button"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          >
+            <i class="icon-endpoint"></i>
+          </button>
+          <ul class="dropdown-menu">
+            <li>
+              <Tag>#jagfx</Tag>
+            </li>
+            <li>
+              <Tag>#jagfx</Tag>
+            </li>
+            <li>
+              <Tag>#jagfx</Tag>
+            </li>
+          </ul>
+          <button
+            class="btn btn-acrylic px-2 py-1 pe-3 m-0 d-flex-center-center"
+            type="button"
+          >
+            <i class="icon-location_arrow"></i>
+          </button>
+        </div>
+        <!--          <div class="dropdown dropdown-acrylic mx-1">
             <button
               type="button"
               class="btn btn-acrylic dropdown-toggle d-flex-center-center"
@@ -25,7 +52,17 @@
                 <Tag class="dropdown-item">#unit</Tag>
               </li>
             </ul>
-          </div>
+          </div>-->
+        <!--        </div>-->
+      </div>
+    </div>
+    <div class="row my-2 configuration-tab">
+      <div class="col d-flex justify-content-start align-items-center">
+        <Tag>#jagfx</Tag>
+        <Tag>#jagfx</Tag>
+        <Tag>#jagfx</Tag>
+        <div class="d-flex-center-center text-muted mx-1">
+          <i class="icon-endpoint"></i>
         </div>
       </div>
     </div>

diff --git a/src/application/style/vendors/_bootstrap.scss b/src/application/style/vendors/_bootstrap.scss
@@ -35,6 +35,7 @@ $form-select-indicator-color: $color-white-transparent-25;
 $dropdown-padding-x: .25rem;
 $dropdown-border-color: transparent;
 $dropdown-font-size: .875rem;
+$enable-shadows: false;
 
 // $theme-colors: (
 //	"accent-1": $color-accent-1,
@@ -123,7 +124,6 @@ $dropdown-font-size: .875rem;
 
 	&.dropdown-toggle {
 		padding: 0.3rem 0.5rem;
-		font-size: 1.2rem;
 	}
 }