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

Fixes #1255, make sidebar expand/contract buttonmore notceable, also adjust toolbar button colors to be WCAG AA

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-28 18:01:25 -04:00
parent d768df040b
commit 7bd37559be
2 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -49,7 +49,7 @@ $themes: (
button-secondary-background-color: $medium-light, button-secondary-background-color: $medium-light,
button-color: $black, button-color: $black,
button-border-color: $middle-light, button-border-color: $middle-light,
toolbar-button-color: $p5js-pink, toolbar-button-color: $dark,
toolbar-button-background-color: $medium-light, toolbar-button-background-color: $medium-light,
button-background-hover-color: $p5js-pink, button-background-hover-color: $p5js-pink,
button-background-active-color: $p5js-active-pink, button-background-active-color: $p5js-active-pink,
@ -124,7 +124,7 @@ $themes: (
button-secondary-background-color: $medium-dark, button-secondary-background-color: $medium-dark,
button-color: $light, button-color: $light,
button-border-color: $middle-dark, button-border-color: $middle-dark,
toolbar-button-color: $p5js-pink, toolbar-button-color: $lightest,
toolbar-button-background-color: $medium-dark, toolbar-button-background-color: $medium-dark,
button-background-hover-color: $p5js-pink, button-background-hover-color: $p5js-pink,
button-background-active-color: $p5js-active-pink, button-background-active-color: $p5js-active-pink,

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

@ -179,29 +179,45 @@
} }
} }
.sidebar__expand { .sidebar__expand,
.sidebar__contract {
@include icon(); @include icon();
position: absolute; position: absolute;
top: #{7 / $base-font-size}rem; top: #{2 / $base-font-size}rem;
left: #{1 / $base-font-size}rem; left: #{0 / $base-font-size}rem;
height: #{14 / $base-font-size}rem; height: #{25 / $base-font-size}rem;
width: #{49 / $base-font-size}rem;
border-radius: 2px;
& svg { & svg {
height: #{14 / $base-font-size}rem; height: #{25 / $base-font-size}rem;
} }
@include themify() {
background-color: getThemifyVariable("toolbar-button-background-color");
& polygon {
fill: getThemifyVariable("toolbar-button-color");
}
&:hover {
background-color: getThemifyVariable("button-background-hover-color");
& polygon {
fill: getThemifyVariable("button-hover-color");
}
}
}
}
.sidebar__expand {
display: none; display: none;
&:hover {
cursor: e-resize;
}
.sidebar--contracted & { .sidebar--contracted & {
display: inline-block; display: inline-block;
} }
} }
.sidebar__contract { .sidebar__contract {
@include icon(); &:hover {
position: absolute; cursor: w-resize;
top: #{7 / $base-font-size}rem;
left: #{1 / $base-font-size}rem;
height: #{14 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem;
} }
.sidebar--contracted & { .sidebar--contracted & {
display: none; display: none;