From ec1fcae216f475895fcac7125eb95029817a12e0 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Mon, 6 Feb 2017 14:37:43 +0100 Subject: [PATCH 1/7] create an svg icon sprite for all action icons Signed-off-by: Christoph Wurst --- build/Gruntfile.js | 47 +++ build/package.json | 10 +- core/css/actions.scss | 578 +++++++++++++++++++++++++++ core/css/icons.scss | 281 ------------- core/css/images/actions-aa4ed911.svg | 1 + lib/private/legacy/template.php | 1 + 6 files changed, 633 insertions(+), 285 deletions(-) create mode 100644 build/Gruntfile.js create mode 100644 core/css/actions.scss create mode 100644 core/css/images/actions-aa4ed911.svg diff --git a/build/Gruntfile.js b/build/Gruntfile.js new file mode 100644 index 0000000000000..3aee8c3524c4c --- /dev/null +++ b/build/Gruntfile.js @@ -0,0 +1,47 @@ +module.exports = function (grunt) { + grunt.initConfig({ + svg_sprite: { + options: { + // Task-specific options go here. + }, + actions: { + expand: true, + cwd: '../core/img', + src: [ + 'actions/*.svg' + ], + dest: '../core', + options: { + mode: { + css: { + prefix: '.icon-', + sprite: 'images/actions', + dimensions: true, + render: { + scss: { + dest: 'actions' + } + } + } + }, + + shape: { + id: { + /** + * @param {string} name + * @returns {string} + */ + generator: function(name) { + return name.substring('actions/'.length, name.indexOf('.svg')); + } + } + } + } + } + } + }); + + grunt.loadNpmTasks('grunt-svg-sprite'); + + grunt.registerTask('default', ['svg_sprite']); +}; diff --git a/build/package.json b/build/package.json index 67e999aaf310e..1035028f7ec53 100644 --- a/build/package.json +++ b/build/package.json @@ -11,14 +11,16 @@ "contributors": [], "dependencies": {}, "devDependencies": { + "grunt": "^1.0.1", + "grunt-svg-sprite": "^1.3.6", + "jasmine-core": "~2.5.2", "karma": "~1.3.0", + "karma-coverage": "*", "karma-jasmine": "~1.0.2", "karma-junit-reporter": "*", - "karma-coverage": "*", "karma-phantomjs-launcher": "*", - "phantomjs-prebuilt": "*", - "jasmine-core": "~2.5.2", - "node-sass": "~4.1.1" + "node-sass": "~4.1.1", + "phantomjs-prebuilt": "*" }, "engine": "node >= 0.8" } diff --git a/core/css/actions.scss b/core/css/actions.scss new file mode 100644 index 0000000000000..38da44abe1a95 --- /dev/null +++ b/core/css/actions.scss @@ -0,0 +1,578 @@ +%svg-common { + background: url("images/actions-aa4ed911.svg") no-repeat; +} + +.icon-add { + @extend %svg-common; + background-position: 10% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-audio { + @extend %svg-common; + background-position: 80% 53.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-audio-off { + @extend %svg-common; + background-position: 50% 68%; + width: 16px; + height: 16px; +} + +.icon-audio-off-white { + @extend %svg-common; + background-position: 90% 74.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-audio-white { + @extend %svg-common; + background-position: 0 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-caret { + @extend %svg-common; + background-position: 50% 41.02564102564103%; + width: 10px; + height: 10px; +} + +.icon-caret-dark { + @extend %svg-common; + background-position: 100% 64%; + width: 16px; + height: 16px; +} + +.icon-checkbox-mark { + @extend %svg-common; + background-position: 100% 74.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-checkbox-mark-white { + @extend %svg-common; + background-position: 100% 85.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-checkbox-mixed { + @extend %svg-common; + background-position: 0 100%; + width: 16px; + height: 16px; +} + +.icon-checkbox-mixed-white { + @extend %svg-common; + background-position: 60% 0; + width: 16px; + height: 16px; +} + +.icon-checkmark { + @extend %svg-common; + background-position: 60% 10.666666666666666%; + width: 16px; + height: 16px; +} + +.icon-checkmark-color { + @extend %svg-common; + background-position: 60% 21.333333333333332%; + width: 16px; + height: 16px; +} + +.icon-checkmark-white { + @extend %svg-common; + background-position: 60% 32%; + width: 16px; + height: 16px; +} + +.icon-clippy { + @extend %svg-common; + background-position: 60% 42.666666666666664%; + width: 16px; + height: 16px; +} + +.icon-close { + @extend %svg-common; + background-position: 0 57.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-close-white { + @extend %svg-common; + background-position: 10% 57.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-comment { + @extend %svg-common; + background-position: 20% 57.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-confirm { + @extend %svg-common; + background-position: 30% 57.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-confirm-white { + @extend %svg-common; + background-position: 40% 57.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-delete { + @extend %svg-common; + background-position: 50% 57.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-delete-hover { + @extend %svg-common; + background-position: 60% 57.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-delete-white { + @extend %svg-common; + background-position: 70% 0; + width: 16px; + height: 16px; +} + +.icon-details { + @extend %svg-common; + background-position: 70% 10.666666666666666%; + width: 16px; + height: 16px; +} + +.icon-download { + @extend %svg-common; + background-position: 70% 21.333333333333332%; + width: 16px; + height: 16px; +} + +.icon-download-white { + @extend %svg-common; + background-position: 70% 32%; + width: 16px; + height: 16px; +} + +.icon-edit { + @extend %svg-common; + background-position: 70% 42.666666666666664%; + width: 16px; + height: 16px; +} + +.icon-error { + @extend %svg-common; + background-position: 70% 53.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-error-color { + @extend %svg-common; + background-position: 0 68%; + width: 16px; + height: 16px; +} + +.icon-error-white { + @extend %svg-common; + background-position: 10% 68%; + width: 16px; + height: 16px; +} + +.icon-external { + @extend %svg-common; + background-position: 20% 68%; + width: 16px; + height: 16px; +} + +.icon-fullscreen { + @extend %svg-common; + background-position: 30% 68%; + width: 16px; + height: 16px; +} + +.icon-fullscreen-white { + @extend %svg-common; + background-position: 40% 68%; + width: 16px; + height: 16px; +} + +.icon-history { + @extend %svg-common; + background-position: 41.509433962264154% 42.95302013422819%; + width: 17px; + height: 17px; +} + +.icon-info { + @extend %svg-common; + background-position: 60% 68%; + width: 16px; + height: 16px; +} + +.icon-info-white { + @extend %svg-common; + background-position: 70% 68%; + width: 16px; + height: 16px; +} + +.icon-logout { + @extend %svg-common; + background-position: 80% 0; + width: 16px; + height: 16px; +} + +.icon-mail { + @extend %svg-common; + background-position: 80% 10.666666666666666%; + width: 16px; + height: 16px; +} + +.icon-menu { + @extend %svg-common; + background-position: 80% 21.333333333333332%; + width: 16px; + height: 16px; +} + +.icon-more { + @extend %svg-common; + background-position: 80% 32%; + width: 16px; + height: 16px; +} + +.icon-more-white { + @extend %svg-common; + background-position: 80% 42.666666666666664%; + width: 16px; + height: 16px; +} + +.icon-password { + @extend %svg-common; + background-position: 10% 100%; + width: 16px; + height: 16px; +} + +.icon-pause { + @extend %svg-common; + background-position: 80% 64%; + width: 16px; + height: 16px; +} + +.icon-pause-big { + @extend %svg-common; + background-position: 0 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-play { + @extend %svg-common; + background-position: 10% 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-play-add { + @extend %svg-common; + background-position: 20% 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-play-big { + @extend %svg-common; + background-position: 30% 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-play-next { + @extend %svg-common; + background-position: 40% 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-play-previous { + @extend %svg-common; + background-position: 50% 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-public { + @extend %svg-common; + background-position: 60% 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-rename { + @extend %svg-common; + background-position: 70% 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-search { + @extend %svg-common; + background-position: 80% 78.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-search-white { + @extend %svg-common; + background-position: 90% 0; + width: 16px; + height: 16px; +} + +.icon-settings { + @extend %svg-common; + background-position: 90% 10.666666666666666%; + width: 16px; + height: 16px; +} + +.icon-settings-dark { + @extend %svg-common; + background-position: 90% 21.333333333333332%; + width: 16px; + height: 16px; +} + +.icon-share { + @extend %svg-common; + background-position: 90% 32%; + width: 16px; + height: 16px; +} + +.icon-shared { + @extend %svg-common; + background-position: 90% 42.666666666666664%; + width: 16px; + height: 16px; +} + +.icon-sound { + @extend %svg-common; + background-position: 90% 53.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-sound-off { + @extend %svg-common; + background-position: 90% 64%; + width: 16px; + height: 16px; +} + +.icon-star { + @extend %svg-common; + background-position: 0 44.44444444444444%; + width: 22px; + height: 22px; +} + +.icon-star-dark { + @extend %svg-common; + background-position: 14.285714285714286% 44.44444444444444%; + width: 22px; + height: 22px; +} + +.icon-starred { + @extend %svg-common; + background-position: 28.571428571428573% 44.44444444444444%; + width: 22px; + height: 22px; +} + +.icon-tag { + @extend %svg-common; + background-position: 20% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-toggle { + @extend %svg-common; + background-position: 30% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-toggle-filelist { + @extend %svg-common; + background-position: 40% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-toggle-pictures { + @extend %svg-common; + background-position: 50% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-triangle-e { + @extend %svg-common; + background-position: 60% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-triangle-n { + @extend %svg-common; + background-position: 70% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-triangle-s { + @extend %svg-common; + background-position: 80% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-upload { + @extend %svg-common; + background-position: 90% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-upload-white { + @extend %svg-common; + background-position: 100% 0; + width: 16px; + height: 16px; +} + +.icon-user { + @extend %svg-common; + background-position: 100% 10.666666666666666%; + width: 16px; + height: 16px; +} + +.icon-video { + @extend %svg-common; + background-position: 100% 21.333333333333332%; + width: 16px; + height: 16px; +} + +.icon-video-off { + @extend %svg-common; + background-position: 100% 32%; + width: 16px; + height: 16px; +} + +.icon-video-off-white { + @extend %svg-common; + background-position: 100% 42.666666666666664%; + width: 16px; + height: 16px; +} + +.icon-video-white { + @extend %svg-common; + background-position: 100% 53.333333333333336%; + width: 16px; + height: 16px; +} + +.icon-view-close { + @extend %svg-common; + background-position: 0 23.880597014925375%; + width: 32px; + height: 32px; +} + +.icon-view-download { + @extend %svg-common; + background-position: 22.22222222222222% 23.880597014925375%; + width: 32px; + height: 32px; +} + +.icon-view-next { + @extend %svg-common; + background-position: 44.44444444444444% 0; + width: 32px; + height: 32px; +} + +.icon-view-pause { + @extend %svg-common; + background-position: 44.44444444444444% 23.880597014925375%; + width: 32px; + height: 32px; +} + +.icon-view-play { + @extend %svg-common; + background-position: 22.22222222222222% 0; + width: 32px; + height: 32px; +} + +.icon-view-previous { + @extend %svg-common; + background-position: 0 0; + width: 32px; + height: 32px; +} + diff --git a/core/css/icons.scss b/core/css/icons.scss index f4ae0ce8d5fc5..8823f2d627f0c 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -89,71 +89,6 @@ img, object, video, button, textarea, input, select { background-size: 32px !important; } -/* ICONS -------------------------------------------------------------------- */ -.icon-add { - background-image: url('../img/actions/add.svg?v=1'); -} - -.icon-audio { - background-image: url('../img/actions/audio.svg?v=1'); -} - -.icon-audio-white { - background-image: url('../img/actions/audio-white.svg?v=2'); -} - -.icon-audio-off { - background-image: url('../img/actions/audio-off.svg?v=1'); -} - -.icon-audio-off-white { - background-image: url('../img/actions/audio-off-white.svg?v=1'); -} - -.icon-caret { - background-image: url('../img/actions/caret.svg?v=1'); -} - -.icon-caret-dark { - background-image: url('../img/actions/caret-dark.svg?v=1'); -} - -.icon-checkmark { - background-image: url('../img/actions/checkmark.svg?v=1'); -} - -.icon-checkmark-white { - background-image: url('../img/actions/checkmark-white.svg?v=1'); -} - -.icon-checkmark-color { - background-image: url('../img/actions/checkmark-color.svg?v=1'); -} - -.icon-clippy { - background-image: url('../img/actions/clippy.svg?v=2'); -} - -.icon-close { - background-image: url('../img/actions/close.svg?v=1'); -} - -.icon-close-white { - background-image: url('../img/actions/close-white.svg?v=1'); -} - -.icon-comment { - background-image: url('../img/actions/comment.svg?v=1'); -} - -.icon-confirm { - background-image: url('../img/actions/confirm.svg?v=2'); -} - -.icon-confirm-white { - background-image: url('../img/actions/confirm-white.svg?v=2'); -} - .icon-delete { background-image: url('../img/actions/delete.svg?v=1'); &.no-permission { @@ -178,118 +113,6 @@ img, object, video, button, textarea, input, select { } } -.icon-details { - background-image: url('../img/actions/details.svg?v=1'); -} - -.icon-download { - background-image: url('../img/actions/download.svg?v=1'); -} - -.icon-download-white { - background-image: url('../img/actions/download-white.svg?v=1'); -} - -.icon-edit { - background-image: url('../img/actions/edit.svg?v=1'); -} - -.icon-error { - background-image: url('../img/actions/error.svg?v=1'); -} - -.icon-error-white { - background-image: url('../img/actions/error-white.svg?v=1'); -} - -.icon-error-color { - background-image: url('../img/actions/error-color.svg?v=1'); -} - -.icon-external { - background-image: url('../img/actions/external.svg?v=1'); -} - -.icon-fullscreen { - background-image: url('../img/actions/fullscreen.svg?v=1'); -} - -.icon-fullscreen-white { - background-image: url('../img/actions/fullscreen-white.svg?v=2'); -} - -.icon-history { - background-image: url('../img/actions/history.svg?v=1'); -} - -.icon-info { - background-image: url('../img/actions/info.svg?v=1'); -} - -.icon-info-white { - background-image: url('../img/actions/info-white.svg?v=1'); -} - -.icon-logout { - background-image: url('../img/actions/logout.svg?v=1'); -} - -.icon-mail { - background-image: url('../img/actions/mail.svg?v=1'); -} - -.icon-menu { - background-image: url('../img/actions/menu.svg?v=1'); -} - -.icon-more { - background-image: url('../img/actions/more.svg?v=1'); -} - -.icon-more-white { - background-image: url('../img/actions/more-white.svg?v=1'); -} - -.icon-password { - background-image: url('../img/actions/password.svg?v=1'); -} - -.icon-pause { - background-image: url('../img/actions/pause.svg?v=1'); -} - -.icon-pause-big { - background-image: url('../img/actions/pause-big.svg?v=1'); -} - -.icon-play { - background-image: url('../img/actions/play.svg?v=1'); -} - -.icon-play-add { - background-image: url('../img/actions/play-add.svg?v=1'); -} - -.icon-play-big { - background-image: url('../img/actions/play-big.svg?v=1'); -} - -.icon-play-next { - background-image: url('../img/actions/play-next.svg?v=1'); -} - -.icon-play-previous { - background-image: url('../img/actions/play-previous.svg?v=1'); -} - -.icon-public { - background-image: url('../img/actions/public.svg?v=1'); -} - -.icon-rename { - background-image: url('../img/actions/rename.svg?v=1'); -} - .icon-screen { background-image: url('../img/actions/screen.svg?v=1'); } @@ -306,42 +129,10 @@ img, object, video, button, textarea, input, select { background-image: url('../img/actions/screen-off-white.svg?v=1'); } -.icon-search { - background-image: url('../img/actions/search.svg?v=1'); -} - -.icon-search-white { - background-image: url('../img/actions/search-white.svg?v=1'); -} - -.icon-settings { - background-image: url('../img/actions/settings.svg?v=1'); -} - -.icon-share { - background-image: url('../img/actions/share.svg?v=1'); -} - -.icon-shared { - background-image: url('../img/actions/shared.svg?v=1'); -} - -.icon-sound { - background-image: url('../img/actions/sound.svg?v=1'); -} - -.icon-sound-off { - background-image: url('../img/actions/sound-off.svg?v=1'); -} - .icon-favorite { background-image: url('../img/actions/star-dark.svg?v=1'); } -.icon-star { - background-image: url('../img/actions/star.svg?v=1'); -} - .icon-starred { &:hover, &:focus { background-image: url('../img/actions/star.svg?v=1'); @@ -355,78 +146,6 @@ img, object, video, button, textarea, input, select { } } -.icon-tag { - background-image: url('../img/actions/tag.svg?v=1'); -} - -.icon-toggle { - background-image: url('../img/actions/toggle.svg?v=1'); -} - -.icon-triangle-e { - background-image: url('../img/actions/triangle-e.svg?v=1'); -} - -.icon-triangle-n { - background-image: url('../img/actions/triangle-n.svg?v=1'); -} - -.icon-triangle-s { - background-image: url('../img/actions/triangle-s.svg?v=1'); -} - -.icon-upload { - background-image: url('../img/actions/upload.svg?v=1'); -} - -.icon-upload-white { - background-image: url('../img/actions/upload-white.svg?v=1'); -} - -.icon-user { - background-image: url('../img/actions/user.svg?v=1'); -} - -.icon-video { - background-image: url('../img/actions/video.svg?v=1'); -} - -.icon-video-white { - background-image: url('../img/actions/video-white.svg?v=2'); -} - -.icon-video-off { - background-image: url('../img/actions/video-off.svg?v=1'); -} - -.icon-video-off-white { - background-image: url('../img/actions/video-off-white.svg?v=1'); -} - -.icon-view-close { - background-image: url('../img/actions/view-close.svg?v=1'); -} - -.icon-view-download { - background-image: url('../img/actions/view-download.svg?v=1'); -} - -.icon-view-next { - background-image: url('../img/actions/view-next.svg?v=1'); -} - -.icon-view-pause { - background-image: url('../img/actions/view-pause.svg?v=1'); -} - -.icon-view-play { - background-image: url('../img/actions/view-play.svg?v=1'); -} - -.icon-view-previous { - background-image: url('../img/actions/view-previous.svg?v=1'); -} - /* PLACES ------------------------------------------------------------------- */ .icon-calendar-dark { background-image: url('../img/places/calendar-dark.svg?v=1'); diff --git a/core/css/images/actions-aa4ed911.svg b/core/css/images/actions-aa4ed911.svg new file mode 100644 index 0000000000000..b6c447ce5fd32 --- /dev/null +++ b/core/css/images/actions-aa4ed911.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/private/legacy/template.php b/lib/private/legacy/template.php index 09e3d130f4961..25f7136add6cb 100644 --- a/lib/private/legacy/template.php +++ b/lib/private/legacy/template.php @@ -116,6 +116,7 @@ public static function initTemplateEngine($renderAs) { OC_Util::addStyle("apps",null,true); OC_Util::addStyle("fonts",null,true); OC_Util::addStyle("icons",null,true); + OC_Util::addStyle("actions",null,true); OC_Util::addStyle("header",null,true); OC_Util::addStyle("inputs"); OC_Util::addStyle("styles",null,true); From 07a738c5c8174c55b73b6b77a04b0b2cd266fd98 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Mon, 6 Feb 2017 14:54:38 +0100 Subject: [PATCH 2/7] fix icons in files app Signed-off-by: Christoph Wurst --- apps/files/css/files.css | 1 - core/css/apps.scss | 3 +-- core/css/icons.scss | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 54ed05385fa43..74185941b5736 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -789,7 +789,6 @@ html.ie8 #controls .button.new { #controls .actions .button .icon { display: inline-block; vertical-align: middle; - background-size: 16px 16px; } #filestable .filename .action .icon.hidden, diff --git a/core/css/apps.scss b/core/css/apps.scss index 91805fe16b29a..1a8465384af7e 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -683,10 +683,9 @@ em { [class*=' icon-']{ /* Keep padding to define the width to assure correct position of a possible text */ - padding: 18px 0 18px 36px; + margin: 14px 13px 15px 16px; min-width: 0; /* Overwrite icons*/ min-height: 0; - background-position: 10px center; opacity: 0.7; /* Default button icon override */ } } diff --git a/core/css/icons.scss b/core/css/icons.scss index 8823f2d627f0c..bbd9a74127112 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -15,7 +15,6 @@ /* GLOBAL ------------------------------------------------------------------- */ [class^='icon-'], [class*=' icon-'] { background-repeat: no-repeat; - background-position: center; min-width: 16px; min-height: 16px; } From 75d82d86757f37d2b27968d83d7f82bb39ed2e01 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Tue, 21 Feb 2017 11:11:48 +0100 Subject: [PATCH 3/7] add makefile Signed-off-by: Christoph Wurst --- Makefile | 15 +++++ core/css/actions.scss | 94 ++++++++++++++++++---------- core/css/images/actions-4c60c81d.svg | 1 + core/css/images/actions-aa4ed911.svg | 1 - 4 files changed, 77 insertions(+), 34 deletions(-) create mode 100644 Makefile create mode 100644 core/css/images/actions-4c60c81d.svg delete mode 100644 core/css/images/actions-aa4ed911.svg diff --git a/Makefile b/Makefile new file mode 100644 index 0000000000000..5d8fa4f0e920f --- /dev/null +++ b/Makefile @@ -0,0 +1,15 @@ +# This file is licensed under the Affero General Public License version 3 or +# later. See the COPYING file. +# @author Christoph Wurst +# @copyright Christoph Wurst 2017 + +default: svg-sprites + +svg-sprites: clean + cd build && \ + npm install && \ + pwd && \ + grunt + +clean: + rm -f core/css/images/actions-*.svg \ No newline at end of file diff --git a/core/css/actions.scss b/core/css/actions.scss index 38da44abe1a95..e885444798367 100644 --- a/core/css/actions.scss +++ b/core/css/actions.scss @@ -1,17 +1,17 @@ %svg-common { - background: url("images/actions-aa4ed911.svg") no-repeat; + background: url("images/actions-4c60c81d.svg") no-repeat; } .icon-add { @extend %svg-common; - background-position: 10% 89.33333333333333%; + background-position: 50% 89.33333333333333%; width: 16px; height: 16px; } .icon-audio { @extend %svg-common; - background-position: 80% 53.333333333333336%; + background-position: 0 78.66666666666667%; width: 16px; height: 16px; } @@ -25,14 +25,14 @@ .icon-audio-off-white { @extend %svg-common; - background-position: 90% 74.66666666666667%; + background-position: 30% 89.33333333333333%; width: 16px; height: 16px; } .icon-audio-white { @extend %svg-common; - background-position: 0 89.33333333333333%; + background-position: 40% 89.33333333333333%; width: 16px; height: 16px; } @@ -46,28 +46,28 @@ .icon-caret-dark { @extend %svg-common; - background-position: 100% 64%; + background-position: 10% 100%; width: 16px; height: 16px; } .icon-checkbox-mark { @extend %svg-common; - background-position: 100% 74.66666666666667%; + background-position: 20% 100%; width: 16px; height: 16px; } .icon-checkbox-mark-white { @extend %svg-common; - background-position: 100% 85.33333333333333%; + background-position: 30% 100%; width: 16px; height: 16px; } .icon-checkbox-mixed { @extend %svg-common; - background-position: 0 100%; + background-position: 40% 100%; width: 16px; height: 16px; } @@ -291,7 +291,7 @@ .icon-password { @extend %svg-common; - background-position: 10% 100%; + background-position: 80% 53.333333333333336%; width: 16px; height: 16px; } @@ -305,7 +305,7 @@ .icon-pause-big { @extend %svg-common; - background-position: 0 78.66666666666667%; + background-position: 50% 100%; width: 16px; height: 16px; } @@ -359,62 +359,90 @@ height: 16px; } -.icon-search { +.icon-screen { @extend %svg-common; background-position: 80% 78.66666666666667%; width: 16px; height: 16px; } -.icon-search-white { +.icon-screen-off { @extend %svg-common; background-position: 90% 0; width: 16px; height: 16px; } -.icon-settings { +.icon-screen-off-white { @extend %svg-common; background-position: 90% 10.666666666666666%; width: 16px; height: 16px; } -.icon-settings-dark { +.icon-screen-white { @extend %svg-common; background-position: 90% 21.333333333333332%; width: 16px; height: 16px; } -.icon-share { +.icon-search { @extend %svg-common; background-position: 90% 32%; width: 16px; height: 16px; } -.icon-shared { +.icon-search-white { @extend %svg-common; background-position: 90% 42.666666666666664%; width: 16px; height: 16px; } -.icon-sound { +.icon-settings { @extend %svg-common; background-position: 90% 53.333333333333336%; width: 16px; height: 16px; } -.icon-sound-off { +.icon-settings-dark { @extend %svg-common; background-position: 90% 64%; width: 16px; height: 16px; } +.icon-share { + @extend %svg-common; + background-position: 90% 74.66666666666667%; + width: 16px; + height: 16px; +} + +.icon-shared { + @extend %svg-common; + background-position: 0 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-sound { + @extend %svg-common; + background-position: 10% 89.33333333333333%; + width: 16px; + height: 16px; +} + +.icon-sound-off { + @extend %svg-common; + background-position: 20% 89.33333333333333%; + width: 16px; + height: 16px; +} + .icon-star { @extend %svg-common; background-position: 0 44.44444444444444%; @@ -438,98 +466,98 @@ .icon-tag { @extend %svg-common; - background-position: 20% 89.33333333333333%; + background-position: 60% 89.33333333333333%; width: 16px; height: 16px; } .icon-toggle { @extend %svg-common; - background-position: 30% 89.33333333333333%; + background-position: 70% 89.33333333333333%; width: 16px; height: 16px; } .icon-toggle-filelist { @extend %svg-common; - background-position: 40% 89.33333333333333%; + background-position: 80% 89.33333333333333%; width: 16px; height: 16px; } .icon-toggle-pictures { @extend %svg-common; - background-position: 50% 89.33333333333333%; + background-position: 90% 89.33333333333333%; width: 16px; height: 16px; } .icon-triangle-e { @extend %svg-common; - background-position: 60% 89.33333333333333%; + background-position: 100% 0; width: 16px; height: 16px; } .icon-triangle-n { @extend %svg-common; - background-position: 70% 89.33333333333333%; + background-position: 100% 10.666666666666666%; width: 16px; height: 16px; } .icon-triangle-s { @extend %svg-common; - background-position: 80% 89.33333333333333%; + background-position: 100% 21.333333333333332%; width: 16px; height: 16px; } .icon-upload { @extend %svg-common; - background-position: 90% 89.33333333333333%; + background-position: 100% 32%; width: 16px; height: 16px; } .icon-upload-white { @extend %svg-common; - background-position: 100% 0; + background-position: 100% 42.666666666666664%; width: 16px; height: 16px; } .icon-user { @extend %svg-common; - background-position: 100% 10.666666666666666%; + background-position: 100% 53.333333333333336%; width: 16px; height: 16px; } .icon-video { @extend %svg-common; - background-position: 100% 21.333333333333332%; + background-position: 100% 64%; width: 16px; height: 16px; } .icon-video-off { @extend %svg-common; - background-position: 100% 32%; + background-position: 100% 74.66666666666667%; width: 16px; height: 16px; } .icon-video-off-white { @extend %svg-common; - background-position: 100% 42.666666666666664%; + background-position: 100% 85.33333333333333%; width: 16px; height: 16px; } .icon-video-white { @extend %svg-common; - background-position: 100% 53.333333333333336%; + background-position: 0 100%; width: 16px; height: 16px; } diff --git a/core/css/images/actions-4c60c81d.svg b/core/css/images/actions-4c60c81d.svg new file mode 100644 index 0000000000000..f2ae168488685 --- /dev/null +++ b/core/css/images/actions-4c60c81d.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/core/css/images/actions-aa4ed911.svg b/core/css/images/actions-aa4ed911.svg deleted file mode 100644 index b6c447ce5fd32..0000000000000 --- a/core/css/images/actions-aa4ed911.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From dab25c52ccf5776a156ce0c02e25d74fc08f4c2e Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Tue, 21 Feb 2017 11:48:59 +0100 Subject: [PATCH 4/7] add spacing around individual svgs Signed-off-by: Christoph Wurst --- build/Gruntfile.js | 9 +- build/sprite.scss | 13 ++ core/css/actions.scss | 174 +++++++++++++-------------- core/css/images/actions-4c60c81d.svg | 1 - core/css/images/actions-c8f299d2.svg | 1 + 5 files changed, 108 insertions(+), 90 deletions(-) create mode 100644 build/sprite.scss delete mode 100644 core/css/images/actions-4c60c81d.svg create mode 100644 core/css/images/actions-c8f299d2.svg diff --git a/build/Gruntfile.js b/build/Gruntfile.js index 3aee8c3524c4c..21af2ef62e122 100644 --- a/build/Gruntfile.js +++ b/build/Gruntfile.js @@ -19,7 +19,8 @@ module.exports = function (grunt) { dimensions: true, render: { scss: { - dest: 'actions' + dest: 'actions', + template: 'sprite.scss' } } } @@ -31,9 +32,13 @@ module.exports = function (grunt) { * @param {string} name * @returns {string} */ - generator: function(name) { + generator: function (name) { return name.substring('actions/'.length, name.indexOf('.svg')); } + }, + + spacing: { + padding: 100 } } } diff --git a/build/sprite.scss b/build/sprite.scss new file mode 100644 index 0000000000000..2b6f625256769 --- /dev/null +++ b/build/sprite.scss @@ -0,0 +1,13 @@ +%svg-common { + background: url("{{{sprite}}}") no-repeat; +} + +{{#shapes}} +{{#selector.shape}}{{expression}}{{^last}},{{/last}}{{/selector.shape}} { + @extend %svg-common; + background-position: ({{position.absolute.x}}px - ({{width.outer}}px - {{width.inner}}px)/2) ({{position.absolute.y}}px - ({{height.outer}}px - {{height.inner}}px)/2); + width: {{width.inner}}px; + height: {{height.inner}}px; +} + +{{/shapes}} \ No newline at end of file diff --git a/core/css/actions.scss b/core/css/actions.scss index e885444798367..aa8766446c0c8 100644 --- a/core/css/actions.scss +++ b/core/css/actions.scss @@ -1,605 +1,605 @@ %svg-common { - background: url("images/actions-4c60c81d.svg") no-repeat; + background: url("images/actions-c8f299d2.svg") no-repeat; } .icon-add { @extend %svg-common; - background-position: 50% 89.33333333333333%; + background-position: (-1777px - (216px - 16px)/2) (-216px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-audio { @extend %svg-common; - background-position: 0 78.66666666666667%; + background-position: (-216px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-audio-off { @extend %svg-common; - background-position: 50% 68%; + background-position: (-648px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-audio-off-white { @extend %svg-common; - background-position: 30% 89.33333333333333%; + background-position: (-1512px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-audio-white { @extend %svg-common; - background-position: 40% 89.33333333333333%; + background-position: (-1777px - (216px - 16px)/2) (0px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-caret { @extend %svg-common; - background-position: 50% 41.02564102564103%; + background-position: (-1993px - (210px - 10px)/2) (-864px - (210px - 10px)/2); width: 10px; height: 10px; } .icon-caret-dark { @extend %svg-common; - background-position: 10% 100%; + background-position: (-1728px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-checkbox-mark { @extend %svg-common; - background-position: 20% 100%; + background-position: (-1993px - (216px - 16px)/2) (0px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-checkbox-mark-white { @extend %svg-common; - background-position: 30% 100%; + background-position: (-1993px - (216px - 16px)/2) (-216px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-checkbox-mixed { @extend %svg-common; - background-position: 40% 100%; + background-position: (-1993px - (216px - 16px)/2) (-432px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-checkbox-mixed-white { @extend %svg-common; - background-position: 60% 0; + background-position: (-696px - (216px - 16px)/2) (-217px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-checkmark { @extend %svg-common; - background-position: 60% 10.666666666666666%; + background-position: (-696px - (216px - 16px)/2) (-433px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-checkmark-color { @extend %svg-common; - background-position: 60% 21.333333333333332%; + background-position: (0px - (216px - 16px)/2) (-686px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-checkmark-white { @extend %svg-common; - background-position: 60% 32%; + background-position: (-216px - (216px - 16px)/2) (-686px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-clippy { @extend %svg-common; - background-position: 60% 42.666666666666664%; + background-position: (-432px - (216px - 16px)/2) (-686px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-close { @extend %svg-common; - background-position: 0 57.333333333333336%; + background-position: (-648px - (216px - 16px)/2) (-686px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-close-white { @extend %svg-common; - background-position: 10% 57.333333333333336%; + background-position: (-913px - (216px - 16px)/2) (0px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-comment { @extend %svg-common; - background-position: 20% 57.333333333333336%; + background-position: (-913px - (216px - 16px)/2) (-216px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-confirm { @extend %svg-common; - background-position: 30% 57.333333333333336%; + background-position: (-913px - (216px - 16px)/2) (-432px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-confirm-white { @extend %svg-common; - background-position: 40% 57.333333333333336%; + background-position: (-913px - (216px - 16px)/2) (-648px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-delete { @extend %svg-common; - background-position: 50% 57.333333333333336%; + background-position: (0px - (216px - 16px)/2) (-902px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-delete-hover { @extend %svg-common; - background-position: 60% 57.333333333333336%; + background-position: (-216px - (216px - 16px)/2) (-902px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-delete-white { @extend %svg-common; - background-position: 70% 0; + background-position: (-432px - (216px - 16px)/2) (-902px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-details { @extend %svg-common; - background-position: 70% 10.666666666666666%; + background-position: (-648px - (216px - 16px)/2) (-902px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-download { @extend %svg-common; - background-position: 70% 21.333333333333332%; + background-position: (-864px - (216px - 16px)/2) (-902px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-download-white { @extend %svg-common; - background-position: 70% 32%; + background-position: (-1129px - (216px - 16px)/2) (0px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-edit { @extend %svg-common; - background-position: 70% 42.666666666666664%; + background-position: (-1129px - (216px - 16px)/2) (-216px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-error { @extend %svg-common; - background-position: 70% 53.333333333333336%; + background-position: (-1129px - (216px - 16px)/2) (-432px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-error-color { @extend %svg-common; - background-position: 0 68%; + background-position: (-1129px - (216px - 16px)/2) (-648px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-error-white { @extend %svg-common; - background-position: 10% 68%; + background-position: (-1129px - (216px - 16px)/2) (-864px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-external { @extend %svg-common; - background-position: 20% 68%; + background-position: (0px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-fullscreen { @extend %svg-common; - background-position: 30% 68%; + background-position: (-216px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-fullscreen-white { @extend %svg-common; - background-position: 40% 68%; + background-position: (-432px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-history { @extend %svg-common; - background-position: 41.509433962264154% 42.95302013422819%; + background-position: (-696px - (217px - 17px)/2) (0px - (217px - 17px)/2); width: 17px; height: 17px; } .icon-info { @extend %svg-common; - background-position: 60% 68%; + background-position: (-864px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-info-white { @extend %svg-common; - background-position: 70% 68%; + background-position: (-1080px - (216px - 16px)/2) (-1118px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-logout { @extend %svg-common; - background-position: 80% 0; + background-position: (-1345px - (216px - 16px)/2) (0px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-mail { @extend %svg-common; - background-position: 80% 10.666666666666666%; + background-position: (-1345px - (216px - 16px)/2) (-216px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-menu { @extend %svg-common; - background-position: 80% 21.333333333333332%; + background-position: (-1345px - (216px - 16px)/2) (-432px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-more { @extend %svg-common; - background-position: 80% 32%; + background-position: (-1345px - (216px - 16px)/2) (-648px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-more-white { @extend %svg-common; - background-position: 80% 42.666666666666664%; + background-position: (-1345px - (216px - 16px)/2) (-864px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-password { @extend %svg-common; - background-position: 80% 53.333333333333336%; + background-position: (-1345px - (216px - 16px)/2) (-1080px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-pause { @extend %svg-common; - background-position: 80% 64%; + background-position: (0px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-pause-big { @extend %svg-common; - background-position: 50% 100%; + background-position: (-1993px - (216px - 16px)/2) (-648px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-play { @extend %svg-common; - background-position: 10% 78.66666666666667%; + background-position: (-432px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-play-add { @extend %svg-common; - background-position: 20% 78.66666666666667%; + background-position: (-648px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-play-big { @extend %svg-common; - background-position: 30% 78.66666666666667%; + background-position: (-864px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-play-next { @extend %svg-common; - background-position: 40% 78.66666666666667%; + background-position: (-1080px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-play-previous { @extend %svg-common; - background-position: 50% 78.66666666666667%; + background-position: (-1296px - (216px - 16px)/2) (-1334px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-public { @extend %svg-common; - background-position: 60% 78.66666666666667%; + background-position: (-1561px - (216px - 16px)/2) (0px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-rename { @extend %svg-common; - background-position: 70% 78.66666666666667%; + background-position: (-1561px - (216px - 16px)/2) (-216px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-screen { @extend %svg-common; - background-position: 80% 78.66666666666667%; + background-position: (-1561px - (216px - 16px)/2) (-432px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-screen-off { @extend %svg-common; - background-position: 90% 0; + background-position: (-1561px - (216px - 16px)/2) (-648px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-screen-off-white { @extend %svg-common; - background-position: 90% 10.666666666666666%; + background-position: (-1561px - (216px - 16px)/2) (-864px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-screen-white { @extend %svg-common; - background-position: 90% 21.333333333333332%; + background-position: (-1561px - (216px - 16px)/2) (-1080px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-search { @extend %svg-common; - background-position: 90% 32%; + background-position: (-1561px - (216px - 16px)/2) (-1296px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-search-white { @extend %svg-common; - background-position: 90% 42.666666666666664%; + background-position: (0px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-settings { @extend %svg-common; - background-position: 90% 53.333333333333336%; + background-position: (-216px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-settings-dark { @extend %svg-common; - background-position: 90% 64%; + background-position: (-432px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-share { @extend %svg-common; - background-position: 90% 74.66666666666667%; + background-position: (-648px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-shared { @extend %svg-common; - background-position: 0 89.33333333333333%; + background-position: (-864px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-sound { @extend %svg-common; - background-position: 10% 89.33333333333333%; + background-position: (-1080px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-sound-off { @extend %svg-common; - background-position: 20% 89.33333333333333%; + background-position: (-1296px - (216px - 16px)/2) (-1550px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-star { @extend %svg-common; - background-position: 0 44.44444444444444%; + background-position: (0px - (222px - 22px)/2) (-464px - (222px - 22px)/2); width: 22px; height: 22px; } .icon-star-dark { @extend %svg-common; - background-position: 14.285714285714286% 44.44444444444444%; + background-position: (-222px - (222px - 22px)/2) (-464px - (222px - 22px)/2); width: 22px; height: 22px; } .icon-starred { @extend %svg-common; - background-position: 28.571428571428573% 44.44444444444444%; + background-position: (-444px - (222px - 22px)/2) (-464px - (222px - 22px)/2); width: 22px; height: 22px; } .icon-tag { @extend %svg-common; - background-position: 60% 89.33333333333333%; + background-position: (-1777px - (216px - 16px)/2) (-432px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-toggle { @extend %svg-common; - background-position: 70% 89.33333333333333%; + background-position: (-1777px - (216px - 16px)/2) (-648px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-toggle-filelist { @extend %svg-common; - background-position: 80% 89.33333333333333%; + background-position: (-1777px - (216px - 16px)/2) (-864px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-toggle-pictures { @extend %svg-common; - background-position: 90% 89.33333333333333%; + background-position: (-1777px - (216px - 16px)/2) (-1080px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-triangle-e { @extend %svg-common; - background-position: 100% 0; + background-position: (-1777px - (216px - 16px)/2) (-1296px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-triangle-n { @extend %svg-common; - background-position: 100% 10.666666666666666%; + background-position: (-1777px - (216px - 16px)/2) (-1512px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-triangle-s { @extend %svg-common; - background-position: 100% 21.333333333333332%; + background-position: (0px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-upload { @extend %svg-common; - background-position: 100% 32%; + background-position: (-216px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-upload-white { @extend %svg-common; - background-position: 100% 42.666666666666664%; + background-position: (-432px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-user { @extend %svg-common; - background-position: 100% 53.333333333333336%; + background-position: (-648px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-video { @extend %svg-common; - background-position: 100% 64%; + background-position: (-864px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-video-off { @extend %svg-common; - background-position: 100% 74.66666666666667%; + background-position: (-1080px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-video-off-white { @extend %svg-common; - background-position: 100% 85.33333333333333%; + background-position: (-1296px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-video-white { @extend %svg-common; - background-position: 0 100%; + background-position: (-1512px - (216px - 16px)/2) (-1766px - (216px - 16px)/2); width: 16px; height: 16px; } .icon-view-close { @extend %svg-common; - background-position: 0 23.880597014925375%; + background-position: (0px - (232px - 32px)/2) (-232px - (232px - 32px)/2); width: 32px; height: 32px; } .icon-view-download { @extend %svg-common; - background-position: 22.22222222222222% 23.880597014925375%; + background-position: (-232px - (232px - 32px)/2) (-232px - (232px - 32px)/2); width: 32px; height: 32px; } .icon-view-next { @extend %svg-common; - background-position: 44.44444444444444% 0; + background-position: (-464px - (232px - 32px)/2) (0px - (232px - 32px)/2); width: 32px; height: 32px; } .icon-view-pause { @extend %svg-common; - background-position: 44.44444444444444% 23.880597014925375%; + background-position: (-464px - (232px - 32px)/2) (-232px - (232px - 32px)/2); width: 32px; height: 32px; } .icon-view-play { @extend %svg-common; - background-position: 22.22222222222222% 0; + background-position: (-232px - (232px - 32px)/2) (0px - (232px - 32px)/2); width: 32px; height: 32px; } .icon-view-previous { @extend %svg-common; - background-position: 0 0; + background-position: (0px - (232px - 32px)/2) (0px - (232px - 32px)/2); width: 32px; height: 32px; } diff --git a/core/css/images/actions-4c60c81d.svg b/core/css/images/actions-4c60c81d.svg deleted file mode 100644 index f2ae168488685..0000000000000 --- a/core/css/images/actions-4c60c81d.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/core/css/images/actions-c8f299d2.svg b/core/css/images/actions-c8f299d2.svg new file mode 100644 index 0000000000000..4912f128610f9 --- /dev/null +++ b/core/css/images/actions-c8f299d2.svg @@ -0,0 +1 @@ + \ No newline at end of file From d3449918334aa57d9be0b16a22bc79b3ef5fcfe1 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Tue, 21 Feb 2017 14:25:31 +0100 Subject: [PATCH 5/7] fix delete icon hover state Signed-off-by: Christoph Wurst --- core/css/icons.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/core/css/icons.scss b/core/css/icons.scss index bbd9a74127112..e9388e51d7602 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -89,14 +89,17 @@ img, object, video, button, textarea, input, select { } .icon-delete { - background-image: url('../img/actions/delete.svg?v=1'); &.no-permission { &:hover, &:focus { + /** TODO: add to svg sprite */ background-image: url('../img/actions/delete.svg?v=1'); + background-position: initial; } } &:hover, &:focus { + /** TODO: add to svg sprite */ background-image: url('../img/actions/delete-hover.svg?v=1'); + background-position: initial; } } @@ -104,11 +107,15 @@ img, object, video, button, textarea, input, select { background-image: url('../img/actions/delete-white.svg?v=1'); &.no-permission { &:hover, &:focus { + /** TODO: add to svg sprite */ background-image: url('../img/actions/delete-white.svg?v=1'); + background-position: initial; } } &:hover, &:focus { + /** TODO: add to svg sprite */ background-image: url('../img/actions/delete-hover.svg?v=1'); + background-position: initial; } } From 6ab7188986c22c407dbac0cc177e6fe401bb0f55 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Tue, 21 Feb 2017 14:37:05 +0100 Subject: [PATCH 6/7] fix header carets Signed-off-by: Christoph Wurst --- core/css/header.scss | 18 +++++++++--------- core/templates/layout.user.php | 4 ++-- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/core/css/header.scss b/core/css/header.scss index 2b73937a3c441..27cbc292d5c2b 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -117,12 +117,7 @@ /* show caret indicator next to logo to make clear it is tappable */ .icon-caret { display: inline-block; - width: 12px; - height: 12px; - margin: 0; - margin-top: -21px; - padding: 0; - vertical-align: middle; + vertical-align: super; } #header-left, @@ -134,6 +129,10 @@ #header-left { flex: 0 0; flex-grow: 1; + + .icon-caret { + margin-bottom: 6px; + } } #header-right { @@ -152,6 +151,10 @@ .icon-caret { -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)'; opacity: .75; + min-width: 10px; + min-height: 10px; + margin-left: 3px; + margin-right: 3px; } &:hover { .header-appname, .icon-caret { @@ -347,9 +350,6 @@ opacity: 1; } } - .icon-caret { - margin-top: 0; - } /* Profile picture in header */ .avatardiv { diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index e9a9b042e07f0..8393466f66876 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -56,7 +56,7 @@

t('Apps')); ?>

-
+ @@ -82,7 +82,7 @@ -
+
    From 8f3e5f756581efe13ac99a19701ce4674bb4b4d0 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Tue, 28 Feb 2017 09:58:54 +0100 Subject: [PATCH 7/7] Do not overwrite icon's min width/height Signed-off-by: Christoph Wurst --- core/css/apps.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 1a8465384af7e..37a938f505bc2 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -684,8 +684,6 @@ em { /* Keep padding to define the width to assure correct position of a possible text */ margin: 14px 13px 15px 16px; - min-width: 0; /* Overwrite icons*/ - min-height: 0; opacity: 0.7; /* Default button icon override */ } }