Component box, css binding & copy css to clipboard added

Author: emilkowalski

package.json

@@ -8,7 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.6.6"
+    "raw-loader": "^1.0.0",
+    "vue": "^2.6.6",
+    "vue-clipboard2": "^0.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.0",

public/favicon.ico

@@ -1,15 +1,37 @@
 <template>
     <div id="app">
         <NavBar></NavBar>
+        <h3>Click on the animation to copy.</h3>
+        <div class="wrapper">
+            <Box :rawCss="borderLeftRight">Hover me</Box>
+            <Box></Box>
+            <Box></Box>
+            <Box></Box>
+            <Box></Box>
+            <Box></Box>
+            <Box></Box>
+            <Box></Box>
+            <Box></Box>
+            <Box></Box>
+        </div>
     </div>
 </template>
 
 <script>
 import NavBar from '@/components/NavBar.vue';
+import Box from '@/components/Box.vue';
+import rawCss from '@/styles/index';
 
 export default {
   name: 'app',
-  components: { NavBar },
+
+  components: { NavBar, Box },
+
+  data() {
+    return {
+      rawCss,
+    };
+  },
 };
 </script>
 
@@ -21,12 +43,28 @@ export default {
     }
 
     body {
-        background: #F3F7F9;
+        background: #fcfdff;
         font-family: europa, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         color: #474E51;
         margin: 0;
         padding: 0;
+        font-size: 1.6rem;
+    }
+
+    .wrapper {
+        width: 70%;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        justify-items: center;
+    }
+
+    h3 {
+        text-align: center;
+        font-size: 2rem;
+        margin-bottom: 4rem;
+        margin-top: 0;
     }
 </style>

src/App.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="box" v-clipboard:copy="css">
+        <div class="slot-wrapper">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'Box.vue',
+
+  data() {
+    return {
+      css: this.rawCss,
+    };
+  },
+
+  props: {
+    rawCss: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onCopy(e) {
+      alert(`You just copied: ${e.text}`);
+    },
+    onError(e) {
+      alert('Failed to copy texts');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/assets/logo.png

@@ -16,17 +16,18 @@ export default {
 
 <style lang="scss" scoped>
     .wrapper {
-        width: 80%;
+        width: 75%;
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 20px 0;
+        padding: 4rem 0;
     }
 
     h1 {
         font-size: 2.6rem;
         display: inline-block;
+
         span {
             color: #5878F3;
         }
@@ -35,20 +36,31 @@ export default {
         display: inline-block;
         color: #D8ECF6;
         font-size: 1.6rem;
-        border-radius: 40px;
+        border-radius: 4rem;
         background: #5878F3;
-        width: 160px;
-        padding: 10px 0;
+        width: 16rem;
+        padding: 1rem 0;
         text-align: center;
         text-decoration: none;
-        box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+        box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
+
         &:last-of-type {
             background: #fff;
             color: #5878F3;
+
+            &:hover {
+                background: darken(#fff, 3);
+                color: #5878F3;
+            }
         }
+
+        &:hover {
+            background: lighten(#5878F3, 3);
+            color: lighten(#D8ECF6, 3);
+        }
+
         &:not(:last-child) {
-            margin-right: 50px;
+            margin-right: 5rem;
         }
     }
-
 </style>

src/components/Box.vue

@@ -1,7 +1,11 @@
 import Vue from 'vue';
+import VueClipboard from 'vue-clipboard2';
 import App from './App.vue';
 
+import './styles/borderLeftRight.css';
+
 Vue.config.productionTip = false;
+Vue.use(VueClipboard);
 
 new Vue({
   render: h => h(App),

src/components/NavBar.vue

@@ -0,0 +1,22 @@
+.slot-wrapper {
+  display: inline-block;
+  position: relative;
+  color: #474E51;
+  cursor: pointer;
+}
+.slot-wrapper::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #5878F3;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+.slot-wrapper:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}

src/main.js

@@ -0,0 +1,6 @@
+import borderLeftRight from '!raw-loader!./borderLeftRight.css';
+
+
+export default {
+  borderLeftRight,
+};

src/styles/borderLeftRight.css

@@ -0,0 +1,10 @@
+module.exports = {
+  configureWebpack: {
+    rules: [
+      {
+        test: /\.txt$/i,
+        use: 'raw-loader',
+      },
+    ],
+  },
+};