mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-06 14:50:21 -05:00
feat: plugins styles
This commit is contained in:
Marina López
parent
895d5cc449
commit
00ed96d696
22 changed files with 471 additions and 59 deletions
|
|
@ -4,7 +4,6 @@ html, body {
|
|||
background: var(--app-black);
|
||||
color: var(--app-white);
|
||||
margin: 0 var(--spacing-20);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
|
|
@ -12,12 +11,6 @@ section {
|
|||
padding-block: var(--spacing-32);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.code {
|
||||
background-color: var(--app-white);
|
||||
border-radius: var(--spacing-4);
|
||||
|
|
@ -32,12 +25,10 @@ ul {
|
|||
padding: var(--spacing-32);
|
||||
|
||||
&[data-theme="dark"] {
|
||||
background-color: var(--db-primary);
|
||||
border: 1px solid var(--db-quaternary);
|
||||
}
|
||||
|
||||
&[data-theme="light"] {
|
||||
background-color: var(--lb-primary);
|
||||
border: 1px solid var(--lb-quaternary);
|
||||
}
|
||||
}
|
||||
|
|
@ -86,12 +77,19 @@ ul {
|
|||
background-color: var(--error-500);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-list {
|
||||
/* INPUT / BUTTONS */
|
||||
.inputs-list,
|
||||
.button-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-20);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-block-end: var(--spacing-20);
|
||||
}
|
||||
}
|
||||
|
||||
/* ICON */
|
||||
.icons-section {
|
||||
display: flex;
|
||||
gap: var(--spacing-8);
|
||||
}
|
||||
|
|
@ -309,14 +309,175 @@
|
|||
|
||||
<section aria-label="icons">
|
||||
<h2 class="title-large">Icons</h2>
|
||||
<div class="component-section">
|
||||
<div class="icons-section" style="margin-block-end: var(--spacing-20);">
|
||||
<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-actions-close"></span>
|
||||
<span class="icon icon-actions-close-l"></span>
|
||||
<span class="icon icon-actions-delete"></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>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section aria-label="select">
|
||||
<h2 class="title-large">Select</h2>
|
||||
<div class="component-section">
|
||||
<div class="theme-group" data-theme="dark">
|
||||
<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="">Select an animal</option>
|
||||
<option value="1">Quokka</option>
|
||||
<option value="2">Rabbit</option>
|
||||
<option value="3">Goat</option>
|
||||
<option value="4">Capybara</option>
|
||||
</select>
|
||||
</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>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="component-section">
|
||||
<div class="theme-group" data-theme="dark">
|
||||
<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>
|
||||
</div>
|
||||
<code class="code code-font">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-label="input">
|
||||
<h2 class="title-large">Input</h2>
|
||||
<div class="component-section">
|
||||
<div class="theme-group" data-theme="dark">
|
||||
<div class="inputs-list">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="component-section">
|
||||
<div class="theme-group" data-theme="light">
|
||||
<div class="inputs-list">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,26 +14,78 @@
|
|||
background-image: url('../icons/arrow-bottom.svg');
|
||||
}
|
||||
|
||||
.icon-arrow-left {
|
||||
background-image: url('../icons/arrow-left.svg');
|
||||
}
|
||||
|
||||
.icon-arrow-right {
|
||||
background-image: url('../icons/arrow-right.svg');
|
||||
}
|
||||
|
||||
.icon-arrow-top {
|
||||
background-image: url('../icons/arrow-top.svg');
|
||||
}
|
||||
.icon-arrow-left {
|
||||
background-image: url('../icons/arrow-left.svg');
|
||||
}
|
||||
|
||||
.icon-actions-close {
|
||||
background-image: url('../icons/actions-close.svg');
|
||||
}
|
||||
|
||||
.icon-actions-close-l {
|
||||
background-image: url('../icons/actions-close-l.svg');
|
||||
}
|
||||
|
||||
.icon-actions-delete {
|
||||
background-image: url('../icons/actions-delete.svg');
|
||||
}
|
||||
.icon-arrow-right {
|
||||
background-image: url('../icons/arrow-right.svg');
|
||||
}
|
||||
|
||||
.icon-arrow-top {
|
||||
background-image: url('../icons/arrow-top.svg');
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
background-image: url('../icons/actions-close.svg');
|
||||
}
|
||||
|
||||
.icon-close-l {
|
||||
background-image: url('../icons/actions-close-l.svg');
|
||||
}
|
||||
|
||||
.icon-delete {
|
||||
background-image: url('../icons/actions-delete.svg');
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
background-image: url('../icons/actions-add.svg');
|
||||
}
|
||||
|
||||
.icon-remove {
|
||||
background-image: url('../icons/actions-remove.svg');
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
background-image: url('../icons/actions-search.svg');
|
||||
}
|
||||
|
||||
.icon-copy {
|
||||
background-image: url('../icons/actions-copy.svg');
|
||||
}
|
||||
|
||||
.icon-more {
|
||||
background-image: url('../icons/actions-more.svg');
|
||||
}
|
||||
|
||||
.icon-loading {
|
||||
background-image: url('../icons/actions-loading.svg');
|
||||
}
|
||||
|
||||
.icon-help {
|
||||
background-image: url('../icons/actions-help.svg');
|
||||
}
|
||||
|
||||
.icon-info {
|
||||
background-image: url('../icons/actions-info.svg');
|
||||
}
|
||||
|
||||
.icon-show {
|
||||
background-image: url('../icons/actions-show.svg');
|
||||
}
|
||||
|
||||
.icon-hide {
|
||||
background-image: url('../icons/actions-hide.svg');
|
||||
}
|
||||
|
||||
.icon-lock {
|
||||
background-image: url('../icons/actions-lock.svg');
|
||||
}
|
||||
|
||||
.icon-unlock {
|
||||
background-image: url('../icons/actions-unlock.svg');
|
||||
}
|
||||
|
||||
.icon-download {
|
||||
background-image: url('../icons/app-download.svg');
|
||||
}
|
||||
112
libs/plugins-styles/src/lib/components/input.css
Normal file
112
libs/plugins-styles/src/lib/components/input.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
.input-label-hidden {
|
||||
block-size: 1px;
|
||||
border: 0;
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
inline-size: 1px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
& .input {
|
||||
background-color: var(--db-tertiary);
|
||||
border-color: var(--db-tertiary);
|
||||
color: var(--df-primary);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--da-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--db-quaternary);
|
||||
border-color: var(--db-quaternary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--db-primary);
|
||||
border-color: var(--da-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--db-primary);
|
||||
border-color: var(--db-quaternary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--df-secondary);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: var(--db-primary);
|
||||
border-color: var(--da-tertiary);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: var(--db-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
& .input {
|
||||
background-color: var(--lb-tertiary);
|
||||
border-color: var(--lb-tertiary);
|
||||
color: var(--lf-primary);
|
||||
|
||||
&:focus {
|
||||
background-color: var(--lb-secondary);
|
||||
border-color: var(--la-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--lb-quaternary);
|
||||
border-color: var(--lb-quaternary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--lb-primary);
|
||||
border-color: var(--la-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--lb-primary);
|
||||
border-color: var(--lb-quaternary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--lf-secondary);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: var(--lb-primary);
|
||||
border-color: var(--la-tertiary);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: var(--lb-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
border: 1px solid;
|
||||
border-radius: var(--spacing-8);
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--font-line-height-m);
|
||||
outline: none;
|
||||
padding-block: var(--spacing-8);
|
||||
padding-inline: var(--spacing-8);
|
||||
|
||||
&.error {
|
||||
border-color: var(--error-500);
|
||||
}
|
||||
}
|
||||
53
libs/plugins-styles/src/lib/components/select.css
Normal file
53
libs/plugins-styles/src/lib/components/select.css
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.select {
|
||||
appearance: none;
|
||||
background-color: var(--db-tertiary);
|
||||
background-position: right 7px center;
|
||||
background-image: url('../icons/arrow-bottom.svg');
|
||||
background-repeat: no-repeat;
|
||||
block-size: calc(var(--spacing-8) * 6);
|
||||
border: 1px solid;
|
||||
border-color: var(--db-tertiary);
|
||||
border-radius: var(--spacing-8);
|
||||
box-sizing: border-box;
|
||||
color: var(--df-primary);
|
||||
cursor: pointer;
|
||||
inline-size: 100%;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--font-line-height-m);
|
||||
outline: none;
|
||||
padding-block: var(--spacing-12);
|
||||
padding-inline: var(--spacing-8);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--db-quaternary);
|
||||
border-color: var(--db-quaternary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--db-tertiary);
|
||||
border-color: var(--da-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--db-primary);
|
||||
border-color: var(--db-quaternary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.select-label-hidden {
|
||||
block-size: 1px;
|
||||
border: 0;
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
inline-size: 1px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -6,7 +6,10 @@
|
|||
--font-weight-bold: 500;
|
||||
--font-line-height-s: 1.2;
|
||||
--font-line-height-m: 1.4;
|
||||
--font-line-height-l: 1.2;
|
||||
--font-line-height-l: 1.5;
|
||||
--font-size-s: 12px;
|
||||
--font-size-m: 14px;
|
||||
--font-size-l: 16px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
|
@ -18,19 +21,19 @@ html, body {
|
|||
.display {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 36px;
|
||||
line-height: 1.2;
|
||||
line-height: var(--font-line-height-s);
|
||||
}
|
||||
|
||||
.title-s {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-s);
|
||||
}
|
||||
|
||||
.title-m {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
line-height: var(--font-line-height-s);
|
||||
}
|
||||
|
||||
.title-l {
|
||||
|
|
@ -41,51 +44,51 @@ html, body {
|
|||
|
||||
.headline-s {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-s);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.headline-m {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-size: var(--font-size-l);
|
||||
line-height: var(--font-line-height-m);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.headline-l {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
line-height: var(--font-line-height-s);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.body-s {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-m);
|
||||
}
|
||||
|
||||
.body-m {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-l);
|
||||
}
|
||||
|
||||
.body-l {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-size: var(--font-size-l);
|
||||
line-height: var(--font-line-height-l);
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-s);
|
||||
}
|
||||
|
||||
.code-font {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--font-line-height-l);
|
||||
}
|
||||
18
libs/plugins-styles/src/lib/core/generic.css
Normal file
18
libs/plugins-styles/src/lib/core/generic.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
background-color: var(--db-primary);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
background-color: var(--lb-primary);
|
||||
}
|
||||
1
libs/plugins-styles/src/lib/icons/actions-add.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-add.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M8 3.333v9.334M3.333 8h9.334" class="fills"/><g class="strokes"><path d="M8 3.333v9.334M3.333 8h9.334" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 446 B |
1
libs/plugins-styles/src/lib/icons/actions-copy.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-copy.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><defs><clipPath id="a" class="frame-clip frame-clip-def"><rect rx="0" ry="0" width="16" height="16"/></clipPath></defs><g clip-path="url(#a)"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M6 8a2 2 0 0 1 2-2h4.667c1.103 0 2 .896 2 2v4.667c0 1.103-.897 2-2 2H8c-1.104 0-2-.897-2-2V8Zm-2.667 2h-.666a1.333 1.333 0 0 1-1.334-1.333v-6c0-.737.597-1.334 1.334-1.334h6c.736 0 1.333.597 1.333 1.334v.666" class="fills"/><g class="strokes"><path d="M6 8a2 2 0 0 1 2-2h4.667c1.103 0 2 .896 2 2v4.667c0 1.103-.897 2-2 2H8c-1.104 0-2-.897-2-2V8Zm-2.667 2h-.666a1.333 1.333 0 0 1-1.334-1.333v-6c0-.737.597-1.334 1.334-1.334h6c.736 0 1.333.597 1.333 1.334v.666" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 948 B |
1
libs/plugins-styles/src/lib/icons/actions-help.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-help.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><defs><clipPath id="a" class="frame-clip frame-clip-def"><rect rx="0" ry="0" width="16" height="16"/></clipPath></defs><g clip-path="url(#a)"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M6.06 5.918a2 2 0 0 1 3.887.667c0 1.333-2 2-2 2M8 11.252Zm6.666-3.334a6.668 6.668 0 1 1-13.332.162 6.668 6.668 0 0 1 13.332-.162Z" style="fill: none;" class="fills"/><g class="strokes"><path d="M6.06 5.918a2 2 0 0 1 3.887.667c0 1.333-2 2-2 2M8 11.252h0Zm6.666-3.334a6.668 6.668 0 1 1-13.332.162 6.668 6.668 0 0 1 13.332-.162Z" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 816 B |
1
libs/plugins-styles/src/lib/icons/actions-hide.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-hide.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16.694" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="-0.51 0 16.694 16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M15.184 5.843c-1.465 2.85-4.213 4.8-7.36 4.8-3.129 0-5.863-1.927-7.334-4.85" class="fills"/><g class="strokes"><path d="M15.184 5.843c-1.465 2.85-4.213 4.8-7.36 4.8-3.129 0-5.863-1.927-7.334-4.85" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 572 B |
1
libs/plugins-styles/src/lib/icons/actions-info.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-info.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><defs><clipPath id="a" class="frame-clip frame-clip-def"><rect rx="0" ry="0" width="16" height="16"/></clipPath></defs><g clip-path="url(#a)"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M8 7v4m0-6Zm6.666 2.918a6.668 6.668 0 1 1-13.332.162 6.668 6.668 0 0 1 13.332-.162Z" style="fill: none;" class="fills"/><g class="strokes"><path d="M8 7v4m0-6h0Zm6.666 2.918a6.668 6.668 0 1 1-13.332.162 6.668 6.668 0 0 1 13.332-.162Zh0Z" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 727 B |
1
libs/plugins-styles/src/lib/icons/actions-loading.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-loading.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M14.111 3.556v3.333h-3.334m-8.888 5.555V9.111h3.334m-1.94-2.778a4.999 4.999 0 0 1 8.25-1.866l2.578 2.422M1.889 9.111l2.578 2.422a4.998 4.998 0 0 0 8.25-1.866M1.889 9.111Z" class="fills"/><g class="strokes"><path d="M14.111 3.556v3.333h-3.334m-8.888 5.555V9.111h3.334m-1.94-2.778a4.999 4.999 0 0 1 8.25-1.866l2.578 2.422M1.889 9.111l2.578 2.422a4.998 4.998 0 0 0 8.25-1.866M1.889 9.111h0Z" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 732 B |
1
libs/plugins-styles/src/lib/icons/actions-lock.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-lock.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M12.148 8.667H3.852c-.655 0-1.185.597-1.185 1.333v3.333c0 .737.53 1.334 1.185 1.334h8.296c.655 0 1.185-.597 1.185-1.334V10c0-.736-.53-1.333-1.185-1.333Zm-7.481 0v-4a3.334 3.334 0 0 1 6.666 0v4" class="fills"/><g class="strokes"><path d="M12.148 8.667H3.852c-.655 0-1.185.597-1.185 1.333v3.333c0 .737.53 1.334 1.185 1.334h8.296c.655 0 1.185-.597 1.185-1.334V10c0-.736-.53-1.333-1.185-1.333Zm-7.481 0v-4a3.334 3.334 0 0 1 6.666 0v4" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 774 B |
1
libs/plugins-styles/src/lib/icons/actions-more.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-more.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M8 7.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z" class="fills"/><g class="strokes"><path d="M8 7.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g><path d="M8 2.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z" class="fills"/><g class="strokes"><path d="M8 2.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g><path d="M8 12.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z" class="fills"/><g class="strokes"><path d="M8 12.25a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
1
libs/plugins-styles/src/lib/icons/actions-remove.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-remove.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M3 7.997h10" class="fills"/><g class="strokes"><path d="M3 7.997h10" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 412 B |
1
libs/plugins-styles/src/lib/icons/actions-search.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-search.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><defs><clipPath id="a" class="frame-clip frame-clip-def"><rect rx="0" ry="0" width="16" height="16"/></clipPath></defs><g clip-path="url(#a)"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M7.333 12.667a5.32 5.32 0 0 0 3.772-1.562 5.334 5.334 0 1 0-3.772 1.562ZM14 14l-2.895-2.895" class="fills"/><g class="strokes"><path d="M7.333 12.667a5.32 5.32 0 0 0 3.772-1.562 5.334 5.334 0 1 0-3.772 1.562ZM14 14l-2.895-2.895" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 718 B |
1
libs/plugins-styles/src/lib/icons/actions-show.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-show.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="17" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="-0.5 0 17 16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M15.5 7.843C14.004 4.949 11.2 3 7.987 3 4.793 3 2.002 4.926.5 7.793c1.502 2.923 4.293 4.85 7.487 4.85 3.212 0 6.017-1.95 7.513-4.8ZM8 7.018a.803.803 0 0 1 .696 1.206.803.803 0 0 1-1.5-.402c0-.444.36-.804.804-.804Z" class="fills"/><g class="strokes"><path d="M15.5 7.843C14.004 4.949 11.2 3 7.987 3 4.793 3 2.002 4.926.5 7.793c1.502 2.923 4.293 4.85 7.487 4.85 3.212 0 6.017-1.95 7.513-4.8ZM8 7.018a.803.803 0 0 1 .696 1.206.803.803 0 0 1-1.5-.402c0-.444.36-.804.804-.804Z" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 839 B |
1
libs/plugins-styles/src/lib/icons/actions-unlock.svg
Normal file
1
libs/plugins-styles/src/lib/icons/actions-unlock.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M12.148 8.667H3.852c-.655 0-1.185.597-1.185 1.333v3.333c0 .737.53 1.334 1.185 1.334h8.296c.655 0 1.185-.597 1.185-1.334V10c0-.736-.53-1.333-1.185-1.333Zm-7.481 0v-4a3.334 3.334 0 0 1 6.6-.667" class="fills"/><g class="strokes"><path d="M12.148 8.667H3.852c-.655 0-1.185.597-1.185 1.333v3.333c0 .737.53 1.334 1.185 1.334h8.296c.655 0 1.185-.597 1.185-1.334V10c0-.736-.53-1.333-1.185-1.333Zm-7.481 0v-4a3.334 3.334 0 0 1 6.6-.667" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 772 B |
1
libs/plugins-styles/src/lib/icons/app-download.svg
Normal file
1
libs/plugins-styles/src/lib/icons/app-download.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><defs><clipPath id="a" class="frame-clip frame-clip-def"><rect rx="0" ry="0" width="16" height="16"/></clipPath></defs><g clip-path="url(#a)"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M14 10v2.667A1.335 1.335 0 0 1 12.667 14H3.333A1.335 1.335 0 0 1 2 12.667V10m2.667-3.333L8 10m0 0 3.333-3.333M8 10V2" class="fills"/><g class="strokes"><path d="M14 10v2.667A1.335 1.335 0 0 1 12.667 14H3.333A1.335 1.335 0 0 1 2 12.667V10m2.667-3.333L8 10m0 0 3.333-3.333M8 10V2" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 768 B |
|
|
@ -1,4 +1,5 @@
|
|||
/*core*/
|
||||
@import url("core/generic.css");
|
||||
@import url("core/swatches.css");
|
||||
@import url("core/fonts.css");
|
||||
@import url("core/spacing.css");
|
||||
|
|
@ -7,5 +8,6 @@
|
|||
@import url("components/button.css");
|
||||
@import url("components/checkbox.css");
|
||||
@import url("components/radio-button.css");
|
||||
@import url("components/tabs.css");
|
||||
@import url("components/icon.css");
|
||||
@import url("components/icon.css");
|
||||
@import url("components/select.css");
|
||||
@import url("components/input.css");
|
||||
Loading…
Reference in a new issue