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

adding

Browse Source
release/0.2
Björn 3 years ago
parent 8b43b3ba4b
commit 382e7558b0
16 changed files with 1858 additions and 505 deletions
Show Stats Download Patch File Download Diff File

688
public/components.html
Unescape View File

@ -55,6 +55,16 @@
Components Components
</h1> </h1>
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body">
<div class="content m-last-child-0">
<p>
Plain UI is currently under development, a few Styles, Concepts and Names could be changing until Release!
</p>
</div>
</div>
</div>
<h2>Badge</h2> <h2>Badge</h2>
<div class="content m-bottom-4"> <div class="content m-bottom-4">
<code>&#x3C;span class=&#x22;badge&#x22;&#x3E; <code>&#x3C;span class=&#x22;badge&#x22;&#x3E;
@ -162,7 +172,6 @@
&#x3C;/div&#x3E; &#x3C;/div&#x3E;
</code> </code>
</div> </div>
<div class="field-group"> <div class="field-group">
<label class="field-label"> <label class="field-label">
Name Name
@ -192,149 +201,222 @@
</label> </label>
</div> </div>
<div class="field-group field-group--error"> <div class="content">
<label class="field-label"> <code>&#x3C;div class=&#x22;field-group field-group--error&#x22;&#x3E;
<svg class="icon" aria-hidden="true"> &#x3C;label class=&#x22;field-label&#x22;&#x3E;
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use> &#x3C;svg class=&#x22;icon&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
</svg> &#x3C;use class=&#x22;test&#x22; xlink:href=&#x22;symbol-defs.svg#icon-warning&#x22;&#x3E;&#x3C;/use&#x3E;
E-Mail &#x3C;/svg&#x3E;
<input class="field-text" /> E-Mail
</label> &#x3C;input class=&#x22;field-text&#x22; /&#x3E;
<span class="field-error"> &#x3C;/label&#x3E;
String is not valid &#x3C;span class=&#x22;field-error&#x22;&#x3E;
</span> String is not valid
</div> &#x3C;/span&#x3E;
&#x3C;/div&#x3E;
<div class="field-group"> </code>
<label class="field-label"> </div>
Towns <div class="field-group field-group--error">
<select class="field-choice"> <label class="field-label">
<option></option> <svg class="icon" aria-hidden="true">
<option value="lonytown">Lonytown</option> <use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
</select> </svg>
</label> E-Mail
</div> <input class="field-text" />
</label>
<div class="field-group"> <span class="field-error">
<label class="field-label"> String is not valid
<input class="field-choice" type="checkbox" value="true" /> </span>
<svg class="icon field-choice__unchecked" aria-hidden="true"> </div>
<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>
<div class="content">
<code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
Towns
&#x3C;select class=&#x22;field-choice&#x22;&#x3E;
&#x3C;option&#x3E;&#x3C;/option&#x3E;
&#x3C;option value=&#x22;lonytown&#x22;&#x3E;Lonytown&#x3C;/option&#x3E;
&#x3C;/select&#x3E;
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</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="content">
<code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;input class=&#x22;field-choice&#x22; type=&#x22;checkbox&#x22; value=&#x22;true&#x22; /&#x3E;
&#x3C;svg class=&#x22;icon field-choice__unchecked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-checkbox&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon field-choice__checked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-checkbox-checked&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
Checkbox
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</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-checkbox"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use>
</svg>
Checkbox
</label>
</div>
<h2 class="m-top-5">Icon</h2> <div class="content">
<svg class="icon" aria-hidden="true"> <code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
<use xlink:href="symbol-defs.svg#icon-check"></use> &#x3C;label class=&#x22;field-label&#x22;&#x3E;
</svg> &#x3C;input class=&#x22;field-choice&#x22; type=&#x22;radio&#x22; name=&#x22;radio&#x22; value=&#x22;true&#x22; /&#x3E;
<svg class="icon icon--danger" aria-hidden="true"> &#x3C;svg class=&#x22;icon field-choice__unchecked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
<use xlink:href="symbol-defs.svg#icon-camera"></use> &#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-circle&#x22;&#x3E;&#x3C;/use&#x3E;
</svg> &#x3C;/svg&#x3E;
<svg class="icon icon--success" aria-hidden="true"> &#x3C;svg class=&#x22;icon field-choice__checked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
<use xlink:href="symbol-defs.svg#icon-clock"></use> &#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-circle-check&#x22;&#x3E;&#x3C;/use&#x3E;
</svg> &#x3C;/svg&#x3E;
</div> Radio A
</div> &#x3C;/label&#x3E;
&#x3C;label class=&#x22;field-label&#x22;&#x3E;
&#x3C;input class=&#x22;field-choice&#x22; type=&#x22;radio&#x22; name=&#x22;radio&#x22; value=&#x22;true&#x22; /&#x3E;
&#x3C;svg class=&#x22;icon field-choice__unchecked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-circle&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon field-choice__checked&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-circle-check&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
Radio B
&#x3C;/label&#x3E;
&#x3C;/div&#x3E;
</code>
</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>
Radio 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>
Radio B
</label>
</div>
<div class="grid"> <div class="content">
<div class="col-12"> <code>&#x3C;div class=&#x22;field-group&#x22;&#x3E;
<h3> &#x3C;label class=&#x22;field-label&#x22;&#x3E;
Tabs &#x3C;input class=&#x22;field-choice&#x22; type=&#x22;checkbox&#x22; name=&#x22;radio&#x22; value=&#x22;true&#x22; /&#x3E;
</h3> &#x3C;span class=&#x22;field-switch&#x22;&#x3E;&#x3C;/span&#x3E;
<div class="tabs"> &#x3C;/label&#x3E;
<a class="tabs__item tabs__item--selected"> &#x3C;/div&#x3E;
Tab A </code>
</a> </div>
<a class="tabs__item"> <div class="field-group">
Tab B <label class="field-label">
</a> <input class="field-choice" type="checkbox" name="radio" value="true" />
<a class="tabs__item"> <span class="field-switch"></span>
Tab C </label>
</a>
</div> </div>
</div>
</div>
<div class="grid"> <h2 class="m-top-5">
<div class="col-12"> Group
<h3> </h2>
Tabs + Bar <div class="content">
</h3> <code>&#x3C;div class=&#x22;group&#x22;&#x3E;
<div class="bar"> &#x3C;div class=&#x22;group__item background-color-primary color-text-contrast p-3&#x22;&#x3E;
<div class="bar__start marginless"> One
<div class="tabs tabs--contrast"> &#x3C;/div&#x3E;
<a class="tabs__item tabs__item--selected"> &#x3C;div class=&#x22;group__item background-color-primary color-text-contrast p-3&#x22;&#x3E;
Tab A Two
</a> &#x3C;/div&#x3E;
<a class="tabs__item"> &#x3C;/div&#x3E;
Tab B </code>
</a> </div>
<a class="tabs__item"> <div class="group">
Tab C <div class="group__item background-color-primary color-text-contrast p-3">
</a> One
</div> </div>
<div class="group__item background-color-primary color-text-contrast p-3">
Two
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="grid"> <div class="container">
<div class="col-12">
</div>
</div>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2> <h2>
Progress Hero
</h2> </h2>
<div class="content m-last-child-0 m-bottom-4"> <div class="content">
<code>&#x3C;div class=&#x22;progress&#x22;&#x3E; <code>&#x3C;div class=&#x22;hero&#x22;&#x3E;
&#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E; &#x3C;img style=&#x22;max-height: 400px;&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
&#x3C;/div&#x3E; &#x3C;/div&#x3E;
</code> </code>
</div> </div>
<div class="progress">
<div class="progress__inner" style="width: 20%;"></div>
</div>
</div> </div>
</div> </div>
</div>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Loading</h2> <h2 class="m-top-5">Icon</h2>
<div class="content m-last-child-0 m-bottom-4"> <div class="content">
<code>&#x3C;svg class=&#x22;icon&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-check&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon fill-danger&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-camera&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;svg class=&#x22;icon fill-success&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-clock&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
</code>
</div>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon fill-danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
<!-- Loading -->
<h2 class="m-top-5">Loading</h2>
<div class="content">
<code>&#x3C;div class=&#x22;loading&#x22;&#x3E; <code>&#x3C;div class=&#x22;loading&#x22;&#x3E;
&#x3C;span&#x3E;&#x3C;/span&#x3E; &#x3C;span&#x3E;&#x3C;/span&#x3E;
&#x3C;span&#x3E;&#x3C;/span&#x3E; &#x3C;span&#x3E;&#x3C;/span&#x3E;
@ -347,49 +429,55 @@
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
</div>
</div>
<div class="grid"> <h2 class="m-top-5">
<div class="col-12"> Media
<h2>Panel</h2> </h2>
<div class="panel"> <div class="content">
<div class="bar"> <code>&#x3C;figure class=&#x22;figure&#x22;&#x3E;
<div class="bar__start"> &#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
<button type="button" class="button button--transparent"> &#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;
<svg class="icon fill-text-contrast" aria-hidden="true"> food truck yr franzen pabst
<use xlink:href="symbol-defs.svg#icon-expand"></use> &#x3C;/figcaption&#x3E;
</svg> &#x3C;/figure&#x3E;
</button> </code>
</div>
<div class="bar__main">Test</div>
<div class="bar__end">
<button type="button" class="button button--transparent">
<svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-edit"></use>
</svg>
</button>
<button type="button" class="button button--transparent">
<svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="panel__body">
<div class="content">
<p>
Hallo
</p>
</div>
</div>
</div> </div>
</div> <figure class="figure">
</div> <img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
<div class="grid">
<div class="col-12"> <!-- modal -->
<h2>Modal</h2> <h2 class="m-top-5">
Modal
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;modal&#x22;&#x3E;
&#x3C;div class=&#x22;modal__inner&#x22;&#x3E;
&#x3C;div class=&#x22;modal__title t-center&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#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;
Delete
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;modal__body&#x22;&#x3E;
Do you really wan&#x27;t to delete all files?
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;modal__footer&#x22;&#x3E;
&#x3C;button class=&#x22;button button--outline button--danger&#x22; onclick=&#x22;closeModal()&#x22;&#x3E;
Confirm
&#x3C;/button&#x3E;
&#x3C;button class=&#x22;button button--outline float-right&#x22; onclick=&#x22;closeModal()&#x22;&#x3E;
Reject
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<button class="button" onclick="openModal()"> <button class="button" onclick="openModal()">
Click me! Click me!
</button> </button>
@ -423,19 +511,130 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="grid">
<div class="col-12">
</div> <!-- panel -->
</div> <h2 class="m-top-5">
Panel
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;panel&#x22;&#x3E;
&#x3C;div class=&#x22;bar&#x22;&#x3E;
&#x3C;div class=&#x22;bar__start&#x22;&#x3E;
&#x3C;button type=&#x22;button&#x22; class=&#x22;button button--transparent&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-expand&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/button&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;bar__main&#x22;&#x3E;Panel&#x3C;/div&#x3E;
&#x3C;div class=&#x22;bar__end&#x22;&#x3E;
&#x3C;button type=&#x22;button&#x22; class=&#x22;button button--transparent&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
&#x3C;use xlink:href=&#x22;symbol-defs.svg#icon-edit&#x22;&#x3E;&#x3C;/use&#x3E;
&#x3C;/svg&#x3E;
&#x3C;/button&#x3E;
&#x3C;button type=&#x22;button&#x22; class=&#x22;button button--transparent&#x22;&#x3E;
&#x3C;svg class=&#x22;icon fill-text-contrast&#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&#x3E;
&#x3C;div class=&#x22;panel__body&#x22;&#x3E;
&#x3C;div class=&#x22;content m-last-child-0&#x22;&#x3E;
&#x3C;p&#x3E;
Content
&#x3C;/p&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="panel">
<div class="bar">
<div class="bar__start">
<button type="button" class="button button--transparent">
<svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg>
</button>
</div>
<div class="bar__main">Panel</div>
<div class="bar__end">
<button type="button" class="button button--transparent">
<svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-edit"></use>
</svg>
</button>
<button type="button" class="button button--transparent">
<svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="panel__body">
<div class="content m-last-child-0">
<p>
Hallo
</p>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Table</h2>
<!-- progress -->
<h2 class="m-top-5">
Progress
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
&#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="progress">
<div class="progress__inner" style="width: 20%;"></div>
</div>
<!-- table -->
<h2 class="m-top-5">
Table
</h2>
<div class="content">
<code>&#x3C;table class=&#x22;table table--striped&#x22;&#x3E;
&#x3C;thead&#x3E;
&#x3C;tr&#x3E;
&#x3C;th&#x3E;A&#x3C;/th&#x3E;
&#x3C;th&#x3E;B&#x3C;/th&#x3E;
&#x3C;th&#x3E;C&#x3C;/th&#x3E;
&#x3C;th&#x3E;D&#x3C;/th&#x3E;
&#x3C;/tr&#x3E;
&#x3C;/thead&#x3E;
&#x3C;tbody&#x3E;
&#x3C;tr&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;tr&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;tr&#x3E;
&#x3C;td&#x3E;1&#x3C;/td&#x3E;
&#x3C;td&#x3E;2&#x3C;/td&#x3E;
&#x3C;td&#x3E;3&#x3C;/td&#x3E;
&#x3C;td&#x3E;4&#x3C;/td&#x3E;
&#x3C;/tr&#x3E;
&#x3C;/tbody&#x3E;
&#x3C;/table&#x3E;
</code>
</div>
<table class="table table--striped"> <table class="table table--striped">
<thead> <thead>
<tr> <tr>
@ -466,94 +665,85 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>
Hero
</h2>
<code>
</code>
</div>
</div>
</div>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<div class="container"> <!--- tabs -->
<div class="grid"> <h2 class="m-top-5">
<div class="col-12"> Tabs
<h2>
Media
</h2> </h2>
<figure class="figure"> <div class="content">
<img class="media" src="/image.jpg" /> <code>&#x3C;div class=&#x22;tabs&#x22;&#x3E;
<figcaption class="figure__caption"> &#x3C;a class=&#x22;tabs__item tabs__item--selected&#x22;&#x3E;
food truck yr franzen pabst Tab A
</figcaption> &#x3C;/a&#x3E;
</figure> &#x3C;a class=&#x22;tabs__item&#x22;&#x3E;
</div> Tab B
</div> &#x3C;/a&#x3E;
</div> &#x3C;a class=&#x22;tabs__item&#x22;&#x3E;
Tab C
&#x3C;/a&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="tabs">
<a class="tabs__item tabs__item--selected">
Tab A
</a>
<a class="tabs__item">
Tab B
</a>
<a class="tabs__item">
Tab C
</a>
</div>
<div class="container"> <h2 class="m-top-5">
<div class="grid"> Tabs + Bar
<div class="col-12"> </h2>
<h2>Slider</h3> <div class="content">
<code>&#x3C;div class=&#x22;bar&#x22;&#x3E;
&#x3C;div class=&#x22;tabs tabs--contrast&#x22;&#x3E;
&#x3C;a class=&#x22;tabs__item tabs__item--selected&#x22;&#x3E;
Tab A
&#x3C;/a&#x3E;
&#x3C;a class=&#x22;tabs__item&#x22;&#x3E;
Tab B
&#x3C;/a&#x3E;
&#x3C;a class=&#x22;tabs__item&#x22;&#x3E;
Tab C
&#x3C;/a&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<div class="bar">
<div class="tabs tabs--contrast">
<a class="tabs__item tabs__item--selected">
Tab A
</a>
<a class="tabs__item">
Tab B
</a>
<a class="tabs__item">
Tab C
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="slider"> <footer class="site-footer m-top-5">
<div class="slider__inner"> <div class="bar">
<div class="slider__item w-col-12"> <div class="bar__main">
<figure class="figure w-col-12"> <a class="color-text-contrast m-right-4" href="/imprint.html">
<img class="media" src="/image.jpg" /> Imprint
<figcaption class="figure__caption"> </a>
food truck yr franzen pabst <a class="color-text-contrast" href="/private-policy.html">
</figcaption> Privacy Policy
</figure> </a>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div> </div>
</div> </div>
</div> </footer>
</body> </body>
</html </html

137
public/index.html
Unescape View File

@ -27,7 +27,7 @@
<use xlink:href="symbol-defs.svg#icon-github"></use> <use xlink:href="symbol-defs.svg#icon-github"></use>
</svg> </svg>
</a> </a>
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/"> <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
Gitea Gitea
<svg class="m-left-3 icon fill-text" aria-hidden="true"> <svg class="m-left-3 icon fill-text" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-gitea"></use> <use xlink:href="symbol-defs.svg#icon-gitea"></use>
@ -68,11 +68,12 @@
<div class="panel__body"> <div class="panel__body">
<div class="content m-last-child-0"> <div class="content m-last-child-0">
<p> <p>
On development, a few styles and names will be change until release Plain UI is currently under development, Styles, Names and Documentation may change until Release!
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<p> <p>
<span class="bold">Plain UI</span> is a simple UI Framework. <span class="bold">Plain UI</span> is a simple UI Framework.
</p> </p>
@ -83,9 +84,18 @@
Contribution Contribution
</h3> </h3>
<ul> <ul>
<li><span class="bold">TailwindCSS</span> for showing new ideas and concepts to handle handle Helper-Classes</li> <li>
<li><span class="bold">Reflex Grid</span> </li> <a href="https://tailwindcss.com/" class="strong" rel="noopener" target="_blank">TailwindCSS</a> for showing new ideas and concepts to handle Helper-Classes</li>
<li><span class="bold">Reflex Grid</span> </li> </li>
<li>
<a href="https://reflexgrid.com/" class="strong" rel="noopener" target="_blank">Reflex Grid</a> for a great flex grid
</li>
<li>
<a href="https://necolas.github.io/normalize.css/" class="strong" rel="noopener" target="_blank">normalize.css</a> for resetting styles in all Browsers.
</li>
<li>
<a href="https://necolas.github.io/normalize.css/" class="strong" rel="noopener" target="_blank">normalize.css</a> for resetting styles in all Browsers.
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -113,10 +123,10 @@
</h2> </h2>
<div class="content"> <div class="content">
<p> <p>
For Buildung use Webpack or a similiar System. Plain UI is build by Laravel-Mix. Consider to use PurgeCSS, Plain UI is build by <a href="https://purgecss.com/" class="strong" rel="noopener" target="_blank">Laravel-Mix</a>.
with all Helper-Classes the CSS is really growning. PurgeCSS, with Laravel Mix it looks like this, For this Site also <a href="https://purgecss.com/" class="strong" rel="noopener" target="_blank">PurgeCSS</a> was used. This is Important
to reduce the amount of Helper-Classes. For Laravel-Mix there is also a <a href="https://github.com/spatie/laravel-mix-purgecss" class="strong" rel="noopener" target="_blank">Wrapper</a>
<a href="https://purgecss.com/" target="_blank">PurgeCSS</a> available.
</p> </p>
<code>mix <code>mix
.setPublicPath('./public') .setPublicPath('./public')
@ -139,33 +149,21 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="highlight"> <h2 class="highlight">
Variables + Themes Core
</h2> </h2>
</div>
</div>
</div>
<div class="container"> <h3 class="m-top-5">
<div class="grid">
<div class="col-12">
<h2 class="highlight">
Basic Styles
</h2>
<h3>
Normalize Normalize
</h3> </h3>
<div class="content"> <div class="content">
<p> <p>
For all elements is the same, try set a basic style without anything, no margin, no padding. The Reason is to use Components, Layout and This is mainly done by <a href="https://necolas.github.io/normalize.css/" rel="noopener" target="_blank">normalize.css</a> with a few Modification.
Helpers for the styling or make your own rules for the elements.
</p> </p>
</div> </div>
<h2> <h3 class="m-top-5">
Heading Heading
</h2> </h3>
<h1>Heading 1</h1> <h1>Heading 1</h1>
<h2>Heading 2</h2> <h2>Heading 2</h2>
<h3>Heading 3</h3> <h3>Heading 3</h3>
@ -173,19 +171,50 @@
<h5>Heading 5</h5> <h5>Heading 5</h5>
<h6>Heading 6</h6> <h6>Heading 6</h6>
<h3> <h3 class="m-top-5">
Content Content
</h3> </h3>
<div class="panel panel--border-highlight border-color-info m-bottom-4"> <div class="content m-bottom-4">
<div class="panel__body"> <code>&#x3C;div class=&#x22;content&#x22;&#x3E;
<div class="content m-last-child-0"> &#x3C;p&#x3E;
<p> Y&#x27;know this time it wasn&#x27;t my fault. The Doc set all of his clocks twenty-five minutes slow.
The Class "content" will trigger a few styles for Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on
</p> your way to the mall? whoa, this is it, this is the part coming up, Doc. I&#x27;m really gonna miss you.
</div> Doc, about the future- Thank you, don&#x27;t forget to take a flyer.
</div> &#x3C;/p&#x3E;
&#x3C;p&#x3E;
Dear Doctor Brown, on the night that I go back in time, you will be shot by terrorists. Please take
whatever precautions are necessary to prevent this terrible disaster. Your friend, Marty.
Well, safe and sound, now, n good old 1955. I&#x27;ve gotta go. Look, George, I&#x27;m telling you George,
if you do not ask Lorraine to that dance, I&#x27;m gonna regret it for the rest of my life. Hey George,
heard you laid out Biff, nice going.
&#x3C;/p&#x3E;
&#x3C;ul&#x3E;
&#x3C;li&#x3E;item 1&#x3C;/li&#x3E;
&#x3C;li&#x3E;
item 2
&#x3C;ul&#x3E;
&#x3C;li&#x3E;child item 1&#x3C;/li&#x3E;
&#x3C;li&#x3E;child item 2&#x3C;/li&#x3E;
&#x3C;/ul&#x3E;
&#x3C;/li&#x3E;
&#x3C;/ul&#x3E;
&#x3C;ol&#x3E;
&#x3C;li&#x3E;item 1&#x3C;/li&#x3E;
&#x3C;li&#x3E;item 2&#x3C;/li&#x3E;
&#x3C;/ol&#x3E;
&#x3C;dl&#x3E;
&#x3C;dt&#x3E;defined title 1&#x3C;/dt&#x3E;
&#x3C;dd&#x3E;defined item 1&#x3C;/dd&#x3E;
&#x3C;/dl&#x3E;
&#x3C;blockquote&#x3E;
I&#x27;m telling you George, if you do not ask Lorraine to that dance, I&#x27;m gonna
regret it for the rest of my life. Hey George, heard you laid out Biff, nice going.
&#x3C;/blockquote&#x3E;
&#x3C;mark&#x3E;Mark&#x3C;/mark&#x3E;
&#x3C;/div&#x3E;
</code>
</div> </div>
<div class="content"> <div class="content">
<p> <p>
Y'know this time it wasn't my fault. The Doc set all of his clocks twenty-five minutes slow. Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on your way to the mall? whoa, this is it, this is the part coming up, Doc. I'm really gonna miss you. Doc, about the future- Thank you, don't forget to take a flyer. Y'know this time it wasn't my fault. The Doc set all of his clocks twenty-five minutes slow. Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on your way to the mall? whoa, this is it, this is the part coming up, Doc. I'm really gonna miss you. Doc, about the future- Thank you, don't forget to take a flyer.
@ -194,17 +223,47 @@
Dear Doctor Brown, on the night that I go back in time, you will be shot by terrorists. Please take whatever precautions are necessary to prevent this terrible disaster. Your friend, Marty. Well, safe and sound, now, n good old 1955. I've gotta go. Look, George, I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, heard you laid out Biff, nice going. Dear Doctor Brown, on the night that I go back in time, you will be shot by terrorists. Please take whatever precautions are necessary to prevent this terrible disaster. Your friend, Marty. Well, safe and sound, now, n good old 1955. I've gotta go. Look, George, I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, heard you laid out Biff, nice going.
</p> </p>
<ul> <ul>
<li>Anyway, if Grandpa hadn't hit him</li> <li>item 1</li>
<li>Yeah, well history is gonna change</li> <li>
<li>Children</li> item 2
<ul>
<li>child item 1</li>
<li>child item 2</li>
</ul>
</li>
</ul> </ul>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
<dl>
<dt>defined title 1</dt>
<dd>defined item 1</dd>
</dl>
<blockquote> <blockquote>
I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, heard you laid out Biff, nice going. I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, heard you laid out Biff, nice going.
</blockquote> </blockquote>
<mark>Mark</mark>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<footer class="site-footer m-top-5">
<div class="bar">
<div class="bar__main">
</div>
<div class="bar__end">
<a class="color-text-contrast m-right-4" href="/imprint.html">
Imprint
</a>
<a class="color-text-contrast" href="/private-policy.html">
Privacy Policy
</a>
</div>
</div>
</footer>
</body> </body>
</html </html

54
public/layout.html
Unescape View File

@ -102,6 +102,60 @@
</div> </div>
</div> </div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Slider</h3>
</div>
</div>
</div>
<div class="slider">
<div class="slider__inner">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
</body> </body>
</html </html

1239
public/plain-ui.css
View File

File diff suppressed because it is too large Load Diff

2
public/symbol-defs.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 53 KiB

36
src/icons/checkbox-checked.svg
Unescape View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4540"
version="1.1"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24">
<metadata
id="metadata4546">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4544" />
<path
id="path4477"
d="M 1.9977928,4.8684071 C 1.9977928,3.2929385 3.277261,2.01577 4.8555663,2.01577 H 19.144434 c 1.578348,0 2.857773,1.2771685 2.857773,2.8526371 V 19.131593 c 0,1.575512 -1.279425,2.852637 -2.857773,2.852637 H 4.8555663 c -1.5783053,0 -2.8577734,-1.277125 -2.8577734,-2.852637 z M 19.989367,4.1493154 H 3.9567018 V 20.102366 H 19.989367 Z"
style="fill:#0d0d0d;stroke-width:1.42760229" />
<path
id="path5921-7"
d="m 16.664414,8.2525959 c 0.4127,0.36692 0.4499,0.99899 0.083,1.4118104 l -5.333301,6.0000007 c -0.1898,0.2135 -0.4618,0.3356 -0.7474,0.3356 -0.2857,0 -0.5577,-0.1221 -0.7474404,-0.3356 l -2.6666696,-3 c -0.36692,-0.4128 -0.32974,-1.0449 0.08305,-1.4118 0.41278,-0.3669 1.04485,-0.3297 1.41177,0.083 l 1.91929,2.1592 4.585901,-5.159161 c 0.3669,-0.41279 0.999,-0.4499701 1.4118,-0.08305 z"
style="fill:#000000" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

32
src/icons/checkbox.svg
Unescape View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4540"
version="1.1"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24">
<metadata
id="metadata4546">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4544" />
<path
id="path4477"
d="M 1.9977928,4.8684071 C 1.9977928,3.2929385 3.277261,2.01577 4.8555663,2.01577 H 19.144434 c 1.578348,0 2.857773,1.2771685 2.857773,2.8526371 V 19.131593 c 0,1.575512 -1.279425,2.852637 -2.857773,2.852637 H 4.8555663 c -1.5783053,0 -2.8577734,-1.277125 -2.8577734,-2.852637 z M 19.989367,4.1493154 H 3.9567018 V 20.102366 H 19.989367 Z"
style="fill:#0d0d0d;stroke-width:1.42760229" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -140,6 +140,52 @@ svg.field-choice__checked {
font-size: 0.8rem; font-size: 0.8rem;
} }
/**
*
*
*/
.field-switch {
position: relative;
display: inline-block;
width: 75px;
height: 35px;
border: $border;
border-radius: $border-radius;
&:after {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
content: '';
border: $border;
border-color: var(--border-contrast);
border-radius: $border-radius;
background-color: var(--active);
transition: transform 0.25s;
}
}
input[type=checkbox].field-choice {
~ .field-switch:after {
left: 0;
}
&:checked ~ .field-switch {
border-color: var(--success);
&:after {
background-color: var(--success);
transform: translateX(100%);
}
}
}
/** /**
* display error for fields * display error for fields
* *

19
src/scss/components/_group.scss
Unescape View File

@ -12,17 +12,16 @@
* *
*/ */
@mixin component__group() .group {
{ &__item {
.group { width: auto;
&__item { display: inline-block;
width: auto; margin: $margin;
display: inline-block;
margin: 0 1rem 1rem;
&:last-child { margin-right: 0.25rem;
margin-right: 0;
} &:last-child {
margin-right: 0;
} }
} }
} }

8
src/scss/components/_media.scss
Unescape View File

@ -6,6 +6,11 @@
* </figcaption> * </figcaption>
* </figure> * </figure>
* *
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
*
*/ */
.figure { .figure {
@ -25,10 +30,13 @@
line-height: $line-height; line-height: $line-height;
margin: 0; margin: 0;
color: var(--text-contrast); color: var(--text-contrast);
border-top: 1px solid var(--border-contrast);
} }
.media { .media {
border: 0; border: 0;
border-radius: 0;
} }
} }

5
src/scss/components/_panel.scss
Unescape View File

@ -1,6 +1,9 @@
/** /**
*
* *
* * @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */

16
src/scss/core/_content.scss
Unescape View File

@ -65,7 +65,8 @@
} }
mark { mark {
padding: 0.25em; padding: 0.25rem;
background-color: var(--warning);
} }
/** /**
@ -95,15 +96,18 @@
@include media-breakpoints('margin', $margin-breakpoints); @include media-breakpoints('margin', $margin-breakpoints);
} }
ol,
ul { ul {
margin-left: 1.5em; margin-left: 1.5rem;
}
ol {
margin-left: 2.5rem;
} }
ol ol, ol ol,
ul ul { ul ul {
margin-top: 0; margin-top: 0;
margin-left: 1em; margin-left: 1.5rem;
} }
ol { ol {
@ -111,11 +115,11 @@
} }
ul { ul {
list-style: disc outside; list-style: square outside;
} }
dl { dl {
margin-left: 0.5em; margin-left: 0.5rem;
} }
dd, dd,

17
src/scss/helpers/_sizing.scss
Unescape View File

@ -49,11 +49,28 @@ $sizing_steps: 50 !default;
} }
.w-0 { width: 0; } .w-0 { width: 0; }
@include sizing_breakpoints('w', 'width', '1', 0);
.h-0 { height: 0; } .h-0 { height: 0; }
@include sizing_breakpoints('h', 'height', '1', 0);
.w-1 { width: 1px;} .w-1 { width: 1px;}
@include sizing_breakpoints('w', 'width', '1', 1px);
.h-1 { height: 1px; } .h-1 { height: 1px; }
@include sizing_breakpoints('h', 'height', '1', 1px);
.w-100 { width: 100%; } .w-100 { width: 100%; }
@include sizing_breakpoints('w', 'width', '100', 100%);
.w-auto { width: auto; }
@include sizing_breakpoints('w', 'width', 'auto', auto);
.h-100 { height: 100%; } .h-100 { height: 100%; }
@include sizing_breakpoints('h', 'height', '100', 100%);
.h-auto { height: auto; }
@include sizing_breakpoints('h', 'height', 'auto', auto);
@for $i from 1 through $reflex-columns @for $i from 1 through $reflex-columns
{ {

61
src/scss/helpers/_spacing.scss
Unescape View File

@ -16,43 +16,52 @@ $spacing-direction: (
$spacing-gap: 0.25 !default; $spacing-gap: 0.25 !default;
$spacing-steps: 10 !default; $spacing-steps: 10 !default;
/** /**
* mixin: spacing for single padding or margin * mixin: spacing for single padding or margin
* *
* *
*/ */
@mixin spacing($class, $style, $direction, $name, $value)
@mixin spacing($class, $style, $name, $value, $direction: null)
{ {
.#{$class}-#{$direction}-#{$name} { @if ($direction != null) {
#{$style}-#{$direction}: $value; $class: $class + '-' + $direction;
$style: $style + '-' + $direction;
}
.#{$class}-#{$name} {
#{$style}: $value;
} }
} }
/** /**
* mixin: spacing for each breakpoint * mixin: spacing for each breakpoint
* *
* *
*/ */
@mixin spacing_breakpoints($class, $style, $direction, $i, $value)
@mixin spacing_breakpoints($class, $style, $i, $value, $direction: null)
{ {
@include media-xs() { @include media-xs() {
@include spacing($class, $style, $direction, 'xs-' + $i, $value); @include spacing($class, $style, 'xs-' + $i, $value, $direction);
} }
@include media-sm() { @include media-sm() {
@include spacing($class, $style, $direction, 'sm-' + $i, $value); @include spacing($class, $style, 'sm-' + $i, $value, $direction);
} }
@include media-md() { @include media-md() {
@include spacing($class, $style, $direction, 'md-' + $i, $value); @include spacing($class, $style, 'md-' + $i, $value, $direction);
} }
@include media-lg() { @include media-lg() {
@include spacing($class, $style, $direction, 'lg-' + $i, $value); @include spacing($class, $style, 'lg-' + $i, $value, $direction);
} }
@include media-xlg() { @include media-xlg() {
@include spacing($class, $style, $direction, 'xlg-' + $i, $value); @include spacing($class, $style, 'xlg-' + $i, $value, $direction);
} }
} }
@ -89,26 +98,44 @@ $spacing-steps: 10 !default;
} }
} }
@include spacing('m', 'margin', 0, 0);
@include spacing('m', 'margin', 1, 1px);
@for $i from 2 through $spacing-steps {
$value: $spacing-gap * factor($i - 1) * 1rem;
@include spacing('m', 'margin', $i, $value);
@include spacing_breakpoints('m', 'margin', $i, $value);
}
@each $direction in $spacing-direction @each $direction in $spacing-direction
{ {
@include spacing('m', 'margin', $direction, 0, 0); @include spacing('m', 'margin', 0, 0, $direction);
@include spacing('m', 'margin', $direction, 1, 1px); @include spacing('m', 'margin', 1, 1px, $direction);
@for $i from 2 through $spacing-steps { @for $i from 2 through $spacing-steps {
$value: $spacing-gap * factor($i - 1) * 1rem; $value: $spacing-gap * factor($i - 1) * 1rem;
@include spacing('m', 'margin', $direction, $i, $value); @include spacing('m', 'margin', $i, $value, $direction);
@include spacing_breakpoints('m', 'margin', $direction, $i, $value); @include spacing_breakpoints('m', 'margin', $i, $value, $direction);
} }
} }
@include spacing('p', 'padding', 0, 0);
@include spacing('p', 'padding', 1, 1px);
@for $i from 0 through $spacing-steps {
$value: $spacing-gap * factor($i - 1) * 1rem;
@include spacing('p', 'padding', $i, $value);
@include spacing_breakpoints('p', 'padding', $i, $value);
}
@each $direction in $spacing-direction @each $direction in $spacing-direction
{ {
@include spacing('p', 'padding', $direction, 0, 0); @include spacing('p', 'padding', 0, 0, $direction);
@include spacing('p', 'padding', $direction, 1, 1px); @include spacing('p', 'padding', 1, 1px, $direction);
@for $i from 0 through $spacing-steps { @for $i from 0 through $spacing-steps {
$value: $spacing-gap * factor($i - 1) * 1rem; $value: $spacing-gap * factor($i - 1) * 1rem;
@include spacing('p', 'padding', $direction, $i, $value); @include spacing('p', 'padding', $i, $value, $direction);
@include spacing_breakpoints('p', 'padding', $direction, $i, $value); @include spacing_breakpoints('p', 'padding', $i, $value, $direction);
} }
} }

0
src/scss/components/_slider.scss → src/scss/layouts/_slider.scss
Unescape View File

3
src/scss/plain-ui.scss
Unescape View File

@ -14,6 +14,7 @@
'components/badge', 'components/badge',
'components/button', 'components/button',
'components/field', 'components/field',
'components/group',
'components/icon', 'components/icon',
'components/hero', 'components/hero',
'components/tabs', 'components/tabs',
@ -21,12 +22,12 @@
'components/progress', 'components/progress',
'components/media', 'components/media',
'components/table', 'components/table',
'components/slider',
'components/bar', 'components/bar',
'components/modal', 'components/modal',
'components/loading', 'components/loading',
'layouts/masonry', 'layouts/masonry',
'layouts/slider',
'layouts/flex', 'layouts/flex',
'helpers/core', 'helpers/core',

Write Preview
Loading…
Cancel
Save