Migrate Vanilla CSS to styled-components

1 files changed, 12 insertions, 91 deletions

diff --git a/src/console/components/console.scss b/src/console/components/console.scss
index ccb769b..c9ffae7 100644
--- a/src/console/components/console.scss
+++ b/src/console/components/console.scss
@@ -33,6 +33,18 @@
 html, body, * {
   margin: 0;
   padding: 0;
+
+  font-style: normal;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+input {
+  font-style: normal;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 16px;
 }
 
 body {
@@ -47,95 +59,4 @@ body {
   bottom: 0;
   margin: 0;
   padding: 0;
-
-  @mixin console-font {
-    font-style: normal;
-    font-family: monospace;
-    font-size: 12px;
-    line-height: 16px;
-  }
-
-  &-command-wrapper {
-    border-top: 1px solid gray;
-  }
-
-  &-completion {
-    @include console-font;
-
-    &-title {
-      background-color: var(--completion-title-background);
-      color: var(--completion-title-foreground);
-      font-weight: bold;
-      margin: 0;
-      padding: 0;
-    }
-
-    &-item {
-      background-color: var(--completion-item-background);
-      color: var(--completion-item-foreground);
-
-      padding-left: 1.5rem;
-      background-position: 0 center;
-      background-size: contain;
-      background-repeat: no-repeat;
-      white-space: pre;
-
-      &.vimvixen-completion-selected {
-        background-color: var(--completion-selected-background);
-        color: var(--completion-selected-foreground);
-      }
-
-      &-caption {
-        display: inline-block;
-        width: 40%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      &-url {
-        display: inline-block;
-        color: var(--completion-item-description-foreground);
-        width: 60%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-
-  &-message {
-    @include console-font;
-
-    border-top: 1px solid gray;
-  }
-
-  &-error {
-    background-color: var(--console-error-background);
-    color: var(--console-error-foreground);
-    font-weight: bold;
-  }
-
-  &-info {
-    background-color: var(--console-info-background);
-    color: var(--console-info-foreground);
-    font-weight: normal;
-  }
-
-  &-command {
-    background-color: var(--command-background);
-    color: var(--command-foreground);
-    display: flex;
-
-    &-prompt {
-      @include console-font;
-    }
-
-    &-input {
-      border: none;
-      flex-grow: 1;
-      background-color: var(--command-background);
-      color: var(--command-foreground);
-
-      @include console-font;
-    }
-  }
 }