Update button icon css class
This commit is contained in:
parent
7c9d54dd2f
commit
55a704b008
|
@ -42,7 +42,7 @@ export function ButtonIcon({
|
||||||
const [animationClassName, setAnimationClassName] = useState("");
|
const [animationClassName, setAnimationClassName] = useState("");
|
||||||
|
|
||||||
const onInternalClick = () => {
|
const onInternalClick = () => {
|
||||||
setAnimationClassName("buttonIcon--" + animation);
|
setAnimationClassName("button-icon--" + animation);
|
||||||
onClick?.();
|
onClick?.();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -50,7 +50,7 @@ export function ButtonIcon({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className={`buttonIcon buttonIcon--${variant} ${className}`}
|
className={`button-icon button-icon--${variant} ${className}`}
|
||||||
onMouseEnter={onMouseEnter}
|
onMouseEnter={onMouseEnter}
|
||||||
onMouseLeave={onMouseLeave}
|
onMouseLeave={onMouseLeave}
|
||||||
onClick={onInternalClick}
|
onClick={onInternalClick}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
.buttonIcon {
|
.button-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -11,12 +11,12 @@
|
||||||
transition: box-shadow 0.35s;
|
transition: box-shadow 0.35s;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&.buttonIcon--big {
|
&.button-icon--big {
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.buttonIcon--small {
|
&.button-icon--small {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
}
|
}
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.buttonIcon--buzz {
|
&.button-icon--buzz {
|
||||||
-webkit-animation-name: buzz;
|
-webkit-animation-name: buzz;
|
||||||
animation-name: buzz;
|
animation-name: buzz;
|
||||||
-webkit-animation-duration: 0.45s;
|
-webkit-animation-duration: 0.45s;
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
animation-iteration-count: 5;
|
animation-iteration-count: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.buttonIcon--bounce {
|
&.button-icon--bounce {
|
||||||
-webkit-animation-name: bounce;
|
-webkit-animation-name: bounce;
|
||||||
animation-name: bounce;
|
animation-name: bounce;
|
||||||
-webkit-animation-duration: 0.6s;
|
-webkit-animation-duration: 0.6s;
|
||||||
|
|
|
@ -127,7 +127,6 @@ export function Dropdown({
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
inputClassName={classnames(["dropdown-input"])}
|
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
onFocus={onInternalFocus}
|
onFocus={onInternalFocus}
|
||||||
onBlur={onInternalBlur}
|
onBlur={onInternalBlur}
|
||||||
|
@ -140,7 +139,7 @@ export function Dropdown({
|
||||||
id={id}
|
id={id}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ul className="dropdown-panel" {...attr}>
|
<ul {...attr}>
|
||||||
{filtered.length ? (
|
{filtered.length ? (
|
||||||
filtered.map((o) => (
|
filtered.map((o) => (
|
||||||
<li onClick={() => onSelect(o)} key={o.title}>
|
<li onClick={() => onSelect(o)} key={o.title}>
|
||||||
|
|
Loading…
Reference in New Issue