tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding #3

Browse Source
release/0.2
Björn 3 years ago
parent cb76042f96
commit cabc5e8cac
3 changed files with 158 additions and 119 deletions
Show Stats Download Patch File Download Diff File

264
public/components.html
Unescape View File

@ -51,21 +51,64 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="highlight"> <h1 class="highlight m-bottom-5">
Components Components
</h1>
<h2>Badge</h2>
<div class="content m-bottom-4">
<code>&#x3C;span class=&#x22;badge&#x22;&#x3E;
Category
&#x3C;/span&#x3E;
</code>
</div>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
<h2 class="m-top-5">
Bar
</h2> </h2>
<div class="content m-bottom-4">
<code>&#x3C;div class=&#x22;bar&#x22;&#x3E;
&#x3C;div class=&#x22;bar__start&#x22;&#x3E;
&#x3C;button class=&#x22;button button--transparent&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast marginless&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-close&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;bar__main&#x22;&#x3E;
Bar
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-text-contrast marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="bar__main">
Bar
</div>
</div>
<h3> <h2 class="m-top-5">
Buttons Buttons
</h3> </h2>
<div class="content"> <div class="content">
<code>&lt;button class=&quot;button&quot;&gt; <code>&lt;button class=&quot;button&quot;&gt;
Default Default
&lt;/button&gt; &lt;/button&gt;
</code> </code>
</div> </div>
<div> <div>
<button class="button"> <button class="button">
Default Default
@ -108,41 +151,118 @@
<button class="button button--small"> <button class="button button--small">
Small Small
</button> </button>
<h2 class="m-top-5">Field</h2>
<div class="content">
<code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
Name
&#x3C;input class=&#x22;field-text&#x22; /&#x3E;
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</div> </div>
<div class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</label>
</div> </div>
<div class="grid"> <div class="content">
<div class="col-12"> <code>&#x3C;div class=&#x22;field-group field-group--valid&#x22;&#x3E;
<h2>Icon</h2> &#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;svg class=&#x22;icon&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use class=&#x22;test&#x22; xlink:href=&#x22;symbol-defs.svg#icon-check&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
Surname
&#x3C;input class=&#x22;field-text&#x22; /&#x3E;
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="field-group field-group--valid">
<label class="field-label">
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use> <use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg> </svg>
<svg class="icon icon--success" aria-hidden="true"> Surname
<use xlink:href="symbol-defs.svg#icon-clock"></use> <input class="field-text" />
</label>
</div>
<div class="field-group field-group--error">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
</svg> </svg>
E-Mail
<input class="field-text" />
</label>
<span class="field-error">
String is not valid
</span>
</div> </div>
<div class="field-group">
<label class="field-label">
Towns
<select class="field-choice">
<option></option>
<option value="lonytown">Lonytown</option>
</select>
</label>
</div> </div>
<div class="grid"> <div class="field-group">
<div class="col-12"> <label class="field-label">
<h3> <input class="field-choice" type="checkbox" value="true" />
Bar <svg class="icon field-choice__unchecked" aria-hidden="true">
</h3> <use xlink:href="symbol-defs.svg#icon-circle"></use>
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-text-contrast marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg> </svg>
</button> <svg class="icon field-choice__checked" aria-hidden="true">
</div> <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
<div class="bar__main"> </svg>
Bar Do it!
</label>
</div> </div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
A
</label>
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
B
</label>
</div> </div>
<h2 class="m-top-5">Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div> </div>
</div> </div>
@ -190,13 +310,7 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Badge</h2>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div> </div>
</div> </div>
@ -314,86 +428,6 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Field</h2>
<form>
<div class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</label>
</div>
<div class="field-group field-group--valid">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
Surname
<input class="field-text" />
</label>
</div>
<div class="field-group field-group--error">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
</svg>
E-Mail
<input class="field-text" />
</label>
<span class="field-error">
String is not valid
</span>
</div>
<div class="field-group">
<label class="field-label">
Towns
<select class="field-choice">
<option></option>
<option value="lonytown">Lonytown</option>
</select>
</label>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="checkbox" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
Do it!
</label>
</div>
<div class="field-group">
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
A
</label>
<label class="field-label">
<input class="field-choice" type="radio" name="radio" value="true" />
<svg class="icon field-choice__unchecked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
B
</label>
</div>
</form>
</div> </div>
</div> </div>

7
public/plain-ui.css
Unescape View File

@ -2260,7 +2260,7 @@ input.field-text, textarea.field-text, select.field-choice {
font-family: var(--font-family); font-family: var(--font-family);
font-size: 0.95rem; font-size: 0.95rem;
width: 100%; width: 100%;
border: 1px solid var(--active); border: 1px solid #a4a4a4;
background-color: var(--background-contrast); background-color: var(--background-contrast);
border-radius: 2px; border-radius: 2px;
margin: 0.7rem 0 0; margin: 0.7rem 0 0;
@ -2709,6 +2709,11 @@ svg.field-choice__checked {
} }
/** /**
* <div class="loading">
* <span></span>
* <span></span>
* <span></span>
* </div>
* *
* *
* @author Björn Hase, Tentakelfabrik * @author Björn Hase, Tentakelfabrik

2
src/scss/components/_field.scss
Unescape View File

@ -48,7 +48,7 @@ input.field-text, textarea.field-text, select.field-choice {
width: 100%; width: 100%;
border: 1px solid var(--active); border: 1px solid lighten($color__primary, 40%);
background-color: var(--background-contrast); background-color: var(--background-contrast);
border-radius: $border-radius; border-radius: $border-radius;

Write Preview
Loading…
Cancel
Save