From b9de940cc468e805e1a7dcb1bb850c31e5b91350 Mon Sep 17 00:00:00 2001
From: Andrew Motko <andrew.motko@gmail.com>
Date: Sun, 17 Dec 2023 23:14:02 +0200
Subject: [PATCH] add: search input styles

---
 src/css/layout/03-exercises.css | 93 ++++++++++++++++++++++++++++++++-
 src/img/sprite.svg              |  4 ++
 src/js/12-exercises.js          | 14 -----
 src/partials/03-exercises.html  | 60 +++++++++++++--------
 4 files changed, 134 insertions(+), 37 deletions(-)

diff --git a/src/css/layout/03-exercises.css b/src/css/layout/03-exercises.css
index f64350f..9183d89 100644
--- a/src/css/layout/03-exercises.css
+++ b/src/css/layout/03-exercises.css
@@ -77,7 +77,7 @@
   align-items: center;
 }
 .exersices__title {
-  /* font-family: DMSans-Regular; */
+  margin-bottom: 20px;
   font-style: normal;
   font-weight: 400;
   font-size: 28px;
@@ -90,12 +90,101 @@
     font-size: 44px;
     line-height: 1.1em;
     letter-spacing: -0.88px;
+    margin-bottom: 0;
+  }
+}
+
+.exersices__search-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media screen and (min-width: 768px) {
+  .exersices__search-btn-wrap {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .exersices__search-btn-wrap {
+    gap: 30px;
   }
 }
+
+/* Search form */
+
+.search__form {
+  position: relative;
+}
+
+.search__input {
+  padding: 12px 14px;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42em;
+  background-color: var(--color-white);
+  border-radius: 30px;
+}
+
+@media screen and (min-width: 768px) {
+  .search__input {
+    width: 273px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .search__input {
+    font-size: 16px;
+    line-height: 1.5em;
+  }
+}
+
+.search__input::placeholder {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42em;
+  color: var(--color-black);
+}
+
+@media screen and (min-width: 1440px) {
+  .search__input::placeholder {
+    font-size: 16px;
+    line-height: 1.5em;
+  }
+}
+
+.search__button {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+.search__icon {
+  padding: 0;
+  stroke: var(--color-black);
+  fill: var(--color-white);
+  transition: all var(--transition-dur-and-func);
+}
+
+.search__button:hover .search__icon {
+  transform: scale(1.1);
+}
+
 .exercises__btn.active {
   position: relative;
   padding: 0 0 4px;
-  /* font-family: DMSans-Regular; */
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
diff --git a/src/img/sprite.svg b/src/img/sprite.svg
index 95a2e11..2356cfc 100644
--- a/src/img/sprite.svg
+++ b/src/img/sprite.svg
@@ -118,5 +118,9 @@
 <symbol id="icon-arrow" viewBox="0 0 32 32">
 <path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6" d="M15 28l13-13M28 15l-13-13M28 15h-26"></path>
 </symbol>
+<symbol id="icon-search" viewBox="0 0 32 32">
+<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M14.667 25.333c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667z"></path>
+<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M28 28l-5.8-5.8"></path>
+</symbol>
 </defs>
 </svg>
diff --git a/src/js/12-exercises.js b/src/js/12-exercises.js
index 4bab225..9b57b5c 100644
--- a/src/js/12-exercises.js
+++ b/src/js/12-exercises.js
@@ -64,17 +64,3 @@ function renderExercises(data) {
     .join('');
   listItem.insertAdjacentHTML('beforeend', markup);
 }
-
-/**
- * Filter buttons toggle
- */
-document.addEventListener('DOMContentLoaded', () => {
-  const buttons = document.querySelectorAll('.exercises__btn');
-
-  buttons.forEach(button => {
-    button.addEventListener('click', () => {
-      buttons.forEach(btn => btn.classList.remove('active'));
-      button.classList.add('active');
-    });
-  });
-});
diff --git a/src/partials/03-exercises.html b/src/partials/03-exercises.html
index a09ba0c..24d725c 100644
--- a/src/partials/03-exercises.html
+++ b/src/partials/03-exercises.html
@@ -2,28 +2,33 @@
 <section class="section">
   <div class="exersices__container container">
     <h2 class="exersices__title">Exercises</h2>
-
-    <form class="search__form">
-      <input class="search__input" type="text" />
-      <button class="search__button" type="button">svg</button>
-    </form>
-    <ul class="exersices__list">
-      <li>
-        <button class="exercises__btn btnFilters active" type="button">
-          Muscles
-        </button>
-      </li>
-      <li>
-        <button class="exercises__btn btnFilters" type="button">
-          Body parts
+    <div class="exersices__search-btn-wrap">
+      <form class="search__form">
+        <input class="search__input" type="text" placeholder="Search" />
+        <button class="search__button" type="button">
+          <svg class="search__icon" width="18" height="18">
+            <use href="./img/sprite.svg#icon-search"></use>
+          </svg>
         </button>
-      </li>
-      <li>
-        <button class="exercises__btn btnFilters" type="button">
-          Equipment
-        </button>
-      </li>
-    </ul>
+      </form>
+      <ul class="exersices__list">
+        <li>
+          <button class="exercises__btn btnFilters active" type="button">
+            Muscles
+          </button>
+        </li>
+        <li>
+          <button class="exercises__btn btnFilters" type="button">
+            Body parts
+          </button>
+        </li>
+        <li>
+          <button class="exercises__btn btnFilters" type="button">
+            Equipment
+          </button>
+        </li>
+      </ul>
+    </div>
   </div>
 
   <div class="quote-filters__container container">
@@ -79,3 +84,16 @@ <h4 class="aside__white-card-subtitle">Daily norm of sports</h4>
     </div>
   </div>
 </section>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const buttons = document.querySelectorAll('.exercises__btn');
+
+    buttons.forEach(button => {
+      button.addEventListener('click', () => {
+        buttons.forEach(btn => btn.classList.remove('active'));
+        button.classList.add('active');
+      });
+    });
+  });
+</script>