font picker style updated

proj/fonts/fonts.js

@@ -1,63 +1,3 @@
-Vue.component('icon', {
-  template: `
-    <div class="single-icon">    
-      <span 
-        v-bind:class="this.class"
-        v-on:click="copyToClipboard(utf8)" 
-        class="actual-icon"
-        ref="icon"></span>
-      <span 
-      class="copy-icon-popup" 
-      v-bind:class="{ 'success': isCopied}" 
-      ref="element">Copied!</span>
-      <p 
-        class="icon-name"
-        v-on:click="copyToClipboard(span)"
-        ref="span">{{ this.name }}</p>
-    </div>
-    `,
-  props: ['name'],
-  data() {
-    return {
-      utf8: '',
-      isCopied: false
-    }
-  },
-  computed: {
-    class: function () {
-      return "brz9-icon-" + this.name;
-    },
-    span: function () {
-      return '<span class="brz9-icon-' + this.name + '"></span>';
-    }
-  },
-  methods: {
-    copyToClipboard(text) {
-      const textarea = document.createElement('textarea')
-      textarea.value = text
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
-      this.copyDone();
-    },
-    copyDone() {
-      this.isCopied = true;
-      this.$refs.element.addEventListener('animationend', () => {
-        this.isCopied = false;
-      });
-    }
-  },
-  mounted() {
-    query = '.' + this.class
-    let span = document.querySelector(query)
-    let style = window.getComputedStyle(span, ':before')
-    let content = style.getPropertyValue('content')
-    console.log(content)
-    this.utf8 = content.replace('"', '').replace('"', '')
-  }
-})
-
 Vue.component('fontdemo', {
   template: `
     <div class="single-font">
@@ -1396,5 +1336,6 @@ let vm = new Vue({
       if (a.name > b.name) return 1
       return 0
     } )
+    this.selection = this.typefaceList
   }
 }).$mount('#root')

proj/fonts/index.html

@@ -15,14 +15,17 @@
 
     <main>
         <h3>Fonts</h3>
-        <input v-model="testText" placeholder="Your text"/>
+        <input class="font-input" v-model="testText" placeholder="Your text"/>
         <nav class="font-nav">
             <span class="style-pick" v-on:click="updateSelectedTags('graphic')">Graphic</span>
         </nav>
-        <fontdemo v-for="font in this.selection" :typeface="font">{{ testText }}</fontdemo>
-<h4>All the fonts</h4>
-        <fontdemo v-for="font in this.typefaceList" :typeface="font">{{ testText }}</fontdemo>
     
+<h4>All the fonts</h4>
+        <div class="font-container">
+            <div class="font-content">
+                <fontdemo v-for="font in this.selection" :typeface="font">{{ testText }}</fontdemo>
+            </div>
+        </div>
     </main>
 
 </div>

proj/fonts/style.css

@@ -115,19 +115,36 @@ h2 {
     padding-top: 20px;
 }
 
-input {
-    width: 40vw;
+input.font-input {
+    width: 30vw;
     background-color: rgba(0,0,0,0);
     border: none;
     color: inherit;
     padding-bottom: 10px;
     border-bottom: 5px solid var(--fg);
+    display: inline-block;
 }
 
-
 input:focus {
     outline: none;
+}
 
+nav.font-nav {
+    display: inline-block;
+}
+
+nav.font-nav span.style-pick {
+    color: var(--fg);
+    padding: 5px;
+    font-weight: 500;
+    border: 5px solid var(--fg);
+    cursor: pointer;
+}
+
+nav.font-nav span.style-pick.selected {
+    background-color: var(--fg);
+    color: black;
+    mix-blend-mode: lighten;
 }
 
 
@@ -167,3 +184,51 @@ div.single-font footer span.copy-icon-popup {
     padding: 10px;
     translate: -30px;
 }
+
+.font-container {
+    position: relative;
+    max-height: 60vh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+.font-content {
+    position: relative;  
+  }
+
+
+.font-container::-webkit-scrollbar-track
+{
+	border-right: 5px solid var(--fg);
+    border-left: none;
+	background-color: rgba(0,0,0,0);
+}
+
+.font-container::-webkit-scrollbar
+{
+	width: 15px;
+	background-color: rgba(0,0,0,0);
+}
+
+.font-container::-webkit-scrollbar-thumb
+{
+	background-color: var(--fg);	
+}
+
+.font-container{
+    scrollbar-width: 15px;
+    scrollbar-color: var(--fg) rgba(255,255,255,0.1);
+}
+
+.font-container {
+    border-top: 5px solid var(--fg);
+    border-bottom: 5px solid var(--fg);
+}
+
+.font-content {
+    margin-top: -5px;
+    margin-bottom: -20px;
+    overflow-y: hidden;
+    overflow-x: hidden;
+
+}