RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added counter

Browse Source
This commit is contained in:
srgooglo 2022-03-15 03:10:37 +01:00
parent 5f1b11569a
commit 3e52ff1699
2 changed files with 54 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/app/src/components/FollowButton/index.jsx
View File

@ -4,12 +4,17 @@ import classnames from "classnames"
import "./index.less" import "./index.less"
export default (props) => { export default (props) => {
return <a return <div className="followButton">
onClick={props.onClick} <div className="counter">
className={classnames( {props.count}
"followButton", </div>
{ ["followed"]: props.followed } <div
)}> onClick={props.onClick}
<span>{props.followed ? "Following" : "Follow"}</span> className={classnames(
</a> "btn",
{ ["followed"]: props.followed }
)}>
<span>{props.followed ? "Following" : "Follow"}</span>
</div>
</div>
} }

68
packages/app/src/components/FollowButton/index.less
View File

@ -1,45 +1,59 @@
@borderRadius: 8px;
.followButton { .followButton {
user-select: none; display : inline-flex;
flex-direction: row;
width : fit-content; align-items : center;
height : 30px;
padding: 5px 15px;
text-decoration: none;
text-align : center;
vertical-align : middle;
letter-spacing : 1px;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
outline : 1px solid var(--border-color);
border-radius: 8px; border-radius: @borderRadius;
span { .counter {
transition: all 150ms ease-in-out; padding: 5px 15px;
color : #ffffff85 !important;
} }
opacity: 0.9; .btn {
width : 100px;
padding: 5px 15px;
background : linear-gradient(120deg, #6559ae, #ff7159, #6559ae); cursor : pointer;
background-size : 400% 400%; transition: all 150ms ease-in-out;
background-position: 14% 0%;
&:hover { border-radius: @borderRadius;
opacity: 1; border-left : 1.5px solid var(--border-color);
text-align : center;
letter-spacing: 1px;
span { span {
color: white !important; transition: all 150ms ease-in-out;
color : #ffffff85 !important;
} }
animation : gradientMove 2s forwards ease-in-out infinite; opacity: 0.9;
}
&.followed { background : linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
background: none; background-size : 400% 400%;
background-position: 14% 0%;
span { &:hover {
color: #7e7e7e !important; opacity: 1;
span {
color: white !important;
}
animation : gradientMove 2s forwards ease-in-out infinite;
}
&.followed {
background: none;
span {
color: #7e7e7e !important;
}
} }
} }
} }