move scss folder under popup

src/popup/scss/base.scss

@@ -0,0 +1,304 @@
+@import "variables.scss";
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+html, body {
+    background-color: $background-color;
+    font-family: $font-family-sans-serif;
+    font-size: $font-size-base;
+    color: $text-color;
+    line-height: $line-height-base;
+    -webkit-font-smoothing: antialiased;
+}
+
+body {
+    width: 375px !important;
+    height: 600px !important;
+    overflow: hidden;
+
+    &.body-sm {
+        width: 375px !important;
+        height: 500px !important;
+    }
+
+    &.body-xs {
+        width: 375px !important;
+        height: 300px !important;
+    }
+
+    &.body-full {
+        width: 100% !important;
+        height: 100% !important;
+    }
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: $font-family-sans-serif;
+    color: $text-color;
+}
+
+p {
+    margin-bottom: 10px;
+}
+
+ul, ol {
+    margin-bottom: 10px;
+}
+
+img {
+    border: none;
+}
+
+a {
+    color: $brand-primary;
+    text-decoration: none;
+
+    &:hover, &:focus {
+        color: darken($brand-primary, 6%);
+    }
+}
+
+input, select, textarea, button {
+    font-size: $font-size-base;
+    font-family: $font-family-sans-serif;
+}
+
+button {
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+textarea {
+    resize: vertical;
+}
+
+content::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+content::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+content::-webkit-scrollbar-thumb {
+    background-color: rgba(100,100,100,.2);
+    border-radius: 10px;
+    margin-right: 1px;
+
+    &:hover {
+        background-color: rgba(100,100,100,.4);
+    }
+}
+
+header {
+    background-color: $brand-primary;
+    min-height: 44px;
+    max-height: 44px;
+    color: white;
+    display: flex;
+
+    .left, .right {
+        flex: 1;
+        display: flex;
+        min-width: -webkit-min-content; /* Workaround to Chrome bug */
+        .header-icon {
+            margin-right: 5px;
+        }
+    }
+
+    .right {
+        justify-content: flex-end;
+    }
+
+    .center {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        min-width: 0;
+    }
+
+    app-pop-out > button, div > button, div > a {
+        background: $brand-primary;
+        border: none;
+        color: white;
+        padding: 0 10px;
+        text-decoration: none;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        &:hover, &:focus {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: white;
+        }
+
+        &:focus {
+            text-decoration: underline;
+        }
+
+        i + span {
+            margin-left: 5px;
+        }
+    }
+
+    app-pop-out {
+        display: flex;
+    }
+
+    .title {
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .search {
+        padding: 7px 10px;
+        width: 100%;
+        text-align: left;
+        position: relative;
+        display: flex;
+
+        .fa {
+            position: absolute;
+            top: 15px;
+            left: 10px;
+            color: lighten($brand-primary, 30%);
+        }
+
+        input {
+            width: 100%;
+            margin: 0;
+            background: darken($brand-primary, 8%);
+            border: none;
+            color: white;
+            padding: 5px 10px 5px 30px;
+            border-radius: $border-radius;
+
+            &:focus {
+                border-radius: $border-radius;
+                outline: none;
+                background: darken($brand-primary, 10%);
+            }
+
+            &::-webkit-input-placeholder {
+                color: lighten($brand-primary, 35%);
+            }
+        }
+    }
+
+    .left + .search {
+        padding-left: 0;
+    }
+
+    .search + .right {
+        margin-left: -10px;
+    }
+}
+
+.content {
+    padding: 15px;
+}
+
+.tabs {
+    width: 100%;
+    height: 55px;
+    background-color: white;
+    border-top: 1px solid $border-color-dark;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+
+    ul {
+        width: 100%;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+            width: 25%;
+            float: left;
+            display: inline-block;
+            padding: 0;
+            margin: 0;
+
+            a {
+                text-align: center;
+                display: block;
+                padding: 7px 0;
+                text-decoration: none;
+                color: $gray-light;
+                font-size: 12px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:hover, &:focus {
+                    background-color: $list-item-hover;
+                }
+
+                i {
+                    display: block;
+                    margin-bottom: 2px;
+                    text-align: center;
+                }
+            }
+
+            &.active {
+                a {
+                    color: $brand-primary;
+                }
+            }
+        }
+    }
+}
+
+app-root {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 980;
+}
+
+content {
+    position: absolute;
+    top: 44px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: $background-color;
+
+    &.no-header {
+        top: 0;
+    }
+}
+
+.tab-page {
+    content {
+        bottom: 55px;
+    }
+}
+
+.no-items {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    .fa {
+        margin-bottom: 10px;
+        color: $list-icon-color;
+    }
+}