mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-01 00:55:26 +00:00
add some hover/focus effects
This commit is contained in:
parent
55723e94c7
commit
9a7beea07b
@ -1,4 +1,4 @@
|
|||||||
* { min-height: 0 } /* hacky fix for overflow scroll bug in nexted flex containers in firefox */
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
@keyframes slideInUp {
|
@keyframes slideInUp {
|
||||||
from {
|
from {
|
||||||
@ -55,6 +55,7 @@
|
|||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
|
border: 1px solid $theme-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-icon {
|
.label-icon {
|
||||||
@ -65,6 +66,22 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
border: 1px solid $theme-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
#open-chatbox-label, .label-icon {
|
||||||
|
border: 1px solid $dark-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
#open-chatbox-label, .label-icon {
|
||||||
|
border: 1px solid $dark-color;
|
||||||
|
background-color: transparentize($theme-color, 0.15);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -140,6 +157,19 @@
|
|||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $theme-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: $theme-light-color;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
@ -164,19 +194,6 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 420px){
|
|
||||||
.docked-widget {
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dock, .widget {
|
|
||||||
width: 100vw;
|
|
||||||
max-width: 100vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#ocrcc-chatbox {
|
#ocrcc-chatbox {
|
||||||
font-family: $theme-font;
|
font-family: $theme-font;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -188,6 +205,11 @@
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
color: $theme-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-window {
|
.message-window {
|
||||||
@ -279,9 +301,12 @@
|
|||||||
color: $dark-color;
|
color: $dark-color;
|
||||||
font-family: $theme-font;
|
font-family: $theme-font;
|
||||||
margin-right: 0.2rem;
|
margin-right: 0.2rem;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: none;
|
outline: none;
|
||||||
|
border: 1px solid $theme-color;
|
||||||
|
background: $theme-light-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -292,12 +317,40 @@
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: $white;
|
color: $white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border: 1px solid $theme-color;
|
|
||||||
font-family: $theme-font;
|
font-family: $theme-font;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 0 auto;
|
flex: 0 1 auto;
|
||||||
|
border: 1px solid $theme-color;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid $dark-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid $dark-color;
|
||||||
|
background-color: transparentize($theme-color, 0.15);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 420px){
|
||||||
|
.docked-widget {
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock, .widget {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ocrcc-chatbox {
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
|
@import url('https://fonts.googleapis.com/css?family=Assistant&display=swap');
|
||||||
|
|
||||||
$purple: #785BEC;
|
$purple: #785BEC;
|
||||||
|
$light-purple: #f1eefd;
|
||||||
$charcoal: #828282;
|
$charcoal: #828282;
|
||||||
$light-color: #F2F2F2;
|
$light-color: #F2F2F2;
|
||||||
$gray-color: $charcoal;
|
$gray-color: $charcoal;
|
||||||
@ -10,7 +11,8 @@ $dark-blue: #2660A4;
|
|||||||
$white: #ffffff;
|
$white: #ffffff;
|
||||||
$highlight-color: $yellow;
|
$highlight-color: $yellow;
|
||||||
$theme-color: $purple;
|
$theme-color: $purple;
|
||||||
$theme-font: 'Poppins', 'Helvetica', sans-serif;
|
$theme-light-color: $light-purple;
|
||||||
|
$theme-font: 'Assistant', 'Helvetica', sans-serif;
|
||||||
$drop-shadow-color: #BDBEBF;
|
$drop-shadow-color: #BDBEBF;
|
||||||
|
|
||||||
/* Dark mode colors */
|
/* Dark mode colors */
|
||||||
|
@ -313,8 +313,6 @@ class ChatBox extends React.Component {
|
|||||||
this.chatboxInput.current.focus()
|
this.chatboxInput.current.focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('OPENED STATE', this.state.opened)
|
|
||||||
|
|
||||||
if (!prevState.opened && this.state.opened) {
|
if (!prevState.opened && this.state.opened) {
|
||||||
this.chatboxInput.current.focus()
|
this.chatboxInput.current.focus()
|
||||||
}
|
}
|
||||||
@ -345,8 +343,16 @@ class ChatBox extends React.Component {
|
|||||||
sender: 'from-me',
|
sender: 'from-me',
|
||||||
content: { body: this.state.inputValue },
|
content: { body: this.state.inputValue },
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const confirmationMsg = {
|
||||||
|
id: 'confirmation-msg-id',
|
||||||
|
type: 'm.room.message',
|
||||||
|
sender: BOT_USERNAME,
|
||||||
|
content: { body: CONFIRMATION_MESSAGE },
|
||||||
|
}
|
||||||
const messages = [...this.state.messages]
|
const messages = [...this.state.messages]
|
||||||
messages.push(fakeUserMsg)
|
messages.push(fakeUserMsg)
|
||||||
|
messages.push(confirmationMsg)
|
||||||
this.setState({ inputValue: "", messages })
|
this.setState({ inputValue: "", messages })
|
||||||
|
|
||||||
return this.initializeChat()
|
return this.initializeChat()
|
||||||
|
Loading…
Reference in New Issue
Block a user