Compare commits
14
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 dtomlinson
|
08b383fdd4 | ||
|
dtomlinson
|
ceff5de958 | ||
|
dtomlinson
|
22c8bb8ed1 | ||
|
dtomlinson
|
a082bfb4c0 | ||
|
dtomlinson
|
fa7308339b | ||
|
dtomlinson
|
7052ade2ab | ||
|
dtomlinson
|
5ad6a640e7 | ||
|
dtomlinson
|
0d52bbd092 | ||
|
dtomlinson
|
be959db125 | ||
|
dtomlinson
|
52a1d9fe4a | ||
|
dtomlinson
|
9da6579cba | ||
|
dtomlinson
|
2fb62006b7 | ||
|
dtomlinson
|
dfd489480e | ||
|
dtomlinson
|
bd1bbc284d |
+945
-39
File diff suppressed because it is too large
Load Diff
@@ -8,11 +8,14 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"aos": "^3.0.0-beta.6",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
"mime-types": "^2.1.26",
|
"mime-types": "^2.1.26",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
|
"vue-page-transition": "^0.2.2",
|
||||||
"vue-responsive-video-background-player": "^1.0.8",
|
"vue-responsive-video-background-player": "^1.0.8",
|
||||||
"vue-router": "^3.1.5",
|
"vue-router": "^3.1.5",
|
||||||
|
"vue-stripe-menu": "^1.2.8",
|
||||||
"vuetify": "^2.2.11",
|
"vuetify": "^2.2.11",
|
||||||
"vuex": "^3.1.2"
|
"vuex": "^3.1.2"
|
||||||
},
|
},
|
||||||
|
|||||||
+5
-18
@@ -1,14 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<v-app
|
<v-app :style="{ background: $vuetify.theme.themes.light.background }">
|
||||||
:style="{ background: $vuetify.theme.themes.light.background }"
|
|
||||||
class="fontColor"
|
|
||||||
>
|
|
||||||
<v-content>
|
<v-content>
|
||||||
<Appbar></Appbar>
|
<Appbar></Appbar>
|
||||||
<transition name="slide">
|
<!-- <vue-page-transition name="fade-in-right"> -->
|
||||||
|
<vue-page-transition name="fade">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</transition>
|
</vue-page-transition>
|
||||||
<v-row> </v-row>
|
<v-row> </v-row>
|
||||||
</v-content>
|
</v-content>
|
||||||
</v-app>
|
</v-app>
|
||||||
@@ -19,24 +17,13 @@
|
|||||||
import Appbar from "@/components/Appbar";
|
import Appbar from "@/components/Appbar";
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
|
components: { Appbar }
|
||||||
components: { Appbar },
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
video: require("./assets/videos/optical.mp4")
|
|
||||||
})
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app {
|
#app {
|
||||||
font-family: $gilroy, sans-serif, Arial, Helvetica;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fontColor, .theme--light.v-application, .theme--light.v-sheet {
|
|
||||||
// color: $mainColor !important;
|
|
||||||
color: $mainColor !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 297 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 394 KiB |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 275 KiB |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 262 KiB |
+58
-31
@@ -1,41 +1,53 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- <v-app-bar flat color="indigo" app class="hidden-md-and-up">
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="8" class="d-flex justify-start">
|
|
||||||
<v-toolbar-title>
|
|
||||||
Savvy Firebase
|
|
||||||
</v-toolbar-title>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="4" class="d-flex justify-end">
|
|
||||||
<v-btn color="white">
|
|
||||||
Sign In
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-app-bar> -->
|
|
||||||
<!-- <v-app-bar flat app class="hidden-sm-and-down" color="#EEEEEE"> -->
|
|
||||||
<v-app-bar
|
<v-app-bar
|
||||||
flat
|
flat
|
||||||
app
|
app
|
||||||
class="hidden-sm-and-down"
|
hide-on-scroll
|
||||||
color="#EEEEEE"
|
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
||||||
v-if="!this.$store.getters.fullScreen"
|
v-if="!this.$store.getters.fullScreen"
|
||||||
>
|
>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="2"></v-col>
|
<v-spacer></v-spacer>
|
||||||
<v-col cols="4" class="d-flex justify-start">
|
<v-col cols="4" class="d-flex justify-start align-content-center">
|
||||||
<v-toolbar-title class="appTitle">
|
<router-link :to="{ name: 'Home' }" class="routerLink">
|
||||||
Savvy Firebase Tutorial
|
<v-toolbar-title class="title">
|
||||||
</v-toolbar-title>
|
<p class="mb-0">Savvy Firebase Tutorial</p>
|
||||||
|
</v-toolbar-title>
|
||||||
|
</router-link>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="4" class="d-flex justify-end align-self-center">
|
<v-col cols="4" class="d-flex justify-end align-self-center">
|
||||||
<router-link :to="{ name: 'Login' }" class="routerLink">
|
<router-link
|
||||||
<span class="mr-3">Sign In</span>
|
:to="{ name: 'Playground' }"
|
||||||
|
class="routerLink ma-0 pr-2"
|
||||||
|
>
|
||||||
|
<p class="mb-0 underline">
|
||||||
|
Playground
|
||||||
|
</p>
|
||||||
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
:to="{ name: 'Backgrounds' }"
|
||||||
|
class="routerLink ma-0 pr-2"
|
||||||
|
>
|
||||||
|
<p class="mb-0 underline">
|
||||||
|
Backgrounds
|
||||||
|
</p>
|
||||||
|
</router-link>
|
||||||
|
<router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
|
||||||
|
<p class="mb-0 underline">
|
||||||
|
Triangle
|
||||||
|
</p>
|
||||||
|
</router-link>
|
||||||
|
<router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
|
||||||
|
<p class=" mb-0 underline">
|
||||||
|
Sign In
|
||||||
|
</p>
|
||||||
|
</router-link>
|
||||||
|
<router-link :to="{ name: 'Login' }" class="routerLink ma-0">
|
||||||
|
<p class="mb-0 underline">Register</p>
|
||||||
</router-link>
|
</router-link>
|
||||||
<span class="mr-3">Register</span>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="2"></v-col>
|
<v-spacer></v-spacer>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
</div>
|
</div>
|
||||||
@@ -48,12 +60,27 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.appTitle {
|
|
||||||
font-family: $gilroy-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.routerLink {
|
.routerLink {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $mainColor
|
color: $mainColor;
|
||||||
|
}
|
||||||
|
.underline {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.underline::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 0.1em;
|
||||||
|
top: 100%;
|
||||||
|
background: currentColor;
|
||||||
|
z-index: -1;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
|
||||||
|
}
|
||||||
|
.underline:hover::after {
|
||||||
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
transform: scaleX(1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,151 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-container>
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-img
|
|
||||||
:src="require('../assets/logo.svg')"
|
|
||||||
class="my-3"
|
|
||||||
contain
|
|
||||||
height="200"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col class="mb-4">
|
|
||||||
<h1 class="display-2 font-weight-bold mb-3">
|
|
||||||
Welcome to Vuetify
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="subheading font-weight-regular">
|
|
||||||
For help and collaboration with other Vuetify developers,
|
|
||||||
<br>please join our online
|
|
||||||
<a
|
|
||||||
href="https://community.vuetifyjs.com"
|
|
||||||
target="_blank"
|
|
||||||
>Discord Community</a>
|
|
||||||
</p>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
What's next?
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(next, i) in whatsNext"
|
|
||||||
:key="i"
|
|
||||||
:href="next.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ next.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
Important Links
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(link, i) in importantLinks"
|
|
||||||
:key="i"
|
|
||||||
:href="link.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ link.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
class="mb-5"
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<h2 class="headline font-weight-bold mb-3">
|
|
||||||
Ecosystem
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<v-row justify="center">
|
|
||||||
<a
|
|
||||||
v-for="(eco, i) in ecosystem"
|
|
||||||
:key="i"
|
|
||||||
:href="eco.href"
|
|
||||||
class="subheading mx-3"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ eco.text }}
|
|
||||||
</a>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
ecosystem: [
|
|
||||||
{
|
|
||||||
text: 'vuetify-loader',
|
|
||||||
href: 'https://github.com/vuetifyjs/vuetify-loader',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'github',
|
|
||||||
href: 'https://github.com/vuetifyjs/vuetify',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'awesome-vuetify',
|
|
||||||
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
importantLinks: [
|
|
||||||
{
|
|
||||||
text: 'Documentation',
|
|
||||||
href: 'https://vuetifyjs.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Chat',
|
|
||||||
href: 'https://community.vuetifyjs.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Made with Vuetify',
|
|
||||||
href: 'https://madewithvuejs.com/vuetify',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Twitter',
|
|
||||||
href: 'https://twitter.com/vuetifyjs',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Articles',
|
|
||||||
href: 'https://medium.com/vuetify',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
whatsNext: [
|
|
||||||
{
|
|
||||||
text: 'Explore components',
|
|
||||||
href: 'https://vuetifyjs.com/components/api-explorer',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Select a layout',
|
|
||||||
href: 'https://vuetifyjs.com/layout/pre-defined',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Frequently Asked Questions',
|
|
||||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -1,14 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<video-background
|
<video-background
|
||||||
:src="video"
|
:src="video"
|
||||||
style=" height: 100vh;"
|
style="height: 100vh;"
|
||||||
overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
|
overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
|
||||||
>
|
>
|
||||||
|
<LoginForm class=""></LoginForm>
|
||||||
</video-background>
|
</video-background>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import LoginForm from "../views/forms/LoginForm";
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
LoginForm,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
video: require("../assets/videos/optical.mp4")
|
video: require("../assets/videos/optical.mp4")
|
||||||
|
|||||||
+15
@@ -3,12 +3,27 @@ import App from "./App.vue";
|
|||||||
import router from "./router";
|
import router from "./router";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
import vuetify from "./plugins/vuetify";
|
import vuetify from "./plugins/vuetify";
|
||||||
|
// Video Background
|
||||||
import VideoBackground from "vue-responsive-video-background-player";
|
import VideoBackground from "vue-responsive-video-background-player";
|
||||||
|
// Page Transitions
|
||||||
|
import VuePageTransition from "vue-page-transition";
|
||||||
|
// Animations
|
||||||
|
import AOS from "aos";
|
||||||
|
import "aos/dist/aos.css";
|
||||||
|
// Stripe Appbar Menu
|
||||||
|
import VueStripeMenu from "vue-stripe-menu";
|
||||||
|
import "vue-stripe-menu/dist/vue-stripe-menu.css";
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
Vue.component("video-background", VideoBackground);
|
Vue.component("video-background", VideoBackground);
|
||||||
|
|
||||||
|
Vue.use(VuePageTransition);
|
||||||
|
Vue.use(VueStripeMenu);
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
|
created() {
|
||||||
|
AOS.init();
|
||||||
|
},
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
vuetify,
|
vuetify,
|
||||||
|
|||||||
@@ -11,7 +11,10 @@ export default new Vuetify({
|
|||||||
theme: {
|
theme: {
|
||||||
themes: {
|
themes: {
|
||||||
light: {
|
light: {
|
||||||
background: "#fff"
|
primary: "#051937",
|
||||||
|
secondary: "#374366",
|
||||||
|
accent: "#d4a418",
|
||||||
|
background: "#e8e8e8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,6 +24,30 @@ const routes = [
|
|||||||
name: "Login",
|
name: "Login",
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "login" */ "../components/LoginFull.vue")
|
import(/* webpackChunkName: "login" */ "../components/LoginFull.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/hello",
|
||||||
|
name: "Hello",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "hello" */ "../components/HelloWorld.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/triangle",
|
||||||
|
name: "Triangle",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/backgrounds",
|
||||||
|
name: "Backgrounds",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/playground",
|
||||||
|
name: "Playground",
|
||||||
|
component: () =>
|
||||||
|
import(/* webpackChunkName: "playground" */ "../views/Playground.vue")
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -1,27 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: "Gilroy";
|
|
||||||
src: url("~@/assets/fonts/Gilroy-Regular.otf") format("opentype");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Gilroy-bold";
|
|
||||||
src: url("~@/assets/fonts/Gilroy-Bold.otf") format("opentype");
|
|
||||||
}
|
|
||||||
|
|
||||||
$gilroy: "Gilroy", sans-serif !default;
|
|
||||||
$gilroy-bold: "Gilroy-bold", sans-serif !default;
|
|
||||||
|
|
||||||
@import "../../node_modules/vuetify/src/styles/styles.sass";
|
|
||||||
$body-font-family: $gilroy;
|
|
||||||
$heading-font-family: $gilroy;
|
|
||||||
|
|
||||||
@import "~vuetify/src/styles/settings/variables";
|
|
||||||
$body-font-family: $gilroy;
|
|
||||||
$heading-font-family: $gilroy;
|
|
||||||
|
|
||||||
$mainColor: #323947;
|
|
||||||
|
|
||||||
.fontColor, .theme--light.v-application, .theme--light.v-sheet {
|
|
||||||
// color: $mainColor !important;
|
|
||||||
color: red !important;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
// Import custom fonts
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-Thin";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-Thin.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-Regular";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-Regular.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-Medium";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-Medium.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-Light";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-Light.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-Condensed-Light";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-Light.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-Bold";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-Bold.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-Black";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-Black.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-Italic";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-RegularItalic.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-LightItalic";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-LightItalic.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-MediumItalic";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-MediumItalic.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gilroy-BoldItalic";
|
||||||
|
src: url("~@/assets/fonts/Gilroy-BoldItalic.otf") format("opentype");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set font variables
|
||||||
|
|
||||||
|
$Gilroy-Thin: "Gilroy-Thin", sans-serif !default;
|
||||||
|
$Gilroy-Regular: "Gilroy-Regular", sans-serif !default;
|
||||||
|
$Gilroy-Medium: "Gilroy-Medium", sans-serif !default;
|
||||||
|
$Gilroy-Light: "Gilroy-Light", sans-serif !default;
|
||||||
|
$Gilroy-Condensed-Light: "Gilroy-Condensed-Light", sans-serif !default;
|
||||||
|
$Gilroy-Bold: "Gilroy-Bold", sans-serif !default;
|
||||||
|
$Gilroy-Black: "Gilroy-Black", sans-serif !default;
|
||||||
|
$Gilroy-Italic: "Gilroy-Italic", sans-serif !default;
|
||||||
|
$Gilroy-LightItalic: "Gilroy-LightItalic", sans-serif !default;
|
||||||
|
$Gilroy-MediumItalic: "Gilroy-MediumItalic", sans-serif !default;
|
||||||
|
$Gilroy-BoldItalic: "Gilroy-BoldItalic", sans-serif !default;
|
||||||
|
|
||||||
|
// Replace default body fonts
|
||||||
|
|
||||||
|
// @import "../../node_modules/vuetify/src/styles/styles.sass";
|
||||||
|
// $body-font-family: $Gilroy-Regular;
|
||||||
|
// $heading-font-family: $Gilroy-Regular;
|
||||||
|
|
||||||
|
// @import "~vuetify/src/styles/settings/variables";
|
||||||
|
// $body-font-family: $Gilroy-Regular;
|
||||||
|
// $heading-font-family: $Gilroy-Regular;
|
||||||
|
|
||||||
|
// Replace typography fonts
|
||||||
|
|
||||||
|
.v-application {
|
||||||
|
font-family: $Gilroy-Regular !important;
|
||||||
|
.display-4,
|
||||||
|
.display-3 {
|
||||||
|
font-family: $Gilroy-Light !important;
|
||||||
|
}
|
||||||
|
.display-2,
|
||||||
|
.display-1,
|
||||||
|
.headline,
|
||||||
|
.subtitle-1,
|
||||||
|
.body-1,
|
||||||
|
.body-2,
|
||||||
|
.caption,
|
||||||
|
.overline,
|
||||||
|
.font-regular,
|
||||||
|
.font-weight-regular {
|
||||||
|
font-family: $Gilroy-Regular !important;
|
||||||
|
}
|
||||||
|
.title,
|
||||||
|
.subtitle-2,
|
||||||
|
.font-weight-medium {
|
||||||
|
font-family: $Gilroy-Medium !important;
|
||||||
|
}
|
||||||
|
.font-weight-light {
|
||||||
|
font-family: $Gilroy-Condensed-Light !important;
|
||||||
|
}
|
||||||
|
.font-weight-thin {
|
||||||
|
font-family: $Gilroy-Thin !important;
|
||||||
|
}
|
||||||
|
.font-weight-bold {
|
||||||
|
font-family: $Gilroy-Bold !important;
|
||||||
|
}
|
||||||
|
.font-weight-black {
|
||||||
|
font-family: $Gilroy-Black !important;
|
||||||
|
}
|
||||||
|
.font-italic {
|
||||||
|
font-family: $Gilroy-Italic !important;
|
||||||
|
}
|
||||||
|
.font-italic.font-weight-light {
|
||||||
|
font-family: $Gilroy-LightItalic !important;
|
||||||
|
}
|
||||||
|
.font-italic.font-weight-medium {
|
||||||
|
font-family: $Gilroy-MediumItalic !important;
|
||||||
|
}
|
||||||
|
.font-italic.font-weight-bold {
|
||||||
|
font-family: $Gilroy-BoldItalic !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$body-font-family: $Gilroy-Regular !important;
|
||||||
|
|
||||||
|
// Change default font colour
|
||||||
|
|
||||||
|
$mainColor: #323947;
|
||||||
|
|
||||||
|
.theme--light.v-application,
|
||||||
|
.fontColor,
|
||||||
|
.theme--light.v-sheet {
|
||||||
|
color: $mainColor !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<h1>Backgrounds</h1>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 1440 320"
|
||||||
|
style="width: 500px;"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="#0099ff"
|
||||||
|
fill-opacity="1"
|
||||||
|
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</v-row>
|
||||||
|
<v-row class="mt-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||||
|
<path
|
||||||
|
fill="#0099ff"
|
||||||
|
fill-opacity="0.5"
|
||||||
|
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||||
|
transform="rotate(-10 50 100)"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
fill="#0099ff"
|
||||||
|
fill-opacity="0.6"
|
||||||
|
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||||
|
transform="rotate(10 50 100)"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<svg
|
||||||
|
width="200"
|
||||||
|
height="200"
|
||||||
|
viewBox="0 0 600 600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g transform="translate(300,300)">
|
||||||
|
<path
|
||||||
|
d="M154.5,-209.4C196.2,-182.4,223.2,-131.8,227.9,-82.3C232.7,-32.8,215.3,15.8,199.3,64.8C183.4,113.8,169,163.3,136,199.9C103.1,236.5,51.5,260.3,3.5,255.4C-44.5,250.5,-89,217.1,-129.7,183C-170.4,148.9,-207.4,114.2,-226.4,70.2C-245.4,26.2,-246.3,-27.1,-228.4,-71.7C-210.5,-116.4,-173.7,-152.4,-132.5,-179.6C-91.3,-206.7,-45.7,-224.8,5.4,-232.2C56.4,-239.7,112.9,-236.3,154.5,-209.4Z"
|
||||||
|
fill="#FFB4BC"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-img src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg">
|
||||||
|
<v-col class="fill-height d-flex align-center justify-center">
|
||||||
|
<h1 class="display-4 black--text">Text</h1>
|
||||||
|
</v-col>
|
||||||
|
</v-img>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-container fluid class="newtriangle">
|
||||||
|
<v-row class="fill-height d-flex align-center">
|
||||||
|
<v-col class="">
|
||||||
|
<h1 class="display-2 white--text">
|
||||||
|
CSS polygon background with clip-path.
|
||||||
|
</h1>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col class="fill-height d-flex justify-center">
|
||||||
|
<svg
|
||||||
|
width="120"
|
||||||
|
height="120"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<radialGradient
|
||||||
|
id="Gradient"
|
||||||
|
cx="0.5"
|
||||||
|
cy="0.5"
|
||||||
|
r="0.5"
|
||||||
|
fx="0.25"
|
||||||
|
fy="0.25"
|
||||||
|
>
|
||||||
|
<stop offset="0%" stop-color="red" />
|
||||||
|
<stop offset="100%" stop-color="blue" />
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<rect
|
||||||
|
x="10"
|
||||||
|
y="10"
|
||||||
|
rx="15"
|
||||||
|
ry="15"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
fill="url(#Gradient)"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="2"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<circle
|
||||||
|
cx="60"
|
||||||
|
cy="60"
|
||||||
|
r="50"
|
||||||
|
fill="transparent"
|
||||||
|
stroke="white"
|
||||||
|
stroke-width="2"
|
||||||
|
/>
|
||||||
|
<circle cx="35" cy="35" r="2" fill="white" stroke="white" />
|
||||||
|
<circle cx="60" cy="60" r="2" fill="white" stroke="white" />
|
||||||
|
<text
|
||||||
|
x="38"
|
||||||
|
y="40"
|
||||||
|
fill="white"
|
||||||
|
font-family="sans-serif"
|
||||||
|
font-size="10pt"
|
||||||
|
>
|
||||||
|
(fx,fy)
|
||||||
|
</text>
|
||||||
|
<text
|
||||||
|
x="63"
|
||||||
|
y="63"
|
||||||
|
fill="white"
|
||||||
|
font-family="sans-serif"
|
||||||
|
font-size="10pt"
|
||||||
|
>
|
||||||
|
(cx,cy)
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.newtriangle {
|
||||||
|
width: 105vw;
|
||||||
|
height: 50vh;
|
||||||
|
background-image: radial-gradient(
|
||||||
|
circle farthest-corner at 7.5% 54.1%,
|
||||||
|
rgba(0, 0, 0, 1) 0%,
|
||||||
|
rgba(39, 0, 89, 1) 74.9%
|
||||||
|
);
|
||||||
|
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||||
|
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+11
-7
@@ -1,11 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<v-container>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col>
|
<v-col>
|
||||||
Hello
|
Hello
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
<v-row>
|
||||||
|
<v-btn color="primary">Hello</v-btn>
|
||||||
|
<v-btn color="secondary">Hello</v-btn>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-container fluid class="ma-0 pa-0 full-screen d-flex">
|
||||||
|
<img
|
||||||
|
src="../assets/images/pipebackground_1.svg"
|
||||||
|
style=""
|
||||||
|
class="d-flex align-end ma-0 pa-0 justify-end new-background-image"
|
||||||
|
/>
|
||||||
|
<v-container
|
||||||
|
fill-height
|
||||||
|
class="d-flex align-center"
|
||||||
|
style="position: relative; z-index: 10;"
|
||||||
|
>
|
||||||
|
<v-row>
|
||||||
|
<v-col class="d-flex justify-center">
|
||||||
|
<h1 class="display-2">Playground</h1>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<h1 class="display-2">Playground</h1>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<h1 class="display-2">{{ viewportHeight - 64 }}</h1>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<h1 class="display-2">{{ viewportWidth }}</h1>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<h1 class="display-2">{{ backgroundWidth }}</h1>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
viewportHeight: window.innerHeight,
|
||||||
|
viewportWidth: window.innerWidth,
|
||||||
|
backgroundWidth: ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window.addEventListener("resize", this.updateHeight);
|
||||||
|
window.addEventListener("resize", this.updateWidth);
|
||||||
|
this.querySelectorsPlayground();
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.removeEventListener("resize", this.updateHeight);
|
||||||
|
window.addEventListener("resize", this.updateWidth);
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.getBackgroundWidth();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateHeight() {
|
||||||
|
this.viewportHeight = window.innerHeight;
|
||||||
|
},
|
||||||
|
updateWidth() {
|
||||||
|
this.viewportWidth = window.innerWidth;
|
||||||
|
},
|
||||||
|
getBackgroundWidth() {
|
||||||
|
var background = document.querySelector("#backgroundsvg");
|
||||||
|
this.backgroundWidth = background.clientWidth;
|
||||||
|
},
|
||||||
|
querySelectorsPlayground() {
|
||||||
|
console.log(document.images);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.full-screen {
|
||||||
|
// height: calc(100vh - 64px);
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
}
|
||||||
|
|
||||||
|
img.new-background-image {
|
||||||
|
// height: calc(100vh - 64px);
|
||||||
|
height: calc(100vh);
|
||||||
|
position: absolute;
|
||||||
|
// height: 100%;
|
||||||
|
// width: 1115px;
|
||||||
|
// left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: -64px;
|
||||||
|
// left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-image {
|
||||||
|
position: absolute;
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
// width: 100%;
|
||||||
|
max-width: 1115px;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
border-style: dashed;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: right top;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-container fluid class="pa-0">
|
||||||
|
<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
|
||||||
|
<v-col
|
||||||
|
class="d-flex align-center pt-0 ml-8"
|
||||||
|
style="position: relative; z-index: 10;"
|
||||||
|
>
|
||||||
|
<v-card flat color="rgb(0, 0, 0, 0)">
|
||||||
|
<h1 class="display" style="position: relative;">
|
||||||
|
Welcome to Savvy Firebox Tutorial
|
||||||
|
</h1>
|
||||||
|
<v-btn
|
||||||
|
x-large
|
||||||
|
color="primary"
|
||||||
|
style="position: relative; z-index: 10;"
|
||||||
|
class="lighten-1"
|
||||||
|
>Click Here</v-btn
|
||||||
|
>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-container>
|
||||||
|
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
|
||||||
|
<v-row class="d-flex justify-space-around">
|
||||||
|
<v-col class="d-flex justify-center" md="6" xs="12">
|
||||||
|
<v-card
|
||||||
|
flat
|
||||||
|
color="rgb(0, 0, 0, 0)"
|
||||||
|
class="d-flex align-center justify-center flex-column pa-6"
|
||||||
|
data-aos="zoom-in"
|
||||||
|
data-aos-duration="3000"
|
||||||
|
>
|
||||||
|
<v-card-title>
|
||||||
|
<span class="display-2 font-weight-bold">Learn more</span>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text class="d-flex justify-center flex-column align-center">
|
||||||
|
<transition name="bounce">
|
||||||
|
<v-img
|
||||||
|
src="@/assets/images/11-Casino chip.png"
|
||||||
|
max-height="150px"
|
||||||
|
max-width="150px"
|
||||||
|
class="mb-5"
|
||||||
|
></v-img>
|
||||||
|
</transition>
|
||||||
|
<span
|
||||||
|
class="d-flex justify-center display body-1"
|
||||||
|
style="color: black;"
|
||||||
|
>
|
||||||
|
More information about what we do and why.
|
||||||
|
</span>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-btn color="secondary" medium>Click here</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
<v-col class="d-flex justify-center" md="6" xs="12">
|
||||||
|
<v-card
|
||||||
|
flat
|
||||||
|
color="rgb(0, 0, 0, 0)"
|
||||||
|
class="d-flex align-center justify-center flex-column pa-6"
|
||||||
|
data-aos="test-roll"
|
||||||
|
data-aos-duration="3000"
|
||||||
|
data-aos-easing="new-easing"
|
||||||
|
>
|
||||||
|
<v-card-title>
|
||||||
|
<span class="display-2 font-weight-bold">See more</span>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text class="d-flex flex-column justify-center align-center">
|
||||||
|
<v-img
|
||||||
|
src="@/assets/images/12-Casino chip.png"
|
||||||
|
max-height="150px"
|
||||||
|
max-width="150px"
|
||||||
|
class="mb-5"
|
||||||
|
></v-img>
|
||||||
|
<span
|
||||||
|
class="d-flex justify-center display body-1"
|
||||||
|
style="color: black;"
|
||||||
|
>
|
||||||
|
Additional things about what it is.
|
||||||
|
</span>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-btn color="secondary" medium>Click here</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
<!-- <v-col md="1" xs="0"></v-col> -->
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
animate: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.newtriangle {
|
||||||
|
width: 105vw;
|
||||||
|
height: 50vh;
|
||||||
|
background-image: radial-gradient(
|
||||||
|
circle farthest-corner at 7.5% 54.1%,
|
||||||
|
rgba(0, 0, 0, 1) 0%,
|
||||||
|
rgba(39, 0, 89, 1) 74.9%
|
||||||
|
);
|
||||||
|
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||||
|
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-aos="test-roll"] {
|
||||||
|
-webkit-transform: translateX(-1000px) rotate(-720deg);
|
||||||
|
transform: translateX(-1000px) rotate(-720deg);
|
||||||
|
-webkit-filter: blur(50px);
|
||||||
|
filter: blur(50px);
|
||||||
|
opacity: 0;
|
||||||
|
transition-property: transform, opacity, filter;
|
||||||
|
&.aos-animate {
|
||||||
|
-webkit-transform: translateX(0) rotate(0deg);
|
||||||
|
transform: translateX(0) rotate(0deg);
|
||||||
|
-webkit-filter: blur(0);
|
||||||
|
filter: blur(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-aos] {
|
||||||
|
body[data-aos-easing="new-easing"] &,
|
||||||
|
&[data-aos][data-aos-easing="new-easing"] {
|
||||||
|
transition-timing-function: cubic-bezier(0.25, 1, 0.57, 0.55);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,218 @@
|
|||||||
|
<template>
|
||||||
|
<v-container fluid fill-height class="d-flex align-center justify-center">
|
||||||
|
<v-row>
|
||||||
|
<v-col
|
||||||
|
sm="6"
|
||||||
|
cols="12"
|
||||||
|
align-self="stretch"
|
||||||
|
class="d-flex justify-sm-end justify-center pb-10 pb-sm-0 pr-sm-10"
|
||||||
|
>
|
||||||
|
<div class="d-flex flex-column align-end justify-space-around">
|
||||||
|
<v-card
|
||||||
|
color="rgb(0, 0, 0, 0)"
|
||||||
|
flat
|
||||||
|
class="d-flex align-center justify-center flex-column"
|
||||||
|
width="100%"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="d-flex flex-column align-sm-end align-center justify-center"
|
||||||
|
:class="alignOnViewport"
|
||||||
|
>
|
||||||
|
<h1 class="whiteText title">
|
||||||
|
Savvy Firebase Tutorial
|
||||||
|
</h1>
|
||||||
|
<p class="whiteText mb-0 mt-2">Log in or create an account.</p>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
<v-card color="rgb(0, 0, 0, 0)" flat width="100%">
|
||||||
|
<div
|
||||||
|
class="text-align-right d-flex flex-column align-sm-end align-center justify-center"
|
||||||
|
>
|
||||||
|
<p class="whiteText mb-0">Don't have an account? Create one.</p>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
sm="6"
|
||||||
|
class="d-flex justify-sm-start justify-center pl-sm-10"
|
||||||
|
>
|
||||||
|
<v-card
|
||||||
|
color="rgb(0, 0, 0, 0)"
|
||||||
|
flat
|
||||||
|
class="d-flex align-center flex-column"
|
||||||
|
>
|
||||||
|
<v-icon color="white" size="3em" class="pb-4"
|
||||||
|
>mdi-account-circle</v-icon
|
||||||
|
>
|
||||||
|
<v-form
|
||||||
|
v-model="valid"
|
||||||
|
ref="form"
|
||||||
|
class="pt-4 d-flex flex-column align-center justify-start"
|
||||||
|
>
|
||||||
|
<v-text-field
|
||||||
|
v-for="field in formFields"
|
||||||
|
:key="field.name"
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
required
|
||||||
|
:type="field.password ? 'password' : 'text'"
|
||||||
|
background-color="rgb(100%, 100%, 100%, 10%)"
|
||||||
|
color="rgb(100%, 100%, 100%, 20%)"
|
||||||
|
class="white-placeholder full-width"
|
||||||
|
v-model="field.value"
|
||||||
|
:rules="field.rules"
|
||||||
|
:label="field.placeholder"
|
||||||
|
:success="!!field.value"
|
||||||
|
@click:append="field.showIconData = !field.showIconData"
|
||||||
|
>
|
||||||
|
<template #prepend-inner>
|
||||||
|
<v-icon color="white" class="pr-3">
|
||||||
|
{{ field.prependIcon }}
|
||||||
|
</v-icon>
|
||||||
|
</template>
|
||||||
|
<template #append>
|
||||||
|
<div class="innerIcon">
|
||||||
|
<v-btn
|
||||||
|
v-if="field.appendIconShow"
|
||||||
|
icon
|
||||||
|
text
|
||||||
|
x-small
|
||||||
|
@click="
|
||||||
|
() => {
|
||||||
|
field.showIconData = !field.showIconData;
|
||||||
|
field.password = !field.password;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<v-icon color="white">
|
||||||
|
{{
|
||||||
|
field.showIconData
|
||||||
|
? field.appendIconShow
|
||||||
|
: field.appendIconHide
|
||||||
|
}}
|
||||||
|
</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</v-text-field>
|
||||||
|
<v-btn
|
||||||
|
depressed
|
||||||
|
large
|
||||||
|
color="primary"
|
||||||
|
class="lighten-3"
|
||||||
|
:loading="load"
|
||||||
|
@click="submit"
|
||||||
|
>Submit</v-btn
|
||||||
|
>
|
||||||
|
</v-form>
|
||||||
|
<p class="whiteText mb-0 pt-5">Forgot password?</p>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "LoginForm",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
load: false,
|
||||||
|
formFields: [
|
||||||
|
{
|
||||||
|
name: "Email",
|
||||||
|
rules: [
|
||||||
|
v => !!v || "You must enter an email address.",
|
||||||
|
v => /.+@.+/.test(v) || "Email is not valid."
|
||||||
|
],
|
||||||
|
placeholder: "Email",
|
||||||
|
successmessage: "Email is valid.",
|
||||||
|
prependIcon: "mdi-at",
|
||||||
|
value: ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Password",
|
||||||
|
rules: [
|
||||||
|
v => !!v || "You must enter a password.",
|
||||||
|
v => (v && v.length >= 8) || "Minimum 8 characters."
|
||||||
|
],
|
||||||
|
placeholder: "Password",
|
||||||
|
successmessage: "Password is valid.",
|
||||||
|
prependIcon: "mdi-lock",
|
||||||
|
appendIconShow: "mdi-eye",
|
||||||
|
appendIconHide: "mdi-eye-off",
|
||||||
|
showIconData: false,
|
||||||
|
value: "",
|
||||||
|
password: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async submit() {
|
||||||
|
this.load = !this.load;
|
||||||
|
console.log("loading");
|
||||||
|
if (this.$refs.form.validate()) {
|
||||||
|
console.log(`Email: ${this.formFields[0].value}`);
|
||||||
|
console.log(`Password: ${this.formFields[1].value}`);
|
||||||
|
} else {
|
||||||
|
console.log("Not valid");
|
||||||
|
this.load = !this.load;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
alignOnViewport() {
|
||||||
|
return this.$vuetify.breakpoint.xsOnly
|
||||||
|
? "text-align-center"
|
||||||
|
: "text-align-right";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// @import "../../scss/_variables.scss";
|
||||||
|
|
||||||
|
.whiteText {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-placeholder ::v-deep input::placeholder {
|
||||||
|
color: white !important;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-placeholder ::v-deep input {
|
||||||
|
color: white !important;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-placeholder ::v-deep .v-label {
|
||||||
|
color: white !important;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,227 @@
|
|||||||
|
# Temp notes
|
||||||
|
|
||||||
|
## React to height change
|
||||||
|
|
||||||
|
### Get current height of page
|
||||||
|
|
||||||
|
To create content based on viewport height change you should use an event listener: `window.addEventListener`.
|
||||||
|
|
||||||
|
A list of all events you can listen for is here: <https://developer.mozilla.org/en-US/docs/Web/Events>
|
||||||
|
|
||||||
|
The current height can be obtained from `window.innerHeight`.
|
||||||
|
|
||||||
|
You should add `created` and `destroyed` to the script, and create a method to do something on the trigger:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
viewportHeight: window.innerHeight
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window.addEventListener("resize", this.updateHeight);
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.removeEventListener("resize", this.updateHeight);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateHeight() {
|
||||||
|
this.viewportHeight = window.innerHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
This can be useful if you need to pass the current height to a prop for an image component that you might want to fill the page:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<v-img
|
||||||
|
src="../assets/images/newbackground.png"
|
||||||
|
:height="this.viewportHeight - 64"
|
||||||
|
width="auto"
|
||||||
|
contain
|
||||||
|
position="bottom 0px right 0px"
|
||||||
|
class="ma-0 pa-0"
|
||||||
|
id="backgroundsvg"
|
||||||
|
></v-img>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also get the height in the css. This way you can have an image set its own width or height as css parameters.
|
||||||
|
|
||||||
|
```css
|
||||||
|
.full-screen {
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You might also want to add browser compatibility options:
|
||||||
|
|
||||||
|
Opera:
|
||||||
|
`height: -o-calc(100% - 65px);`
|
||||||
|
|
||||||
|
Google/Safari:
|
||||||
|
`height: -webkit-calc(100% - 65px);`
|
||||||
|
|
||||||
|
### Get current height of an object
|
||||||
|
|
||||||
|
Simiarly, you can add a watcher to get the width of any element. You should add a css class to the object you want to get the width of. Then you can use a `querySelector` to get it:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
getBackgroundWidth() {
|
||||||
|
var background = document.querySelector("#backgroundsvg");
|
||||||
|
this.backgroundWidth = background.clientWidth;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Documentation for `querySelector`: <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>
|
||||||
|
|
||||||
|
You can see all the methods and properties for document here:
|
||||||
|
<https://developer.mozilla.org/en-US/docs/Web/API/Document>
|
||||||
|
|
||||||
|
## Using `<v-content>` to fill the page
|
||||||
|
|
||||||
|
`fill-height` is useful for child components if you want them to fill to the height of the parent.
|
||||||
|
|
||||||
|
To make a fullscreen element use fluid with 0 margins, and set the height to 100vh. Then any children `<v-component>` can use the `fill-height` prop.
|
||||||
|
|
||||||
|
## v-for for n times repetition
|
||||||
|
|
||||||
|
You can repeat things n times using a `v-for`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<v-container v-for="index in 10" :key="index"></v-container>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `<v-container fill-height class="d-flex justify-center align-content-center">`
|
||||||
|
to get content like - screenshot of central content with pipe background
|
||||||
|
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
## Images as backgrounds
|
||||||
|
|
||||||
|
You can use `background-size: cover;` in the css to dynamically have a background image adjust to the viewport.
|
||||||
|
<https://www.webfx.com/blog/web-design/responsive-background-image/>
|
||||||
|
|
||||||
|
Demo: <https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html>
|
||||||
|
|
||||||
|
You can use aditional controls to set how the image should scale itself:
|
||||||
|
<https://css-tricks.com/perfect-full-page-background-image/>
|
||||||
|
|
||||||
|
Cropping images with `object-fit: cover;`
|
||||||
|
<https://alligator.io/css/cropping-images-object-fit/>
|
||||||
|
|
||||||
|
### SVG elements as a background
|
||||||
|
|
||||||
|
You can use an svg (from envato) as a fullscreen background image. To do this you should decide if you need a transparent appbar or not.
|
||||||
|
|
||||||
|
If you do not need a transparent appbar:
|
||||||
|
|
||||||
|
- Set an image
|
||||||
|
- with `position: absolute;`
|
||||||
|
- with `height: calc(100vh - 64px)`
|
||||||
|
|
||||||
|
## Images that autoscale (zoom)
|
||||||
|
|
||||||
|
This is a good example on how you can dynamically zoom in/out of an image:
|
||||||
|
<https://css-tricks.com/crop-top/>
|
||||||
|
|
||||||
|
Quick method:
|
||||||
|
|
||||||
|
To set an image to auto scale (zoom style)
|
||||||
|
|
||||||
|
Use `max-width` to the value you want the image to be
|
||||||
|
Use `width: 100%;`
|
||||||
|
Use `height: auto;`
|
||||||
|
Use `max-height` to the value you want the image to be
|
||||||
|
|
||||||
|
## Using envato EPS
|
||||||
|
|
||||||
|
Open the EPS file in Graphic. Hide and delete all the layers you don't need. When finished, create a new canvas and copy and paste the images to it. Position it accordingly and resize everything. Export as svg and edit the svg to remove the height and width.
|
||||||
|
|
||||||
|
## Transparent appbar
|
||||||
|
|
||||||
|
You can have the appbar be transparent to have a background image fullscreen. To do this you should:
|
||||||
|
|
||||||
|
- Set an image
|
||||||
|
- with `position: absolute;`
|
||||||
|
-
|
||||||
|
|
||||||
|
|
||||||
|
## To Do
|
||||||
|
|
||||||
|
Image looks good on `left: 50%;`
|
||||||
|
|
||||||
|
Organise these notes!
|
||||||
|
|
||||||
|
Set dynamic navbar content (cols)
|
||||||
|
|
||||||
|
Get image cropping from more than one direction
|
||||||
|
|
||||||
|
Document all up and move into firebase.md
|
||||||
|
|
||||||
|
Do stripe menu
|
||||||
|
|
||||||
|
Do waves/headers with backgrounds
|
||||||
|
Do a fullscreen blob landing page
|
||||||
|
Do Tailwind layout (moveable side content)
|
||||||
|
Do <https://elements.envato.com/masty-business-html-landing-page-template-WQGEWXK> (using clippath on an image with an overlay colour?)
|
||||||
|
Do Liquidlight (using big headers)
|
||||||
|
Do <https://elements.envato.com/appstorm-app-startup-template-L74LLT> (use 100vh on background image as in playground with transparent appbar)
|
||||||
|
|
||||||
|
Position a triangle top right as in <https://elements.envato.com/set-of-medical-web-page-design-templates-5RRCL9>
|
||||||
|
|
||||||
|
And position random blobs as in <https://elements.envato.com/set-of-web-page-design-templates-EHNRLP>
|
||||||
|
|
||||||
|
More images: <https://elements.envato.com/set-of-medical-web-page-design-templates-VYMDPA>
|
||||||
|
|
||||||
|
Do buttons: <https://www.gatsbyjs.org>
|
||||||
|
|
||||||
|
Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
|
||||||
|
<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
|
||||||
|
|
||||||
|
Can use dynamic classes with vuetify.
|
||||||
|
|
||||||
|
Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
|
||||||
|
|
||||||
|
56 on small breakpoint
|
||||||
|
64 on medium and up
|
||||||
|
|
||||||
|
List of breakpoints:
|
||||||
|
<https://vuetifyjs.com/en/customization/breakpoints/#breakpoints>
|
||||||
|
|
||||||
|
Small: `600px >< 960px`
|
||||||
|
Medium: `960px >< 1264px`
|
||||||
|
|
||||||
|
When at width of image background, can set to right:0 to crop from left, and left:0 to crop from right.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Doc setting an image as background without transparent appbar
|
||||||
|
Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
|
||||||
|
|
||||||
|
Doc setting an image with transparent appbar
|
||||||
|
Rather than change height you need to set top to negative
|
||||||
|
|
||||||
|
Have examples of both of these to refer back to^
|
||||||
|
|
||||||
|
|
||||||
|
## Stripe appbar menu
|
||||||
|
|
||||||
|
Install with yarn:
|
||||||
|
`yarn add vue-stripe-menu`
|
||||||
|
|
||||||
|
Add to `main.js`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Vue from 'Vue'
|
||||||
|
import VueStripeMenu from 'vue-stripe-menu'
|
||||||
|
Vue.use(VueStripeMenu)
|
||||||
|
// Import build styles
|
||||||
|
import 'vue-stripe-menu/dist/vue-stripe-menu.css'
|
||||||
|
```
|
||||||
+5
-5
@@ -1,11 +1,11 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
css: {
|
css: {
|
||||||
loaderOptions: {
|
loaderOptions: {
|
||||||
scss: {
|
// scss: {
|
||||||
prependData: `
|
// prependData: `
|
||||||
@import "@/scss/_variables.scss";
|
// @import "@/scss/_variables.scss";
|
||||||
`
|
// `
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
transpileDependencies: ["vuetify"]
|
transpileDependencies: ["vuetify"]
|
||||||
|
|||||||
@@ -1445,6 +1445,15 @@ anymatch@~3.1.1:
|
|||||||
normalize-path "^3.0.0"
|
normalize-path "^3.0.0"
|
||||||
picomatch "^2.0.4"
|
picomatch "^2.0.4"
|
||||||
|
|
||||||
|
aos@^3.0.0-beta.6:
|
||||||
|
version "3.0.0-beta.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/aos/-/aos-3.0.0-beta.6.tgz#75148e3be4bb1add53f5a1828623bf82b67691e9"
|
||||||
|
integrity sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==
|
||||||
|
dependencies:
|
||||||
|
classlist-polyfill "^1.2.0"
|
||||||
|
lodash.debounce "^4.0.8"
|
||||||
|
lodash.throttle "^4.1.1"
|
||||||
|
|
||||||
aproba@^1.1.1:
|
aproba@^1.1.1:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
resolved "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
|
resolved "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
|
||||||
@@ -2133,6 +2142,11 @@ class-utils@^0.3.5:
|
|||||||
isobject "^3.0.0"
|
isobject "^3.0.0"
|
||||||
static-extend "^0.1.1"
|
static-extend "^0.1.1"
|
||||||
|
|
||||||
|
classlist-polyfill@^1.2.0:
|
||||||
|
version "1.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
|
||||||
|
integrity sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=
|
||||||
|
|
||||||
clean-css@4.2.x:
|
clean-css@4.2.x:
|
||||||
version "4.2.3"
|
version "4.2.3"
|
||||||
resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
|
resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
|
||||||
@@ -4914,6 +4928,11 @@ locate-path@^5.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
p-locate "^4.1.0"
|
p-locate "^4.1.0"
|
||||||
|
|
||||||
|
lodash.debounce@^4.0.8:
|
||||||
|
version "4.0.8"
|
||||||
|
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||||
|
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
|
||||||
|
|
||||||
lodash.defaultsdeep@^4.6.1:
|
lodash.defaultsdeep@^4.6.1:
|
||||||
version "4.6.1"
|
version "4.6.1"
|
||||||
resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
|
resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
|
||||||
@@ -4934,6 +4953,11 @@ lodash.memoize@^4.1.2:
|
|||||||
resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
|
resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
|
||||||
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
|
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
|
||||||
|
|
||||||
|
lodash.throttle@^4.1.1:
|
||||||
|
version "4.1.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
|
||||||
|
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
|
||||||
|
|
||||||
lodash.transform@^4.6.0:
|
lodash.transform@^4.6.0:
|
||||||
version "4.6.0"
|
version "4.6.0"
|
||||||
resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
|
resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
|
||||||
@@ -8020,6 +8044,11 @@ vue-loader@^15.8.3:
|
|||||||
vue-hot-reload-api "^2.3.0"
|
vue-hot-reload-api "^2.3.0"
|
||||||
vue-style-loader "^4.1.0"
|
vue-style-loader "^4.1.0"
|
||||||
|
|
||||||
|
vue-page-transition@^0.2.2:
|
||||||
|
version "0.2.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue-page-transition/-/vue-page-transition-0.2.2.tgz#a7c607ccc8dc67e7c05e66a5a9d54bd27d252d56"
|
||||||
|
integrity sha512-qOx+llJ28XX0VwJNJ4GVaeNBPRmPMZac2QQgrIHVUhpXyJx2CQ2XvoQOpGD1ge7QMY3PjZ6fwTbdBwZkA3I9qA==
|
||||||
|
|
||||||
vue-responsive-video-background-player@^1.0.8:
|
vue-responsive-video-background-player@^1.0.8:
|
||||||
version "1.0.8"
|
version "1.0.8"
|
||||||
resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.0.8.tgz#c0c95b82aa48a13e92f72c6051cc7ec8ff44058d"
|
resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.0.8.tgz#c0c95b82aa48a13e92f72c6051cc7ec8ff44058d"
|
||||||
@@ -8030,6 +8059,14 @@ vue-router@^3.1.5:
|
|||||||
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1584203224109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
|
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1584203224109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
|
||||||
integrity sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k=
|
integrity sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k=
|
||||||
|
|
||||||
|
vue-stripe-menu@^1.2.8:
|
||||||
|
version "1.2.8"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue-stripe-menu/-/vue-stripe-menu-1.2.8.tgz#435b992fc4dd519f5711c0d882b32ed7bf883151"
|
||||||
|
integrity sha512-4btZ1/s8+fFGQexcgCMVGoIW6zxUg1jJ+sYgM/gcCYPtrWVMvcHQ2Hx2gBcAQaCat9WD/Hy/ddx2pgzXvljBNg==
|
||||||
|
dependencies:
|
||||||
|
core-js "^3.6.4"
|
||||||
|
vue "^2.6.11"
|
||||||
|
|
||||||
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
|
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
|
||||||
version "4.1.2"
|
version "4.1.2"
|
||||||
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
||||||
|
|||||||
Reference in New Issue
Block a user