moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-26 10:52:17 -05:00
Code Issues Releases Wiki Activity

Merge pull request #150 from whiteout-io/dev/desktop

Browse Source 
Dev/desktop
This commit is contained in:
Tankred Hase 2014-10-27 16:04:51 +01:00
commit dc8ee2c498
119 changed files with 3965 additions and 2499 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
src/css/
dist/
compile/
release/
test/integration/src/
src/img/icons/all.svg
.elasticbeanstalk/
test/*/index.js
**/*.browserified.js

276
Gruntfile.js
View File

@ -17,6 +17,8 @@ module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// General
shell: {
options: {
stderr: false
@ -26,45 +28,65 @@ module.exports = function(grunt) {
}
},
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: {
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.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: ['*.js', '*.json', 'manifest.*'],
dest: 'dist/'
}
},
// Stylesheets
sass: {
dist: {
files: {
@ -73,7 +95,6 @@ module.exports = function(grunt) {
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 versions']
@ -85,10 +106,9 @@ module.exports = function(grunt) {
}
}
},
csso: {
options: {
banner: '/*! Copyright © <%= grunt.template.today("yyyy") %>, Whiteout Networks GmbH.*/\n'
banner: '/*! Copyright © 2013, Whiteout Networks GmbH. All rights reserved.*/\n'
},
dist: {
files: {
@ -98,22 +118,12 @@ module.exports = function(grunt) {
}
},
watch: {
css: {
files: ['src/sass/**/*.scss'],
tasks: ['dist-css', 'manifest']
},
js: {
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']
// JavaScript
jshint: {
all: ['Gruntfile.js', 'src/*.js', 'src/js/**/*.js', 'test/unit/*-test.js', 'test/integration/*-test.js'],
options: {
jshintrc: '.jshintrc'
}
},
@ -320,58 +330,112 @@ module.exports = function(grunt) {
}
},
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.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/'
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'
]
}
}
},
// 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']
},
js: {
files: ['src/js/**/*.js'],
tasks: ['copy:js', 'copy:integration']
},
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']
},
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']
}
},
// Deployment
compress: {
main: {
options: {
@ -430,13 +494,17 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-manifest');
grunt.loadNpmTasks('grunt-mocha-phantomjs');
grunt.loadNpmTasks('grunt-exorcise');
grunt.loadNpmTasks('grunt-string-replace');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-svgstore');
grunt.loadNpmTasks('grunt-shell');
// Build tasks
grunt.registerTask('dist-css', ['sass', 'autoprefixer', 'csso']);
grunt.registerTask('dist-js', ['browserify', 'exorcise', 'uglify']);
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', 'shell', 'dist-css', 'dist-js', 'dist-assets', 'dist-copy', 'manifest']);
// Test/Dev tasks
grunt.registerTask('dev', ['connect:dev']);

11
package.json
View File

@ -50,12 +50,13 @@
"browsersmtp": "https://github.com/whiteout-io/browsersmtp/tarball/master",
"chai": "~1.7.2",
"grunt": "~0.4.1",
"grunt-autoprefixer": "~0.7.2",
"grunt-browserify": "^3.0.1",
"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-connect": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-sass": "~0.7.3",
"grunt-contrib-uglify": "^0.6.0",
@ -63,10 +64,12 @@
"grunt-shell": "~1.1.1",
"grunt-csso": "~0.6.1",
"grunt-exorcise": "^0.2.0",
"grunt-manifest": "^0.4.0",
"grunt-mocha-phantomjs": "^0.6.0",
"mocha": "^1.21.4",
"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.

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

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g>
<path fill="#535353" d="M355.3,298c3.1,0,7.3,0,11.6,1c25.2,2.1,53.5,25.2,57.7,69.3V382c0,2.1,0,4.2-1,6.3v1c0,2.1-1,4.2-1,6.3
c0,0,0,0,0,1c-1,4.2-2.1,9.4-4.2,13.7l0,0c-12.6,33.6-43,73.5-106,119.7c-1,0-1,1-2.1,1c-2.1,1-3.1,2.1-5.3,4.2
c-2.1,2.1-5.3,4.2-8.4,5.3c-3.1-2.1-5.3-4.2-8.4-5.3c-2.1-1-3.1-2.1-5.3-4.2c-1,0-1-1-2.1-1c-63-46.2-93.4-86.1-106-119.7l0,0
c-2.1-5.3-3.1-9.4-4.2-13.7c0,0,0,0,0-1c0-2.1-1-4.2-1-6.3v-1c0-2.1,0-4.2,0-6.3v-14.7c3.1-44.1,32.5-67.2,57.7-69.3
c4.2,0,7.3,0,11.6,0l0,0c4.2,0,8.4,0,12.6,1c21,3.1,32.5,14.7,46.2,30.4c13.7-15.7,25.2-27.3,46.2-30.4
C346.9,298,351.1,298,355.3,298 M356.6,284.6c-5.4,0-9.7,0-15,1.1c-20.4,3.2-34.3,13.9-45.1,25.7c-10.7-11.8-24.7-22.5-45.1-25.7
c-4.3-1.1-9.7-1.1-13.9-1.1c-4.3,0-8.6,0-12.9,1.1c-30,2.1-64.3,29-68.6,80.5l0,0l0,0v15l0,0l0,0c0,2.1,0,4.3,1.1,6.4v1.1
c0,2.1,1.1,4.3,1.1,6.4l0,0l0,0c1.1,5.4,2.1,9.7,4.3,13.9l0,0l1.1,4.3c15,40.8,51.5,82.6,111.6,127.7l1.1,1.1l1.1,1.1l2.1,1.1
l3.2,2.1c3.2,2.1,5.4,4.3,8.6,6.4l6.4,4.3l6.4-4.3c3.2-2.1,5.4-4.3,8.6-6.4c2.1-1.1,3.2-3.2,5.4-4.3l2.1-1.1
c57.9-42.9,94.4-82.6,109.5-122.3l0,0l2.1-5.4c0,0,0-1.1,1.1-1.1l0,0l0,0c1.1-4.3,3.2-9.7,4.3-13.9l0,0v-1.1c0-2.1,1.1-4.3,1.1-7.5
l0,0v-1.1c0-3.2,1.1-5.4,1.1-7.5l0,0l0,0v-15l0,0l0,0c-4.3-51.5-38.6-77.3-68.7-80.5C365.2,284.6,360.9,284.6,356.6,284.6
L356.6,284.6z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

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

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g>
<g>
<g>
<path fill="#79C9EC" d="M422,529.3c0-7.4-5-76.7-21-94.1l-1.2-1.2c0,0-14.9-9.9-28.5-13.6c-6.2-1.2-23.5-6.2-32.2-16.1l-1.2-1.2
l-1.2-11.1c2.5-3.7,6.2-9.9,8.7-18.6c2.5-2.5,7.4-8.7,6.2-21v-8.7l-1.2-1.2l-1.2-1.2c1.2-13.6,0-39.6-16.1-50.8
c-2.5-2.5-12.4-11.1-35.9-11.1c-21,0-30.9,7.4-33.4,9.9c-17.3,11.1-17.3,38.4-17.3,52c-1.2,0-1.2,1.2-1.2,1.2l-1.2,1.2v6.2
c-1.2,13.6,3.7,19.8,6.2,22.3c2.5,8.7,7.4,16.1,8.7,18.6l-1.2,11.1l-1.2,1.2c-9.9,11.1-32.2,16.1-32.2,16.1
c-13.6,3.7-28.5,13.6-28.5,13.6l-1.2,1.2c-16.1,17.3-19.8,86.6-21,94.1v2.5l2.5,1.2c2.5,3.7,42.1,30.9,122.5,30.9
s120.1-27.2,121.3-28.5l2.5-1.2V529.3z M298.3,551.5c-65.6,0-102.7-18.6-112.6-24.8c1.2-22.3,6.2-70.6,17.3-82.9
c2.5-1.2,13.6-8.7,23.5-11.1c1.2,0,26-5,38.4-19.8l3.7-5l1.2-19.8v-1.2c0,0-5-7.4-8.7-17.3l-2.5-23.5c-1.2-9.9-2.5-38.4,11.1-47
l1.2-1.2c0,0,7.4-7.4,27.2-8.7c19.8,1.2,27.2,8.7,27.2,8.7l0,0l1.2,1.2c13.6,8.7,12.4,37.1,11.1,48.3l-2.5,22.3
c-3.7,9.9-8.7,17.3-8.7,17.3l-1.2,1.2l1.2,19.8l3.7,5c12.4,14.9,37.1,19.8,38.4,19.8c11.1,2.5,22.3,9.9,24.8,11.1
c9.9,12.4,16.1,61.9,17.3,82.9C401,533,363.9,551.5,298.3,551.5z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-396.7 279.2 283.5 283.5" enable-background="new -396.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-255" y1="420.9" x2="-255" y2="420.9"/>
</g>
<path d="M-193,332.3h79.7v23.4H-193V332.3z M-164.4,304.6h23.4v79.7h-23.4V304.6z M-206.8,494.4c-0.9,6.1,0,6.1-8.7,6.9
c-5.2,0.9-36.4,0.9-68.4,0.9c-36.4,0-74.5,0-77.1-0.9c-10.4-2.6-4.3-22.5,9.5-32.1c11.3-6.9,33.8-18.2,39.9-19.1
c8.7-1.7,9.5-6.9,0-23.4c-1.7-3.5-4.3-14.7-4.3-26.9c0-19.1,3.5-32.1,19.9-39c3.5-0.9,6.9-1.7,10.4-1.7c11.3,0,21.7,6.1,26,15.6
c6.1,12.1,3.5,44.2-3.5,55.4c-7.8,13-6.9,17.3,1.7,19.1c5.2,1.7,22.5,9.5,39,18.2C-211.2,473.6-205.1,484-206.8,494.4L-206.8,494.4z
M-153.1,471.8c0,4.3,0,5.2-6.1,6.1c-3.5,0.9-19.1,0.9-39,0.9c-3.5-7.8-9.5-15.6-19.1-19.9c-10.4-6.1-21.7-11.3-31.2-15.6
c6.1-2.6,11.3-5.2,13.9-6.1c6.1-1.7,6.9-5.2,0-18.2c-1.7-3.5-3.5-12.1-4.3-21.7c0-14.7,3.5-25.1,16.5-30.3c2.6-0.9,5.2-0.9,7.8-0.9
c8.7,0,16.5,4.3,19.9,12.1c4.3,9.5,2.6,34.7-2.6,44.2c-6.1,10.4-5.2,13.9,1.7,14.7c4.3,0.9,17.3,7.8,30.3,14.7
C-157.5,456.3-152.3,464.1-153.1,471.8L-153.1,471.8z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
src/img/icons/attachment.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-404.7 279.2 283.5 283.5" enable-background="new -404.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-263" y1="420.9" x2="-263" y2="420.9"/>
</g>
<path d="M-225,327.8c1.3-1.3,10.3-10.3,25.8-15.5c20.6-6.4,42.5-1.3,59.2,15.5c16.7,16.7,23.2,37.3,15.5,59.2
c-5.1,15.5-14.2,25.8-15.5,27l-118.5,118.5c-20.6,20.6-72.1,47.6-119.8,0s-20.6-99.2,0-118.5l127.5-127.5c5.2-5.2,12.9-5.2,16.7,0
c5.2,5.2,5.2,12.9,0,16.7l-127.5,127.5c-2.6,1.3-42.5,42.5,0,85c41.2,41.2,81.1,3.9,85,0L-158,396c0,0,6.4-6.4,10.3-16.7
c3.9-12.9,1.3-23.2-10.3-34.8c-23.2-23.2-46.4-3.9-51.5,0l-110.8,110.8c-3.9,3.9-6.4,10.3,0,18c6.4,6.4,12.9,3.9,16.7,0l77.3-77.3
c5.2-3.9,12.9-3.9,16.7,0c5.2,5.2,5.2,12.9,0,18l-77.3,76c-10.3,10.3-32.2,18-51.5,0c-19.3-18-10.3-41.2,0-51.5L-225,327.8
L-225,327.8z"/>
</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

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

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g>
<path fill="#565F73" d="M433.6,411l-40.2-1.7c15.9-23,13-55.2-8.1-76.3c-20.9-20.9-52.7-23.9-75.5-8.7l-1.6-38.6
c0-3.4-2.8-6-6.2-5.8c-3.4,0-6,2.8-5.8,6.2l2,48.4v0.5v0c-0.1,0-0.3,0-0.4,0c-5.4-0.5-10.8-0.4-16,0.1c0,0,0,0,0-0.1
c0-0.7-0.2-1.4-0.5-2l-18.2-36.6c-1.4-2.8-5-4-8-2.6c-2.8,1.4-4,5-2.6,8l17.6,35.3l0,0.1c-6.8,1.7-13.3,4.1-19.5,7.5
c-1.6,0.9-3.2,1.9-4.8,2.9c0.3-0.2,0.6-0.5,0.9-0.7c1.3-0.8,2.6-1.5,3.9-2.2l-31.8-30.2c-2.4-2.4-6.2-2.2-8.4,0.2
c-2.2,2.4-2,6.2,0.2,8.4l29.9,28.3c-2.7,2.1-5.3,4.4-7.9,6.9l-62.1,62c-33.1,32.9,1.4,117.7,2.8,121.3c0.4,0.8,0.8,1.4,1.4,2
c0.6,0.6,1.2,1,2,1.4c3.6,1.4,88.3,35.9,121.4,2.8l62.1-62.1c2.5-2.5,4.8-5.1,6.9-7.9l29.7,31.3c2.4,2.2,6,2.4,8.6,0.4
c2.4-2.2,2.4-6,0.2-8.4l-31.8-33.6l-0.1-0.1c3.2-6,5.7-12.3,7.3-18.9c0,0,0.1,0,0.1,0.1c0,0,0,0,0.1,0l36.6,18.2
c3,1.6,6.6,0.4,8-2.6c1.6-3,0.4-6.6-2.6-8L386.2,438c-1.1-0.6-2.3-0.8-3.5-0.7c0,0-0.1,0-0.1,0c0.6-5.5,0.7-11,0.2-16.6h-0.2
c0,0,0.1-0.1,0.2-0.1c0,0,0.1-0.1,0.1-0.1c0,0.1,0,0.2,0,0.3l50.2,2.1c3.2,0,6-2.4,6.2-5.8C439.4,414,437,411.2,433.6,411z
M309.1,349c-1.6-0.4-3.1-0.7-4.7-1c0,0,0,0,0,0l0,0c-0.5,0-1-0.1-1.5-0.2c-0.1,0-0.2,0-0.4,0c0.1,0,0.2,0,0.3,0l0,0
c0.5,0.1,1,0.2,1.6,0.3l0,0l0,0l0,0C306,348.2,307.5,348.6,309.1,349z M299.5,347.2c-0.2,0-0.5,0-0.8-0.1
C299,347.1,299.3,347.2,299.5,347.2z M253.3,356.7c-0.4,0.4-0.9,0.7-1.4,0.9C252.4,357.3,252.9,357,253.3,356.7z M178.8,428.6
l62.1-62.1c1.7-1.7,3.5-3.3,5.3-4.8c7.2,23,20.2,44.7,37.9,63.6L181,528.5C171.4,501.5,158.5,449,178.8,428.6z M351.5,477.3
l-62.1,62c-20.3,20.3-73.1,7.2-100.1-2.4l103.1-103.1c19,17.8,40.8,30.9,64,37.9C354.9,473.7,353.3,475.5,351.5,477.3z M363,461.3
c-23.8-7-46.6-20.5-65.7-39.4c-0.2-0.2-0.4-0.4-0.6-0.6c-0.2-0.2-0.5-0.5-0.7-0.7c-18.9-19.1-32.4-41.6-39.3-65.6
c28.4-15.2,65.7-8.8,90.3,15.8C371.8,395.6,378.2,432.9,363,461.3z M310.3,349.3c1.2,0.3,2.3,0.7,3.5,1c1,0.3,1.9,0.6,2.8,1
c-0.9-0.3-1.9-0.6-2.8-1C312.6,349.9,311.4,349.6,310.3,349.3z M326.7,355.7c7.3,3.8,14.3,8.9,20.5,15.1c3.3,3.4,6.3,7,9,10.7
c-2.7-3.8-5.7-7.3-9-10.7C341.1,364.7,334.2,359.6,326.7,355.7z M381.1,408.8c-2.2-10.1-6.1-20-11.7-29.1
C375,388.8,379,398.7,381.1,408.8L381.1,408.8z M380.7,405.9c-4.2-16.2-12.8-31.4-25-43.6c-1.5-1.5-3-2.9-4.5-4.2
c1.5,1.3,2.9,2.7,4.3,4.1c5.2,5.2,9.7,10.9,13.4,16.8c-3.7-5.9-8.2-11.5-13.4-16.7c-13-13.1-28.9-21.6-45.3-25.3l0,0
c4,0.9,7.9,2.1,11.8,3.6c-3.2-1.2-6.6-2.3-9.9-3.2c18.2-15.6,46.5-14,64.5,4C394.6,359.4,396.2,387.6,380.7,405.9z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 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.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<polygon fill="#231F20" points="262.4,524.6 155.9,417.4 185.5,387.8 262.4,464.7 409.8,317.3 439.4,346.9 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 595 B

10
src/img/icons/close.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-406.7 279.2 283.5 283.5" enable-background="new -406.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-265" y1="420.9" x2="-265" y2="420.9"/>
</g>
<path d="M-373.2,280.4l250,250l-33.5,33.5l-250-250L-373.2,280.4z M-406.7,527.9l250-250l33.5,33.5l-250,250L-406.7,527.9z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 716 B

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

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-406.7 279.2 283.5 283.5" enable-background="new -406.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-265" y1="420.9" x2="-265" y2="420.9"/>
</g>
<path d="M-265,279.2c-78.1,0-141.7,63.7-141.7,141.7s63.7,141.7,141.7,141.7s141.7-63.7,141.7-141.7S-186.9,279.2-265,279.2z
M-235,420.9l60.1,60.1l-30,30l-60.1-60.1l-60.1,60.1l-30-30l60.1-60.1l-60.1-60.1l30-30l60.1,60.1l60.1-60.1l30,30L-235,420.9z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 844 B

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

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g>
<g>
<g>
<g>
<path fill="#79C9EC" d="M356.7,510c0-0.9,0-2.3-0.5-3.6c-0.9-14.5-5-59.5-16.4-72.7l-0.9-0.9c-0.5-0.5-11.8-8.2-23.2-10.9
c-1.8-0.5-5-1.4-9.1-2.7c-3.6-1.4-7.3-3.2-10.9-5.5c-2.3-1.4-4.5-3.2-6.4-5l-1.4-1.4l-0.5-10c1.8-2.3,5-8.2,7.3-15.4
c2.3-2.3,6.4-7.3,5.5-17.7v-5.5l-0.9-0.9c0-0.5-0.9-0.9-1.4-1.4c0.5-10.9,0-32.3-13.6-41.3c-2.3-2.3-10-8.6-28.6-9.5
c-18.2,0.9-26.3,7.3-28.2,9.5c-13.2,9.1-14.1,30.9-13.6,41.3c-0.9,0.5-1.4,0.9-1.4,1.4l-0.9,0.9v5.9
c-0.9,10.4,3.2,15.4,5.5,17.7c2.3,7.3,5.9,12.7,7.3,15.4l-0.9,9.5l-0.9,1.4c-7.7,9.1-25.4,12.7-25.9,13.2
c-11.4,2.7-22.7,10.9-23.2,10.9l-0.9,0.9c-13.2,14.1-16.4,70-16.8,76.3v2.3l2.3,1.4c1.4,0.9,33.2,22.7,98.6,22.7
c63.1,0,94.9-20.4,98.1-22.7l0,0l2.3-1.4L356.7,510z M256.3,527.7c-53.1,0-83.1-15.4-90.9-20c0.9-17.7,5.5-57.2,13.6-67.7
c2.3-1.4,11.4-7.3,19.5-9.5c0.9,0,20.9-4.5,31.3-15.9l3.2-3.6l0.9-15.9l-0.9-1.4c0,0-4.1-5.5-6.8-13.6l-2.3-18.6
c-1.4-8.6-1.8-31.8,9.5-39.1l0.9-0.9c0,0,5.9-6.4,21.8-6.8c16.4,0.5,22.3,6.8,22.3,6.8l0.9,0.9c10.9,7.3,10.4,30.4,9.5,39.1
l-2.3,18.2c-2.7,8.2-6.8,13.6-6.8,13.6l-1.4,1.8l1.4,15.9l3.2,3.6c0.9,1.4,2.3,2.3,3.6,3.6c2.3,2.3,5,3.6,7.7,5
c9.5,5,19.1,7.3,20,7.3c8.6,2.3,17.7,8.2,20,9.5c8.2,10,12.3,47.7,13.6,65.9c0,0.5,0,0.9,0,1.8c-2.3,1.4-6.4,3.6-11.8,5.9
C320.8,519.5,294.5,527.7,256.3,527.7z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path fill="#79C9EC" d="M439.4,490.4c-0.5-5.5-3.2-54.1-14.5-67.2l-0.9-0.5c-0.5-0.5-10.4-7.3-20.4-10
c-4.5-0.9-17.3-4.5-23.2-11.4l-0.9-1.4l-0.9-8.2c1.4-2.3,4.5-7.3,6.4-13.6c2.3-1.8,5.5-6.4,5-15.4v-5l-0.9-0.9
c0-0.5-0.5-0.9-1.4-1.4c0.5-9.5,0-28.6-11.8-36.3c-1.8-1.8-9.1-7.7-25.4-8.2c-15.9,0.5-23.2,6.4-25,8.2
c-11.8,8.2-12.3,27.3-11.8,36.3c-0.5,0.5-0.9,0.9-1.4,1.4l-0.9,0.9v4.5c-0.5,9.1,2.7,13.6,5,15.4c2.3,6.4,5,11.4,6.4,13.6
l-0.5,8.2l-0.9,1.4c-7.3,8.2-23.2,11.4-23.2,11.4c-0.9,0-1.8,0.5-2.7,0.9c-3.6,0.9-6.8,2.7-9.5,4.1c2.3,2.3,5,3.6,7.7,5
c2.3-0.9,4.5-1.8,6.4-2.3c0.5,0,2.7-0.5,6.4-1.8c6.4-2.3,15.4-5.9,21.4-12.3l2.7-3.2l0.9-13.6l-0.9-1.4c0,0-3.6-5-5.9-11.8
l-1.8-15.9c-0.9-7.3-1.4-28.2,8.2-34.1l0.9-0.9c0,0,5-5.5,19.1-5.9c14.5,0.5,19.5,5.9,19.5,5.9l0,0l0.9,0.9
c9.5,6.4,9.1,26.8,8.2,34.1l-2.3,15.9c-2.3,7.3-5.9,12.3-5.9,12.3l-0.9,1.4l0.9,13.6l2.7,3.2c9.1,10,26.8,14.1,27.3,14.1
c7.7,1.8,15.4,6.8,17.3,8.2c7.7,9.1,11.4,44.1,12.3,59.5c-6.8,4.1-31.3,16.4-74.5,17.7c-1.8,0-3.6,0-5.5,0c-1.4,0-2.7,0-3.6,0
c0,0.5,0,0.9,0,1.8c-2.3,1.4-6.4,3.6-11.8,5.9c5,0.5,10,0.5,15.9,0.5c0.9,0,2.3,0,3.2,0c55-0.9,81.8-19.1,83.1-20l1.8-1.4V490.4
z"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

15
src/img/icons/decrypted.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-404.2 279.2 283.5 283.5" enable-background="new -404.2 279.2 283.5 283.5" xml:space="preserve">
<g>
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-404.2" y1="291.4" x2="-404.2" y2="291.4"/>
</g>
<path d="M-120.8,368.3v30.3H-160v-30.3c0-20.7-16.3-37-36.3-37s-36.3,17-36.3,37v30.3h-39.2v-30.3c0-42.2,34-77,75.5-77
S-120.8,326.2-120.8,368.3z M-404.2,413.5v136.9h193.9V413.5H-404.2z M-326.5,534.1l5.9-49.6l1.5-10.4c-5.2-3.7-8.9-10.4-8.9-17.8
c0-3,0.7-5.2,1.5-8.1c3-8.1,10.4-13.3,19.2-13.3c8.9,0,16.3,5.2,19.2,13.3c0.7,2.2,1.5,5.2,1.5,8.1c0,7.4-3.7,14.1-8.9,17.8
l1.5,10.4l5.9,49.6C-288,534.1-326.5,534.1-326.5,534.1z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

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

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="297.6" y1="420.9" x2="297.6" y2="420.9"/>
</g>
<path d="M397.3,318.2c7.1,0,13.3,6.2,13.3,13.3v8.9c0,6.2-4.4,11.5-9.7,13.3v187.8c0,11.5-9.7,21.3-23,21.3H218.4
c-13.3,0-23.9-9.7-23.9-21.3V352.7c-5.3-0.9-9.7-7.1-9.7-12.4v-8.9c0-7.1,6.2-13.3,13.3-13.3h39v-15.9c0-13.3,9.7-23,21.3-23h77.1
c13.3,0,23,9.7,23,23v15.9H397.3L397.3,318.2z M371.6,537c1.8,0,2.7-1.8,2.7-2.7V352.7H221v180.7c0,1.8,1.8,2.7,2.7,2.7h147.9V537z
M251.1,521.9c-7.1,0-13.3-6.2-13.3-13.3V380.2c0-7.1,6.2-11.5,13.3-11.5h2.7c7.1,0,13.3,6.2,13.3,11.5v129.3
c0,7.1-6.2,13.3-13.3,13.3h-2.7V521.9z M258.2,299.6c-1.8,0-2.7,0-2.7,2.7v15.9h84.2v-15.9c0-1.8-1.8-2.7-2.7-2.7H258.2z
M296.3,521.9c-7.1,0-13.3-6.2-13.3-13.3V380.2c0-7.1,6.2-11.5,13.3-11.5h1.8c7.1,0,13.3,6.2,13.3,11.5v129.3
c0,7.1-6.2,13.3-13.3,13.3h-1.8V521.9z M340.6,521.9c-7.1,0-13.3-6.2-13.3-13.3V380.2c0-7.1,6.2-11.5,13.3-11.5h2.7
c7.1,0,13.3,6.2,13.3,11.5v129.3c0,7.1-6.2,13.3-13.3,13.3h-2.7V521.9z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g id="_x31__1_">
<path fill="#231F20" d="M383.9,562.7H211.4c-13.6,0-24.6-11.1-24.6-24.6V303.9c0-13.6,11.1-24.6,24.6-24.6h113.4l83.8,83.8v175
C408.6,551.6,397.5,562.7,383.9,562.7z M211.4,291.5c-6.8,0-12.3,5.5-12.3,12.3V538c0,6.8,5.5,12.3,12.3,12.3h172.5
c6.8,0,12.3-5.5,12.3-12.3V367.9l-76.4-76.4H211.4z"/>
<path fill="#231F20" d="M402.4,371.6h-73.9c-6.8,0-12.3-5.5-12.3-12.3v-73.9h12.3v73.9h73.9V371.6z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 910 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.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<path d="M434.5,382.9c6.5-4.3,6.5-13,0-17.4L415,348.1c-6.5-4.3-15.2-4.3-19.5,0l-97.8,82.6L202,348.1c-6.5-4.3-15.2-4.3-19.5,0
l-21.7,17.4c-6.5,4.3-6.5,13,0,17.4l128.1,110.9c6.5,4.3,15.2,4.3,19.5,0L434.5,382.9z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 693 B

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

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="141.7 281.5 283.5 283.5" enable-background="new 141.7 281.5 283.5 283.5" xml:space="preserve">
<path d="M146.6,461.2c-6.5,4.4-6.5,13,0,17.4l19.5,17.4c6.5,4.4,15.2,4.4,19.5,0l97.8-82.5l95.6,82.5c6.5,4.4,15.2,4.4,19.5,0
l21.7-17.4c6.5-4.4,6.5-13,0-17.4L292.1,350.4c-6.5-4.4-15.2-4.4-19.5,0L146.6,461.2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 690 B

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

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g>
<path fill="#1A171B" d="M329.1,369.1v30.8h-38.9v-30.8c0-21-16.2-37.2-37.2-37.2c-19.4,0-37.2,16.2-37.2,37.2v30.8H177v-30.8
c0-43.7,34-77.7,76.1-77.7S329.1,325.4,329.1,369.1z"/>
<line fill="none" x1="269.2" y1="398.3" x2="236.9" y2="398.3"/>
<path fill="#1A171B" d="M155.9,414.5v136h194.3v-136H155.9z M233.6,534.3l6.5-48.6l1.6-11.3c-4.9-3.2-9.7-9.7-9.7-17.8
c0-3.2,0-4.9,1.6-8.1c3.2-8.1,11.3-13,19.4-13c8.1,0,16.2,4.9,19.4,13c1.6,3.2,1.6,4.9,1.6,8.1c0,8.1-3.2,13-9.7,17.8l1.6,11.3
l6.5,48.6H233.6z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1003 B

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

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g id="_x32__6_">
<path fill="#231F20" d="M415.2,541.6H180c-13.3,0-24.1-10.9-24.1-24.1V378.7c0-13.3,10.9-24.1,24.1-24.1h235.2
c13.3,0,24.1,10.9,24.1,24.1v138.7C439.4,530.7,428.5,541.6,415.2,541.6z M180,366.7c-6.6,0-12.1,5.4-12.1,12.1v138.7
c0,6.6,5.4,12.1,12.1,12.1h235.2c6.6,0,12.1-5.4,12.1-12.1V378.7c0-6.6-5.4-12.1-12.1-12.1H180z"/>
<path fill="#231F20" d="M439.4,378.7h-12.1v-24.1c0-6.6-5.4-12.1-12.1-12.1H289.8c-5.4,0-13.3-3-16.9-7.2L253.6,316
c-1.8-1.8-6-3.6-8.4-3.6H180c-6.6,0-12.1,5.4-12.1,12.1v54.3h-12.1v-54.3c0-13.3,10.9-24.1,24.1-24.1h65.1c5.4,0,13.3,3,16.9,7.2
l19.3,19.3c1.8,1.8,6,3.6,8.4,3.6h125.4c13.3,0,24.1,10.9,24.1,24.1V378.7z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-406.7 279.2 283.5 283.5" enable-background="new -406.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-265" y1="420.9" x2="-265" y2="420.9"/>
</g>
<path d="M-279.5,563.1v-75.8h-127.2V349.8l127.2-0.9v-70.2l128.2,117.9l28.1,27.1C-123.3,423.7-279.5,563.1-279.5,563.1z
M-389.9,470.5h127.2v55.2l114.1-102l-15-15l-99.2-91.7v48.6l-127.2,0.9C-389.9,366.6-389.9,470.5-389.9,470.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 824 B

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

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g>
<path fill="#231F20" d="M425.5,455.9l-37.1-146.5v-0.1c-1.2-5.4-7-10-12.6-10h-157c-4.7,0-11.3,4.5-12.6,10l0,0.1l-36.4,146.5
l-13.9-3.4L192.3,306c2.7-11.6,14.6-21,26.5-21h157c12.1,0,23.7,9.2,26.5,21l37,146.4L425.5,455.9z"/>
<g>
<g>
<path fill="#231F20" d="M425.8,462.4v74.2c0,4-2.7,6.8-6.8,6.8H176.1c-4,0-6.8-2.7-6.8-6.8v-74.2h68.9
c6.1,27,30.4,47.2,59.4,47.2c28.3,0,53.3-20.2,59.4-47.2H425.8 M439.4,448.8h-88.4c-3.4,0-6.1,2.7-6.8,6.1
c-2.7,23-22.3,41.2-46.6,41.2c-24.3,0-43.9-18.2-46.6-41.2c-0.7-3.4-3.4-6.1-6.8-6.1h-88.4v87.8c0,11.5,8.8,20.2,20.2,20.2h242.9
c11.5,0,20.2-8.8,20.2-20.2L439.4,448.8L439.4,448.8z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-406.7 279.2 283.5 283.5" enable-background="new -406.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-265" y1="420.9" x2="-265" y2="420.9"/>
</g>
<path d="M-265,279.2c-78.3,0-141.7,63.5-141.7,141.7s63.5,141.7,141.7,141.7s141.7-63.5,141.7-141.7S-186.7,279.2-265,279.2z
M-265,536c-63.6,0-115.2-51.6-115.2-115.2s51.6-115.2,115.2-115.2s115.2,51.6,115.2,115.2S-201.4,536-265,536z M-282.7,350h35.4
v35.4h-35.4V350z M-229.6,491.8h-70.9V474h17.7v-53.1h-17.7v-17.7h53.1V474h17.7V491.8z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 932 B

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

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<path d="M213.3,562.7l-40.8-1c-2.4,0-4.8-1.9-5.3-4.8l-6.7-56.1c0-1.4,0.5-2.9,1.4-4.3c1-1,2.4-1.4,3.8-1.4h23.5v-22.5
c0-1.4,0.5-2.9,1.4-3.8c1-1,2.4-1.4,3.8-1.4h22.1v-22.1c0-1.4,0.5-2.9,1.4-3.8c1-1,2.4-1.4,3.8-1.4H244l-0.5-30.7
c0-1.4,0.5-2.9,1.4-3.8l20.6-20.6c-7.2-28.8,1.4-59.5,22.5-80.6c15.8-15.8,37.4-24.9,60.4-24.9s44.6,9.1,60.9,24.9
c33.6,33.6,33.6,87.8,0,121.3c-15.8,15.8-37.4,24.9-60.4,24.9c-6.7,0-13-1-19.2-1.9L217.2,561.2
C216.2,562.2,214.8,562.7,213.3,562.7L213.3,562.7z M185,551.2l26.4,1l113.2-113.2c1.4-1.4,3.4-1.9,5.3-1.4c6.2,1.4,13,2.4,19.7,2.4
c20.1,0,38.9-7.7,52.8-21.6c29.3-29.3,29.3-77.2,0-106.5c-14.4-14.4-33.1-22.1-53.2-22.1c-20.1,0-38.9,7.7-53.2,22.1
c-18.7,18.7-26.4,47-18.7,73.4c0.5,1.9,0,3.8-1.4,5.3l-21.1,21.1l0.5,33.6c0,1.4-0.5,2.9-1.4,3.8c-1,1-2.4,1.4-3.8,1.4h-22.1v22.1
c0,1.4-0.5,2.9-1.4,3.8c-1,1-2.4,1.4-3.8,1.4h-22.1v22.5c0,1.4-0.5,2.9-1.4,3.8c-1,1-2.4,1.4-3.8,1.4h-22.5l4.8,39.3l103.1-104.1
c1.9-1.9,5.3-1.9,7.7,0c1.9,1.9,1.9,5.3,0,7.7L185,551.2L185,551.2z M370.7,370.8c-7.2,0-14.4-2.9-19.7-8.2c-11-11-11-28.3,0-39.3
c5.3-5.3,12-8.2,19.7-8.2c7.2,0,14.4,2.9,19.7,8.2s8.2,12,8.2,19.7s-2.9,14.4-8.2,19.7C385.1,367.9,377.9,370.8,370.7,370.8
L370.7,370.8z M370.7,325.7c-4.8,0-9.1,1.9-12,4.8c-6.7,6.7-6.7,17.7,0,24.5c3.4,3.4,7.7,4.8,12,4.8c4.8,0,9.1-1.9,12-4.8
c3.4-3.4,4.8-7.7,4.8-12c0-4.8-1.9-9.1-4.8-12C379.3,327.7,375,325.7,370.7,325.7L370.7,325.7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 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

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

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-406.7 279.2 283.5 283.5" enable-background="new -406.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-265" y1="420.9" x2="-265" y2="420.9"/>
</g>
<path d="M-194.1,456.3l-50.6-50.6l121.5-91.1l-35.4-35.4l-151.8,60.8l-47.8-47.8c-13.8-13.8-33-17.1-42.8-7.3
c-9.7,9.7-6.4,29,7.3,42.8l47.8,47.8l-60.8,151.9l35.4,35.4l91.1-121.5l50.6,50.6v70.9h35.4l17.7-53.1l53.1-17.7v-35.4L-194.1,456.3
L-194.1,456.3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 850 B

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

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-398.7 279.2 283.5 283.5" enable-background="new -398.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-257" y1="420.9" x2="-257" y2="420.9"/>
</g>
<path d="M-398.7,397.3l101.4-93v47.2c195.8,0,181.9,186.1,181.9,186.1c-38.9-129.1-181.9-91.6-181.9-91.6v47.2
C-297.4,493.1-398.7,397.3-398.7,397.3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 745 B

14
src/img/icons/reply_all_light.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-396.7 279.2 283.5 283.5" enable-background="new -396.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-255" y1="420.9" x2="-255" y2="420.9"/>
</g>
<path d="M-113.3,528.2l-10.3-29.6c-19.3-54-63-64.9-96.4-64.9c-16.1,0-30.2,2.6-36.6,4.5l1.9,45l-96.4-81.6l88.7-88.1l1.9,42.4
c18-0.6,34.1,1.3,48.8,5.1h1.3l0.6,0.6c98.3,25.7,96.4,134.3,96.4,135C-113.3,496.7-113.3,528.2-113.3,528.2z M-220,422.2
c30.2,0,68.1,8.4,92.6,43.7c-6.4-31.5-26.4-78.4-85.5-93.2l-1.3-0.6c-14.8-3.9-32.1-5.1-51.4-4.5h-5.8l-1.3-28.3l-61.1,60.4
l66.8,56.6l-1.3-27l4.5-1.3C-263.7,428-244.4,422.2-220,422.2L-220,422.2z M-299.7,482.6l-97.1-81.6l88.7-87.4l2.6,36l-11.6,1.3
l-1.3-10.9l-61.1,60.4l66.2,55.9l-0.6-10.3l11.6-1.3L-299.7,482.6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

13
src/img/icons/reply_light.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-404.7 279.2 283.5 283.5" enable-background="new -404.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-263" y1="420.9" x2="-263" y2="420.9"/>
</g>
<path d="M-124.5,554.5l-10.7-35C-156.5,449.4-212.8,435-257,435c-16,0-28.9,2.3-35.8,3v54.1l-111.9-104.3l111.9-100.5V339
c55.6,1.5,98.2,18.3,127.9,50.3c48.7,52.5,43.4,125.7,43.4,128.7L-124.5,554.5L-124.5,554.5z M-256.2,420.5
c32.7,0,87.6,8.4,118.8,58.6c-3.8-24.4-13.7-55.6-37.3-81.5c-28.2-30.5-70.1-45.7-124.1-45.7h-6.8v-34.3l-78.4,70.1l78.4,72.3v-33.5
l5.3-1.5C-300.4,425.1-282.1,420.5-256.2,420.5L-256.2,420.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1013 B

13
src/img/icons/search.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="-406.7 279.2 283.5 283.5" enable-background="new -406.7 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="-265" y1="420.9" x2="-265" y2="420.9"/>
</g>
<path d="M-125.5,517.3l-62.6-63.4c10.2-17.8,15.5-37.6,15.5-57.5c0-64.7-52.6-117.3-117.1-117.3s-117.1,52.6-117.1,117.3
s52.6,117.3,117.1,117.3c20.6,0,41-5.7,59.1-16.5l62.3,63.2c1.4,1.4,3.4,2.3,5.4,2.3c2,0,4-0.8,5.4-2.3l32-32.3
C-122.5,525-122.5,520.3-125.5,517.3L-125.5,517.3z M-289.7,324.8c39.4,0,71.5,32.1,71.5,71.6s-32,71.6-71.5,71.6
s-71.5-32.1-71.5-71.6S-329.1,324.8-289.7,324.8L-289.7,324.8z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 999 B

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

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g>
<g>
<path fill="#535353" d="M439.4,279.2L329.6,562.7l-57.2-116.6l-116.6-57.2L439.4,279.2z M328.5,535.2l91.4-235.5l-235.5,91.4
l96,48L328.5,535.2z"/>
</g>
<g>
<rect x="248.4" y="365.7" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 861.3253 386.0935)" fill="#535353" width="204.6" height="11.4"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 827 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.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<path fill="#1A171B" d="M383.6,555.1l-87.5-45.2l-87.4,45.2l16.6-96.5l-69.4-69.4l98-13.5l43.7-89l43.7,89l98,13.5L367,458.6
L383.6,555.1z M181.5,398.3l57.3,55.8L225.3,534l70.8-37.7L367,534l-13.5-79.9l58.8-55.8l-79.9-12.1l-34.7-72.4l-36.2,72.4
L181.5,398.3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 741 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.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<path fill="#1A171B" d="M383.6,555.1l-87.5-45.2l-87.4,45.2l16.6-96.5l-69.4-69.4l98-13.5l43.7-89l43.7,89l98,13.5L367,458.6
L383.6,555.1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 620 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.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g>
<path fill="#0A0A0A" d="M398.1,318.5c7.3,0,11.4,5.6,11.4,12.5v9.2c0,5.8-3.3,11.4-8.6,12.5v187.9c0,12.3-10.3,22-22.9,22H217.5
c-12.5,0-22.6-9.8-22.6-22V353c-5.5-1.1-9.2-6.6-9.2-12.8v-9.2c0-7,4.7-12.5,12-12.5h38.7v-16.7c0-12.3,9.8-22.6,22.6-22.6h77.5
c12.5,0,22.6,10.3,22.6,22.6v16.7H398.1z M382.7,548.9c1.7,0,3.5-3.4,3.5-5.3v-210H209.5v210.2c0,1.9,1.4,4.9,3.6,4.9L382.7,548.9z
M254,522.3c-4.4,0-8.1-5.8-8.1-13.1V380.4c0-6.7,3.6-12.3,8.1-12.3h1.4c4.2,0,7.8,5.6,7.8,12.3v128.8c0,7-3.6,13.1-7.8,13.1H254z
M259.1,294.7c-1.9,0-3.1,1.1-3.1,2.8v21.3h83.9v-21.3c0-1.7-1.1-2.8-3.1-2.8C336.8,294.7,259.1,294.7,259.1,294.7z M297.2,522.8
c-4.4,0-8.1-5.8-8.1-13.1V381c0-6.7,3.6-12.3,8.1-12.3h1.1c4.4,0,8.1,5.6,8.1,12.3v128.8c0,7-3.6,13.1-8.1,13.1H297.2z
M342.1,522.8c-4.4,0-7.8-5.8-7.8-13.1V381c0-6.7,3.3-12.3,7.8-12.3h1.1c4.4,0,8.1,5.6,8.1,12.3v128.8c0,7-3.6,13.1-8.1,13.1H342.1
z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

13
src/img/icons/write.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.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="155.9 279.2 283.5 283.5" enable-background="new 155.9 279.2 283.5 283.5" xml:space="preserve">
<g id="icomoon-ignore">
<line fill="none" stroke="#449FDB" x1="316.7" y1="420.9" x2="316.7" y2="420.9"/>
</g>
<path d="M374.1,445.7l25.9-25.9v76.5c0,15.8-12.4,28.1-27,28.1H221c-15.8,0-27-12.4-27-28.1V345.6c0-15.7,12.4-28.1,27-28.1h154.1
l-25.9,25.9H230c-5.6,0-10.1,4.5-10.1,10.1v133.9c0,5.6,4.5,10.1,10.1,10.1H364c5.6,0,10.1-4.5,10.1-10.1V445.7z M320,463.7l-27-27
l-10.1,37.1L320,463.7L320,463.7z M329,454.7l87.8-87.8l-27-27l-87.7,86.6L329,454.7L329,454.7z M427,358l12.4-12.4l-28.1-28.1
l-12.4,12.4L427,358z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1000 B

5
src/index.html
View File

@ -33,6 +33,11 @@
<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>
<!-- error dialog lightbox -->

7
src/js/app.js
View File

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

103
src/js/dao/email-dao.js
View File

@ -16,10 +16,12 @@ var SYNC_TYPE_NEW = 'new';
var SYNC_TYPE_DELETED = 'deleted';
var SYNC_TYPE_MSGS = 'messages';
// well known folders
var FOLDER_TYPE_INBOX = 'Inbox';
var FOLDER_TYPE_SENT = 'Sent';
var FOLDER_TYPE_DRAFTS = 'Drafts';
var FOLDER_TYPE_TRASH = 'Trash';
var FOLDER_TYPE_FLAGGED = 'Flagged';
var MSG_ATTR_UID = 'uid';
var MSG_PART_ATTR_CONTENT = 'content';
@ -1348,6 +1350,9 @@ EmailDAO.prototype._initFoldersFromImap = function(callback) {
// fetch list from imap server
self._imapClient.listWellKnownFolders(function(err, wellKnownFolders) {
var foldersChanged = false, // indicates if we need to persist anything to disk
imapFolders = []; // aggregate all the imap folders
if (err) {
return done(err);
}
@ -1355,52 +1360,80 @@ EmailDAO.prototype._initFoldersFromImap = function(callback) {
// initialize the folders to something meaningful if that hasn't already happened
self._account.folders = self._account.folders || [];
// smuggle the outbox into the well known folders, which is obv not present on imap...
// smuggle the outbox into the well known folders, which is obv not present on imap
wellKnownFolders[config.outboxMailboxType] = [{
name: config.outboxMailboxName,
type: config.outboxMailboxType,
path: config.outboxMailboxPath
}];
// indicates if we need to persist anything to disk
var foldersChanged = false;
// aggregate all of the imap folders in one place
for (var folderType in wellKnownFolders) {
if (wellKnownFolders.hasOwnProperty(folderType) && Array.isArray(wellKnownFolders[folderType])) {
imapFolders = imapFolders.concat(wellKnownFolders[folderType]);
}
}
// the folders listed in the navigation pane
[FOLDER_TYPE_INBOX, FOLDER_TYPE_SENT, config.outboxMailboxType, FOLDER_TYPE_DRAFTS, FOLDER_TYPE_TRASH].forEach(function(mbxType) {
var localFolderWithType, imapFolderWithPath;
// find out all the imap paths that are new/removed
var imapFolderPaths = _.pluck(imapFolders, 'path'),
localFolderPaths = _.pluck(self._account.folders, 'path'),
newFolderPaths = _.difference(imapFolderPaths, localFolderPaths),
removedFolderPaths = _.difference(localFolderPaths, imapFolderPaths);
// check if there is a folder of this type locally available
localFolderWithType = _.findWhere(self._account.folders, {
type: mbxType
// folders need updating if there are new/removed folders
foldersChanged = !!newFolderPaths.length || !!removedFolderPaths.length;
// remove all the remotely deleted folders
removedFolderPaths.forEach(function(removedPath) {
self._account.folders.splice(self._account.folders.indexOf(_.findWhere(self._account.folders, {
path: removedPath
})), 1);
});
// add all the new imap folders
newFolderPaths.forEach(function(newPath) {
self._account.folders.push(_.findWhere(imapFolders, {
path: newPath
}));
});
//
// by now, all the folders are up to date. now we need to find all the well known folders
//
// check for the well known folders to be displayed in the uppermost ui part
[
FOLDER_TYPE_INBOX,
FOLDER_TYPE_SENT,
config.outboxMailboxType,
FOLDER_TYPE_DRAFTS,
FOLDER_TYPE_FLAGGED,
FOLDER_TYPE_TRASH
].forEach(function(mbxType) {
// check if there is a well known folder of this type
var wellknownFolder = _.findWhere(self._account.folders, {
type: mbxType,
wellknown: true
});
if (localFolderWithType) {
// we have a local folder available, so let's check if this folder still exists on imap
imapFolderWithPath = _.findWhere(wellKnownFolders[mbxType], {
path: localFolderWithType.path
});
if (imapFolderWithPath) {
// folder present on imap, no need to update.
return;
}
// folder not present on imap, so remove the folder and see if there are any updates for this folder type
self._account.folders.splice(self._account.folders.indexOf(localFolderWithType), 1);
foldersChanged = true;
}
if (!wellKnownFolders[mbxType] || !wellKnownFolders[mbxType].length) {
// no imap folders of the respective mailbox type, so nothing to do here
if (wellknownFolder) {
// well known folder found, no need to find a replacement
return;
}
/**
* we have no local folder of the type, so do something intelligent,
* i.e. take the first folder of the respective type
*/
self._account.folders.push(wellKnownFolders[mbxType][0]);
// we have no folder of the respective type marked as wellknown, so find the
// next best folder of the respective type and flag it as wellknown so that
// we can display it properly
wellknownFolder = _.findWhere(self._account.folders, {
type: mbxType
});
if (!wellknownFolder) {
// no folder of that type, to mark as well known, nothing to do here
return;
}
wellknownFolder.wellknown = true;
foldersChanged = true;
});
@ -1415,9 +1448,11 @@ EmailDAO.prototype._initFoldersFromImap = function(callback) {
return {
name: folder.name,
path: folder.path,
type: folder.type
type: folder.type,
wellknown: !!folder.wellknown
};
});
self._devicestorage.storeList([folders], FOLDER_DB_TYPE, function(err) {
if (err) {
return done(err);

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

@ -0,0 +1,139 @@
'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 || '').split(' ');
var dropdown = $document.find(selector);
function appear() {
// Compute dropdown position
var offsetElm = elm.offset();
var offsetDropdownParent = dropdown.offsetParent().offset();
// Set dropdown position
switch(position[1]) {
case 'up':
dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top -
dropdown[0].offsetHeight - 3) + 'px';
break;
default:
dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top +
elm[0].offsetHeight + 3) + 'px';
}
switch(position[0]) {
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(dropdown.hasClass('dropdown--show') &&
!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;

65
src/sass/all.scss
View File

@ -1,36 +1,28 @@
// Utilities
@import "mixins";
@import "functions";
@import "grid";
// Third party libs
@import "lib/angular-csp"; // use angular csp specific classes
@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
@import "normalize";
@import "variables"; // Modify this for custom colors, font-sizes, etc
@import "fonts";
@import "responsive";
@import "scaffolding";
@import "base/fonts";
@import "base/scaffolding";
// Components
@import "components/buttons";
@import "components/labels";
@import "components/icons";
// Utilities classes
@import "utilities/responsive";
// Components (TODO: refactor to BEM)
@import "components/lightbox";
@import "components/nav";
@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/add-account";
@import "views/account";
@ -39,8 +31,25 @@
@import "views/contacts";
@import "views/about";
@import "views/dialog";
@import "views/navigation";
@import "views/mail-list";
@import "views/read";
@import "views/write";
@import "views/login";
// Blocks
// (BEM-like Naming, see http://cssguidelin.es/#bem-like-naming)
@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/basics/toolbar";
@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

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

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

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%);
}
}
}
}

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

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

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

@ -0,0 +1,52 @@
.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;
}
}
}
&__stripped:after {
content: "…";
}
}

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

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

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

54
src/sass/blocks/basics/_toolbar.scss Normal file
View File

@ -0,0 +1,54 @@
.toolbar {
&__label {
@include scut-truncate;
display: block;
// has to be same as actions
box-sizing: content-box;
padding: 10px 15px;
line-height: 24px;
height: 24px;
font-size: $font-size-bigger;
color: $color-text;
text-decoration: none;
& > svg {
display: inline-block;
fill: $color-main;
vertical-align: baseline;
height: 0.8em;
width: 0.8em;
}
&.wo-touch-active {
background: $color-touch-active;
}
}
&__actions {
display: flex;
flex-direction: row;
text-align: center;
list-style: none;
margin: 0;
// has to be same as label
box-sizing: content-box;
padding: 10px 15px;
line-height: 24px;
height: 24px;
& > li {
flex-grow: 1;
.btn-icon-light {
width: 100%;
}
}
@include respond-to(md) {
justify-content: flex-end;
& > li {
flex-grow: 0;
padding-left: 30px;
}
}
}
}

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;
}
}
}
}

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

@ -0,0 +1,452 @@
// Container for mail list entries
.mail-list {
$padding-horizontal: 15px;
$padding-vertical: 15px;
$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-vertical $padding-horizontal;
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-text;
font-size: $font-size-bigger;
font-weight: normal;
}
.btn-icon-light {
position: absolute;
top: $padding-vertical;
right: $padding-horizontal;
padding-left: 1em;
& > svg {
width: 2em;
height: 2em;
}
}
&.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;
border-top: 1px solid $color-border-light;
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-light {
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: 1.2em;
height: 1.2em;
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%);
}
}
}

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

@ -0,0 +1,181 @@
.read {
$padding-horizontal: 15px;
$padding-vertical: 10px;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
// Toolbars
&__folder-toolbar {
flex-shrink: 0;
border-bottom: 1px solid $color-border-light;
@include respond-to(md) {
display: none;
}
}
&__action-toolbar {
flex-shrink: 0;
order: 100; // stick to bottom on mobile
border-top: 1px solid $color-border-light;
@include respond-to(md) {
order: initial;
border-top: none;
border-bottom: 1px solid $color-border-light;
}
@include respond-to(lg) {
display: none;
}
}
// Header components
&__header {
flex-shrink: 0;
margin-bottom: 1em;
padding: $padding-vertical $padding-horizontal 0;
& > .attachments {
margin-top: 1em;
}
}
// only visible in stripped version of read view
.mail-addresses__stripped {
display: none;
}
&__controls {
display: none;
float: right;
margin-left: 1em;
.btn-icon-light {
margin-left: 1em;
}
@include respond-to(lg) {
display: block;
}
}
&__subject {
font-weight: bold;
color: $color-text;
margin: 0 0 0.2em;
&.wo-touch-active {
background: $color-touch-active;
}
.btn-icon-very-light {
float: right;
margin-left: 1em;
}
@include respond-to(md) {
display: none;
}
}
&__subject-md {
display: none;
font-size: $font-size-bigger;
font-weight: normal;
margin: 0 0 0.2em;
& > svg {
display: none;
fill: $color-main;
vertical-align: baseline;
height: 0.8em;
width: 0.8em;
}
@include respond-to(md) {
display: block;
}
@include respond-to(lg) {
cursor: pointer;
& > svg {
display: inline-block;
}
&.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-top: 0;
margin-bottom: 0.5em;
text-align: center;
color: $color-error;
padding: 0 $padding-horizontal;
}
&__display-images {
flex-shrink: 0;
margin-bottom: 0.5em;
text-align: center;
padding: 0 $padding-horizontal;
}
&__working {
flex-grow: 1;
padding: 0 $padding-horizontal;
& > 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;
padding: 0 $padding-horizontal $padding-vertical;
iframe {
flex-grow: 1;
border: none;
width: 100%;
}
}
// Modifiers
&--no-attachments {
.read__header {
margin-bottom: 0.5em;
&:after {
display: block;
content: "";
margin-top: 0.5em;
border-bottom: 1px solid $color-border-light;
}
}
}
@include respond-to(sm-only) {
&--stripped {
.read__addresses > * {
display: none;
&:first-child {
display: block;
}
}
.mail-addresses__stripped {
display: inline;
}
}
}
}

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%;
height: 100%;
z-index: 2000;
@include respond-to(desktop) {
backface-visibility: hidden;
}
@include respond-to(desktop) {
@include respond-to(md) {
margin: 0 auto;
width: $lightbox-width;
max-width: $lightbox-max-width;
height: auto;
text-align: left;
backface-visibility: hidden;
}
@include respond-to(lg) {
max-width: $lightbox-max-width + 100px;
}
.lightbox-body {
@ -26,16 +27,19 @@
display: flex;
flex-direction: column;
@include respond-to(desktop) {
@include respond-to(md) {
max-height: $lightbox-min-height;
}
@include respond-to(lg) {
max-height: $lightbox-min-height + 50px;
}
header {
& > header {
flex-shrink: 0;
text-align: center;
position: relative;
margin-bottom: 15px;
button.close {
font-family: $font-family-icons;
position: absolute;
top: 0px;
right: 0px;
@ -47,6 +51,12 @@
color: $color-grey-dark;
outline: none;
svg {
height: 1em;
width: 1em;
fill: $color-grey-dark;
}
&.active {
top: 2px;
right: -2px;
@ -61,7 +71,7 @@
color: $color-grey-dark;
}
}
.content {
& > .content {
flex-grow: 1;
overflow: hidden;
}
@ -79,7 +89,7 @@
background: $color-grey-dark-alpha;
overflow: auto;
@include respond-to(desktop) {
@include respond-to(md) {
@include scut-vcenter-ib(".lightbox");
text-align: center;
}
@ -92,12 +102,12 @@
&.show-add {
display: block;
opacity: 0;
@include respond-to(desktop) {
@include respond-to(md) {
transition: opacity 0.3s;
}
.lightbox-body {
transform: scale(0.7);
@include respond-to(desktop) {
@include respond-to(md) {
transition: transform 0.3s;
}
}
@ -111,12 +121,12 @@
&.show-remove {
display: block;
opacity: 1;
@include respond-to(desktop) {
@include respond-to(md) {
transition: opacity 0.3s;
}
.lightbox-body {
transform: scale(1);
@include respond-to(desktop) {
@include respond-to(md) {
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
* to ease and improve our implementations of common style-code patterns.
* v0.10.3
* v1.0.1
* 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,
// assign background-color.
@else if $bg and not $off-is-list {
@else if $bg and not($off-is-list) {
background-color: $off;
$transition-properties: background-color;
}
@ -265,7 +265,7 @@ $scut-rem-base: 16 !default;
background-color: nth($on, 2);
}
@else if $bg and not $on-is-list {
@else if $bg and not($on-is-list) {
background-color: $on;
}
@ -333,10 +333,14 @@ $scut-rem-base: 16 !default;
}
@mixin scut-reset-border-box {
// Make everything a border-box, because why not?
*, *:before, *:after {
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
}
@mixin scut-reset-antialias {
@ -395,7 +399,6 @@ $scut-rem-base: 16 !default;
color: inherit;
font: inherit;
margin: 0;
outline: none;
padding: 0;
width: auto;
-webkit-appearance: none;
@ -431,7 +434,7 @@ $scut-rem-base: 16 !default;
}
@mixin scut-reset-figure {
// Remove default margins:
// Remove default margins.
figure {
margin: 0;
}
@ -439,34 +442,35 @@ $scut-rem-base: 16 !default;
// Call them all, minus exclusions!
@mixin scut-reset ($exclude: false) {
@if not index($exclude, border-box) {
@if not(index($exclude, border-box)) {
@include scut-reset-border-box;
}
@if not index($exclude, antialias) {
@if not(index($exclude, antialias)) {
@include scut-reset-antialias;
}
@if not index($exclude, semanticize) {
@if not(index($exclude, semanticize)) {
@include scut-reset-semanticize;
}
@if not index($exclude, pointer) {
@if not(index($exclude, pointer)) {
@include scut-reset-pointer;
}
@if not index($exclude, form) {
@if not(index($exclude, form)) {
@include scut-reset-form;
}
@if not index($exclude, button) {
@if not(index($exclude, button)) {
@include scut-reset-button;
}
@if not index($exclude, paragraph) {
@if not(index($exclude, paragraph)) {
@include scut-reset-paragraph;
}
@if not index($exclude, media) {
@if not(index($exclude, media)) {
@include scut-reset-media;
}
@if not index($exclude, figure) {
@if not(index($exclude, figure)) {
@include scut-reset-figure;
}
}
@mixin scut-selected (
$active: false
) {
@ -646,7 +650,7 @@ $scut-rem-base: 16 !default;
$translate-val: null;
@if not $axis {
@if not($axis) {
$translate-val: translate(-50%, -50%);
}
@else if $axis != x {
@ -780,7 +784,7 @@ $scut-rem-base: 16 !default;
}
& > li + li:#{$pseudo} {
@if not $height {
@if not($height) {
content: $divider;
display: inline-block;
@content;
@ -1099,7 +1103,7 @@ $scut-rem-base: 16 !default;
}
@mixin scut-vcenter-ib (
$inner: ".scut-inner"
$inner...
) {
// The inner element is vertically centered
@ -1117,9 +1121,12 @@ $scut-rem-base: 16 !default;
margin-right: -0.25em;
}
& > #{$inner} {
display: inline-block;
vertical-align: middle;
$inner: if(length($inner) == 0, ".scut-inner", $inner);
@each $cell-selector in $inner {
& > #{$cell-selector} {
display: inline-block;
vertical-align: middle;
}
}
}
@ -1137,14 +1144,17 @@ $scut-rem-base: 16 !default;
}
@mixin scut-vcenter-td (
$inner: ".scut-inner"
$inner...
) {
display: table;
& > #{$inner} {
display: table-cell;
vertical-align: middle;
$inner: if(length($inner) == 0, ".scut-inner", $inner);
@each $cell-selector in $inner {
& > #{$cell-selector} {
display: table-cell;
vertical-align: middle;
}
}
}
@ -1153,6 +1163,7 @@ $scut-rem-base: 16 !default;
%scut-vcenter-td {
@include scut-vcenter-td;
}
// Depends on scut-center-transform
@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
@import "variables";
@import "fonts";
@import "base/config";
@import "base/fonts";
// Components
@import "components/scrollbars";
// Mixins
@import "mixins/responsive";
@import "mixins/scrollbar";
@include scrollbar();
html {
// 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 !important;
}
}
.u-visible-md {
@include respond-to(sm-only) {
display: none !important;
}
@include respond-to(lg) {
display: none !important;
}
}
.u-visible-lg {
@include respond-to(not-lg) {
display: none !important;
}
}
.u-hidden-sm {
@include respond-to(sm-only) {
display: none !important;
}
}
.u-hidden-md {
@include respond-to(md-only) {
display: none !important;
}
}
.u-hidden-lg {
@include respond-to(lg) {
display: none !important;
}
}

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

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

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

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

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

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

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

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

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

@ -16,7 +16,7 @@
width: 320px;
}
@include respond-to(desktop) {
@include respond-to(md) {
margin: 115px auto 75px;
}
}
@ -39,7 +39,6 @@
}
button, a.btn {
color: $btn-color;
margin-right: 10px;
margin-bottom: 10px;
width: 100%;
@ -108,10 +107,6 @@
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">
<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>
<div class="content">

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