CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-30 17:18:14 +13:00
Code Issues Projects Releases Wiki Activity

Implement refreshed design for the top nav.

Browse source
This commit is contained in:
pngwn 2020-01-20 13:45:00 +00:00
parent fca1b58829
commit e978e38ae9
2 changed files with 46 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
packages/builder/src/PackageRoot.svelte
View file

@ -11,9 +11,10 @@ import { fade } from "svelte/transition";
<div class="root"> <div class="root">
<div class="top-nav"> <div class="top-nav">
<IconButton icon="home" <button class="home-logo"><img src="/assets/budibase-logo-only.png"/></button>
<!-- <IconButton icon="home"
color="var(--slate)" color="var(--slate)"
hoverColor="var(--secondary75)"/> hoverColor="var(--secondary75)"/> -->
<span class:active={$store.isBackend} <span class:active={$store.isBackend}
class="topnavitem" class="topnavitem"
on:click={store.showBackend}> on:click={store.showBackend}>
@ -37,7 +38,7 @@ import { fade } from "svelte/transition";
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
<style> <style>
@ -51,10 +52,13 @@ import { fade } from "svelte/transition";
.top-nav { .top-nav {
flex: 0 0 auto; flex: 0 0 auto;
height: 25px; height: 48px;
background: white; background: white;
padding: 5px; padding: 0px 15px;
width: 100%; width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
} }
.content { .content {
@ -71,9 +75,14 @@ import { fade } from "svelte/transition";
.topnavitem { .topnavitem {
cursor: pointer; cursor: pointer;
color: var(--secondary50); color: var(--secondary50);
padding: 0px 15px; margin: 0px 15px;
padding-top: 4px;
font-weight: 600; font-weight: 600;
font-size: .9rem; font-size: 1rem;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
} }
.topnavitem:hover { .topnavitem:hover {
@ -84,8 +93,31 @@ import { fade } from "svelte/transition";
.active { .active {
color: var(--primary100); color: var(--primary100);
font-weight: 900; font-weight: 600;
border-bottom: 2px solid var(--primary100);
border-top: 2px solid transparent;
}
.home-logo {
border-style: none;
background-color: rgba(0,0,0,0);
cursor: pointer;
outline: none;
height: 40px;
padding: 8px 10px;
}
.home-logo:hover {
color: var(--hovercolor);
}
.home-logo:active {
outline:none;
} }
</style> .home-logo img {
height: 100%;
}
</style>

10
packages/builder/src/global.css
View file

@ -1,12 +1,12 @@
:root { :root {
--primary100: #454CA0FF; --primary100: #173157FF;
--primary75: #454CA0BF; --primary75: #454CA0BF;
--primary50: #454CA080; --primary50: #454CA080;
--primary25: #454CA040; --primary25: #454CA040;
--primary10: #454CA01A; --primary10: #454CA01A;
--primary5: #454ca00c; --primary5: #454ca00c;
--primarydark: #3F448A; --primarydark: #3F448A;
--secondary100: #162B4DFF; --secondary100: #162B4DFF;
--secondary75: #162B4DBF; --secondary75: #162B4DBF;
--secondary50: #162B4D80; --secondary50: #162B4D80;
@ -16,14 +16,14 @@
--secondarydark: #3F448A; --secondarydark: #3F448A;
--tertiary: #F2F5F7; --tertiary: #F2F5F7;
--success100: #49C39EFF; --success100: #49C39EFF;
--success75: #49C39EBF; --success75: #49C39EBF;
--success50: #49C39E80; --success50: #49C39E80;
--success25: #49C39E40; --success25: #49C39E40;
--success10: #49C39E1A; --success10: #49C39E1A;
--successdark: #44B492; --successdark: #44B492;
--deletion100: #F2545BFF; --deletion100: #F2545BFF;
--deletion75: #F2545BBF; --deletion75: #F2545BBF;
--deletion50: #F2545B80; --deletion50: #F2545B80;
@ -97,4 +97,4 @@ h5 {
font-family: var(--fontblack); font-family: var(--fontblack);
font-size: 12pt; font-size: 12pt;
color: var(--darkslate); color: var(--darkslate);
} }