move search styles to Folder CSS module

Author: severo

src/components/Folder.tsx

@@ -90,7 +90,7 @@ export default function Folder({ source }: FolderProps) {
   return <Layout error={error} title={source.prefix}>
     <Breadcrumb source={source}>
       <div className='top-actions'>
-        <input autoFocus className='search' placeholder='Search...' ref={searchRef} />
+        <input autoFocus className={cn(styles.search, customClass?.search)} placeholder='Search...' ref={searchRef} />
       </div>
     </Breadcrumb>
 

src/hooks/useConfig.ts

@@ -21,6 +21,7 @@ export interface Config {
     markdownView?: string
     path?: string
     progressBar?: string
+    search?: string
     sideBar?: string
     slideCloseButton?: string
     slidePanel?: string

src/styles/Folder.module.css

@@ -65,3 +65,27 @@
     }
   }
 }
+
+/* search */
+.search {
+  background: #fff url("../assets/search.svg") no-repeat center right 8px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  flex-shrink: 1;
+  font-size: 12px;
+  height: 24px;
+  min-width: 0;
+  outline: none;
+  padding: 4px 20px 2px 8px;
+  width: 100px;
+  transition-duration: 0.3s;
+  transition-property: border, width;
+
+  &:focus {
+    border-color: #778;
+    box-shadow: 0 0 1px #556;
+    color: #444;
+    padding-left: 8px;
+    width: 180px;
+  }
+}

src/styles/app.css

@@ -68,26 +68,4 @@ a:hover {
 
 .top-actions {
   left: auto;
-}
-/* search */
-input.search {
-  background: #fff url("../assets/search.svg") no-repeat center right 8px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  flex-shrink: 1;
-  font-size: 12px;
-  height: 24px;
-  min-width: 0;
-  outline: none;
-  padding: 4px 20px 2px 8px;
-  width: 100px;
-  transition-duration: 0.3s;
-  transition-property: border, width;
-}
-input.search:focus {
-  border-color: #778;
-  box-shadow: 0 0 1px #556;
-  color: #444;
-  padding-left: 8px;
-  width: 180px;
-}
+}