granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add focus states

Browse source
This commit is contained in:
Justin Edmund 2023-08-20 06:39:10 -07:00
parent c07fdcb25c
commit 608f89c788
2 changed files with 73 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
components/common/MentionEditor/index.module.scss
View file

@ -55,6 +55,11 @@
margin: $unit-fourth;
transition: all 0.1s ease-out;
:global(.remove) {
display: none;
padding: 0 $unit-half;
}
&:hover {
background: var(--null-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
@ -63,18 +68,34 @@
cursor: pointer;
}
&:focus {
outline: 2px solid blue;
:global(.remove) {
display: block;
}
}
&[data-element='fire'] {
background: var(--fire-bg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--fire-shadow);
color: var(--fire-text);
:global(.remove) {
color: var(--fire-text);
}
&:hover {
background: var(--fire-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--fire-shadow-hover);
color: var(--fire-text-hover);
}
&:focus {
outline: 2px solid var(--fire-shadow-hover);
}
}
&[data-element='water'] {
@ -83,12 +104,20 @@
0 1px 0px var(--water-shadow);
color: var(--water-text);
:global(.remove) {
color: var(--water-text);
}
&:hover {
background: var(--water-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--water-shadow-hover);
color: var(--water-text-hover);
}
&:focus {
outline: 2px solid var(--water-shadow-hover);
}
}
&[data-element='earth'] {
@ -97,12 +126,20 @@
0 1px 0px var(--earth-shadow);
color: var(--earth-text);
:global(.remove) {
color: var(--earth-text);
}
&:hover {
background: var(--earth-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--earth-shadow-hover);
color: var(--earth-text-hover);
}
&:focus {
outline: 2px solid var(--earth-shadow-hover);
}
}
&[data-element='wind'] {
@ -111,11 +148,19 @@
0 1px 0px var(--wind-shadow);
color: var(--wind-text);
:global(.remove) {
color: var(--wind-text);
}
&:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--wind-shadow-hover);
color: var(--wind-text-hover);
}
&:focus {
outline: 2px solid var(--wind-shadow-hover);
}
}
&[data-element='dark'] {
@ -124,12 +169,20 @@
0 1px 0px var(--dark-shadow);
color: var(--dark-text);
:global(.remove) {
color: var(--dark-text);
}
&:hover {
background: var(--dark-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--dark-shadow-hover);
color: var(--dark-text-hover);
}
&:focus {
outline: 2px solid var(--dark-shadow-hover);
}
}
&[data-element='light'] {
@ -138,12 +191,20 @@
0 1px 0px var(--light-shadow);
color: var(--light-text);
:global(.remove) {
color: var(--light-text);
}
&:hover {
background: var(--light-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--light-shadow-hover);
color: var(--light-text-hover);
}
&:focus {
outline: 2px solid var(--light-shadow-hover);
}
}
}
}

12
extensions/FilterMention/index.tsx
View file

@ -117,6 +117,17 @@ export const FilterMention = Node.create<MentionOptions>({
},
renderHTML({ node, HTMLAttributes }) {
const removeButton = [
'span',
{
class: 'remove',
onclick: () => {
// Add functionality for the button click here
},
},
'\u00D7', // Unicode for the multiplication symbol
]
return [
'div',
mergeAttributes(
@ -130,6 +141,7 @@ export const FilterMention = Node.create<MentionOptions>({
options: this.options,
node,
}),
removeButton,
]
},