Adding new searchbox

2020-06-06 04:28:12 +01:00
parent 2f82ed660b
commit 75e0f67a2c
3 changed files with 51 additions and 43 deletions
--- a/src/scss/search.scss
+++ b/src/scss/search.scss
@@ -1,43 +1,43 @@
-.searchbar {
-    margin-bottom: auto;
-    margin-top: auto;
-    height: 60px;
-    background-color: #353b48;
-    border-radius: 30px;
-    padding: 10px;
-}
+// .searchbar {
+//     margin-bottom: auto;
+//     margin-top: auto;
+//     height: 60px;
+//     background-color: #353b48;
+//     border-radius: 30px;
+//     padding: 10px;
+// }

-.search_input {
-    color: white;
-    border: 0;
-    outline: 0;
-    background: none;
-    width: 0;
-    caret-color: transparent;
-    line-height: 40px;
-    transition: width 0.4s linear;
-}
+// .search_input {
+//     color: white;
+//     border: 0;
+//     outline: 0;
+//     background: none;
+//     width: 0;
+//     caret-color: transparent;
+//     line-height: 40px;
+//     transition: width 0.4s linear;
+// }

-.searchbar:hover>.search_input {
-    padding: 0 10px;
-    width: 450px;
-    caret-color: red;
-    transition: width 0.4s linear;
-}
+// .searchbar:hover>.search_input {
+//     padding: 0 10px;
+//     width: 450px;
+//     caret-color: red;
+//     transition: width 0.4s linear;
+// }

-.searchbar:hover>.search_icon {
-    background: white;
-    color: #e74c3c;
-}
+// .searchbar:hover>.search_icon {
+//     background: white;
+//     color: #e74c3c;
+// }

-.search_icon {
-    height: 40px;
-    width: 40px;
-    float: right;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    color: white;
-    text-decoration: none;
-}
+// .search_icon {
+//     height: 40px;
+//     width: 40px;
+//     float: right;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     border-radius: 50%;
+//     color: white;
+//     text-decoration: none;
+// }