refactor: restructre CSS rules

s-pace · Aug 24, 2020 · 4ccf48c · 4ccf48c
1 parent 4edc8d8
commit 4ccf48c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 46 deletions.
diff --git a/src/components/Docsearch.js b/src/components/Docsearch.js
@@ -8,10 +8,6 @@ const DocSearch = () => {
       <Global
         styles={css`
           :root {
-            a {
-              border-bottom-style: none;
-            }
-
             --docsearch-primary-color: #ff6b81;
             --docsearch-text-color: rgb(245, 246, 247);
             --docsearch-container-background: rgba(9, 10, 17, 0.8);
@@ -43,15 +39,6 @@ const DocSearch = () => {
             --docsearch-logo-color: rgb(255, 255, 255);
             --docsearch-muted-color: rgb(127, 132, 151);
 
-            .DocSearch-Button {
-              margin: 10px 10px;
-              height: 39px;
-            }
-
-            .DocSearch-Button-Placeholder {
-              width: 100%;
-              text-align: left;
-            }
             .DocSearch-Button {
               --docsearch-searchbox-background: rgb(235, 237, 240);
               --docsearch-searchbox-focus-background: #fff;
@@ -66,16 +53,32 @@ const DocSearch = () => {
               --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
                 inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
             }
+          }
 
-            @media (max-width: 750px) {
-              .DocSearch-Button-KeySeparator,
-              .DocSearch-Button-Key {
-                display: flex;
-              }
+          .DocSearch-Button {
+            margin: 10px 10px;
+            height: 39px;
+          }
 
-              .DocSearch-Button-Placeholder {
-                display: flex;
-              }
+          .DocSearch-Button-Placeholder {
+            width: 100%;
+            text-align: left;
+          }
+
+          .DocSearch {
+            a {
+              border-bottom-style: none;
+            }
+          }
+
+          @media (max-width: 750px) {
+            .DocSearch-Button-KeySeparator,
+            .DocSearch-Button-Key {
+              display: flex;
+            }
+
+            .DocSearch-Button-Placeholder {
+              display: flex;
             }
           }
         `}

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -9,10 +9,6 @@ const Search = () => {
       <Global
         styles={css`
           :root {
-            a {
-              border-bottom-style: none;
-            }
-
             --docsearch-primary-color: #ff6b81;
             --docsearch-text-color: rgb(245, 246, 247);
             --docsearch-container-background: rgba(9, 10, 17, 0.8);
@@ -44,6 +40,23 @@ const Search = () => {
             --docsearch-logo-color: rgb(255, 255, 255);
             --docsearch-muted-color: rgb(127, 132, 151);
 
+            .DocSearch-Button {
+                --docsearch-searchbox-background: rgb(235, 237, 240);
+                --docsearch-searchbox-focus-background: #fff;
+                --docsearch-text-color: rgb(28, 30, 33);
+                --docsearch-muted-color: rgb(150, 159, 175);
+                --docsearch-key-gradient: linear-gradient(
+                  -225deg,
+                  rgb(213, 219, 228) 0%,
+                  rgb(248, 248, 248) 100%
+                );
+                --docsearch-searchbox-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
+                --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
+                  inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+              }
+            )
+            
+
             .DocSearch-Button {
               margin: 10px 10px;
               height: 39px;
@@ -53,30 +66,21 @@ const Search = () => {
               width: 100%;
               text-align: left;
             }
-            .DocSearch-Button {
-              --docsearch-searchbox-background: rgb(235, 237, 240);
-              --docsearch-searchbox-focus-background: #fff;
-              --docsearch-text-color: rgb(28, 30, 33);
-              --docsearch-muted-color: rgb(150, 159, 175);
-              --docsearch-key-gradient: linear-gradient(
-                -225deg,
-                rgb(213, 219, 228) 0%,
-                rgb(248, 248, 248) 100%
-              );
-              --docsearch-searchbox-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
-              --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
-                inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+
+          .DocSearch {
+            a {
+              border-bottom-style: none;
             }
+          }
 
-            @media (max-width: 750px) {
-              .DocSearch-Button-KeySeparator,
-              .DocSearch-Button-Key {
-                display: flex;
-              }
+          @media (max-width: 750px) {
+            .DocSearch-Button-KeySeparator,
+            .DocSearch-Button-Key {
+              display: flex;
+            }
 
-              .DocSearch-Button-Placeholder {
-                display: flex;
-              }
+            .DocSearch-Button-Placeholder {
+              display: flex;
             }
           }
         `}