moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-29 04:12:18 -05:00
Code Issues Releases Wiki Activity

initial import of styleguide

Browse Source
This commit is contained in:
Tankred Hase 2013-09-16 19:46:04 +02:00
parent ac7329fcfa
commit 23152c1c23
33 changed files with 1700 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ npm-debug.log
test/new-unit/lib/
.sass-cache
src/css/style.css
dist/

86
Gruntfile.js
View File

@ -65,6 +65,81 @@ module.exports = function(grunt) {
run: false
}
}
},
clean: {
dist: ['dist']
},
sass: {
dist: {
files: {
'dist/css/all.css': 'src/sass/all.scss'
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 versions']
},
dist: {
files: {
'dist/css/all.css': 'dist/css/all.css'
}
}
},
csso: {
options: {
banner: '<%= banner %>'
},
dist: {
files: {
'dist/css/all.min.css': 'dist/css/all.css'
}
}
},
watch: {
css: {
files: ['src/sass/**/*.scss'],
tasks: ['dist-css']
}
},
copy: {
font: {
expand: true,
flatten: true,
src: ['src/font/*'],
dest: 'dist/font/'
},
img: {
expand: true,
flatten: true,
src: ['src/img/*'],
dest: 'dist/img/'
},
js: {
expand: true,
flatten: true,
src: ['src/js/*'],
dest: 'dist/js/'
},
tpl: {
expand: true,
flatten: true,
src: ['src/tpl/*'],
dest: 'dist/tpl/'
},
lib: {
expand: true,
flatten: true,
src: ['src/lib/*'],
dest: 'dist/lib/'
},
app: {
expand: true,
flatten: true,
src: ['src/*.html', 'src/*.js', 'src/manifest.json'],
dest: 'dist/'
}
}
});
@ -73,10 +148,21 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-mocha');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-csso');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
// Default task(s).
grunt.registerTask('dev', ['connect:dev']);
grunt.registerTask('test', ['jshint', 'connect:test', 'mocha', 'qunit']);
grunt.registerTask('prod', ['connect:prod']);
grunt.registerTask('dist-css', ['sass', 'autoprefixer', 'csso']);
grunt.registerTask('dist-font', ['copy']);
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-font']);
grunt.registerTask('default', ['dist']);
};

10
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mail-html5",
"version": "0.0.1",
"version": "0.1.0-dev",
"engines": {
"node": ">=0.8"
},
@ -23,6 +23,12 @@
"grunt-contrib-connect": "0.5.0",
"grunt-contrib-jshint": "0.6.4",
"grunt-contrib-qunit": "0.2.2",
"grunt-mocha": "0.4.1"
"grunt-mocha": "0.4.1",
"grunt-contrib-clean": "0.5.0",
"grunt-csso": "0.5.0",
"grunt-contrib-sass": "0.5.0",
"grunt-autoprefixer": "0.3.0",
"grunt-contrib-watch": "0.5.3",
"grunt-contrib-copy": "0.4.1"
}
}

2
src/css/style.scss
View File

@ -16,7 +16,7 @@ $lightgrey-box-shadow-color: #D8D8D8;
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url('pt-sans.ttf') format('truetype');
src: local('PT Sans'), local('PTSans-Regular'), url('../font/pt-sans.ttf') format('truetype');
}
@import "icon-font";

116
src/desktop.html Executable file
View File

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Whiteout Mail Client Desktop Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="all" href="css/all.css" type="text/css">
</head>
<body>
<div class="nav-container nav-effect">
<!-- main navigation -->
<nav class="nav-menu nav-effect">
<div class="content">
<header>
<h1>WHITEOUT.IO</h1>
</header>
<ul class="nav-primary">
<li>
<a href="#">
Inbox
<span class="label-wrapper"><span class="label label-light">1000+</span></span>
</a>
</li>
<li>
<a href="#">Sent</a>
</li>
<li>
<a href="#">Outbox</a>
</li>
<li>
<a href="#">
Drafts
<span class="label-wrapper"><span class="label label-light">2</span></span>
</a>
</li>
<li>
<a href="#">
Trash
<span class="label-wrapper"><span class="label label-light">100</span></span>
</a>
</li>
</ul>
<ul class="nav-secondary">
<li><a href="#">Account</a></li>
<li><a href="#">About whiteout.io</a></li>
<li><a href="#">Help</a></li>
</ul>
<footer>
Last update: 12:22 PM
</footer>
</div>
</nav>
<!-- content wrapper pushed right -->
<div class="nav-pusher">
<section class="content main-content">
<!-- left column: containing list view and navigation header -->
<div class="column view-mail-list">
<!-- nav controll and section headline -->
<header data-icon="&#xe004;">
<h2>Inbox</h2>
</header>
<div class="">
</div>
</div>
<div class="column">
</div>
</section>
</div>
</div>
<!-- lightbox -->
<div class="lightbox-overlay">
<div class="lightbox lightbox-effect">
<div class="lightbox-body">
<header>
<!-- add lightbox title -->
<h2>New email</h2>
<button class="close" data-action="lightbox-close">&#xe007;</button>
</header>
<div class="content">
<!-- add lightbox content here -->
some content
</div>
</div>
</div>
</div>
<!-- /lightbox -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
// just for demo purposes
$(function() {
$('.view-mail-list header').click(function(e) {
e.preventDefault();
e.stopPropagation();
$('.nav-container').addClass('nav-menu-open');
});
$('.nav-pusher').click(function(e) {
e.preventDefault();
$('.nav-container').removeClass('nav-menu-open');
});
});
</script>
</body>
</html>

BIN
src/font/icons.eot Executable file
View File

Binary file not shown.

40
src/font/icons.svg Executable file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG font generated by IcoMoon.
<iconset grid="16"></iconset>
</metadata>
<defs>
<font id="icomoon" horiz-adv-x="512" >
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
<glyph unicode="&#xe000;" d="M 256,480C 114.977,480,0,365.023,0,224s 114.977-256, 256-256c 141.023,0, 256,114.977, 256,256S 397.023,480, 256,480z M 310.227,224l 108.477-108.477
l-54.227-54.227l-108.477,108.477l-108.477-108.477l-54.227,54.227l 108.477,108.477l-108.477,108.477l 54.227,54.227l 108.477-108.477l 108.477,108.477l 54.227-54.227L 310.227,224z" />
<glyph unicode="&#xe001;" d="M 461.545,414.185L 674.909,414.185L 674.909,351.558L 461.545,351.558zM 538.065,488.401L 600.692,488.401L 600.692,275.037L 538.065,275.037zM 424.425-19.526c-2.327-16.244,0-16.244-23.203-18.548c-13.917-2.327-97.42-2.327-183.226-2.327c-97.42,0-199.447,0-206.406,2.327c-27.834,6.959-11.59,60.3, 25.507,85.807
c 30.161,18.548, 90.461,48.71, 106.682,51.014c 23.203,4.631, 25.507,18.548,0,62.627c-4.631,9.286-11.59,39.424-11.59,71.889c0,51.014, 9.286,85.807, 53.341,104.378c 9.286,2.327, 18.548,4.631, 27.834,4.631
c 30.161,0, 57.972-16.244, 69.585-41.751c 16.244-32.465, 9.286-118.272-9.286-148.433c-20.876-34.793-18.548-46.383, 4.631-51.014c 13.917-4.631, 60.3-25.507, 104.378-48.71C 412.835,36.143, 429.056,8.308, 424.425-19.526z
M 568.227,40.774c0-11.59,0-13.917-16.244-16.244c-9.286-2.327-51.014-2.327-104.378-2.327c-9.286,20.876-25.507,41.751-51.014,53.341c-27.834,16.244-57.972,30.161-83.503,41.751
c 16.244,6.959, 30.161,13.917, 37.12,16.244c 16.244,4.631, 18.548,13.917,0,48.71c-4.631,9.286-9.286,32.465-11.59,57.972c0,39.424, 9.286,67.258, 44.055,81.175c 6.959,2.327, 13.917,2.327, 20.876,2.327
c 23.203,0, 44.055-11.59, 53.341-32.465c 11.59-25.507, 6.959-92.765-6.959-118.272c-16.244-27.834-13.917-37.12, 4.631-39.424c 11.59-2.327, 46.383-20.876, 81.175-39.424C 556.637,82.525, 570.531,61.649, 568.227,40.774z" horiz-adv-x="674.909" />
<glyph unicode="&#xe002;" d="M0,275.744L 229.024,485.952l0-106.656 c 442.368,0, 410.976-420.384, 410.976-420.384c-87.84,291.776-410.976,207.072-410.976,207.072l0-106.656 L0,275.744z" horiz-adv-x="640" />
<glyph unicode="&#xe003;" d="M 338.895,398.324c 2.438,2.438, 19.505,19.505, 48.762,29.257c 39.010,12.19, 80.457,2.438, 112.152-29.257c 31.695-31.695, 43.886-70.705, 29.257-112.152c-9.752-29.257-26.819-48.762-29.257-51.2
l-224.305-224.305c-39.010-39.010-136.533-90.21-226.743,0c-90.21,90.21-39.010,187.733,0,224.305l 241.371,241.371c 9.752,9.752, 24.381,9.752, 31.695,0c 9.752-9.752, 9.752-24.381,0-31.695l-241.371-241.371
c-4.876-2.438-80.457-80.457,0-160.914c 78.019-78.019, 153.6-7.314, 160.914,0l 224.305,226.743c0,0, 12.19,12.19, 19.505,31.695c 7.314,24.381, 2.438,43.886-19.505,65.829c-43.886,43.886-87.771,7.314-97.524,0l-209.676-209.676
c-7.314-7.314-12.19-19.505,0-34.133c 12.19-12.19, 24.381-7.314, 31.695,0l 146.286,146.286c 9.752,7.314, 24.381,7.314, 31.695,0c 9.752-9.752, 9.752-24.381,0-34.133l-146.286-143.848c-19.505-19.505-60.952-34.133-97.524,0
c-36.571,34.133-19.505,78.019,0,97.524L 338.895,398.324z" horiz-adv-x="536.381" />
<glyph unicode="&#xe004;" d="M0,475.663L 722.824,475.663L 722.824,379.106L0,379.106zM0,68.894L 722.824,68.894L 722.824-27.693L0-27.693zM0,273.754L 722.824,273.754L 722.824,177.167L0,177.167z" horiz-adv-x="722.824" />
<glyph unicode="&#xe005;" d="M 382.356,409.479c 13.069,0, 23.498-10.456, 23.498-23.498l0-15.683 c0-10.456-7.842-20.911-18.297-23.498l0-339.591 c0-20.911-18.297-39.181-41.795-39.181L 58.449-32
c-23.498,0-41.795,18.297-41.795,39.181l0,339.591 C 6.198,349.386,-1.644,359.842,-1.644,370.297L-1.644,385.954 c0,13.069, 10.456,23.498, 23.498,23.498l 70.521,0 L 92.403,438.205 C 92.403,461.703, 110.673,480, 131.584,480l 138.456,0 C 293.538,480, 311.835,461.703, 311.835,438.205
l0-28.726 L 382.356,409.479L 382.356,409.479z M 335.333,15.023c 2.614,0, 5.228,2.614, 5.228,5.228L 340.561,346.772 L 63.65,346.772 l0-326.521 c0-2.614, 2.614-5.228, 5.228-5.228L 335.333,15.023 z M 118.515,41.135
c-13.069,0-23.498,10.456-23.498,23.498L 95.016,297.135 c0,13.069, 10.456,20.911, 23.498,20.911l 5.228,0 c 13.069,0, 23.498-10.456, 23.498-20.911l0-232.502 c0-13.069-10.456-23.498-23.498-23.498L 118.515,41.135 z M 131.584,443.432
C 128.97,443.432, 126.356,443.432, 126.356,438.205l0-28.726 l 151.498,0 L 277.854,438.205 c0,2.614-2.614,5.228-5.228,5.228L 131.584,443.432 z M 199.491,41.135c-13.069,0-23.498,10.456-23.498,23.498L 175.993,297.135 c0,13.069, 10.456,20.911, 23.498,20.911l 2.614,0
c 13.069,0, 23.498-10.456, 23.498-20.911l0-232.502 c0-13.069-10.456-23.498-23.498-23.498L 199.491,41.135 z M 280.468,41.135c-13.069,0-23.498,10.456-23.498,23.498L 256.97,297.135 c0,13.069, 10.456,20.911, 23.498,20.911L 285.696,318.046
c 13.069,0, 23.498-10.456, 23.498-20.911l0-232.502 c0-13.069-10.456-23.498-23.498-23.498L 280.468,41.135 z" horiz-adv-x="404.211" />
<glyph unicode="&#xe006;" d="M 438.414,163.698l 63.033,63.033l0-186.311 c0-38.372-30.151-68.494-65.764-68.494L 65.764-28.103 c-38.372,0-65.764,30.151-65.764,68.494L0,407.58 C0,445.924, 30.151,476.075, 65.764,476.075l 375.381,0 l0,0
l-63.033-63.033L 87.694,413.042 c-13.71,0-24.661-10.951-24.661-24.661l0-326.059 c0-13.71, 10.951-24.661, 24.661-24.661l 326.059,0 c 13.71,0, 24.661,10.951, 24.661,24.661L 438.414,163.698 z M 306.887,119.865l-65.764,65.764l-24.661-90.425
L 306.887,119.865z M 328.818,141.796l 213.732,213.732L 476.757,421.262L 263.054,210.29L 328.818,141.796z M 567.182,377.429l 30.151,30.151L 528.839,476.075l-30.151-30.151L 567.182,377.429z" horiz-adv-x="597.333" />
<glyph unicode="&#xe007;" d="M 58.88,477.44L 511.968,24.384L 451.264-36.32L-1.824,416.736zM -1.824,28.768L 451.232,481.824L 511.936,421.152L 58.88-31.936z" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
src/font/icons.ttf Executable file
View File

Binary file not shown.

BIN
src/font/icons.woff Executable file
View File

Binary file not shown.

BIN
src/font/pt-sans-bold.woff Normal file
View File

Binary file not shown.

0
src/css/pt-sans.ttf → src/font/pt-sans.ttf
View File

BIN
src/font/pt-sans.woff Normal file
View File

Binary file not shown.

0
src/css/images/mail-128.png → src/img/mail-128.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

2
src/manifest.json
View File

@ -5,7 +5,7 @@
"manifest_version": 2,
"offline_enabled": true,
"icons": {
"128": "css/images/mail-128.png"
"128": "img/mail-128.png"
},
"permissions": [
"https://storage.whiteout.io/",

29
src/sass/_fonts.scss Executable file
View File

@ -0,0 +1,29 @@
// PT Sans fonts
// -------------------------
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url('../font/pt-sans.woff') format('woff');
}
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url('../font/pt-sans-bold.woff') format('woff');
}
// Icon fonts
// -------------------------
@font-face {
font-family: 'icons';
src:url('../font/icons.eot');
src:url('../font/icons.eot?#iefix') format('embedded-opentype'),
url('../font/icons.woff') format('woff'),
url('../font/icons.ttf') format('truetype'),
url('../font/icons.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

7
src/sass/_functions.scss Executable file
View File

@ -0,0 +1,7 @@
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
@function em($target, $context: $font-size-base) {
@return (strip-units($target) / strip-units($context)) * 1em;
}

15
src/sass/_grid.scss Executable file
View File

@ -0,0 +1,15 @@
// Make a Grid
// Use makeRow and makeColumn to assign semantic layouts grid system behavior
@mixin makeRow($gutter-width: $grid-gutter-width) {
margin-left: $gutter-width * -1;
@include clearfix;
}
@mixin makeColumn($columns: 1, $offset: 0, $column-width: $grid-column-width, $gutter-width: $grid-gutter-width) {
float: left;
margin-left: ($column-width * $offset) + ($gutter-width * ($offset - 1)) + ($gutter-width * 2);
width: ($column-width * $columns) + ($gutter-width * ($columns - 1));
}
@mixin pushColumn($offset: 0, $column-width: $grid-column-width, $gutter-width: $grid-gutter-width) {
position: relative;
left: $offset * ($column-width + $gutter-width);
}

54
src/sass/_mixins.scss Executable file
View File

@ -0,0 +1,54 @@
// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
// contenteditable attribute is included anywhere else in the document.
// Otherwise it causes space to appear at the top and bottom of elements
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
@mixin clearfix {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}
// CSS image replacement
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
@mixin hide-text {
font: #{0}/#{0} a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// Text overflow
// Requires inline-block or block for proper styling
@mixin text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// retina.sass
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
// Submitted by Nathan Crank
// nathancrank.com
@mixin at2x($path, $ext: "jpg", $w: auto, $h: auto) {
$at1x_path: "#{$path}.#{$ext}";
$at2x_path: "#{$path}@2x.#{$ext}";
background-image: "url("#{$at1x_path}")";
@include respond-to(retina) {
background-image: "url("#{$at2x_path}")";
background-size: $w $h;
}
}

396
src/sass/_normalize.scss Executable file
View File

@ -0,0 +1,396 @@
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
// ==========================================================================
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined in IE 8/9.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
//
// Correct `inline-block` display not defined in IE 8/9.
//
audio,
canvas,
video {
display: inline-block;
}
//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
[hidden] {
display: none;
}
// ==========================================================================
// Base
// ==========================================================================
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
//
html {
font-family: sans-serif; // 1
-webkit-text-size-adjust: 100%; // 2
-ms-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// ==========================================================================
// Links
// ==========================================================================
//
// Address `outline` inconsistency between Chrome and other browsers.
//
a:focus {
outline: thin dotted;
}
//
// Improve readability when focused and also mouse hovered in all browsers.
//
a:active,
a:hover {
outline: 0;
}
// ==========================================================================
// Typography
// ==========================================================================
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari 5, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address styling not present in IE 8/9, Safari 5, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari 5 and Chrome.
//
dfn {
font-style: italic;
}
//
// Address differences between Firefox and other browsers.
//
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
mark {
background: #ff0;
color: #000;
}
//
// Correct font family set oddly in Safari 5 and Chrome.
//
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
//
// Improve readability of pre-formatted text in all browsers.
//
pre {
white-space: pre-wrap;
}
//
// Set consistent quote types.
//
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// ==========================================================================
// Embedded content
// ==========================================================================
//
// Remove border when inside `a` element in IE 8/9.
//
img {
border: 0;
}
//
// Correct overflow displayed oddly in IE 9.
//
svg:not(:root) {
overflow: hidden;
}
// ==========================================================================
// Figures
// ==========================================================================
//
// Address margin not present in IE 8/9 and Safari 5.
//
figure {
margin: 0;
}
// ==========================================================================
// Forms
// ==========================================================================
//
// Define consistent border, margin, and padding.
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct `color` not being inherited in IE 8/9.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
border: 0; // 1
padding: 0; // 2
}
//
// 1. Correct font family not being inherited in all browsers.
// 2. Correct font size not being inherited in all browsers.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
//
button,
input,
select,
textarea {
font-family: inherit; // 1
font-size: 100%; // 2
margin: 0; // 3
}
//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//
button,
input {
line-height: normal;
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
// Correct `select` style inheritance in Firefox 4+ and Opera.
//
button,
select {
text-transform: none;
}
//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// 1. Address box sizing set to `content-box` in IE 8/9.
// 2. Remove excess padding in IE 8/9.
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
// (include `-moz` to future-proof).
//
input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
}
//
// Remove inner padding and search cancel button in Safari 5 and Chrome
// on OS X.
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Remove inner padding and border in Firefox 4+.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// 1. Remove default vertical scrollbar in IE 8/9.
// 2. Improve readability and alignment in all browsers.
//
textarea {
overflow: auto; // 1
vertical-align: top; // 2
}
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}

31
src/sass/_responsive.scss Executable file
View File

@ -0,0 +1,31 @@
// Central Media Query Helper
// -------------------------
@mixin respond-to($media) {
@if $media == desktop {
@media only screen and (min-width: $respond-size-desktop) { @content; }
}
@else if $media == retina {
@media all and (-webkit-min-device-pixel-ratio : 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (min--moz-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5) {
@content
}
}
}
// Visibility classes (mobile first approach)
// -------------------------
.visible-phone { display: inherit !important; }
.hidden-phone { display: none !important; }
.visible-desktop { display: none !important; }
.hidden-desktop { display: inherit !important; }
@include respond-to(desktop) {
.visible-desktop { display: inherit !important; }
.hidden-desktop { display: none !important; }
.visible-phone { display: none !important; }
.hidden-phone { display: inherit !important; }
}

38
src/sass/_scaffolding.scss Executable file
View File

@ -0,0 +1,38 @@
// Reset the box-sizing
*,
*:before,
*:after {
box-sizing: border-box;
}
// Body reset
html {
font-size: 62.5%;
height: 100%;
}
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
}
// Reset fonts for relevant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
// Basic layout
.column {
}

72
src/sass/_variables.scss Executable file
View File

@ -0,0 +1,72 @@
// Typography
// -------------------------------------------
$font-size-base: 16px;
$font-size-small: em(14);
$font-size-smaller: em(12);
$font-size-big: em(18);
$font-size-bigger: em(24);
$font-family-base: "PT Sans", Arial, sans-serif;
$font-family-icons: "icons";
$line-height-base: 20 / 16;
// Colors
// -------------------------------------------
$color-blue: #00c6ff;
$color-black: #000;
$color-white: #fff;
$color-grey: #666;
$color-grey-dark: #333;
$color-grey-light: #ccc;
$color-grey-lighter: #ddd;
$color-grey-lightest: #f9f9f9;
// Layout
// -------------------------------------------
$respond-size-desktop: 768px;
$content-nav-width: 344px;
// Components
// -------------------------------------------
$nav-max-width: 347px;
$nav-width: 80%;
$nav-padding: 10px;
$lightbox-padding: 15px;
$lightbox-max-width: 662px;
$lightbox-width: 90%;
$lightbox-min-height: 644px;
$lightbox-top: 10%;
$btn-back-color: $color-blue;
$btn-color: #fff;
$btn-shadow-color: $color-grey-light;
$btn-font-size: $font-size-big;
$btn-padding-horizontal: 0.7em;
$btn-padding-vertical: 0.5em;
$btn-disabled-back-color: $color-grey-lighter;
$btn-disabled-color: #fff;
$btn-icon-color: $color-blue;
$btn-icon-disabled-color: $color-grey;
$label-back-color: $color-blue;
$label-color: #fff;
$label-shadow-color: $color-grey-light;
$label-font-size: $font-size-small;
$label-padding-horizontal: 0.8em;
$label-padding-vertical: 0.3em;
$label-primary-back-color: #ff878d;
$label-primary-color: #fff;
$label-light-back-color: #fff;
$label-light-color: $color-blue;
$label-light-shadow-color: $color-grey-lighter;
$label-light-padding-horizontal: 0.3em;
$label-light-padding-vertical: 0.1em;

23
src/sass/all.scss Executable file
View File

@ -0,0 +1,23 @@
// Utilities
@import "mixins";
@import "functions";
@import "grid";
@import "normalize";
@import "variables"; // Modify this for custom colors, font-sizes, etc
@import "fonts";
@import "responsive";
@import "scaffolding";
// Components
@import "components/buttons";
@import "components/labels";
@import "components/icons";
@import "components/lightbox";
@import "components/nav";
@import "components/mail-list";
@import "components/layout";
// Views
@import "views/navigation";
@import "views/mail-list";

131
src/sass/components/_buttons.scss Executable file
View File

@ -0,0 +1,131 @@
// Regular buttons with disabled support
// -------------------------------------------
.btn {
position: relative;
display: inline-block;
padding: $btn-padding-vertical $btn-padding-horizontal;
font-size: $btn-font-size;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 0;
white-space: nowrap;
user-select: none;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
background-color: $btn-back-color;
color: $btn-color;
box-shadow: 1px 1px 0px $btn-shadow-color;
transition: background-color 0.3s;
text-decoration: none;
font-weight: normal;
-webkit-font-smoothing: auto;
&:hover,
&:focus {
background-color: lighten($btn-back-color, 10%);
}
&:active,
&.active {
outline: 0;
background-image: none;
box-shadow: none;
top: 1px;
left: 1px;
}
&.disabled,
&[disabled],
&[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
color: $btn-disabled-color;
background-color: $btn-disabled-back-color;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
@include respond-to(retina) {
background-size: 3px 3px;
}
}
&[data-icon]:before {
padding-right: 0.5em
}
&[data-icon-append]:after {
padding-left: 0.5em
}
}
// Icon Buttons
// -------------------------------------------
.btn-icon {
position: relative;
display: inline-block;
@include hide-text();
margin: 2px;
box-shadow: 0 0 0 2px $btn-icon-color;
border-radius: 50%;
color: $btn-icon-color;
vertical-align: middle;
cursor: pointer;
white-space: nowrap;
user-select: none;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
color: $btn-icon-color;
text-decoration: none;
font-weight: normal;
font-size: $font-size-base;
font-family: $font-family-icons;
line-height: 1;
height: 2em;
width: 2em;
text-align: center;
-webkit-font-smoothing: antialiased;
transition: color 0.3s;
transform: translate3d(0,0,0); // to prevent flickering
&.disabled,
&[disabled],
&[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
color: $btn-icon-disabled-color;
box-shadow: 0 0 0 2px $btn-icon-disabled-color;
}
&:active,
&.active {
outline: 0;
top: 1px;
left: 1px;
}
&:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
box-sizing: content-box;
top: -2px;
left: -2px;
padding: 2px;
z-index: -1;
background: $btn-icon-color;
transition: transform 0.3s, opacity 0.4s;
transform: scale(1.2);
opacity: 0;
}
&:hover {
color: $color-white;
&:after {
transform: scale(0.8);
opacity: 1;
}
}
}

24
src/sass/components/_icons.scss Executable file
View File

@ -0,0 +1,24 @@
// Icon attributes
// -------------------------------------------
[data-icon]:before {
font-family: $font-family-icons;
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
[data-icon-append]:after {
font-family: $font-family-icons;
content: attr(data-icon-append);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

41
src/sass/components/_labels.scss Executable file
View File

@ -0,0 +1,41 @@
.label {
display: inline-block;
padding: $label-padding-vertical $label-padding-horizontal;
font-size: $label-font-size;
text-align: center;
vertical-align: middle;
border-radius: ($line-height-base * $label-font-size) + 2 * $label-padding-vertical;
white-space: nowrap;
user-select: none;
background-color: $label-back-color;
color: $label-color;
box-shadow: 0px 1px 0px $label-shadow-color;
&[data-icon]:before {
padding-right: 0.5em
}
&[data-icon-append]:after {
padding-left: 0.5em
}
}
.label-primary {
background-color: $label-primary-back-color;
color: $label-primary-color;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
@include respond-to(retina) {
background-size: 3px 3px;
}
}
.label-light {
background-color: $label-light-back-color;
color: $label-light-color;
box-shadow: inset 1px 1px 0px $label-light-shadow-color;
padding: $label-light-padding-vertical $label-light-padding-horizontal;
min-width: 2.5em;
font-weight: bold;
font-size: $font-size-base;
}

10
src/sass/components/_layout.scss Executable file
View File

@ -0,0 +1,10 @@
.main-content {
@include clearfix();
height: 100%;
overflow: hidden;
}
.column {
height: 100%;
overflow: hidden;
}

85
src/sass/components/_lightbox.scss Executable file
View File

@ -0,0 +1,85 @@
.lightbox {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2000;
visibility: hidden;
backface-visibility: hidden;
@include respond-to(desktop) {
top: $lightbox-top;
margin: 0 auto;
width: $lightbox-width;
max-width: $lightbox-max-width;
max-height: $lightbox-min-height;
height: auto;
}
.lightbox-body {
padding: $lightbox-padding;
background: #fff;
header {
text-align: center;
position: relative;
button.close {
font-family: $font-family-icons;
position: absolute;
top: 0px;
right: 0px;
display: block;
border: none;
background: none;
padding: 0;
margin: 0;
color: $color-grey-dark;
}
h2 {
margin: 0;
padding: 0;
font-size: $font-size-bigger;
font-weight: normal;
line-height: 1em;
color: $color-grey-dark;
}
}
.content {
overflow: hidden;
}
}
}
.lightbox-overlay.show .lightbox {
visibility: visible;
}
.lightbox-overlay {
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: $color-grey-dark;
transition: all 0.3s;
}
.lightbox-overlay.show {
opacity: 1;
visibility: visible;
}
// effect
.lightbox-effect .lightbox-body {
transform: scale(0.7);
opacity: 0;
transition: all 0.3s;
}
.lightbox-overlay.show .lightbox-effect .lightbox-body {
transform: scale(1);
opacity: 1;
}

161
src/sass/components/_mail-list.scss Executable file
View File

@ -0,0 +1,161 @@
.mail-list {
$padding-vertical: 15px;
$padding-horizontal: 30px;
list-style: none;
margin: 0;
padding: 0;
&:last-child {
margin-bottom: 0;
}
li {
display: block;
margin-bottom: 5px;
padding: $padding-vertical $padding-horizontal;
background: $color-white;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
h3 {
@include text-overflow;
color: $color-blue;
font-size: $font-size-bigger;
font-weight: normal;
margin: 0;
}
p {
font-size: $font-size-small;
margin: 0;
}
.head {
position: relative;
padding-right: 6.5em;
.subject {
@include text-overflow;
color: $color-grey-dark;
font-weight: bold;
line-height: 1.8em;
}
time {
position: absolute;
bottom: 0;
right: 0;
width: 6em * ($font-size-small / $font-size-smaller);
color: $color-grey-light;
font-size: $font-size-smaller;
text-align: right;
line-height: 1.8em * ($font-size-small / $font-size-smaller);
}
&:before {
content: "";
width: 0.8em;
height: 0.8em;
border-radius: 50%;
box-shadow: inset 0 2px 2px $color-grey-light;
position: absolute;
top: 0;
left: 0;
margin-top: 0.2em;
margin-left: -1.3em;
transition: background-color 0.3s, box-shadow 0.3s;
}
}
.body {
@include text-overflow;
color: $color-grey;
}
&:hover {
background-color: mix($color-white, $color-blue, 90%);
}
&.mail-list-attachment {
.head:after {
content: "\e003";
color: $color-grey-light;
font-family: $font-family-icons;
position: absolute;
right: 0;
top: 0;
margin-right: -1 * $padding-horizontal;
text-align: center;
line-height: 1.8em;
width: $padding-horizontal;
}
}
&.mail-list-unread {
.head:before {
background-color: $color-blue;
box-shadow: inset 0 1px 2px $color-grey;
}
}
&.mail-list-replied {
.head:before {
content: "\e002";
color: $color-grey-light;
font-family: $font-family-icons;
position: absolute;
left: 0;
top: 0;
margin-left: -1 * $padding-horizontal;
text-align: center;
line-height: 1.8em / 0.8em;
box-shadow: none;
width: $padding-horizontal;
height: auto;
font-size: 0.8em;
}
}
&.mail-list-active,
&.mail-list-active:hover {
background-color: $color-blue;
color: $color-white;
h3 {
color: $color-white;
}
.head {
.subject {
color: $color-white;
}
time {
color: $color-white;
}
}
.body {
color: $color-white;
}
.head:before {
box-shadow: inset 0 2px 2px $color-grey-light;
background-color: $color-white;
}
&.mail-list-attachment {
.head:after {
color: $color-white;
}
}
&.mail-list-unread {
.head:before {
box-shadow: inset 0 2px 2px $color-grey-light;
background-color: $color-white;
}
}
&.mail-list-replied {
.head:before {
color: $color-white;
background: transparent;
box-shadow: none;
}
}
}
}
}

81
src/sass/components/_nav.scss Executable file
View File

@ -0,0 +1,81 @@
// Navigation
// -------------------------
.nav-container {
position: relative;
overflow: hidden;
height: 100%;
}
.nav-pusher {
position: relative;
left: 0;
z-index: 99;
height: 100%;
transition: transform 0.5s;
}
.nav-menu-open .nav-pusher::after {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 0.5s;
}
.nav-pusher::after {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
background: rgba(0,0,0,0.2);
content: '';
opacity: 0;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.nav-menu {
position: absolute;
top: 0;
left: 0;
z-index: 100;
visibility: hidden;
width: $nav-width;
max-width: $nav-max-width;
height: 100%;
background: $color-blue;
background-image: linear-gradient(to right ,$color-blue 98%, darken($color-blue, 1%) 100%);
transition: all 0.5s;
border-right: 1px solid $color-grey-light;
}
.nav-menu-open .nav-pusher::after {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 0.5s;
}
.nav-effect.nav-menu-open .nav-pusher {
transform: translate3d($nav-max-width, 0, 0);
}
@media(max-width: 450px) {
.nav-effect.nav-menu-open .nav-pusher {
transform: translate3d($nav-width, 0, 0);
}
}
.nav-effect.nav-menu {
z-index: 1;
transform: translate3d(-50%, 0, 0);
}
.nav-effect.nav-menu-open .nav-effect.nav-menu {
visibility: visible;
transition: transform 0.5s;
transform: translate3d(0, 0, 0);
}
.nav-effects.nav-menu::after {
display: none;
}

32
src/sass/views/_mail-list.scss Executable file
View File

@ -0,0 +1,32 @@
.view-mail-list {
$padding-horizontal: 15px;
$padding-vertical: 10px;
float: left;
width: $content-nav-width;
background: $color-grey-lightest;
background-image: linear-gradient(to right ,$color-grey-lightest 98%, darken($color-grey-lightest, 1%) 100%);
border-right: 1px solid $color-grey-light;
header {
cursor: pointer;
padding: $padding-vertical $padding-horizontal;
text-shadow: 0px 1px 1px $color-grey-lighter;
&:before {
color: $color-blue;
font-size: $font-size-bigger;
margin-right: 0.5em;
vertical-align: middle;
}
h2 {
margin: 0;
display: inline;
color: $color-grey-dark;
font-size: $font-size-bigger;
font-weight: normal;
vertical-align: middle;
}
}
}

87
src/sass/views/_navigation.scss Executable file
View File

@ -0,0 +1,87 @@
.nav-menu {
.content {
a {
color: #fff;
text-decoration: none;
}
header {
padding: 0 $nav-padding;
height: 84px;
h1 {
//@include hide-text();
// TODO: replace with svg background image
margin: 0px;
padding: 0px;
color: #fff;
font-weight: normal;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
width: 100%;
}
}
ul.nav-primary {
padding: 0 $nav-padding;
li {
display: block;
a {
@include clearfix();
display: block;
font-size: $font-size-bigger;
vertical-align: middle;
border-bottom: 1px solid #fff;
line-height: 1.8em;
transition: background-color 0.3s;
.label-wrapper {
display: block;
float: right;
}
span.label {
line-height: 1.3em;
vertical-align: middle;
}
&:hover, &:focus {
background-color: mix($color-blue, $color-white, 80%);
}
}
}
li:first-child {
border-top: 1px solid #fff;
}
}
ul.nav-secondary {
margin-top: em(50, 16);
padding: 0 $nav-padding;
li {
a {
font-size: $font-size-big;
}
}
}
footer {
position: absolute;
bottom: 0px;
left: 0px;
padding: 0 $nav-padding;
background: darken($color-blue, 1%);
height: 28px;
width: 100%;
font-size: $font-size-smaller;
color: #fff;
line-height: em(28,12);
}
}
}

105
src/styles.html Executable file
View File

@ -0,0 +1,105 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styleguide for Whiteout Mail Client</title>
<link rel="stylesheet" href="css/all.css">
<style>
body {
margin: 0 auto;
padding: 20px;
max-width: 800px;
}
</style>
</head>
<body>
<h1>Styleguide for Whiteout Mail Client</h1>
<h2>1) Buttons</h2>
<h3>Regular Buttons</h3>
<p>
<button class="btn">Label</button>
<a class="btn" href="#" data-icon="&#xe001;">Send securely and invite</a>
<button class="btn" disabled>Disabled Button</button>
<a class="btn" aria-disabled="true" data-icon-append="&#xe001;" href="#">Disabled Link</a>
</p>
<h3>Icon Buttons</h3>
<p>
<button class="btn-icon">&#xe005;</button>
<button class="btn-icon">&#xe002;</button>
<button class="btn-icon">&#xe006;</button>
<button class="btn-icon" disabled>&#xe006;</button>
</p>
<h2>2) Labels</h2>
<p>
<span class="label">Max Mustermann</span>
<span class="label label-primary" data-icon-append="&#xe003;">Max Mustermann</span>
<span class="label label-light">1</span>
</p>
<h2>3) Mail List</h2>
<ul class="mail-list">
<li class="mail-list-active mail-list-attachment">
<h3>welcome@whiteout.io</h3>
<div class="head">
<p class="subject">
Welcome Nico
</p>
<time>
Wednesday
</time>
</div>
<p class="body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
</p>
</li>
<li>
<h3>welcome@whiteout.io</h3>
<div class="head">
<p class="subject">
Welcome Nico
</p>
<time>
Wednesday
</time>
</div>
<p class="body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
</p>
</li>
<li class="mail-list-attachment mail-list-unread">
<h3>welcome@whiteout.io</h3>
<div class="head">
<p class="subject">
Welcome Nico
</p>
<time>
Wednesday
</time>
</div>
<p class="body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
</p>
</li>
<li class="mail-list-replied">
<h3>welcome@whiteout.io</h3>
<div class="head">
<p class="subject">
Welcome Nico
</p>
<time>
Wednesday
</time>
</div>
<p class="body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
</p>
</li>
</ul>
</body>
</html>