IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Common: refactoring

Browse Source
This commit is contained in:
Viktor Fomin 2020-11-18 17:14:47 +03:00
parent 891ae80da3
commit 5c6e3da4ec
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/ASC.Web.Common/src/components/FloatingButton/FloatingButton.js
View File

@ -14,11 +14,11 @@ const FloatingButton = ({ id, className, style, ...rest }) => {
return (
<StyledCircleWrap id={id} className={className} style={style} icon={icon}>
<StyledCircle percent={percent}>
<div className="styled-circle__mask styled-circle__full">
<div className="styled_circle__fill"></div>
<div className="circle__mask circle__full">
<div className="circle__fill"></div>
</div>
<div className="styled-circle__mask">
<div className="styled_circle__fill"></div>
<div className="circle__mask">
<div className="circle__fill"></div>
</div>
<StyledFloatingButton>

12
web/ASC.Web.Common/src/components/FloatingButton/StyledFloatingButton.js
View File

@ -11,29 +11,29 @@ const StyledCircleWrap = styled.div`
`;
const StyledCircle = styled.div`
.styled-circle__mask,
.styled_circle__fill {
.circle__mask,
.circle__fill {
width: 54px;
height: 54px;
position: absolute;
border-radius: 50%;
}
.styled-circle__mask {
.circle__mask {
clip: rect(0px, 54px, 54px, 27px);
}
.styled_circle__fill {
.circle__fill {
animation: fill-rotate ease-in-out 3s;
transform: rotate(${(props) => props.percent * 1.8}deg);
}
.styled-circle__mask .styled_circle__fill {
.circle__mask .circle__fill {
clip: rect(0px, 27px, 54px, 0px);
background-color: ${color};
}
.styled-circle__mask.styled-circle__full {
.circle__mask.circle__full {
animation: fill-rotate ease-in-out 3s;
transform: rotate(${(props) => props.percent * 1.8}deg);
}