julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ (App) refactor App scss

Browse Source
This commit is contained in:
Julien Calixte
2019-10-15 23:03:31 +02:00
parent 8ec7bd0925
commit 50fae454cf
1 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/App.vue
View File

@@ -20,7 +20,9 @@
</div>
</online-view>
</router-link>
<span class="vaquant-title" :class="{ 'visible': shadow }">{{ title }}</span>
<span class="vaquant-title" :class="{ visible: shadow }">{{
title
}}</span>
<div
class="navbar-burger burger"
data-target="navbar-main"
@@ -40,18 +42,18 @@
@click="hideMenu"
>
<div class="navbar-end">
<router-link class="navbar-item" :to="{ name: 'about' }" v-t="'title.about'"></router-link>
<!-- <router-link class="navbar-item" :to="{ name: 'pricing' }" v-t="'title.pricing'"></router-link> -->
<a
class="navbar-item"
target="_blank"
rel="noreferrer"
:href="coffee"
>Supportez Vaquant avec un ☕ !</a>
<router-link
class="navbar-item"
:to="{ name: 'user' }"
>{{ username ? username : $t('user.loginsignup') }}</router-link>
:to="{ name: 'about' }"
v-t="'title.about'"
></router-link>
<!-- <router-link class="navbar-item" :to="{ name: 'pricing' }" v-t="'title.pricing'"></router-link> -->
<a class="navbar-item" target="_blank" rel="noreferrer" :href="coffee"
>Supportez Vaquant avec un ☕ !</a
>
<router-link class="navbar-item" :to="{ name: 'user' }">{{
username ? username : $t('user.loginsignup')
}}</router-link>
</div>
</div>
</nav>
@@ -116,6 +118,9 @@ export default class App extends Vue {
</script>
<style lang="scss">
$icon_size: 18px;
$margin: 0.75rem;
.navbar {
color: red;
.vaquant-title {
@@ -129,30 +134,31 @@ export default class App extends Vue {
.online-view {
position: absolute;
bottom: 7px;
right: 18px;
width: 18px;
right: $icon_size;
width: $icon_size;
height: auto;
}
&::before {
content: '';
position: absolute;
right: 0;
bottom: -5px;
left: 0;
width: 100%;
height: 5px;
transition: opacity 0.25s ease-out;
pointer-events: none;
opacity: 0;
box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.842);
will-change: opacity;
}
&.shadow::before {
opacity: 1;
}
}
.navbar::before {
content: '';
position: absolute;
right: 0;
bottom: -5px;
left: 0;
width: 100%;
height: 5px;
transition: opacity 0.25s ease-out;
pointer-events: none;
opacity: 0;
box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.842);
will-change: opacity;
}
.navbar.shadow::before {
opacity: 1;
}
main {
margin-left: 0.75rem;
margin-right: 0.75rem;
margin-left: $margin;
margin-right: $margin;
}
</style>