diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 84b8fd38..d000c8e7 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -79,6 +79,11 @@ $themes: ( primary-button-color: #fff, 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-active-color: #f10046, @@ -151,6 +156,11 @@ $themes: ( primary-button-color: #fff, 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-active-color: #f10046, @@ -220,6 +230,11 @@ $themes: ( primary-button-color: #fff, 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-active-color: #f10046, diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss index 1775ba3e..486b4cd4 100644 --- a/client/styles/components/_quick-add.scss +++ b/client/styles/components/_quick-add.scss @@ -37,8 +37,14 @@ height:#{35 / $base-font-size}rem; @include icon(); @include themify() { - & path { - fill: getThemifyVariable('dropdown-color'); + // icon graphic + polygon { + fill: getThemifyVariable('table-button-color'); + } + + // icon background circle + path { + fill: getThemifyVariable('table-button-background-color'); } & svg { @@ -69,6 +75,18 @@ } .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 { display: none; }