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 {
@include themify() {
border-bottom: 2px dashed map-get($theme-map, 'inactive-text-color');
}
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: #{5 / $base-font-size}rem #{10 / $base-font-size}rem;
border-bottom: 2px dashed;
}
.nav__item {

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

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

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

@ -46,7 +46,9 @@
}
.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;
padding-left: #{10 / $base-font-size}rem;
height: 70%;