@cocreate/css-parser
Version:
A simple css-parser component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.
1,141 lines (1,137 loc) • 53.9 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CoCreate Utility CSS Documentation | CoCreateCSS</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://cocreate.app/images/favicon.ico"
/>
<meta
name="description"
content="Utility first css framework, design faster and improve on your css by using native inline styles as classes. No learning curve, use what you already know"
/>
<meta
name="keywords"
content="utility classes, helper classes, css framework, css library, inline style classes"
/>
<meta name="robots" content="index,follow" />
<meta
property="og:image"
content="https://cdn.cocreate.app/docs/css-parser.png"
/>
<link
rel="stylesheet"
href="../index.css"
array="files"
object="60888216117c640e7596303f"
key="src"
type="text/css"
save="true"
/>
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<style type="text/css">
.cocreate-badge {
font-size: 14px;
margin-bottom: 5px;
}
.copy {
cursor: copy;
}
</style>
<body>
<!-- Navbar -->
<nav
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
content_id="content"
scroll="sticky-nav,"
scroll-up="5"
scroll-down="5"
path="../"
src="../components/navbar.html"
></nav>
<sidenav
id="menuL"
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
resizable
resize-selector="[content_id='content']"
resize-property="margin-left"
resize-value="width"
>
<menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
<div resize="right"></div>
</sidenav>
<main
class="padding-top:15px padding:15px@lg@xl"
content_id="content"
id="cocreateCSS"
>
<div
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"
>
<div class="display:flex align-items:center">
<h2>CoCreate utility CSS</h2>
</div>
<div
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"
>
<div
class="display:flex align-items:center transition:0.3s padding-left:10px"
share-network="true"
share-text="Enter decription here"
share-title="testing im a title"
share-height="600"
share-width="700"
share-media="https://cdn.cocreate.app/docs/css-parser.png"
hover="display:block!important"
hover-selector=".social-networks"
>
<div class="display:none social-networks">
<a
class="margin-right:15px"
share-network="twitter"
title="Share on twitter"
><i src="/assets/svg/twitter.svg"></i
></a>
<a
class="margin-right:15px"
share-network="facebook"
title="Share on Facebook"
><i src="/assets/svg/facebook.svg"></i
></a>
<a
class="margin-right:15px"
share-network="instagram"
title="Share on instagram"
><i src="/assets/svg/instagram.svg"></i
></a>
</div>
<a
class="margin-right:15px"
share-network="share"
title="Share on share"
><i src="/assets/svg/share-alt.svg"></i
></a>
</div>
<a
href="https://github.com/CoCreate-app/CoCreateCSS"
target="_blank"
class="margin-right:15px"
><i src="/assets/svg/github.svg"></i
></a>
</div>
</div>
<h1 class="max-width:500px margin-top:20px">
CoCreate provides the most convenient utility class.
</h1>
<div
id="xxxxx-section"
class="display:flex flex-wrap:wrap justify-content:space-between"
>
<div
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"
>
<div
id="css-parser-usage"
class="margin-top:80px border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#css-parser-usage-section"
>
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-selector="[href='#css-parser-usage']"
>
<h2 class="padding:5px_0px">Usage</h2>
<a class="margin-left:10px display:none" href="#css-parser-usage"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<div class="">
<p class="padding:10px_0px line-height:1.5">
CoCreate utility Classes are very easy to use.
</p>
<p class="padding:10px_0px line-height:1.5">
We can use exactly same class names with "style:value".
</p>
<div class="flex-grow:1 min-width:300px width:100%">
<pre class="margin-bottom:10px">
<code class="language-html">
<div class="padding:16px"></div>
<div class="font-size:0.5rem color:red"></div>
</code>
</pre>
</div>
<p class="padding:10px_0px line-height:1.5">
Main styles and values provided as utility classes are as follows.
</p>
</div>
<div>
<div
class="position:sticky top:0 background:white padding-top:5px padding-bottom:10px box-shadow-bottom"
>
<input
class="floating-label"
placeholder="Filter CSS Properties"
/>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
direction
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="direction:ltr"></div></code></pre>
<p class="cocreate-badge">ltr</p>
<p class="cocreate-badge">rtl</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
display
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="display:block"></div></code></pre>
<p class="cocreate-badge copy">block</p>
<p class="cocreate-badge">inline-block</p>
<p class="cocreate-badge">inline</p>
<p class="cocreate-badge">none</p>
<p class="cocreate-badge">inherit</p>
<p class="cocreate-badge">table</p>
<p class="cocreate-badge">table-cell</p>
<p class="cocreate-badge">flex</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
overflow
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="overflow:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">visible</p>
<p class="cocreate-badge">scroll</p>
<p class="cocreate-badge">hidden</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
float
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="float:left"></div></code></pre>
<p class="cocreate-badge">left</p>
<p class="cocreate-badge">right</p>
<p class="cocreate-badge">none</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
position
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="position:relative"></div></code></pre>
<p class="cocreate-badge">inherit</p>
<p class="cocreate-badge">relative</p>
<p class="cocreate-badge">absolute</p>
<p class="cocreate-badge">fixed</p>
<p class="cocreate-badge">sticky</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
z-index
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="z-index:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">inherit</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">-2</p>
<p class="cocreate-badge">-5</p>
<p class="cocreate-badge">1 ~ 15</p>
<p class="cocreate-badge">100</p>
<p class="cocreate-badge">101</p>
<p class="cocreate-badge">111</p>
<p class="cocreate-badge">1000</p>
<p class="cocreate-badge">1111</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
top / bottom / left / right
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="top:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 50px</p>
<p class="cocreate-badge">55px</p>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">-1px ~ -50px</p>
<p class="cocreate-badge">-55px</p>
<p class="cocreate-badge">-60px</p>
<p class="cocreate-badge">-65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-100px</p>
<p class="cocreate-badge">-150px</p>
<p class="cocreate-badge">-200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-400px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
bottom
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="bottom:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 50px</p>
<p class="cocreate-badge">55px</p>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">-1px ~ -50px</p>
<p class="cocreate-badge">-55px</p>
<p class="cocreate-badge">-60px</p>
<p class="cocreate-badge">-65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-100px</p>
<p class="cocreate-badge">-150px</p>
<p class="cocreate-badge">-200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-400px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
left
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="left:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 50px</p>
<p class="cocreate-badge">55px</p>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">-1px ~ -50px</p>
<p class="cocreate-badge">-55px</p>
<p class="cocreate-badge">-60px</p>
<p class="cocreate-badge">-65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-100px</p>
<p class="cocreate-badge">-150px</p>
<p class="cocreate-badge">-200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-400px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
right
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="right:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 50px</p>
<p class="cocreate-badge">55px</p>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">-1px ~ -50px</p>
<p class="cocreate-badge">-55px</p>
<p class="cocreate-badge">-60px</p>
<p class="cocreate-badge">-65px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-100px</p>
<p class="cocreate-badge">-150px</p>
<p class="cocreate-badge">-200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">-400px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
height
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="height:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 10px</p>
<p class="cocreate-badge">20px</p>
<p class="cocreate-badge">30px</p>
<p class="cocreate-badge">40px</p>
<p class="cocreate-badge">45px</p>
<p class="cocreate-badge">48px</p>
<p class="cocreate-badge">50px</p>
<p class="cocreate-badge">70px</p>
<p class="cocreate-badge">80px</p>
<p class="cocreate-badge">90px</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">130px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">250px</p>
<p class="cocreate-badge">300px</p>
<p class="cocreate-badge">350px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">700px</p>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">25%</p>
<p class="cocreate-badge">33%</p>
<p class="cocreate-badge">50%</p>
<p class="cocreate-badge">66%</p>
<p class="cocreate-badge">75%</p>
<p class="cocreate-badge">100%</p>
<p class="cocreate-badge">100%-120px</p>
<p class="cocreate-badge">100vh-120px</p>
<p class="cocreate-badge">100vh-100px</p>
<p class="cocreate-badge">100vh-90px</p>
<p class="cocreate-badge">100vh-70px</p>
<p class="cocreate-badge">100vh-50px</p>
<p class="cocreate-badge">80vh</p>
<p class="cocreate-badge">90vh</p>
<p class="cocreate-badge">100vh</p>
<p class="cocreate-badge">fill-available</p>
<p class="cocreate-badge">fit-content</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
min-height
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="min-height:100px"></div></code></pre>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">700px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
max-height
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="max-height:300px"></div></code></pre>
<p class="cocreate-badge">60px</p>
<p class="cocreate-badge">100%</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
width
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="width:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">20px</p>
<p class="cocreate-badge">25px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">90px</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">110px</p>
<p class="cocreate-badge">120px</p>
<p class="cocreate-badge">130px</p>
<p class="cocreate-badge">150px</p>
<p class="cocreate-badge">180px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">250px</p>
<p class="cocreate-badge">300px</p>
<p class="cocreate-badge">350px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">1000px</p>
<p class="cocreate-badge">10%</p>
<p class="cocreate-badge">12%</p>
<p class="cocreate-badge">15%</p>
<p class="cocreate-badge">20%</p>
<p class="cocreate-badge">25%</p>
<p class="cocreate-badge">30%</p>
<p class="cocreate-badge">35%</p>
<p class="cocreate-badge">40%</p>
<p class="cocreate-badge">41% ~ 50%</p>
<p class="cocreate-badge">55%</p>
<p class="cocreate-badge">60%</p>
<p class="cocreate-badge">65%</p>
<p class="cocreate-badge">70%</p>
<p class="cocreate-badge">75%</p>
<p class="cocreate-badge">80%</p>
<p class="cocreate-badge">85%</p>
<p class="cocreate-badge">90%</p>
<p class="cocreate-badge">95%</p>
<p class="cocreate-badge">100%</p>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">unset</p>
<p class="cocreate-badge">fill-available</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
min-width
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="min-width:75px"></div></code></pre>
<p class="cocreate-badge">75px</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">200px</p>
<p class="cocreate-badge">250px</p>
<p class="cocreate-badge">300px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
max-width
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="max-width:300px"></div></code></pre>
<p class="cocreate-badge">75px</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">300px</p>
<p class="cocreate-badge">400px</p>
<p class="cocreate-badge">500px</p>
<p class="cocreate-badge">600px</p>
<p class="cocreate-badge">1050px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
margin
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="margin:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">auto-lr(left & right)</p>
<p class="cocreate-badge">0-lr</p>
<p class="cocreate-badge">0px_5px</p>
<p class="cocreate-badge">0px_10px</p>
<p class="cocreate-badge">10px_5px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px-lr</p>
<p class="cocreate-badge">auto_0px(top & bottom)</p>
<p class="cocreate-badge">0_0px</p>
<p class="cocreate-badge">5px_0px</p>
<p class="cocreate-badge">10px_0px</p>
<p class="cocreate-badge">15px_0px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px_0px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
margin-top
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="margin=top:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
margin-bottom
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="margin-bottom:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
margin-left
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="margin-left:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
margin-right
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="margin-right:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
padding
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="padding:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
<p class="cocreate-badge">0_0px(top & bottom)</p>
<p class="cocreate-badge">5px_0px</p>
<p class="cocreate-badge">10px_0px</p>
<p class="cocreate-badge">15px_0px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px_0px</p>
<p class="cocreate-badge">0-lr(left & right)</p>
<p class="cocreate-badge">1px-lr ~ 10px_5px</p>
<p class="cocreate-badge">20px-lr</p>
<p class="cocreate-badge">20px_5px</p>
<p class="cocreate-badge">30px-lr</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px-lr</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
padding-top
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="padding-top:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
padding-bottom
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="padding-bottom:15px"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
padding-left
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="padding-left:15px"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
padding-right
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="padding-right:15px"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">5px</p>
<p class="cocreate-badge">10px</p>
<p class="cocreate-badge">15px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">100px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
border-width
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="border-width:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 10px</p>
<p class="cocreate-badge">20px</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
border-color
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="border-color:black"></div></code></pre>
<p class="cocreate-badge">white</p>
<p class="cocreate-badge">black</p>
<p class="cocreate-badge">extra-dark-gray</p>
<p class="cocreate-badge">medium-dark-gray</p>
<p class="cocreate-badge">dark-gray</p>
<p class="cocreate-badge">extra-medium-gray</p>
<p class="cocreate-badge">medium-gray</p>
<p class="cocreate-badge">extra-light-gray</p>
<p class="cocreate-badge">light-gray</p>
<p class="cocreate-badge">light-pink</p>
<p class="cocreate-badge">deep-pink</p>
<p class="cocreate-badge">transparent-pink</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
border-style
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="border-style:dotted"></div></code></pre>
<p class="cocreate-badge">dotted</p>
<p class="cocreate-badge">dashed</p>
<p class="cocreate-badge">solid</p>
<p class="cocreate-badge">double</p>
<p class="cocreate-badge">groove</p>
<p class="cocreate-badge">ridge</p>
<p class="cocreate-badge">inset</p>
<p class="cocreate-badge">outset</p>
<p class="cocreate-badge">none</p>
<p class="cocreate-badge">hidden</p>
<p class="cocreate-badge">transparent</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
border-radius
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="border-radius:0"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">1px ~ 10px</p>
<p class="cocreate-badge">50px</p>
<p class="cocreate-badge">50%</p>
<p class="cocreate-badge">100%</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
font-size
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="font-size:18px"></div></code></pre>
<p class="cocreate-badge">6px ~ 25px</p>
<p class="cocreate-badge">30px</p>
<p class="cocreate-badge">40px</p>
<p class="cocreate-badge">50px</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">80px</p>
<p class="cocreate-badge">01rem</p>
<p class="cocreate-badge">02rem</p>
<p class="cocreate-badge">03rem</p>
<p class="cocreate-badge">04rem</p>
<p class="cocreate-badge">05rem</p>
<p class="cocreate-badge">1rem</p>
<p class="cocreate-badge">2rem</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
font-weight
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="font-weight:800"></div></code></pre>
<p class="cocreate-badge">100</p>
<p class="cocreate-badge">200</p>
<p class="cocreate-badge">300</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">900</p>
<p class="cocreate-badge">bold</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
font-align
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="font-align:center"></div></code></pre>
<p class="cocreate-badge">center</p>
<p class="cocreate-badge">left</p>
<p class="cocreate-badge">right</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
color
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="color:blue"></div></code></pre>
<p class="cocreate-badge">white</p>
<p class="cocreate-badge">black</p>
<p class="cocreate-badge">extra-dark-gray</p>
<p class="cocreate-badge">dark-gray</p>
<p class="cocreate-badge">extra-medium-gray</p>
<p class="cocreate-badge">medium-gray</p>
<p class="cocreate-badge">extra-light-gray</p>
<p class="cocreate-badge">light-gray</p>
<p class="cocreate-badge">light-gray</p>
<p class="cocreate-badge">very-light-gray</p>
<p class="cocreate-badge">deep-pink</p>
<p class="cocreate-badge">light-blue</p>
<p class="cocreate-badge">blue</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
text-overflow
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="text-overflow:ellipsis"></div></code></pre>
<p class="cocreate-badge">ellipsis</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
text-transform
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="text-transform:uppercase"></div></code></pre>
<p class="cocreate-badge">uppercase</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
text-decoration
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="text-decoration:underline"></div></code></pre>
<p class="cocreate-badge">underline</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
background-attachment
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="background-attachment:scroll"></div></code></pre>
<p class="cocreate-badge">scroll</p>
<p class="cocreate-badge">fixed</p>
<p class="cocreate-badge">local</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">inherit</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
background-repeat
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="background-repeat:repeat"></div></code></pre>
<p class="cocreate-badge">repeat</p>
<p class="cocreate-badge">repeat-x</p>
<p class="cocreate-badge">repeat-y</p>
<p class="cocreate-badge">no-repeat</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">inherit</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
background-size
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="background-size:auto"></div></code></pre>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">cover</p>
<p class="cocreate-badge">contain</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">inherit</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
background-position
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="background-position:center"></div></code></pre>
<p class="cocreate-badge">left-top</p>
<p class="cocreate-badge">left-center</p>
<p class="cocreate-badge">left-bottom</p>
<p class="cocreate-badge">right-top</p>
<p class="cocreate-badge">right-center</p>
<p class="cocreate-badge">right-bottom</p>
<p class="cocreate-badge">center</p>
<p class="cocreate-badge">center-top</p>
<p class="cocreate-badge">center-center</p>
<p class="cocreate-badge">center-bottom</p>
<p class="cocreate-badge">initial</p>
<p class="cocreate-badge">inherit</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
bg (background)
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="background:blue"></div></code></pre>
<p class="cocreate-badge">transparent</p>
<p class="cocreate-badge">white</p>
<p class="cocreate-badge">black</p>
<p class="cocreate-badge">dark-blue</p>
<p class="cocreate-badge">extra-dark-gray</p>
<p class="cocreate-badge">dark-gray</p>
<p class="cocreate-badge">extra-medium-gray</p>
<p class="cocreate-badge">medium-gray</p>
<p class="cocreate-badge">extra-light-gray</p>
<p class="cocreate-badge">medium-light-gray</p>
<p class="cocreate-badge">light-gray</p>
<p class="cocreate-badge">very-light-gray</p>
<p class="cocreate-badge">deep-pink</p>
<p class="cocreate-badge">transparent-white</p>
<p class="cocreate-badge">transparent-black</p>
<p class="cocreate-badge">white-opacity</p>
<p class="cocreate-badge">black-opacity</p>
<p class="cocreate-badge">black-opacity-light</p>
<p class="cocreate-badge">deep-pink-opacity</p>
<p class="cocreate-badge">charcoal-gray</p>
<p class="cocreate-badge">blue</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
background
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="background:black"></div></code></pre>
<p class="cocreate-badge">transparent</p>
<p class="cocreate-badge">white</p>
<p class="cocreate-badge">black</p>
<p class="cocreate-badge">dark-blue</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
opacity
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="opacity:block"></div></code></pre>
<p class="cocreate-badge">0</p>
<p class="cocreate-badge">0.1</p>
<p class="cocreate-badge">0.2</p>
<p class="cocreate-badge">0.3</p>
<p class="cocreate-badge">...</p>
<p class="cocreate-badge">0.9</p>
<p class="cocreate-badge">1</p>
</div>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:15px padding:5px"
>
cursor
</h3>
<div class="padding:10px">
<pre
class="margin-bottom:10px"
><code class="language-html"><div class="cursor:auto"></div></code></pre>
<p class="cocreate-badge">alias</p>
<p class="cocreate-badge">all-scroll</p>
<p class="cocreate-badge">auto</p>
<p class="cocreate-badge">cell</p>
<p class="cocreate-badge">context-menu</p>
<p class="cocreate-badge">col-resize</p>
<p class="cocreate-badge">copy</p>
<p class="cocreate-badge">crosshair</p>
<p class="cocreate-badge">default</p>
<p class="cocreate-badge">e-resize</p>
<p class="cocreate-badge">ew-resize</p>
<p class="cocreate-badge">grab</p>
<p class="cocreate-badge">grabbing</p>
<p class="cocreate-badge">help</p>
<p class="cocreate-badge">move</p>
<p class="cocreate-badge">n-resize</p>
<p class="cocreate-badge">ne-resize</p>
<p class="cocreate-badge">nesw-resize</p>
<p class="cocreate-badge">ns-resize</p>
<p class="cocreate-badge">nw-resize</p>
<p class="cocreate-badge">nwse-resize</p>
<p class="cocreate-badge">no-drop</p>
<p class="cocreate-badge">none</p>
<p class="cocreate-badge">not-allowed</p>
<p class="cocreate-badge">pointer</p>
<p class="cocreate-badge">progress</p>
<p class="cocreate-badge">row-resize</p>
<p class="cocreate-badge">s-resize</p>
<p class="cocreate-badge">se-resize</p>
<p class="cocreate-badge">sw-resize</p>
<p class="cocreate-badge">text</p>
<p class="cocreate-badge">url</p>
<p class="cocreate-badge">w-resize</p>
<p class="cocreate-badge">wait</p>
<p class="cocreate-badge">zoom-in</p>
<p class="cocreate-badge">zoom-out</p>
</div>
</div>
</div>
<div
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"
>
<!-- SandBox -->
<div
id="css-parser-demo"
class="border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#css-parser-demo-section"
>
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-selector="[href='#css-parser-demo']"
>
<h2 class="padding:5px_0px">Demo</h2>
<a class="margin-left:10px display:none" href="#css-parser-demo"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<div class="position:sticky top:0 padding:15px_0px height:100vh">
<!-- SandBox -->
<div
class="display:flex flex-dir