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

add subnavigation component

Browse Source
This commit is contained in:
Philipp Kühn
2018-08-23 07:53:08 +02:00
parent a080c2be72
commit b01582f376
5 changed files with 82 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/Components/App/index.vue
View File

@@ -2,6 +2,7 @@
<div class="page" spellcheck="false"> <div class="page" spellcheck="false">
<navigation /> <navigation />
<subnavigation />
<div class="page__content"> <div class="page__content">
<router-view /> <router-view />
@@ -23,12 +24,14 @@
<script> <script>
import Navigation from 'Components/Navigation' import Navigation from 'Components/Navigation'
import Subnavigation from 'Components/Subnavigation'
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import Ad from 'Components/Ad' import Ad from 'Components/Ad'
export default { export default {
components: { components: {
Navigation, Navigation,
Subnavigation,
Icon, Icon,
Ad, Ad,
}, },

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

@@ -1,45 +1,17 @@
<template> <template>
<div class="navigation"> <div class="navigation">
<div class="navigation__header"> <h1 class="navigation__logo">
<h1 class="navigation__logo"> tiptap <span class="navigation__beta">beta</span>
tiptap <span class="navigation__beta">beta</span> </h1>
</h1>
<div>
<a class="navigation__link" href="https://github.com/heyscrumpy/tiptap/blob/master/CONTRIBUTING.md" target="_blank">
Contribute
</a>
<a class="navigation__github-link" href="https://github.com/heyscrumpy/tiptap" target="_blank">
<icon class="navigation__icon" name="github" />
</a>
</div>
</div>
<div class="navigation__links"> <div>
<router-link class="navigation__link" to="/"> <a class="navigation__link" href="https://github.com/heyscrumpy/tiptap/blob/master/CONTRIBUTING.md" target="_blank">
Menu Bar Contribute
</router-link> </a>
<router-link class="navigation__link" to="/menu-bubble"> <a class="navigation__github-link" href="https://github.com/heyscrumpy/tiptap" target="_blank">
Menu Bubble <icon class="navigation__icon" name="github" />
</router-link> </a>
<router-link class="navigation__link" to="/links">
Links
</router-link>
<router-link class="navigation__link" to="/hiding-menu-bar">
Hiding Menu Bar
</router-link>
<router-link class="navigation__link" to="/todo-list">
Todo List
</router-link>
<router-link class="navigation__link" to="/markdown-shortcuts">
Markdown Shortcuts
</router-link>
<router-link class="navigation__link" to="/read-only">
Read-Only
</router-link>
<router-link class="navigation__link" to="/embeds">
Embeds
</router-link>
</div> </div>
</div> </div>

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

@@ -2,16 +2,12 @@
.navigation { .navigation {
text-align: center; display: flex;
justify-content: space-between;
&__header { align-items: center;
display: flex; padding: 0.75rem;
justify-content: space-between; background-color: $color-black;
align-items: center; color: $color-white;
padding: 0.75rem;
background-color: $color-black;
color: $color-white;
}
&__logo { &__logo {
font-size: 1.1rem; font-size: 1.1rem;
@@ -37,12 +33,6 @@
border-radius: 5px; border-radius: 5px;
} }
&__links {
padding: 0.5rem;
background-color: rgba($color-black, 0.9);
color: $color-white;
}
&__link { &__link {
display: inline-block; display: inline-block;
color: rgba($color-white, 0.5); color: rgba($color-white, 0.5);
@@ -56,11 +46,6 @@
color: $color-white; color: $color-white;
background-color: rgba($color-white, 0.1); background-color: rgba($color-white, 0.1);
} }
&.is-exact-active {
color: $color-white;
background-color: rgba($color-white, 0.2);
}
} }
&__github-link { &__github-link {

30
examples/Components/Subnavigation/index.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div class="subnavigation">
<router-link class="subnavigation__link" to="/">
Menu Bar
</router-link>
<router-link class="subnavigation__link" to="/menu-bubble">
Menu Bubble
</router-link>
<router-link class="subnavigation__link" to="/links">
Links
</router-link>
<router-link class="subnavigation__link" to="/hiding-menu-bar">
Hiding Menu Bar
</router-link>
<router-link class="subnavigation__link" to="/todo-list">
Todo List
</router-link>
<router-link class="subnavigation__link" to="/markdown-shortcuts">
Markdown Shortcuts
</router-link>
<router-link class="subnavigation__link" to="/read-only">
Read-Only
</router-link>
<router-link class="subnavigation__link" to="/embeds">
Embeds
</router-link>
</div>
</template>
<style lang="scss" src="./style.scss" scoped></style>

33
examples/Components/Subnavigation/style.scss Normal file
View File

@@ -0,0 +1,33 @@
@import "~variables";
.subnavigation {
position: sticky;
top: 0;
z-index: 1000;
padding: 0.5rem;
background-color: rgba($color-black, 0.9);
color: $color-white;
text-align: center;
&__link {
display: inline-block;
color: rgba($color-white, 0.5);
text-decoration: none;
font-weight: bold;
font-size: 0.9rem;
padding: 0.1rem 0.5rem;
border-radius: 3px;
&:hover {
color: $color-white;
background-color: rgba($color-white, 0.1);
}
&.is-exact-active {
color: $color-white;
background-color: rgba($color-white, 0.2);
}
}
}