ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve navigation

Browse Source
This commit is contained in:
Philipp Kühn
2018-08-22 15:42:03 +02:00
parent fcb11f507c
commit bc80b9209e
4 changed files with 64 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
examples/Components/Navigation/index.vue
View File

@@ -1,15 +1,38 @@
<template>
<div class="navigation">
<router-link class="navigation__link" to="/">
Default
</router-link>
<router-link class="navigation__link" to="/bubble-menu">
Bubble Menu
</router-link>
<router-link class="navigation__link" to="/links">
Links
</router-link>
<div class="navigation__header">
<h1 class="navigation__logo">
tiptap
</h1>
<a href="https://github.com/heyscrumpy/tiptap">
<icon class="navigation__icon" name="github" />
</a>
</div>
<div class="navigation__links">
<router-link class="navigation__link" to="/">
Default
</router-link>
<router-link class="navigation__link" to="/bubble-menu">
Bubble Menu
</router-link>
<router-link class="navigation__link" to="/links">
Links
</router-link>
</div>
</div>
</template>
<style lang="scss" src="./style.scss"></style>
<script>
import Icon from 'Components/Icon'
export default {
components: {
Icon,
},
}
</script>
<style lang="scss" src="./style.scss" scoped></style>

28
examples/Components/Navigation/style.scss
View File

@@ -2,9 +2,33 @@
.navigation {
background: $color-black;
text-align: center;
padding: 0.5rem;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background-color: $color-black;
color: $color-white;
}
&__logo {
font-size: 1.1rem;
font-weight: bold;
margin: 0;
}
&__icon {
width: 1.5rem;
height: 1.5rem;
}
&__links {
padding: 0.5rem;
background-color: rgba($color-black, 0.9);
color: $color-white;
}
&__link {
display: inline-block;