From 5e4f96efba666da6398173a7e76b6f96a8d8e82d Mon Sep 17 00:00:00 2001 From: Sharon Kennedy Date: Tue, 25 Feb 2020 19:50:43 -0500 Subject: [PATCH] finish transitions on dark theme --- public/index.html | 2 +- src/components/_chat.scss | 20 ++++++++++++++------ src/components/_dark_mode.scss | 34 +++++++++++++++++++++++++++++----- src/components/_variables.scss | 1 + 4 files changed, 45 insertions(+), 12 deletions(-) diff --git a/public/index.html b/public/index.html index 061b742..1d1cf09 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ Embeddable Chatbox Demo - +

Bookmarklet (drag it to your bookmarks bar)

diff --git a/src/components/_chat.scss b/src/components/_chat.scss index c27efc7..dfb30e4 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -75,6 +75,7 @@ &:hover { #open-chatbox-label, .label-icon { border: 1px solid $dark-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; } } @@ -83,6 +84,7 @@ #open-chatbox-label, .label-icon { border: 1px solid $dark-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; background-color: transparentize($theme-color, 0.15); } } @@ -138,12 +140,12 @@ transition: all 0.2s ease-in-out; &:hover { - border: 1px solid $theme-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; } &:focus { outline: none; - border: 1px solid $theme-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; background-color: $theme-light-color; } } @@ -163,12 +165,12 @@ transition: all 0.2s ease-in-out; &:hover { - border: 1px solid $theme-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; } &:focus { outline: none; - border: 1px solid $theme-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; background-color: $theme-light-color; } } @@ -188,7 +190,7 @@ transition: all 0.2s ease-in-out; &:hover { - border-color: $theme-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; } &:focus { @@ -330,9 +332,13 @@ transition: all 0.2s ease-in-out; border-radius: 10px; + &:hover { + box-shadow: inset 0px 0px 0px 1px $dark-color; + } + &:focus { outline: none; - border: 1px solid $theme-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; background: $theme-light-color; } } @@ -354,11 +360,13 @@ &:hover { border: 1px solid $dark-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; } &:focus { outline: none; border: 1px solid $dark-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; background-color: transparentize($theme-color, 0.15); } } diff --git a/src/components/_dark_mode.scss b/src/components/_dark_mode.scss index 49a13e4..57ea3e0 100644 --- a/src/components/_dark_mode.scss +++ b/src/components/_dark_mode.scss @@ -12,10 +12,13 @@ &:hover { border-color: $theme-color; + box-shadow: inset 0px 0px 0px 1px $theme-color; } &:focus { - background: $dark-theme-color; + border-color: $theme-color; + background: $dark-theme-highlight-color; + box-shadow: inset 0px 0px 0px 1px $theme-color; outline: none; } } @@ -26,10 +29,12 @@ &:hover { border-color: $theme-color; + box-shadow: inset 0px 0px 0px 1px $theme-color; } &:focus { - background: $dark-theme-color; + background: $dark-theme-highlight-color; + box-shadow: inset 0px 0px 0px 1px $theme-color; outline: none; } } @@ -76,9 +81,16 @@ color: $light-text-color; border: 1px solid $white; - &:focus { + &:hover { border: 1px solid $theme-color; - background: $dark-theme-color; + box-shadow: inset 0px 0px 0px 1px $theme-color; + } + + &:focus { + outline: none; + border: 1px solid $theme-color; + box-shadow: inset 0px 0px 0px 1px $theme-color; + background: $dark-theme-highlight-color; } } @@ -87,9 +99,21 @@ } input[type="submit"] { - background-color: $theme-color; + background-color: $dark-theme-color; color: $light-text-color; border: 1px solid $white; + + &:hover { + border: 1px solid $theme-color; + box-shadow: inset 0px 0px 0px 1px $theme-color; + } + + &:focus { + outline: none; + border: 1px solid $theme-color; + box-shadow: inset 0px 0px 0px 1px $theme-color; + background-color: $dark-theme-highlight-color; + } } } diff --git a/src/components/_variables.scss b/src/components/_variables.scss index e5b8e33..8784eb1 100644 --- a/src/components/_variables.scss +++ b/src/components/_variables.scss @@ -22,3 +22,4 @@ $light-background-color: #ffffff; $light-text-color: #ffffff; $dark-text-color: #0F1116; $dark-theme-color: #4F4F4F; +$dark-theme-highlight-color: #211943;