mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-08-06 13:38:49 +08:00
improve navigation
This commit is contained in:
Philipp Kühn
parent
fcb11f507c
commit
bc80b9209e
@ -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>
|
||||
@ -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;
|
||||
|
||||
19
examples/assets/images/icons/github.svg
Executable file → Normal file
19
examples/assets/images/icons/github.svg
Executable file → Normal file
@ -1,18 +1,3 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
|
||||
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
|
||||
<g id="Filled_Icons">
|
||||
<path d="M11.999,0.5C5.649,0.5,0.5,5.648,0.5,12c0,5.082,3.294,9.392,7.865,10.914c0.574,0.103,0.756-0.236,0.756-0.541
|
||||
c0-0.274,0.006-1.037,0-1.997C5.923,21.07,5.26,18.861,5.26,18.861c-0.523-1.329-1.275-1.682-1.275-1.682
|
||||
C2.94,16.465,4.062,16.48,4.062,16.48c1.153,0.08,1.762,1.184,1.762,1.184c1.026,1.758,2.691,1.25,3.346,0.956
|
||||
c0.106-0.742,0.402-1.251,0.731-1.536c-2.554-0.292-5.238-1.277-5.238-5.686c0-1.255,0.448-2.281,1.184-3.086
|
||||
c-0.118-0.289-0.514-1.46,0.112-3.043c0,0,0.967-0.309,3.162,1.18c0.918-0.256,1.902-0.383,2.88-0.388
|
||||
c0.976,0.005,1.96,0.132,2.88,0.388c2.195-1.488,3.159-1.18,3.159-1.18c0.627,1.583,0.232,2.754,0.114,3.043
|
||||
c0.736,0.805,1.183,1.831,1.183,3.086c0,4.42-2.689,5.391-5.251,5.674c0.412,0.357,0.787,1.047,0.787,2.12c0,1.438,0,2.806,0,3.184
|
||||
c0,0.308,0.186,0.647,0.77,0.536C20.209,21.389,23.5,17.08,23.5,12C23.5,5.648,18.352,0.5,11.999,0.5z"/>
|
||||
</g>
|
||||
<g id="Frames-24px">
|
||||
<rect fill="none" width="24" height="24"/>
|
||||
</g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M11.999,0.5 C5.649,0.5 0.5,5.648 0.5,12 C0.5,17.082 3.794,21.392 8.365,22.914 C8.939,23.017 9.121,22.678 9.121,22.373 C9.121,22.099 9.127,21.336 9.121,20.376 C5.923,21.07 5.26,18.861 5.26,18.861 C4.737,17.532 3.985,17.179 3.985,17.179 C2.94,16.465 4.062,16.48 4.062,16.48 C5.215,16.56 5.824,17.664 5.824,17.664 C6.85,19.422 8.515,18.914 9.17,18.62 C9.276,17.878 9.572,17.369 9.901,17.084 C7.347,16.792 4.663,15.807 4.663,11.398 C4.663,10.143 5.111,9.117 5.847,8.312 C5.729,8.023 5.333,6.852 5.959,5.269 C5.959,5.269 6.926,4.96 9.121,6.449 C10.039,6.193 11.023,6.066 12.001,6.061 C12.977,6.066 13.961,6.193 14.881,6.449 C17.076,4.961 18.04,5.269 18.04,5.269 C18.667,6.852 18.272,8.023 18.154,8.312 C18.89,9.117 19.337,10.143 19.337,11.398 C19.337,15.818 16.648,16.789 14.086,17.072 C14.498,17.429 14.873,18.119 14.873,19.192 C14.873,20.63 14.873,21.998 14.873,22.376 C14.873,22.684 15.059,23.023 15.643,22.912 C20.209,21.389 23.5,17.08 23.5,12 C23.5,5.648 18.352,0.5 11.999,0.5 Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
@ -32,6 +32,9 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user