Replace all glyphicon icons

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / misc / simple-search-input.component.scss

diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 591b04fb2f60514f09baf44cdc3fdfabbaa4d3fc..ee0f7a8d20a95469ec0d737a58abb6fb78d47e0f 100644 (file)
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -1,29 +1,31 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
-span {
-  opacity: .6;
-  
-  &:focus-within {
-    opacity: 1;
-  }
+.root {
+  display: flex;
 }
 
-my-global-icon {
-  height: 18px;
-  position: relative;
-  top: -2px;
+.root > my-global-icon {
+  @include margin-left(10px);
+
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+  color: pvar(--mainColor);
+
+  &:hover {
+    color: pvar(--mainHoverColor);
+  }
 }
 
 input {
-  @include peertube-input-text(150px);
+  @include peertube-input-text(200px);
 
-  height: 22px; // maximum height for the account/video-channels links
-  padding-left: 10px;
-  background-color: transparent;
-  border: none;
-
-  &::placeholder {
-    font-size: 15px;
+  &:focus {
+    box-shadow: 0 0 5px 0 #a5a5a5;
   }
 }
+
+.input-group > my-global-icon {
+  width: 20px;
+}