upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-02-03 20:41:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 25
nextcloud/core/css/icons.scss
Daniel Calviño Sánchez 243feca786 Adjust list of replaced elements to the spec 
"button, textarea, select, div[contenteditable='true']" were removed and
"audio, canvas, embed, iframe" were added.

Note that this is a coarse-grained list; according to the spec some of
the elements, like canvas or input, might be treated as a replaced
element in some cases and as ordinary elements in others:
https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

For now all the elements that might be replaced elements use the loading
image by default, so apps will need to override that when the elements
are treated as ordinary elements. Of course that can be flipped in the
future to instead make an element to use the "::after" approach by
default if it is found that the element requires the override often.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2020-02-27 10:35:54 +01:00

499 lines
14 KiB
SCSS
Raw Blame History

/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
* @author Joas Schilling <coding@schilljs.com>
* @author Lukas Reschke <lukas@statuscode.ch>
* @author Roeland Jago Douma <roeland@famdouma.nl>
* @author Vincent Chan <plus.vincchan@gmail.com>
* @author Thomas Müller <thomas.mueller@tmit.eu>
* @author Hendrik Leppelsack <hendrik@leppelsack.de>
* @author Jan-Christoph Borchardt <hey@jancborchardt.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/* GLOBAL ------------------------------------------------------------------- */
[class^='icon-'], [class*=' icon-'] {
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
min-height: 16px;
}
.icon-breadcrumb {
background-image: url('../img/breadcrumb.svg?v=1');
}
/* LOADING ------------------------------------------------------------------ */
.loading,
.loading-small,
.icon-loading,
.icon-loading-dark,
.icon-loading-small,
.icon-loading-small-dark {
position: relative;
&:after {
z-index: 2;
content: '';
height: 28px;
width: 28px;
margin: -16px 0 0 -16px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
-webkit-animation: rotate .8s infinite linear;
animation: rotate .8s infinite linear;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
border: 2px solid var(--color-loading-light);
border-top-color: var(--color-loading-dark);
}
}
.icon-loading-dark:after,
.icon-loading-small-dark:after {
border: 2px solid var(--color-loading-dark);
border-top-color: var(--color-loading-light);
}
.icon-loading-small:after,
.icon-loading-small-dark:after {
height: 12px;
width: 12px;
margin: -8px 0 0 -8px;
}
/* Css replaced elements don't have ::after nor ::before */
audio, canvas, embed, iframe, img, input, object, video {
&.icon-loading {
background-image: url('../img/loading.gif');
}
&.icon-loading-dark {
background-image: url('../img/loading-dark.gif');
}
&.icon-loading-small {
background-image: url('../img/loading-small.gif');
}
&.icon-loading-small-dark {
background-image: url('../img/loading-small-dark.gif');
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.icon-32 {
background-size: 32px !important;
}
.icon-white {
&.icon-shadow {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
}
/* ICONS -------------------------------------------------------------------
* These icon classes are generated automatically with the following pattern
* for icon-black-white('close', ...)
* .icon-close (black icon)
* .icon-close-white (white icon)
* .icon-close.icon-white (white icon)
*
* Some class definitions are kept as before, since they don't follow the pattern
* or have some additional styling like drop shadows
*/
@include icon-black-white('add', 'actions', 1, true);
@include icon-black-white('address', 'actions', 1, true);
@include icon-black-white('audio', 'actions', 2, true);
.icon-audio-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
@include icon-black-white('audio-off', 'actions', 1, true);
.icon-audio-off-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-caret-white,
.icon-caret {
@include icon-color('caret', 'actions', $color-white, 1, true);
}
.icon-caret-dark {
@include icon-color('caret', 'actions', $color-black, 1, true);
}
@include icon-black-white('checkmark', 'actions', 1, true);
.icon-checkmark-color {
@include icon-color('checkmark', 'actions', $color-success, 1, true);
}
@include icon-black-white('clippy', 'actions', 2, true);
@include icon-black-white('close', 'actions', 1, true);
@include icon-black-white('comment', 'actions', 1, true);
@include icon-black-white('confirm', 'actions', 2, true);
@include icon-black-white('download', 'actions', 1, true);
.icon-confirm-fade {
@include icon-color('confirm-fade', 'actions', $color-black, 2, true);
}
.icon-delete {
@include icon-color('delete', 'actions', $color-black, 1, true);
&.no-permission,
&.no-hover {
&:hover,
&:focus {
@include icon-color('delete', 'actions', $color-black, 1, true);
}
}
&:hover,
&:focus {
@include icon-color('delete', 'actions', $color-error, 1, true);
filter: initial;
}
&.icon-white {
@include icon-color('delete', 'actions', $color-white, 1, true);
}
}
.icon-delete-white {
@include icon-color('delete', 'actions', $color-white, 1, true);
&.no-permission {
&:hover,
&:focus {
@include icon-color('delete', 'actions', $color-white, 1, true);
}
}
&:hover,
&:focus {
@include icon-color('delete', 'actions', $color-error, 1, true);
}
}
@include icon-black-white('details', 'actions', 1, true);
@include icon-black-white('edit', 'actions', 1, true);
@include icon-black-white('error', 'actions', 1, true);
.icon-error-color {
@include icon-color('error', 'actions', $color-error, 1, true);
}
@include icon-black-white('external', 'actions', 1, true);
@include icon-black-white('fullscreen', 'actions', 1, true);
.icon-fullscreen-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
@include icon-black-white('history', 'actions', 2, true);
@include icon-black-white('info', 'actions', 1, true);
@include icon-black-white('logout', 'actions', 1, true);
@include icon-black-white('mail', 'actions', 1, true);
@include icon-black-white('menu', 'actions', 1, true);
@include icon-black-white('menu-sidebar', 'actions', 1, true);
@include icon-black-white('more', 'actions', 1, true);
@include icon-black-white('password', 'actions', 1, true);
@include icon-black-white('pause', 'actions', 1, true);
@include icon-black-white('play', 'actions', 1, true);
@include icon-black-white('play-add', 'actions', 1, true);
@include icon-black-white('play-next', 'actions', 1, true);
@include icon-black-white('play-previous', 'actions', 1, true);
@include icon-black-white('projects', 'actions', 1, true);
@include icon-black-white('public', 'actions', 1, true);
@include icon-black-white('quota', 'actions', 1, true);
@include icon-black-white('rename', 'actions', 1, true);
@include icon-black-white('screen', 'actions', 1, true);
.icon-screen-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
@include icon-black-white('screen-off', 'actions', 1, true);
.icon-screen-off-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
@include icon-black-white('search', 'actions', 1, true);
/* default icon have a .5 opacity */
.icon-settings {
@include icon-color('settings', 'actions', $color-black, 1, true);
}
.icon-settings-dark {
@include icon-color('settings-dark', 'actions', $color-black, 1, true);
}
.icon-settings-white {
@include icon-color('settings-dark', 'actions', $color-white, 1, true);
}
/* always use icon-shared, AdBlock blocks icon-share */
.icon-shared,
.icon-share {
@include icon-color('share', 'actions', $color-black, 1, true);
&.icon-white {
@include icon-color('share', 'actions', $color-white, 1, true);
}
}
.icon-shared-white,
.icon-share-white {
@include icon-color('share', 'actions', $color-white, 1, true);
}
@include icon-black-white('sound', 'actions', 1, true);
@include icon-black-white('sound-off', 'actions', 1, true);
.icon-favorite {
@include icon-color('star-dark', 'actions', $color-black, 1, true);
}
@include icon-black-white('star', 'actions', 1, true);
.icon-star-dark {
@include icon-color('star', 'actions', $color-black, 1, true);
}
.icon-starred {
&:hover,
&:focus {
@include icon-color('star', 'actions', $color-black, 1, true);
}
@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
}
.icon-star {
&:hover,
&:focus {
@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
}
}
@include icon-black-white('tag', 'actions', 2, true);
@include icon-black-white('timezone', 'actions', 1, true);
@include icon-black-white('toggle', 'actions', 1, true);
@include icon-black-white('toggle-background', 'actions', 1, true);
@include icon-black-white('toggle-pictures', 'actions', 1, true);
@include icon-black-white('toggle-filelist', 'actions', 1, true);
@include icon-black-white('triangle-e', 'actions', 1, true);
@include icon-black-white('triangle-n', 'actions', 1, true);
@include icon-black-white('triangle-s', 'actions', 1, true);
@include icon-black-white('upload', 'actions', 1, true);
@include icon-black-white('user', 'actions', 1, true);
@include icon-black-white('group', 'actions', 1, true);
@include icon-black-white('video', 'actions', 2, true);
.icon-video-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
@include icon-black-white('video-off', 'actions', 1, true);
.icon-video-off-white {
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}
@include icon-black-white('video-switch', 'actions', 1, true);
/* SHADOW WHITE ICONS: white version only ----------------------------------- */
.icon-view-close,
.icon-view-close-white {
@include icon-color('view-close', 'actions', $color-white, 1, true);
}
.icon-view-download,
.icon-view-download-white {
@include icon-color('view-download', 'actions', $color-white, 1, true);
}
.icon-view-pause,
.icon-view-pause-white {
@include icon-color('view-pause', 'actions', $color-white, 1, true);
}
.icon-view-play,
.icon-view-play-white {
@include icon-color('view-play', 'actions', $color-white, 1, true);
}
.icon-view-next {
@include icon-color('arrow-right', 'actions', $color-black, 1, true);
&.icon-white {
@include icon-color('arrow-right', 'actions', $color-white, 1, true);
}
}
.icon-view-previous {
@include icon-color('arrow-left', 'actions', $color-black, 1, true);
&.icon-white {
@include icon-color('arrow-left', 'actions', $color-white, 1, true);
}
}
@include icon-black-white('disabled-user', 'actions', 1, true);
@include icon-black-white('disabled-users', 'actions', 1, true);
@include icon-black-white('user-admin', 'actions', 1, true);
/* PLACES ------------------------------------------------------------------- */
.icon-calendar {
@include icon-color('calendar', 'places', $color-white, 1, true);
}
.icon-calendar-dark {
@include icon-color('calendar', 'places', $color-black, 1, true);
}
.icon-contacts {
@include icon-color('contacts', 'places', $color-white, 1, true);
}
.icon-contacts-dark {
@include icon-color('contacts', 'places', $color-black, 1, true);
}
.icon-files {
@include icon-color('files', 'places', $color-white, 1, true);
}
.icon-files-dark {
@include icon-color('files', 'places', $color-black, 1, true);
}
.icon-file,
.icon-filetype-text {
@include icon-color('text', 'filetypes', $color-black, 1, true);
}
.icon-filetype-file {
@include icon-color('file', 'filetypes', $color-black, 1, true);
}
@include icon-black-white('folder', 'filetypes', 1, true);
.icon-filetype-folder {
@include icon-color('folder', 'filetypes', $color-black, 1, true);
}
.icon-filetype-folder-drag-accept {
@include icon-color('folder-drag-accept', 'filetypes', $color-black, 1, true);
}
@include icon-black-white('home', 'places', 1, true);
@include icon-black-white('link', 'places', 1, true);
@include icon-black-white('music', 'places', 1, true);
@include icon-black-white('picture', 'places', 1, true);
/* CLIENTS ------------------------------------------------------------------- */
@include icon-black-white('desktop', 'clients', 1, true);
@include icon-black-white('phone', 'clients', 1, true);
@include icon-black-white('tablet', 'clients', 1, true);
/* APP CATEGORIES ------------------------------------------------------------------- */
.icon-category-installed {
@include icon-color('user', 'actions', $color-black, 1, true);
}
.icon-category-enabled {
@include icon-color('checkmark', 'actions', $color-black, 1, true);
}
.icon-category-disabled {
@include icon-color('close', 'actions', $color-black, 1, true);
}
.icon-category-app-bundles {
@include icon-color('bundles', 'categories', $color-black, 1, true);
}
.icon-category-updates {
@include icon-color('download', 'actions', $color-black, 1, true);
}
.icon-category-files {
@include icon-color('files', 'categories', $color-black, 1, true);
}
.icon-category-social {
@include icon-color('social', 'categories', $color-black, 1, true);
}
.icon-category-office {
@include icon-color('office', 'categories', $color-black, 1, true);
}
.icon-category-auth {
@include icon-color('auth', 'categories', $color-black, 1, true);
}
.icon-category-monitoring {
@include icon-color('monitoring', 'categories', $color-black, 1, true);
}
.icon-category-multimedia {
@include icon-color('multimedia', 'categories', $color-black, 1, true);
}
.icon-category-organization {
@include icon-color('organization', 'categories', $color-black, 1, true);
}
.icon-category-customization {
@include icon-color('customization', 'categories', $color-black, 1, true);
}
.icon-category-integration {
@include icon-color('integration', 'categories', $color-black, 1, true);
}
.icon-category-tools {
@include icon-color('settings-dark', 'actions', $color-black, 1, true);
}
.icon-category-games {
@include icon-color('games', 'categories', $color-black, 1, true);
}
.icon-category-security {
@include icon-color('password', 'actions', $color-black, 1, true);
}
.icon-category-search {
@include icon-color('search', 'actions', $color-black, 1, true);
}
.icon-category-workflow {
@include icon-color('workflow', 'categories', $color-black, 1, true);
}
.icon-talk {
@include icon-color('app-dark', 'spreed', $color-black, 1);
}
.nav-icon-systemtagsfilter {
@include icon-color('tag', 'actions', $color-black, 1, true);
}
Reference in a new issue View git blame Copy permalink