mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add icon-black-white mixin to automatically generate icon classes 

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-07-20 12:49:16 +02:00
parent 6b440cc365
commit 46be8e69c7
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/css/functions.scss
View File

@ -45,4 +45,18 @@
#{$varName}: url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
}
background-image: var(#{$varName});
}
/**
* Create black and white icons
* This will add a default black version of and an additional white version when .icon-white is applied
*/
@mixin icon-black-white($icon, $dir, $version, $core: false) {
.icon-#{$icon} {
@include icon-color($icon, $dir, $color-black, $version, $core);
}
.icon-#{$icon}-white,
.icon-#{$icon}.icon-white {
@include icon-color($icon, $dir, $color-white, $version, $core);
}
}

18
core/css/icons.scss
View File

@ -110,9 +110,8 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
}
.icon-white {
filter: invert(100%);
&.icon-shadow {
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
}
@ -172,13 +171,14 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
@include icon-color('clippy', 'actions', $color-black, 2, true);
}
.icon-close {
@include icon-color('close', 'actions', $color-black, 1, true);
}
.icon-close-white {
@include icon-color('close', 'actions', $color-white, 1, true);
}
/**
* These icon classes are generated automatically with the following pattern
* for icon-black-white('close', ...)
* .icon-close
* .icon-close-white
* .icon-close.icon-white
*/
@include icon-black-white('close', 'actions', $color-black, 1, true);
.icon-comment {
@include icon-color('comment', 'actions', $color-black, 1, true);