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

change colors of folding icons for dark and high contrast themes

Browse source
This commit is contained in:
Cassie Tarakajian 2017-10-12 14:22:17 -04:00
parent dfcd080cb7
commit 2140e2bbca
4 changed files with 47 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/images/down-arrow-white.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
<title>arrow-shape-copy-2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="down-arrow" fill-rule="nonzero" fill="#FFFFFF">
<g id="IDEs">
<g id="p5js-IDE-styles-foundation-pt-2">
<g id="Icons">
<polygon id="arrow-shape-copy-2" transform="translate(7.000000, 4.198314) rotate(-180.000000) translate(-7.000000, -4.198314) " points="8.4 1.396628 14 6.996628 12.6 8.396628 7 2.796628 1.4 8.396628 0 6.996628 5.6 1.396628 6.996628 -2.84217094e-14"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

16
client/images/right-arrow-white.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
<title>arrow-shape-copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="right-arrow" fill-rule="nonzero" fill="#FFFFFF">
<g id="IDEs">
<g id="p5js-IDE-styles-foundation-pt-2">
<polygon id="arrow-shape-copy" transform="translate(4.999999, 7.198314) rotate(90.000000) translate(-4.999999, -7.198314) " points="6.399999 4.396629 11.999999 9.996629 10.599999 11.396629 4.999999 5.796629 -0.600001 11.396629 -2.000001 9.996629 3.599999 4.396629 4.996627 2.999999"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,005 B

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

@ -49,6 +49,8 @@ $themes: (
dropdown-color: #414141, dropdown-color: #414141,
keyboard-shortcut-color: #757575, keyboard-shortcut-color: #757575,
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
codefold-icon-open: url(../images/down-arrow.svg),
codefold-icon-closed: url(../images/right-arrow.svg)
), ),
dark: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
@ -88,6 +90,8 @@ $themes: (
dropdown-color: #dadada, dropdown-color: #dadada,
keyboard-shortcut-color: #B5B5B5, keyboard-shortcut-color: #B5B5B5,
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
codefold-icon-open: url(../images/down-arrow-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg)
), ),
contrast: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
@ -125,7 +129,9 @@ $themes: (
search-background-color: $white, search-background-color: $white,
dropdown-color: #e1e1e1, dropdown-color: #e1e1e1,
keyboard-shortcut-color: #e1e1e1, keyboard-shortcut-color: #e1e1e1,
nav-hover-color: $yellow nav-hover-color: $yellow,
codefold-icon-open: url(../images/down-arrow-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg)
) )
); );

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

@ -244,11 +244,15 @@ pre.CodeMirror-line {
} }
.CodeMirror-foldgutter-open:after { .CodeMirror-foldgutter-open:after {
background-image: url(../images/down-arrow.svg); @include themify() {
background-image: getThemifyVariable('codefold-icon-open');
}
} }
.CodeMirror-foldgutter-folded:after { .CodeMirror-foldgutter-folded:after {
background-image: url(../images/right-arrow.svg); @include themify() {
background-image: getThemifyVariable('codefold-icon-closed');
}
} }
.CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-folded:after,