mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-21 06:02:34 -05:00
feat: improve styles doc page
This commit is contained in:
Juanfran
parent
8ae827cd96
commit
f32f6b0010
6 changed files with 378 additions and 240 deletions
|
|
@ -2,15 +2,21 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>ExampleStyles</title>
|
||||
<title>Penpot plugin styles</title>
|
||||
<base href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/src/styles.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 7.5 KiB |
|
|
@ -5,17 +5,19 @@ body {
|
|||
margin: 0 var(--spacing-20);
|
||||
}
|
||||
|
||||
app-root {
|
||||
display: block;
|
||||
padding-block: var(--spacing-16);
|
||||
}
|
||||
|
||||
section {
|
||||
border-bottom: 1px solid var(--app-white);
|
||||
padding-block: var(--spacing-32);
|
||||
}
|
||||
|
||||
.code {
|
||||
background-color: var(--app-white);
|
||||
border-radius: var(--spacing-4);
|
||||
color: var(--app-black);
|
||||
display: block;
|
||||
padding: var(--spacing-20);
|
||||
&:last-child {
|
||||
padding-block-end: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-group {
|
||||
|
|
@ -34,6 +36,10 @@ section {
|
|||
|
||||
.component-section {
|
||||
margin-block-end: var(--spacing-40);
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title-margin {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<h1 class="display">Plugins styles</h1>
|
||||
<h1 class="display">Plugin styles</h1>
|
||||
<main>
|
||||
<section aria-label="colors">
|
||||
<h2 class="title-large title-margin">Colors</h2>
|
||||
|
|
@ -156,10 +156,10 @@
|
|||
></span>
|
||||
</li>
|
||||
<li class="color">
|
||||
<code class="color-label">--la-seconlary</code>
|
||||
<code class="color-label">--la-secondary</code>
|
||||
<span
|
||||
class="color-preview"
|
||||
style="background-color: var(--la-seconlary)"
|
||||
style="background-color: var(--la-secondary)"
|
||||
></span>
|
||||
</li>
|
||||
<li class="color">
|
||||
|
|
@ -367,20 +367,20 @@
|
|||
<p class="caption">Caption</p>
|
||||
<p class="code-font">Code font</p>
|
||||
|
||||
<code class="code code-font">
|
||||
<p class="display">Display</p> <br />
|
||||
<p class="title-l">Title L</p> <br />
|
||||
<p class="title-m">Title M</p> <br />
|
||||
<p class="title-s">Title S</p> <br />
|
||||
<p class="headline-l">Headline L</p> <br />
|
||||
<p class="headline-m">Headline M</p> <br />
|
||||
<p class="headline-s">Headline S</p> <br />
|
||||
<p class="body-l">Body large</p> <br />
|
||||
<p class="body-m">Body medium</p> <br />
|
||||
<p class="body-s">Body small</p> <br />
|
||||
<p class="caption">Caption</p> <br />
|
||||
<p class="code-font">Code font</p> <br />
|
||||
</code>
|
||||
<template lang="html">
|
||||
<p class="display">Display</p>
|
||||
<p class="title-l">Title L</p>
|
||||
<p class="title-m">Title M</p>
|
||||
<p class="title-s">Title S</p>
|
||||
<p class="headline-l">Headline L</p>
|
||||
<p class="headline-m">Headline M</p>
|
||||
<p class="headline-s">Headline S</p>
|
||||
<p class="body-l">Body large</p>
|
||||
<p class="body-m">Body medium</p>
|
||||
<p class="body-s">Body small</p>
|
||||
<p class="caption">Caption</p>
|
||||
<p class="code-font">Code font</p>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section aria-label="spacing">
|
||||
|
|
@ -483,28 +483,28 @@
|
|||
<span class="icon icon-unlock"></span>
|
||||
<span class="icon icon-download"></span>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<span class="icon icon-arrow-bottom"></span> <br />
|
||||
<span class="icon icon-arrow-top"></span> <br />
|
||||
<span class="icon icon-arrow-right"></span> <br />
|
||||
<span class="icon icon-arrow-left"></span> <br />
|
||||
<span class="icon icon-close"></span> <br />
|
||||
<span class="icon icon-close-l"></span> <br />
|
||||
<span class="icon icon-delete"></span> <br />
|
||||
<span class="icon icon-add"></span> <br />
|
||||
<span class="icon icon-remove"></span> <br />
|
||||
<span class="icon icon-search"></span> <br />
|
||||
<span class="icon icon-copy"></span> <br />
|
||||
<span class="icon icon-more"></span> <br />
|
||||
<span class="icon icon-loading"></span> <br />
|
||||
<span class="icon icon-help"></span> <br />
|
||||
<span class="icon icon-info"></span> <br />
|
||||
<span class="icon icon-show"></span> <br />
|
||||
<span class="icon icon-hide"></span> <br />
|
||||
<span class="icon icon-lock"></span> <br />
|
||||
<span class="icon icon-unlock"></span> <br />
|
||||
<span class="icon icon-download"></span>
|
||||
</code>
|
||||
<template lang="html">
|
||||
<span class="icon icon-arrow-bottom"></span>
|
||||
<span class="icon icon-arrow-top"></span>
|
||||
<span class="icon icon-arrow-right"></span>
|
||||
<span class="icon icon-arrow-left"></span>
|
||||
<span class="icon icon-close"></span>
|
||||
<span class="icon icon-close-l"></span>
|
||||
<span class="icon icon-delete"></span>
|
||||
<span class="icon icon-add"></span>
|
||||
<span class="icon icon-remove"></span>
|
||||
<span class="icon icon-search"></span>
|
||||
<span class="icon icon-copy"></span>
|
||||
<span class="icon icon-more"></span>
|
||||
<span class="icon icon-loading"></span>
|
||||
<span class="icon icon-help"></span>
|
||||
<span class="icon icon-info"></span>
|
||||
<span class="icon icon-show"></span>
|
||||
<span class="icon icon-hide"></span>
|
||||
<span class="icon icon-lock"></span>
|
||||
<span class="icon icon-unlock"></span>
|
||||
<span class="icon icon-download"></span>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section aria-label="select">
|
||||
|
|
@ -538,28 +538,31 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div class="form-group"> <br />
|
||||
<label class="select-label-hidden" for="select-1">Which is
|
||||
your favorite animal?</label> <br />
|
||||
<select class="select" id="select-1"> <br />
|
||||
<option value="1">Quokka</option> <br />
|
||||
<option value="2">Rabbit</option> <br />
|
||||
<option value="3">Goat</option> <br />
|
||||
<option value="4">Capybara</option> <br />
|
||||
</select> <br />
|
||||
</div> <br />
|
||||
<div class="form-group"> <br />
|
||||
<label class="select-label-hidden" for="select-2">Which is
|
||||
your favorite animal?</label> <br />
|
||||
<select class="select" id="select-2" disabled> <br />
|
||||
<option value="1">Quokka</option> <br />
|
||||
<option value="2">Rabbit</option> <br />
|
||||
<option value="3">Goat</option> <br />
|
||||
<option value="4">Capybara</option> <br />
|
||||
</select> <br />
|
||||
</div>
|
||||
</code>
|
||||
|
||||
<template lang="html">
|
||||
<div class="form-group">
|
||||
<label class="select-label-hidden" for="select-1"
|
||||
>Which is your favorite animal?</label
|
||||
>
|
||||
<select class="select" id="select-1">
|
||||
<option value="1">Quokka</option>
|
||||
<option value="2">Rabbit</option>
|
||||
<option value="3">Goat</option>
|
||||
<option value="4">Capybara</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="select-label-hidden" for="select-2"
|
||||
>Which is your favorite animal?</label
|
||||
>
|
||||
<select class="select" id="select-2" disabled>
|
||||
<option value="1">Quokka</option>
|
||||
<option value="2">Rabbit</option>
|
||||
<option value="3">Goat</option>
|
||||
<option value="4">Capybara</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="component-section select-section">
|
||||
<div class="theme-group" data-theme="light">
|
||||
|
|
@ -590,28 +593,30 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div class="form-group"> <br />
|
||||
<label class="select-label-hidden" for="select-1">Which is
|
||||
your favorite animal?</label> <br />
|
||||
<select class="select" id="select-1"> <br />
|
||||
<option value="1">Quokka</option> <br />
|
||||
<option value="2">Rabbit</option> <br />
|
||||
<option value="3">Goat</option> <br />
|
||||
<option value="4">Capybara</option> <br />
|
||||
</select> <br />
|
||||
</div> <br />
|
||||
<div class="form-group"> <br />
|
||||
<label class="select-label-hidden" for="select-2">Which is
|
||||
your favorite animal?</label> <br />
|
||||
<select class="select" id="select-2" disabled> <br />
|
||||
<option value="1">Quokka</option> <br />
|
||||
<option value="2">Rabbit</option> <br />
|
||||
<option value="3">Goat</option> <br />
|
||||
<option value="4">Capybara</option> <br />
|
||||
</select> <br />
|
||||
</div>
|
||||
</code>
|
||||
<template lang="html">
|
||||
<div class="form-group">
|
||||
<label class="select-label-hidden" for="select-1"
|
||||
>Which is your favorite animal?</label
|
||||
>
|
||||
<select class="select" id="select-1">
|
||||
<option value="1">Quokka</option>
|
||||
<option value="2">Rabbit</option>
|
||||
<option value="3">Goat</option>
|
||||
<option value="4">Capybara</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="select-label-hidden" for="select-2"
|
||||
>Which is your favorite animal?</label
|
||||
>
|
||||
<select class="select" id="select-2" disabled>
|
||||
<option value="1">Quokka</option>
|
||||
<option value="2">Rabbit</option>
|
||||
<option value="3">Goat</option>
|
||||
<option value="4">Capybara</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -655,28 +660,45 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div class="theme-group" data-theme="dark"> <br />
|
||||
<div class="form-group"> <br />
|
||||
<label class="input-label-hidden" for="input-1">This
|
||||
is the label</label> <br />
|
||||
<input class="input" type="text" placeholder="Input dark
|
||||
theme" id="input-1"/> <br />
|
||||
</div> <br />
|
||||
<div class="form-group"> <br />
|
||||
<label class="input-label-hidden" for="input-2">This
|
||||
is the label</label> <br />
|
||||
<input class="input success" type="text"
|
||||
placeholder="Input dark theme success" id="input-2"/> <br />
|
||||
</div> <br />
|
||||
<div class="form-group"> <br />
|
||||
<label class="input-label-hidden" for="input-3">This
|
||||
is the label</label> <br />
|
||||
<input class="input error" type="text" placeholder="Input
|
||||
dark theme error" id="input-3"/> <br />
|
||||
</div> <br />
|
||||
</div>
|
||||
</code>
|
||||
<template lang="html">
|
||||
<div class="theme-group" data-theme="dark">
|
||||
<div class="form-group">
|
||||
<label class="input-label-hidden" for="input-1"
|
||||
>This is the label</label
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Input dark
|
||||
theme"
|
||||
id="input-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label-hidden" for="input-2"
|
||||
>This is the label</label
|
||||
>
|
||||
<input
|
||||
class="input success"
|
||||
type="text"
|
||||
placeholder="Input dark theme success"
|
||||
id="input-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label-hidden" for="input-3"
|
||||
>This is the label</label
|
||||
>
|
||||
<input
|
||||
class="input error"
|
||||
type="text"
|
||||
placeholder="Input
|
||||
dark theme error"
|
||||
id="input-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="component-section">
|
||||
<div class="theme-group" data-theme="light">
|
||||
|
|
@ -716,28 +738,45 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div class="theme-group" data-theme="light"> <br />
|
||||
<div class="form-group"> <br />
|
||||
<label class="input-label-hidden" for="input-4">This
|
||||
is the label</label> <br />
|
||||
<input class="input" type="text" placeholder="Input light
|
||||
theme" id="input-4"/> <br />
|
||||
</div> <br />
|
||||
<div class="form-group"> <br />
|
||||
<label class="input-label-hidden" for="input-5">This
|
||||
is the label</label> <br />
|
||||
<input class="input success" type="text"
|
||||
placeholder="Input light theme success" id="input-5"/> <br />
|
||||
</div> <br />
|
||||
<div class="form-group"> <br />
|
||||
<label class="input-label-hidden" for="input-6">This
|
||||
is the label</label> <br />
|
||||
<input class="input error" type="text" placeholder="Input
|
||||
light theme error" id="input-6"/> <br />
|
||||
</div> <br />
|
||||
</div>
|
||||
</code>
|
||||
<template lang="html">
|
||||
<div class="theme-group" data-theme="light">
|
||||
<div class="form-group">
|
||||
<label class="input-label-hidden" for="input-4"
|
||||
>This is the label</label
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Input light
|
||||
theme"
|
||||
id="input-4"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label-hidden" for="input-5"
|
||||
>This is the label</label
|
||||
>
|
||||
<input
|
||||
class="input success"
|
||||
type="text"
|
||||
placeholder="Input light theme success"
|
||||
id="input-5"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label-hidden" for="input-6"
|
||||
>This is the label</label
|
||||
>
|
||||
<input
|
||||
class="input error"
|
||||
type="text"
|
||||
placeholder="Input
|
||||
light theme error"
|
||||
id="input-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -781,14 +820,14 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<code class="code code-font">
|
||||
<div data-theme="dark"> <br />
|
||||
<button type="button" data-appearance="primary">Primary
|
||||
Dark</button> <br />
|
||||
<button type="button" data-appearance="primary">Primary Dark
|
||||
destructive</button> <br />
|
||||
</div>
|
||||
</code>
|
||||
<template lang="html">
|
||||
<div data-theme="dark">
|
||||
<button type="button" data-appearance="primary">Primary Dark</button>
|
||||
<button type="button" data-appearance="primary">
|
||||
Primary Dark destructive
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="component-section">
|
||||
|
|
@ -827,15 +866,19 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div data-theme="light"> <br />
|
||||
<button type="button" data-appearance="primary">Primary
|
||||
Light</button> <br />
|
||||
<button type="button" data-appearance="primary"
|
||||
data-variant="destructive">Primary Light destructive</button>
|
||||
<br />
|
||||
</div>
|
||||
</code>
|
||||
|
||||
<template lang="html">
|
||||
<div data-theme="light">
|
||||
<button type="button" data-appearance="primary">Primary Light</button>
|
||||
<button
|
||||
type="button"
|
||||
data-appearance="primary"
|
||||
data-variant="destructive"
|
||||
>
|
||||
Primary Light destructive
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<h3 class="title-medium title-margin">Secondary button</h3>
|
||||
|
|
@ -854,12 +897,14 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div data-theme="dark"> <br />
|
||||
<button type="button" data-appearance="secondary">Secondary
|
||||
Dark</button> <br />
|
||||
</div>
|
||||
</code>
|
||||
|
||||
<template lang="html">
|
||||
<div data-theme="dark">
|
||||
<button type="button" data-appearance="secondary">
|
||||
Secondary Dark
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="component-section">
|
||||
|
|
@ -877,12 +922,14 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div data-theme="light"> <br />
|
||||
<button type="button" data-appearance="secondary">Secondary
|
||||
Light</button> <br />
|
||||
</div>
|
||||
</code>
|
||||
|
||||
<template lang="html">
|
||||
<div data-theme="light">
|
||||
<button type="button" data-appearance="secondary">
|
||||
Secondary Light
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -914,22 +961,31 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div data-theme="dark"> <br />
|
||||
<div class="checkbox-container"> <br />
|
||||
<input class="checkbox-input" type="checkbox"
|
||||
id="checkbox1" value="checkbox_one" /> <br />
|
||||
<label for="checkbox1" class="checkbox-hidden">Dark
|
||||
checkbox</label> <br />
|
||||
</div> <br />
|
||||
<br />
|
||||
<div class="checkbox-container"> <br />
|
||||
<input class="checkbox-input" type="checkbox"
|
||||
id="checkbox2" value="checkbox_second" /> <br />
|
||||
<label for="checkbox2" class="body-small">Dark
|
||||
checkbox with label</label> <br />
|
||||
</div> </div>
|
||||
</code>
|
||||
<template lang="html">
|
||||
<div data-theme="dark">
|
||||
<div class="checkbox-container">
|
||||
<input
|
||||
class="checkbox-input"
|
||||
type="checkbox"
|
||||
id="checkbox1"
|
||||
value="checkbox_one"
|
||||
/>
|
||||
<label for="checkbox1" class="checkbox-hidden">Dark checkbox</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-container">
|
||||
<input
|
||||
class="checkbox-input"
|
||||
type="checkbox"
|
||||
id="checkbox2"
|
||||
value="checkbox_second"
|
||||
/>
|
||||
<label for="checkbox2" class="body-small"
|
||||
>Dark checkbox with label</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="component-section">
|
||||
|
|
@ -958,22 +1014,34 @@
|
|||
>
|
||||
</label>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div data-theme="light"> <br />
|
||||
<div class="checkbox-container"> <br />
|
||||
<input class="checkbox-input" type="checkbox"
|
||||
id="checkbox3" value="third" /> <br />
|
||||
<label for="checkbox3" class="checkbox-hidden">Light
|
||||
checkbox</label> <br />
|
||||
</div> <br />
|
||||
<br />
|
||||
<div class="checkbox-container"> <br />
|
||||
<input class="checkbox-input" type="checkbox"
|
||||
id="checkbox4" value="checkbox_fourth" /> <br />
|
||||
<label for="checkbox4" class="body-small">Light
|
||||
checkbox with label</label> <br />
|
||||
</div> </div>
|
||||
</code>
|
||||
|
||||
<template lang="html">
|
||||
<div data-theme="light">
|
||||
<div class="checkbox-container">
|
||||
<input
|
||||
class="checkbox-input"
|
||||
type="checkbox"
|
||||
id="checkbox3"
|
||||
value="third"
|
||||
/>
|
||||
<label for="checkbox3" class="checkbox-hidden"
|
||||
>Light checkbox</label
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-container">
|
||||
<input
|
||||
class="checkbox-input"
|
||||
type="checkbox"
|
||||
id="checkbox4"
|
||||
value="checkbox_fourth"
|
||||
/>
|
||||
<label for="checkbox4" class="body-small"
|
||||
>Light checkbox with label</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -1012,28 +1080,41 @@
|
|||
<label class="radio-label" for="goat">goat</label>
|
||||
</div>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div data-theme="dark"> <br />
|
||||
<div class="radio-container"> <br />
|
||||
<input type="radio" class="radio-input" id="quokka"
|
||||
name="animal" value="quokka"> <br />
|
||||
<label class="radio-label"
|
||||
for="quokka">quokka</label> <br />
|
||||
</div> <br />
|
||||
<div class="radio-container"> <br />
|
||||
<input type="radio" class="radio-input" id="capybara"
|
||||
name="animal" value="capybara"> <br />
|
||||
<label class="radio-label"
|
||||
for="capybara">capybara</label> <br />
|
||||
</div> <br />
|
||||
<div class="radio-container"> <br />
|
||||
<input type="radio" class="radio-input" id="goat"
|
||||
name="animal" value="goat"> <br />
|
||||
<label class="radio-label"
|
||||
for="goat">goat</label> <br />
|
||||
</div> <br />
|
||||
</div>
|
||||
</code>
|
||||
|
||||
<template lang="html">
|
||||
<div data-theme="dark">
|
||||
<div class="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
class="radio-input"
|
||||
id="quokka"
|
||||
name="animal"
|
||||
value="quokka"
|
||||
/>
|
||||
<label class="radio-label" for="quokka">quokka</label>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
class="radio-input"
|
||||
id="capybara"
|
||||
name="animal"
|
||||
value="capybara"
|
||||
/>
|
||||
<label class="radio-label" for="capybara">capybara</label>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
class="radio-input"
|
||||
id="goat"
|
||||
name="animal"
|
||||
value="goat"
|
||||
/>
|
||||
<label class="radio-label" for="goat">goat</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="component-section">
|
||||
|
|
@ -1069,28 +1150,41 @@
|
|||
<label class="radio-label" for="chinchilla">chinchilla</label>
|
||||
</div>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<div data-theme="light"> <br />
|
||||
<div class="radio-container"> <br />
|
||||
<input type="radio" class="radio-input" id="rabbit"
|
||||
name="small-animals" value="rabbit"> <br />
|
||||
<label class="radio-label"
|
||||
for="rabbit">rabbit</label> <br />
|
||||
</div> <br />
|
||||
<div class="radio-container"> <br />
|
||||
<input type="radio" class="radio-input" id="mouse"
|
||||
name="small-animals" value="mouse"> <br />
|
||||
<label class="radio-label"
|
||||
for="mouse">mouse</label> <br />
|
||||
</div> <br />
|
||||
<div class="radio-container"> <br />
|
||||
<input type="radio" class="radio-input" id="chinchilla"
|
||||
name="small-animals" value="chinchilla"> <br />
|
||||
<label class="radio-label"
|
||||
for="chinchilla">chinchilla</label> <br />
|
||||
</div> <br />
|
||||
</div>
|
||||
</code>
|
||||
|
||||
<template lang="html">
|
||||
<div data-theme="light">
|
||||
<div class="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
class="radio-input"
|
||||
id="rabbit"
|
||||
name="small-animals"
|
||||
value="rabbit"
|
||||
/>
|
||||
<label class="radio-label" for="rabbit">rabbit</label>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
class="radio-input"
|
||||
id="mouse"
|
||||
name="small-animals"
|
||||
value="mouse"
|
||||
/>
|
||||
<label class="radio-label" for="mouse">mouse</label>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
class="radio-input"
|
||||
id="chinchilla"
|
||||
name="small-animals"
|
||||
value="chinchilla"
|
||||
/>
|
||||
<label class="radio-label" for="chinchilla">chinchilla</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,30 @@ export class AppElement extends HTMLElement {
|
|||
|
||||
connectedCallback() {
|
||||
this.innerHTML = html;
|
||||
|
||||
Array.from(this.querySelectorAll('template')).forEach((el: HTMLElement) => {
|
||||
const pre = document.createElement('pre');
|
||||
const code = document.createElement('code');
|
||||
code.classList.add('language-html');
|
||||
const removeLineIndentation = el.innerHTML.replaceAll(
|
||||
this.getIndentationSize(el.innerHTML),
|
||||
''
|
||||
);
|
||||
|
||||
code.textContent = removeLineIndentation;
|
||||
|
||||
pre.appendChild(code);
|
||||
|
||||
el.parentNode?.appendChild(pre);
|
||||
el.remove();
|
||||
});
|
||||
|
||||
(window as any).hljs.highlightAll();
|
||||
}
|
||||
|
||||
getIndentationSize(str: string) {
|
||||
const size = str.length - str.trimStart().length;
|
||||
return ' '.repeat(size - 1);
|
||||
}
|
||||
}
|
||||
customElements.define('app-root', AppElement);
|
||||
|
|
|
|||
|
|
@ -10,6 +10,14 @@ Install the package:
|
|||
npm install @penpot/plugin-styles
|
||||
```
|
||||
|
||||
Import the CSS file into your project:
|
||||
|
||||
```css
|
||||
@import '@penpot/plugin-styles/styles.css';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
For detailed examples and to see how to use the styles and components, visit the documentation at:
|
||||
|
||||
[Penpot Plugin Styles Documentation](https://penpot.github.io/penpot-plugins/)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue