mirror of https://github.com/moparisthebest/mail
Add styleguide for basic components
This commit is contained in:
parent
8807830122
commit
dca2f4ead9
|
@ -6,7 +6,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: $font-size-bigger;
|
font-size: $font-size-bigger;
|
||||||
color: $color-main;
|
color: $color-main;
|
||||||
margin: 0 0 20px;
|
margin: 0;
|
||||||
|
|
||||||
@include respond-to(md) {
|
@include respond-to(md) {
|
||||||
font-size: $font-size-huge;
|
font-size: $font-size-huge;
|
||||||
|
|
|
@ -1,5 +1,28 @@
|
||||||
---
|
---
|
||||||
title: Styleguide
|
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">
|
<section class="sg-section">
|
||||||
|
@ -24,3 +47,20 @@ title: Styleguide
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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">{{@title}}</h3>
|
||||||
|
<p class="typo-paragraph">{{{@description}}}</p>
|
||||||
|
</div>
|
||||||
|
<div class="sg-block__example">
|
||||||
|
{{{@content}}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{/compose}}
|
||||||
|
</section>
|
||||||
|
{{/each}}
|
||||||
|
|
|
@ -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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
title: Icon button
|
||||||
|
description:
|
||||||
|
---
|
||||||
|
|
||||||
|
<button class="btn-icon">
|
||||||
|
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
|
||||||
|
</button>
|
|
@ -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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
title: File input
|
||||||
|
description: >
|
||||||
|
Custom styled file input.
|
||||||
|
<strong>Attention:</strong> Webkit support only!
|
||||||
|
---
|
||||||
|
|
||||||
|
<input class="input-file" type="file">
|
|
@ -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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
title: Spinner
|
||||||
|
description: Animated spinner with CSS only.
|
||||||
|
---
|
||||||
|
|
||||||
|
<span class="spinner"></span>
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Big spinner
|
||||||
|
description:
|
||||||
|
---
|
||||||
|
|
||||||
|
<span class="spinner spinner--big"></span>
|
|
@ -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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
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 @@
|
||||||
|
---
|
||||||
|
title: Code
|
||||||
|
description: Inline code style.
|
||||||
|
---
|
||||||
|
|
||||||
|
<code class="typo-code">1234-1234-1234-1234</code>
|
|
@ -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>
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Title
|
||||||
|
description: Use as main page title.
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="typo-title">Title</h1>
|
Loading…
Reference in New Issue