diff options
| -rw-r--r-- | core/css/functions.scss | 14 | ||||
| -rw-r--r-- | core/css/icons.scss | 18 |
2 files changed, 23 insertions, 9 deletions
diff --git a/core/css/functions.scss b/core/css/functions.scss index 2875230b512..30075df7f58 100644 --- a/core/css/functions.scss +++ b/core/css/functions.scss @@ -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); + } }
\ No newline at end of file diff --git a/core/css/icons.scss b/core/css/icons.scss index 27863f017f4..48e77877de5 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -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); |