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

Implement desktop UI

Browse Source
This commit is contained in:
Mario Volke 2014-09-23 15:41:37 +02:00 committed by Tankred Hase
parent b96ae1dd89
commit 4ef2b834b6
114 changed files with 3654 additions and 2463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -5,8 +5,10 @@ test/lib/
.sass-cache .sass-cache
src/css/ src/css/
dist/ dist/
compile/
release/ release/
test/integration/src/ test/integration/src/
src/img/icons/all.svg
.elasticbeanstalk/ .elasticbeanstalk/
test/*/index.js test/*/index.js
**/*.browserified.js **/*.browserified.js

289
Gruntfile.js
View File

@ -17,54 +17,66 @@ module.exports = function(grunt) {
// Project configuration. // Project configuration.
grunt.initConfig({ grunt.initConfig({
shell: { // General
options: {
stderr: false
},
target: {
command: 'dir=$(pwd) && cd node_modules/mailreader/ && npm install --production && cd $dir'
}
},
connect: {
dev: {
options: {
port: 8580,
base: '.',
keepalive: true
}
},
test: {
options: {
port: 8581,
base: '.'
}
}
},
jshint: {
all: ['Gruntfile.js', 'src/*.js', 'src/js/**/*.js', 'test/unit/*-test.js', 'test/integration/*-test.js'],
options: {
jshintrc: '.jshintrc'
}
},
mocha_phantomjs: {
all: {
options: {
urls: [
'http://localhost:<%= connect.test.options.port %>/test/unit/index.html',
'http://localhost:<%= connect.test.options.port %>/test/integration/index.html'
]
}
}
},
clean: { clean: {
dist: ['dist', 'test/lib', 'test/integration/src'], dist: ['dist', 'compile', 'test/lib', 'test/integration/src']
release: ['dist/**/*.browserified.js', 'dist/**/*.js.map']
}, },
copy: {
npmDev: {
expand: true,
flatten: true,
cwd: './',
src: [
'node_modules/mocha/mocha.css',
'node_modules/mocha/mocha.js',
'node_modules/chai/chai.js',
'node_modules/sinon/pkg/sinon.js',
'node_modules/browsercrow/src/*.js',
'node_modules/browsersmtp/src/*.js',
'src/lib/openpgp/openpgp.js',
'src/lib/openpgp/openpgp.worker.js',
'src/lib/forge/forge.min.js',
'dist/js/pbkdf2-worker.min.js'
],
dest: 'test/lib/'
},
lib: {
expand: true,
flatten: true,
cwd: 'src/lib/',
src: ['openpgp/openpgp.js', 'openpgp/openpgp.worker.js', 'forge/forge.min.js'],
dest: 'dist/js/'
},
font: {
expand: true,
cwd: 'src/font/',
src: ['*'],
dest: 'dist/font/'
},
img: {
expand: true,
cwd: 'src/img/',
src: ['*'],
dest: 'dist/img/'
},
tpl: {
expand: true,
cwd: 'src/tpl/',
src: ['*'],
dest: 'dist/tpl/'
},
app: {
expand: true,
cwd: 'src/',
src: ['*.js', '*.json', 'manifest.*'],
dest: 'dist/'
}
},
// Stylesheets
sass: { sass: {
dist: { dist: {
files: { files: {
@ -73,7 +85,6 @@ module.exports = function(grunt) {
} }
} }
}, },
autoprefixer: { autoprefixer: {
options: { options: {
browsers: ['last 2 versions'] browsers: ['last 2 versions']
@ -85,10 +96,9 @@ module.exports = function(grunt) {
} }
} }
}, },
csso: { csso: {
options: { options: {
banner: '/*! Copyright © <%= grunt.template.today("yyyy") %>, Whiteout Networks GmbH.*/\n' banner: '/*! Copyright © 2013, Whiteout Networks GmbH. All rights reserved.*/\n'
}, },
dist: { dist: {
files: { files: {
@ -98,22 +108,12 @@ module.exports = function(grunt) {
} }
}, },
watch: { // JavaScript
css: {
files: ['src/sass/**/*.scss'], jshint: {
tasks: ['dist-css', 'manifest'] all: ['Gruntfile.js', 'src/*.js', 'src/js/**/*.js', 'test/unit/*-test.js', 'test/integration/*-test.js'],
}, options: {
js: { jshintrc: '.jshintrc'
files: ['src/js/**/*.js'],
tasks: ['dist-js', 'copy:integration', 'manifest']
},
lib: {
files: ['src/lib/**/*.js'],
tasks: ['copy:lib', 'manifest']
},
app: {
files: ['src/*.js', 'src/**/*.html', 'src/**/*.json', 'src/manifest.*', 'src/img/**/*', 'src/font/**/*'],
tasks: ['copy:app', 'copy:ca', 'copy:tpl', 'copy:img', 'copy:font', 'manifest-dev', 'manifest']
} }
}, },
@ -320,58 +320,112 @@ module.exports = function(grunt) {
} }
}, },
copy: { mocha_phantomjs: {
npmDev: { all: {
expand: true, options: {
flatten: true, urls: [
cwd: './', 'http://localhost:<%= connect.test.options.port %>/test/unit/index.html',
src: [ 'http://localhost:<%= connect.test.options.port %>/test/integration/index.html'
'node_modules/mocha/mocha.css', ]
'node_modules/mocha/mocha.js', }
'node_modules/chai/chai.js',
'node_modules/sinon/pkg/sinon.js',
'node_modules/browsercrow/src/*.js',
'node_modules/browsersmtp/src/*.js',
'src/lib/openpgp/openpgp.min.js',
'src/lib/openpgp/openpgp.worker.min.js',
'src/lib/forge/forge.min.js',
'dist/js/pbkdf2-worker.min.js'
],
dest: 'test/lib/'
},
lib: {
expand: true,
flatten: true,
cwd: 'src/lib/',
src: ['openpgp/openpgp.min.js', 'openpgp/openpgp.worker.min.js', 'forge/forge.min.js'],
dest: 'dist/js/'
},
font: {
expand: true,
cwd: 'src/font/',
src: ['*'],
dest: 'dist/font/'
},
img: {
expand: true,
cwd: 'src/img/',
src: ['*'],
dest: 'dist/img/'
},
tpl: {
expand: true,
cwd: 'src/tpl/',
src: ['*'],
dest: 'dist/tpl/'
},
app: {
expand: true,
cwd: 'src/',
src: ['*.html', '*.js', '*.json', 'manifest.*'],
dest: 'dist/'
} }
}, },
// Assets
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}]
},
icons: {
files: [{
expand: true,
src: ['img/icons/*.svg'],
cwd: 'src/',
dest: 'compile/'
}]
}
},
svgstore: {
options: {
prefix: 'icon-',
svg: {
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg'
},
cleanup: ['fill', 'stroke']
},
icons: {
files: {
'src/img/icons/all.svg': ['compile/img/icons/*.svg'],
}
}
},
'string-replace': {
index: {
files: {
'dist/index.html': 'src/index.html'
},
options: {
replacements: [{
pattern: /<!-- @import (.*?) -->/ig,
replacement: function(match, p1) {
return grunt.file.read('src/' + p1);
}
}]
}
}
},
// Development
connect: {
dev: {
options: {
port: 8580,
base: '.',
keepalive: true
}
},
test: {
options: {
port: 8581,
base: '.'
}
}
},
// Utilities
watch: {
css: {
files: ['src/sass/**/*.scss'],
tasks: ['dist-css', 'manifest']
},
js: {
files: ['src/js/**/*.js'],
tasks: ['copy:js', 'copy:integration', 'manifest']
},
icons: {
files: ['src/index.html', 'src/img/icons/*.svg', '!src/img/icons/all.svg'],
tasks: ['svgmin', 'svgstore', 'string-replace']
},
lib: {
files: ['src/lib/**/*.js'],
tasks: ['copy:lib', 'manifest']
},
app: {
files: ['src/*.js', 'src/**/*.html', 'src/**/*.json', 'src/manifest.*', 'src/img/**/*', 'src/font/**/*'],
tasks: ['copy:app', 'copy:ca', 'copy:tpl', 'copy:img', 'copy:font', 'manifest-dev', 'manifest']
}
},
// Deployment
compress: { compress: {
main: { main: {
options: { options: {
@ -430,13 +484,16 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-manifest'); grunt.loadNpmTasks('grunt-manifest');
grunt.loadNpmTasks('grunt-mocha-phantomjs'); grunt.loadNpmTasks('grunt-mocha-phantomjs');
grunt.loadNpmTasks('grunt-exorcise'); grunt.loadNpmTasks('grunt-exorcise');
grunt.loadNpmTasks('grunt-shell'); grunt.loadNpmTasks('grunt-string-replace');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-svgstore');
// Build tasks // Build tasks
grunt.registerTask('dist-css', ['sass', 'autoprefixer', 'csso']); grunt.registerTask('dist-css', ['sass', 'autoprefixer', 'csso']);
grunt.registerTask('dist-js', ['browserify', 'exorcise', 'uglify']); grunt.registerTask('dist-js', ['browserify', 'exorcise', 'uglify']);
grunt.registerTask('dist-copy', ['copy']); grunt.registerTask('dist-copy', ['copy']);
grunt.registerTask('dist', ['clean:dist', 'shell', 'dist-css', 'dist-js', 'dist-copy', 'manifest']); grunt.registerTask('dist-assets', ['svgmin', 'svgstore', 'string-replace']);
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js', 'dist-assets', 'dist-copy', 'manifest']);
// Test/Dev tasks // Test/Dev tasks
grunt.registerTask('dev', ['connect:dev']); grunt.registerTask('dev', ['connect:dev']);
@ -508,8 +565,8 @@ module.exports = function(grunt) {
} }
grunt.registerTask('release-dev', ['dist', 'manifest-dev', 'compress']); grunt.registerTask('release-dev', ['dist', 'manifest-dev', 'compress']);
grunt.registerTask('release-test', ['dist', 'manifest-test', 'clean:release', 'compress']); grunt.registerTask('release-test', ['dist', 'manifest-test', 'compress']);
grunt.registerTask('release-stable', ['dist', 'manifest-stable', 'clean:release', 'compress']); grunt.registerTask('release-stable', ['dist', 'manifest-stable', 'compress']);
grunt.registerTask('default', ['release-dev']); grunt.registerTask('default', ['release-dev']);
}; };

11
package.json
View File

@ -50,12 +50,13 @@
"browsersmtp": "https://github.com/whiteout-io/browsersmtp/tarball/master", "browsersmtp": "https://github.com/whiteout-io/browsersmtp/tarball/master",
"chai": "~1.7.2", "chai": "~1.7.2",
"grunt": "~0.4.1", "grunt": "~0.4.1",
"grunt-autoprefixer": "~0.7.2",
"grunt-browserify": "^3.0.1", "grunt-browserify": "^3.0.1",
"grunt-contrib-clean": "~0.5.0", "grunt-contrib-clean": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-manifest": "^0.4.0",
"grunt-autoprefixer": "~0.7.2",
"grunt-contrib-compress": "~0.5.2", "grunt-contrib-compress": "~0.5.2",
"grunt-contrib-connect": "~0.5.0", "grunt-contrib-connect": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-jshint": "~0.6.4", "grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-sass": "~0.7.3", "grunt-contrib-sass": "~0.7.3",
"grunt-contrib-uglify": "^0.6.0", "grunt-contrib-uglify": "^0.6.0",
@ -63,10 +64,12 @@
"grunt-shell": "~1.1.1", "grunt-shell": "~1.1.1",
"grunt-csso": "~0.6.1", "grunt-csso": "~0.6.1",
"grunt-exorcise": "^0.2.0", "grunt-exorcise": "^0.2.0",
"grunt-manifest": "^0.4.0",
"grunt-mocha-phantomjs": "^0.6.0", "grunt-mocha-phantomjs": "^0.6.0",
"mocha": "^1.21.4", "mocha": "^1.21.4",
"sinon": "~1.7.3", "sinon": "~1.7.3",
"time-grunt": "^1.0.0" "time-grunt": "^1.0.0",
"grunt-string-replace": "~1.0.0",
"grunt-svgmin": "~1.0.0",
"grunt-svgstore": "~0.3.4"
} }
} }

BIN
src/font/icons.eot
View File

Binary file not shown.

28
src/font/icons.svg
View File

@ -1,28 +0,0 @@
<?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>Generated by IcoMoon</metadata>
<defs>
<font id="icons" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" d="" horiz-adv-x="0" />
<glyph unicode="&#xe000;" d="M512 960c-282.046 0-512-229.954-512-512s229.954-512 512-512c282.046 0 512 229.954 512 512s-229.954 512-512 512zM620.454 448l216.954-216.954-108.454-108.454-216.954 216.954-216.954-216.954-108.454 108.454 216.954 216.954-216.954 216.954 108.454 108.454 216.954-216.954 216.954 216.954 108.454-108.454-216.954-216.954z" />
<glyph unicode="&#xe001;" d="M923.090 828.37h426.728v-125.254h-426.728zM1076.13 976.802h125.254v-426.728h-125.254zM848.85-39.052c-4.654-32.488 0-32.488-46.406-37.096-27.834-4.654-194.84-4.654-366.452-4.654-194.84 0-398.894 0-412.812 4.654-55.668 13.918-23.18 120.6 51.014 171.614 60.322 37.096 180.922 97.42 213.364 102.028 46.406 9.262 51.014 37.096 0 125.254-9.262 18.572-23.18 78.848-23.18 143.778 0 102.028 18.572 171.614 106.682 208.756 18.572 4.654 37.096 9.262 55.668 9.262 60.322 0 115.944-32.488 139.17-83.502 32.488-64.93 18.572-236.544-18.572-296.866-41.752-69.586-37.096-92.766 9.262-102.028 27.834-9.262 120.6-51.014 208.756-97.42 60.326-32.442 92.768-88.112 83.506-143.78zM1136.454 81.548c0-23.18 0-27.834-32.488-32.488-18.572-4.654-102.028-4.654-208.756-4.654-18.572 41.752-51.014 83.502-102.028 106.682-55.668 32.488-115.944 60.322-167.006 83.502 32.488 13.918 60.322 27.834 74.24 32.488 32.488 9.262 37.096 27.834 0 97.42-9.262 18.572-18.572 64.93-23.18 115.944 0 78.848 18.572 134.516 88.11 162.35 13.918 4.654 27.834 4.654 41.752 4.654 46.406 0 88.11-23.18 106.682-64.93 23.18-51.014 13.918-185.53-13.918-236.544-32.488-55.668-27.834-74.24 9.262-78.848 23.18-4.654 92.766-41.752 162.35-78.848 41.8-23.226 69.588-64.978 64.98-106.728z" horiz-adv-x="1348" />
<glyph unicode="&#xe002;" d="M0 551.488l458.048 420.416v-213.312c884.736 0 821.952-840.768 821.952-840.768-175.68 583.552-821.952 414.144-821.952 414.144v-213.312l-458.048 432.832z" horiz-adv-x="1280" />
<glyph unicode="&#xe003;" d="M677.79 796.648c4.876 4.876 39.010 39.010 97.524 58.514 78.020 24.38 160.914 4.876 224.304-58.514s87.772-141.41 58.514-224.304c-19.504-58.514-53.638-97.524-58.514-102.4l-448.61-448.61c-78.020-78.020-273.066-180.42-453.486 0s-78.020 375.466 0 448.61l482.742 482.742c19.504 19.504 48.762 19.504 63.39 0 19.504-19.504 19.504-48.762 0-63.39l-482.742-482.742c-9.752-4.876-160.914-160.914 0-321.828 156.038-156.038 307.2-14.628 321.828 0l448.61 453.486c0 0 24.38 24.38 39.010 63.39 14.628 48.762 4.876 87.772-39.010 131.658-87.772 87.772-175.542 14.628-195.048 0l-419.352-419.352c-14.628-14.628-24.38-39.010 0-68.266 24.38-24.38 48.762-14.628 63.39 0l292.572 292.572c19.504 14.628 48.762 14.628 63.39 0 19.504-19.504 19.504-48.762 0-68.266l-292.572-287.696c-39.010-39.010-121.904-68.266-195.048 0-73.142 68.266-39.010 156.038 0 195.048l429.108 419.348z" horiz-adv-x="1072" />
<glyph unicode="&#xe004;" d="M0 951.326h1445.648v-193.114h-1445.648zM0 137.788h1445.648v-193.174h-1445.648zM0 547.508h1445.648v-193.174h-1445.648z" horiz-adv-x="1444" />
<glyph unicode="&#xe005;" d="M764.712 818.958c26.138 0 46.996-20.912 46.996-46.996v-31.366c0-20.912-15.684-41.822-36.594-46.996v-679.182c0-41.822-36.594-78.362-83.59-78.362l-574.626-0.056c-46.996 0-83.59 36.594-83.59 78.362v679.182c-20.912 5.228-36.596 26.14-36.596 47.050v31.314c0 26.138 20.912 46.996 46.996 46.996h141.042l0.056 57.506c0 46.996 36.54 83.59 78.362 83.59h276.912c46.996 0 83.59-36.594 83.59-83.59v-57.452h141.042zM670.666 30.046c5.228 0 10.456 5.228 10.456 10.456v653.042h-553.822v-653.042c0-5.228 5.228-10.456 10.456-10.456h532.91zM237.030 82.27c-26.138 0-46.996 20.912-46.996 46.996l-0.002 465.004c0 26.138 20.912 41.822 46.996 41.822h10.456c26.138 0 46.996-20.912 46.996-41.822v-465.004c0-26.138-20.912-46.996-46.996-46.996h-10.454zM263.168 886.864c-5.228 0-10.456 0-10.456-10.454v-57.452h302.996v57.452c0 5.228-5.228 10.456-10.456 10.456l-282.084-0.002zM398.982 82.27c-26.138 0-46.996 20.912-46.996 46.996v465.004c0 26.138 20.912 41.822 46.996 41.822h5.228c26.138 0 46.996-20.912 46.996-41.822v-465.004c0-26.138-20.912-46.996-46.996-46.996h-5.228zM560.936 82.27c-26.138 0-46.996 20.912-46.996 46.996v465.004c0 26.138 20.912 41.822 46.996 41.822h10.456c26.138 0 46.996-20.912 46.996-41.822v-465.004c0-26.138-20.912-46.996-46.996-46.996h-10.456z" horiz-adv-x="808" />
<glyph unicode="&#xe006;" d="M876.828 327.396l126.066 126.066v-372.622c0-76.744-60.302-136.988-131.528-136.988l-739.838-0.058c-76.744 0-131.528 60.302-131.528 136.988v734.378c0 76.688 60.302 136.99 131.528 136.99h750.762l-126.066-126.066h-580.836c-27.42 0-49.322-21.902-49.322-49.322v-652.118c0-27.42 21.902-49.322 49.322-49.322h652.118c27.42 0 49.322 21.902 49.322 49.322v202.752zM613.774 239.73l-131.528 131.528-49.322-180.85 180.85 49.322zM657.636 283.592l427.464 427.464-131.586 131.468-427.406-421.944 131.528-136.988zM1134.364 754.858l60.302 60.302-136.988 136.99-60.302-60.302 136.988-136.99z" horiz-adv-x="1194" />
<glyph unicode="&#xe007;" d="M117.76 954.88l906.176-906.112-121.408-121.408-906.176 906.112zM-3.648 57.536l906.112 906.112 121.408-121.344-906.112-906.176z" />
<glyph unicode="&#xe008;" d="M0 960l1024-1024h-1024z" />
<glyph unicode="&#xe009;" d="M681.984 655.104v-119.744h-153.6v119.744c0 81.472-64.768 147.712-144.384 147.712s-144.384-66.24-144.384-147.712v-119.744h-153.6v119.744c-0.064 168.064 133.696 304.896 297.984 304.896 164.352 0 297.984-136.832 297.984-304.896zM0 476.096v-540.096h768v540.096h-768zM308.224-0.896l24.192 195.968 5.12 41.792c-21.632 15.232-35.712 40.64-35.712 69.44 0 11.136 2.112 21.696 5.888 31.296 12.096 30.848 41.664 52.736 76.288 52.736s64.192-21.888 76.288-52.736c3.776-9.664 5.888-20.224 5.888-31.296 0-28.8-14.208-54.272-35.84-69.312l5.184-41.856 24.064-195.968h-151.36z" horiz-adv-x="768" />
<glyph unicode="&#xe010;" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416zM448 704h128v-128h-128zM640 192h-256v64h64v192h-64v64h192v-256h64z" />
<glyph unicode="&#xe011;" d="M768 320.032l-182.82 182.822 438.82 329.15-128.010 127.996-548.52-219.442-172.7 172.706c-49.78 49.778-119.302 61.706-154.502 26.508-35.198-35.198-23.268-104.726 26.51-154.5l172.686-172.684-219.464-548.582 127.99-128.006 329.19 438.868 182.826-182.828v-255.98h127.994l63.992 191.988 191.988 63.996v127.992l-255.98-0.004z" />
<glyph unicode="&#xe012;" d="M1120.549 655.726v-119.954h-155.063v119.954c0 81.92-64.366 146.286-143.36 146.286s-143.36-67.291-143.36-146.286v-119.954h-155.063v119.954c0 166.766 134.583 304.274 298.423 304.274s298.423-137.509 298.423-304.274zM0 477.257v-541.257h766.537v541.257h-766.537zM307.2 0.366l23.406 196.023 5.851 40.96c-20.48 14.629-35.109 40.96-35.109 70.217 0 11.703 2.926 20.48 5.851 32.183 11.703 32.183 40.96 52.663 76.069 52.663s64.366-20.48 76.069-52.663c2.926-8.777 5.851-20.48 5.851-32.183 0-29.257-14.629-55.589-35.109-70.217l5.851-40.96 23.406-196.023h-152.137z" horiz-adv-x="1121" />
<glyph unicode="&#xe013;" d="M1352.048-64l-49.054 141.030c-91.976 257.533-300.455 309.653-459.88 309.653-76.647 0-144.096-12.263-174.754-21.461l9.198-214.611-459.88 389.365 423.090 420.024 9.198-202.347c85.844 3.066 162.491-6.132 233.006-24.527h6.132l3.066-3.066c469.078-122.635 459.88-640.766 459.88-643.832v-150.228zM843.114 441.868c144.096 0 324.982-39.856 441.485-208.479-30.659 150.228-125.701 374.036-407.76 444.551l-6.132 3.066c-70.515 18.395-153.293 24.527-245.269 21.461h-27.593l-6.132 134.898-291.257-288.192 318.85-269.796-6.132 128.766 21.461 6.132c0 0 91.976 27.593 208.479 27.593zM462.946 153.677l-462.946 389.365 423.090 416.958 12.263-171.689-55.186-6.132-6.132 52.12-291.257-288.192 315.784-266.731-3.066 49.054 55.186 6.132z" horiz-adv-x="1355" />
<glyph unicode="&#xe014;" d="M1073.595-64l-40.843 134.199c-81.687 268.399-297.573 323.829-466.781 323.829-61.265 0-110.86-8.752-137.117-11.67v-207.134l-428.855 399.681 428.855 385.094v-198.382c212.969-5.835 376.342-70.017 490.12-192.547 186.712-201.299 166.291-481.368 166.291-493.037l-11.67-140.034zM568.889 449.459c125.447 0 335.499-32.091 455.111-224.638-14.587 93.356-52.513 212.969-142.952 312.16-107.943 116.695-268.399 175.043-475.533 175.043h-26.256v131.282l-300.49-268.399 300.49-277.151v128.365l20.422 5.835c0 0 70.017 17.504 169.208 17.504z" horiz-adv-x="1085" />
<glyph unicode="&#xe015;" d="M458.105-64v272.842h-458.105v495.158l458.105 3.368v252.632l461.474-424.421 101.053-97.684-562.526-501.895zM60.632 269.474h458.105v-198.737l410.947 367.158-53.895 53.895-357.053 330.105v-175.158l-458.105-3.368v-373.895z" horiz-adv-x="1017" />
<glyph unicode="&#xe016;" d="M-0.001 447.998l511.995 511.995 47.513-47.513-511.995-511.995-47.513 47.513zM47.517 495.519l511.995-511.995-47.513-47.513-511.995 511.995 47.513 47.513z" horiz-adv-x="560" />
<glyph unicode="&#xe017;" d="M890 186.6l-169.6 171.8c27.6 48.2 42 101.8 42 155.8 0 175.2-142.4 317.8-317.2 317.8s-317.2-142.6-317.2-317.8c0-175.2 142.4-317.8 317.2-317.8 55.8 0 111 15.4 160.2 44.8l168.8-171.2c3.8-3.8 9.2-6.2 14.6-6.2s10.8 2.2 14.6 6.2l86.6 87.6c8 8.2 8 21 0 29zM445.2 708.2c106.8 0 193.6-87 193.6-194s-86.8-194-193.6-194c-106.8 0-193.6 87-193.6 194s86.8 194 193.6 194z" />
</font></defs></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 9.3 KiB

BIN
src/font/icons.ttf
View File

Binary file not shown.

BIN
src/font/icons.woff
View File

Binary file not shown.

21
src/img/icons/about.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="_x2014_ŽÓť_x5F_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 133.5 597.5 574.9" enable-background="new 0 133.5 597.5 574.9" xml:space="preserve">
<g>
<path fill="#535353" d="M420.5,161.8c6.6,0,15.5,0,24.4,2.2c53.1,4.4,112.9,53.1,121.8,146.1V339c0,4.4,0,8.9-2.2,13.3v2.2
c0,4.4-2.2,8.9-2.2,13.3c0,0,0,0,0,2.2c-2.2,8.9-4.4,19.9-8.9,28.8l0,0c-26.6,70.8-90.8,155-223.6,252.4c-2.2,0-2.2,2.2-4.4,2.2
c-4.4,2.2-6.6,4.4-11.1,8.9c-4.4,4.4-11.1,8.9-17.7,11.1c-6.6-4.4-11.1-8.9-17.7-11.1c-4.4-2.2-6.6-4.4-11.1-8.9
c-2.2,0-2.2-2.2-4.4-2.2c-132.8-97.4-197-181.6-223.6-252.4l0,0c-4.4-11.1-6.6-19.9-8.9-28.8c0,0,0,0,0-2.2c0-4.4-2.2-8.9-2.2-13.3
v-2.2c0-4.4,0-8.9,0-13.3v-31c6.6-93,68.6-141.7,121.8-146.1c8.9,0,15.5,0,24.4,0l0,0c8.9,0,17.7,0,26.6,2.2
c44.3,6.6,68.6,31,97.4,64.2c28.8-33.2,53.1-57.6,97.4-64.2C402.8,161.8,411.7,161.8,420.5,161.8 M423.3,133.5
c-11.3,0-20.4,0-31.7,2.3c-43,6.8-72.4,29.4-95.1,54.3c-22.6-24.9-52.1-47.5-95.1-54.3c-9.1-2.3-20.4-2.3-29.4-2.3
c-9.1,0-18.1,0-27.2,2.3C81.5,140.3,9.1,196.9,0,305.5l0,0l0,0v31.7l0,0l0,0c0,4.5,0,9.1,2.3,13.6v2.3c0,4.5,2.3,9.1,2.3,13.6l0,0
l0,0c2.3,11.3,4.5,20.4,9.1,29.4l0,0l2.3,9.1c31.7,86,108.6,174.3,235.4,269.3l2.3,2.3l2.3,2.3l4.5,2.3l6.8,4.5
c6.8,4.5,11.3,9.1,18.1,13.6l13.6,9.1l13.6-9.1c6.8-4.5,11.3-9.1,18.1-13.6c4.5-2.3,6.8-6.8,11.3-9.1l4.5-2.3
c122.2-90.5,199.2-174.3,230.9-258l0,0l4.5-11.3c0,0,0-2.3,2.3-2.3l0,0l0,0c2.3-9.1,6.8-20.4,9.1-29.4l0,0v-2.3
c0-4.5,2.3-9.1,2.3-15.8l0,0V353c0-6.8,2.3-11.3,2.3-15.8l0,0l0,0v-31.7l0,0l0,0c-9.1-108.6-81.5-163-144.9-169.8
C441.4,133.5,432.3,133.5,423.3,133.5L423.3,133.5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

21
src/img/icons/account.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Isolationsmodus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 20 23" enable-background="new 0 0 20 23" xml:space="preserve">
<g>
<g>
<g>
<path fill="#79C9EC" d="M20,20.3c0-0.6-0.4-6.2-1.7-7.6l-0.1-0.1c0,0-1.2-0.8-2.3-1.1c-0.5-0.1-1.9-0.5-2.6-1.3l-0.1-0.1
l-0.1-0.9c0.2-0.3,0.5-0.8,0.7-1.5c0.2-0.2,0.6-0.7,0.5-1.7V5.3l-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0.1-1.1,0-3.2-1.3-4.1
c-0.2-0.2-1-0.9-2.9-0.9C8.2,0.1,7.4,0.7,7.2,0.9C5.8,1.8,5.8,4,5.8,5.1C5.7,5.1,5.7,5.2,5.7,5.2L5.6,5.3l0,0.5
C5.5,6.9,5.9,7.4,6.1,7.6c0.2,0.7,0.6,1.3,0.7,1.5l-0.1,0.9l-0.1,0.1c-0.8,0.9-2.6,1.3-2.6,1.3c-1.1,0.3-2.3,1.1-2.3,1.1
l-0.1,0.1c-1.3,1.4-1.6,7-1.7,7.6l0,0.2l0.2,0.1C0.3,20.8,3.5,23,10,23c6.5,0,9.7-2.2,9.8-2.3l0.2-0.1L20,20.3z M10,22.1
c-5.3,0-8.3-1.5-9.1-2c0.1-1.8,0.5-5.7,1.4-6.7c0.2-0.1,1.1-0.7,1.9-0.9c0.1,0,2.1-0.4,3.1-1.6l0.3-0.4l0.1-1.6L7.7,8.8
c0,0-0.4-0.6-0.7-1.4L6.8,5.5C6.7,4.7,6.6,2.4,7.7,1.7l0.1-0.1c0,0,0.6-0.6,2.2-0.7c1.6,0.1,2.2,0.7,2.2,0.7v0l0.1,0.1
c1.1,0.7,1,3,0.9,3.9L13,7.4c-0.3,0.8-0.7,1.4-0.7,1.4l-0.1,0.1l0.1,1.6l0.3,0.4c1,1.2,3,1.6,3.1,1.6c0.9,0.2,1.8,0.8,2,0.9
c0.8,1,1.3,5,1.4,6.7C18.3,20.6,15.3,22.1,10,22.1z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

9
src/img/icons/add_contact.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="32" viewBox="0 0 42 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M28.847 4.113h13.335v3.914h-13.335zM33.629-0.525h3.914v13.335h-3.914zM26.527 31.22c-0.145 1.015 0 1.015-1.45 1.159-0.87 0.145-6.089 0.145-11.452 0.145-6.089 0-12.465 0-12.9-0.145-1.74-0.435-0.724-3.769 1.594-5.363 1.885-1.159 5.654-3.044 6.668-3.188 1.45-0.289 1.594-1.159 0-3.914-0.289-0.58-0.724-2.464-0.724-4.493 0-3.188 0.58-5.363 3.334-6.524 0.58-0.145 1.159-0.289 1.74-0.289 1.885 0 3.623 1.015 4.349 2.609 1.015 2.029 0.58 7.392-0.58 9.277-1.305 2.175-1.159 2.899 0.289 3.188 0.87 0.289 3.769 1.594 6.524 3.044 1.885 1.014 2.899 2.753 2.61 4.493zM35.514 27.452c0 0.724 0 0.87-1.015 1.015-0.58 0.145-3.188 0.145-6.524 0.145-0.58-1.305-1.594-2.609-3.188-3.334-1.74-1.015-3.623-1.885-5.219-2.609 1.015-0.435 1.885-0.87 2.32-1.015 1.015-0.289 1.159-0.87 0-3.044-0.289-0.58-0.58-2.029-0.724-3.623 0-2.464 0.58-4.204 2.753-5.073 0.435-0.145 0.87-0.145 1.305-0.145 1.45 0 2.753 0.724 3.334 2.029 0.724 1.594 0.435 5.798-0.435 7.392-1.015 1.74-0.87 2.32 0.289 2.464 0.724 0.145 2.899 1.305 5.073 2.464 1.306 0.726 2.175 2.031 2.031 3.335z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

9
src/img/icons/attachment.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="32" viewBox="0 0 34 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M21.181 5.105c0.152-0.152 1.219-1.219 3.048-1.829 2.438-0.762 5.029-0.152 7.009 1.829s2.743 4.419 1.829 7.010c-0.609 1.829-1.676 3.048-1.829 3.2l-14.019 14.019c-2.438 2.438-8.533 5.638-14.171 0s-2.438-11.733 0-14.019l15.086-15.086c0.61-0.61 1.524-0.61 1.981 0 0.61 0.61 0.61 1.524 0 1.981l-15.086 15.086c-0.305 0.152-5.029 5.029 0 10.057 4.876 4.876 9.6 0.457 10.057 0l14.019-14.171c0 0 0.762-0.762 1.219-1.981 0.457-1.524 0.152-2.743-1.219-4.114-2.743-2.743-5.486-0.457-6.095 0l-13.105 13.105c-0.457 0.457-0.762 1.219 0 2.133 0.762 0.762 1.524 0.457 1.981 0l9.143-9.143c0.61-0.457 1.524-0.457 1.981 0 0.61 0.61 0.61 1.524 0 2.133l-9.143 8.991c-1.219 1.219-3.809 2.133-6.095 0s-1.219-4.876 0-6.095l13.41-13.105z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

9
src/img/icons/back.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="32" viewBox="0 0 18 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M-0 16l16-16 1.485 1.485-16 16-1.485-1.485zM1.485 14.515l16 16-1.485 1.485-16-16 1.485-1.485z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 560 B

31
src/img/icons/bug.svg Normal file
View File

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-0.1 374.2 595.3 592.5" enable-background="new -0.1 374.2 595.3 592.5" xml:space="preserve">
<g>
<path fill="#565F73" d="M583,649.5l-84.5-3.6c33.4-48.2,27.3-116-17-160.3c-43.8-43.8-110.6-50.2-158.6-18.2l-3.4-81
c0-7.2-5.9-12.6-13-12.2c-7.2,0-12.6,5.9-12.2,13l4.3,101.7l0,1l0,0.1c-0.3,0-0.6,0-0.9-0.1c-11.3-1-22.6-0.9-33.7,0.2
c0,0,0-0.1,0-0.2c-0.1-1.5-0.5-2.9-1.1-4.3l-38.3-76.9c-2.9-5.9-10.5-8.4-16.8-5.5c-5.9,2.9-8.4,10.5-5.5,16.8l36.9,74.1l0.1,0.2
c-14.2,3.5-28,8.7-41,15.8c-3.4,1.9-6.8,3.9-10.1,6c0.6-0.5,1.2-1,1.8-1.4c2.7-1.7,5.4-3.2,8.1-4.7l-66.8-63.4
c-5.1-5.1-13.1-4.6-17.7,0.4c-4.6,5.1-4.2,13.1,0.4,17.7l62.7,59.5c-5.7,4.4-11.2,9.2-16.5,14.5L29.9,668.8
c-69.4,69,3,247.1,5.9,254.7c0.8,1.7,1.6,2.9,2.9,4.2c1.2,1.3,2.5,2.1,4.1,3c7.6,3,185.4,75.3,254.8,5.9l130.4-130.4
c5.2-5.2,10-10.7,14.4-16.5l62.4,65.8c5,4.7,12.6,5.1,18.1,0.8c5-4.7,5-12.7,0.4-17.7l-66.8-70.5l-0.3-0.3
c6.8-12.6,12-25.9,15.4-39.6c0.1,0.1,0.2,0.1,0.3,0.2c0.1,0,0.1,0.1,0.2,0.1l76.9,38.3c6.3,3.3,13.9,0.8,16.8-5.5
c3.3-6.3,0.8-13.9-5.5-16.8l-76.9-38.3c-2.3-1.2-4.9-1.7-7.3-1.4c-0.1,0-0.2,0-0.3,0c1.3-11.5,1.5-23.1,0.5-34.8l-0.4,0
c0.1-0.1,0.3-0.2,0.4-0.3c0.1-0.1,0.2-0.2,0.3-0.2c0,0.2,0,0.4,0,0.6l105.5,4.5c6.7,0,12.6-5.1,13-12.2
C595.2,655.8,590.1,649.9,583,649.5z M321.5,519.3c-3.3-0.8-6.6-1.5-9.9-2.2c0,0,0,0-0.1,0c0,0,0,0,0,0c-1,0-2.1-0.2-3.1-0.5
c-0.3-0.1-0.5-0.1-0.8-0.1c0.2,0,0.5,0.1,0.7,0.1c0,0,0,0,0,0c1.1,0.2,2.2,0.4,3.3,0.6c0,0,0,0,0,0s0,0,0,0h0
C315,517.7,318.2,518.4,321.5,519.3z M301.4,515.5c-0.5,0-1-0.1-1.6-0.2C300.4,515.4,300.9,515.5,301.4,515.5z M204.5,535.5
c-0.9,0.8-1.9,1.4-2.9,1.8C202.5,536.7,203.5,536.1,204.5,535.5z M47.9,686.5l130.4-130.3c3.6-3.6,7.3-6.9,11.1-10.1
c15.2,48.2,42.5,93.9,79.6,133.6L52.6,896.2C32.4,839.5,5.3,729.2,47.9,686.5z M410.7,788.8L280.3,919
c-42.7,42.7-153.5,15.1-210.1-5l216.5-216.5c39.8,37.4,85.7,64.8,134.3,79.6C417.8,781.1,414.4,785,410.7,788.8z M434.7,755.2
c-50-14.6-97.8-43.1-137.9-82.8c-0.4-0.4-0.9-0.8-1.3-1.3c-0.5-0.5-1-1-1.5-1.5c-39.6-40.1-68.1-87.4-82.5-137.7
c59.7-32,137.9-18.5,189.6,33.2C453.2,617.2,466.6,695.5,434.7,755.2z M324,519.9c2.5,0.6,4.9,1.4,7.4,2.2c2,0.6,3.9,1.3,5.9,2
c-1.9-0.7-3.9-1.3-5.9-2C328.9,521.3,326.5,520.6,324,519.9z M358.5,533.4c15.4,8,30,18.6,43.1,31.7c7,7.1,13.3,14.6,18.9,22.5
c-5.6-7.9-12-15.4-18.9-22.4C388.8,552.3,374.2,541.6,358.5,533.4z M472.7,644.9c-4.6-21.2-12.8-41.9-24.6-61.1
c11.9,19.2,20.2,39.9,24.8,61.1L472.7,644.9z M472,638.9c-8.8-34-26.9-66-52.5-91.6c-3.1-3.1-6.2-6-9.5-8.9
c3.1,2.8,6.1,5.6,9.1,8.6c10.9,10.9,20.3,22.8,28.2,35.3c-7.8-12.4-17.2-24.2-28.1-35c-27.3-27.5-60.6-45.3-95.1-53.2v0
c8.3,1.9,16.6,4.4,24.7,7.5c-6.8-2.6-13.8-4.9-20.8-6.7c38.3-32.8,97.6-29.4,135.4,8.4C501.1,541.1,504.5,600.3,472,638.9z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

7
src/img/icons/check.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Isolationsmodus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 40.2 29.4" enable-background="new 0 0 40.2 29.4" xml:space="preserve">
<polygon fill="#231F20" points="15.1,29.4 0,14.2 4.2,10 15.1,20.9 36,0 40.2,4.2 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 551 B

9
src/img/icons/close.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M3.68 0.16l28.318 28.316-3.794 3.794-28.318-28.316zM-0.114 28.202l28.316-28.316 3.794 3.792-28.316 28.318z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 573 B

9
src/img/icons/close_circle.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M16 0c-8.814 0-16 7.186-16 16s7.186 16 16 16c8.814 0 16-7.186 16-16s-7.186-16-16-16zM19.389 16l6.78 6.78-3.389 3.389-6.78-6.78-6.78 6.78-3.389-3.389 6.78-6.78-6.78-6.78 3.389-3.389 6.78 6.78 6.78-6.78 3.389 3.389-6.78 6.78z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 690 B

39
src/img/icons/contact.svg Normal file
View File

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Isolationsmodus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 62.4 50.9" enable-background="new 0 0 62.4 50.9" xml:space="preserve">
<g>
<g>
<g>
<path fill="#79C9EC" d="M44.2,45c0-0.2,0-0.5-0.1-0.8c-0.2-3.2-1.1-13.1-3.6-16L40.3,28c-0.1-0.1-2.6-1.8-5.1-2.4
c-0.4-0.1-1.1-0.3-2-0.6c-0.8-0.3-1.6-0.7-2.4-1.2c-0.5-0.3-1-0.7-1.4-1.1l-0.3-0.3L29,20.2c0.4-0.5,1.1-1.8,1.6-3.4
c0.5-0.5,1.4-1.6,1.2-3.9v-1.2l-0.2-0.2c0-0.1-0.2-0.2-0.3-0.3c0.1-2.4,0-7.1-3-9.1c-0.5-0.5-2.2-1.9-6.3-2.1
c-4,0.2-5.8,1.6-6.2,2.1c-2.9,2-3.1,6.8-3,9.1c-0.2,0.1-0.3,0.2-0.3,0.3l-0.2,0.2V13c-0.2,2.3,0.7,3.4,1.2,3.9
c0.5,1.6,1.3,2.8,1.6,3.4l-0.2,2.1l-0.2,0.3C13,24.7,9.1,25.5,9,25.6c-2.5,0.6-5,2.4-5.1,2.4l-0.2,0.2C0.8,31.3,0.1,43.6,0,45
l0,0.5l0.5,0.3c0.3,0.2,7.3,5,21.7,5c13.9,0,20.9-4.5,21.6-5c0,0,0,0,0,0l0.5-0.3L44.2,45z M22.1,48.9c-11.7,0-18.3-3.4-20-4.4
c0.2-3.9,1.2-12.6,3-14.9c0.5-0.3,2.5-1.6,4.3-2.1c0.2,0,4.6-1,6.9-3.5l0.7-0.8l0.2-3.5L17,19.4c0,0-0.9-1.2-1.5-3L15,12.3
c-0.3-1.9-0.4-7,2.1-8.6l0.2-0.2c0,0,1.3-1.4,4.8-1.5C25.7,2.1,27,3.5,27,3.5l0.2,0.2c2.4,1.6,2.3,6.7,2.1,8.6l-0.5,4
c-0.6,1.8-1.5,3-1.5,3L27,19.7l0.3,3.5l0.7,0.8c0.2,0.3,0.5,0.5,0.8,0.8c0.5,0.5,1.1,0.8,1.7,1.1c2.1,1.1,4.2,1.6,4.4,1.6
c1.9,0.5,3.9,1.8,4.4,2.1c1.8,2.2,2.7,10.5,3,14.5c0,0.1,0,0.2,0,0.4c-0.5,0.3-1.4,0.8-2.6,1.3C36.3,47.1,30.5,48.9,22.1,48.9z"
/>
</g>
</g>
</g>
<g>
<g>
<g>
<path fill="#79C9EC" d="M62.4,40.7c-0.1-1.2-0.7-11.9-3.2-14.8L59,25.8c-0.1-0.1-2.3-1.6-4.5-2.2c-1-0.2-3.8-1-5.1-2.5l-0.2-0.3
L49,19c0.3-0.5,1-1.6,1.4-3c0.5-0.4,1.2-1.4,1.1-3.4v-1.1l-0.2-0.2c0-0.1-0.1-0.2-0.3-0.3c0.1-2.1,0-6.3-2.6-8
c-0.4-0.4-2-1.7-5.6-1.8c-3.5,0.1-5.1,1.4-5.5,1.8c-2.6,1.8-2.7,6-2.6,8c-0.1,0.1-0.2,0.2-0.3,0.3l-0.2,0.2v1
c-0.1,2,0.6,3,1.1,3.4c0.5,1.4,1.1,2.5,1.4,3l-0.1,1.8l-0.2,0.3c-1.6,1.8-5.1,2.5-5.1,2.5c-0.2,0-0.4,0.1-0.6,0.2
c-0.8,0.2-1.5,0.6-2.1,0.9c0.5,0.5,1.1,0.8,1.7,1.1c0.5-0.2,1-0.4,1.4-0.5c0.1,0,0.6-0.1,1.4-0.4c1.4-0.5,3.4-1.3,4.7-2.7
l0.6-0.7l0.2-3l-0.2-0.3c0,0-0.8-1.1-1.3-2.6L36.7,12c-0.2-1.6-0.3-6.2,1.8-7.5l0.2-0.2c0,0,1.1-1.2,4.2-1.3
c3.2,0.1,4.3,1.3,4.3,1.3v0l0.2,0.2c2.1,1.4,2,5.9,1.8,7.5l-0.5,3.5c-0.5,1.6-1.3,2.7-1.3,2.7l-0.2,0.3l0.2,3l0.6,0.7
c2,2.2,5.9,3.1,6,3.1c1.7,0.4,3.4,1.5,3.8,1.8c1.7,2,2.5,9.7,2.7,13.1c-1.5,0.9-6.9,3.6-16.4,3.9c-0.4,0-0.8,0-1.2,0
c-0.3,0-0.6,0-0.8,0c0,0.1,0,0.2,0,0.4c-0.5,0.3-1.4,0.8-2.6,1.3c1.1,0.1,2.2,0.1,3.5,0.1c0.2,0,0.5,0,0.7,0
c12.1-0.2,18-4.2,18.3-4.4l0.4-0.3L62.4,40.7z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

9
src/img/icons/decrypted.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="32" viewBox="0 0 35 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M35.017 9.509v3.749h-4.846v-3.749c0-2.56-2.011-4.571-4.48-4.571s-4.48 2.103-4.48 4.571v3.749h-4.846v-3.749c0-5.211 4.206-9.509 9.326-9.509s9.326 4.297 9.326 9.509zM0 15.086v16.914h23.954v-16.914h-23.954zM9.6 29.989l0.731-6.126 0.183-1.28c-0.64-0.457-1.097-1.28-1.097-2.194 0-0.366 0.091-0.64 0.183-1.006 0.366-1.006 1.28-1.646 2.377-1.646s2.011 0.64 2.377 1.646c0.091 0.274 0.183 0.64 0.183 1.006 0 0.914-0.457 1.737-1.097 2.194l0.183 1.28 0.731 6.126h-4.754z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 926 B

16
src/img/icons/delete.svg Executable file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 25 32" enable-background="new 0 0 25 32" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="0" y1="0" x2="0" y2="0"/>
</g>
<path d="M23.9,4.4c0.8,0,1.5,0.7,1.5,1.5v1c0,0.7-0.5,1.3-1.1,1.5v21.2c0,1.3-1.1,2.4-2.6,2.4l-18,0C2.2,32,1,30.9,1,29.6V8.3
C0.4,8.2-0.1,7.5-0.1,6.9v-1c0-0.8,0.7-1.5,1.5-1.5h4.4l0-1.8C5.8,1.1,6.9,0,8.2,0h8.7c1.5,0,2.6,1.1,2.6,2.6v1.8L23.9,4.4L23.9,4.4
z M21,29.1c0.2,0,0.3-0.2,0.3-0.3V8.3H4v20.4c0,0.2,0.2,0.3,0.3,0.3H21z M7.4,27.4c-0.8,0-1.5-0.7-1.5-1.5V11.4
c0-0.8,0.7-1.3,1.5-1.3h0.3c0.8,0,1.5,0.7,1.5,1.3V26c0,0.8-0.7,1.5-1.5,1.5H7.4z M8.2,2.3c-0.2,0-0.3,0-0.3,0.3v1.8h9.5V2.6
c0-0.2-0.2-0.3-0.3-0.3H8.2z M12.5,27.4c-0.8,0-1.5-0.7-1.5-1.5V11.4c0-0.8,0.7-1.3,1.5-1.3h0.2c0.8,0,1.5,0.7,1.5,1.3V26
c0,0.8-0.7,1.5-1.5,1.5H12.5z M17.5,27.4c-0.8,0-1.5-0.7-1.5-1.5V11.4c0-0.8,0.7-1.3,1.5-1.3h0.3c0.8,0,1.5,0.7,1.5,1.3V26
c0,0.8-0.7,1.5-1.5,1.5H17.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

11
src/img/icons/draft.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Isolationsmodus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="279 397 36 46" enable-background="new 279 397 36 46" xml:space="preserve">
<g id="_x31__1_">
<path fill="#231F20" d="M311,443h-28c-2.2,0-4-1.8-4-4v-38c0-2.2,1.8-4,4-4h18.4l13.6,13.6V439C315,441.2,313.2,443,311,443z
M283,399c-1.1,0-2,0.9-2,2v38c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2v-27.6L300.6,399H283z"/>
<path fill="#231F20" d="M314,412h-12c-1.1,0-2-0.9-2-2v-12h2v12h12V412z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 783 B

8
src/img/icons/dropdown.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 13 7" enable-background="new 0 0 13 7" xml:space="preserve">
<path d="M12.8,1.8c0.3-0.2,0.3-0.6,0-0.8l-0.9-0.8c-0.3-0.2-0.7-0.2-0.9,0L6.5,4L2.1,0.2c-0.3-0.2-0.7-0.2-0.9,0L0.2,1
c-0.3,0.2-0.3,0.6,0,0.8l5.9,5.1c0.3,0.2,0.7,0.2,0.9,0L12.8,1.8z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 634 B

12
src/img/icons/encrypted.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12 16" enable-background="new 0 0 12 16" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#1A171B" d="M10.7,4.8v1.9H8.3V4.8c0-1.3-1-2.3-2.3-2.3c-1.2,0-2.3,1-2.3,2.3
v1.9H1.3V4.8C1.3,2.1,3.4,0,6,0C8.6,0,10.7,2.1,10.7,4.8z"/>
<line fill="#1A171B" x1="10.7" y1="6.6" x2="8.7" y2="6.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#1A171B" d="M0,7.6L0,16h12V7.6H0z M4.8,15L5.2,12l0.1-0.7
c-0.3-0.2-0.6-0.6-0.6-1.1c0-0.2,0-0.3,0.1-0.5C5,9.2,5.5,8.9,6,8.9c0.5,0,1,0.3,1.2,0.8c0.1,0.2,0.1,0.3,0.1,0.5
c0,0.5-0.2,0.8-0.6,1.1L6.8,12L7.2,15H4.8z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 969 B

12
src/img/icons/folder.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Isolationsmodus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="273 400 47 40" enable-background="new 273 400 47 40" xml:space="preserve">
<g id="_x32__6_">
<path fill="#231F20" d="M316,440h-39c-2.2,0-4-1.8-4-4v-23c0-2.2,1.8-4,4-4h39c2.2,0,4,1.8,4,4v23C320,438.2,318.2,440,316,440z
M277,411c-1.1,0-2,0.9-2,2v23c0,1.1,0.9,2,2,2h39c1.1,0,2-0.9,2-2v-23c0-1.1-0.9-2-2-2H277z"/>
<path fill="#231F20" d="M320,413h-2v-4c0-1.1-0.9-2-2-2h-20.8c-0.9,0-2.2-0.5-2.8-1.2l-3.2-3.2c-0.3-0.3-1-0.6-1.4-0.6H277
c-1.1,0-2,0.9-2,2v9h-2v-9c0-2.2,1.8-4,4-4h10.8c0.9,0,2.2,0.5,2.8,1.2l3.2,3.2c0.3,0.3,1,0.6,1.4,0.6H316c2.2,0,4,1.8,4,4V413z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 966 B

9
src/img/icons/forward_light.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M14.316 32v-8.526h-14.316v-15.474l14.316-0.105v-7.895l14.421 13.263 3.158 3.053-17.579 15.684zM1.895 21.579h14.316v6.211l12.842-11.474-1.684-1.684-11.158-10.316v5.474l-14.316 0.105v11.684z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 655 B

16
src/img/icons/inbox.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Isolationsmodus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="-0.4 133.7 595.7 570.8" enable-background="new -0.4 133.7 595.7 570.8" xml:space="preserve">
<path fill="#231F20" d="M565.6,492.5l-77.9-307.7l0-0.2c-2.6-11.4-14.7-21-26.4-21H131.6c-9.8,0-23.7,9.4-26.4,21l-0.1,0.2
L28.7,492.4l-29.1-7.2L76,177.7c5.7-24.3,30.6-44.1,55.6-44.1h329.7c25.4,0,49.8,19.3,55.6,44.1l77.8,307.4L565.6,492.5z"/>
<g>
<g>
<path fill="#231F20" d="M566.9,506v155.9c0,8.5-5.7,14.2-14.2,14.2H42.5c-8.5,0-14.2-5.7-14.2-14.2V506h144.6
c12.8,56.7,63.8,99.2,124.7,99.2c59.5,0,112-42.5,124.7-99.2H566.9 M595.3,477.6H409.6c-7.1,0-12.8,5.7-14.2,12.8
c-5.7,48.2-46.8,86.5-97.8,86.5s-92.1-38.3-97.8-86.5c-1.4-7.1-7.1-12.8-14.2-12.8H0v184.3c0,24.1,18.4,42.5,42.5,42.5h510.2
c24.1,0,42.5-18.4,42.5-42.5V477.6L595.3,477.6z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

9
src/img/icons/info.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13zM14 8h4v4h-4zM20 24h-8v-2h2v-6h-2v-2h6v8h2z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 656 B

17
src/img/icons/key.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Isolationsmodus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 57.1 59.1" enable-background="new 0 0 57.1 59.1" xml:space="preserve">
<path d="M11,59.1l-8.5-0.2c-0.5,0-1-0.4-1.1-1L0,46.2c0-0.3,0.1-0.6,0.3-0.9C0.5,45.1,0.8,45,1.1,45L6,45l0-4.7
c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3l4.6,0l0-4.6c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3l4.6,0l-0.1-6.4
c0-0.3,0.1-0.6,0.3-0.8l4.3-4.3C20.4,16,22.2,9.6,26.6,5.2C29.9,1.9,34.4,0,39.2,0c4.8,0,9.3,1.9,12.7,5.2c7,7,7,18.3,0,25.3
c-3.3,3.3-7.8,5.2-12.6,5.2c-1.4,0-2.7-0.2-4-0.4L11.8,58.8C11.6,59,11.3,59.1,11,59.1L11,59.1z M5.1,56.7l5.5,0.2l23.6-23.6
c0.3-0.3,0.7-0.4,1.1-0.3c1.3,0.3,2.7,0.5,4.1,0.5c4.2,0,8.1-1.6,11-4.5c6.1-6.1,6.1-16.1,0-22.2c-3-3-6.9-4.6-11.1-4.6
c-4.2,0-8.1,1.6-11.1,4.6c-3.9,3.9-5.5,9.8-3.9,15.3c0.1,0.4,0,0.8-0.3,1.1l-4.4,4.4l0.1,7c0,0.3-0.1,0.6-0.3,0.8
c-0.2,0.2-0.5,0.3-0.8,0.3l-4.6,0l0,4.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3l-4.6,0l0,4.7c0,0.3-0.1,0.6-0.3,0.8
c-0.2,0.2-0.5,0.3-0.8,0.3l-4.7,0l1,8.2L25,33.7c0.4-0.4,1.1-0.4,1.6,0c0.4,0.4,0.4,1.1,0,1.6L5.1,56.7L5.1,56.7z M43.8,19.1
c-1.5,0-3-0.6-4.1-1.7c-2.3-2.3-2.3-5.9,0-8.2c1.1-1.1,2.5-1.7,4.1-1.7c1.5,0,3,0.6,4.1,1.7c1.1,1.1,1.7,2.5,1.7,4.1s-0.6,3-1.7,4.1
C46.8,18.5,45.3,19.1,43.8,19.1L43.8,19.1z M43.8,9.7c-1,0-1.9,0.4-2.5,1c-1.4,1.4-1.4,3.7,0,5.1c0.7,0.7,1.6,1,2.5,1
c1,0,1.9-0.4,2.5-1c0.7-0.7,1-1.6,1-2.5c0-1-0.4-1.9-1-2.5C45.6,10.1,44.7,9.7,43.8,9.7L43.8,9.7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

9
src/img/icons/navicon.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="32" viewBox="0 0 45 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M0 0.271h45.176v6.035h-45.176zM0 25.694h45.176v6.037h-45.176zM0 12.89h45.176v6.037h-45.176z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 558 B

9
src/img/icons/offline.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M24 19.999l-5.713-5.713 13.713-10.286-4-4-17.141 6.858-5.397-5.397c-1.556-1.556-3.728-1.928-4.828-0.828s-0.727 3.273 0.828 4.828l5.396 5.396-6.858 17.143 4 4 10.287-13.715 5.713 5.713v7.999h4l2-6 6-2v-4l-7.999 0z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 679 B

9
src/img/icons/reply.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="32" viewBox="0 0 40 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M0 12.766l14.314-13.138v6.666c27.648 0 25.686 26.274 25.686 26.274-5.49-18.236-25.686-12.942-25.686-12.942v6.666l-14.314-13.526z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 595 B

9
src/img/icons/reply_all_light.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="32" viewBox="0 0 42 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M42.252 32l-1.533-4.407c-2.874-8.048-9.389-9.677-14.371-9.677-2.395 0-4.503 0.383-5.461 0.671l0.287 6.707-14.371-12.168 13.222-13.126 0.287 6.323c2.683-0.096 5.078 0.192 7.281 0.766h0.192l0.096 0.096c14.659 3.832 14.371 20.024 14.371 20.12v4.695zM26.347 16.192c4.503 0 10.156 1.245 13.796 6.515-0.958-4.695-3.928-11.689-12.742-13.892l-0.192-0.096c-2.204-0.575-4.79-0.766-7.665-0.671h-0.862l-0.192-4.216-9.102 9.006 9.964 8.431-0.192-4.024 0.671-0.192c0 0 2.874-0.862 6.515-0.862zM14.467 25.198l-14.467-12.168 13.222-13.030 0.383 5.365-1.725 0.192-0.192-1.629-9.102 9.006 9.868 8.335-0.096-1.533 1.725-0.192z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

9
src/img/icons/reply_light.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="32" viewBox="0 0 34 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M33.55 32l-1.276-4.194c-2.553-8.387-9.299-10.12-14.587-10.12-1.915 0-3.464 0.273-4.285 0.365v6.473l-13.402-12.49 13.402-12.034v6.199c6.655 0.182 11.761 2.188 15.316 6.017 5.835 6.291 5.197 15.043 5.197 15.407l-0.365 4.376zM17.778 15.954c3.92 0 10.484 1.003 14.222 7.020-0.456-2.917-1.641-6.655-4.467-9.755-3.373-3.647-8.387-5.47-14.86-5.47h-0.82v-4.103l-9.39 8.387 9.39 8.661v-4.011l0.638-0.182c0 0 2.188-0.547 5.288-0.547z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 890 B

9
src/img/icons/search.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M27.813 24.169l-5.3-5.369c0.863-1.506 1.313-3.181 1.313-4.869 0-5.475-4.45-9.931-9.912-9.931s-9.912 4.456-9.912 9.931c0 5.475 4.45 9.931 9.912 9.931 1.744 0 3.469-0.481 5.006-1.4l5.275 5.35c0.119 0.119 0.288 0.194 0.456 0.194s0.337-0.069 0.456-0.194l2.706-2.738c0.25-0.256 0.25-0.656 0-0.906zM13.912 7.869c3.338 0 6.050 2.719 6.050 6.063s-2.712 6.062-6.050 6.062c-3.338 0-6.050-2.719-6.050-6.063s2.712-6.063 6.050-6.063z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 887 B

12
src/img/icons/sent.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="_x2014_ŽÓť_x5F_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 24.8 24.8" enable-background="new 0 0 24.8 24.8" xml:space="preserve">
<g>
<path fill="#535353" d="M24.8,0l-9.6,24.8l-5-10.2L0,9.6L24.8,0z M15.1,22.4l8-20.6l-20.6,8l8.4,4.2L15.1,22.4z"/>
</g>
<g>
<rect x="8.1" y="7.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7414 14.3968)" fill="#535353" width="17.9" height="1"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 736 B

9
src/img/icons/star.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 137.6 598.5 566.6" enable-background="new 0 137.6 598.5 566.6" xml:space="preserve">
<path fill="#1A171B" d="M480.7,704.3L296,608.8l-184.6,95.5l35-203.7L0,354.1l206.9-28.6l92.3-187.8l92.3,187.8l206.9,28.6
L445.7,500.5L480.7,704.3z M54.1,373.2l121,117.8l-28.6,168.7L296,580.1l149.6,79.6L417,491l124.1-117.8l-168.7-25.5l-73.2-152.8
l-76.4,152.8L54.1,373.2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 748 B

8
src/img/icons/star_filled.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 137.6 598.5 566.6" enable-background="new 0 137.6 598.5 566.6" xml:space="preserve">
<path fill="#1A171B" d="M480.7,704.3L296,608.8l-184.6,95.5l35-203.7L0,354.1l206.9-28.6l92.3-187.8l92.3,187.8l206.9,28.6
L445.7,500.5L480.7,704.3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 622 B

16
src/img/icons/trash.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="3 47 589.3 746.5" enable-background="new 3 47 589.3 746.5" xml:space="preserve">
<g>
<path fill="#0A0A0A" d="M562.2,150.5c19.1,0,30,14.7,30,33v24.2c0,15.4-8.7,30.1-22.7,33v494.7c0,32.3-27.2,58-60.2,58H86.6
c-33,0-59.5-25.7-59.5-58v-494C12.5,238.5,3,223.9,3,207.7v-24.2c0-18.4,12.4-33,31.5-33h102v-44c0-32.3,25.7-59.5,59.5-59.5H400
c33,0,59.5,27.2,59.5,59.5v44H562.2z M521.5,757.1c4.4,0,9.1-8.9,9.1-14V190.2H65.4v553.6c0,5.1,3.7,13,9.5,13L521.5,757.1z
M182.8,687c-11.7,0-21.3-15.4-21.3-34.5V313.4c0-17.6,9.5-32.3,21.3-32.3h3.7c11,0,20.6,14.7,20.6,32.3v339.1
c0,18.4-9.5,34.5-20.6,34.5H182.8z M196,87.8c-5.1,0-8.1,2.9-8.1,7.3v56h220.9v-56c0-4.4-2.9-7.3-8.1-7.3
C400.8,87.8,196,87.8,196,87.8z M296.5,688.5c-11.7,0-21.3-15.4-21.3-34.5V314.9c0-17.6,9.5-32.3,21.3-32.3h2.9
c11.7,0,21.3,14.7,21.3,32.3V654c0,18.4-9.5,34.5-21.3,34.5H296.5z M414.7,688.5c-11.7,0-20.6-15.4-20.6-34.5V314.9
c0-17.6,8.8-32.3,20.6-32.3h2.9c11.7,0,21.3,14.7,21.3,32.3V654c0,18.4-9.5,34.5-21.3,34.5H414.7z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

9
src/img/icons/write.svg Executable file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37" height="32" viewBox="0 0 37 32">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M27.401 19.769l3.94-3.94v11.644c0 2.398-1.884 4.281-4.11 4.281l-23.12 0.002c-2.398 0-4.11-1.884-4.11-4.281v-22.949c0-2.397 1.884-4.281 4.11-4.281h23.461l-3.94 3.94h-18.151c-0.857 0-1.541 0.684-1.541 1.541v20.379c0 0.857 0.684 1.541 1.541 1.541h20.379c0.857 0 1.541-0.684 1.541-1.541v-6.336zM19.18 22.508l-4.11-4.11-1.541 5.652 5.652-1.541zM20.551 21.138l13.358-13.358-4.112-4.108-13.356 13.186 4.11 4.281zM35.449 6.411l1.884-1.884-4.281-4.281-1.884 1.884 4.281 4.281z" fill="#000000"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 934 B

5
src/index.html
View File

@ -33,6 +33,11 @@
<body key-shortcuts> <body key-shortcuts>
<!-- inline icons have to come first, hide immediately with inline styles -->
<div style="width: 0; height: 0; visibility: hidden;">
<!-- @import img/icons/all.svg -->
</div>
<div ng-view class="main-app-view"></div> <div ng-view class="main-app-view"></div>
<!-- error dialog lightbox --> <!-- error dialog lightbox -->

9
src/js/app.js
View File

@ -15,7 +15,6 @@ if (typeof window.applicationCache !== 'undefined') {
} }
var DialogCtrl = require('./controller/dialog'), var DialogCtrl = require('./controller/dialog'),
PopoverCtrl = require('./controller/popover'),
AddAccountCtrl = require('./controller/add-account'), AddAccountCtrl = require('./controller/add-account'),
AccountCtrl = require('./controller/account'), AccountCtrl = require('./controller/account'),
SetPassphraseCtrl = require('./controller/set-passphrase'), SetPassphraseCtrl = require('./controller/set-passphrase'),
@ -34,6 +33,7 @@ var DialogCtrl = require('./controller/dialog'),
NavigationCtrl = require('./controller/navigation'), NavigationCtrl = require('./controller/navigation'),
errorUtil = require('./util/error'), errorUtil = require('./util/error'),
backButtonUtil = require('./util/backbutton-handler'); backButtonUtil = require('./util/backbutton-handler');
require('./directives/common');
// init main angular module including dependencies // init main angular module including dependencies
var app = angular.module('mail', [ var app = angular.module('mail', [
@ -46,9 +46,9 @@ var app = angular.module('mail', [
'contacts', 'contacts',
'login-new-device', 'login-new-device',
'privatekey-upload', 'privatekey-upload',
'popover',
'infinite-scroll', 'infinite-scroll',
'ngTagsInput' 'ngTagsInput',
'woDirectives'
]); ]);
// set router paths // set router paths
@ -113,5 +113,4 @@ app.controller('SetPassphraseCtrl', SetPassphraseCtrl);
app.controller('PrivateKeyUploadCtrl', PrivateKeyUploadCtrl); app.controller('PrivateKeyUploadCtrl', PrivateKeyUploadCtrl);
app.controller('ContactsCtrl', ContactsCtrl); app.controller('ContactsCtrl', ContactsCtrl);
app.controller('AboutCtrl', AboutCtrl); app.controller('AboutCtrl', AboutCtrl);
app.controller('DialogCtrl', DialogCtrl); app.controller('DialogCtrl', DialogCtrl);
app.controller('PopoverCtrl', PopoverCtrl);

22
src/js/controller/mail-list.js
View File

@ -431,28 +431,6 @@ var MailListCtrl = function($scope, $routeParams) {
var ngModule = angular.module('mail-list', []); var ngModule = angular.module('mail-list', []);
ngModule.directive('woTouch', function($parse) {
return function(scope, elm, attrs) {
var handler = $parse(attrs.woTouch);
elm.on('touchstart', function() {
elm.addClass('active');
});
elm.on('touchleave touchcancel touchmove touchend', function() {
elm.removeClass('active');
});
elm.on('click', function(event) {
elm.removeClass('active');
scope.$apply(function() {
handler(scope, {
$event: event
});
});
});
};
});
ngModule.directive('listScroll', function() { ngModule.directive('listScroll', function() {
return { return {
link: function(scope, elm, attrs) { link: function(scope, elm, attrs) {

43
src/js/controller/popover.js
View File

@ -1,43 +0,0 @@
'use strict';
//
// Controller
//
var PopoverCtrl = function($scope) {
$scope.state.popover = {};
};
//
// Directives
//
var ngModule = angular.module('popover', []);
ngModule.directive('popover', function() {
return function(scope, elm, attrs) {
var selector = attrs.popover;
var popover = angular.element(document.querySelector(selector));
elm.on('mouseover', function() {
// set popover position
var top = elm[0].offsetTop;
var left = elm[0].offsetLeft;
var width = elm[0].offsetWidth;
var height = elm[0].offsetHeight;
popover[0].style.transition = 'opacity 0.3s linear';
popover[0].style.top = (top + height / 2 - popover[0].offsetHeight / 2) + 'px';
popover[0].style.left = (left + width) + 'px';
popover[0].style.opacity = '1';
});
elm.on('mouseout', function() {
popover[0].style.transition = 'opacity 0.3s linear, top 0.3s step-end, left 0.3s step-end';
popover[0].style.opacity = '0';
popover[0].style.top = '-9999px';
popover[0].style.left = '-9999px';
});
};
});
module.exports = PopoverCtrl;

2
src/js/controller/write.js
View File

@ -384,7 +384,7 @@ var WriteCtrl = function($scope, $filter, $q) {
$scope.tagStyle = function(recipient) { $scope.tagStyle = function(recipient) {
var classes = ['label']; var classes = ['label'];
if (recipient.secure === false) { if (recipient.secure === false) {
classes.push('label-primary'); classes.push('label--invalid');
} }
return classes; return classes;
}; };

129
src/js/directives/common.js Normal file
View File

@ -0,0 +1,129 @@
'use strict';
var ngModule = angular.module('woDirectives', []);
ngModule.directive('woTouch', function($parse) {
var className = 'wo-touch-active';
return function(scope, elm, attrs) {
var handler = $parse(attrs.woTouch);
elm.on('touchstart', function() {
elm.addClass(className);
});
elm.on('touchleave touchcancel touchmove touchend', function() {
elm.removeClass(className);
});
elm.on('click', function(event) {
elm.removeClass(className);
scope.$apply(function() {
handler(scope, {
$event: event
});
});
});
};
});
ngModule.directive('woTooltip', function($document, $timeout) {
return function(scope, elm, attrs) {
var selector = attrs.woTooltip;
var tooltip = $document.find(selector);
elm.on('mouseover', function() {
// Compute tooltip position
var offsetElm = elm.offset();
var offsetTooltipParent = tooltip.offsetParent().offset();
// Set tooltip position
tooltip[0].style.top = (offsetElm.top - offsetTooltipParent.top +
elm[0].offsetHeight / 2 - tooltip[0].offsetHeight / 2) + 'px';
tooltip[0].style.left = (offsetElm.left - offsetTooltipParent.left +
elm[0].offsetWidth) + 'px';
// Wait till browser repaint
$timeout(function() {
tooltip.addClass('tooltip--show');
});
});
elm.on('mouseout', function() {
tooltip.removeClass('tooltip--show');
tooltip[0].style.top = '-9999px';
tooltip[0].style.left = '-9999px';
});
};
});
ngModule.directive('woDropdown', function($document, $timeout) {
return function(scope, elm, attrs) {
var selector = attrs.woDropdown;
var position = attrs.woDropdownPosition;
var dropdown = $document.find(selector);
function appear() {
// Compute dropdown position
var offsetElm = elm.offset();
var offsetDropdownParent = dropdown.offsetParent().offset();
// Set dropdown position
dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top +
elm[0].offsetHeight) + 'px';
switch (position) {
case 'center':
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
elm[0].offsetWidth / 2 - dropdown[0].offsetWidth / 2) + 'px';
break;
case 'right':
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
elm[0].offsetWidth - dropdown[0].offsetWidth) + 'px';
break;
default:
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left) + 'px';
}
// Wait till browser repaint
$timeout(function() {
dropdown.addClass('dropdown--show');
});
// class on element to change style if drowdown is visible
elm.addClass('wo-dropdown-active');
}
function disappear() {
dropdown.removeClass('dropdown--show');
dropdown[0].style.top = '-9999px';
dropdown[0].style.left = '-9999px';
elm.removeClass('wo-dropdown-active');
}
function toggle() {
if (dropdown.hasClass('dropdown--show')) {
disappear();
} else {
appear();
}
}
elm.on('touchstart click', toggle);
// close if user clicks outside of dropdown and elm
$document.on('touchstart.woDropdown click.woDropdown', function(e) {
var t = angular.element(e.target);
if (!t.closest(dropdown).length &&
!t.closest(elm).length) {
disappear();
}
});
// remove event listener on document
scope.$on('$destroy', function() {
$document.off('touchstart.woDropdown click.woDropdown');
});
};
});
module.exports = ngModule;

7
src/sass/_functions.scss
View File

@ -1,7 +0,0 @@
@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
View File

@ -1,15 +0,0 @@
// 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
View File

@ -1,54 +0,0 @@
// 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
View File

@ -1,396 +0,0 @@
/*! 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;
}

34
src/sass/_responsive.scss
View File

@ -1,34 +0,0 @@
// Central Media Query Helper
// -------------------------
@mixin respond-to($media) {
@if $media == mobile {
@media only screen and (max-width: $respond-size-desktop - 1) { @content; }
}
@else 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; }
}

84
src/sass/_variables.scss
View File

@ -1,84 +0,0 @@
// 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-black: #000;
$color-white: #fff;
$color-blue: #00c6ff;
$color-red: #ff878d;
$color-grey: #666;
$color-grey-input: #949494;
$color-grey-dark: #333;
$color-grey-medium: #999;
$color-grey-light: #ccc;
$color-grey-lighter: #ddd;
$color-grey-lighterer: #f0eff5;
$color-grey-lightest: #f9f9f9;
$color-grey-dark-alpha: rgba(0, 0, 0, 0.80);
// Layout
// -------------------------------------------
$respond-size-desktop: 768px;
$content-nav-width: 344px;
// Animations
// -------------------------------------------
$time-nav-animation: 0.15s;
$time-li-fade: 0.15s;
// Components
// -------------------------------------------
$scrollbar-width: 10px;
$nav-max-width: 347px;
$nav-width: 80%;
$nav-padding: 15px;
$lightbox-padding: 15px;
$lightbox-max-width: 662px;
$lightbox-width: 90%;
$lightbox-min-height: 644px;
$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: $color-red;
$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;

66
src/sass/all.scss
View File

@ -1,36 +1,28 @@
// Utilities
@import "mixins";
@import "functions";
@import "grid";
// Third party libs // Third party libs
@import "lib/angular-csp"; // use angular csp specific classes @import "lib/angular-csp"; // use angular csp specific classes
@import "lib/scut"; @import "lib/scut";
@import "lib/normalize";
// Config
@import "base/config"; // Modify this for custom colors, font-sizes, etc
// Mixins
@import "mixins/responsive";
@import "mixins/scrollbar";
// Bootstrap // Bootstrap
@import "normalize"; @import "base/fonts";
@import "variables"; // Modify this for custom colors, font-sizes, etc @import "base/scaffolding";
@import "fonts";
@import "responsive";
@import "scaffolding";
// Components // Utilities classes
@import "components/buttons";
@import "components/labels"; @import "mixins/responsive";
@import "components/icons";
// Components (TODO: refactor to BEM)
@import "components/lightbox"; @import "components/lightbox";
@import "components/nav";
@import "components/dialog"; @import "components/dialog";
@import "components/mail-list";
@import "components/layout";
@import "components/popover";
@import "components/input";
@import "components/mail-addresses";
@import "components/spinner";
@import "components/scrollbars";
@import "components/tags-input";
// Views // Views (TODO: refactor to BEM)
@import "views/shared"; @import "views/shared";
@import "views/add-account"; @import "views/add-account";
@import "views/account"; @import "views/account";
@ -39,8 +31,24 @@
@import "views/contacts"; @import "views/contacts";
@import "views/about"; @import "views/about";
@import "views/dialog"; @import "views/dialog";
@import "views/navigation"; @import "views/login";
@import "views/mail-list";
@import "views/read"; // Blocks
@import "views/write"; // (BEM-like Naming, see http://cssguidelin.es/#bem-like-naming)
@import "views/login";
@import "blocks/basics/buttons";
@import "blocks/basics/labels";
@import "blocks/basics/form";
@import "blocks/basics/spinner";
@import "blocks/basics/tags-input";
@import "blocks/basics/mail-addresses";
@import "blocks/basics/attachments";
@import "blocks/basics/tooltip";
@import "blocks/basics/dropdown";
@import "blocks/layout/app";
@import "blocks/layout/nav";
@import "blocks/layout/action-bar";
@import "blocks/layout/mail-list-wrapper";
@import "blocks/views/mail-list";
@import "blocks/views/read";
@import "blocks/views/write";

59
src/sass/base/_config.scss Executable file
View File

@ -0,0 +1,59 @@
// Typography
// -------------------------------------------
$font-size-base: 16px;
$font-size-small: 14px;
$font-size-smaller: 12px;
$font-size-big: 18px;
$font-size-bigger: 22px;
$font-family-base: "PT Sans", Arial, sans-serif;
$line-height-base: 20 / 16;
// Colors
// -------------------------------------------
$color-black: #000;
$color-white: #fff;
$color-blue: #00c6ff;
$color-red: #ff878d;
$color-grey: #666;
$color-grey-input: #949494;
$color-grey-dark: #333;
$color-grey-medium: #999;
$color-grey-light: #ccc;
$color-grey-lighter: #ddd;
$color-grey-lighterer: #f0eff5;
$color-grey-lightest: #f9f9f9;
$color-grey-dark-alpha: rgba(0, 0, 0, 0.80);
// Semantic Colors
// -------------------------------------------
$color-bg: $color-white;
$color-text: $color-grey-dark;
$color-text-light: $color-grey-medium;
$color-main: $color-blue;
$color-main-text: $color-white;
$color-error: $color-red;
$color-error-text: $color-white;
$color-border-light: $color-grey-lighter;
$color-touch-active: rgba(0, 0, 0, 0.1);
// Breakpoints
// -------------------------------------------
$screen-sm-max: 840px;
$screen-md-min: 841px;
$screen-md-max: 1280px;
$screen-lg-min: 1281px;
// Layout
// -------------------------------------------
$content-nav-width: 344px;
$lightbox-padding: 15px;
$lightbox-max-width: 662px;
$lightbox-width: 90%;
$lightbox-min-height: 644px;

14
src/sass/_fonts.scss → src/sass/base/_fonts.scss
View File

@ -12,18 +12,4 @@
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local('PT Sans Bold'), local('PTSans-Bold'), url('../font/pt-sans-bold.woff') format('woff'); 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;
} }

20
src/sass/_scaffolding.scss → src/sass/base/_scaffolding.scss
View File

@ -1,21 +1,23 @@
// Reset the box-sizing
@include scut-reset-pointer;
@include scut-reset-semanticize;
@include scut-reset-button;
*, *,
*:before, *:before,
*:after { *:after {
box-sizing: border-box; box-sizing: border-box;
// remove flickering on item touch selection in ios // remove flickering on item touch selection in ios
-webkit-tap-highlight-color: transparent !important; -webkit-tap-highlight-color: transparent !important;
} }
// Body reset @include scrollbar();
// Body reset
html { html {
font-size: 62.5%; font-size: 62.5%;
height: 100%; height: 100%;
} }
body { body {
font-family: $font-family-base; font-family: $font-family-base;
font-size: $font-size-base; font-size: $font-size-base;
@ -40,13 +42,11 @@ textarea {
} }
fieldset { fieldset {
border: 1px solid $color-grey-lighter; border: 1px solid $color-grey-lighter;
} }
// Basic layout // ngView
.main-app-view { .main-app-view {
height: 100%; height: 100%;
overflow: hidden;
// allow text selection }
user-select: none;
}

69
src/sass/blocks/basics/_attachments.scss Normal file
View File

@ -0,0 +1,69 @@
.attachments {
$height: 40px; // same height as subject in write view
$padding: 5px;
$li-height: $height - 2 * $padding - 2 * 1px;
list-style: none;
border: 1px solid $color-border-light;
margin: 0;
padding: $padding $padding 0 $padding;
text-align: left;
& > li {
display: inline-block;
height: $li-height;
max-width: 100%;
line-height: $li-height - 1px;
border-radius: 0.5 * ($li-height);
vertical-align: middle;
margin-right: $padding;
margin-bottom: $padding;
padding: 0 10px;
border: 1px solid $color-border-light;
cursor: pointer;
@include scut-truncate;
&:first-child {
margin-left: 0;
}
& > svg {
display: inline-block;
height: 0.8em;
width: 0.8em;
fill: $color-text-light;
vertical-align: baseline;
}
&:hover,
&:focus {
background-color: darken($color-bg, 5%);
}
}
&__delete {
display: inline-block;
border: none;
background: none;
outline: none;
margin-left: 0.3em;
margin-top: -0.2em; // correct vertical position
padding: 0;
vertical-align: middle;
height: 1em;
line-height: 1em;
& > svg {
width: 1em;
height: 1em;
fill: $color-text-light;
vertical-align: baseline;
}
&:hover,
&:focus {
svg {
fill: darken($color-text-light, 5%);
}
}
}
}

325
src/sass/blocks/basics/_buttons.scss Executable file
View File

@ -0,0 +1,325 @@
// Regular buttons with disabled support
// -------------------------------------------
.btn {
position: relative;
display: inline-block;
padding: 0.5em 0.7em;
font-size: $font-size-big;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 0;
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: $color-main;
color: $color-main-text;
transition: background-color 0.3s;
text-decoration: none;
font-weight: normal;
outline: none;
min-width: 5em;
& > svg {
width: 1em;
height: 1em;
fill: $color-main-text;
// for better valignment
position: relative;
top: 0.15em;
}
&:hover,
&:focus {
background-color: lighten($color-main, 10%);
}
&:active {
background-image: none;
box-shadow: none;
transform: translateX(2px) translateY(2px);
}
&[disabled],
&[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
color: $color-white;
background-color: $color-grey-lighter;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
& > svg {
fill: $color-white;
}
@include scut-hd-bp {
background-size: 3px 3px;
}
}
// Invalid button state
&--invalid {
background-color: $color-error;
color: $color-error-text;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
& > svg {
fill: $color-error-text;
}
@include scut-hd-bp {
background-size: 3px 3px;
}
&:hover,
&:focus {
background-color: lighten($color-error, 5%);
}
}
// Secondary button
&--secondary {
background-color: $color-grey-input;
&:hover,
&:focus {
background-color: lighten($color-grey-input, 10%);
}
}
// Small lightweight button
&--light {
height: 2em;
padding: 0.3em 0.5em;
font-size: $font-size-base;
border: 1px solid $color-main;
background: transparent;
color: $color-main;
& > svg {
fill: $color-main;
}
&:hover,
&:focus {
background-color: rgba($color-main, 0.1);
}
&[disabled],
&[aria-disabled="true"] {
color: $color-grey;
border-color: $color-grey;
background: transparent;
& > svg {
fill: $color-grey;
}
}
}
// Small lightweight dropdown button
&--light-dropdown {
height: 2em;
padding: 0.3em 0.5em;
font-size: $font-size-base;
border: 1px solid $color-main;
background: transparent;
color: $color-main;
text-align: left;
min-width: 0;
& > svg {
fill: $color-main;
}
.btn__dropdown {
margin-left: 0.75em;
top: 0.2em; // optimized valignment
}
&:hover,
&:focus {
background-color: rgba($color-main, 0.1);
}
&[disabled],
&[aria-disabled="true"] {
color: $color-grey;
border-color: $color-grey;
background: transparent;
& > svg {
fill: $color-grey;
}
}
// special class if icon button is used as dropdown
&.wo-dropdown-active {
background-color: $color-main;
color: $color-main-text;
& > svg {
fill: $color-main-text;
}
}
}
}
.btn-navicon {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
outline: 0;
& > svg {
fill: $color-blue;
width: 2em;
height: 2em;
vertical-align: middle;
}
}
// Icon Button
// -------------------------------------------
.btn-icon {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
border: 2px solid $color-main;
border-radius: 50%;
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
text-decoration: none;
font-weight: normal;
font-size: $font-size-base;
background: transparent;
line-height: 1;
height: 2.7em;
width: 2.7em;
text-align: center;
outline: none;
-webkit-font-smoothing: antialiased;
& > svg {
width: 1.05em;
height: 1.05em;
fill: $color-main;
vertical-align: middle;
margin-top: -0.1em; // optimize valignment
}
&--disabled,
&[disabled],
&[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
color: $color-grey;
box-shadow: 0 0 0 2px $color-grey;
& > svg {
fill: $color-grey;
}
}
&:active {
transform: translateX(2px) translateY(2px);
}
&:hover,
&:focus {
background-color: rgba($color-main, 0.1);
}
// special class if icon button is used as dropdown
&.wo-dropdown-active {
background-color: $color-main;
color: $color-main-text;
& > svg {
fill: $color-main-text;
}
}
}
// Light icon button without any border
// -------------------------------------------
.btn-icon-light {
position: relative;
display: inline-block;
background: transparent;
border-radius: 0;
border: 0;
padding: 0;
margin: 0;
font-size: $font-size-base;
transition: opacity 0.3s;
outline: 0;
& > svg {
width: 1.5em;
height: 1.5em;
fill: $color-main;
}
&--disabled,
&[disabled],
&[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
& > svg {
fill: $color-text-light;
}
}
&:active {
transform: translateX(1px) translateY(1px);
}
}
// Very small and light icon button without any border
// -------------------------------------------
.btn-icon-very-light {
position: relative;
display: inline-block;
background: transparent;
border-radius: 0;
border: 0;
padding: 0;
margin: 0;
font-size: $font-size-base;
opacity: 0.5;
transition: opacity 0.3s;
outline: 0;
&:focus,
&:hover {
opacity: 1;
}
& > svg {
width: 1em;
height: 1em;
fill: $color-text-light;
}
&--disabled,
&[disabled],
&[aria-disabled="true"] {
display: none;
}
&:active {
transform: translateX(1px) translateY(1px);
}
}

61
src/sass/blocks/basics/_dropdown.scss Normal file
View File

@ -0,0 +1,61 @@
.dropdown {
position: absolute;
top: -9999px;
left: -9999px;
display: block;
z-index: 9000;
max-width: 300px;
text-align: left;
font-size: $font-size-base;
background: $color-bg;
color: $color-main;
border: 1px solid $color-main;
margin: 2px 0 0;
padding: 0;
list-style: none;
will-change: opacity, transform;
transition: opacity 0.3s, top 0.3s step-end, left 0.3s step-end, transform 0.3s step-end;
opacity: 0;
transform: translateY(10px);
li {
&:after {
display: block;
content: '';
height: 0;
margin: 0 10px;
border-bottom: 1px solid $color-border-light;
}
&:last-child:after {
display: none;
}
}
button {
display: block;
background: none;
width: 100%;
border: 0;
outline: 0;
padding: 0.5em 15px 0.5em 15px;
color: $color-main;
text-align: left;
& > svg {
display: inline-block;
width: 2em;
height: 1em;
vertical-align: middle;
fill: $color-main;
}
&:hover,
&:focus {
background-color: darken($color-bg, 2%);
}
}
&--show {
transition: opacity 0.3s, transform 0.2s ease-out;
opacity: 1;
transform: none;
}
}

80
src/sass/blocks/basics/_form.scss Normal file
View File

@ -0,0 +1,80 @@
.input-text {
background-color: white;
border: 1px solid $color-border-light;
color: $color-text;
font-size: $font-size-base;
padding: 0.5em 0.7em;
outline: none;
// ios
border-radius: 0;
-webkit-appearance: none;
&::placeholder {
color: $color-text-light;
}
&:invalid,
&.ng-invalid,
&--error {
border-color: $color-error;
}
}
.input-error-message {
margin: 5px 0;
padding: 0;
color: $color-error;
font-size: $font-size-base;
}
.search {
position: relative;
width: 100%;
.input-text {
width: 100%;
padding-left: 1.8em;
}
& > svg {
position: absolute;
left: 0.7em;
fill: $color-text-light;
top: 0.7em;
height: 1em;
width: 1em;
}
}
.checkbox {
input[type="checkbox"] {
display: none;
&:checked + span svg {
opacity: 1;
transform: scale(1, 1);
}
}
span {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1em;
border: 1px solid $color-text-light;
text-align: center;
svg {
display: inline-block;
fill: $color-main;
height: 90%;
width: 90%;
opacity: 0;
transform: scale(0.5, 0.5);
transform-origin: center center;
transition: opacity 0.2s, transform 0.2s;
}
}
&:hover,
&:focus {
span {
border-color: $color-text;
}
}
}

62
src/sass/blocks/basics/_labels.scss Executable file
View File

@ -0,0 +1,62 @@
.label {
display: inline-block;
padding: 0.3em 0.8em;
font-size: $font-size-small;
text-align: center;
vertical-align: middle;
border-radius: 1em;
white-space: nowrap;
background-color: $color-main;
color: $color-main-text;
transition: background-color 0.3s;
& > svg {
display: inline-block;
fill: $color-main;
width: 1.5em;
height: 1em;
vertical-align: baseline;
}
&--invalid {
background-color: $color-error;
color: $color-error-text;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
& > svg {
fill: $color-error;
}
@include scut-hd-bp {
background-size: 3px 3px;
}
}
&--invalid-clickable {
position: relative;
&:hover,
&:focus {
transition: none;
background-color: lighten($color-main, 5%);
}
&:active,
&.active {
top: 1px;
left: 1px;
}
}
&--blank {
background-color: transparent;
color: $color-black;
text-align: left;
padding-left: 0;
padding-right: 0;
& > svg {
fill: $color-black;
}
}
}

48
src/sass/blocks/basics/_mail-addresses.scss Normal file
View File

@ -0,0 +1,48 @@
.mail-addresses {
position: relative;
margin-bottom: 0.2em;
padding-left: 3em;
& > label {
position: absolute;
top: 0;
left: 0;
width: 3em;
line-height: 1.5em; // valign with .label
color: $color-text-light;
text-align: left;
}
.label {
margin-right: 0.2em;
margin-bottom: 0.2em;
}
&__more {
position: relative;
z-index: 1;
float: right;
line-height: 1.5em; // valign with .label
& > button {
display: inline-block;
background: none;
padding: 0;
margin: 0 0 0 1em;
text-decoration: none;
color: $color-black;
transition: color 0.3s;
border: 0;
outline: 0;
&:hover,
&:focus {
color: $color-blue;
text-decoration: underline;
}
&.ng-animate {
transition: none;
}
}
}
}

8
src/sass/components/_spinner.scss → src/sass/blocks/basics/_spinner.scss
View File

@ -5,10 +5,10 @@
height: 1em; height: 1em;
width: 1em; width: 1em;
animation: spinner-rotation .6s linear infinite; animation: spinner-rotation .6s linear infinite;
border-left: 0.17em solid $color-grey-light; border-left: 0.17em solid rgba($color-black, 0.2);
border-right: 0.17em solid $color-grey-light; border-right: 0.17em solid rgba($color-black, 0.2);
border-bottom: 0.17em solid $color-grey-light; border-bottom: 0.17em solid rgba($color-black, 0.2);
border-top: 0.17em solid $color-grey; border-top: 0.17em solid rgba($color-black, 0.7);
border-radius: 100%; border-radius: 100%;
} }

0
src/sass/components/_tags-input.scss → src/sass/blocks/basics/_tags-input.scss
View File

62
src/sass/blocks/basics/_tooltip.scss Normal file
View File

@ -0,0 +1,62 @@
.tooltip {
position: absolute;
top: -9999px;
left: -9999px;
display: block;
z-index: 9000;
max-width: 276px; // choosen arbitrarily
padding: 1px;
text-align: left;
font-size: $font-size-small;
background-color: $color-bg;
color: $color-text;
border: 1px solid $color-border-light;
margin-left: 10px;
will-change: opacity, transform;
transition: opacity 0.3s, top 0.3s step-end, left 0.3s step-end, transform 0.3s step-end;
opacity: 0;
transform: translateX(10px);
&__title {
margin: 0;
padding: 9px 14px;
font-weight: bold;
background-color: darken($color-grey-lightest, 5%);
border-bottom: 1px solid $color-bg;
}
&__content {
padding: 9px 14px;
background-color: $color-grey-lightest;
}
&__arrow,
&__arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
&__arrow {
border-width: 11px;
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: $color-border-light;
}
&__arrow:after {
border-width: 10px;
content: " ";
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: $color-grey-lightest;
}
&--show {
transition: opacity 0.3s, transform 0.2s ease-out;
opacity: 1;
transform: none;
}
}

20
src/sass/blocks/layout/_action-bar.scss Normal file
View File

@ -0,0 +1,20 @@
.action-bar {
@include scut-clearfix;
padding: 24px 20px 0 0; // magic number to vcenter buttons
&__primary {
float: left;
}
&__secondary {
float: left;
margin-left: 20px;
}
&__search {
float: right;
margin-left: 20px;
width: 20em;
}
.btn {
margin-right: 0.2em;
}
}

108
src/sass/blocks/layout/_app.scss Normal file
View File

@ -0,0 +1,108 @@
// Main Application Layout
.app {
$aside-width: 260px;
$aside-width-lg: 220px;
$header-height: 80px;
position: relative;
height: 100%;
// disable text selection
user-select: none;
&__aside {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: $aside-width;
background: $color-main;
color: $color-main-text;
overflow: auto;
-webkit-overflow-scrolling: touch;
@include scrollbar(main);
// hide scrollbar in webkit
&::-webkit-scrollbar {
display: none;
}
@include respond-to(not-lg) {
transform: translateX(-100%);
}
@include respond-to(lg) {
width: $aside-width-lg;
background: $color-bg;
color: $color-text;
@include scrollbar(base);
}
}
&__container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
@include respond-to(not-lg) {
&:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.2);
width: 100%;
height: 100%;
transform: translateX(110%); // translate offscreen
}
}
@include respond-to(lg) {
left: $aside-width-lg;
}
}
&__header {
display: none;
@include respond-to(lg) {
display: block;
height: $header-height;
}
}
&__main {
height: 100%;
@include respond-to(lg) {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
top: $header-height;
border-top: 1px solid $color-border-light;
border-left: 1px solid $color-border-light;
}
}
// Modifier to open sidebar
&--show-aside {
@include respond-to(not-lg) {
transform: translateX($aside-width);
.app__container:after {
transform: none;
}
}
}
// Animation
@include respond-to(not-lg) {
will-change: transform;
transform-style: preserve3d;
transition: transform 0.15s ease-out;
.app__container:after {
will-change: transform;
transform-style: preserve3d;
}
}
}

47
src/sass/blocks/layout/_mail-list-wrapper.scss Normal file
View File

@ -0,0 +1,47 @@
// Mail list wrapper
//
// Two-column layout in tablet mode (medium screens).
.mail-list-wrapper {
$aside-width: 344px;
position: relative;
height: 100%;
&__aside {
display: none;
height: 100%;
overflow: hidden;
@include respond-to(md-only) {
display: block;
position: absolute;
left: 0;
top: 0;
width: $aside-width;
border-right: 1px solid $color-border-light;
}
}
&__container {
height: 100%;
@include respond-to(md-only) {
position: absolute;
left: $aside-width;
top: 0;
right: 0;
}
}
// Modifier to open sidebar
&--show-aside {
@include respond-to(not-md) {
.mail-list-wrapper__aside {
display: block;
}
.mail-list-wrapper__container {
display: none;
}
}
}
}

199
src/sass/blocks/layout/_nav.scss Executable file
View File

@ -0,0 +1,199 @@
// Main Navigation Menu
.nav {
$nav-padding-h: 10px;
$footer-height: 30px;
min-height: 100%;
position: relative;
padding: 10px $nav-padding-h;
background: $color-main;
color: $color-main-text;
h1 {
@include scut-image-replace();
background: url(../img/whiteout_logo_light.svg) left top no-repeat;
background-size: contain;
height: 26px;
margin-bottom: 40px;
}
&__write {
display: none;
}
&__folders {
padding: 0;
margin: 0 0 15px;
list-style: none;
& + .nav__folders {
border-top: 1px solid $color-main-text;
margin-top: 15px;
padding-top: 15px;
}
}
&__folder {
position: relative;
font-size: $font-size-bigger;
margin-bottom: 10px;
padding-right: 40px;
&:last-child {
margin-bottom: 0;
}
a {
@include scut-truncate;
display: block;
color: $color-white;
text-decoration: none;
& > svg {
fill: $color-white;
width: 20px;
height: 1em;
vertical-align: baseline;
margin-right: 5px;
}
}
.btn-icon-very-light {
display: none;
}
&--open {
font-weight: bold;
}
}
&__counter {
display: block;
position: absolute;
right: 0;
top: 0.2em;
width: 2.2em;
height: 1.5em;
line-height: 1.5em;
border-radius: 0.5 * 1.5em;
text-align: center;
background: $color-main-text;
color: $color-main;
font-size: $font-size-base;
font-weight: bold;
}
&__secondary {
margin: 30px 0 15px;
border-top: 1px solid $color-main-text;
padding: 15px 0 0;
list-style: none;
& > li {
font-size: $font-size-big;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
a {
display: block;
color: $color-white;
text-decoration: none;
& > svg {
fill: $color-white;
width: 20px;
height: 1em;
vertical-align: baseline;
margin-right: 5px;
}
}
&--open {
font-weight: bold;
}
}
}
& > footer {
display: none;
}
@include respond-to(lg) {
padding-top: 27px; // magic number to valign logo with action bar
padding-bottom: $footer-height;
background: $color-bg;
color: $color-text;
h1 {
height: 26px;
margin-bottom: 27px;
background-position: center center;
background-image: url(../img/whiteout_logo.svg);
}
&__write {
display: block;
margin-bottom: 20px;
.btn {
width: 100%;
}
}
&__folders + .nav__folders {
border-top-color: $color-border-light;
}
&__folder {
font-size: $font-size-base;
padding-left: 5px;
padding-right: 20px;
margin-bottom: 12px;
a {
color: $color-main;
& > svg {
fill: $color-main;
}
}
.btn-icon-very-light {
display: block;
position: absolute;
right: 0;
top: 0.25em;
}
}
&__counter {
display: inline;
position: static;
font-weight: inherit;
font-size: inherit;
&:before {
content: '(';
}
&:after {
content: ')';
}
}
&__secondary {
border-top-color: $color-border-light;
& > li {
font-size: $font-size-small;
padding-left: 5px;
padding-right: 5px;
a {
color: $color-text-light;
& > svg {
fill: $color-text-light;
}
}
}
}
& > footer {
display: block;
position: absolute;
bottom: 0;
left: $nav-padding-h;
right: $nav-padding-h;
height: $footer-height;
border-top: 1px solid $color-border-light;
font-size: $font-size-smaller;
line-height: $footer-height - 4px;
color: $color-text-light;
svg {
display: inline-block;
height: 1.5em;
width: 1.5em;
padding-right: 0.5em;
fill: $color-text-light;
vertical-align: middle;
}
}
}
}

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

@ -0,0 +1,458 @@
// Container for mail list entries
.mail-list {
$padding-horizontal: 15px;
$padding-vertical: 10px;
$footer-height: 30px;
// do not share any common styles between large and other screens
// because styling is very different
@include respond-to(not-lg) {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: $color-bg;
color: $color-text;
& > header {
position: relative;
flex-shrink: 0;
padding: $padding-horizontal ($padding-vertical + 5px);
cursor: pointer;
.btn-navicon {
float: left;
margin-right: 1em;
}
h2 {
@include scut-truncate;
padding-top: 4px; // depends on height of .btn-navicon
padding-right: 50px; // depends on with of .btn-icon
color: $color-grey-dark;
font-size: $font-size-bigger;
font-weight: normal;
}
.btn-icon {
position: absolute;
top: $padding-vertical;
right: $padding-horizontal;
margin-top: -0.05em; // for perfect vertical alignment with headline
}
&.wo-touch-active {
background: $color-touch-active;
}
}
&__search {
flex-shrink: 0;
padding: 0 $padding-horizontal $padding-vertical;
}
&__scroll-canvas {
flex-grow: 1;
padding: 0 $padding-horizontal;
overflow-y: scroll;
// allow scrolling on iOS
-webkit-overflow-scrolling: touch;
// put layer on GPU
transform: translateZ(0);
// hide scrollbar in webkit
&::-webkit-scrollbar {
display: none;
}
}
&__entries {
list-style: none;
margin: 0;
padding: 0;
}
& > footer {
flex-shrink: 0;
position: relative;
height: $footer-height;
padding: 0 $padding-horizontal;
background: $color-bg;
width: 100%;
font-size: $font-size-smaller;
color: $color-text;
line-height: $footer-height - 4px;
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: $padding-horizontal;
right: $padding-horizontal;
height: 0;
border-top: 1px solid $color-grey-medium;
}
svg {
display: inline-block;
height: 1.5em;
width: 1.5em;
padding-right: 0.5em;
fill: $color-text;
vertical-align: middle;
}
}
}
@include respond-to(md) {
& > header {
padding: $padding-vertical $padding-horizontal;
h2 {
padding-right: 0;
}
.btn-icon {
display: none;
}
}
}
@include respond-to(lg) {
height: 100%;
background: $color-border-light;
& > header {
display: none;
}
&__search {
display: none;
}
& > footer {
display: none;
}
&__scroll-canvas {
height: 100%;
overflow-y: scroll;
// allow scrolling on iOS
-webkit-overflow-scrolling: touch;
// hide scrollbar in webkit
&::-webkit-scrollbar {
display: none;
}
}
&__entries {
display: table; // import for mail list entry desktop layout
table-layout: fixed;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
}
}
// Individual mail list entries with several states
.mail-list-entry {
// do not share any common styles between large and other screens
// because styling is very different
@include respond-to(not-lg) {
$padding-horizontal: 30px;
$padding-vertical: 11px;
position: relative;
display: block;
padding: $padding-vertical $padding-horizontal;
cursor: pointer;
margin-top: 11px;
&:before {
content: '';
display: block;
position: absolute;
top: -6px;
left: 0;
right: 0;
height: 0;
border-top: 1px solid $color-border-light;
}
&:first-child {
margin-top: 0;
&:before {
display: none;
}
}
&:last-child {
margin-bottom: 5px;
}
// Flags
&__flags {
position: absolute;
top: $padding-vertical;
left: 0;
list-style: none;
margin: 0;
padding: 0;
width: $padding-horizontal;
line-height: 22px; // roughly valign with lines of main content
& > li {
font-size: 90%;
text-align: center;
& > svg {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
}
}
}
&__flags-unread {
display: none; // hidden in default state
&:after {
display: inline-block;
content: '';
width: 1em;
height: 1em;
border-radius: 50%;
background-color: $color-main;
vertical-align: middle;
}
}
&__flags-checked {
display: none; // feature on touch layout not available for now
}
&__flags-favorite {
display: none; // feature on touch layout not available for now
}
&__flags-encrypted {
display: none; // hidden on touch layout
}
&__flags-answered > svg {
fill: $color-text-light;
}
&__flags-attachment {
display: none; // hidden in default state
& > svg {
fill: $color-text-light;
}
}
&__attachment {
display: none; // hidden on touch layout
}
&__encrypted {
position: absolute;
top: $padding-vertical;
right: $padding-vertical;
text-align: center;
font-size: 90%;
& > svg {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
fill: $color-main;
}
}
// Main content
&__name {
@include scut-truncate;
color: $color-main;
font-size: $font-size-bigger;
font-weight: normal;
line-height: 1;
margin-bottom: 8px;
}
&__subject {
@include scut-truncate;
font-size: $font-size-small;
line-height: $font-size-small;
font-weight: bold;
padding-right: 90px; // to make room for time
margin-bottom: 8px;
}
&__time {
@include scut-truncate;
position: absolute;
top: $padding-vertical + $font-size-bigger + 8px;
right: $padding-horizontal;
width: 80px;
color: $color-text-light;
font-size: $font-size-smaller;
line-height: $font-size-small; // same line height as subject
text-align: right;
}
&__excerpt {
color: $color-grey;
height: 2 * $line-height-base * 1em;
font-size: $font-size-small;
overflow: hidden;
}
// Modifiers
&:hover {
background-color: rgba($color-main, 0.15);
}
&--unread {
.mail-list-entry__flags-unread {
display: block;
}
}
&--attachment {
.mail-list-entry__flags-attachment {
display: block;
}
}
&--active,
&--active:hover {
background-color: $color-main;
color: $color-main-text;
.mail-list-entry__name,
.mail-list-entry__time,
.mail-list-entry__excerpt {
color: $color-main-text;
}
.mail-list-entry__flags-unread:after {
background-color: $color-main-text;
}
.mail-list-entry__flags-answered > svg,
.mail-list-entry__flags-encrypted > svg,
.mail-list-entry__flags-attachment > svg,
.mail-list-entry__encrypted > svg,
.mail-list-entry__encrypted > svg:first-child {
fill: $color-main-text;
}
}
}
@include respond-to(lg) {
$cell-padding-vertical: 10px;
$cell-padding-horizontal: 10px;
display: table-row;
background: mix($color-bg, $color-border-light, 70%);
color: $color-grey;
cursor: pointer;
// Flags
&__flags {
display: table-cell;
box-sizing: content-box;
border-bottom: 1px solid $color-border-light;
padding: $cell-padding-vertical $cell-padding-horizontal;
list-style: none;
width: 8em;
white-space: nowrap;
& > li {
display: inline-block;
margin-left: 0.5em;
& > svg {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
}
}
}
&__flags-unread {
display: none;
}
&__flags-checked {
margin-left: 0 !important;
.checkbox {
vertical-align: middle;
}
}
&__flags-favorite {
& > svg {
fill: $color-text-light;
&:first-child {
fill: $color-main;
}
&:hover {
fill: $color-text;
&:first-child {
fill: darken($color-main, 10%);
}
}
}
}
&__flags-encrypted > svg {
fill: $color-main;
}
&__flags-answered > svg {
fill: $color-text-light;
}
&__flags-attachment {
display: none !important; // hidden on desktop layout
}
&__attachment {
display: table-cell;
box-sizing: content-box;
border-bottom: 1px solid $color-border-light;
padding: $cell-padding-vertical $cell-padding-horizontal;
width: 1em;
& > svg {
visibility: hidden; // hidden in default state
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
fill: $color-text-light;
}
}
// Main content
&__name {
@include scut-truncate;
display: table-cell;
border-bottom: 1px solid $color-border-light;
padding: $cell-padding-vertical $cell-padding-horizontal;
}
&__subject {
@include scut-truncate;
display: table-cell;
border-bottom: 1px solid $color-border-light;
padding: $cell-padding-vertical $cell-padding-horizontal;
}
&__time {
display: table-cell;
border-bottom: 1px solid $color-border-light;
padding: $cell-padding-vertical $cell-padding-horizontal;
width: 8em; // make room for time
text-align: right;
white-space: nowrap;
}
&__excerpt {
display: none; // hidden on desktop layout
}
&__encrypted {
display: none; // hidden on desktop layout
}
// Modifiers
&:hover {
background-color: mix($color-bg, $color-main, 85%);
}
&--unread {
background-color: $color-bg;
font-weight: bold;
.mail-list-entry__name {
font-weight: bold;
}
}
&--attachment {
.mail-list-entry__attachment > svg {
visibility: visible;
}
}
&--checked {
background-color: mix($color-bg, $color-main, 85%);
}
}
}

165
src/sass/blocks/views/_read.scss Normal file
View File

@ -0,0 +1,165 @@
.read {
display: flex;
flex-direction: column;
padding: 10px;
height: 100%;
width: 100%;
@include respond-to(lg) {
padding: 20px 20px 10px;
}
// Header components
&__header {
flex-shrink: 0;
margin-bottom: 1em;
& > .attachments {
margin-top: 1em;
}
}
&__controls,
&__controls-lg {
float: right;
margin-left: 1em;
.btn-icon {
margin-left: 0.5em;
}
.btn-icon-light {
margin-left: 1em;
}
}
&__controls {
@include respond-to(lg) {
display: none;
}
}
&__controls-lg {
display: none;
@include respond-to(lg) {
display: block;
}
}
&__subject {
font-size: $font-size-bigger;
margin: 0 0 0.2em;
@include respond-to(not-md) {
cursor: pointer;
}
& > svg {
display: inline-block;
fill: $color-main;
vertical-align: baseline;
height: 0.8em;
width: 0.8em;
@include respond-to(md-only) {
display: none;
}
}
&.wo-touch-active {
background: $color-touch-active;
}
}
&__time {
display: block;
color: $color-text-light;
font-size: $font-size-small;
margin-bottom: 20px;
}
// Content components
&__signature-status {
flex-shrink: 0;
margin-bottom: 0.5em;
text-align: center;
color: $color-error;
}
&__display-images {
flex-shrink: 0;
margin-bottom: 0.5em;
text-align: center;
}
&__working {
flex-grow: 1;
& > div {
@include scut-vcenter-tt;
width: 100%;
text-align: center;
font-size: $font-size-bigger;
strong {
color: $color-text-light;
vertical-align: middle;
}
}
}
&__body {
flex-grow: 1;
display: flex;
flex-direction: column;
// allow scrolling on iOS
overflow: auto;
-webkit-overflow-scrolling: touch;
iframe {
flex-grow: 1;
border: none;
width: 100%;
}
}
// Popovers
// TODO: refactor to BEM
.reply-selection {
.popover-content {
padding: 0;
}
ul {
list-style: none;
margin: 0;
}
li {
border-bottom: 1px solid $color-border-light;
&:last-child {
border-bottom: 0;
}
}
button {
display: block;
background: none;
width: 100%;
border: 0;
outline: 0;
padding: 0.5em 1em 0.5em 0.3em;
color: $color-main;
transition: background-color 0.3s;
text-align: left;
& > svg {
display: inline-block;
width: 2em;
height: 1em;
vertical-align: middle;
fill: $color-main;
}
&:hover,
&:focus {
background-color: darken($color-white, 2%);
}
}
}
// Modifiers
&--no-attachments {
.read__header {
padding-bottom: 0.5em;
margin-bottom: 0.5em;
border-bottom: 1px solid $color-border-light;
}
}
}

74
src/sass/blocks/views/_write.scss Normal file
View File

@ -0,0 +1,74 @@
.write {
position: relative;
display: flex;
flex-direction: column;
@include respond-to(md) {
// this number depends on max-height set on .lightbox
height: 590px; // magic number
}
// Header components
&__header {
flex-shrink: 0;
margin-bottom: 1em;
.mail-addresses {
margin-bottom: 0.5em;
}
& > .attachments {
margin-top: 0.5em;
}
}
&__subject {
position: relative;
margin-top: 1.3em;
input[type=file] {
position: absolute;
visibility: hidden;
width: 0;
height: 0;
}
.input-text {
width: 100%;
height: 40px;
padding-right: 10px + 5px + 30px;
}
.btn {
position: absolute;
top: 5px;
right: 5px;
padding: 0;
line-height: 30px;
width: 30px;
height: 30px;
font-size: 1em;
outline: 0;
min-width: 0;
}
}
// Content components
&__body {
flex-grow: 1;
width: 100%;
border: none;
outline: none;
color: $color-grey-dark;
line-height: 1.5em;
overflow-y: auto;
// allow scrolling on iOS
-webkit-overflow-scrolling: touch;
// put layer on GPU
transform: translatez(0);
}
&__submit {
position: absolute;
bottom: 0;
right: 0;
}
}

161
src/sass/components/_buttons.scss
View File

@ -1,161 +0,0 @@
// 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;
transition: background-color 0.3s;
text-decoration: none;
font-weight: normal;
outline: 0;
&:hover,
&:focus {
background-color: lighten($btn-back-color, 10%);
}
&:active,
&.active {
background-image: none;
box-shadow: none;
top: 2px;
right: -2px;
}
&.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
}
}
.btn-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;
}
&:hover,
&:focus {
background-color: lighten($label-primary-back-color, 5%);
}
}
.btn-alt {
background-color: $color-grey-input;
&:hover,
&:focus {
background-color: lighten($color-grey-input, 10%);
}
}
// Icon Buttons
// -------------------------------------------
.btn-icon {
padding: 0;
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: 2.5em;
width: 2.5em;
text-align: center;
-webkit-font-smoothing: antialiased;
@include respond-to(desktop) {
transition: color 0.3s;
transform: translate3d(0,0,0); // to prevent flickering
}
outline: none;
&.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: 2px;
right: -2px;
}
&: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;
@include respond-to(desktop) {
transition: transform 0.3s, opacity 0.4s;
transform: scale(1.2);
}
opacity: 0;
}
@include respond-to(desktop) {
&:hover {
color: $color-white;
&:after {
transform: scale(0.8);
opacity: 1;
}
}
}
}

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

@ -1,24 +0,0 @@
// 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;
}

25
src/sass/components/_input.scss
View File

@ -1,25 +0,0 @@
.input-text {
background-color: white;
border: 1px solid $color-grey-lighter;
color: $color-grey;
font-size: $font-size-base;
padding: 8px 10px;
outline: none;
// ios
border-radius: 0;
-webkit-appearance: none;
}
:invalid,
.ng-invalid,
.input-text-error {
border-color: red;
}
.input-error-message {
margin: 5px 0;
padding: 0;
color: red;
font-size: em(13);
}

64
src/sass/components/_labels.scss
View File

@ -1,64 +0,0 @@
.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;
background-color: $label-back-color;
color: $label-color;
transition: background-color 0.3s;
&[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-primary-click {
position: relative;
&:hover,
&:focus {
transition: none;
background-color: lighten($label-primary-back-color, 5%);
}
&:active,
&.active {
top: 1px;
left: 1px;
}
}
.label-blank {
background-color: transparent;
color: $color-black;
text-align: left;
padding-left: 0;
padding-right: 0;
}
.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;
}

38
src/sass/components/_layout.scss
View File

@ -1,38 +0,0 @@
.main-content {
@include clearfix();
height: 100%;
}
.column {
height: 100%;
overflow: hidden;
@include respond-to(mobile) {
display: none;
width: 100%;
}
}
.column-left {
float: left;
@include respond-to(mobile) {
display: block;
}
@include respond-to(desktop) {
width: $content-nav-width;
border-right: 1px solid $color-grey-light;
}
}
.shift-right {
@include respond-to(mobile) {
.column {
display: block;
}
.column-left {
display: none;
}
}
}

36
src/sass/components/_lightbox.scss
View File

@ -5,16 +5,17 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 2000; z-index: 2000;
@include respond-to(desktop) {
backface-visibility: hidden;
}
@include respond-to(desktop) { @include respond-to(md) {
margin: 0 auto; margin: 0 auto;
width: $lightbox-width; width: $lightbox-width;
max-width: $lightbox-max-width; max-width: $lightbox-max-width;
height: auto; height: auto;
text-align: left; text-align: left;
backface-visibility: hidden;
}
@include respond-to(lg) {
max-width: $lightbox-max-width + 100px;
} }
.lightbox-body { .lightbox-body {
@ -26,16 +27,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include respond-to(desktop) { @include respond-to(md) {
max-height: $lightbox-min-height; max-height: $lightbox-min-height;
} }
@include respond-to(lg) {
max-height: $lightbox-min-height + 50px;
}
header { & > header {
flex-shrink: 0; flex-shrink: 0;
text-align: center; text-align: center;
position: relative; position: relative;
margin-bottom: 15px;
button.close { button.close {
font-family: $font-family-icons;
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
@ -47,6 +51,12 @@
color: $color-grey-dark; color: $color-grey-dark;
outline: none; outline: none;
svg {
height: 1em;
width: 1em;
fill: $color-grey-dark;
}
&.active { &.active {
top: 2px; top: 2px;
right: -2px; right: -2px;
@ -61,7 +71,7 @@
color: $color-grey-dark; color: $color-grey-dark;
} }
} }
.content { & > .content {
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
} }
@ -79,7 +89,7 @@
background: $color-grey-dark-alpha; background: $color-grey-dark-alpha;
overflow: auto; overflow: auto;
@include respond-to(desktop) { @include respond-to(md) {
@include scut-vcenter-ib(".lightbox"); @include scut-vcenter-ib(".lightbox");
text-align: center; text-align: center;
} }
@ -92,12 +102,12 @@
&.show-add { &.show-add {
display: block; display: block;
opacity: 0; opacity: 0;
@include respond-to(desktop) { @include respond-to(md) {
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.lightbox-body { .lightbox-body {
transform: scale(0.7); transform: scale(0.7);
@include respond-to(desktop) { @include respond-to(md) {
transition: transform 0.3s; transition: transform 0.3s;
} }
} }
@ -111,12 +121,12 @@
&.show-remove { &.show-remove {
display: block; display: block;
opacity: 1; opacity: 1;
@include respond-to(desktop) { @include respond-to(md) {
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.lightbox-body { .lightbox-body {
transform: scale(1); transform: scale(1);
@include respond-to(desktop) { @include respond-to(md) {
transition: transform 0.3s; transition: transform 0.3s;
} }
} }

16
src/sass/components/_mail-addresses.scss
View File

@ -1,16 +0,0 @@
.mail-addresses {
p {
margin: 0.4em 0 0.2em;
}
.label {
margin-bottom: 0.2em;
margin-right: 0.2em;
}
label {
display: inline-block;
width: 2.75em;
color: $color-grey;
}
}

164
src/sass/components/_mail-list.scss
View File

@ -1,164 +0,0 @@
.mail-list {
$padding-vertical: 9px;
$padding-horizontal: 30px;
list-style: none;
margin: 0;
padding: 0;
& > li {
position: relative;
display: block;
padding: $padding-vertical $padding-horizontal;
background: $color-white;
cursor: pointer;
//transition: background-color $time-li-fade, color $time-li-fade;
margin-top: 11px;
&:before {
content: '';
display: block;
position: absolute;
top: -6px;
left: 0;
right: 0;
height: 0;
border-top: 1px solid $color-grey-lighter;
}
&:first-child {
box-shadow: none;
border-top: 0;
margin-top: 0;
&:before {
display: none;
}
}
&:last-child {
margin-bottom: 5px;
}
&.ng-animate {
transition: none;
}
h3 {
@include text-overflow;
color: $color-blue;
font-size: $font-size-bigger;
font-weight: normal;
margin: 0;
}
.encrypted {
position: absolute;
color: $color-grey-medium;
line-height: 30px;
top: $padding-vertical;
right: $padding-vertical;
}
p {
font-size: $font-size-small;
margin: 0;
}
.head {
position: relative;
padding-right: 6.5em;
margin-bottom: 0.25em;
.subject {
@include text-overflow;
color: $color-grey-dark;
font-weight: bold;
line-height: 1.5em;
}
time {
position: absolute;
bottom: 0;
right: 0;
width: 6em * ($font-size-small / $font-size-smaller);
color: $color-grey-medium;
font-size: $font-size-smaller;
text-align: right;
line-height: 1.5em * ($font-size-small / $font-size-smaller);
}
}
.flags {
position: absolute;
top: 0;
left: 0;
list-style: none;
margin: 0.8em 0 0;
padding: 0;
color: $color-grey-medium;
width: 30px;
line-height: 1.6em;
& > li {
font-size: 90%;
text-align: center;
&:nth-child(1) {
&:after {
display: inline-block;
content: '';
width: 1em;
height: 1em;
border-radius: 50%;
background-color: $color-blue;
}
}
}
}
.body {
color: $color-grey;
height: 2.5em;
overflow: hidden;
}
&.active,
&:hover {
background-color: mix($color-white, $color-blue, 85%);
}
&.mail-list-active,
&.mail-list-active:hover {
background-color: $color-blue;
color: $color-white;
h3 {
color: $color-white;
}
.encrypted {
color: $color-white;
}
.head {
.subject {
color: $color-white;
}
time {
color: $color-white;
}
}
.body {
color: $color-white;
}
.flags {
& > li {
color: $color-white;
&:nth-child(1) {
&:after {
background-color: $color-white;
}
}
}
}
}
}
}

75
src/sass/components/_nav.scss
View File

@ -1,75 +0,0 @@
// Navigation
// -------------------------
.nav-container {
position: relative;
overflow: hidden;
height: 100%;
}
.nav-pusher {
position: relative;
left: 0;
z-index: 99;
height: 100%;
background: $color-white;
will-change: transform;
@include respond-to(desktop) {
transition: transform $time-nav-animation ease-out;
}
&:after {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
background: rgba(0,0,0,0.2);
width: 100%;
height: 100%;
content: '';
opacity: 0;
transform: scale(0, 0);
@include respond-to(desktop) {
transition: opacity $time-nav-animation, transform 0.1s $time-nav-animation;
}
}
}
.nav-menu {
position: absolute;
top: 0;
left: 0;
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%);
border-right: 1px solid $color-grey-light;
transform: translate3d(-50%, 0, 0);
will-change: transform;
@include respond-to(desktop) {
transition: transform $time-nav-animation ease-out;
}
}
.nav-menu-open {
.nav-menu {
transform: translateX(0);
}
.nav-pusher {
transform: translateX($nav-max-width);
@media(max-width: 450px) {
transform: translateX($nav-width);
}
&:after {
transform: scale(1, 1);
opacity: 1;
@include respond-to(desktop) {
transition: opacity $time-nav-animation;
}
}
}
}

134
src/sass/components/_popover.scss
View File

@ -1,134 +0,0 @@
/*
* Copyright 2013 Twitter, Inc under the Apache 2.0 license.
* From Bootstrap popover https://github.com/twbs/bootstrap
*/
.popover {
position: absolute;
top: -9999px;
left: -9999px;
display: block;
z-index: 9000;
max-width: 276px;
padding: 1px;
text-align: left;
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid $color-grey-lighter;
white-space: normal;
opacity: 0;
&.top {
margin-top: -10px;
}
&.right {
margin-left: 10px;
}
&.bottom {
margin-top: 10px;
}
&.left {
margin-left: -10px;
}
&.desktop-only {
@include respond-to(mobile) {
display: none;
}
}
.popover-title {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
.arrow,
.arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.arrow {
border-width: 11px;
}
.arrow:after {
border-width: 10px;
content: "";
}
&.top .arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #999999;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -11px;
}
&.top .arrow:after {
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffffff;
}
&.right .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #999999;
border-right-color: rgba(0, 0, 0, 0.25);
}
&.right .arrow:after {
content: " ";
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #ffffff;
}
&.bottom .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
&.bottom .arrow:after {
content: " ";
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
&.left .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999999;
border-left-color: rgba(0, 0, 0, 0.25);
}
&.left .arrow:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: #ffffff;
bottom: -10px;
}
}
.popover-info {
color: $color-blue;
&:hover {
cursor: pointer;
}
}

16
src/sass/components/_scrollbars.scss
View File

@ -1,16 +0,0 @@
// Custom scrollbars in webkit
// @see http://css-tricks.com/custom-scrollbars-in-webkit/
::-webkit-scrollbar {
width: $scrollbar-width;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: $color-grey-lighter;
border: 3px solid transparent;
background-clip: content-box;
&:hover {
background-color: $color-blue;
}
}

425
src/sass/lib/_normalize.scss Normal file
View File

@ -0,0 +1,425 @@
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 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 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* 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/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* 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 Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
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;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 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 and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 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/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

61
src/sass/lib/_scut.scss
View File

@ -1,7 +1,7 @@
/* /*
* Scut, a collection of Sass utilities * Scut, a collection of Sass utilities
* to ease and improve our implementations of common style-code patterns. * to ease and improve our implementations of common style-code patterns.
* v0.10.3 * v1.0.1
* Docs at http://davidtheclark.github.io/scut * Docs at http://davidtheclark.github.io/scut
*/ */
@ -238,7 +238,7 @@ $scut-rem-base: 16 !default;
// If $off IS NOT a list and $bg is TRUE, // If $off IS NOT a list and $bg is TRUE,
// assign background-color. // assign background-color.
@else if $bg and not $off-is-list { @else if $bg and not($off-is-list) {
background-color: $off; background-color: $off;
$transition-properties: background-color; $transition-properties: background-color;
} }
@ -265,7 +265,7 @@ $scut-rem-base: 16 !default;
background-color: nth($on, 2); background-color: nth($on, 2);
} }
@else if $bg and not $on-is-list { @else if $bg and not($on-is-list) {
background-color: $on; background-color: $on;
} }
@ -333,10 +333,14 @@ $scut-rem-base: 16 !default;
} }
@mixin scut-reset-border-box { @mixin scut-reset-border-box {
// Make everything a border-box, because why not? // Make everything a border-box, because why not?
*, *:before, *:after { html {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
} }
@mixin scut-reset-antialias { @mixin scut-reset-antialias {
@ -395,7 +399,6 @@ $scut-rem-base: 16 !default;
color: inherit; color: inherit;
font: inherit; font: inherit;
margin: 0; margin: 0;
outline: none;
padding: 0; padding: 0;
width: auto; width: auto;
-webkit-appearance: none; -webkit-appearance: none;
@ -431,7 +434,7 @@ $scut-rem-base: 16 !default;
} }
@mixin scut-reset-figure { @mixin scut-reset-figure {
// Remove default margins: // Remove default margins.
figure { figure {
margin: 0; margin: 0;
} }
@ -439,34 +442,35 @@ $scut-rem-base: 16 !default;
// Call them all, minus exclusions! // Call them all, minus exclusions!
@mixin scut-reset ($exclude: false) { @mixin scut-reset ($exclude: false) {
@if not index($exclude, border-box) { @if not(index($exclude, border-box)) {
@include scut-reset-border-box; @include scut-reset-border-box;
} }
@if not index($exclude, antialias) { @if not(index($exclude, antialias)) {
@include scut-reset-antialias; @include scut-reset-antialias;
} }
@if not index($exclude, semanticize) { @if not(index($exclude, semanticize)) {
@include scut-reset-semanticize; @include scut-reset-semanticize;
} }
@if not index($exclude, pointer) { @if not(index($exclude, pointer)) {
@include scut-reset-pointer; @include scut-reset-pointer;
} }
@if not index($exclude, form) { @if not(index($exclude, form)) {
@include scut-reset-form; @include scut-reset-form;
} }
@if not index($exclude, button) { @if not(index($exclude, button)) {
@include scut-reset-button; @include scut-reset-button;
} }
@if not index($exclude, paragraph) { @if not(index($exclude, paragraph)) {
@include scut-reset-paragraph; @include scut-reset-paragraph;
} }
@if not index($exclude, media) { @if not(index($exclude, media)) {
@include scut-reset-media; @include scut-reset-media;
} }
@if not index($exclude, figure) { @if not(index($exclude, figure)) {
@include scut-reset-figure; @include scut-reset-figure;
} }
} }
@mixin scut-selected ( @mixin scut-selected (
$active: false $active: false
) { ) {
@ -646,7 +650,7 @@ $scut-rem-base: 16 !default;
$translate-val: null; $translate-val: null;
@if not $axis { @if not($axis) {
$translate-val: translate(-50%, -50%); $translate-val: translate(-50%, -50%);
} }
@else if $axis != x { @else if $axis != x {
@ -780,7 +784,7 @@ $scut-rem-base: 16 !default;
} }
& > li + li:#{$pseudo} { & > li + li:#{$pseudo} {
@if not $height { @if not($height) {
content: $divider; content: $divider;
display: inline-block; display: inline-block;
@content; @content;
@ -1099,7 +1103,7 @@ $scut-rem-base: 16 !default;
} }
@mixin scut-vcenter-ib ( @mixin scut-vcenter-ib (
$inner: ".scut-inner" $inner...
) { ) {
// The inner element is vertically centered // The inner element is vertically centered
@ -1117,9 +1121,12 @@ $scut-rem-base: 16 !default;
margin-right: -0.25em; margin-right: -0.25em;
} }
& > #{$inner} { $inner: if(length($inner) == 0, ".scut-inner", $inner);
display: inline-block; @each $cell-selector in $inner {
vertical-align: middle; & > #{$cell-selector} {
display: inline-block;
vertical-align: middle;
}
} }
} }
@ -1137,14 +1144,17 @@ $scut-rem-base: 16 !default;
} }
@mixin scut-vcenter-td ( @mixin scut-vcenter-td (
$inner: ".scut-inner" $inner...
) { ) {
display: table; display: table;
& > #{$inner} { $inner: if(length($inner) == 0, ".scut-inner", $inner);
display: table-cell; @each $cell-selector in $inner {
vertical-align: middle; & > #{$cell-selector} {
display: table-cell;
vertical-align: middle;
}
} }
} }
@ -1153,6 +1163,7 @@ $scut-rem-base: 16 !default;
%scut-vcenter-td { %scut-vcenter-td {
@include scut-vcenter-td; @include scut-vcenter-td;
} }
// Depends on scut-center-transform // Depends on scut-center-transform
@mixin scut-vcenter-tt () { @mixin scut-vcenter-tt () {

23
src/sass/mixins/_responsive.scss Executable file
View File

@ -0,0 +1,23 @@
// Actual media queries
$mediaqueries: (
sm-only: "(max-width: #{$screen-sm-max})",
md: "(min-width: #{$screen-md-min})",
md-only: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})",
lg: "(min-width: #{$screen-lg-min})",
not-md: "(max-width: #{$screen-sm-max}), (min-width: #{$screen-lg-min})",
not-lg: "(max-width: #{$screen-md-max})"
);
// Central Media Query Mixin
@mixin respond-to($query) {
@if map-has-key($mediaqueries, $query) {
@media #{map-get($mediaqueries, $query)} {
@content;
}
}
@else {
@warn "Unfortunately, no value could be retrieved from `#{$query}`. "
+ "Please make sure it is defined in `$mediaqueries` map.";
}
}

56
src/sass/mixins/_scrollbar.scss Executable file
View File

@ -0,0 +1,56 @@
// Custom scrollbars in webkit
// @see http://css-tricks.com/custom-scrollbars-in-webkit/
$scrollbar-width: 10px;
$scrollbar-themes: (
base: (
thumb: $color-border-light,
thumb-hover: $color-main),
main: (
thumb: rgba($color-main-text, 0.7),
thumb-hover: $color-main-text)
);
@mixin scrollbar($theme:base) {
@if map-has-key($scrollbar-themes, $theme) {
$t: map-get($scrollbar-themes, $theme);
@if & {
&::-webkit-scrollbar {
width: $scrollbar-width;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: map-get($t, thumb);
border: 3px solid transparent;
background-clip: content-box;
&:hover {
background-color: map-get($t, thumb-hover);
}
}
}
@else {
::-webkit-scrollbar {
width: $scrollbar-width;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: map-get($t, thumb);
border: 3px solid transparent;
background-clip: content-box;
&:hover {
background-color: map-get($t, thumb-hover);
}
}
}
}
@else {
@warn "Unfortunately, no value could be retrieved from `#{$theme}`. "
+ "Please make sure it is defined in `$scrollbar-themes` map.";
}
}

17
src/sass/read-sandbox.scss
View File

@ -1,14 +1,13 @@
// Utilities
@import "mixins";
@import "functions";
@import "grid";
// Bootstrap // Bootstrap
@import "variables"; @import "base/config";
@import "fonts"; @import "base/fonts";
// Components // Mixins
@import "components/scrollbars";
@import "mixins/responsive";
@import "mixins/scrollbar";
@include scrollbar();
html { html {
// use overflow auto and not scroll otherwise IE shows scrollbars always // use overflow auto and not scroll otherwise IE shows scrollbars always

36
src/sass/utilities/_responsive.scss Normal file
View File

@ -0,0 +1,36 @@
// Responsive visibility classes
.u-visible-sm {
@include respond-to(md) {
display: none;
}
}
.u-visible-md {
@include respond-to(sm-only) {
display: none;
}
@include respond-to(lg) {
display: none;
}
}
.u-visible-lg {
@include respond-to(not-lg) {
display: none;
}
}
.u-hidden-sm {
@include respond-to(sm-only) {
display: none;
}
}
.u-hidden-md {
@include respond-to(md-only) {
display: none;
}
}
.u-hidden-lg {
@include respond-to(lg) {
display: none;
}
}

2
src/sass/views/_about.scss
View File

@ -1,5 +1,5 @@
.view-about { .view-about {
@include respond-to(desktop) { @include respond-to(md) {
max-width: 550px; max-width: 550px;
} }

4
src/sass/views/_add-account.scss
View File

@ -32,7 +32,7 @@
line-height: 38px; line-height: 38px;
flex-shrink: 0; flex-shrink: 0;
@include respond-to(mobile) { @include respond-to(sm-only) {
font-size: $font-size-big; font-size: $font-size-big;
} }
} }
@ -56,7 +56,7 @@
font-size: 32px; font-size: 32px;
line-height: 64px; line-height: 64px;
@include respond-to(mobile) { @include respond-to(sm-only) {
padding: 30px 0 20px 0; padding: 30px 0 20px 0;
} }
} }

18
src/sass/views/_contacts.scss
View File

@ -8,7 +8,7 @@
.key-controls-search { .key-controls-search {
flex-grow: 1; flex-grow: 1;
input[type=text] { input[type=text] {
line-height: 23px; line-height: 28px;
width: 100%; width: 100%;
} }
} }
@ -27,7 +27,7 @@
width: 100%; width: 100%;
} }
@include respond-to(desktop) { @include respond-to(md) {
width: 10em; width: 10em;
} }
} }
@ -52,17 +52,23 @@
} }
button.remove { button.remove {
font-family: $font-family-icons;
font-size: 0.75em; font-size: 0.75em;
color: $color-grey-input;
border: none; border: none;
background: none; background: none;
outline: none; outline: none;
padding: 0;
vertical-align: middle;
svg {
height: 0.8em;
width: 0.8em;
fill: $color-grey-input;
}
} }
} }
// pull popover upwards to keep popup inside lightbox // pull tooltip upwards to keep popup inside lightbox
.popover { .tooltip {
margin-top: -20px; margin-top: -20px;
} }
} }

2
src/sass/views/_dialog.scss
View File

@ -1,7 +1,7 @@
.view-dialog { .view-dialog {
height: auto; height: auto;
@include respond-to(desktop) { @include respond-to(md) {
max-width: 350px; max-width: 350px;
} }

7
src/sass/views/_login.scss
View File

@ -16,7 +16,7 @@
width: 320px; width: 320px;
} }
@include respond-to(desktop) { @include respond-to(md) {
margin: 115px auto 75px; margin: 115px auto 75px;
} }
} }
@ -39,7 +39,6 @@
} }
button, a.btn { button, a.btn {
color: $btn-color;
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%; width: 100%;
@ -108,10 +107,6 @@
cursor: pointer; cursor: pointer;
} }
} }
.popover-info {
display: none; // hide on mobile
}
} }
} }

138
src/sass/views/_mail-list.scss
View File

@ -1,138 +0,0 @@
.view-mail-list {
$padding-horizontal: 15px;
$padding-vertical: 10px;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: $color-white;
header {
flex-shrink: 0;
cursor: pointer;
padding: $padding-vertical $padding-horizontal;
@include respond-to(mobile) {
padding: ($padding-vertical + 5px) $padding-horizontal;
}
&: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;
text-shadow: 0px 1px 1px $color-grey-lighter;
}
&.active {
background-color: darken($color-white, 10%);
}
}
.compose {
position: absolute;
top: $padding-vertical;
right: $padding-horizontal;
margin-top: -0.05em; // for perfect vertical alignment with headline
padding-left: 40px;
&.active {
top: $padding-vertical + 2px;
right: $padding-horizontal - 2px;
}
@include respond-to(desktop) {
display: none;
}
button {
&:active,
&.active {
top: 0;
right: 0;
}
}
}
.search {
flex-shrink: 0;
padding: 0 $padding-horizontal $padding-vertical $padding-horizontal;
margin: 0 auto;
width: 100%;
position: relative;
input {
width: 100%;
padding-left: 1.7em;
}
&:before {
position: absolute;
left: 25px;
color: $color-grey-medium;
top: 8px;
line-height: 1.3em;
}
}
.list-wrapper {
flex-grow: 1;
padding: 0 $padding-horizontal;
overflow-y: scroll;
// allow scrolling on iOS
-webkit-overflow-scrolling: touch;
// put layer on GPU
transform: translatez(0);
// hide scrollbar in webkit
&::-webkit-scrollbar {
display: none;
}
}
footer {
flex-shrink: 0;
position: relative;
height: 28px;
padding: 0 $nav-padding;
background: $color-white;
width: 100%;
font-size: $font-size-smaller;
color: $color-grey-dark;
line-height: em(28,12);
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: $nav-padding;
right: $nav-padding;
height: 0;
border-top: 1px solid $color-grey-medium;
}
.offline {
&[data-icon]:before {
padding-right: 0.5em;
}
}
.spinner {
display:none;
}
&.syncing {
.spinner {
display: inline-block;
}
}
}
}

94
src/sass/views/_navigation.scss
View File

@ -1,94 +0,0 @@
.nav-menu {
border: 1px;
border-right-style: solid;
border-color: $color-grey-medium;
.content {
h1, a {
color: #fff;
text-decoration: none;
}
header {
padding: 0 $nav-padding;
height: 84px;
h1 {
@include hide-text();
background: url(../img/whiteout_logo_light.svg) left top no-repeat;
background-size: contain;
height: 30px;
margin: 10px 0 0;
}
}
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;
}
&.active, &:hover, &:focus {
background-color: mix($color-blue, $color-white, 70%);
}
}
}
li:first-child {
border-top: 1px solid #fff;
}
}
ul.nav-secondary {
margin-top: em(50, 16);
padding: 0 $nav-padding;
li {
margin-bottom: 0.25em;
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);
}
}
}

199
src/sass/views/_read.scss
View File

@ -1,199 +0,0 @@
.view-read {
display: flex;
flex-direction: column;
margin: 0px;
padding: 10px 15px;
height: 100%;
width: 100%;
color: $color-grey-dark;
.headers {
flex-shrink: 0;
margin-bottom: 1em;
.subject {
font-size: $font-size-bigger;
margin: 0;
cursor: pointer;
&:before {
color: $color-blue;
font-size: $font-size-smaller;
margin-right: 0.5em;
@include respond-to(desktop) {
display: none;
}
}
&.active {
background-color: darken($color-white, 10%);
}
}
.date {
color: $color-grey-medium;
font-size: $font-size-small;
margin-top: 0.25em;
margin-bottom: 1.5em;
}
.mail-addresses {
.label {
cursor: pointer;
}
p {
margin-top: 0.2em;
margin-bottom: 0;
}
}
.controls {
float: right;
button {
margin-left: 7px;
}
}
}
.attachments-wrapper {
flex-shrink: 0;
.attachments {
position: relative;
width: inherit;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
min-height: em(44);
.attachment {
height: 32px;
max-width: 98%;
border-radius: 16px;
vertical-align: middle;
margin: 5px 0 5px 5px;
padding: 5px 10px 5px 10px;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
display: inline-block;
@include text-overflow;
span {
font-size: 14px;
color: $color-grey-input;
vertical-align: middle;
}
&:hover,
&:focus {
background-color: darken($color-white, 2%);
cursor: pointer;
}
}
}
.seperator-line {
height: 1px;
color: $color-grey-lighter;
background-color: $color-grey-lighter;
}
}
.working-wrapper {
flex-grow: 1;
position: relative;
.working {
@include scut-vcenter-tt;
width: 100%;
text-align: center;
font-size: 2em;
strong {
color: $color-grey-input;
vertical-align: middle;
}
}
}
.signature-status {
flex-shrink: 0;
padding: 0.9em 0.9em 0 0.9em;
text-align: center;
p {
color: $label-primary-back-color;
margin: 0;
}
}
.display-images {
flex-shrink: 0;
padding: 0.9em;
text-align: center;
a {
text-decoration: none;
color: $color-blue;
}
}
.frame-wrapper {
flex-grow: 1;
display: flex;
flex-direction: column;
// allow scrolling on iOS
overflow: auto;
-webkit-overflow-scrolling: touch;
iframe {
flex-grow: 1;
border: none;
width: 100%;
}
}
.reply-selection {
.popover-content {
padding: 0;
}
ul {
list-style: none;
margin: 0;
}
li {
border-bottom: 1px solid $color-grey-lighter;
&:last-child {
border-bottom: 0;
}
}
button {
display: block;
background: none;
width: 100%;
border: 0;
outline: 0;
padding: 0.5em 1em 0.5em 0.3em;
color: $color-blue;
transition: background-color 0.3s;
text-align: left;
&:before {
display: inline-block;
width: 2.5em;
text-align: center;
vertical-align: middle;
}
&:hover,
&:focus {
background-color: darken($color-white, 2%);
}
}
}
}

169
src/sass/views/_write.scss
View File

@ -1,169 +0,0 @@
.view-write {
height: 100%;
margin: 0px;
padding: 0px;
color: $color-grey-dark;
overflow-y: hidden;
display: flex;
flex-direction: column;
@include respond-to(desktop) {
// this number depends on max-height set on .lightbox
height: 590px; // magic number
}
p[field] input {
border: 0;
outline: none;
}
.mail-addresses {
flex-shrink: 0;
margin-top: 10px;
p {
position: relative;
padding-left: 3em;
}
label {
position: absolute;
top: 0;
left: 0;
width: 3em;
}
.mail-addresses-more {
position: relative;
float: right;
margin: 0.4em 0;
z-index: 1;
button {
display: inline-block;
background: none;
padding: 0 0.5em;
margin: 0;
text-decoration: none;
color: $color-black;
transition: color 0.3s;
border: 0;
outline: 0;
&:hover,
&:focus {
color: $color-blue;
text-decoration: underline;
}
&.ng-animate {
transition: none;
}
}
}
}
.subject-box {
flex-shrink: 0;
position: relative;
margin: 20px 0 7px;
input[type=file] {
visibility: hidden;
width: 0;
height: 0;
position: absolute;
}
.input-text {
font-weight: bold;
width: 100%;
height: 40px;
padding-right: 10px + 5px + 30px;
}
.btn-attachment {
position: absolute;
top: 5px;
right: 5px;
padding: 0;
line-height: 30px;
width: 30px;
height: 30px;
font-size: 1em;
outline: 0;
&:before {
padding: 0;
}
&:active,
&.active {
top: 6px;
right: 4px;
}
}
}
.attachments-box {
flex-shrink: 0;
position: relative;
margin: 0 0 5px 0;
width: inherit;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
min-height: em(44);
.attachment {
height: 32px;
border-radius: 16px;
vertical-align: middle;
margin: 5px 0 5px 5px;
padding: 5px 5px 5px 10px;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
cursor: default;
display: inline-block;
span {
font-size: 14px;
color: $color-grey-input;
vertical-align: middle;
}
.close {
margin-left: 5px;
&:hover,
&:focus {
color: darken($color-grey, 10%);
cursor: pointer;
}
}
&:hover,
&:focus {
background-color: darken($color-white, 2%);
}
}
}
textarea {
margin-top: 13px;
flex-grow: 1;
width: 100%;
border: none;
outline: none;
color: $color-grey-dark;
line-height: 1.5em;
overflow-y: auto;
// allow scrolling on iOS
-webkit-overflow-scrolling: touch;
// put layer on GPU
transform: translatez(0);
}
.send-control {
position: absolute;
bottom: 15px;
right: 15px;
}
}

4
src/tpl/about.html
View File

@ -1,6 +1,8 @@
<div class="lightbox-body" ng-controller="AboutCtrl"> <div class="lightbox-body" ng-controller="AboutCtrl">
<header> <header>
<button class="close" wo-touch="state.about.toggle(false)" data-action="lightbox-close">&#xe007;</button> <button class="close" wo-touch="state.about.toggle(false)" data-action="lightbox-close">
<svg><use xlink:href="#icon-close" /><title>Close</title></svg>
</button>
</header> </header>
<div class="content"> <div class="content">

6
src/tpl/account.html
View File

@ -1,7 +1,9 @@
<div class="lightbox-body" ng-controller="AccountCtrl"> <div class="lightbox-body" ng-controller="AccountCtrl">
<header> <header>
<h2>Account</h2> <h2>Account</h2>
<button class="close" wo-touch="state.account.toggle(false)" data-action="lightbox-close">&#xe007;</button> <button class="close" wo-touch="state.account.toggle(false)" data-action="lightbox-close">
<svg><use xlink:href="#icon-close" /><title>Close</title></svg>
</button>
</header> </header>
<div class="content"> <div class="content">
@ -29,7 +31,7 @@
</table> </table>
<div class="control"> <div class="control">
<button wo-touch="state.account.toggle(false); state.setPassphrase.toggle(true)" class="btn btn-alt">Set passphrase</button> <button wo-touch="state.account.toggle(false); state.setPassphrase.toggle(true)" class="btn btn--secondary">Set passphrase</button>
<button wo-touch="exportKeyFile()" class="btn">Export keypair</button> <button wo-touch="exportKeyFile()" class="btn">Export keypair</button>
</div> </div>

34
src/tpl/action-bar.html Normal file
View File

@ -0,0 +1,34 @@
<div class="action-bar">
<div class="action-bar__primary">
<button class="btn btn--light">Delete</button>
<button class="btn btn--light">Spam</button>
<button class="btn btn--light-dropdown" wo-dropdown="#dropdown-folder">
<svg><use xlink:href="#icon-folder" /><title>Folder</title></svg>
<svg class="btn__dropdown" role="presentation"><use xlink:href="#icon-dropdown" /></svg>
</button>
</div>
<div class="action-bar__secondary">
<button class="btn btn--light-dropdown" wo-dropdown="#dropdown-more">
More
<svg class="btn__dropdown" role="presentation"><use xlink:href="#icon-dropdown" /></svg>
</button>
</div>
<div class="action-bar__search">
<div class="search">
<svg><use xlink:href="#icon-search" /><title>Search</title></svg>
<input class="input-text" type="text" ng-model="searchText"
ng-change="displaySearchResults(searchText)"
placeholder="Search" focus-me="state.mailList.searching">
</div>
</div>
<!-- dropdowns -->
<ul id="dropdown-folder" class="dropdown">
<li><button><svg><use xlink:href="#icon-folder" /></svg> Lorem</button></li>
<li><button><svg><use xlink:href="#icon-folder" /></svg> Ipsum</button></li>
</ul>
<ul id="dropdown-more" class="dropdown">
<li><button>Mark as read</button></li>
<li><button>Mark as unread</button></li>
</ul>
</div>

102
src/tpl/add-account.html
View File

@ -13,7 +13,7 @@
<hr> <hr>
<div class="choice"> <div class="choice">
<p><b>Login to IMAP account.</b> Connect Whiteout Mail to any existing email account via IMAP.</p> <p><b>Login to IMAP account.</b> Connect Whiteout Mail to any existing email account via IMAP.</p>
<button class="btn btn-alt" wo-touch="goTo(4)">Login to existing</button> <button class="btn btn--secondary" wo-touch="goTo(4)">Login to existing</button>
</div> </div>
</div> </div>
</div> </div>
@ -35,7 +35,7 @@
<input class="input-text" type="text" ng-model="realname" placeholder="Full name (optional)"></input> <input class="input-text" type="text" ng-model="realname" placeholder="Full name (optional)"></input>
<div class="flex"> <div class="flex">
<input class="input-text" ng-model="pass" required type="password" placeholder="Password" pattern=".{3,30}"> <input class="input-text" ng-model="pass" required type="password" placeholder="Password" pattern=".{3,30}">
<input class="input-text right" ng-model="confirmPass" required type="password" placeholder="Confirm password" ng-class="{'input-text-error': (pass || confirmPass) && pass !== confirmPass}"> <input class="input-text right" ng-model="confirmPass" required type="password" placeholder="Confirm password" ng-class="{'input-text--error': (pass || confirmPass) && pass !== confirmPass}">
</div> </div>
<input class="input-text" type="tel" ng-model="phone" required placeholder="Mobile phone number (e.g. +49 170 1234567)"/> <input class="input-text" type="tel" ng-model="phone" required placeholder="Mobile phone number (e.g. +49 170 1234567)"/>
<input class="input-text" type="text" class="input-text" ng-model="betaCode" required placeholder="Beta access code"> <input class="input-text" type="text" class="input-text" ng-model="betaCode" required placeholder="Beta access code">
@ -78,28 +78,28 @@
<h1>Select account</h1> <h1>Select account</h1>
<ul> <ul>
<li class="whiteout" popover="#whiteout-info" wo-touch="connectTo('wmail')"> <li class="whiteout" wo-tooltip="#whiteout-info" wo-touch="connectTo('wmail')">
<div><img src="img/whiteout_logo.svg" alt="Whiteout Mailbox"></div> <div><img src="img/whiteout_logo.svg" alt="Whiteout Mailbox"></div>
</li> </li>
<li class="google" popover="#google-info" wo-touch="connectToGoogle()"> <li class="google" wo-tooltip="#google-info" wo-touch="connectToGoogle()">
<div><img src="img/google_logo.png" alt="Google Mail"></div> <div><img src="img/google_logo.png" alt="Google Mail"></div>
</li> </li>
<li class="outlook" popover="#outlook-info" wo-touch="connectTo('outlook')"> <li class="outlook" wo-tooltip="#outlook-info" wo-touch="connectTo('outlook')">
<div><img src="img/outlook_logo.jpg" alt="Outlook.com"></div> <div><img src="img/outlook_logo.jpg" alt="Outlook.com"></div>
</li> </li>
<li class="yahoo" popover="#yahoo-info" wo-touch="connectTo('yahoo')"> <li class="yahoo" wo-tooltip="#yahoo-info" wo-touch="connectTo('yahoo')">
<div><img src="img/yahoo_logo.png" alt="Yahoo! Mail"></div> <div><img src="img/yahoo_logo.png" alt="Yahoo! Mail"></div>
</li> </li>
<li class="gmx" popover="#gmx-info" wo-touch="connectTo('gmx')"> <li class="gmx" wo-tooltip="#gmx-info" wo-touch="connectTo('gmx')">
<div><img src="img/gmx_logo.jpg" alt="GMX.net"></div> <div><img src="img/gmx_logo.jpg" alt="GMX.net"></div>
</li> </li>
<li class="webde" popover="#webde-info" wo-touch="connectTo('webde')"> <li class="webde" wo-tooltip="#webde-info" wo-touch="connectTo('webde')">
<div><img src="img/webde_logo.jpg" alt="Web.de"></div> <div><img src="img/webde_logo.jpg" alt="Web.de"></div>
</li> </li>
<li class="tonline" popover="#tonline-info" wo-touch="connectTo('tonline')"> <li class="tonline" wo-tooltip="#tonline-info" wo-touch="connectTo('tonline')">
<div><img src="img/tonline_logo.jpg" alt="T-Online"></div> <div><img src="img/tonline_logo.jpg" alt="T-Online"></div>
</li> </li>
<li class="other" popover="#custom-info" wo-touch="connectTo('custom')"> <li class="other" wo-tooltip="#custom-info" wo-touch="connectTo('custom')">
<h3>Custom server...</h3> <h3>Custom server...</h3>
</li> </li>
</ul> </ul>
@ -107,83 +107,83 @@
</div> </div>
<!-- popovers --> <!-- tooltips -->
<div id="google-info" class="popover right desktop-only" ng-controller="PopoverCtrl"> <div id="google-info" class="tooltip u-hidden-sm">
<div class="arrow"></div> <div class="tooltip__arrow"></div>
<div class="popover-title"><b>Google Account</b></div> <div class="tooltip__title">Google Account</div>
<div class="popover-content"> <div class="tooltip__content">
<p>Connect Whiteout Mail to your Gmail or Google Apps account.</p> <p>Connect Whiteout Mail to your Gmail or Google Apps account.</p>
<p>Encrypted and cleartext messages are stored on Google's servers.</p> <p>Encrypted and cleartext messages are stored on Google's servers.</p>
<p>Your emails and password remain on your device and are never sent to our servers.</p> <p>Your emails and password remain on your device and are never sent to our servers.</p>
</div> </div>
</div><!--/.popover--> </div><!--/.tooltip-->
<div id="whiteout-info" class="popover right desktop-only" ng-controller="PopoverCtrl"> <div id="whiteout-info" class="tooltip u-hidden-sm">
<div class="arrow"></div> <div class="tooltip__arrow"></div>
<div class="popover-title"><b>Whiteout Mailbox</b></div> <div class="tooltip__title">Whiteout Mailbox</div>
<div class="popover-content"> <div class="tooltip__content">
<p>Connect Whiteout Mail to your fully encrypted Whiteout Mailbox (hosted in Europe).</p> <p>Connect Whiteout Mail to your fully encrypted Whiteout Mailbox (hosted in Europe).</p>
<p>Incoming cleartext messages are encrypted with your public PGP key before being stored in your inbox.</p> <p>Incoming cleartext messages are encrypted with your public PGP key before being stored in your inbox.</p>
<p>This way your email is protected against hackers and can only be read on your device.</p> <p>This way your email is protected against hackers and can only be read on your device.</p>
</div> </div>
</div><!--/.popover--> </div><!--/.tooltip-->
<div id="yahoo-info" class="popover right desktop-only" ng-controller="PopoverCtrl"> <div id="yahoo-info" class="tooltip u-hidden-sm">
<div class="arrow"></div> <div class="tooltip__arrow"></div>
<div class="popover-title"><b>Yahoo Mail</b></div> <div class="tooltip__title">Yahoo Mail</div>
<div class="popover-content"> <div class="tooltip__content">
<p>Connect Whiteout Mail to your Yahoo Mail account.</p> <p>Connect Whiteout Mail to your Yahoo Mail account.</p>
<p>Encrypted and cleartext messages are stored on Yahoo's servers.</p> <p>Encrypted and cleartext messages are stored on Yahoo's servers.</p>
<p>Your emails and password remain on your device and are never sent to our servers.</p> <p>Your emails and password remain on your device and are never sent to our servers.</p>
</div> </div>
</div><!--/.popover--> </div><!--/.tooltip-->
<div id="tonline-info" class="popover right desktop-only" ng-controller="PopoverCtrl"> <div id="tonline-info" class="tooltip u-hidden-sm">
<div class="arrow"></div> <div class="tooltip__arrow"></div>
<div class="popover-title"><b>T-Online Account</b></div> <div class="tooltip__title">T-Online Account</div>
<div class="popover-content"> <div class="tooltip__content">
<p>Connect Whiteout Mail to your T-Online account.</p> <p>Connect Whiteout Mail to your T-Online account.</p>
<p>Encrypted and cleartext messages are stored on T-Online's servers.</p> <p>Encrypted and cleartext messages are stored on T-Online's servers.</p>
<p>Your emails and password remain on your device and are never sent to our servers.</p> <p>Your emails and password remain on your device and are never sent to our servers.</p>
</div> </div>
</div><!--/.popover--> </div><!--/.tooltip-->
<div id="outlook-info" class="popover right desktop-only" ng-controller="PopoverCtrl"> <div id="outlook-info" class="tooltip u-hidden-sm">
<div class="arrow"></div> <div class="tooltip__arrow"></div>
<div class="popover-title"><b>Outlook.com Account</b></div> <div class="tooltip__title">Outlook.com Account</div>
<div class="popover-content"> <div class="tooltip__content">
<p>Connect Whiteout Mail to your Outlook.com account.</p> <p>Connect Whiteout Mail to your Outlook.com account.</p>
<p>Encrypted and cleartext messages are stored on Microsoft's servers.</p> <p>Encrypted and cleartext messages are stored on Microsoft's servers.</p>
<p>Your emails and password remain on your device and are never sent to our servers.</p> <p>Your emails and password remain on your device and are never sent to our servers.</p>
</div> </div>
</div><!--/.popover--> </div><!--/.tooltip-->
<div id="gmx-info" class="popover right desktop-only" ng-controller="PopoverCtrl"> <div id="gmx-info" class="tooltip u-hidden-sm">
<div class="arrow"></div> <div class="tooltip__arrow"></div>
<div class="popover-title"><b>GMX.net Account</b></div> <div class="tooltip__title">GMX.net Account</div>
<div class="popover-content"> <div class="tooltip__content">
<p>Connect Whiteout Mail to your GMX.net account.</p> <p>Connect Whiteout Mail to your GMX.net account.</p>
<p>Encrypted and cleartext messages are stored on GMX's servers.</p> <p>Encrypted and cleartext messages are stored on GMX's servers.</p>
<p>Your emails and password remain on your device and are never sent to our servers.</p> <p>Your emails and password remain on your device and are never sent to our servers.</p>
</div> </div>
</div><!--/.popover--> </div><!--/.tooltip-->
<div id="webde-info" class="popover right desktop-only" ng-controller="PopoverCtrl"> <div id="webde-info" class="tooltip u-hidden-sm">
<div class="arrow"></div> <div class="tooltip__arrow"></div>
<div class="popover-title"><b>Web.de Account</b></div> <div class="tooltip__title">Web.de Account</div>
<div class="popover-content"> <div class="tooltip__content">
<p>Connect Whiteout Mail to your Web.de account.</p> <p>Connect Whiteout Mail to your Web.de account.</p>
<p>Encrypted and cleartext messages are stored on Web.de's servers.</p> <p>Encrypted and cleartext messages are stored on Web.de's servers.</p>
<p>Your emails and password remain on your device and are never sent to our servers.</p> <p>Your emails and password remain on your device and are never sent to our servers.</p>
</div> </div>
</div><!--/.popover--> </div><!--/.tooltip-->
<div id="custom-info" class="popover right desktop-only" ng-controller="PopoverCtrl"> <div id="custom-info" class="tooltip u-hidden-sm">
<div class="arrow"></div> <div class="tooltip__arrow"></div>
<div class="popover-title"><b>Custom server</b></div> <div class="tooltip__title">Custom server</div>
<div class="popover-content"> <div class="tooltip__content">
<p>Connect Whiteout Mail to your own email server.</p> <p>Connect Whiteout Mail to your own email server.</p>
<p>Encrypted and cleartext messages are stored on your server.</p> <p>Encrypted and cleartext messages are stored on your server.</p>
<p>Your emails and password remain on your device and are never sent to our servers.</p> <p>Your emails and password remain on your device and are never sent to our servers.</p>
</div> </div>
</div><!--/.popover--> </div><!--/.tooltip-->

Some files were not shown because too many files have changed in this diff Show More