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

styling of nav and toolbar (#237) 

* 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) {
return (
<li className="nav__item">
<li className="nav__item login__items">
<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>
</li>
);

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

@ -1,7 +1,6 @@
.nav {
width: 100%;
padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
padding-left: #{33 / $base-font-size}rem;
padding: #{10 / $base-font-size}rem #{32 / $base-font-size}rem 0 #{32 / $base-font-size}rem;
display: flex;
flex-direction: row;
justify-content: space-between;
@ -15,15 +14,24 @@
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: #{5 / $base-font-size}rem #{10 / $base-font-size}rem;
padding: #{3 / $base-font-size}rem 0;
}
.nav__item {
position: relative;
min-width: #{72 / $base-font-size}rem;
padding: 0 #{24 / $base-font-size}rem;
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 {
@include themify() {
background-color: map-get($theme-map, 'background-color');
@ -42,4 +50,14 @@
left: #{-10 / $base-font-size}rem;
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 {
padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
padding: #{20 / $base-font-size}rem #{34 / $base-font-size}rem;
display: flex;
align-items: center;
}