MOBILE-3947 chore: Change import to use on Sass

src/addons/block/onlineusers/components/onlineusers/onlineusers.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 :host {
     --core-avatar-size: 30px;
 

src/addons/block/recentactivity/components/recentactivity/recentactivity.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host .core-block-content ::ng-deep {
     .activitydate, .activityhead {

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .core-horizontal-scroll div.core-horizontal-scroll-item {

src/addons/block/timeline/components/events/events.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 h3 {
     font-weight: bold;

src/addons/calendar/calendar-common.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
 

src/addons/calendar/components/calendar/calendar.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --addon-calendar-blank-day-background-color: var(--light);

src/addons/calendar/components/filter/filter.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     ion-item {

src/addons/messages/messages-common.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .addon-messages-conversation-item,

src/addons/messages/pages/discussion/discussion.scss

@@ -1,5 +1,4 @@
-@import "~theme/components/discussion.scss";
+@use "theme/globals" as *;
-@import "~theme/globals.scss";
 
 :host {
 

src/addons/messages/pages/discussion/discussion.ts

@@ -51,7 +51,7 @@ import { CoreDom } from '@singletons/dom';
 @Component({
     selector: 'page-addon-messages-discussion',
     templateUrl: 'discussion.html',
-    styleUrls: ['discussion.scss'],
+    styleUrls: ['../../../../theme/components/discussion.scss', 'discussion.scss'],
 })
 export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterViewInit {
 

src/addons/mod/chat/pages/chat/chat.scss

@@ -1,5 +1,3 @@
-@import "~theme/components/discussion.scss";
-
 :host {
     .addon-mod_chat-notice {
         margin-top: 8px;

src/addons/mod/chat/pages/chat/chat.ts

@@ -37,7 +37,7 @@ import { CoreAnalytics, CoreAnalyticsEventType } from '@services/analytics';
 @Component({
     selector: 'page-addon-mod-chat-chat',
     templateUrl: 'chat.html',
-    styleUrls: ['chat.scss'],
+    styleUrls: ['../../../../../theme/components/discussion.scss', 'chat.scss'],
 })
 export class AddonModChatChatPage implements OnInit, OnDestroy, CanLeave {
 

src/addons/mod/chat/pages/session-messages/session-messages.scss

@@ -1,5 +1,3 @@
-@import "~theme/components/discussion.scss";
-
 :host {
     .addon-mod_chat-notice {
         margin-top: 8px;

src/addons/mod/chat/pages/session-messages/session-messages.ts

@@ -31,7 +31,7 @@ import { CoreTime } from '@singletons/time';
 @Component({
     selector: 'page-addon-mod-chat-session-messages',
     templateUrl: 'session-messages.html',
-    styleUrls: ['session-messages.scss'],
+    styleUrls: ['../../../../../theme/components/discussion.scss', 'session-messages.scss'],
 })
 export class AddonModChatSessionMessagesPage implements OnInit {
 

src/addons/mod/data/data-forms.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 // Edit and search modal.
 :host {

src/addons/mod/data/data.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 /// @prop - The padding for the grid column
 $grid-column-padding:        var(--ion-grid-column-padding, 5px) !default;

src/addons/mod/forum/components/index/index.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
 

src/addons/mod/forum/components/post/post.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host .addon-mod_forum-post {
     background-color: var(--ion-item-background);

src/addons/mod/forum/pages/new-discussion/new-discussion.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .addon-forum-group-info {

src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .core-warning-item {

src/addons/mod/lesson/pages/user-retake/user-retake.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .button-disabled {

src/addons/mod/resource/components/index/index.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .addon-mod_resource-outdated {

src/addons/mod/scorm/components/index/index.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .addon-mod_scorm-attempt-summary ion-item > p {

src/addons/mod/wiki/components/index/index.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 $addon-mod-wiki-toc-level-padding:    12px !default;
 

src/addons/notifications/notifications.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --extra-icon-size: 16px;

src/addons/notifications/pages/list/list.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 ion-item {
     ion-label {

src/addons/notifications/pages/notification/notification.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
 

src/addons/qtype/ddimageortext/component/ddimageortext.scss

@@ -1,4 +1,4 @@
-@import "~core/features/question/question";
+@use "theme/globals" as *;
 
 // Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
 :host {

src/addons/qtype/ddimageortext/component/ddimageortext.ts

@@ -24,7 +24,7 @@ import { AddonQtypeDdImageOrTextQuestion } from '../classes/ddimageortext';
 @Component({
     selector: 'addon-qtype-ddimageortext',
     templateUrl: 'addon-qtype-ddimageortext.html',
-    styleUrls: ['ddimageortext.scss'],
+    styleUrls: ['../../../../core/features/question/question.scss', 'ddimageortext.scss'],
 })
 export class AddonQtypeDdImageOrTextComponent
     extends CoreQuestionBaseComponent<AddonModQuizDdImageOrTextQuestionData>

src/addons/qtype/ddwtos/component/ddwtos.scss

@@ -1,4 +1,4 @@
-@import "~core/features/question/question";
+@use "theme/globals" as *;
 
 // Style ddwtos content a bit. Almost all these styles are copied from Moodle.
 .addon-qtype-ddwtos-container {

src/addons/qtype/ddwtos/component/ddwtos.ts

@@ -25,7 +25,7 @@ import { AddonQtypeDdwtosQuestion } from '../classes/ddwtos';
 @Component({
     selector: 'addon-qtype-ddwtos',
     templateUrl: 'addon-qtype-ddwtos.html',
-    styleUrls: ['ddwtos.scss'],
+    styleUrls: ['../../../../core/features/question/question.scss', 'ddwtos.scss'],
 })
 export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent<AddonModQuizDdwtosQuestionData> implements OnDestroy {
 

src/addons/storagemanager/pages/course-storage/course-storage.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --course-storage-max-activity-height: 120px;

src/addons/userprofilefield/checkbox/component/checkbox.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --text-overflow: initial;

src/core/components/combobox/combobox.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     max-width: 100%;

src/core/components/context-menu/context-menu-popover.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 ion-list {
     padding: 0;

src/core/components/course-image/course-image.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --core-image-radius: var(--core-courseimage-radius);

src/core/components/empty-box/empty-box.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --image-size: 120px;

src/core/components/loading/loading.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 @mixin inline() {
     &:not(.core-loading-loaded) {

src/core/components/mark-required/mark-required.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .core-input-required-asterisk {

src/core/components/message/message.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --message-background: var(--core-messages-message-bg);

src/core/components/mod-icon/mod-icon.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     display: inline-block;

src/core/components/navigation-bar/navigation-bar.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --height: var(--core-navigation-max-height);

src/core/components/progress-bar/progress-bar.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     display: flex;

src/core/components/refresh-button-modal/refresh-button-modal.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     ion-chip {

src/core/components/sheet-modal/sheet-modal.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);

src/core/components/show-password/show-password.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     display: contents;

src/core/components/split-view/split-view.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --menu-min-width: 270px;

src/core/components/tabs/tabs.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --tabs-background: var(--core-tabs-background);

src/core/components/user-avatar/user-avatar.scss

@@ -1,4 +1,4 @@
-@import '~theme/globals.scss';
+@use "theme/globals" as *;
 
 :host {
     position: relative;

src/core/features/block/components/side-blocks-button/side-blocks-button.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     @include position(50%, 0px, null, null);

src/core/features/block/components/side-blocks/side-blocks.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host ::ng-deep core-block {
     @include media-breakpoint-up(md) {

src/core/features/comments/pages/viewer/viewer.scss

@@ -1,5 +1,3 @@
-@import "~theme/components/discussion.scss";
-
 ion-badge {
     margin: 8px auto;
 }

src/core/features/comments/pages/viewer/viewer.ts

@@ -51,7 +51,7 @@ import { CoreAnimations } from '@components/animations';
     selector: 'page-core-comments-viewer',
     templateUrl: 'viewer.html',
     animations: [CoreAnimations.SLIDE_IN_OUT],
-    styleUrls: ['viewer.scss'],
+    styleUrls: ['../../../../../theme/components/discussion.scss', 'viewer.scss'],
 })
 export class CoreCommentsViewerPage implements OnInit, OnDestroy {
 

src/core/features/course/components/course-index/course-index.scss

@@ -1,4 +1,4 @@
-@import '~theme/globals.scss';
+@use "theme/globals" as *;
 core-progress-bar {
     --bar-margin: 8px 0 4px 0;
     --line-height: 20px;

src/core/features/course/components/module-info/course-module-info.scss

@@ -1,4 +1,4 @@
-@import '~theme/globals.scss';
+@use "theme/globals" as *;
 
 :host {
     display: block;

src/core/features/course/components/module-navigation/module-navigation.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --height: var(--core-navigation-max-height);

src/core/features/course/components/module-summary/module-summary.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host ::ng-deep ion-item[collapsible] ion-label {
     margin-top: 12px;

src/core/features/course/components/module/module.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --horizontal-margin: 12px;

src/core/features/course/pages/course-summary/course-summary.scss

@@ -1,4 +1,4 @@
-@import '~theme/globals.scss';
+@use "theme/globals" as *;
 
 :host {
     --thumb-height: 180px;

src/core/features/course/pages/index/index.scss

@@ -1,4 +1,4 @@
-@import '~theme/globals.scss';
+@use "theme/globals" as *;
 
 :host {
     .core-format-progress-list {

src/core/features/course/pages/module-preview/module-preview.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 .core-module-availabilityinfo {
     background: var(--light);

src/core/features/courses/components/course-list-item/course-list-item.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     @for $i from 0 to length($core-course-image-background) {

src/core/features/editor/components/rich-text-editor/rich-text-editor.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 :host {
     --placeholder-color: var(--ion-placeholder-color);
     --toobar-background: var(--white);

src/core/features/grades/pages/course/course.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --header-background: var(--white);

src/core/features/login/components/site-onboarding/site-onboarding.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .core-login-onboarding-step {

src/core/features/login/login.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     ion-content,

src/core/features/login/pages/site/site.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --list-item-max-width: 600px;

src/core/features/mainmenu/components/user-menu/user-menu.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     .core-user-menu-preferences {

src/core/features/mainmenu/pages/menu/menu.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     ion-tabs {

src/core/features/question/question.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host ::ng-deep {
     .core-question-answer-correct {

src/core/features/reminders/components/date/date.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     display: flex;

src/core/features/reportbuilder/components/report-column/report-column.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --rotate-expandable: rotate(180deg);

src/core/features/reportbuilder/components/report-detail/report-detail.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     --header-background: var(--white);

src/core/features/reportbuilder/components/report-summary/report-summary.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 .filters-info {
     padding-bottom: 1rem;

src/core/features/sitehome/pages/index/index.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 ion-item ion-icon {
     display: inline-block;

src/core/features/tag/components/list/list.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals";
+@use "theme/globals" as *;
 
 :host {
     line-height: 1.6;

src/theme/components/discussion.scss

@@ -1,4 +1,4 @@
-@import "~theme/globals.scss";
+@use "theme/globals" as *;
 
 :host-context(.ios) {
     ion-footer .toolbar:last-child {

src/theme/components/format-text.scss

@@ -1,6 +1,6 @@
 /** Format Text - Show more styles. */
 /** Styles of elements inside the directive should be placed in format-text.scss */
-@import "~theme/globals";
+@use "theme/globals.variables" as global;
 
 core-format-text {
     --core-format-text-background: var(--background, var(--ion-item-background));
@@ -42,7 +42,7 @@ core-format-text {
             }
         }
 
-        @if ($core-format-text-never-shorten) {
+        @if (global.$core-format-text-never-shorten) {
             &.collapsible-enabled {
                 --display-toggle: none !important;
                 --collapsible-height: auto !important;
@@ -200,7 +200,7 @@ core-format-text {
 
     .embed-responsive-1by1 {
         &::before {
-            padding-top: percentage(1 / 1);
+            padding-top: percentage(1);
         }
     }
 
@@ -474,7 +474,7 @@ core-rich-text-editor .core-rte-editor {
         font-weight: 400;
     }
 
-    @each $color-name, $unused in $colors {
+    @each $color-name, $unused in global.$colors {
         .alert-#{$color-name} {
             --color-base: var(--#{$color-name});
             color: var(--#{$color-name}-shade);
@@ -504,7 +504,7 @@ core-rich-text-editor .core-rte-editor {
 
         &[disabled] ~ .form-check-label,
         &:disabled ~ .form-check-label {
-            color: $gray-600;
+            color: global.$gray-600;
         }
 
     }
@@ -549,7 +549,7 @@ core-rich-text-editor .core-rte-editor {
     .border-bottom-0 { border-bottom: 0 !important; }
     .border-left-0   { border-left: 0 !important; }
 
-    @each $color-name, $unused in $colors {
+    @each $color-name, $unused in global.$colors {
         .border-#{$color-name} {
             border-color: var(--#{$color-name}) !important;
         }
@@ -633,7 +633,7 @@ core-rich-text-editor .core-rte-editor {
     .font-italic         { font-style: italic !important; }
     .text-white { color: var(--white) !important; }
 
-    @each $color-name, $unused in $colors {
+    @each $color-name, $unused in global.$colors {
         .text-#{$color-name} {
             color: var(--#{$color-name});
         }
@@ -669,7 +669,7 @@ core-rich-text-editor .core-rte-editor {
         background-color: var(--danger);
     }
 
-    @each $color-name, $unused in $colors {
+    @each $color-name, $unused in global.$colors {
         .label-#{$color-name} {
             color: var(--#{$color-name}-contrast);
             background-color: var(--#{$color-name});
@@ -690,7 +690,7 @@ core-rich-text-editor .core-rte-editor {
         }
     }
 
-    @each $color-name, $unused in $colors {
+    @each $color-name, $unused in global.$colors {
         .btn.btn-#{$color-name} {
             --color-base: var(--#{$color-name});
             color: var(--#{$color-name}-shade);

src/theme/theme.scss

@@ -10,26 +10,26 @@
  */
 
 /* Global variables */
-@import "./globals.scss";
+@import "globals.scss";
 
 /* Application styles */
-@import "./theme.light.scss";
+@import "theme.light.scss";
-@import "./theme.dark.scss";
+@import "theme.dark.scss";
-@import "./theme.custom.scss";
+@import "theme.custom.scss";
-@import "./theme.design-system.scss";
+@import "theme.design-system.scss";
-@import "./theme.base.scss";
+@import "theme.base.scss";
 
 /* Components */
-@import "./components/collapsible-header.scss";
+@import "components/collapsible-header.scss";
-@import "./components/collapsible-item.scss";
+@import "components/collapsible-item.scss";
-@import "./components/format-text.scss";
+@import "components/format-text.scss";
-@import "./components/rubrics.scss";
+@import "components/rubrics.scss";
-@import "./components/mod-label.scss";
+@import "components/mod-label.scss";
 @import "../core/components/error-info/error-info.scss";
-@import "./components/videojs.scss";
+@import "components/videojs.scss";
 
 /* Some styles from 3rd party libraries. */
-@import "./bootstrap.scss";
+@import "bootstrap.scss";
 
 /* Core CSS required for Ionic components to work properly */
 @import "~@ionic/angular/css/core.css";
@@ -38,7 +38,7 @@
 @import "~@ionic/angular/css/normalize.css";
 @import "~@ionic/angular/css/structure.css";
 @import "~@ionic/angular/css/typography.css";
-@import '~@ionic/angular/css/display.css';
+@import "~@ionic/angular/css/display.css";
 
 /* Optional CSS utils that can be commented out */
 @import "~@ionic/angular/css/padding.css";