archive/nextcloud_server
0
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2025-03-15 00:43:23 +00:00
Code Issues Projects Releases Wiki Activity

fix: Replace deprecated SASS rules

Browse source 
- 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 <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2024-11-17 02:00:46 +01:00
parent 714fc63c40
commit f6779e6766
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
10 changed files with 36 additions and 36 deletions

2
apps/files_sharing/css/icons.scss
View file

@ -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 {

4
apps/files_sharing/css/publicView.scss
View file

@ -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';

12
apps/settings/css/settings.scss
View file

@ -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 {

6
core/css/apps.scss
View file

@ -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 {

2
core/css/guest.scss
View file

@ -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; }

2
core/css/icons.scss
View file

@ -3,7 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
@use 'variables';
@import 'functions';
@use 'functions';
/* GLOBAL ------------------------------------------------------------------- */
[class^='icon-'], [class*=' icon-'] {

4
core/css/inputs.scss
View file

@ -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);
}
}

22
core/css/server.scss
View file

@ -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';

4
core/css/toast.scss
View file

@ -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%;

14
core/css/variables.scss
View file

@ -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;