Skip to content

Commit f6779e6

Browse files
committed
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 <[email protected]>
1 parent 714fc63 commit f6779e6

File tree

10 files changed

+36
-36
lines changed

10 files changed

+36
-36
lines changed

apps/files_sharing/css/icons.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55
@use 'variables';
6-
@import 'functions';
6+
@use 'functions';
77

88
// This is the icons used in the sharing ui (multiselect)
99
.icon-room {

apps/files_sharing/css/publicView.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
* SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
5-
@import 'public.scss';
6-
@import 'mobile.scss';
5+
@use 'public.scss';
6+
@use 'mobile.scss';

apps/settings/css/settings.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
@use 'variables';
77
@use 'sass:math';
8-
@import 'functions';
8+
@use 'functions';
99

1010
input {
1111
&#openid, &#webdav {
@@ -20,23 +20,23 @@ input {
2020

2121
/* icons for sidebar */
2222
.nav-icon-personal-settings {
23-
@include icon-color('personal', 'settings', variables.$color-black);
23+
@include functions.icon-color('personal', 'settings', variables.$color-black);
2424
}
2525

2626
.nav-icon-security {
27-
@include icon-color('toggle-filelist', 'settings', variables.$color-black);
27+
@include functions.icon-color('toggle-filelist', 'settings', variables.$color-black);
2828
}
2929

3030
.nav-icon-clientsbox {
31-
@include icon-color('change', 'settings', variables.$color-black);
31+
@include functions.icon-color('change', 'settings', variables.$color-black);
3232
}
3333

3434
.nav-icon-federated-cloud {
35-
@include icon-color('share', 'settings', variables.$color-black);
35+
@include functions.icon-color('share', 'settings', variables.$color-black);
3636
}
3737

3838
.nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
39-
@include icon-color('password', 'settings', variables.$color-black);
39+
@include functions.icon-color('password', 'settings', variables.$color-black);
4040
}
4141

4242
#personal-settings-avatar-container {

core/css/apps.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
@use 'variables';
77
@use 'sass:math';
8-
@import 'functions';
8+
@use 'functions';
99

1010
@media screen and (max-width: variables.$breakpoint-mobile) {
1111
// Make the body full width on mobile
@@ -449,7 +449,7 @@ kbd {
449449
margin: 0;
450450
padding: 0;
451451
background: none;
452-
@include icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
452+
@include functions.icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
453453
background-size: 16px;
454454
background-repeat: no-repeat;
455455
background-position: center;
@@ -517,7 +517,7 @@ kbd {
517517
.app-navigation-entry-utils-menu-button {
518518
/* Prevent bg img override if an icon class is set */
519519
button:not([class^='icon-']):not([class*=' icon-']) {
520-
@include icon-color('more', 'actions', variables.$color-black, 1, true);
520+
@include functions.icon-color('more', 'actions', variables.$color-black, 1, true);
521521
}
522522
&:hover button,
523523
&:focus button {

core/css/guest.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* SPDX-FileCopyrightText: 2016 ownCloud, Inc.
44
* SPDX-License-Identifier: AGPL-3.0-or-later
55
*/
6-
@import 'animations.scss';
6+
@use 'animations.scss';
77

88
/* Default and reset */
99
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; }

core/css/icons.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55
@use 'variables';
6-
@import 'functions';
6+
@use 'functions';
77

88
/* GLOBAL ------------------------------------------------------------------- */
99
[class^='icon-'], [class*=' icon-'] {

core/css/inputs.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
@use 'variables';
77
@use 'sass:color';
8-
@import 'functions';
8+
@use 'functions';
99

1010
/* Specifically override browser styles */
1111
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
@@ -377,7 +377,7 @@ input {
377377
margin-inline-end: 0;
378378
&:disabled {
379379
cursor: default;
380-
@include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
380+
@include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
381381
}
382382
}
383383

core/css/server.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
* SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
5-
@import 'styles.scss';
6-
@import 'inputs.scss';
7-
@import 'header.scss';
8-
@import 'icons.scss';
9-
@import 'apps.scss';
10-
@import 'global.scss';
11-
@import 'fixes.scss';
12-
@import 'mobile.scss';
13-
@import 'tooltip.scss';
5+
@use 'styles.scss';
6+
@use 'inputs.scss';
7+
@use 'header.scss';
8+
@use 'icons.scss';
9+
@use 'apps.scss';
10+
@use 'global.scss';
11+
@use 'fixes.scss';
12+
@use 'mobile.scss';
13+
@use 'tooltip.scss';
1414
// If you include .css, it will be imported as url
15-
@import '../../node_modules/@nextcloud/dialogs/dist/style';
16-
@import 'public.scss';
15+
@use '../../node_modules/@nextcloud/dialogs/dist/style';
16+
@use 'public.scss';

core/css/toast.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55
@use 'variables';
6-
@import 'functions';
6+
@use 'functions';
77

88
.toastify.toast {
99
min-width: 200px;
@@ -25,7 +25,7 @@
2525
width: 38px;
2626
opacity: 0.4;
2727
padding: 12px;
28-
@include icon-color('close', 'actions', variables.$color-black, 2, true);
28+
@include functions.icon-color('close', 'actions', variables.$color-black, 2, true);
2929
background-position: center;
3030
background-repeat: no-repeat;
3131
text-indent: 200%;

core/css/variables.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,26 +28,26 @@ $color-placeholder-light: nc-darken($color-main-background, 10%) !default;
2828
$color-placeholder-dark: nc-darken($color-main-background, 20%) !default;
2929

3030
$color-primary: #0082c9 !default;
31-
$color-primary-hover: mix($color-primary, $color-main-background, 80%) !default;
31+
$color-primary-hover: color.mix($color-primary, $color-main-background, 80%) !default;
3232

33-
$color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
33+
$color-primary-light: color.mix($color-primary, $color-main-background, 10%) !default;
3434
$color-primary-light-text: $color-primary !default;
35-
$color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !default;
35+
$color-primary-light-hover: color.mix($color-primary-light, $color-main-text, 95%) !default;
3636

3737
$color-primary-text: #ffffff !default;
3838
// do not use nc-darken/lighten in case of overriding because
3939
// primary-text is independent of color-main-text
4040
$color-primary-element-text-dark: color.adjust($color-primary-text, $lightness: -7%, $space: hsl) !default;
4141
$color-primary-element: $color-primary !default;
42-
$color-primary-element-hover: mix($color-primary-element, $color-main-background, 80%) !default;
42+
$color-primary-element-hover: color.mix($color-primary-element, $color-main-background, 80%) !default;
4343
$color-primary-element-light: color.adjust($color-primary-element, $lightness: 15%, $space: hsl) !default;
4444

4545
$color-error: #e9322d;
46-
$color-error-hover: mix($color-error, $color-main-background, 80%) !default;
46+
$color-error-hover: color.mix($color-error, $color-main-background, 80%) !default;
4747
$color-warning: #eca700;
48-
$color-warning-hover: mix($color-warning, $color-main-background, 80%) !default;
48+
$color-warning-hover: color.mix($color-warning, $color-main-background, 80%) !default;
4949
$color-success: #46ba61;
50-
$color-success-hover: mix($color-success, $color-main-background, 80%) !default;
50+
$color-success-hover: color.mix($color-success, $color-main-background, 80%) !default;
5151
// used for svg
5252
$color-white: #fff;
5353
$color-black: #000;

0 commit comments

Comments
 (0)