diff options
Diffstat (limited to 'core/css/functions.scss')
-rw-r--r-- | core/css/functions.scss | 104 |
1 files changed, 27 insertions, 77 deletions
diff --git a/core/css/functions.scss b/core/css/functions.scss index 7489e574e97..8fac1ae55d5 100644 --- a/core/css/functions.scss +++ b/core/css/functions.scss @@ -1,57 +1,34 @@ -/** - * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) - * - * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> - * - * @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 */ /** - * Removes the "#" from a color. - * - * @param string $color The color - * @return string The color without # + * @see core/src/icons.js */ -@function remove-hash-from-color($color) { - $color: unquote($color); - $index: str-index(inspect($color), '#'); - @if $index { - $color: str-slice(inspect($color), 2); +@function match-color-string($color) { + @if $color == #000 { + @return "dark"; } - @return $color; -} - -/** - * Calculates the URL to the svg under the SVG API. - * - * @param string $icon the icon filename - * @param string $dir the icon folder within /core/img if $core or app name - * @param string $color the desired color in hexadecimal - * @param int [$version] the version of the file - * @param bool [$core] search icon in core - * @return string The URL to the svg. - */ -@function icon-color-path($icon, $dir, $color, $version: 1, $core: false) { - $color: remove-hash-from-color($color); - @if $core { - @return '#{$webroot}/svg/core/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}'; - } @else { - @return '#{$webroot}/svg/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}'; + @if $color == #fff { + @return 'white'; + } + @if $color == #FC0 { + @return 'yellow'; + } + @if $color == #e9322d { + @return 'red'; + } + @if $color == #eca700 { + @return 'orange'; + } + @if $color == #46ba61 { + @return 'green'; } + @if $color == #969696 { + @return 'grey'; + } + @return $color; } /** @@ -66,35 +43,8 @@ * @returns A background image with the url to the set to the requested icon. */ @mixin icon-color($icon, $dir, $color, $version: 1, $core: false) { - $color: remove-hash-from-color($color); + $color: match-color-string($color); /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ - $varName: "--icon-#{$dir}-#{$icon}-#{$color}"; - @if $core { - $varName: "--icon-#{$icon}-#{$color}"; - } - #{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core)); + $varName: "--icon-#{$icon}-#{$color}"; 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); - } -} - -@mixin position($value) { - @if $value == 'sticky' { - position: -webkit-sticky; // Safari support - position: sticky; - } @else { - position: $value; - } -} |