mirror of
https://github.com/moparisthebest/mail
synced 2024-12-26 01:08:50 -05:00
initial import of styleguide
This commit is contained in:
Tankred Hase
parent
ac7329fcfa
commit
23152c1c23
3
.gitignore
vendored
3
.gitignore
vendored
@ -4,4 +4,5 @@ npm-debug.log
|
||||
*-browserified.js
|
||||
test/new-unit/lib/
|
||||
.sass-cache
|
||||
src/css/style.css
|
||||
src/css/style.css
|
||||
dist/
|
||||
86
Gruntfile.js
86
Gruntfile.js
@ -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']);
|
||||
|
||||
};
|
||||
58
package.json
58
package.json
@ -1,28 +1,34 @@
|
||||
{
|
||||
"name": "mail-html5",
|
||||
"version": "0.0.1",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
},
|
||||
"scripts": {
|
||||
"postinstall": "./res/copy-deps.sh",
|
||||
"test": "grunt test",
|
||||
"start": "grunt prod"
|
||||
},
|
||||
"dependencies": {
|
||||
"crypto-lib": "https://github.com/whiteout-io/crypto-lib/tarball/master",
|
||||
"imap-client": "git+ssh://git@github.com:whiteout-io/imap-client.git#builtins",
|
||||
"smtp-client": "git+ssh://git@github.com:whiteout-io/smtp-client.git#master"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "0.4.1",
|
||||
"mocha": "1.13.0",
|
||||
"phantomjs": "1.9.1-9",
|
||||
"chai": "1.7.2",
|
||||
"sinon": "1.7.3",
|
||||
"grunt-contrib-connect": "0.5.0",
|
||||
"grunt-contrib-jshint": "0.6.4",
|
||||
"grunt-contrib-qunit": "0.2.2",
|
||||
"grunt-mocha": "0.4.1"
|
||||
}
|
||||
"name": "mail-html5",
|
||||
"version": "0.1.0-dev",
|
||||
"engines": {
|
||||
"node": ">=0.8"
|
||||
},
|
||||
"scripts": {
|
||||
"postinstall": "./res/copy-deps.sh",
|
||||
"test": "grunt test",
|
||||
"start": "grunt prod"
|
||||
},
|
||||
"dependencies": {
|
||||
"crypto-lib": "https://github.com/whiteout-io/crypto-lib/tarball/master",
|
||||
"imap-client": "git+ssh://git@github.com:whiteout-io/imap-client.git#builtins",
|
||||
"smtp-client": "git+ssh://git@github.com:whiteout-io/smtp-client.git#master"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "0.4.1",
|
||||
"mocha": "1.13.0",
|
||||
"phantomjs": "1.9.1-9",
|
||||
"chai": "1.7.2",
|
||||
"sinon": "1.7.3",
|
||||
"grunt-contrib-connect": "0.5.0",
|
||||
"grunt-contrib-jshint": "0.6.4",
|
||||
"grunt-contrib-qunit": "0.2.2",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@ -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
116
src/desktop.html
Executable 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="">
|
||||
<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"></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
BIN
src/font/icons.eot
Executable file
Binary file not shown.
40
src/font/icons.svg
Executable file
40
src/font/icons.svg
Executable 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="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
|
||||
<glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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=" " horiz-adv-x="256" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/font/icons.ttf
Executable file
BIN
src/font/icons.ttf
Executable file
Binary file not shown.
BIN
src/font/icons.woff
Executable file
BIN
src/font/icons.woff
Executable file
Binary file not shown.
BIN
src/font/pt-sans-bold.woff
Normal file
BIN
src/font/pt-sans-bold.woff
Normal file
Binary file not shown.
BIN
src/font/pt-sans.woff
Normal file
BIN
src/font/pt-sans.woff
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
@ -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
29
src/sass/_fonts.scss
Executable 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
7
src/sass/_functions.scss
Executable 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
15
src/sass/_grid.scss
Executable 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
54
src/sass/_mixins.scss
Executable 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
396
src/sass/_normalize.scss
Executable 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
31
src/sass/_responsive.scss
Executable 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
38
src/sass/_scaffolding.scss
Executable 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
72
src/sass/_variables.scss
Executable 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
23
src/sass/all.scss
Executable 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
131
src/sass/components/_buttons.scss
Executable 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
24
src/sass/components/_icons.scss
Executable 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
41
src/sass/components/_labels.scss
Executable 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
10
src/sass/components/_layout.scss
Executable 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
85
src/sass/components/_lightbox.scss
Executable 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
161
src/sass/components/_mail-list.scss
Executable 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
81
src/sass/components/_nav.scss
Executable 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
32
src/sass/views/_mail-list.scss
Executable 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
87
src/sass/views/_navigation.scss
Executable 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
105
src/styles.html
Executable 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="">Send securely and invite</a>
|
||||
<button class="btn" disabled>Disabled Button</button>
|
||||
<a class="btn" aria-disabled="true" data-icon-append="" href="#">Disabled Link</a>
|
||||
</p>
|
||||
<h3>Icon Buttons</h3>
|
||||
<p>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon"></button>
|
||||
<button class="btn-icon" disabled></button>
|
||||
</p>
|
||||
|
||||
<h2>2) Labels</h2>
|
||||
<p>
|
||||
<span class="label">Max Mustermann</span>
|
||||
<span class="label label-primary" data-icon-append="">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>
|
||||
Loading…
Reference in New Issue
Block a user