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

Add new .icon-white and .icon-shadow classes, add toggle-background icon 

Signed-off-by: Marin Treselj <marin@pixelipo.com>
This commit is contained in:
Marin Treselj 2017-11-28 10:56:28 +01:00
parent a0ce2c1204
commit 70953fa788
3 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
core/css/icons.scss
View File

@ -90,7 +90,14 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
} }
.icon-shadow { .icon-shadow {
filter: drop-shadow(0 1px 3px $color-box-shadow); filter: drop-shadow(1px 1px 4px $color-box-shadow);
&.icon-white {
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
}
}
.icon-white {
filter: invert(100%);
} }
/* ICONS -------------------------------------------------------------------- */ /* ICONS -------------------------------------------------------------------- */
@ -106,16 +113,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/audio.svg?v=1'); background-image: url('../img/actions/audio.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
.icon-audio-white { .icon-audio-white {
background-image: url('../img/actions/audio-white.svg?v=2'); background-image: url('../img/actions/audio.svg?v=2');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
} }
.icon-audio-off { .icon-audio-off {
background-image: url('../img/actions/audio-off.svg?v=1'); background-image: url('../img/actions/audio-off.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */
.icon-audio-off-white { .icon-audio-off-white {
background-image: url('../img/actions/audio-off-white.svg?v=1'); background-image: url('../img/actions/audio-off.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
} }
.icon-caret { .icon-caret {
@ -171,6 +182,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
} }
&:hover, &:focus { &:hover, &:focus {
background-image: url('../img/actions/delete-hover.svg?v=1'); background-image: url('../img/actions/delete-hover.svg?v=1');
filter: initial;
} }
} }
@ -222,8 +234,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/fullscreen.svg?v=1'); background-image: url('../img/actions/fullscreen.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
.icon-fullscreen-white { .icon-fullscreen-white {
background-image: url('../img/actions/fullscreen-white.svg?v=2'); background-image: url('../img/actions/fullscreen.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
} }
.icon-history { .icon-history {
@ -294,16 +308,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/screen.svg?v=1'); background-image: url('../img/actions/screen.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
.icon-screen-white { .icon-screen-white {
background-image: url('../img/actions/screen-white.svg?v=1'); background-image: url('../img/actions/screen.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
} }
.icon-screen-off { .icon-screen-off {
background-image: url('../img/actions/screen-off.svg?v=1'); background-image: url('../img/actions/screen-off.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */
.icon-screen-off-white { .icon-screen-off-white {
background-image: url('../img/actions/screen-off-white.svg?v=1'); background-image: url('../img/actions/screen-off.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
} }
.icon-search { .icon-search {
@ -373,6 +391,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/toggle.svg?v=1'); background-image: url('../img/actions/toggle.svg?v=1');
} }
.icon-toggle-background {
background-image: url('../img/actions/toggle-background.svg?v=1');
}
.icon-toggle-pictures { .icon-toggle-pictures {
background-image: url('../img/actions/toggle-pictures.svg?v=1'); background-image: url('../img/actions/toggle-pictures.svg?v=1');
} }
@ -405,16 +427,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/video.svg?v=1'); background-image: url('../img/actions/video.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-white { .icon-video-white {
background-image: url('../img/actions/video-white.svg?v=2'); background-image: url('../img/actions/video.svg?v=2');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
} }
.icon-video-off { .icon-video-off {
background-image: url('../img/actions/video-off.svg?v=1'); background-image: url('../img/actions/video-off.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-off-white { .icon-video-off-white {
background-image: url('../img/actions/video-off-white.svg?v=1'); background-image: url('../img/actions/video-off.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
} }
.icon-view-close { .icon-view-close {
@ -426,7 +452,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
} }
.icon-view-next { .icon-view-next {
background-image: url('../img/actions/view-next.svg?v=1'); background-image: url('../img/actions/arrow-right.svg?v=1');
} }
.icon-view-pause { .icon-view-pause {
@ -438,13 +464,14 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
} }
.icon-view-previous { .icon-view-previous {
background-image: url('../img/actions/view-previous.svg?v=1'); background-image: url('../img/actions/arrow-left.svg?v=1');
} }
/* PLACES ------------------------------------------------------------------- */ /* PLACES ------------------------------------------------------------------- */
.icon-calendar { .icon-calendar {
background-image: url('../img/places/calendar.svg?v=1'); background-image: url('../img/places/calendar.svg?v=1');
} }
.icon-calendar-dark { .icon-calendar-dark {
background-image: url('../img/places/calendar-dark.svg?v=1'); background-image: url('../img/places/calendar-dark.svg?v=1');
} }

2
core/css/variables.scss
View File

@ -20,6 +20,6 @@ $image-login-background: '../img/background.png?v=2';
$color-loading: #969696; $color-loading: #969696;
$color-loading-dark: #bbbbbb; $color-loading-dark: #bbbbbb;
$color-box-shadow: rgba(nc-darken($color-main-background, 30%), 0.75); $color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
$color-border: nc-darken($color-main-background, 8%); $color-border: nc-darken($color-main-background, 8%);
$border-radius: 3px; $border-radius: 3px;

1
core/img/actions/toggle-background.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" height="16" width="16" version="1.1"><path d="m8 1c-3.85 0-7 3.15-7 7s3.15 7 7 7 7-3.15 7-7-3.15-7-7-7zm0 2v10a5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B