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

Quick add button theme support

Browse source
This commit is contained in:
Andrew Nicolaou 2019-11-25 13:53:44 +01:00
parent 8132a029f5
commit e114a74b54
2 changed files with 35 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -79,6 +79,11 @@ $themes: (
primary-button-color: #fff, primary-button-color: #fff,
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
table-button-color: $white,
table-button-background-color: #979797,
table-button-hover-color: $white,
table-button-background-hover-color: $p5js-pink,
progress-bar-background-color: #979797, progress-bar-background-color: #979797,
progress-bar-active-color: #f10046, progress-bar-active-color: #f10046,
@ -151,6 +156,11 @@ $themes: (
primary-button-color: #fff, primary-button-color: #fff,
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
table-button-color: $white,
table-button-background-color: #979797,
table-button-hover-color: $white,
table-button-background-hover-color: $p5js-pink,
progress-bar-background-color: #979797, progress-bar-background-color: #979797,
progress-bar-active-color: #f10046, progress-bar-active-color: #f10046,
@ -220,6 +230,11 @@ $themes: (
primary-button-color: #fff, primary-button-color: #fff,
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
table-button-color: #333,
table-button-background-color: #C1C1C1,
table-button-hover-color: #333,
table-button-background-hover-color: $yellow,
progress-bar-background-color: #979797, progress-bar-background-color: #979797,
progress-bar-active-color: #f10046, progress-bar-active-color: #f10046,

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

@ -37,8 +37,14 @@
height:#{35 / $base-font-size}rem; height:#{35 / $base-font-size}rem;
@include icon(); @include icon();
@include themify() { @include themify() {
& path { // icon graphic
fill: getThemifyVariable('dropdown-color'); polygon {
fill: getThemifyVariable('table-button-color');
}
// icon background circle
path {
fill: getThemifyVariable('table-button-background-color');
} }
& svg { & svg {
@ -69,6 +75,18 @@
} }
.quick-add__item-toggle:hover { .quick-add__item-toggle:hover {
@include themify() {
.quick-add__icon {
polygon {
fill: getThemifyVariable('table-button-hover-color');
}
path {
fill: getThemifyVariable('table-button-background-hover-color');
}
}
}
.quick-add__in-icon { .quick-add__in-icon {
display: none; display: none;
} }