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

use and button

Browse Source
This commit is contained in:
srgooglo 2022-05-29 18:08:32 +02:00
parent 52a7eca414
commit fc6bf55f86
2 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import React from "react" import React from "react"
import { Button } from "antd"
import classnames from "classnames" import classnames from "classnames"
import "./index.less" import "./index.less"
@ -8,13 +9,15 @@ export default (props) => {
<div className="counter"> <div className="counter">
{props.count} {props.count}
</div> </div>
<div <Button
type="ghost"
onClick={props.onClick} onClick={props.onClick}
className={classnames( className={classnames(
"btn", "btn",
{ ["followed"]: props.followed } { ["followed"]: props.followed }
)}> )}
>
<span>{props.followed ? "Following" : "Follow"}</span> <span>{props.followed ? "Following" : "Follow"}</span>
</div> </Button>
</div> </div>
} }

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

@ -1,12 +1,12 @@
@borderRadius: 8px; @borderRadius: 8px;
.followButton { .followButton {
display : inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items : center; align-items: center;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
outline : 1px solid var(--border-color); outline: 1px solid var(--border-color);
border-radius: @borderRadius; border-radius: @borderRadius;
@ -15,34 +15,46 @@
} }
.btn { .btn {
width : 100px; cursor: pointer;
width: 100px;
padding: 5px 15px; padding: 5px 15px;
cursor : pointer;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
border-radius: @borderRadius; border-radius: @borderRadius;
border-left : 1.5px solid var(--border-color); border-left: 1.5px solid var(--border-color);
border-top: 0;
border-right: 0;
border-bottom: 0;
text-align : center; text-align: center;
letter-spacing: 1px; letter-spacing: 1px;
span { span {
user-select: none !important;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
color: white !important; color: white !important;
} }
opacity: 0.9; opacity: 0.9;
background : linear-gradient(120deg, #6559ae, #ff7159, #6559ae); background : linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
background-size : 400% 400%; background-size : 400% 400%;
background-position: 14% 0%; background-position: 14% 0%;
&:hover { &:hover {
opacity: 1; opacity: 1;
animation : gradientMove 2s forwards ease-in-out infinite; animation: gradientMove 2s forwards ease-in-out infinite;
background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
background-size: 400% 400%;
background-position: 14% 0%;
}
// make an click animation transforming size
&:active {
transform: scale(0.95);
} }
&.followed { &.followed {