tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding #3

release/0.2
Björn 3 years ago
parent
cb76042f96
commit
cabc5e8cac
3 changed files with 158 additions and 119 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +151
    -117
      public/components.html
  2. +6
    -1
      public/plain-ui.css
  3. +1
    -1
      src/scss/components/_field.scss

+ 151
- 117
public/components.html View File

@ -51,21 +51,64 @@
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="highlight">
<h1 class="highlight m-bottom-5">
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>
<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
</h3>
</h2>
<div class="content">
<code>&lt;button class=&quot;button&quot;&gt;
Default
&lt;/button&gt;
</code>
</div>
<div>
<button class="button">
Default
@ -108,12 +151,109 @@
<button class="button button--small">
Small
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Icon</h2>
<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 class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</label>
</div>
<div class="content">
<code>&#x3C;div class=&#x22;field-group field-group--valid&#x22;&#x3E;
&#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">
<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>
<h2 class="m-top-5">Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
@ -126,26 +266,6 @@
</div>
</div>
<div class="grid">
<div class="col-12">
<h3>
Bar
</h3>
<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>
</div>
</div>
<div class="grid">
<div class="col-12">
<h3>
@ -190,13 +310,7 @@
<div class="grid">
<div class="col-12">
<h2>Badge</h2>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div>
</div>
@ -314,86 +428,6 @@
<div class="grid">
<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>


+ 6
- 1
public/plain-ui.css View File

@ -2260,7 +2260,7 @@ input.field-text, textarea.field-text, select.field-choice {
font-family: var(--font-family);
font-size: 0.95rem;
width: 100%;
border: 1px solid var(--active);
border: 1px solid #a4a4a4;
background-color: var(--background-contrast);
border-radius: 2px;
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


+ 1
- 1
src/scss/components/_field.scss View File

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


Write Preview
Loading…
Cancel
Save