initial
parent
79d306a4ed
commit
47ea31e9bf
28
src/App.vue
28
src/App.vue
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div id="buttons">
|
||||
<h1>Buttons</h1>
|
||||
<div>
|
||||
<button>Default</button>
|
||||
<button disabled>Default</button>
|
||||
|
|
||||
<button class="generic">Generic</button>
|
||||
<button class="generic" disabled>Generic</button>
|
||||
|
|
||||
<button class="action">Action</button>
|
||||
<button class="action" disabled>Action</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@import './assets/styles/main.css';
|
||||
@import './assets/styles/buttons.css';
|
||||
|
||||
#buttons {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
</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.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -0,0 +1,37 @@
|
|||
button {
|
||||
padding: 4px 36px;
|
||||
margin: 4px;
|
||||
font-weight: bold;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
|
||||
background-color: #71A857;
|
||||
color: white;
|
||||
|
||||
letter-spacing: 1px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:enabled:hover {
|
||||
box-shadow: 0px 4px 4px #00000022;
|
||||
}
|
||||
|
||||
button:enabled:active {
|
||||
background-color: #557D42;
|
||||
box-shadow: inset 4px 4px 4px #00000022;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #AFDA9A;
|
||||
color: #FFFFFF88;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button.generic { background-color: var(--grey-light); }
|
||||
button.generic:enabled:active { background-color: #909FA9; }
|
||||
button.generic:disabled { background-color: #C9D4DC; }
|
||||
|
||||
button.action { background-color: var(--error); }
|
||||
button.action:enabled:active { background-color: #B54747; }
|
||||
button.action:disabled { background-color: #FFB5B5; }
|
|
@ -0,0 +1,76 @@
|
|||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto/Roboto-Regular.ttf');
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto/Roboto-Italic.ttf');
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto/Roboto-Light.ttf');
|
||||
font-style: normal;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto/Roboto-LightItalic.ttf');
|
||||
font-style: italic;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto/Roboto-Bold.ttf');
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto/Roboto-BolcItalic.ttf');
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
font-family: 'Roboto';
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-green-dark: #71A857;
|
||||
--primary-green: #92D373;
|
||||
--primary-light: #ABE191;
|
||||
|
||||
--primary-blue-dark: #517EA8;
|
||||
--primary-blue: #76A9D8;
|
||||
--primary-blue: #B0CFEC;
|
||||
|
||||
--grey-dark: #323940;
|
||||
--grey: #848B90;
|
||||
--grey-light: #AAB7C0;
|
||||
--grey-lightest: #D5DBDF;
|
||||
|
||||
--white-washed: #EDEEEF;
|
||||
--white-normal: #FFFFFF;
|
||||
|
||||
--error: #D96161;
|
||||
--error-light: #FB9F9F;
|
||||
--warn: #D9A133;
|
||||
--warn-light: #F2DDB3;
|
||||
--success: #60B552;
|
||||
--success-light: #BCE2B6;
|
||||
--info: #608FBA;
|
||||
--info-light: #ABC8E3;
|
||||
}
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
|
@ -1,8 +1,8 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import Test from './Test.vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
render: h => h(Test),
|
||||
}).$mount('#app')
|
||||
|
|
Loading…
Reference in New Issue