1 files changed, 145 insertions, 0 deletions
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
new file mode 100644
index 000000000..fc5f2410c
--- /dev/null
+++ b/src/client/views/linking/LinkEditor.scss
@@ -0,0 +1,145 @@
+@import "../globalCssVariables";
+
+.linkEditor {
+    width: 100%;
+    height: auto;
+    font-size: 12px; // TODO
+}
+
+.linkEditor-back {
+    margin-bottom: 6px;
+}
+
+.linkEditor-info {
+    border-bottom: 0.5px solid $light-color-secondary; 
+    padding-bottom: 6px;
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: space-between;
+
+    .linkEditor-linkedTo {
+        width: calc(100% - 26px);
+    }
+}
+
+.linkEditor-button {
+    width: 20px;
+    height: 20px;
+    margin-left: 6px;
+    padding: 0;
+    // font-size: 12px;
+    border-radius: 10px;
+
+    &:disabled {
+        background-color: gray;
+    }
+}
+
+.linkEditor-groupsLabel {
+    display: flex;
+    justify-content: space-between;
+}
+
+.linkEditor-group {
+    background-color: $light-color-secondary; 
+    padding: 6px;
+    margin: 3px 0;
+    border-radius: 3px;
+
+    .linkEditor-group-row {
+        display: flex;
+        margin-bottom: 3px;
+
+        .linkEditor-group-row-label {
+            margin-right: 6px;
+        }
+    }
+
+    .linkEditor-metadata-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 6px;
+
+        .linkEditor-error {
+            border-color: red;
+        }
+
+        input {
+            width: calc(50% - 16px);
+            height: 20px;
+        }
+
+        button {
+            width: 20px;
+            height: 20px;
+            margin-left: 3px;
+            padding: 0;
+            font-size: 10px;
+        }
+    }
+}
+
+
+.linkEditor-dropdown {
+    width: 100%;
+    position: relative;
+    z-index: 999;
+
+    input {
+        width: 100%;
+    }
+
+    .linkEditor-options-wrapper {
+        width: 100%;
+        position: absolute;
+        top: 19px;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .linkEditor-option {
+        background-color: $light-color-secondary;
+        border: 1px solid $intermediate-color;
+        border-top: 0;
+        padding: 3px;
+        cursor: pointer;
+
+        &:hover {
+            background-color: lightgray;
+        }
+
+        &.onDown {
+            background-color: gray;
+        }
+    }
+}
+
+.linkEditor-typeButton {
+    background-color: transparent;
+    color: $dark-color;
+    width: 100%;
+    height: 20px;
+    padding: 0 3px;
+    padding-bottom: 2px;
+    text-align: left;
+    text-transform: none;
+    letter-spacing: normal;
+    font-size: 12px;
+    font-weight: bold;
+
+    &:hover {
+        background-color: $light-color;
+    }
+}
+
+.linkEditor-group-buttons {
+    height: 20px;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 5px;
+
+    .linkEditor-button {
+        margin-left: 6px;
+    }
+}
+\ No newline at end of file