mirror of https://github.com/moparisthebest/mail
Mario Volke
8 years ago
committed by
Tankred Hase
38 changed files with 534 additions and 53 deletions
@ -1,26 +1,66 @@
@@ -1,26 +1,66 @@
|
||||
--- |
||||
title: Styleguide |
||||
sections: |
||||
- title: Typography |
||||
src: src/styleguide/sections/typo/*.hbs |
||||
- title: Buttons |
||||
src: src/styleguide/sections/buttons/*.hbs |
||||
- title: Forms |
||||
src: src/styleguide/sections/form/*.hbs |
||||
- title: Labels |
||||
src: src/styleguide/sections/labels.hbs |
||||
- title: Spinners |
||||
src: src/styleguide/sections/spinner/*.hbs |
||||
- title: Attachments |
||||
src: src/styleguide/sections/attachments.hbs |
||||
- title: Dropdowns |
||||
src: src/styleguide/sections/dropdown.hbs |
||||
- title: Tooltips |
||||
src: src/styleguide/sections/Tooltip.hbs |
||||
- title: Mail addresses |
||||
src: src/styleguide/sections/mail_addresses.hbs |
||||
- title: Tags input |
||||
src: src/styleguide/sections/tags_input.hbs |
||||
- title: Toolbars |
||||
src: src/styleguide/sections/toolbars/*.hbs |
||||
--- |
||||
|
||||
<section class="sg-section"> |
||||
<h2 class="sg-typo-section-title">Icons</h2> |
||||
<div class="sg-block"> |
||||
<h2 class="sg-typo-section-title">Icons</h2> |
||||
<div class="sg-block"> |
||||
<div class="sg-block__description"> |
||||
<h3 class="sg-typo-description-title">Available icons</h3> |
||||
<p class="typo-paragraph"> |
||||
All icons are available via inline svg and the <code class="sg-typo-code">xlink:href</code> |
||||
attribute of the <code class="sg-typo-code"><use></code> tag. |
||||
</p> |
||||
</div> |
||||
<div class="sg-block__example"> |
||||
<ul class="sg-icon-list"> |
||||
{{#compose src="src/img/icons/[!all]*.svg"}} |
||||
<li> |
||||
<svg role="presentation"><use xlink:href="#icon-{{stripFileExtension @filename}}" /></svg> |
||||
{{@filename}} |
||||
</li> |
||||
{{/compose}} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
{{#each sections}} |
||||
<section class="sg-section"> |
||||
<h2 class="sg-typo-section-title">{{title}}</h2> |
||||
{{#compose src=src}} |
||||
<div class="sg-block"> |
||||
<div class="sg-block__description"> |
||||
<h3 class="sg-typo-description-title">Available icons</h3> |
||||
<p class="typo-paragraph"> |
||||
All icons are available via inline svg and the <code class="sg-typo-code">xlink:href</code> |
||||
attribute of the <code class="sg-typo-code"><use></code> tag. |
||||
</p> |
||||
<h3 class="sg-typo-description-title">{{@title}}</h3> |
||||
<p class="typo-paragraph">{{{@description}}}</p> |
||||
</div> |
||||
<div class="sg-block__example"> |
||||
<ul class="sg-icon-list"> |
||||
{{#compose src="src/img/icons/[!all]*.svg"}} |
||||
<li> |
||||
<svg role="presentation"><use xlink:href="#icon-{{stripFileExtension @filename}}" /></svg> |
||||
{{@filename}} |
||||
</li> |
||||
{{/compose}} |
||||
</ul> |
||||
{{{@content}}} |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
{{/compose}} |
||||
</section> |
||||
{{/each}} |
||||
|
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
--- |
||||
title: List of attachments |
||||
description: List of attached files with optional delete button. |
||||
--- |
||||
|
||||
<ul class="attachments"> |
||||
<li> |
||||
<svg><use xlink:href="#icon-attachment" /></svg> |
||||
file1.txt |
||||
<button class="attachments__delete"> |
||||
<svg><use xlink:href="#icon-close_circle" /><title>Delete</title></svg> |
||||
</button> |
||||
</li> |
||||
<li> |
||||
<svg><use xlink:href="#icon-attachment" /></svg> |
||||
file1.txt |
||||
<button class="attachments__delete"> |
||||
<svg><use xlink:href="#icon-close_circle" /><title>Delete</title></svg> |
||||
</button> |
||||
</li> |
||||
</ul> |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
--- |
||||
title: Regular button |
||||
description: > |
||||
There are various button types. All button types support to be disabled |
||||
via attribute <code class="sg-typo-code">disabled</code> or |
||||
<code class="sg-typo-code">aria-disabled="true"</code>. |
||||
--- |
||||
|
||||
<button class="btn"> |
||||
<svg><use xlink:href="#icon-close" /><title>Delete</title></svg> |
||||
Regular |
||||
</button> |
||||
<button class="btn" disabled> |
||||
<svg><use xlink:href="#icon-close" /><title>Delete</title></svg> |
||||
Disabled regular |
||||
</button> |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
--- |
||||
title: Big button |
||||
description: |
||||
--- |
||||
|
||||
<button class="btn btn--big"> |
||||
<svg><use xlink:href="#icon-close" /><title>Delete</title></svg> |
||||
Big |
||||
</button> |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
--- |
||||
title: Icon button |
||||
description: |
||||
--- |
||||
|
||||
<button class="btn-icon"> |
||||
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg> |
||||
</button> |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
--- |
||||
title: Light icon button |
||||
description: |
||||
--- |
||||
|
||||
<button class="btn-icon-light"> |
||||
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg> |
||||
</button> |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
--- |
||||
title: Very light icon button |
||||
description: |
||||
--- |
||||
|
||||
<button class="btn-icon-very-light"> |
||||
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg> |
||||
</button> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
--- |
||||
title: Invalid button |
||||
description: > |
||||
Use to show invalid state of a form. |
||||
--- |
||||
|
||||
<button class="btn btn--invalid"> |
||||
<svg><use xlink:href="#icon-close" /><title>Delete</title></svg> |
||||
Invalid |
||||
</button> |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
--- |
||||
title: Light button |
||||
description: |
||||
--- |
||||
|
||||
<button class="btn btn--light"> |
||||
<svg><use xlink:href="#icon-close" /><title>Delete</title></svg> |
||||
Light |
||||
</button> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
--- |
||||
title: Light dropbown button |
||||
description: > |
||||
Use in combination with JavaScript and <code class="sg-typo-code">.dropdown</code>. |
||||
--- |
||||
|
||||
<button class="btn btn--light-dropdown"> |
||||
Dropdown |
||||
<svg class="btn__dropdown" role="presentation"><use xlink:href="#icon-dropdown" /></svg> |
||||
</button> |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
--- |
||||
title: Navicon button |
||||
description: > |
||||
Main menu button |
||||
--- |
||||
|
||||
<button class="btn-navicon"> |
||||
<svg><use xlink:href="#icon-navicon" /><title>Toggle Navigation</title></svg> |
||||
</button> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
--- |
||||
title: Secondary button |
||||
description: > |
||||
Use in conjuction with another primary regular button. |
||||
--- |
||||
|
||||
<button class="btn btn--secondary"> |
||||
<svg><use xlink:href="#icon-close" /><title>Delete</title></svg> |
||||
Secondary |
||||
</button> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
--- |
||||
title: Dropdown |
||||
description: > |
||||
The dropdown list is positioned absolutely within the application via JavaScript. |
||||
--- |
||||
|
||||
<ul class="dropdown dropdown--show" style="position: static;"> |
||||
<li><button><svg><use xlink:href="#icon-reply_light" /></svg> Reply</button></li> |
||||
<li><button><svg><use xlink:href="#icon-reply_all_light" /></svg> Reply All</button></li> |
||||
</ul> |
||||
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
--- |
||||
title: Checkbox |
||||
description: > |
||||
Works only in combination with JavaScript or a clickable <code class="sg-typo-code"><label></code>. |
||||
--- |
||||
|
||||
<span class="checkbox"> |
||||
<input type="checkbox"> |
||||
<span><svg role="presentation"><use xlink:href="#icon-check" /></svg></span> |
||||
</span> |
||||
<span class="checkbox"> |
||||
<input type="checkbox" checked> |
||||
<span><svg role="presentation"><use xlink:href="#icon-check" /></svg></span> |
||||
</span> |
||||
@ -0,0 +1,43 @@
@@ -0,0 +1,43 @@
|
||||
--- |
||||
title: Form layout |
||||
description: > |
||||
Basic form layout with multicolumn support. |
||||
--- |
||||
|
||||
<form class="form"> |
||||
<p class="form__error-message">Error message</p> |
||||
<p class="form__password-strong-message">Password strong message</p> |
||||
<div class="form__row"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
<div class="form__row form__row--multi"> |
||||
<div class="form__col"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
<div class="form__col"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
</div> |
||||
<div class="form__row form__row--multi"> |
||||
<div class="form__col form__col--2"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
<div class="form__col"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
</div> |
||||
<div class="form__row form__row--multi"> |
||||
<div class="form__col"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
<div class="form__col form__col--2"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
</div> |
||||
<div class="spinner-block"> |
||||
<span class="spinner spinner--big"></span> |
||||
</div> |
||||
<div class="form__row"> |
||||
<button class="btn" type="submit">Submit</button> |
||||
</div> |
||||
</form> |
||||
@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
|
||||
--- |
||||
title: Form fieldset |
||||
description: > |
||||
Use to group form inputs. |
||||
--- |
||||
|
||||
<fieldset class="form-fieldset"> |
||||
<legend>Legend</legend> |
||||
<div class="form__row"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
<div class="form__row"> |
||||
<input class="input-text" type="text"> |
||||
</div> |
||||
</fieldset> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
--- |
||||
title: Form input with button |
||||
description: > |
||||
Use to group form inputs. |
||||
--- |
||||
|
||||
<div class="form-input-with-button"> |
||||
<input class="input-text" type="text"> |
||||
<button class="btn">Button</button> |
||||
</div> |
||||
@ -0,0 +1,13 @@
@@ -0,0 +1,13 @@
|
||||
--- |
||||
title: Checkbox input |
||||
description: > |
||||
Custom checkbox input constists of custom checkbox plus label. |
||||
--- |
||||
|
||||
<label class="input-checkbox"> |
||||
<span class="checkbox"> |
||||
<input type="checkbox"> |
||||
<span><svg role="presentation"><use xlink:href="#icon-check" /></svg></span> |
||||
</span> |
||||
Label |
||||
</label> |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
--- |
||||
title: Email input with fixed domain |
||||
description: |
||||
--- |
||||
|
||||
<div class="input-email-fixed-domain"> |
||||
<input class="input-text" type="text"> |
||||
<span>@wmail.io</span> |
||||
</div> |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
--- |
||||
title: File input |
||||
description: > |
||||
Custom styled file input. |
||||
<strong>Attention:</strong> Webkit support only! |
||||
--- |
||||
|
||||
<input class="input-file" type="file"> |
||||
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
--- |
||||
title: Select input |
||||
description: > |
||||
Custom styled select input. |
||||
<strong>Attention:</strong> Webkit support only! |
||||
--- |
||||
|
||||
<label class="input-select"> |
||||
<select> |
||||
<option>Option 1</option> |
||||
<option>Option 2</option> |
||||
<option>Option 3</option> |
||||
</select> |
||||
</label> |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
--- |
||||
title: Text input |
||||
description: > |
||||
Regular text input. |
||||
--- |
||||
|
||||
<input class="input-text" type="text" placeholder="Text input"> |
||||
|
||||
<input class="input-text input-text--big" type="text" placeholder="Big text input"> |
||||
|
||||
<input class="input-text input-text--error" type="text" placeholder="Invalid text input"> |
||||
@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
|
||||
--- |
||||
title: Search bar |
||||
description: > |
||||
There a regular and a light search bar. |
||||
--- |
||||
|
||||
<div class="search"> |
||||
<svg><use xlink:href="#icon-search" /><title>Search</title></svg> |
||||
<input class="input-text" type="text" placeholder="Search"> |
||||
</div> |
||||
|
||||
<div class="search search--light"> |
||||
<svg><use xlink:href="#icon-search" /><title>Search</title></svg> |
||||
<input class="input-text" type="text" placeholder="Search"> |
||||
</div> |
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
--- |
||||
title: Labels |
||||
description: There are various types of labels. |
||||
--- |
||||
|
||||
<span class="label"> |
||||
Regular |
||||
<svg><use xlink:href="#icon-add_contact" /></svg> |
||||
</span> |
||||
<span class="label label--invalid"> |
||||
Invalid |
||||
<svg><use xlink:href="#icon-add_contact" /></svg> |
||||
</span> |
||||
<span class="label label--invalid label--invalid-clickable"> |
||||
Clickable invalid |
||||
<svg><use xlink:href="#icon-add_contact" /></svg> |
||||
</span> |
||||
<span class="label label--blank"> |
||||
Blank |
||||
<svg><use xlink:href="#icon-add_contact" /></svg> |
||||
</span> |
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
--- |
||||
title: List of mail addresses |
||||
description: |
||||
--- |
||||
|
||||
<div class="mail-addresses"> |
||||
<div class="mail-addresses__more"> |
||||
<button>Button1</button> |
||||
<button>Button2</button> |
||||
</div> |
||||
<label>Label:</label> |
||||
<span class="label"> |
||||
mail@example.com |
||||
<svg><use xlink:href="#icon-add_contact" /></svg> |
||||
</span> |
||||
<span class="label"> |
||||
mail@example.com |
||||
<svg><use xlink:href="#icon-add_contact" /></svg> |
||||
</span> |
||||
<span class="mail-addresses__stripped"></span> |
||||
</div> |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
--- |
||||
title: Spinner |
||||
description: Animated spinner with CSS only. |
||||
--- |
||||
|
||||
<span class="spinner"></span> |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
--- |
||||
title: Big spinner |
||||
description: |
||||
--- |
||||
|
||||
<span class="spinner spinner--big"></span> |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
--- |
||||
title: Spinner block |
||||
description: Full width spinner block with additional margin. |
||||
--- |
||||
|
||||
<div class="spinner-block"> |
||||
<span class="spinner"></span> |
||||
</div> |
||||
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
--- |
||||
title: Tags input |
||||
description: Markup is generated via Angular directive ngTagsInput. |
||||
--- |
||||
|
||||
<div class="tags-input"> |
||||
<div class="host"> |
||||
<div class="tags"> |
||||
<ul class="tag-list"> |
||||
<li class="tag-item label"> |
||||
mail@example.com |
||||
<a class="remove-button">×</a> |
||||
</li> |
||||
<li class="tag-item label label--invalid"> |
||||
mail@example.com |
||||
<a class="remove-button">×</a> |
||||
</li> |
||||
</ul> |
||||
<input class="input" type="email" placeholder="add recipient" style="width: 163px;"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,24 @@
@@ -0,0 +1,24 @@
|
||||
--- |
||||
title: Toolbar with actions |
||||
description: List of buttons. |
||||
--- |
||||
|
||||
<div class="toolbar"> |
||||
<ul class="toolbar__actions"> |
||||
<li> |
||||
<button class="btn-icon-light"> |
||||
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg> |
||||
</button> |
||||
</li> |
||||
<li> |
||||
<button class="btn-icon-light"> |
||||
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg> |
||||
</button> |
||||
</li> |
||||
<li> |
||||
<button class="btn-icon-light"> |
||||
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg> |
||||
</button> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
--- |
||||
title: Toolbar with label |
||||
description: Use as headline with integrated back button. |
||||
--- |
||||
|
||||
<div class="toolbar"> |
||||
<a class="toolbar__label" href="#"> |
||||
<svg><use xlink:href="#icon-back" /><title>Back</title></svg> |
||||
Label |
||||
</a> |
||||
</div> |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
--- |
||||
title: Tooltip |
||||
description: > |
||||
The tooltip is positioned absolutely within the application via JavaScript. |
||||
--- |
||||
|
||||
<div class="tooltip tooltip--show" style="position: static;"> |
||||
<div class="tooltip__arrow"></div> |
||||
<div class="tooltip__content">Content</div> |
||||
</div> |
||||
|
||||
<div class="tooltip tooltip--show" style="position: static;"> |
||||
<div class="tooltip__arrow"></div> |
||||
<h5 class="tooltip__title">Optional title</h5> |
||||
<div class="tooltip__content">Multi-line<br>Content</div> |
||||
</div> |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
--- |
||||
title: Code |
||||
description: Inline code style. |
||||
--- |
||||
|
||||
<code class="typo-code">1234-1234-1234-1234</code> |
||||
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
--- |
||||
title: Paragraph |
||||
description: > |
||||
Paragraph with margin bottom and additional styles for |
||||
<code class="sg-typo-code">strong</code>, <code class="sg-typo-code">em</code>, |
||||
and <code class="sg-typo-code">a</code>. |
||||
--- |
||||
|
||||
<p class="typo-paragraph"> |
||||
Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit. |
||||
<em>Accusamus possimus</em> officiis quia perferendis quo assumenda, |
||||
recusandae repellat? Iusto vero, temporibus debitis eveniet |
||||
qui libero excepturi, <a href="#">architecto laborum</a> assumenda, modi aperiam. |
||||
</p> |
||||
Loading…
Reference in new issue