Added changes

Rakesh9100 · Dec 11, 2024 · 04606e7 · 04606e7
1 parent f5c4f2c
commit 04606e7
Show file tree

Hide file tree

Showing 23 changed files with 135 additions and 192 deletions.
diff --git a/assets/html_files/accordions.html b/assets/html_files/accordions.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Accordions</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search accordion -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Accordion</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the accordion name -->
-                <input type="text" id="componentSearch" placeholder="Enter Accordion Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Accordion Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html
@@ -91,21 +91,17 @@
     </header>
 
     <section>
-
         <div class="heading">Backgrounds</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Background -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Background</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Background name -->
-                <input type="text" id="componentSearch" placeholder="Enter Background Name" oninput="filtereachComponents()" style="padding-left: 20px;">   
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Background Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
-        </div>
-
+        </div>        
 
         <div class="no-results">
             <img src="../images/no-results.png" alt="" height="100px" width="100px">

diff --git a/assets/html_files/breadcrumbs.html b/assets/html_files/breadcrumbs.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Breadcrumbs</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Breadcrumb -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Breadcrumb</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the breadcrumb name -->
-                <input type="text" id="componentSearch" placeholder="Enter Breadcrumb Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Breadcrumb Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Buttons</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Button -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Button</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Button name -->
-                <input type="text" id="componentSearch" placeholder="Enter Button Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Button Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html
@@ -94,15 +94,13 @@
 
         <div class="heading">Cards</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search card -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Card</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Card name -->
-                <input type="text" id="componentSearch" placeholder="Enter Card Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Card Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Carousels</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Carousel -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Carousel</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Carousel name -->
-                <input type="text" id="componentSearch" placeholder="Enter Carousel Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Carousel Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/cursors.html b/assets/html_files/cursors.html
@@ -85,18 +85,15 @@
     </header>
 
     <section>
-
         <div class="heading">Cursors</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Cursor -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Cursor</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Cursor name -->
-                <input type="text" id="componentSearch" placeholder="Enter Cursor Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Cursor Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/dropdowns.html b/assets/html_files/dropdowns.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Dropdowns</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Dropdown -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Dropdown</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Dropdown name -->
-                <input type="text" id="componentSearch" placeholder="Enter Dropdown Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Dropdown Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/footers.html b/assets/html_files/footers.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Footers</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Footer -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Footer</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Footer name -->
-                <input type="text" id="componentSearch" placeholder="Enter Footer Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Footer Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Forms</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Form -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Form</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Form name -->
-                <input type="text" id="componentSearch" placeholder="Enter Form Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Form Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/heroes.html b/assets/html_files/heroes.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Heroes</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Heroes -->
-            <h1 class="SearchDarkMode">Search Heroes</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Heroes name -->
-                <input type="text" id="componentSearch" placeholder="Enter Heroes Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+        <div id="searchBar">
+            <h1 class="SearchDarkMode">Search Hero</h1><br>
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Hero Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/loaders.html b/assets/html_files/loaders.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Loaders</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Loader -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Loader</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Loader name -->
-                <input type="text" id="componentSearch" placeholder="Enter Loader Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Loader Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/navigation-bars.html b/assets/html_files/navigation-bars.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Navigation Bars</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Navigation Bar -->
+        <div id="searchBar">
             <h1 class="SearchDarkMode">Search Navigation Bar</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Navigation Bar name -->
-                <input type="text" id="componentSearch" placeholder="Enter Navigation Bar Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Navigation Bar Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/popups.html b/assets/html_files/popups.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Popups</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search Popups -->
-            <h1 class="SearchDarkMode">Search Popups</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the Popups name -->
-                <input type="text" id="componentSearch" placeholder="Enter Popup Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+        <div id="searchBar">
+            <h1 class="SearchDarkMode">Search Popup</h1><br>
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Popup Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/scrollbars.html b/assets/html_files/scrollbars.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Scrollbars</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search scrollBar -->
-            <h1 class="SearchDarkMode">Search ScrollBar</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the ScrollBar name -->
-                <input type="text" id="componentSearch" placeholder="Enter ScrollBar Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+        <div id="searchBar">
+            <h1 class="SearchDarkMode">Search Scrollbar</h1><br>
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Scrollbar Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>
 

diff --git a/assets/html_files/search-bars.html b/assets/html_files/search-bars.html
@@ -91,18 +91,15 @@
     </header>
 
     <section>
-
         <div class="heading">Search Bars</div>
         <!-- Search Bar -->
-        <div id="searchBar" style="position: relative;">
-            <!-- Main heading for the search SearchBar -->
-            <h1 class="SearchDarkMode">Search SearchBar</h1><br>
-            <!-- Container for the search input and icon -->
-            <div style="position: relative; display: inline-block;">
-                <!-- Search input field for entering the SearchBar name -->
-                <input type="text" id="componentSearch" placeholder="Enter SearchBar Name" oninput="filtereachComponents()" style="padding-left: 20px;">
+        <div id="searchBar">
+            <h1 class="SearchDarkMode">Search Search Bar</h1><br>
+            <!-- Search input container -->
+            <div id="search-container">
+                <input type="text" id="componentSearch" placeholder="Enter Search Bar Name" oninput="filtereachComponents()">
                 <!-- Search icon positioned inside the input field -->
-                <i class="fa fa-search" style="position: absolute; top: 35%; left: 12px; transform: translateY(-50%); color: gray; font-size: 20px;"></i>
+                <i class="fa fa-search" style="top: 35%; color: gray;"></i>
             </div>
         </div>