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

styling of nav and toolbar (#237)

Browse source 
* removing avenir, replacing with montserrat

* sidebar tweaks

* sidebar positioning

* resolving merge conflict

* working on sidebar

* removing avenir font, using montserrat instead due to licensing issues

* removing old import statement for typeography scss file

* design formatting for sidebar closes #234

* styling of nav and toolbar
This commit is contained in:
Lauren McCarthy 2016-12-19 14:52:21 -08:00 committed by Cassie Tarakajian
parent 1186bebd94
commit 844c918652
3 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/components/Nav.jsx
View file

@ -109,9 +109,9 @@ function Nav(props) {
{(() => { {(() => {
if (!props.user.authenticated) { if (!props.user.authenticated) {
return ( return (
<li className="nav__item"> <li className="nav__item login__items">
<p> <p>
<Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link> <Link to="/login">Login</Link> <span className="spacer">or</span> <Link to="/signup">Sign Up</Link>
</p> </p>
</li> </li>
); );

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

@ -1,7 +1,6 @@
.nav { .nav {
width: 100%; width: 100%;
padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem; padding: #{10 / $base-font-size}rem #{32 / $base-font-size}rem 0 #{32 / $base-font-size}rem;
padding-left: #{33 / $base-font-size}rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -15,15 +14,24 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
padding: #{5 / $base-font-size}rem #{10 / $base-font-size}rem; padding: #{3 / $base-font-size}rem 0;
} }
.nav__item { .nav__item {
position: relative; position: relative;
min-width: #{72 / $base-font-size}rem; padding: 0 #{24 / $base-font-size}rem;
text-align: center; text-align: center;
} }
.nav__item:first-child {
padding-left: #{15 / $base-font-size}rem;
}
.nav__item:last-child {
padding-right: #{15 / $base-font-size}rem;
}
.nav__dropdown { .nav__dropdown {
@include themify() { @include themify() {
background-color: map-get($theme-map, 'background-color'); background-color: map-get($theme-map, 'background-color');
@ -42,4 +50,14 @@
left: #{-10 / $base-font-size}rem; left: #{-10 / $base-font-size}rem;
height: auto; height: auto;
} }
}
.login__items {
@include themify() {
color: map-get($theme-map, 'inactive-text-color');
}
}
.login__items span.spacer {
padding: 0 #{15 / $base-font-size}rem;
} }

2
client/styles/components/_toolbar.scss
View file

@ -60,7 +60,7 @@
} }
.toolbar { .toolbar {
padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem; padding: #{20 / $base-font-size}rem #{34 / $base-font-size}rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }