Merge branch 'develop' into feature/azure-pipelines

.gitignore 2

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Misc
+coverage/*
+junit.xml

README 2.md

@@ -0,0 +1,19 @@
+# fmg-funnel-2021
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config 2.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package 2.json

@@ -0,0 +1,52 @@
+{
+  "name": "Safelite",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "bootstrap": "^5.1.1",
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.0.0",
+    "prettier": "^2.2.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended",
+      "@vue/prettier"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "no-unused-vars": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

src/assets/scss/components/_buttons.scss

@@ -0,0 +1,19 @@
+.btn {
+  &.btn-secondary {
+    position: relative;//Required for :after pseduo to position correctly
+    margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
+    border-radius: 8px;//To match Figma border radius
+    &:after {
+      content: "";
+      position: absolute;
+      width: calc(100% + 12px);
+      height: calc(100% + 12px);
+      border: 3px solid $secondary;
+      background-color: $white;
+      border-radius: 12px;
+      left: -6px;
+      top: -6px;
+      z-index: -1;
+    }
+  }
+}

src/assets/scss/custom.scss

@@ -18,3 +18,4 @@
 
 //Custom Components CSS
 @import "./components/_navbar";
+@import "./components/_buttons";

src/components/HelloWorld.vue

@@ -16,16 +16,25 @@
     </div>
   </div>
 
-  <h4 class="mt-3">Buttons</h4>
+  <div class="row">
+    <div class="col">
+      <h4 class="mt-3">Buttons</h4>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
 
-  <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-primary">Primary</button>
-  <button type="button" class="btn btn-secondary">Secondary</button>
+      <button type="button" class="btn btn-secondary">Secondary</button>
-  <button type="button" class="btn btn-success">Success</button>
+      <button type="button" class="btn btn-success">Success</button>
-  <button type="button" class="btn btn-danger">Danger</button>
+      <button type="button" class="btn btn-danger">Danger</button>
-  <button type="button" class="btn btn-warning">Warning</button>
+      <button type="button" class="btn btn-warning">Warning</button>
-  <button type="button" class="btn btn-info">Info</button>
+      <button type="button" class="btn btn-info">Info</button>
-  <button type="button" class="btn btn-light">Light</button>
+      <button type="button" class="btn btn-light">Light</button>
-  <button type="button" class="btn btn-dark">Dark</button>
+      <button type="button" class="btn btn-dark">Dark</button>
+
+    </div>
+  </div>
 
 </template>