mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-13 01:24:36 +02:00
Add CSS panel for display patterns
This commit is contained in:
Phuoc Nguyen
@@ -22,94 +22,43 @@ const Details: React.FC<{}> = () => {
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<!-- Up arrow button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
<button class="container">
|
||||
<!-- Arrow -->
|
||||
<div style="
|
||||
/* Transparent background */
|
||||
background-color: transparent;
|
||||
|
||||
/* Edges */
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(25%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"></div>
|
||||
<div class="container__arrow container__arrow--up"></div>
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</button>
|
||||
|
||||
<!-- Right arrow button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
<button class="container">
|
||||
<!-- Content -->
|
||||
...
|
||||
|
||||
<!-- Arrow -->
|
||||
<div style="
|
||||
/* Transparent background */
|
||||
background-color: transparent;
|
||||
|
||||
/* Edges */
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translateX(-25%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"></div>
|
||||
<div class="container__arrow container__arrow--right"></div>
|
||||
</button>
|
||||
|
||||
<!-- Down arrow button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
<button class="container">
|
||||
<!-- Arrow -->
|
||||
<div style="
|
||||
/* Transparent background */
|
||||
background-color: transparent;
|
||||
|
||||
/* Edges */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-25%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"></div>
|
||||
<div class="container__arrow container__arrow--down"></div>
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</button>
|
||||
|
||||
<!-- Left arrow button -->
|
||||
<button style="
|
||||
<button class="container">
|
||||
<!-- Arrow -->
|
||||
<div class="container__arrow container__arrow--left"></div>
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</button>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -117,27 +66,44 @@ html={`
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
<!-- Arrow -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__arrow {
|
||||
/* Transparent background */
|
||||
background-color: transparent;
|
||||
|
||||
/* Edges */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translateX(25%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
"></div>
|
||||
}
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</button>
|
||||
`}
|
||||
css={`
|
||||
.container__arrow--up {
|
||||
/* Edges */
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(25%) rotate(45deg);
|
||||
}
|
||||
|
||||
.container__arrow--right {
|
||||
/* Edges */
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translateX(-25%) rotate(45deg);
|
||||
}
|
||||
|
||||
.container__arrow--down {
|
||||
/* Edges */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-25%) rotate(45deg);
|
||||
}
|
||||
|
||||
.container__arrow--left {
|
||||
/* Edges */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
transform: translateX(25%) rotate(45deg);
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -41,15 +41,30 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Avatar item -->
|
||||
<div style="
|
||||
<div class="container__item">
|
||||
<div class="container__avatar">
|
||||
<!-- Image -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repeat other avatars -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container__item {
|
||||
/* Nagative margin make avatar overlap to previous one */
|
||||
margin-left: -4px;
|
||||
">
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__avatar {
|
||||
/* Add a white curve between avatars */
|
||||
box-shadow: 0 0 0 4px #FFF;
|
||||
|
||||
@@ -60,17 +75,8 @@ html={`
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
">
|
||||
<!-- Image -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repeat other avatars -->
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,27 +21,28 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Avatar image -->
|
||||
<img class="container__avatar" src="..." />
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Rounded border */
|
||||
border-radius: 50%;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
">
|
||||
<!-- Avatar image -->
|
||||
<img
|
||||
src="..."
|
||||
style="
|
||||
}
|
||||
|
||||
.container__avatar {
|
||||
/* Rounded border */
|
||||
border-radius: 50%;
|
||||
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -35,11 +40,8 @@ html={`
|
||||
border-radius: 9999px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -23,29 +23,35 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Cover -->
|
||||
<div style="
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
">
|
||||
<div class="container__cover">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="
|
||||
/* Take available height */
|
||||
flex: 1;
|
||||
">
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container__cover {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container__content {
|
||||
/* Take available height */
|
||||
flex: 1;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,15 +22,17 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,7 +21,14 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<button style="
|
||||
<button class="container">
|
||||
<div class="container__line container__line--first"></div>
|
||||
|
||||
<div class="container__line container__line--second"></div>
|
||||
</button>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Reset */
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
@@ -35,39 +42,42 @@ html={`
|
||||
|
||||
/* Used to position the inner */
|
||||
position: relative;
|
||||
">
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__line {
|
||||
/* Background color */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Position */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
|
||||
/* Size */
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container__line--first {
|
||||
/* Position */
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translate(0%, -50%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
" />
|
||||
|
||||
<div style="
|
||||
/* Background color */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.container__line--second {
|
||||
/* Position */
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
transform: translate(-50%, 0%) rotate(45deg);
|
||||
|
||||
/* Size */
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
" />
|
||||
</button>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -23,7 +23,18 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Tells visitors that the website uses cookie -->
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Close button -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Banner is displayed at the bottom */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -34,20 +45,13 @@ html={`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- Tells visitors that the website uses cookie -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__content {
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Close button -->
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -23,11 +23,22 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- The container -->
|
||||
<div style="
|
||||
<div class="container__wrapper">
|
||||
<!-- The ribbon -->
|
||||
<div class="container__ribbon">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container__wrapper {
|
||||
/* Displayed at the top left corner */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
@@ -39,9 +50,9 @@ html={`
|
||||
|
||||
/* Hide the part of its children which is displayed outside */
|
||||
overflow: hidden;
|
||||
">
|
||||
<!-- The ribbon -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__ribbon {
|
||||
/* Position */
|
||||
left: -64px;
|
||||
position: absolute;
|
||||
@@ -59,13 +70,8 @@ html={`
|
||||
|
||||
/* Centerize the text content */
|
||||
text-align: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Background color */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
@@ -31,11 +36,8 @@ html={`
|
||||
/* Curved corners */
|
||||
border-bottom-left-radius: 50% 40%;
|
||||
border-bottom-right-radius: 50% 40%;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,12 +22,21 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- The diagonal area -->
|
||||
<div class="container__diagonal"></div>
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the diagonal area */
|
||||
position: relative;
|
||||
">
|
||||
<!-- The diagonal area -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__diagonal {
|
||||
/* Absolute position */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
@@ -45,13 +54,8 @@ html={`
|
||||
|
||||
/* Displayed under the main content */
|
||||
z-index: -1;
|
||||
" />
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -23,11 +23,21 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Docked at the top right corner -->
|
||||
<div style="
|
||||
<div class="container__docker">
|
||||
...
|
||||
</div>
|
||||
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container__docker {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@@ -37,14 +47,8 @@ html={`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -24,17 +24,26 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Left side -->
|
||||
<div>...</div>
|
||||
|
||||
<!-- Dots -->
|
||||
<div style="
|
||||
<div class="container__dots"></div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div>...</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container__dots {
|
||||
/* Bottom border */
|
||||
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
|
||||
|
||||
@@ -43,13 +52,8 @@ html={`
|
||||
|
||||
/* Spacing */
|
||||
margin: 0px 4px;
|
||||
" />
|
||||
|
||||
<!-- Right side -->
|
||||
<div>...</div>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -30,11 +35,8 @@ html={`
|
||||
/* Border */
|
||||
border: 4px dashed rgba(0, 0, 0, 0.3),
|
||||
border-radius: 4px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,9 +22,13 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<style>
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
/* Styles for the first letter */
|
||||
.p-drop-cap:first-letter {
|
||||
.container:first-letter {
|
||||
/* Display at the left */
|
||||
float: left;
|
||||
line-height: 1;
|
||||
@@ -37,13 +41,7 @@ html={`
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="p-drop-cap">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -24,23 +24,31 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container"
|
||||
<!-- Main content -->
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- The faded element -->
|
||||
<div class="container__fading"></div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the faded element */
|
||||
position: relative;
|
||||
">
|
||||
<!-- Main content -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__content {
|
||||
/* Height */
|
||||
height: 200px;
|
||||
|
||||
/* Scrollable */
|
||||
overflow-y: scroll;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- The faded element -->
|
||||
<div style="
|
||||
.container__fading {
|
||||
/* Displayed at the bottom */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -52,10 +60,8 @@ html={`
|
||||
|
||||
/* Gradient background */
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
|
||||
" />
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -24,36 +24,14 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Bottom border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Spacing */
|
||||
padding: 12px 0px;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Feature name -->
|
||||
<div style="
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 16px;
|
||||
">
|
||||
<div class="container__feature">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- The model -->
|
||||
<div style="
|
||||
/* Center the content */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 16px;
|
||||
">
|
||||
<div class="container__model">
|
||||
<!--
|
||||
For the first row: display the model name (Basic, Pro, etc.)
|
||||
From the second row: display a yes/no icon indicating the feature is available or not
|
||||
@@ -68,7 +46,35 @@ html={`
|
||||
<!-- Repeated items -->
|
||||
...
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Bottom border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Spacing */
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
||||
.container__feature {
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.container__model {
|
||||
/* Center the content */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 16px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -25,27 +25,14 @@ const Details: React.FC<{}> = () => {
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<!-- Feature item -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* OPTIONAL: Reverse the order of image and content */
|
||||
flex-direction: row-reverse;
|
||||
|
||||
/* OPTIONAL: Spacing between items */
|
||||
margin: 16px 0;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Image -->
|
||||
<div style="
|
||||
width: 128px;
|
||||
">
|
||||
<div class="container__image">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
">
|
||||
<div class="container__feature">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,7 +40,26 @@ html={`
|
||||
<!-- Repeated items -->
|
||||
...
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* OPTIONAL: Reverse the order of image and content */
|
||||
flex-direction: row-reverse;
|
||||
|
||||
/* OPTIONAL: Spacing between items */
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.container__image {
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
.container__feature {
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,47 +22,57 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Top-left corner -->
|
||||
<div style="
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
">
|
||||
<div class="container__corner container__corner--tl">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Top-right corner -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
">
|
||||
<div class="container__corner container__corner--tr">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Bottom-right corner -->
|
||||
<div style="
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
">
|
||||
<div class="container__corner container__corner--br">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Bottom-left corner -->
|
||||
<div style="
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
">
|
||||
<div class="container__corner container__corner--bl">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container__corner {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container__corner--tl {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.container__corner--tr {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.container__corner--br {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.container__corner--bl {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div style={{ height: '100%', position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
|
||||
@@ -23,16 +23,18 @@ const Details: React.FC<{}> = () => {
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<!-- Fixed at the middle of side -->
|
||||
<div style="
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
right: 0;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translate(0px, -50%);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,7 +22,12 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -35,11 +40,8 @@ html={`
|
||||
|
||||
/* Background */
|
||||
background: url('/assets/full-background.jpeg') center center / cover no-repeat;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -26,7 +26,15 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<div class="container__letters">
|
||||
<!-- The letters -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@@ -42,20 +50,16 @@ html={`
|
||||
border-radius: 50%;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
">
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__letters {
|
||||
/* Center the content */
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
">
|
||||
<!-- The letters -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -57,22 +57,25 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<kbd style="
|
||||
<kbd class="container">
|
||||
...
|
||||
</kbd>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Background and color */
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
/* Bottom shadow */
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset,
|
||||
rgba(0, 0, 0, 0.4) 0px 1px 1px;
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
...
|
||||
</kbd>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -20,7 +20,12 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Lined background */
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
|
||||
background-size: 100% 2em;
|
||||
@@ -31,11 +36,8 @@ html={`
|
||||
*/
|
||||
background-position-y: 24px;
|
||||
line-height: 2em;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -23,31 +23,37 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
/* Align sub-items to top */
|
||||
align-items: start;
|
||||
display: flex;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Media object -->
|
||||
<div style="
|
||||
margin-right: 16px;
|
||||
|
||||
/* Set the width for the media object */
|
||||
width: 200px;
|
||||
">
|
||||
<div class="container__media">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
">
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
/* Align sub-items to top */
|
||||
align-items: start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container__media {
|
||||
margin-right: 16px;
|
||||
|
||||
/* Set the width for the media object */
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.container__content {
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,15 +22,24 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the overlay */
|
||||
position: relative;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- The video element -->
|
||||
<video src="..." />
|
||||
|
||||
<!-- The overlay area -->
|
||||
<div style="
|
||||
<div class="container__overlay">
|
||||
<!-- The player button -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the overlay */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container__overlay {
|
||||
/* Position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@@ -46,14 +55,9 @@ html={`
|
||||
justify-content: center;
|
||||
|
||||
/* Add a dark background */
|
||||
background-color: 'rgba(0, 0, 0, 0.25)',
|
||||
">
|
||||
<!-- The player button -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -29,30 +29,9 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Pricing column -->
|
||||
<div style="
|
||||
/* Content is centered vertically */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
/* Make all columns have the same width */
|
||||
flex: 1;
|
||||
|
||||
/* OPTIONAL: Space between columns */
|
||||
margin: 0 8px;
|
||||
|
||||
/* OPTIONAL: Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
">
|
||||
<div class="container__column">
|
||||
<!-- Title -->
|
||||
...
|
||||
|
||||
@@ -70,7 +49,32 @@ html={`
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container__column {
|
||||
/* Content is centered vertically */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
/* Make all columns have the same width */
|
||||
flex: 1;
|
||||
|
||||
/* OPTIONAL: Space between columns */
|
||||
margin: 0 8px;
|
||||
|
||||
/* OPTIONAL: Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -42,7 +42,16 @@ const Details: React.FC<{}> = () => {
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<!-- A property item -->
|
||||
<dl style="
|
||||
<dl class="container">
|
||||
<!-- Property name -->
|
||||
<dt>...</dt>
|
||||
|
||||
<!-- Property value -->
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Content is center horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -58,15 +67,8 @@ html={`
|
||||
/* Spacing */
|
||||
margin: 0px;
|
||||
padding: 8px 0px;
|
||||
">
|
||||
<!-- Property name -->
|
||||
<dt>...</dt>
|
||||
|
||||
<!-- Property value -->
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -62,15 +62,9 @@ const Details: React.FC<{}> = () => {
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<!-- Each question and answer item -->
|
||||
<div style="
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Heading -->
|
||||
<div style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
">
|
||||
<div class="container__heading">
|
||||
<!-- Question -->
|
||||
...
|
||||
|
||||
@@ -81,7 +75,17 @@ html={`
|
||||
<!-- Answer -->
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.container {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.container__heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,7 +22,25 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- The content -->
|
||||
...
|
||||
|
||||
<!-- The left side -->
|
||||
<div class="container__side container__side--left"></div>
|
||||
|
||||
<!-- The left triangle displayed below the content -->
|
||||
<div class="container__triangle container__triangle--left"></div>
|
||||
|
||||
<!-- The right triangle displayed below the content -->
|
||||
<div class="container__triangle container__triangle--right"></div>
|
||||
|
||||
<!-- The right side -->
|
||||
<div class="container__side container__side--right"></div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -36,16 +54,11 @@ html={`
|
||||
|
||||
/* Use to position the corners */
|
||||
position: relative;
|
||||
">
|
||||
<!-- The content -->
|
||||
...
|
||||
}
|
||||
|
||||
<!-- The left side -->
|
||||
<div style="
|
||||
/* Position */
|
||||
.container__side {
|
||||
bottom: -8px;
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
|
||||
/* Displayed under the container */
|
||||
z-index: -1;
|
||||
@@ -53,53 +66,37 @@ html={`
|
||||
/* Background */
|
||||
border: 16px solid #CCC;
|
||||
border-left-color: transparent;
|
||||
"
|
||||
/>
|
||||
}
|
||||
|
||||
<!-- The left triangle displayed below the content -->
|
||||
<div style="
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
||||
/* Background */
|
||||
border: 8px solid transparent;
|
||||
border-bottom-width: 0;
|
||||
border-right-width: 0;
|
||||
border-top-color: #AAA;
|
||||
" />
|
||||
|
||||
<!-- The right triangle displayed below the content -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
|
||||
/* Background */
|
||||
border: 8px solid transparent;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0;
|
||||
border-top-color: #AAA;
|
||||
" />
|
||||
|
||||
<!-- The right side -->
|
||||
<div style="
|
||||
.container__side--left {
|
||||
/* Position */
|
||||
left: -24px;
|
||||
}
|
||||
|
||||
.container__side--right {
|
||||
/* Position */
|
||||
bottom: -8px;
|
||||
position: absolute;
|
||||
right: -24px;
|
||||
}
|
||||
|
||||
/* Displayed under the container */
|
||||
z-index: -1;
|
||||
.container__triangle {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
||||
/* Background */
|
||||
border: 16px solid #CCC;
|
||||
border-right-color: transparent;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
border: 8px solid transparent;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #AAA;
|
||||
}
|
||||
|
||||
.container__triangle--left {
|
||||
border-right-width: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.container__triangle--right {
|
||||
border-left-width: 0;
|
||||
right: 0;
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,16 +21,27 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Text -->
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Separator line -->
|
||||
<div class="container__separator"></div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Used to set the position of text */
|
||||
position: relative;
|
||||
">
|
||||
<!-- Text -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__content {
|
||||
/* We won't see the separator line */
|
||||
background: #FFF;
|
||||
|
||||
@@ -39,19 +50,14 @@ html={`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Separator line -->
|
||||
<div style="
|
||||
.container__separator {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
" />
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,12 +21,21 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Repeat if you want to have more cards -->
|
||||
<div class="container__card"></div>
|
||||
|
||||
<!-- Main card's content -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the stacked cards */
|
||||
position: relative;
|
||||
">
|
||||
<!-- Repeat if you want to have more cards -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__card {
|
||||
/* Absolute position */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
@@ -45,13 +54,8 @@ html={`
|
||||
|
||||
/* Rotate it. Change the number of degrees for the following cards */
|
||||
transform: rotate(5deg);
|
||||
" />
|
||||
|
||||
<!-- Main card's content -->
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -20,7 +20,16 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Inner -->
|
||||
<div class="container__inner">
|
||||
<!-- Content -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Background */
|
||||
background-color: #ccc;
|
||||
background-image: radial-gradient(#fff 50%, transparent 50%);
|
||||
@@ -30,18 +39,13 @@ html={`
|
||||
|
||||
/* Spacing */
|
||||
padding: 5px;
|
||||
">
|
||||
<!-- Inner -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__inner {
|
||||
/* Background */
|
||||
background-color: #ccc;
|
||||
">
|
||||
<!-- Content -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,35 +21,41 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Value -->
|
||||
<div style="
|
||||
/* Big font size */
|
||||
font-size: 4rem;
|
||||
font-weight: 500;
|
||||
">
|
||||
<div class="container__value">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Label -->
|
||||
<div style="
|
||||
<div class="container__label">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container__value {
|
||||
/* Big font size */
|
||||
font-size: 4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.container__label {
|
||||
/* Smaller font size */
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
|
||||
/* Uppercase the label */
|
||||
text-transform: uppercase;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,13 +22,24 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Status light -->
|
||||
<div class="container__status"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
<!-- Status light -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__status {
|
||||
/* Background color */
|
||||
background-color: rgb(66, 153, 225);
|
||||
|
||||
@@ -41,18 +52,13 @@ html={`
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 8px;
|
||||
"></div>
|
||||
}
|
||||
|
||||
<!-- Content -->
|
||||
<div style="
|
||||
.container__content {
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -31,17 +31,7 @@ html={`
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="
|
||||
/* Background color */
|
||||
background-color: #ddd;
|
||||
|
||||
/* Stick to the left */
|
||||
left: 0;
|
||||
position: sticky;
|
||||
|
||||
/* Displayed on top of other rows when scrolling */
|
||||
z-index: 9999;
|
||||
">
|
||||
<th class="header">
|
||||
...
|
||||
</th>
|
||||
|
||||
@@ -52,7 +42,19 @@ html={`
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.header {
|
||||
/* Background color */
|
||||
background-color: #ddd;
|
||||
|
||||
/* Stick to the left */
|
||||
left: 0;
|
||||
position: sticky;
|
||||
|
||||
/* Displayed on top of other rows when scrolling */
|
||||
z-index: 9999;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -29,17 +29,7 @@ html={`
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="
|
||||
/* Background color */
|
||||
background-color: #ddd;
|
||||
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
/* Displayed on top of other rows when scrolling */
|
||||
z-index: 9999;
|
||||
">
|
||||
<th class="header">
|
||||
...
|
||||
</th>
|
||||
|
||||
@@ -50,7 +40,19 @@ html={`
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
css={``}
|
||||
css={`
|
||||
.header {
|
||||
/* Background color */
|
||||
background-color: #ddd;
|
||||
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
/* Displayed on top of other rows when scrolling */
|
||||
z-index: 9999;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -24,7 +24,15 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Display the content vertically -->
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -40,16 +48,12 @@ html={`
|
||||
/* Size */
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
">
|
||||
<!-- Display the content vertically -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__content {
|
||||
transform: rotate(-45deg);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -23,12 +23,43 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Left vertical line -->
|
||||
<div class="container__line"></div>
|
||||
|
||||
<!-- The timeline items container -->
|
||||
<ul class="container__items">
|
||||
<!-- Each timeline item -->
|
||||
<li class="container__item">
|
||||
<!-- The circle and title -->
|
||||
<div class="container__top">
|
||||
<!-- The circle -->
|
||||
<div class="container__circle"></div>
|
||||
|
||||
<!-- The title -->
|
||||
<div class="container__title">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The description -->
|
||||
<div class="container__desc">
|
||||
...
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Repeat other items -->
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the left vertical line */
|
||||
position: relative;
|
||||
">
|
||||
<!-- Left vertical line -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__line {
|
||||
/* Border */
|
||||
border-right: 2px solid #aaa;
|
||||
|
||||
@@ -39,25 +70,26 @@ html={`
|
||||
|
||||
/* Take full height */
|
||||
height: 100%;
|
||||
" />
|
||||
}
|
||||
|
||||
<!-- The timeline items container -->
|
||||
<ul style="
|
||||
.container__items {
|
||||
/* Reset styles */
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
">
|
||||
<!-- Each timeline item -->
|
||||
<li style="margin-bottom: 8px;">
|
||||
<!-- The circle and title -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.container__top {
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
<!-- The circle -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__circle {
|
||||
/* Rounded border */
|
||||
background-color: rgb(170, 170, 170);
|
||||
border-radius: 9999px;
|
||||
@@ -65,32 +97,18 @@ html={`
|
||||
/* Size */
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
" />
|
||||
}
|
||||
|
||||
<!-- The title -->
|
||||
<div style="
|
||||
.container__title {
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- The description -->
|
||||
<div style="
|
||||
.container__desc {
|
||||
/* Make it align with the title */
|
||||
margin-left: 48px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Repeat other items -->
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -22,82 +22,43 @@ const Details: React.FC<{}> = () => {
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<!-- Up triangle button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
<button class="container">
|
||||
<!-- Triangle -->
|
||||
<div style="
|
||||
border-color: transparent transparent rgba(0, 0, 0, 0.3);
|
||||
border-style: solid;
|
||||
border-width: 0px 8px 8px;
|
||||
|
||||
/* Size */
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
"></div>
|
||||
<div class="container__triangle container__triangle--up"></div>
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</button>
|
||||
|
||||
<!-- Right triangle button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
<button class="container">
|
||||
<!-- Content -->
|
||||
...
|
||||
|
||||
<!-- Triangle -->
|
||||
<div style="
|
||||
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
|
||||
border-style: solid;
|
||||
border-width: 8px 0px 8px 8px;
|
||||
|
||||
/* Size */
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
"></div>
|
||||
<div class="container__triangle container__triangle--right"></div>
|
||||
</button>
|
||||
|
||||
<!-- Down triangle button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
<button class="container">
|
||||
<!-- Triangle -->
|
||||
<div style="
|
||||
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 8px 8px 0px;
|
||||
|
||||
/* Size */
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
"></div>
|
||||
<div class="container__triangle container__triangle--down"></div>
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</button>
|
||||
|
||||
<!-- Left triangle button -->
|
||||
<button style="
|
||||
<button class="container">
|
||||
<!-- Triangle -->
|
||||
<div class="container__triangle container__triangle--left"></div>
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</button>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -105,23 +66,36 @@ html={`
|
||||
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
">
|
||||
<!-- Triangle -->
|
||||
<div style="
|
||||
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
|
||||
}
|
||||
|
||||
.container__triangle {
|
||||
border-style: solid;
|
||||
border-width: 8px 8px 8px 0px;
|
||||
|
||||
/* Size */
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
"></div>
|
||||
}
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
</button>
|
||||
.container__triangle--up {
|
||||
border-color: transparent transparent rgba(0, 0, 0, 0.3);
|
||||
border-width: 0px 8px 8px;
|
||||
}
|
||||
|
||||
.container__triangle--right {
|
||||
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
|
||||
border-width: 8px 0px 8px 8px;
|
||||
}
|
||||
|
||||
.container__triangle--down {
|
||||
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
|
||||
border-width: 8px 8px 0px;
|
||||
}
|
||||
|
||||
.container__triangle--left {
|
||||
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
|
||||
border-width: 8px 8px 8px 0px;
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -25,12 +25,27 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- The video container -->
|
||||
<div class="container__wrapper">
|
||||
<video class="container__video" src="...">
|
||||
...
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<!-- The content -->
|
||||
<div class="container__content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the video and content */
|
||||
position: relative;
|
||||
">
|
||||
<!-- The video container -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__wrapper {
|
||||
/* Positioned at the top left corner */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
@@ -42,9 +57,9 @@ html={`
|
||||
|
||||
/* Hide the scrollbar */
|
||||
overflow: hidden;
|
||||
">
|
||||
<video
|
||||
style="
|
||||
}
|
||||
|
||||
.container__video {
|
||||
object-fit: cover;
|
||||
|
||||
/* Center the video */
|
||||
@@ -55,13 +70,9 @@ html={`
|
||||
|
||||
/* Take full width */
|
||||
width: 100%;
|
||||
"
|
||||
src="..."
|
||||
>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- The content -->
|
||||
<div style="
|
||||
.container__content {
|
||||
/* Positioned at the top left corner */
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
@@ -76,12 +87,8 @@ html={`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -21,12 +21,26 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<div style="
|
||||
<div class="container">
|
||||
<!-- Watermark container -->
|
||||
<div class="container__wrapper">
|
||||
<!-- The watermark -->
|
||||
<div class="container__watermark">
|
||||
Draft
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other content -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the watermark */
|
||||
position: relative;
|
||||
">
|
||||
<!-- Watermark container -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__wrapper {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -40,9 +54,9 @@ html={`
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
">
|
||||
<!-- The watermark -->
|
||||
<div style="
|
||||
}
|
||||
|
||||
.container__watermark {
|
||||
/* Text color */
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
@@ -56,16 +70,8 @@ html={`
|
||||
|
||||
/* Disable the selection */
|
||||
user-select: none;
|
||||
">
|
||||
Draft
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other content -->
|
||||
...
|
||||
</div>
|
||||
}
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user