Client - update app style + add link in nav-bar
This commit is contained in:
parent
0876373609
commit
73915a1750
@ -62,6 +62,7 @@
|
|||||||
.footer-item {
|
.footer-item {
|
||||||
padding: 10px 10px;
|
padding: 10px 10px;
|
||||||
|
|
||||||
|
border-top: solid 1px var(--footer-border-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="nav">
|
<div id="nav">
|
||||||
<div class="container">
|
<div class="nav-container">
|
||||||
<div class="nav-app-name">
|
<div class="nav-app-name">
|
||||||
<div class="nav-item app-name">FitTrackee</div>
|
<div class="nav-item app-name" @click="$router.push('/')">
|
||||||
|
FitTrackee
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }">
|
<div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }">
|
||||||
<i class="fa fa-bars hamburger-icon" @click="openMenu()"></i>
|
<i class="fa fa-bars hamburger-icon" @click="openMenu()"></i>
|
||||||
@ -104,6 +106,18 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding: 15px 10px;
|
padding: 15px 10px;
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding: 0 15px 15px 15px;
|
||||||
|
max-width: $container-width;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
border-bottom: solid 1px var(--nav-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
&.router-link-exact-active {
|
&.router-link-exact-active {
|
||||||
color: var(--nav-bar-link-active);
|
color: var(--nav-bar-link-active);
|
||||||
@ -114,6 +128,10 @@
|
|||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa {
|
.fa {
|
||||||
|
@ -23,17 +23,8 @@ a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
max-width: $container-width;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
background: var(--app-background-color);
|
||||||
border: solid 1px var(--app-color);
|
border: solid 1px var(--app-color);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: 2px 2px 2px var(--app-shadow-color);
|
box-shadow: 2px 2px 2px var(--app-shadow-color);
|
||||||
|
@ -1,12 +1,14 @@
|
|||||||
:root {
|
:root {
|
||||||
--app-background-color: #eaeaea;
|
--app-background-color: #FFFFFF;
|
||||||
--app-color: #2c3e50;
|
--app-color: #2c3e50;
|
||||||
--app-a-color: #40578a;
|
--app-a-color: #40578a;
|
||||||
|
|
||||||
--nav-bar-background-color: #FFFFFF;
|
--nav-bar-background-color: #FFFFFF;
|
||||||
--nav-bar-link-active: #485b6e;
|
--nav-bar-link-active: #485b6e;
|
||||||
|
--nav-border-color: #c5ccdb;
|
||||||
|
|
||||||
--footer-background-color: #FFFFFF;
|
--footer-background-color: #FFFFFF;
|
||||||
|
--footer-border-color: #ebeef3;
|
||||||
--footer-color: #8b8c8c;
|
--footer-color: #8b8c8c;
|
||||||
|
|
||||||
--app-shadow-color: lightgrey;
|
--app-shadow-color: lightgrey;
|
||||||
|
Loading…
Reference in New Issue
Block a user