secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Context menu :active; Experimenting with branding

Browse Source
This commit is contained in:
James Barnsley
2017-08-28 21:16:26 +12:00
parent 5a71cbcf92
commit f3097d00b5
4 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/icon.svg Executable file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 141.7 141.7" style="enable-background:new 0 0 141.7 141.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<polygon class="st0" points="58.3,47.1 18.2,8.2 18.2,133.5 58.3,95 "/>
<polygon class="st0" points="58.3,8.2 58.3,27.1 103.8,70.7 58.3,115 58.3,133.5 123.5,70.7 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 593 B

3
src/js/components/Sidebar.js
View File

@ -29,6 +29,9 @@ class Sidebar extends React.Component{
return (
<aside>
<div className="liner">
<div className="branding"></div>
<nav>
<section>

19
src/scss/components/_context-menu.scss
View File

@ -279,6 +279,7 @@
.context-menu-trigger {
@include animate();
@include gradient_overlay(3px);
display: inline-block;
padding: 14px 12px;
cursor: pointer;
@ -297,21 +298,9 @@
margin: 1px;
}
&:before {
@include animate();
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 9;
background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
&:active {
margin-top: 0px;
margin-bottom: -1px;
}
&:hover{

13
src/scss/components/_sidebar.scss
View File

@ -24,6 +24,19 @@ aside{
overflow-y: auto;
}
.branding {
height: 50px;
margin-top: 30px;
opacity: 0.2;
background: {
image: url('../assets/icon.svg');
position: 50% 50%;
repeat: no-repeat;
size: contain;
}
}
nav {
z-index: 2;
position: relative;