mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-20 21:01:31 +02:00
Code Issues Releases Wiki Activity

Add CSS panel for feedback patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 21:22:35 +07:00
parent aa246af647
commit 1a4f8a378f
9 changed files with 467 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
client/patterns/radial-progress-bar/Details.tsx
View File

@@ -81,90 +81,90 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
position: relative;
">
<div class="container">
<!-- Show number of percentages -->
<div style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border: 12px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
/* Size */
height: 128px;
width: 128px;
">
<div class="container__percentages">
...
</div>
<!-- The curve -->
<div style="
/* Position */
left: 0;
position: absolute;
top: 0;
/* Take full size */
height: 100%;
width: 100%;
/* If percentages is less than 50 */
clip: rect(0px, 128px, 128px, 64px);
/* If percentages is greater than or equals to 50 */
clip: rect(auto, auto, auto, auto);
">
<div class="container__curve">
<!-- The first half -->
<div style="
/* Take full size */
height: 100%;
position: absolute;
width: 100%;
/*
Background color of curve.
The border width should be the same as the area showing the percentages
*/
border: 12px solid rgb(0, 68, 158);
border-radius: 9999px;
/* Position */
clip: rect(0px, 64px, 128px, 0px);
transform: rotate(162deg); /* Number of percentages * 360 / 100 */
" />
<div class="container__half container__half--first"></div>
<!-- The second half -->
<div style="
/* Take full size */
height: 100%;
position: absolute;
width: 100%;
/*
Background color of curve.
The border width should be the same as the area showing the percentages
*/
border: 12px solid rgb(0, 68, 158);
border-radius: 9999px;
/* Position */
clip: rect(0px, 64px, 128px, 0px);
/* If percentages is less than 50 */
transform: rotate(0deg);
/* If percentages is greater than or equals to 50 */
transform: rotate(180deg);
" />
<div class="container__half container__half--second"></div>
</div>
</div>
`}
css={``}
css={`
.container {
position: relative;
}
.container__percentages {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border: 12px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
/* Size */
height: 128px;
width: 128px;
}
.container__curve {
/* Position */
left: 0;
position: absolute;
top: 0;
/* Take full size */
height: 100%;
width: 100%;
/* If percentages is less than 50 */
clip: rect(0px, 128px, 128px, 64px);
/* If percentages is greater than or equals to 50 */
clip: rect(auto, auto, auto, auto);
}
.container__half {
/* Take full size */
height: 100%;
position: absolute;
width: 100%;
/*
Background color of curve.
The border width should be the same as the area showing the percentages
*/
border: 12px solid rgb(0, 68, 158);
border-radius: 9999px;
}
.container__half--first {
/* Position */
clip: rect(0px, 64px, 128px, 0px);
transform: rotate(162deg); /* Number of percentages * 360 / 100 */
}
.container__half--second {
/* Position */
clip: rect(0px, 64px, 128px, 0px);
/* If percentages is less than 50 */
transform: rotate(0deg);
/* If percentages is greater than or equals to 50 */
transform: rotate(180deg);
}
`}
>
<div
style={{