moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-12-21 23:08:50 -05:00
Code Issues Releases Wiki Activity

Add styleguide for basic components

Browse Source
This commit is contained in:
Mario Volke 2015-01-24 13:52:29 +01:00 committed by Tankred Hase
parent 8807830122
commit dca2f4ead9
38 changed files with 534 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/sass/styleguide/_typo.scss
View File

@ -6,7 +6,7 @@
text-align: center;
font-size: $font-size-bigger;
color: $color-main;
margin: 0 0 20px;
margin: 0;
@include respond-to(md) {
font-size: $font-size-huge;

10
src/styleguide/helpers/strip-file-extension.js
View File

@ -2,10 +2,10 @@
module.exports.register = function(Handlebars) {
// Customize this helper
Handlebars.registerHelper('stripFileExtension', function(str) {
var content = str.replace(/\.[^\.]*$/, '');
return new Handlebars.SafeString(content);
});
// Customize this helper
Handlebars.registerHelper('stripFileExtension', function(str) {
var content = str.replace(/\.[^\.]*$/, '');
return new Handlebars.SafeString(content);
});
};

74
src/styleguide/index.hbs
View File

@ -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">&lt;use&gt;</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">&lt;use&gt;</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}}

60
src/styleguide/layouts/default.hbs
View File

@ -6,42 +6,42 @@ currentDate: <%= new Date() %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }} | Whiteout Mail</title>
<meta charset="utf-8">
<title>{{ title }} | Whiteout Mail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" media="all" href="{{assets}}/css/all.min.css" type="text/css">
<link rel="stylesheet" media="all" href="{{assets}}/styleguide/css/styleguide.min.css" type="text/css">
<link rel="stylesheet" media="all" href="{{assets}}/css/all.min.css" type="text/css">
<link rel="stylesheet" media="all" href="{{assets}}/styleguide/css/styleguide.min.css" type="text/css">
</head>
<body>
<!-- inline icons have to come first, hide immediately with inline styles -->
<div style="width: 0; height: 0; visibility: hidden;">
{{glob "src/img/icons/all.svg"}}
</div>
<!-- inline icons have to come first, hide immediately with inline styles -->
<div style="width: 0; height: 0; visibility: hidden;">
{{glob "src/img/icons/all.svg"}}
</div>
<div class="sg-layout">
<header class="sg-layout__header">
<img src="{{assets}}/img/whiteout_logo.svg" alt="whiteout.io">
<h1 class="sg-typo-title">{{ title }}</h1>
</header>
<main class="sg-layout__main">
{{> body}}
</main>
<footer class="sg-layout__footer">
<nav>
<ul>
<li><a href="https://whiteout.io/imprint.html" target="_blank">Imprint</a></li>
<li><a href="https://whiteout.io/privacy-service.html" target="_blank">Privacy</a></li>
<li><a href="https://whiteout.io/terms.html" target="_blank">Terms</a></li>
<li><a href="https://github.com/whiteout-io/mail-html5/blob/master/README.md#license" target="_blank">License</a></li>
<li>Version: {{manifest.version}}</li>
</ul>
</nav>
&copy; {{formatDate currentDate "%Y"}} Whiteout Networks GmbH
</footer>
</div>
<div class="sg-layout">
<header class="sg-layout__header">
<img src="{{assets}}/img/whiteout_logo.svg" alt="whiteout.io">
<h1 class="sg-typo-title">{{ title }}</h1>
</header>
<main class="sg-layout__main">
{{> body}}
</main>
<footer class="sg-layout__footer">
<nav>
<ul>
<li><a href="https://whiteout.io/imprint.html" target="_blank">Imprint</a></li>
<li><a href="https://whiteout.io/privacy-service.html" target="_blank">Privacy</a></li>
<li><a href="https://whiteout.io/terms.html" target="_blank">Terms</a></li>
<li><a href="https://github.com/whiteout-io/mail-html5/blob/master/README.md#license" target="_blank">License</a></li>
<li>Version: {{manifest.version}}</li>
</ul>
</nav>
&copy; {{formatDate currentDate "%Y"}} Whiteout Networks GmbH
</footer>
</div>
</body>
</html>

21
src/styleguide/sections/attachments.hbs Normal file
View File

@ -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>

16
src/styleguide/sections/buttons/btn.hbs Normal file
View File

@ -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>

9
src/styleguide/sections/buttons/btn_big.hbs Normal file
View File

@ -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>

8
src/styleguide/sections/buttons/btn_icon.hbs Normal file
View File

@ -0,0 +1,8 @@
---
title: Icon button
description:
---
<button class="btn-icon">
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
</button>

8
src/styleguide/sections/buttons/btn_icon_light.hbs Normal file
View File

@ -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>

8
src/styleguide/sections/buttons/btn_icon_very_light.hbs Normal file
View File

@ -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>

10
src/styleguide/sections/buttons/btn_invalid.hbs Normal file
View File

@ -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>

9
src/styleguide/sections/buttons/btn_light.hbs Normal file
View File

@ -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>

10
src/styleguide/sections/buttons/btn_light_dropdown.hbs Normal file
View File

@ -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>

9
src/styleguide/sections/buttons/btn_navicon.hbs Normal file
View File

@ -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>

10
src/styleguide/sections/buttons/btn_secondary.hbs Normal file
View File

@ -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>

10
src/styleguide/sections/dropdown.hbs Normal file
View File

@ -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>

14
src/styleguide/sections/form/checkbox.hbs Normal file
View File

@ -0,0 +1,14 @@
---
title: Checkbox
description: >
Works only in combination with JavaScript or a clickable <code class="sg-typo-code">&lt;label&gt;</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>

43
src/styleguide/sections/form/form.hbs Normal file
View File

@ -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>

15
src/styleguide/sections/form/form_fieldset.hbs Normal file
View File

@ -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>

10
src/styleguide/sections/form/form_input_with_button.hbs Normal file
View File

@ -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>

13
src/styleguide/sections/form/input_checkbox.hbs Normal file
View File

@ -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>

9
src/styleguide/sections/form/input_email_fixed_domain.hbs Normal file
View File

@ -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>

8
src/styleguide/sections/form/input_file.hbs Normal file
View File

@ -0,0 +1,8 @@
---
title: File input
description: >
Custom styled file input.
<strong>Attention:</strong> Webkit support only!
---
<input class="input-file" type="file">

14
src/styleguide/sections/form/input_select.hbs Normal file
View 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>

11
src/styleguide/sections/form/input_text.hbs Normal file
View File

@ -0,0 +1,11 @@
---
title: Text input
description: >
Regular text input.
---
<input class="input-text" type="text" placeholder="Text input">
&nbsp;
<input class="input-text input-text--big" type="text" placeholder="Big text input">
&nbsp;
<input class="input-text input-text--error" type="text" placeholder="Invalid text input">

15
src/styleguide/sections/form/search.hbs Normal file
View File

@ -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>
&nbsp;
<div class="search search--light">
<svg><use xlink:href="#icon-search" /><title>Search</title></svg>
<input class="input-text" type="text" placeholder="Search">
</div>

21
src/styleguide/sections/labels.hbs Normal file
View File

@ -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>

21
src/styleguide/sections/mail_addresses.hbs Normal file
View File

@ -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>

6
src/styleguide/sections/spinner/spinner.hbs Normal file
View File

@ -0,0 +1,6 @@
---
title: Spinner
description: Animated spinner with CSS only.
---
<span class="spinner"></span>

6
src/styleguide/sections/spinner/spinner_big.hbs Normal file
View File

@ -0,0 +1,6 @@
---
title: Big spinner
description:
---
<span class="spinner spinner--big"></span>

8
src/styleguide/sections/spinner/spinner_block.hbs Normal file
View File

@ -0,0 +1,8 @@
---
title: Spinner block
description: Full width spinner block with additional margin.
---
<div class="spinner-block">
<span class="spinner"></span>
</div>

22
src/styleguide/sections/tags_input.hbs Normal file
View File

@ -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>

24
src/styleguide/sections/toolbars/toolbar_actions.hbs Normal file
View File

@ -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>

11
src/styleguide/sections/toolbars/toolbar_label.hbs Normal file
View File

@ -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>

16
src/styleguide/sections/tooltip.hbs Normal file
View File

@ -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>
&nbsp;
<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>

6
src/styleguide/sections/typo/typo_code.hbs Normal file
View File

@ -0,0 +1,6 @@
---
title: Code
description: Inline code style.
---
<code class="typo-code">1234-1234-1234-1234</code>

14
src/styleguide/sections/typo/typo_paragraph.hbs Normal file
View File

@ -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>

6
src/styleguide/sections/typo/typo_title.hbs Normal file
View File

@ -0,0 +1,6 @@
---
title: Title
description: Use as main page title.
---
<h1 class="typo-title">Title</h1>