diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 3cc94503..4fca97fd 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -49,7 +49,7 @@ $themes: ( button-secondary-background-color: $medium-light, button-color: $black, button-border-color: $middle-light, - toolbar-button-color: $p5js-pink, + toolbar-button-color: $dark, toolbar-button-background-color: $medium-light, button-background-hover-color: $p5js-pink, button-background-active-color: $p5js-active-pink, @@ -124,7 +124,7 @@ $themes: ( button-secondary-background-color: $medium-dark, button-color: $light, button-border-color: $middle-dark, - toolbar-button-color: $p5js-pink, + toolbar-button-color: $lightest, toolbar-button-background-color: $medium-dark, button-background-hover-color: $p5js-pink, button-background-active-color: $p5js-active-pink, diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss index 7ec8532f..d7b782af 100644 --- a/client/styles/components/_sidebar.scss +++ b/client/styles/components/_sidebar.scss @@ -179,29 +179,45 @@ } } -.sidebar__expand { +.sidebar__expand, +.sidebar__contract { @include icon(); position: absolute; - top: #{7 / $base-font-size}rem; - left: #{1 / $base-font-size}rem; - height: #{14 / $base-font-size}rem; + top: #{2 / $base-font-size}rem; + left: #{0 / $base-font-size}rem; + height: #{25 / $base-font-size}rem; + width: #{49 / $base-font-size}rem; + border-radius: 2px; & 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; + &:hover { + cursor: e-resize; + } .sidebar--contracted & { display: inline-block; } } .sidebar__contract { - @include icon(); - position: absolute; - 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; + &:hover { + cursor: w-resize; } .sidebar--contracted & { display: none;