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

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

@ -1,15 +1,16 @@
.nav { .nav {
width: 100%; width: 100%;
padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem; 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; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
font-size: #{12 / $base-font-size}rem;
} }
.nav__items-left, .nav__items-right { .nav__items-left, .nav__items-right {
@include themify() { @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; list-style: none;
display: flex; display: flex;
@ -20,9 +21,10 @@
.nav__item { .nav__item {
& + & { & + & {
margin-left: #{20 / $base-font-size}rem; margin-left: #{0 / $base-font-size}rem;
} }
position: relative; position: relative;
min-width: #{72 / $base-font-size}rem;
} }
.nav__dropdown { .nav__dropdown {

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

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