localhots
/
empact
1
0
Fork 0
Code Releases Activity

Make up a logo - check

This commit is contained in:
Gregory Eremin 2015-03-10 19:48:57 +07:00
parent 2cbd78dc8f
commit e9913127a1
2 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/scripts/app.jsx
View File

@ -87,8 +87,12 @@ var Menu = React.createClass({
return ( return (
<section className="menu"> <section className="menu">
<ul> <ul>
<li key="empact" className="nav empact"> <li key="empact" className="logo-button">
<Link to="org" params={this.getParams()}>Empact</Link> <Link to="org" params={this.getParams()}>
<div className="logo e">e</div>
<div className="logo mp">mp</div>
<div className="logo act">act</div>
</Link>
</li> </li>
<li key="orgs-header" className="nav header">Organizations:</li> <li key="orgs-header" className="nav header">Organizations:</li>
{this.props.orgs.map(renderOrg)} {this.props.orgs.map(renderOrg)}

46
app/styles/app.css
View File

@ -2,6 +2,37 @@
box-sizing: border-box; box-sizing: border-box;
} }
.logo {
display: inline-block;
line-height: 32px;
letter-spacing: 5px;
padding: 0 5px;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
font-weight: 600;
}
.logo.e {
float: left;
width: 30px;
padding-left: 10px;
background-color: #f5d059;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.logo.mp {
float: left;
margin-left: -5px;
background-color: #f39d41;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.logo.act {
background-color: #ef7126;
margin-left: -5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
section { section {
float: left; float: left;
} }
@ -18,9 +49,11 @@ section {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li.nav { .menu li {
display: block; display: block;
cursor: pointer; cursor: pointer;
}
.nav {
margin-bottom: 5px; margin-bottom: 5px;
} }
.nav.empact { .nav.empact {
@ -29,18 +62,19 @@ li.nav {
.nav.header { .nav.header {
color: #aaa; color: #aaa;
cursor: default; cursor: default;
margin-top: 20px;
} }
.menu a:before { .menu .nav a:before {
display: block; display: block;
float: left; float: left;
width: 3px; width: 3px;
height: 32px; height: 32px;
border-radius: 3px; border-radius: 3px;
background-color: #218c8d; background-color: #f39d41;
content: ''; content: '';
margin-right: 10px; margin-right: 10px;
} }
.menu a { .menu .nav a {
display: inline-block; display: inline-block;
line-height: 32px; line-height: 32px;
width: 100%; width: 100%;
@ -48,8 +82,8 @@ li.nav {
text-decoration: underline; text-decoration: underline;
border-radius: 3px; border-radius: 3px;
} }
.menu a.active { .menu .nav a.active {
background-color: #bcdcdc; background-color: #f9d4be;
} }
.content { .content {