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',
+      },
+    ],
+  },
+};

src/styles/index.js

@@ -1959,6 +1959,15 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clipboardy@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef"
@@ -2621,6 +2630,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3788,6 +3802,13 @@ globby@^9.0.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   version "4.1.15"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
@@ -6357,6 +6378,14 @@ raw-body@2.3.3:
     iconv-lite "0.4.23"
     unpipe "1.0.0"
 
+raw-loader@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-1.0.0.tgz#3f9889e73dadbda9a424bce79809b4133ad46405"
+  integrity sha512-Uqy5AqELpytJTRxYT4fhltcKPj0TyaEpzJDcGz7DFJi+pQOOi3GjR/DOdxTkTsF+NzhnldIoG6TORaBlInUuqA==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+
 rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -6785,6 +6814,11 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selfsigned@^1.9.1:
   version "1.10.4"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
@@ -7464,6 +7498,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -7802,6 +7841,13 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-clipboard2@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.0.tgz#b04d3f9a2d46f12ca85178445930b38463640b22"
+  integrity sha512-6/Y9NJErWb4LNBLMgsJSdKb7KpF6/jqXagvKlYut6VQzQsNj6515FpwH0r5hhmeJMqaPzf1kxAw8L8Qvw/QBJQ==
+  dependencies:
+    clipboard "^2.0.0"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"