mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 19:14:16 +00:00
improve reply button style
This commit is contained in:
parent
880b9eeff3
commit
c0bb67153b
@ -1,55 +1,60 @@
|
|||||||
.post_actions_wrapper {
|
.post_actions_wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
||||||
.action {
|
gap: 15px;
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
.action {
|
||||||
justify-content: center;
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
transition: all 150ms ease-in-out;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
margin-right: 20px;
|
transition: all 150ms ease-in-out;
|
||||||
|
|
||||||
|
width: 32px;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.icon {
|
.icon {
|
||||||
svg {
|
svg {
|
||||||
color: var(--colorPrimary) !important;
|
color: var(--colorPrimary) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#likes {
|
||||||
|
margin-right: 7px;
|
||||||
}
|
}
|
@ -1,21 +1,28 @@
|
|||||||
import React from "react"
|
import React from "react"
|
||||||
import { Button } from "antd"
|
import { Button } from "antd"
|
||||||
import { Icons } from "@components/Icons"
|
import { LuReply } from "react-icons/lu"
|
||||||
|
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
|
|
||||||
export default (props) => {
|
export default (props) => {
|
||||||
return <div
|
return (
|
||||||
className="reply_button"
|
<div className="reply_button">
|
||||||
>
|
<Button
|
||||||
<Button
|
type="ghost"
|
||||||
type="ghost"
|
shape="circle"
|
||||||
shape="circle"
|
onClick={props.onClick}
|
||||||
onClick={props.onClick}
|
icon={
|
||||||
icon={<Icons.FiRepeat />}
|
<LuReply
|
||||||
/>
|
style={{
|
||||||
{
|
fontSize: "1rem",
|
||||||
props.count > 0 && <span className="replies_count">{props.count}</span>
|
transform: "translateY(-1px)",
|
||||||
}
|
}}
|
||||||
</div>
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{props.count > 0 && (
|
||||||
|
<span className="replies_count">{props.count}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user