dave/ocrcc-chatbox
1
0
Fork 0
forked from Github/ocrcc-chatbox
Code Issues Pull Requests Projects Releases Wiki Activity

finish transitions on dark theme

Browse Source
This commit is contained in:
Sharon Kennedy 2020-02-25 19:50:43 -05:00
parent f5862e8f0a
commit 5e4f96efba
4 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -4,7 +4,7 @@
<title>Embeddable Chatbox Demo</title> <title>Embeddable Chatbox Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
</head> </head>
<body> <body style="height: 100vh; background: darkgrey;">
<p style="font-family:sans-serif; padding: 3rem 5rem;"> <p style="font-family:sans-serif; padding: 3rem 5rem;">
<a id="bookmarklet">Bookmarklet (drag it to your bookmarks bar)</a> <a id="bookmarklet">Bookmarklet (drag it to your bookmarks bar)</a>
</p> </p>

20
src/components/_chat.scss
View File

@ -75,6 +75,7 @@
&:hover { &:hover {
#open-chatbox-label, .label-icon { #open-chatbox-label, .label-icon {
border: 1px solid $dark-color; border: 1px solid $dark-color;
box-shadow: inset 0px 0px 0px 1px $dark-color;
} }
} }
@ -83,6 +84,7 @@
#open-chatbox-label, .label-icon { #open-chatbox-label, .label-icon {
border: 1px solid $dark-color; border: 1px solid $dark-color;
box-shadow: inset 0px 0px 0px 1px $dark-color;
background-color: transparentize($theme-color, 0.15); background-color: transparentize($theme-color, 0.15);
} }
} }
@ -138,12 +140,12 @@
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:hover { &:hover {
border: 1px solid $theme-color; box-shadow: inset 0px 0px 0px 1px $dark-color;
} }
&:focus { &:focus {
outline: none; outline: none;
border: 1px solid $theme-color; box-shadow: inset 0px 0px 0px 1px $dark-color;
background-color: $theme-light-color; background-color: $theme-light-color;
} }
} }
@ -163,12 +165,12 @@
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:hover { &:hover {
border: 1px solid $theme-color; box-shadow: inset 0px 0px 0px 1px $dark-color;
} }
&:focus { &:focus {
outline: none; outline: none;
border: 1px solid $theme-color; box-shadow: inset 0px 0px 0px 1px $dark-color;
background-color: $theme-light-color; background-color: $theme-light-color;
} }
} }
@ -188,7 +190,7 @@
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:hover { &:hover {
border-color: $theme-color; box-shadow: inset 0px 0px 0px 1px $dark-color;
} }
&:focus { &:focus {
@ -330,9 +332,13 @@
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
border-radius: 10px; border-radius: 10px;
&:hover {
box-shadow: inset 0px 0px 0px 1px $dark-color;
}
&:focus { &:focus {
outline: none; outline: none;
border: 1px solid $theme-color; box-shadow: inset 0px 0px 0px 1px $dark-color;
background: $theme-light-color; background: $theme-light-color;
} }
} }
@ -354,11 +360,13 @@
&:hover { &:hover {
border: 1px solid $dark-color; border: 1px solid $dark-color;
box-shadow: inset 0px 0px 0px 1px $dark-color;
} }
&:focus { &:focus {
outline: none; outline: none;
border: 1px solid $dark-color; border: 1px solid $dark-color;
box-shadow: inset 0px 0px 0px 1px $dark-color;
background-color: transparentize($theme-color, 0.15); background-color: transparentize($theme-color, 0.15);
} }
} }

34
src/components/_dark_mode.scss
View File

@ -12,10 +12,13 @@
&:hover { &:hover {
border-color: $theme-color; border-color: $theme-color;
box-shadow: inset 0px 0px 0px 1px $theme-color;
} }
&:focus { &: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; outline: none;
} }
} }
@ -26,10 +29,12 @@
&:hover { &:hover {
border-color: $theme-color; border-color: $theme-color;
box-shadow: inset 0px 0px 0px 1px $theme-color;
} }
&:focus { &:focus {
background: $dark-theme-color; background: $dark-theme-highlight-color;
box-shadow: inset 0px 0px 0px 1px $theme-color;
outline: none; outline: none;
} }
} }
@ -76,9 +81,16 @@
color: $light-text-color; color: $light-text-color;
border: 1px solid $white; border: 1px solid $white;
&:focus { &:hover {
border: 1px solid $theme-color; 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"] { input[type="submit"] {
background-color: $theme-color; background-color: $dark-theme-color;
color: $light-text-color; color: $light-text-color;
border: 1px solid $white; 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;
}
} }
} }

1
src/components/_variables.scss
View File

@ -22,3 +22,4 @@ $light-background-color: #ffffff;
$light-text-color: #ffffff; $light-text-color: #ffffff;
$dark-text-color: #0F1116; $dark-text-color: #0F1116;
$dark-theme-color: #4F4F4F; $dark-theme-color: #4F4F4F;
$dark-theme-highlight-color: #211943;