new fuse logo

This commit is contained in:
Sercan Yemen 2017-09-18 10:47:08 +03:00
parent d4374e6df0
commit b377d99c66
6 changed files with 1151 additions and 47 deletions

View File

@ -1,7 +1,7 @@
<div class="navbar-header">
<div class="logo">
<span class="logo-icon">F</span>
<img class="logo-icon" src="assets/images/logos/fuse.svg">
<span class="logo-text">FUSE</span>
</div>
@ -15,6 +15,6 @@
</div>
<div class="navbar-content" perfect-scrollbar>
<div class="navbar-content" perfectScrollbar>
<fuse-navigation layout="vertical"></fuse-navigation>
</div>

View File

@ -45,6 +45,7 @@ fuse-navbar-vertical {
&.left-navbar {
left: 0;
}
&.right-navbar {
right: 0;
}
@ -55,13 +56,17 @@ fuse-navbar-vertical {
max-width: 64px;
.navbar-header {
padding: 0 16px 0 16px;
padding: 0 13px;
.logo {
.logo-text {
opacity: 0;
transition: opacity 200ms ease;
}
}
}
}
&.folded-open {
}
}
&.close {
@ -111,22 +116,14 @@ fuse-navbar-vertical {
align-items: center;
.logo-icon {
display: block;
background: #039BE5;
width: 32px;
min-width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #FFF;
border-radius: 2px;
width: 38px;
}
.logo-text {
margin-left: 16px;
font-size: 16px;
margin-left: 8px;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.4px;
}
}
}

View File

@ -20,22 +20,7 @@
align-items: center;
.logo-icon {
display: block;
background: #039BE5;
width: 32px;
min-width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #FFF;
border-radius: 2px;
}
.logo-text {
margin-left: 16px;
font-size: 16px;
width: 38px;
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -40,17 +40,12 @@
}
#fuse-splash-screen .logo {
width: 96px;
height: 96px;
line-height: 96px;
width: 128px;
margin: 0 auto;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 56px;
text-align: center;
border-radius: 2px;
background-color: #039BE5;
color: #FFFFFF;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.22);
}
#fuse-splash-screen .logo img {
filter: drop-shadow(0px 10px 6px rgba(0, 0, 0, 0.2))
}
#fuse-splash-screen .spinner-wrapper {
@ -194,7 +189,7 @@
<div class="center">
<div class="logo">
<span>F</span>
<img width="128" src="assets/images/logos/fuse.svg">
</div>
<!-- Material Design Spinner -->