Adding font files

package.json

@@ -1,10 +1,10 @@
 {
   "name": "@hibas123/theme",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "main": " ",
   "files": [
-    "out/*",
+    "out/*.css",
     "src/*"
   ],
   "scripts": {

src/base.scss

@@ -1,4 +1,12 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+/* latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Roboto'), local('Roboto-Regular'), url(../Roboto-Regular.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 :root {
     // --primary: #1e88e5; 

src/base/_btn.scss

@@ -1,4 +1,4 @@
-.btn {
+.btn-flat {
     position: relative;
     color: black;
     border: 0;
@@ -9,6 +9,10 @@
     transition: .05s background-color linear;
 }
 
+.btn {
+    @extend .btn-flat;
+}
+
 .btn-primary {
     background: $primary !important;
     color: $on-primary !important;
@@ -37,6 +41,17 @@
     }
 }
 
+.btn-icon {
+    background-color: unset !important;
+    border: 0 !important;
+    box-shadow: unset !important;
+
+    >svg {
+        height: 1.5rem;
+        width: 1.5rem;
+    }
+}
+
 .fab {
     border-radius: 50%;
     width: 2.5rem;

src/old/_btn.scss

@@ -0,0 +1,88 @@
+.btn {
+    @if $theme {
+        background: $button-color;
+        @include Elevation(1);
+
+        &:hover {
+            background: darken($button-color, 5%);
+        }
+
+        &:active {
+            background: lighten($button-color, 5%);
+        }
+    }
+
+    @else {
+        position: relative;
+        color: black;
+        border: 0;
+        margin: .3rem;
+        padding: .5rem;
+        font-weight: 500;
+        text-transform: uppercase;
+        transition: .05s background-color linear;
+    }
+}
+
+.btn-primary {
+    @if $theme {
+        background: $primary !important;
+        color: $on-primary !important;
+    }
+
+    @else {
+        &:hover {
+            filter: brightness(.95);
+        }
+
+        &:active {
+            filter: brightness(1.05);
+        }
+    }
+}
+
+.btn-secondary {
+    @if $theme {
+        background: $secondary !important;
+        color: $on-primary !important;
+    }
+
+    @else {
+
+        &:hover {
+            filter: brightness(.95);
+        }
+
+        &:active {
+            filter: brightness(1.05);
+        }
+    }
+}
+
+.fab {
+    @if $theme {
+        @include Elevation(6);
+        background: $button-color;
+    }
+
+    @else {
+
+        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/old/_header.scss

@@ -0,0 +1,41 @@
+.header {
+    @if $theme {
+        @include Elevation(3);
+        background: $primary;
+        color: $on-primary;
+    }
+
+    @else {
+
+        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/old/_input.scss

@@ -0,0 +1,39 @@
+.inp {
+    // background: $background;
+    background: unset;
+    color: $on-background;
+    border: 1px grey solid;
+    padding: 0 .5rem;
+    height: 2rem;
+    display: inline-block;
+    min-width: 10rem;
+
+    &:focus {
+        border-color: $primary;
+    }
+
+    // &disabled {
+    //     background: darken-brighten-color($background, 10%)
+    // }
+}
+
+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/old/_list.scss

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

src/old/_modal.scss

@@ -0,0 +1,61 @@
+.modal {
+    background: $background;
+    // background: rgba(0, 0, 0, 0.04);
+    @include Elevation(24);
+    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;
+}

src/theme/_btn.scss

@@ -1,5 +1,4 @@
-.btn {
+.btn-flat {
-    @include Elevation(1);
     background: $button-color;
 
     &:hover {
@@ -11,6 +10,11 @@
     }
 }
 
+.btn {
+    @include Elevation(1);
+    @extend .btn-flat;
+}
+
 .fab {
     @include Elevation(8);
     background: $button-color;

src/theme/_list.scss

@@ -2,4 +2,8 @@
     li:hover {
         background: darken-brighten-color($background, 5%);
     }
+}
+
+.list-selected {
+    background: darken-brighten-color($background, 10%);
 }