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

add most of dark theme

Browse source
This commit is contained in:
catarak 2016-09-14 18:38:57 -04:00 committed by Cassie Tarakajian
parent 21846a1ada
commit 390923a7ca
3 changed files with 31 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,12 +8,14 @@
} }
.nav__items-left, .nav__items-right { .nav__items-left, .nav__items-right {
@include themify() {
border-bottom: 2px dashed map-get($theme-map, 'inactive-text-color');
}
list-style: none; list-style: none;
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: #{5 / $base-font-size}rem #{10 / $base-font-size}rem;
border-bottom: 2px dashed;
} }
.nav__item { .nav__item {

35
client/styles/components/_sidebar.scss
View file

@ -1,8 +1,10 @@
.sidebar__header { .sidebar__header {
@include themify() {
border-top: 1px solid map-get($theme-map, 'ide-border-color');
}
padding: #{10 / $base-font-size}rem #{6 / $base-font-size}rem; padding: #{10 / $base-font-size}rem #{6 / $base-font-size}rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid $ide-border-color;
align-items: center; align-items: center;
height: #{47 / $base-font-size}rem; height: #{47 / $base-font-size}rem;
} }
@ -39,13 +41,15 @@
.sidebar__file-item { .sidebar__file-item {
font-size: #{16 / $base-font-size}rem; font-size: #{16 / $base-font-size}rem;
color: $light-inactive-text-color;
cursor: pointer; cursor: pointer;
&:hover > .file-item__content .sidebar__file-item-name { @include themify() {
color: $light-primary-text-color; color: map-get($theme-map, 'inactive-text-color');
} &:hover > .file-item__content .sidebar__file-item-name {
&:hover > .file-item__content .sidebar__file-item-icon g { color: map-get($theme-map, 'primary-text-color');
fill: $light-primary-text-color; }
&:hover > .file-item__content .sidebar__file-item-icon g {
fill: map-get($theme-map, 'primary-text-color');
}
} }
} }
@ -75,7 +79,9 @@
position: relative; position: relative;
padding: #{8 / $base-font-size}rem 0; padding: #{8 / $base-font-size}rem 0;
.sidebar__file-item--selected > & { .sidebar__file-item--selected > & {
background-color: $ide-border-color; @include themify() {
background-color: map-get($theme-map, 'ide-border-color');
}
} }
.sidebar--contracted & { .sidebar--contracted & {
display: none; display: none;
@ -102,6 +108,9 @@
.sidebar__file-item-options { .sidebar__file-item-options {
@extend %modal; @extend %modal;
@include themify() {
background-color: getThemeColor('modal-background-color');
}
position: absolute; position: absolute;
top: 95%; top: 95%;
left: 77%; left: 77%;
@ -109,7 +118,6 @@
display: none; display: none;
z-index: 100; z-index: 100;
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem; padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
background-color: $light-modal-background-color;
z-index: 100; z-index: 100;
.sidebar__file-item--open > .file-item__content & { .sidebar__file-item--open > .file-item__content & {
display: block; display: block;
@ -164,12 +172,19 @@
.sidebar__folder-icon { .sidebar__folder-icon {
margin-right: #{5 / $base-font-size}rem; margin-right: #{5 / $base-font-size}rem;
& g { & g {
fill: $light-primary-text-color; @include themify() {
fill: map-get($theme-map, 'primary-text-color');
}
} }
} }
.sidebar__file-item-icon { .sidebar__file-item-icon {
margin-right: #{5 / $base-font-size}rem; margin-right: #{5 / $base-font-size}rem;
& g {
@include themify() {
fill: getThemifyVariable('inactive-text-color');
}
}
} }
.sidebar__file-item-closed { .sidebar__file-item-closed {

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

@ -46,7 +46,9 @@
} }
.toolbar__project-name-container { .toolbar__project-name-container {
border-left: 2px dashed; @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%;