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

adding styling

Browse source
This commit is contained in:
Lauren McCarthy 2016-09-21 18:46:23 -07:00
parent 1e8165393b
commit 58c0e4f5f7
3 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/styles/abstracts/_variables.scss
View file

@ -10,7 +10,7 @@ $themes: (
primary-text-color: #333,
secondary-text-color: #6b6b6b,
inactive-text-color: #b5b5b5,
background-color: #fdfdfd,
background-color: #fbfbfb,
button-background-color: #f4f4f4,
button-color: $black,
button-border-color: #979797,
@ -20,7 +20,7 @@ $themes: (
button-background-active-color: #f10046,
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #f4f4f4,
modal-background-color: #fdfdfd,
modal-button-background-color: #e6e6e6,
modal-border-color: #B9D0E1,
icon-color: #8b8b8b,
@ -29,7 +29,7 @@ $themes: (
console-background-color: #eee,
console-header-background-color: #d6d6d6,
ide-border-color: #f4f4f4,
editor-gutter-color: #f7f7f7,
editor-gutter-color: #f4f4f4,
file-selected-color: #f4f4f4,
),
dark: (

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

@ -1,15 +1,16 @@
.nav {
width: 100%;
padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
padding-left: #{170 / $base-font-size}rem;
padding-left: #{33 / $base-font-size}rem;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: #{12 / $base-font-size}rem;
}
.nav__items-left, .nav__items-right {
@include themify() {
border-bottom: 2px dashed map-get($theme-map, 'inactive-text-color');
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
}
list-style: none;
display: flex;
@ -20,9 +21,10 @@
.nav__item {
& + & {
margin-left: #{20 / $base-font-size}rem;
margin-left: #{0 / $base-font-size}rem;
}
position: relative;
min-width: #{72 / $base-font-size}rem;
}
.nav__dropdown {

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

@ -42,15 +42,12 @@
}
.toolbar {
padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
display: flex;
align-items: center;
}
.toolbar__project-name-container {
@include themify() {
border-left: 2px dashed map-get($theme-map, 'inactive-text-color');
}
margin-left: #{10 / $base-font-size}rem;
padding-left: #{10 / $base-font-size}rem;
height: 70%;