sascha
/
nextcloud-server
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Signed-off-by: Marin Treselj <marin@pixelipo.com>
pull/7319/head
Marin Treselj 2017-11-28 10:56:28 +07: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
Unescape Escape View File

@ -90,7 +90,14 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
}
.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 -------------------------------------------------------------------- */
@ -106,16 +113,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/audio.svg?v=1');
}
/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
.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 {
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 {
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 {
@ -171,6 +182,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
}
&:hover, &:focus {
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');
}
/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
.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 {
@ -294,16 +308,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/screen.svg?v=1');
}
/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
.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 {
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 {
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 {
@ -373,6 +391,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
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 {
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');
}
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.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 {
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 {
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 {
@ -426,7 +452,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
}
.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 {
@ -438,13 +464,14 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
}
.icon-view-previous {
background-image: url('../img/actions/view-previous.svg?v=1');
background-image: url('../img/actions/arrow-left.svg?v=1');
}
/* PLACES ------------------------------------------------------------------- */
.icon-calendar {
background-image: url('../img/places/calendar.svg?v=1');
}
.icon-calendar-dark {
background-image: url('../img/places/calendar-dark.svg?v=1');
}

2
core/css/variables.scss
Unescape Escape View File

@ -20,6 +20,6 @@ $image-login-background: '../img/background.png?v=2';
$color-loading: #969696;
$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%);
$border-radius: 3px;

1
core/img/actions/toggle-background.svg
Unescape Escape 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