split scss files

3 files changed, 110 insertions, 117 deletions

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 4c60710da..cba706602 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -30,15 +30,6 @@
         align-self: stretch;
     }
 
-    .searchBox-submit {
-        color: $dark-color;
-    }
-
-    .searchBox-submit:hover {
-        color: $main-accent;
-        transform: scale(1.05);
-        cursor: pointer;
-    }
 }
 
 .searchBox-results {
@@ -71,112 +62,4 @@
     display: flex;
     flex-direction: column;
     margin-right: 72px;
-
-    .search-item {
-        float: right;
-        position: relative;
-        z-index: 1000;
-        pointer-events: auto;
-        width: 500px;
-        background: $light-color-secondary;
-        justify-content: space-between;
-        align-items: center;
-        border-width: 0.11px;
-        border-style: none;
-        border-color: $intermediate-color;
-        border-bottom-style: solid;
-        padding: 10px;
-        white-space: nowrap;
-        font-size: 13px;
-        height: 70px;
-    }
-
-    .search-info {
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-    }
-
-    .main-search-info {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-    }
-
-    .search-item:hover {
-        transition: all 0.2s;
-        background: $lighter-alt-accent;
-    }
-
-    .search-title {
-        text-transform: uppercase;
-        text-align: left;
-        width: 8vw;
-        font-weight: bold;
-    }
-
-    .more-search-info {
-        text-align: left;
-    }
-
-    .link-count {
-        height: 25px;
-        width: 25px;
-        border-radius: 50%;
-        background: $dark-color;
-        color: $light-color-secondary;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
-    }
-
-    .search-type {
-        width: 25PX;
-        height: 25PX;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-
-    .searchBox-instances {
-        float: left;
-        display: inline-block;
-        opacity: 1;
-        width: 150px;
-        transition: all 0.2s ease;
-        color: black;
-        transform-origin: top right;
-        -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-        transform: scale(0);
-        height: 100%
-    }
-
-    .collection{
-        border-color: $darker-alt-accent;
-        border-bottom-style: solid;
-    }
-
-    .search-overview {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: flex-end;
-        height: 70px;
-    }
-
-    .parents{
-        background: $light-color-secondary;
-        padding: 10px;
-    }
-
-    .search-item:hover~.searchBox-instances, .searchBox-instances:hover {
-        opacity: 1;
-        background: $lighter-alt-accent;
-        -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-        transform: scale(1);
-    }
-
 }
\ No newline at end of file
diff --git a/src/client/views/SearchItem.scss b/src/client/views/SearchItem.scss
new file mode 100644
index 000000000..7ee51bb54
--- /dev/null
+++ b/src/client/views/SearchItem.scss
@@ -0,0 +1,109 @@
+@import "globalCssVariables";
+
+.search-item {
+    float: right;
+    position: relative;
+    z-index: 1000;
+    pointer-events: auto;
+    width: 500px;
+    background: $light-color-secondary;
+    justify-content: space-between;
+    align-items: center;
+    border-width: 0.11px;
+    border-style: none;
+    border-color: $intermediate-color;
+    border-bottom-style: solid;
+    padding: 10px;
+    white-space: nowrap;
+    font-size: 13px;
+    height: 70px;
+}
+
+.search-info {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+.main-search-info {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.search-item:hover {
+    transition: all 0.2s;
+    background: $lighter-alt-accent;
+}
+
+.search-title {
+    text-transform: uppercase;
+    text-align: left;
+    width: 8vw;
+    font-weight: bold;
+}
+
+.more-search-info {
+    text-align: left;
+}
+
+.link-count {
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    background: $dark-color;
+    color: $light-color-secondary;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 10px;
+}
+
+.search-type {
+    width: 25PX;
+    height: 25PX;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.searchBox-instances {
+    float: left;
+    display: inline-block;
+    opacity: 1;
+    width: 150px;
+    transition: all 0.2s ease;
+    color: black;
+    transform-origin: top right;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0);
+    height: 100%
+}
+
+.collection {
+    border-color: $darker-alt-accent;
+    border-bottom-style: solid;
+}
+
+.search-overview {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    height: 70px;
+}
+
+.parents {
+    background: $lighter-alt-accent;
+    padding: 10px;
+}
+
+.search-item:hover~.searchBox-instances,
+.searchBox-instances:hover {
+    opacity: 1;
+    background: $lighter-alt-accent;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+}
\ No newline at end of file
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 052c14acb..dfa1014f5 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -12,6 +12,7 @@ import { SearchUtil } from "../util/SearchUtil";
 import { Id } from "../../new_fields/FieldSymbols";
 import { CollectionDockingView } from "./collections/CollectionDockingView";
 import { observer } from "mobx-react";
+import "./SearchItem.scss";
 
 export interface SearchItemProps {
     doc: Doc;