diff options
Diffstat (limited to 'core/css/icons.scss')
| -rw-r--r-- | core/css/icons.scss | 430 |
1 files changed, 18 insertions, 412 deletions
diff --git a/core/css/icons.scss b/core/css/icons.scss index 78522895cf5..df6edea1f15 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -1,31 +1,9 @@ -/** - * @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/>. - * +/*! + * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ +@use 'variables'; +@use 'functions'; /* GLOBAL ------------------------------------------------------------------- */ [class^='icon-'], [class*=' icon-'] { @@ -55,7 +33,7 @@ margin: -16px 0 0 -16px; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; border-radius: 100%; -webkit-animation: rotate .8s infinite linear; animation: rotate .8s infinite linear; @@ -117,15 +95,19 @@ audio, canvas, embed, iframe, img, input, object, video { background-size: 32px !important; } -.icon-white { - &.icon-shadow { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); - } +.icon-white.icon-shadow, +.icon-audio-white, +.icon-audio-off-white, +.icon-fullscreen-white, +.icon-screen-white, +.icon-screen-off-white, +.icon-video-white, +.icon-video-off-white { + 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) @@ -134,382 +116,6 @@ audio, canvas, embed, iframe, img, input, object, video { * 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); -@include icon-black-white('template-add', '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('filter', '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); - -@include icon-black-white('alert-outline', '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', #969696, 1, true); -} - -.icon-filetype-file { - @include icon-color('file', 'filetypes', #969696, 1, true); -} - -@include icon-black-white('folder', 'filetypes', 1, true); -.icon-filetype-folder { - @include icon-color('folder', 'filetypes', $color-primary, 1, true); -} - -.icon-filetype-folder-drag-accept { - @include icon-color('folder-drag-accept', 'filetypes', $color-primary, 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-category-dashboard { - @include icon-color('dashboard', '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); -} +// plain CSS import and not SCSS so disable the `@import` rule +/* stylelint-disable-next-line no-invalid-position-at-import-rule */ +@import '../../dist/icons.css'; |