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

Increase contrast between in/out of collection icon state in quick add list

Browse source
This commit is contained in:
Andrew Nicolaou 2020-01-15 12:23:46 +01:00
parent 58b800d68b
commit 442360cab5
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -81,6 +81,8 @@ $themes: (
table-button-color: $white, table-button-color: $white,
table-button-background-color: #979797, table-button-background-color: #979797,
table-button-active-color: $white,
table-button-background-active-color: #00A1D3,
table-button-hover-color: $white, table-button-hover-color: $white,
table-button-background-hover-color: $p5js-pink, table-button-background-hover-color: $p5js-pink,
@ -158,6 +160,8 @@ $themes: (
table-button-color: $white, table-button-color: $white,
table-button-background-color: #979797, table-button-background-color: #979797,
table-button-active-color: $white,
table-button-background-active-color: #00A1D3,
table-button-hover-color: $white, table-button-hover-color: $white,
table-button-background-hover-color: $p5js-pink, table-button-background-hover-color: $p5js-pink,
@ -232,6 +236,8 @@ $themes: (
table-button-color: #333, table-button-color: #333,
table-button-background-color: #C1C1C1, table-button-background-color: #C1C1C1,
table-button-active-color: #333,
table-button-background-active-color: #00FFFF,
table-button-hover-color: #333, table-button-hover-color: #333,
table-button-background-hover-color: $yellow, table-button-background-hover-color: $yellow,

16
client/styles/components/_quick-add.scss
View file

@ -63,14 +63,20 @@
.quick-add__in-icon { .quick-add__in-icon {
display: inline-block; display: inline-block;
& svg {
opacity: 0.3;
}
} }
.quick-add__icon--in-collection .quick-add__in-icon svg { .quick-add__icon--in-collection .quick-add__in-icon svg {
opacity: 1; @include themify() {
// icon graphic
polygon {
fill: getThemifyVariable('table-button-active-color');
}
// icon background circle
path {
fill: getThemifyVariable('table-button-background-active-color');
}
}
} }
.quick-add__add-icon { .quick-add__add-icon {