Guillaume
98 lines
1.4 KiB
Vue
98 lines
1.4 KiB
Vue
<script>
|
|
import ChannelList from './components/ChannelList.vue'
|
|
|
|
import CHANNELS from './graphql/channels.gql'
|
|
|
|
export default {
|
|
components: {
|
|
ChannelList,
|
|
},
|
|
|
|
apollo: {
|
|
channels: CHANNELS,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app">
|
|
<ChannelList />
|
|
<div class="content">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="stylus">
|
|
@import '~@/style/imports'
|
|
|
|
html,
|
|
body,
|
|
#app,
|
|
.app
|
|
height 100%
|
|
|
|
body
|
|
margin 0
|
|
font-family 'Lato', 'Avenir', Helvetica, Arial, sans-serif
|
|
-webkit-font-smoothing antialiased
|
|
-moz-osx-font-smoothing grayscale
|
|
|
|
.app
|
|
color #2c3e50
|
|
display grid
|
|
grid-template-columns 300px 1fr
|
|
grid-template-rows 1fr
|
|
|
|
:focus
|
|
outline none
|
|
|
|
a
|
|
text-decoration none
|
|
color $color
|
|
cursor pointer
|
|
&:hover
|
|
color lighten($color, 30%)
|
|
|
|
.form-input
|
|
border none
|
|
border solid 1px #eee
|
|
border-radius 3px
|
|
padding 8px
|
|
font-family inherit
|
|
font-size inherit
|
|
color inherit
|
|
&:focus
|
|
border-color $color
|
|
|
|
.button,
|
|
.icon-button
|
|
display inline-flex
|
|
align-items center
|
|
justify-content center
|
|
background lighten($color, 90%)
|
|
border none
|
|
border-radius 3px
|
|
padding 8px
|
|
cursor pointer
|
|
font-size inherit
|
|
color $color
|
|
box-sizing border-box
|
|
&:hover
|
|
background $color
|
|
color white
|
|
|
|
.icon-button
|
|
width 32px
|
|
height @width
|
|
.material-icons
|
|
font-size 16px
|
|
|
|
.error
|
|
color red
|
|
padding 8px
|
|
background lighten(red, 95%)
|
|
border-radius 3px
|
|
margin-bottom 8px
|
|
</style>
|