Atualizações 30/01/2025

mate-academy · Jan 30, 2025 · 81e5fb8 · 81e5fb8
1 parent a3ba88d
commit 81e5fb8
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 7 deletions.
diff --git a/src/index.html b/src/index.html
@@ -24,11 +24,11 @@
       data-qa="big"
     >
       <div class="container__big">
-        <img
+        <!-- <img
           src="./images/Search.svg"
           alt="Search"
           class="icon__big"
-        />
+        /> -->
         <input
           type="text"
           class="search__big"
@@ -42,11 +42,11 @@
       data-qa="small"
     >
       <div class="container__small">
-        <img
+        <!-- <img
           src="./images/Search.svg"
-          class="icon__small"
           alt="Search"
-        />
+          class="icon__big"
+        /> -->
         <input
           type="text"
           class="search__small"

diff --git a/src/styles/blocks/body.css b/src/styles/blocks/body.css
@@ -6,4 +6,5 @@ body {
   margin: 0;
   padding: 0;
   font-weight: 300;
+  color: rgba(61, 78, 97, 1);
 }
diff --git a/src/styles/blocks/search__big.css b/src/styles/blocks/search__big.css
@@ -1,3 +1,17 @@
+/* .container__big {
+  margin: 20px 7px;
+  width: 100%;
+  height: 70px;
+  gap: 17px;
+  border: 1px;
+  border-style: solid;
+  border-color: #e1e7ed;
+  box-shadow: 0 1px 8px 0 #3d4e611a;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+} */
+
 .container__big {
   margin: 20px 7px;
   width: 100%;
@@ -10,6 +24,11 @@
   border-radius: 4px;
   display: flex;
   align-items: center;
+  background-image: url(../../images/Search.svg);
+  background-repeat: no-repeat;
+  background-position: 25px 24px;
+  background-size: 19px;
+  padding-left: 62px;
 }
 
 .container__big:hover {
@@ -36,8 +55,9 @@
 
 .search__big:focus {
   outline: none;
-  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
   font-weight: bold;
   border-radius: 0 4px 4px 0;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 3px 8px 0 #3d4e6133;
+  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
 }
diff --git a/src/styles/blocks/search__small.css b/src/styles/blocks/search__small.css
@@ -1,3 +1,17 @@
+/* .container__small {
+  margin: 20px 7px;
+  width: 100%;
+  height: 42px;
+  gap: 9px;
+  border: 1px;
+  border-style: solid;
+  border-color: #e1e7ed;
+  box-shadow: 0 1px 8px 0 #3d4e611a;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+} */
+
 .container__small {
   margin: 20px 7px;
   width: 100%;
@@ -10,6 +24,11 @@
   border-radius: 4px;
   display: flex;
   align-items: center;
+  background-image: url(../../images/Search.svg);
+  background-repeat: no-repeat;
+  background-position: 15px 15px;
+  background-size: 11px;
+  padding-left: 35px;
 }
 
 .container__small:hover {
@@ -36,8 +55,9 @@
 
 .search__small:focus {
   outline: none;
-  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
   font-weight: bold;
   border-radius: 0 4px 4px 0;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 3px 8px 0 #3d4e6133;
+  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
 }