From f6779e676647adf7840c0eb2519d7d00a46a56d2 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Sun, 17 Nov 2024 02:00:46 +0100 Subject: [PATCH] fix: Replace deprecated SASS rules - global color functions are now deprecated - use color namespace - `@import` is deprecated and will be removed (will be native CSS import in future) Signed-off-by: Ferdinand Thiessen --- apps/files_sharing/css/icons.scss | 2 +- apps/files_sharing/css/publicView.scss | 4 ++-- apps/settings/css/settings.scss | 12 ++++++------ core/css/apps.scss | 6 +++--- core/css/guest.scss | 2 +- core/css/icons.scss | 2 +- core/css/inputs.scss | 4 ++-- core/css/server.scss | 22 +++++++++++----------- core/css/toast.scss | 4 ++-- core/css/variables.scss | 14 +++++++------- 10 files changed, 36 insertions(+), 36 deletions(-) diff --git a/apps/files_sharing/css/icons.scss b/apps/files_sharing/css/icons.scss index ddfd7f89602..a6c000126f3 100644 --- a/apps/files_sharing/css/icons.scss +++ b/apps/files_sharing/css/icons.scss @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ @use 'variables'; -@import 'functions'; +@use 'functions'; // This is the icons used in the sharing ui (multiselect) .icon-room { diff --git a/apps/files_sharing/css/publicView.scss b/apps/files_sharing/css/publicView.scss index b5d9978e5f4..32def00193d 100644 --- a/apps/files_sharing/css/publicView.scss +++ b/apps/files_sharing/css/publicView.scss @@ -2,5 +2,5 @@ * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ -@import 'public.scss'; -@import 'mobile.scss'; +@use 'public.scss'; +@use 'mobile.scss'; diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index e2745c40611..2ef115f2ac2 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -5,7 +5,7 @@ */ @use 'variables'; @use 'sass:math'; -@import 'functions'; +@use 'functions'; input { &#openid, &#webdav { @@ -20,23 +20,23 @@ input { /* icons for sidebar */ .nav-icon-personal-settings { - @include icon-color('personal', 'settings', variables.$color-black); + @include functions.icon-color('personal', 'settings', variables.$color-black); } .nav-icon-security { - @include icon-color('toggle-filelist', 'settings', variables.$color-black); + @include functions.icon-color('toggle-filelist', 'settings', variables.$color-black); } .nav-icon-clientsbox { - @include icon-color('change', 'settings', variables.$color-black); + @include functions.icon-color('change', 'settings', variables.$color-black); } .nav-icon-federated-cloud { - @include icon-color('share', 'settings', variables.$color-black); + @include functions.icon-color('share', 'settings', variables.$color-black); } .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate { - @include icon-color('password', 'settings', variables.$color-black); + @include functions.icon-color('password', 'settings', variables.$color-black); } #personal-settings-avatar-container { diff --git a/core/css/apps.scss b/core/css/apps.scss index 25c0b8164bc..507aa920e03 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -5,7 +5,7 @@ */ @use 'variables'; @use 'sass:math'; -@import 'functions'; +@use 'functions'; @media screen and (max-width: variables.$breakpoint-mobile) { // Make the body full width on mobile @@ -449,7 +449,7 @@ kbd { margin: 0; padding: 0; background: none; - @include icon-color('triangle-s', 'actions', variables.$color-black, 1, true); + @include functions.icon-color('triangle-s', 'actions', variables.$color-black, 1, true); background-size: 16px; background-repeat: no-repeat; background-position: center; @@ -517,7 +517,7 @@ kbd { .app-navigation-entry-utils-menu-button { /* Prevent bg img override if an icon class is set */ button:not([class^='icon-']):not([class*=' icon-']) { - @include icon-color('more', 'actions', variables.$color-black, 1, true); + @include functions.icon-color('more', 'actions', variables.$color-black, 1, true); } &:hover button, &:focus button { diff --git a/core/css/guest.scss b/core/css/guest.scss index d8afbd58c92..125f7ebf0d9 100644 --- a/core/css/guest.scss +++ b/core/css/guest.scss @@ -3,7 +3,7 @@ * SPDX-FileCopyrightText: 2016 ownCloud, Inc. * SPDX-License-Identifier: AGPL-3.0-or-later */ -@import 'animations.scss'; +@use 'animations.scss'; /* Default and reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; } diff --git a/core/css/icons.scss b/core/css/icons.scss index f41e5c22a86..2d9327d05a9 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ @use 'variables'; -@import 'functions'; +@use 'functions'; /* GLOBAL ------------------------------------------------------------------- */ [class^='icon-'], [class*=' icon-'] { diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 7562f4a4347..f06689ad5e7 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -5,7 +5,7 @@ */ @use 'variables'; @use 'sass:color'; -@import 'functions'; +@use 'functions'; /* Specifically override browser styles */ input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] { @@ -377,7 +377,7 @@ input { margin-inline-end: 0; &:disabled { cursor: default; - @include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true); + @include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true); } } diff --git a/core/css/server.scss b/core/css/server.scss index e3710e14f5a..b056ed81ecf 100644 --- a/core/css/server.scss +++ b/core/css/server.scss @@ -2,15 +2,15 @@ * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ -@import 'styles.scss'; -@import 'inputs.scss'; -@import 'header.scss'; -@import 'icons.scss'; -@import 'apps.scss'; -@import 'global.scss'; -@import 'fixes.scss'; -@import 'mobile.scss'; -@import 'tooltip.scss'; +@use 'styles.scss'; +@use 'inputs.scss'; +@use 'header.scss'; +@use 'icons.scss'; +@use 'apps.scss'; +@use 'global.scss'; +@use 'fixes.scss'; +@use 'mobile.scss'; +@use 'tooltip.scss'; // If you include .css, it will be imported as url -@import '../../node_modules/@nextcloud/dialogs/dist/style'; -@import 'public.scss'; +@use '../../node_modules/@nextcloud/dialogs/dist/style'; +@use 'public.scss'; diff --git a/core/css/toast.scss b/core/css/toast.scss index 582713ec329..323a26b28ff 100644 --- a/core/css/toast.scss +++ b/core/css/toast.scss @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ @use 'variables'; -@import 'functions'; +@use 'functions'; .toastify.toast { min-width: 200px; @@ -25,7 +25,7 @@ width: 38px; opacity: 0.4; padding: 12px; - @include icon-color('close', 'actions', variables.$color-black, 2, true); + @include functions.icon-color('close', 'actions', variables.$color-black, 2, true); background-position: center; background-repeat: no-repeat; text-indent: 200%; diff --git a/core/css/variables.scss b/core/css/variables.scss index 417d1986e01..35b1ecab863 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -28,26 +28,26 @@ $color-placeholder-light: nc-darken($color-main-background, 10%) !default; $color-placeholder-dark: nc-darken($color-main-background, 20%) !default; $color-primary: #0082c9 !default; -$color-primary-hover: mix($color-primary, $color-main-background, 80%) !default; +$color-primary-hover: color.mix($color-primary, $color-main-background, 80%) !default; -$color-primary-light: mix($color-primary, $color-main-background, 10%) !default; +$color-primary-light: color.mix($color-primary, $color-main-background, 10%) !default; $color-primary-light-text: $color-primary !default; -$color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !default; +$color-primary-light-hover: color.mix($color-primary-light, $color-main-text, 95%) !default; $color-primary-text: #ffffff !default; // do not use nc-darken/lighten in case of overriding because // primary-text is independent of color-main-text $color-primary-element-text-dark: color.adjust($color-primary-text, $lightness: -7%, $space: hsl) !default; $color-primary-element: $color-primary !default; -$color-primary-element-hover: mix($color-primary-element, $color-main-background, 80%) !default; +$color-primary-element-hover: color.mix($color-primary-element, $color-main-background, 80%) !default; $color-primary-element-light: color.adjust($color-primary-element, $lightness: 15%, $space: hsl) !default; $color-error: #e9322d; -$color-error-hover: mix($color-error, $color-main-background, 80%) !default; +$color-error-hover: color.mix($color-error, $color-main-background, 80%) !default; $color-warning: #eca700; -$color-warning-hover: mix($color-warning, $color-main-background, 80%) !default; +$color-warning-hover: color.mix($color-warning, $color-main-background, 80%) !default; $color-success: #46ba61; -$color-success-hover: mix($color-success, $color-main-background, 80%) !default; +$color-success-hover: color.mix($color-success, $color-main-background, 80%) !default; // used for svg $color-white: #fff; $color-black: #000; -- 2.39.5