r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Fix hover effect on Log in and Sign up nav items (#1085)

Browse source 
* Fix hover effect on Log in and Sign up nav items

* Fix Login and Signup unequal spacing

* Fix HTML syntax and right nav__item-header hover
This commit is contained in:
Shan Rauf 2019-06-11 14:46:37 -07:00 committed by Cassie Tarakajian
parent 528f57ad0c
commit 1ef07ed7a6
2 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
client/components/Nav.jsx
View file

@ -530,12 +530,16 @@ class Nav extends React.PureComponent {
</ul> </ul>
{ __process.env.LOGIN_ENABLED && !this.props.user.authenticated && { __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
<ul className="nav__items-right" title="user-menu"> <ul className="nav__items-right" title="user-menu">
<li className="nav__item"> <li>
<p> <Link to="/login">
<Link to="/login">Log in</Link> <span className="nav__item-header">Log in</span>
</Link>
</li>
<span className="nav__item-spacer">or</span> <span className="nav__item-spacer">or</span>
<Link to="/signup">Sign up</Link> <li>
</p> <Link to="/signup">
<span className="nav__item-header">Sign up</span>
</Link>
</li> </li>
</ul>} </ul>}
{ __process.env.LOGIN_ENABLED && this.props.user.authenticated && { __process.env.LOGIN_ENABLED && this.props.user.authenticated &&

14
client/styles/components/_nav.scss
View file

@ -51,10 +51,6 @@
padding-right: #{15 / $base-font-size}rem; padding-right: #{15 / $base-font-size}rem;
} }
.nav__item-header {
margin-right: #{5 / $base-font-size}rem;
}
.nav__item:hover { .nav__item:hover {
.nav__item-header { .nav__item-header {
@include themify() { @include themify() {
@ -69,6 +65,16 @@
} }
} }
.nav__item-header:hover {
@include themify() {
color: getThemifyVariable('nav-hover-color');
}
}
.nav__item-header-triangle {
margin-left: #{5 / $base-font-size}rem;
}
.nav__dropdown { .nav__dropdown {
@include themify() { @include themify() {
background-color: map-get($theme-map, 'modal-background-color'); background-color: map-get($theme-map, 'modal-background-color');