scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

darken account nav link when menu open

Browse source
This commit is contained in:
Technoboy10 2016-06-28 21:10:33 -04:00
parent 16fe86b2fd
commit 52d834c3fa
2 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/navigation/www/navigation.jsx
View file

@ -241,7 +241,8 @@ var Navigation = React.createClass({
</a> </a>
</li>, </li>,
<li className="link right account-nav" key="account-nav"> <li className="link right account-nav" key="account-nav">
<a className="user-info" href="#" onClick={this.handleAccountNavClick}> <a className={this.state.accountNavOpen ? 'user-info open' : 'user-info'}
href="#" onClick={this.handleAccountNavClick}>
<Avatar src={this.props.session.session.user.thumbnailUrl} alt="" /> <Avatar src={this.props.session.session.user.thumbnailUrl} alt="" />
{this.props.session.session.user.username} {this.props.session.session.user.username}
</a> </a>

14
src/components/navigation/www/navigation.scss
View file

@ -18,7 +18,7 @@
height: 50px; height: 50px;
&:hover { &:hover {
transition: .15s ease all; transition: .15s ease all;
background-size: 100%; background-size: 100%;
} }
} }
@ -49,7 +49,7 @@
height: 14px; height: 14px;
&[type=text] { &[type=text] {
transition: .15s ease background-color; transition: .15s ease background-color;
padding: 0; padding: 0;
padding-right: 10px; padding-right: 10px;
padding-left: 40px; padding-left: 40px;
@ -76,14 +76,14 @@
.btn-search { .btn-search {
position: absolute; position: absolute;
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
background-image: url("/images/nav-search-glass.png"); background-image: url("/images/nav-search-glass.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: 14px 14px; background-size: 14px 14px;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -170,6 +170,10 @@
vertical-align: middle; vertical-align: middle;
} }
&.open {
background-color: $active-gray;
}
&:after { &:after {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;