mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-05 05:37:29 +02:00
Merge pull request #166 from phuoc-ng/css-panel
Add CSS panel for feedback patterns
This commit is contained in:
phuoc-ng
GitHub
@@ -28,18 +28,9 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Header -->
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0.3);
|
||||
">
|
||||
<div class="container__header">
|
||||
<!-- Title -->
|
||||
...
|
||||
<!-- Close icon sticks to the right -->
|
||||
@@ -50,18 +41,33 @@ html={`
|
||||
...
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="
|
||||
display: flex;
|
||||
/* Push the buttons to the right */
|
||||
justify-content: flex-end;
|
||||
/* Border */
|
||||
border-top: 1px solid rgba(0, 0, 0.3);
|
||||
">
|
||||
<div class="container__footer">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.container__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0.3);
|
||||
}
|
||||
|
||||
.container__footer {
|
||||
display: flex;
|
||||
/* Push the buttons to the right */
|
||||
justify-content: flex-end;
|
||||
/* Border */
|
||||
border-top: 1px solid rgba(0, 0, 0.3);
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -27,10 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Content -->
|
||||
...
|
||||
|
||||
@@ -38,7 +35,12 @@ html={`
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,234 +21,197 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- The content -->
|
||||
...
|
||||
|
||||
<!-- Top left arrow -->
|
||||
<div class="container__arrow container__arrow--tl"></div>
|
||||
|
||||
<!-- Top center arrow -->
|
||||
<div class="container__arrow container__arrow--tc"></div>
|
||||
|
||||
<!-- Top right arrow -->
|
||||
<div class="container__arrow container__arrow--tr"></div>
|
||||
|
||||
<!-- Right top arrow -->
|
||||
<div class="container__arrow container__arrow--rt"></div>
|
||||
|
||||
<!-- Right center arrow -->
|
||||
<div class="container__arrow container__arrow--rc"></div>
|
||||
|
||||
<!-- Right bottom arrow -->
|
||||
<div class="container__arrow container__arrow--rb"></div>
|
||||
|
||||
<!-- Bottom left arrow -->
|
||||
<div class="container__arrow container__arrow--bl"></div>
|
||||
|
||||
<!-- Bottom center arrow -->
|
||||
<div class="container__arrow container__arrow--bc"></div>
|
||||
|
||||
<!-- Bottom right arrow -->
|
||||
<div class="container__arrow container__arrow--br"></div>
|
||||
|
||||
<!-- Left top arrow -->
|
||||
<div class="container__arrow container__arrow--lt"></div>
|
||||
|
||||
<!-- Left center arrow -->
|
||||
<div class="container__arrow container__arrow--lc"></div>
|
||||
|
||||
<!-- Left bottom arrow -->
|
||||
<div class="container__arrow container__arrow--lb"></div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Used to position the arrow */
|
||||
position: relative;
|
||||
">
|
||||
<!-- The content -->
|
||||
...
|
||||
}
|
||||
|
||||
<!-- Top left arrow -->
|
||||
<div style="
|
||||
/* Position at the top left corner */
|
||||
left: 32px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
.container__arrow {
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
background-color: #FFF;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
.container__arrow--tl {
|
||||
/* Position at the top left corner */
|
||||
left: 32px;
|
||||
top: 0px;
|
||||
|
||||
<!-- Top center arrow -->
|
||||
<div style="
|
||||
/* Position at the top center */
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
/* Border */
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
.container__arrow--tc {
|
||||
/* Position at the top center */
|
||||
left: 50%;
|
||||
top: 0px;
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
/* Border */
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
<!-- Top right arrow -->
|
||||
<div style="
|
||||
/* Position at the top right corner */
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 0px;
|
||||
.container__arrow--tr {
|
||||
/* Position at the top right corner */
|
||||
right: 32px;
|
||||
top: 0px;
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
/* Border */
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
.container__arrow--rt {
|
||||
/* Position at the right top corner */
|
||||
right: 0;
|
||||
top: 32px;
|
||||
|
||||
<!-- Right top arrow -->
|
||||
<div style="
|
||||
/* Position at the right top corner */
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 32px;
|
||||
/* Border */
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, 50%) rotate(45deg);
|
||||
.container__arrow--rc {
|
||||
/* Position at the right center */
|
||||
right: 0;
|
||||
top: 50%;
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
/* Border */
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
<!-- Right center arrow -->
|
||||
<div style="
|
||||
/* Position at the right center */
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
.container__arrow--rb {
|
||||
/* Position at the right bottom corner */
|
||||
bottom: 32px;
|
||||
right: 0;
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
/* Border */
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
.container__arrow--bl {
|
||||
/* Position at the bottom left corner */
|
||||
bottom: -16px;
|
||||
left: 32px;
|
||||
|
||||
<!-- Right bottom arrow -->
|
||||
<div style="
|
||||
/* Position at the right bottom corner */
|
||||
bottom: 32px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
.container__arrow--bc {
|
||||
/* Position at the bottom center */
|
||||
bottom: -16px;
|
||||
left: 50%;
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
<!-- Bottom left arrow -->
|
||||
<div style="
|
||||
/* Position at the bottom left corner */
|
||||
bottom: -16px;
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
.container__arrow--br {
|
||||
/* Position at the bottom right corner */
|
||||
bottom: -16px;
|
||||
right: 32px;
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
.container__arrow--lt {
|
||||
/* Position at the left top corner */
|
||||
left: 0;
|
||||
top: 32px;
|
||||
|
||||
<!-- Bottom center arrow -->
|
||||
<div style="
|
||||
/* Position at the bottom center */
|
||||
bottom: -16px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
.container__arrow--lc {
|
||||
/* Position at the left center */
|
||||
left: 0;
|
||||
top: 50%;
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
<!-- Bottom right arrow -->
|
||||
<div style="
|
||||
/* Position at the bottom right corner */
|
||||
bottom: -16px;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
.container__arrow--lb {
|
||||
/* Position at the left bottom corner */
|
||||
bottom: 32px;
|
||||
left: 0;
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
|
||||
<!-- Left top arrow -->
|
||||
<div style="
|
||||
/* Position at the left top corner */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
|
||||
<!-- Left center arrow -->
|
||||
<div style="
|
||||
/* Position at the left center */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
|
||||
<!-- Left bottom arrow -->
|
||||
<div style="
|
||||
/* Position at the left bottom corner */
|
||||
bottom: 32px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
||||
/* Border */
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
" />
|
||||
</div>
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,31 +22,35 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Other element such as avatar -->
|
||||
...
|
||||
|
||||
<!-- The presence indicator -->
|
||||
<div style="
|
||||
/* Shown at the bottom right corner */
|
||||
bottom: 0,
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translate(50%, 50%);
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
/* Background color */
|
||||
background-color: #FF4136;
|
||||
" />
|
||||
<div class="container__indicator"></div>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container__indicator {
|
||||
/* Shown at the bottom right corner */
|
||||
bottom: 0,
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translate(50%, 50%);
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
/* Background color */
|
||||
background-color: #FF4136;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -26,26 +26,8 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
">
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Colors */
|
||||
background-color: #357edd;
|
||||
color: #fff;
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
|
||||
<div class="container">
|
||||
<div class="container__progress" style="
|
||||
/* Width based on the number of percentages */
|
||||
width: 40%;
|
||||
">
|
||||
@@ -54,7 +36,29 @@ html={`
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.container__progress {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Colors */
|
||||
background-color: #357edd;
|
||||
color: #fff;
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -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={{
|
||||
|
||||
@@ -24,170 +24,134 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- The content -->
|
||||
...
|
||||
|
||||
<!-- The top left square -->
|
||||
<div class="container__resizer container__resizer--tl"></div>
|
||||
|
||||
<!-- The top square -->
|
||||
<div class="container__resizer container__resizer--tc"></div>
|
||||
|
||||
<!-- The top right square -->
|
||||
<div class="container__resizer container__resizer--tr"></div>
|
||||
|
||||
<!-- The right square -->
|
||||
<div class="container__resizer container__resizer--rc"></div>
|
||||
|
||||
<!-- The right bottom square -->
|
||||
<div class="container__resizer container__resizer--rb"></div>
|
||||
|
||||
<!-- The bottom square -->
|
||||
<div class="container__resizer container__resizer--bc"></div>
|
||||
|
||||
<!-- The bottom left square -->
|
||||
<div class="container__resizer container__resizer--bl"></div>
|
||||
|
||||
<!-- The left square -->
|
||||
<div class="container__resizer container__resizer--lc"></div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Border */
|
||||
border: 1px dashed rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Used to position the squares */
|
||||
position: relative;
|
||||
">
|
||||
<!-- The content -->
|
||||
...
|
||||
}
|
||||
|
||||
<!-- The top left square -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
.container__resizer {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
|
||||
/* Resize cursor */
|
||||
cursor: nwse-resize;
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
/* Positioned at the top left corner */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
transform: translate(-50%, -50%);
|
||||
.container__resizer--tl {
|
||||
/* Resize cursor */
|
||||
cursor: nwse-resize;
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"/>
|
||||
/* Positioned at the top left corner */
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
<!-- The top square -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
.container__resizer--tc {
|
||||
/* Resize cursor */
|
||||
cursor: ns-resize;
|
||||
|
||||
/* Resize cursor */
|
||||
cursor: ns-resize;
|
||||
/* Positioned at the middle of top side */
|
||||
left: 50%;
|
||||
top: 0px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Positioned at the middle of top side */
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
transform: translate(-50%, -50%);
|
||||
.container__resizer--tr {
|
||||
/* Resize cursor */
|
||||
cursor: nesw-resize;
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"/>
|
||||
/* Positioned at the top right corner */
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
<!-- The top right square -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
.container__resizer--rc {
|
||||
/* Resize cursor */
|
||||
cursor: ew-resize;
|
||||
|
||||
/* Resize cursor */
|
||||
cursor: nesw-resize;
|
||||
/* Positioned at the middle of right side */
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
/* Positioned at the top right corner */
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
transform: translate(50%, -50%);
|
||||
.container__resizer--rb {
|
||||
/* Resize cursor */
|
||||
cursor: nwse-resize;
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"/>
|
||||
/* Positioned at the right bottom corner */
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
<!-- The right square -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
.container__resizer--bc {
|
||||
/* Resize cursor */
|
||||
cursor: ns-resize;
|
||||
|
||||
/* Resize cursor */
|
||||
cursor: ew-resize;
|
||||
/* Positioned at the middle of bottom side */
|
||||
bottom: 0px;
|
||||
right: 50%;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
/* Positioned at the middle of right side */
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
.container__resizer--bl {
|
||||
/* Resize cursor */
|
||||
cursor: nesw-resize;
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"/>
|
||||
/* Positioned at the bottom left corner */
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
<!-- The right bottom square -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
.container__resizer--lc {
|
||||
/* Resize cursor */
|
||||
cursor: ew-resize;
|
||||
|
||||
/* Resize cursor */
|
||||
cursor: nwse-resize;
|
||||
|
||||
/* Positioned at the right bottom corner */
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
transform: translate(50%, 50%);
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"/>
|
||||
|
||||
<!-- The bottom square -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Resize cursor */
|
||||
cursor: ns-resize;
|
||||
|
||||
/* Positioned at the middle of bottom side */
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
transform: translate(50%, 50%);
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"/>
|
||||
|
||||
<!-- The bottom left square -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Resize cursor */
|
||||
cursor: nesw-resize;
|
||||
|
||||
/* Positioned at the bottom left corner */
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 50%);
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"/>
|
||||
|
||||
<!-- The left square -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Resize cursor */
|
||||
cursor: ew-resize;
|
||||
|
||||
/* Positioned at the middle of left side */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"/>
|
||||
</div>
|
||||
/* Positioned at the middle of left side */
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -28,19 +28,32 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<style>
|
||||
.p-tooltip {
|
||||
<div class="container">
|
||||
<!-- The tooltip content -->
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- The tooltip arrow -->
|
||||
<div class="container__arrow" />
|
||||
|
||||
<!-- The trigger element -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the arrow */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Show the arrow and content when hovering the trigger element */
|
||||
.p-tooltip:hover .p-tooltip-arrow,
|
||||
.p-tooltip:hover .p-tooltip-content {
|
||||
.container:hover .container__arrow,
|
||||
.container:hover .container__content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.p-tooltip-arrow {
|
||||
.container__arrow {
|
||||
/* Invisible by default */
|
||||
opacity: 0;
|
||||
|
||||
@@ -62,7 +75,7 @@ html={`
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.p-tooltip-content {
|
||||
.container__content {
|
||||
/* Invisible by default */
|
||||
opacity: 0;
|
||||
|
||||
@@ -79,22 +92,7 @@ html={`
|
||||
/* Displayed on top of other element */
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="p-tooltip">
|
||||
<!-- The tooltip content -->
|
||||
<div class="p-tooltip-content">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- The tooltip arrow -->
|
||||
<div class="p-tooltip-arrow" />
|
||||
|
||||
<!-- The trigger element -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -20,39 +20,45 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the validation icon */
|
||||
position: relative;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- The input -->
|
||||
<input style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
|
||||
/* Take the full width */
|
||||
width: 100%;
|
||||
|
||||
/* Don't overlap the icon */
|
||||
padding-right: 24px;
|
||||
" />
|
||||
<input class="container__input" />
|
||||
|
||||
<!-- The icon container -->
|
||||
<i style="
|
||||
/* Positioned at the right side */
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
z-index: 10;
|
||||
">
|
||||
<span class="container__icon">
|
||||
<!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
|
||||
...
|
||||
</i>
|
||||
</span>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the validation icon */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container__input {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
|
||||
/* Take the full width */
|
||||
width: 100%;
|
||||
|
||||
/* Don't overlap the icon */
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.container__icon {
|
||||
/* Positioned at the right side */
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user