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

Fix right nav items alignment

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-22 17:06:05 -04:00
parent b70f49ffc5
commit 7c54b71002
2 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/components/Nav.jsx
View file

@ -541,13 +541,13 @@ class Nav extends React.PureComponent {
return ( return (
<ul className="nav__items-right" title="user-menu"> <ul className="nav__items-right" title="user-menu">
<li className="nav__item"> <li className="nav__item">
<Link to="/login"> <Link to="/login" className="nav__auth-button">
<span className="nav__item-header">Log in</span> <span className="nav__item-header">Log in</span>
</Link> </Link>
</li> </li>
<span className="nav__item-spacer">or</span> <span className="nav__item-or">or</span>
<li className="nav__item"> <li className="nav__item">
<Link to="/signup"> <Link to="/signup" className="nav__auth-button">
<span className="nav__item-header">Sign up</span> <span className="nav__item-header">Sign up</span>
</Link> </Link>
</li> </li>

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

@ -44,15 +44,10 @@
} }
} }
.nav__item:first-child,
.nav__item--no-icon { .nav__item--no-icon {
padding-left: #{15 / $base-font-size}rem; padding-left: #{15 / $base-font-size}rem;
} }
.nav__item:last-child {
padding-right: #{15 / $base-font-size}rem;
}
.nav__item-header-triangle polygon { .nav__item-header-triangle polygon {
@include themify() { @include themify() {
fill: getThemifyVariable('icon-color'); fill: getThemifyVariable('icon-color');
@ -123,10 +118,20 @@
.nav__item-spacer { .nav__item-spacer {
@include themify() { @include themify() {
color: map-get($theme-map, 'inactive-text-color'); color: map-get($theme-map, 'inactive-text-color');
margin: 0 #{8 / $base-font-size}rem; margin-left: #{8 / $base-font-size}rem;
} }
} }
.nav__item-or {
@include themify() {
color: map-get($theme-map, 'inactive-text-color');
}
}
.nav__auth-button {
padding: #{10 / $base-font-size}rem;
}
// .nav__dropdown button { // .nav__dropdown button {
// padding: 0; // padding: 0;
// } // }