Exporting base styles

src/base/_btn.scss

@@ -0,0 +1,58 @@
+.btn {
+    position: relative;
+    color: black;
+    border: 0;
+    margin: .3rem;
+    padding: .5rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    transition: .05s background-color linear;
+}
+
+.btn-primary {
+    background: $primary !important;
+    color: $on-primary !important;
+
+    &:hover {
+        filter: brightness(.95);
+    }
+
+    &:active {
+        filter: brightness(1.05);
+    }
+}
+
+.btn-secondary {
+
+    background: $secondary !important;
+    color: $on-primary !important;
+
+
+    &:hover {
+        filter: brightness(.95);
+    }
+
+    &:active {
+        filter: brightness(1.05);
+    }
+}
+
+.fab {
+    border-radius: 50%;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin: .5rem;
+    line-height: 1.5rem;
+    font-size: 1.5rem;
+
+    >svg {
+        height: 1.5rem;
+        width: 1.5rem;
+    }
+
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+
+    border: none;
+}

src/base/_card.scss

@@ -0,0 +1,3 @@
+.card {
+    padding: 1rem;
+}

src/base/_global.scss

@@ -0,0 +1,25 @@
+* {
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    font-size: $default-font-size;
+}
+
+
+html,
+body {
+    margin: 0;
+    min-height: 100vh;
+    min-width: 100vw;
+}
+
+.margin {
+    margin-bottom: 1.5rem;
+}
+
+.container {
+    box-sizing: content-box;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin: 0 auto;
+    max-width: 50rem;
+}

src/base/_header.scss

@@ -0,0 +1,35 @@
+.header {
+    background: $primary !important;
+    color: $on-primary !important;
+
+    display: flex;
+    justify-content: space-between;
+    padding: .75rem;
+    margin-bottom: .5rem;
+
+    >* {
+        margin: 0;
+        background: $primary;
+        color: $on-primary;
+    }
+
+    .header-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex-grow: 1;
+        margin: 0 1rem;
+    }
+
+    .header-icon-button {
+        display: block;
+        margin-top: auto;
+        margin-bottom: auto;
+        min-width: $default-font-size;
+
+        >svg {
+            height: $default-font-size;
+            width: $default-font-size;
+        }
+    }
+}

src/base/_input.scss

@@ -0,0 +1,33 @@
+.inp {
+    background: unset;
+    border: 1px grey solid;
+    padding: 0 .5rem;
+    height: 2rem;
+    display: inline-block;
+    min-width: 10rem;
+
+    &:focus {
+        border-color: $primary;
+    }
+}
+
+textarea.inp {
+    height: unset !important;
+    min-height: 6rem !important;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    @extend .margin;
+
+    input {
+        @extend .inp;
+    }
+
+    label {
+        display: inline-block;
+        margin-bottom: .3rem;
+        margin-left: .5rem;
+    }
+}

src/base/_list.scss

@@ -0,0 +1,21 @@
+.list {
+    padding: 0;
+    list-style: none;
+
+    li {
+        padding: .5rem;
+    }
+}
+
+.list-divider {
+    li:nth-child(n+2) {
+        border-top: 1px solid rgb(128, 128, 128);
+    }
+}
+
+
+// .list-clickable {
+//     // li:hover {
+//     //     background: darken-brighten-color($background, 5%);
+//     // }
+// }

src/base/_modal.scss

@@ -0,0 +1,58 @@
+.modal {
+    padding: 1rem;
+
+    margin: auto;
+    max-width: 600px;
+    min-width: 250px;
+    width: calc(100% - 2rem);
+
+    max-height: calc(100vh - 2rem);
+
+    transform: translate(-50%, -50%);
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+
+    .modal-title {
+        font-weight: 600;
+        font-size: 1.2rem;
+        margin-bottom: .5rem;
+    }
+
+    .modal-content {
+        overflow-y: auto;
+        max-height: calc(100vh - 10rem);
+        // margin: auto;
+    }
+
+    .modal-action {
+        margin-top: .5rem;
+        display: flex;
+
+        :first-child {
+            margin-left: auto;
+        }
+
+        button {
+            @extend .btn;
+        }
+    }
+
+    transform-origin: center;
+    animation: growModalBox .2s linear;
+}
+
+@keyframes growModalBox {
+    from {
+        filter: opacity(0);
+    }
+
+    to {
+        filter: opacity(1);
+    }
+}
+
+.modal-hidden {
+    display: none;
+}