mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 07:40:13 +08:00
Code Issues Actions 2 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
Show Stats 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">
<navigation />
<subnavigation />
<div class="page__content">
<router-view />
@ -23,12 +24,14 @@
<script>
import Navigation from 'Components/Navigation'
import Subnavigation from 'Components/Subnavigation'
import Icon from 'Components/Icon'
import Ad from 'Components/Ad'
export default {
components: {
Navigation,
Subnavigation,
Icon,
Ad,
},

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

@ -1,10 +1,10 @@
<template>
<div class="navigation">
<div class="navigation__header">
<h1 class="navigation__logo">
tiptap <span class="navigation__beta">beta</span>
</h1>
<div>
<a class="navigation__link" href="https://github.com/heyscrumpy/tiptap/blob/master/CONTRIBUTING.md" target="_blank">
Contribute
@ -13,34 +13,6 @@
<icon class="navigation__icon" name="github" />
</a>
</div>
</div>
<div class="navigation__links">
<router-link class="navigation__link" to="/">
Menu Bar
</router-link>
<router-link class="navigation__link" to="/menu-bubble">
Menu Bubble
</router-link>
<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>
</template>

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

@ -2,16 +2,12 @@
.navigation {
text-align: center;
&__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;
@ -37,12 +33,6 @@
border-radius: 5px;
}
&__links {
padding: 0.5rem;
background-color: rgba($color-black, 0.9);
color: $color-white;
}
&__link {
display: inline-block;
color: rgba($color-white, 0.5);
@ -56,11 +46,6 @@
color: $color-white;
background-color: rgba($color-white, 0.1);
}
&.is-exact-active {
color: $color-white;
background-color: rgba($color-white, 0.2);
}
}
&__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);
}
}
}