Merge pull request #2767 from crazyserver/MOBILE-3670

Mobile 3670

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

@@ -14,7 +14,7 @@
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
-    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg"
+    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
         [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
      <div class="core-horizontal-scroll">

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html

@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg"
+    <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" inline="true"
         [message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
 
 </core-loading>

src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html

@@ -14,10 +14,10 @@
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
-    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg"
+    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
         [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
-    <div class="core-horizontal-scroll">
+    <div class="core-horizontal-scroll" *ngIf="courses.length > 0">
         <ng-container *ngFor="let course of courses">
             <core-courses-course-progress [course]="course" class="core-block_starredcourses"
                 [showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>

src/addons/block/timeline/components/timeline/addon-block-timeline.html

@@ -51,7 +51,7 @@
                 </ion-col>
             </ion-row>
         </ion-grid>
-        <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg"
+        <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
             [message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
     </core-loading>
 </core-loading>

src/addons/messages/messages-common.scss

@@ -1,6 +1,11 @@
 :host {
     .addon-messages-conversation-item,
     .addon-message-discussion {
+        ion-label {
+            margin-right: 0;
+            margin-left: 0;
+        }
+
         h2 {
             core-format-text {
                 font-weight: bold;
@@ -12,10 +17,18 @@
         }
 
         ion-note {
-            ion-badge {
+            display: flex;
-                margin-left: 6px;
+            flex-direction: column;
-                margin-right: 6px;
+            align-self: flex-start;
-                vertical-align: middle;
+            margin-left: 2px;
+
+            ion-badge, ion-icon {
+                margin-top: 3px;
+                align-self: flex-end;
+            }
+            .addon-message-last-message-date {
+                white-space: nowrap;
+                font-size: 11px;
             }
         }
 

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

@@ -23,6 +23,8 @@
         color: var(--ion-color-primary);
         background-color: transparent;
         margin-top: 6px;
+        margin-left: auto;
+        margin-right: auto;
         ion-icon {
             color: var(--ion-color-primary);
             background-color: transparent;

src/addons/messages/pages/discussions-35/discussions.html

@@ -52,16 +52,22 @@
                 <ng-container *ngIf="!search.showResults">
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
                         [attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
-                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'">
+                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'" detail="false">
                         <core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
                         <ion-label>
-                            <h2>{{ discussion.fullname }}</h2>
+                            <div class="flex-row ion-justify-content-between">
-                            <ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
+                                <h2>{{ discussion.fullname }}</h2>
-                                <span *ngIf="discussion.unread" class="core-primary-circle"></span>
+                                <ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
-                                <span *ngIf="discussion.message!.timecreated > 0">
+                                    <span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
-                                    {{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
+                                        {{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
-                                </span>
+                                    </span>
-                            </ion-note>
+                                    <ion-icon *ngIf="discussion.unread" name="fas-circle" color="primary" aria-hidden="true">
+                                    </ion-icon>
+                                    <span *ngIf="discussion.unread" class="sr-only">
+                                        {{ 'addon.messages.unreadmessages' | translate }}
+                                    </span>
+                                </ion-note>
+                            </div>
                             <p>
                                 <core-format-text clean="true" singleLine="true" [text]="discussion.message!.message"
                                     contextLevel="system" [contextInstanceId]="0">

src/addons/messages/pages/group-conversations/group-conversations.html

@@ -146,7 +146,7 @@
 
 <!-- Template to render a list of conversations. -->
 <ng-template #conversationsTemplate let-conversations="conversations">
-    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button
+    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button detail="false"
         [attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)"
         [attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
             (conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
@@ -162,13 +162,24 @@
             [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
 
         <ion-label>
-            <h2>
+            <div class="flex-row ion-justify-content-between">
-                <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                <h2>
-                <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
+                    <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
-                    [title]="'addon.messages.contactblocked' | translate"></ion-icon>
+                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
-                <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
+                        [title]="'addon.messages.contactblocked' | translate"></ion-icon>
-                    [title]="'addon.messages.mutedconversation' | translate"></ion-icon>
+                    <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
-            </h2>
+                        [title]="'addon.messages.mutedconversation' | translate"></ion-icon>
+                </h2>
+                <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
+                    <span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
+                        {{conversation.lastmessagedate | coreDateDayOrTime}}
+                    </span>
+                    <ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
+                    <span *ngIf="conversation.unreadcount > 0" class="sr-only">
+                        {{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
+                    </span>
+                </ion-note>
+            </div>
             <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
                 [contextInstanceId]="0"></core-format-text></p>
             <p class="addon-message-last-message">
@@ -181,12 +192,5 @@
                     class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
             </p>
         </ion-label>
-        <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount" slot="end">
-            <ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
-            <span *ngIf="conversation.unreadcount > 0" class="sr-only">
-                {{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
-            </span>
-            <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
-        </ion-note>
     </ion-item>
 </ng-template>

src/addons/mod/quiz/pages/review/review.html

@@ -24,7 +24,9 @@
             <ion-card-header class="ion-text-wrap">
                 <ion-card-title>
                     <ng-container *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</ng-container>
-                    <ng-container *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</ng-container>
+                    <ng-container *ngIf="!attempt.preview">
+                        {{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}
+                    </ng-container>
                 </ion-card-title>
             </ion-card-header>
             <ion-list lines="none">

src/addons/remotethemes/services/remotethemes.ts

@@ -43,7 +43,7 @@ export class AddonRemoteThemesProvider {
     protected stylesEls: {[siteId: string]: { element: HTMLStyleElement; hash: string }} = {};
 
     constructor() {
-        this.logger = CoreLogger.getInstance('AddonRemoteThemesProvider');
+        this.logger = CoreLogger.getInstance('AddonRemoteThemes');
     }
 
     /**
@@ -363,6 +363,9 @@ export class AddonRemoteThemesProvider {
             // Adding styles to a style element automatically enables it. Disable it again.
             if (disabled) {
                 this.disableElement(this.stylesEls[siteId].element, true);
+            } else {
+                // Set StatusBar properties.
+                CoreApp.setStatusBarColor();
             }
         }
 

src/core/components/loading/loading.scss

@@ -1,14 +1,13 @@
+@import "~theme/globals";
+
 :host {
     position: static;
-    -webkit-transition: height 200ms ease-in-out;
+    @include core-transition(height, 200ms);
-    transition: height 200ms ease-in-out;
+    --loading-background: rgba(255, 255, 255, 0.26);
 
     > .core-loading-container {
         position: absolute;
-        top: 0;
+        @include position(0, 0, 0, 0);
-        right: 0;
-        left: 0;
-        bottom: 0;
         display: table;
         height: 100%;
         width: 100%;
@@ -17,7 +16,7 @@
         z-index: 3;
         margin: 0;
         padding: 10px 0 0 0;
-        background-color: rgba(255, 255, 255, 0.26);
+        background-color: var(--loading-background);
         -webkit-transition: all 200ms ease-in-out;
         transition: all 200ms ease-in-out;
 
@@ -29,7 +28,7 @@
     }
 
     .core-loading-content {
-        display: inline;
+        display: contents;
         padding-bottom: 1px; /* This makes height be real */
     }
 
@@ -45,8 +44,12 @@
         display: block;
 
         .core-loading-container {
-            margin-top: 10px;
+            padding-top: 20px;
             position: relative;
         }
     }
 }
+
+:host-context(body.dark) {
+    --loading-background: rgba(0, 0, 0, 0.26);
+}

src/core/features/course/components/format/core-course-format.html

@@ -155,7 +155,7 @@
 
 <!-- Template to render a section download button/progress. -->
 <ng-template #sectionDownloadTemplate let-section="section">
-    <div *ngIf="section && downloadEnabled" slot="end">
+    <div *ngIf="section && downloadEnabled" slot="end" class="core-button-spinner core-section-download">
         <!-- Download progress. -->
         <ion-badge class="core-course-download-section-progress"
             *ngIf="section.isDownloading && section.total > 0 && section.count < section.total">

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

@@ -1,8 +1,4 @@
-// ion-app.app-root ion-badge.core-course-download-section-progress {
+@import '~theme/globals.scss';
-//     display: block;
-//     @include float(start);
-//     @include margin(12px, 12px, null, 12px);
-// }
 
 :host {
 
@@ -52,4 +48,14 @@
         }
     }
 
+    .core-section-download.core-button-spinner {
+        display: flex;
+        align-items: center;
+        @include margin-horizontal(10px);
+
+        ion-badge.core-course-download-courses-progress {
+            @include margin(null, 12px, null, null);
+        }
+    }
+
 }

src/core/features/search/components/search-box/search-box.scss

@@ -1,5 +1,5 @@
 :host {
-    height: 80px;
+    height: 73px;
     display: block;
     position: relative;
 
@@ -8,9 +8,11 @@
         left: 0;
         right: 0;
         z-index: 4;
+        margin-top: 10px;
+        margin-bottom: 10px;
     }
 
-    ion-button.button:last-child {
+    ion-button.button {
         margin-left: unset;
         margin-inline-start: 10px;
     }
@@ -28,4 +30,9 @@
     ion-label {
         margin: 0;
     }
+
+    ion-input {
+        --padding-start: 0;
+        --padding-end: 0;
+    }
 }

src/core/services/app.ts

@@ -622,8 +622,16 @@ export class CoreAppProvider {
      */
     setStatusBarColor(color?: string): void {
         if (!color) {
-            // Get the default color to reset it.
+            // Get the default color to change it.
-            color = getComputedStyle(document.documentElement).getPropertyValue('--core-header-toolbar-background').trim();
+            const element = document.querySelector('ion-header ion-toolbar');
+            if (element) {
+                color = getComputedStyle(element).getPropertyValue('--background').trim();
+            } else {
+                // Fallback, it won't always work.
+                color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim();
+            }
+
+            color = CoreColors.getColorHex(color);
         }
 
         // Make darker on Android.
@@ -631,6 +639,8 @@ export class CoreAppProvider {
             color = CoreColors.darker(color);
         }
 
+        this.logger.debug(`Set status bar color ${color}`);
+
         const useLightText = CoreColors.isWhiteContrastingBetter(color);
         const statusBar = StatusBar.instance;
         statusBar.backgroundColorByHexString(color);

src/core/singletons/colors.ts

@@ -45,13 +45,36 @@ export class CoreColors {
     static darker(color: string, percent: number = 10): string {
         percent = 1 - (percent / 100);
         const components = CoreColors.hexToRGB(color);
-        components.red = Math.floor(components.red * percent) ;
+        components.red = Math.floor(components.red * percent);
-        components.green = Math.floor(components.green * percent) ;
+        components.green = Math.floor(components.green * percent);
-        components.blue = Math.floor(components.blue * percent) ;
+        components.blue = Math.floor(components.blue * percent);
 
         return CoreColors.RGBToHex(components);
     }
 
+    /**
+     * Returns the hex code from any color css type (ie named).
+     *
+     * @param color Color in any format.
+     * @returns Color in hex format.
+     */
+    static getColorHex(color: string): string {
+        const d = document.createElement('div');
+        d.style.color = color;
+        document.body.appendChild(d);
+
+        // Color in RGB .
+        const rgba = getComputedStyle(d).color.match(/\d+/g)!.map((a) => parseInt(a, 10));
+
+        const hex = [0,1,2].map(
+            (idx) => this.componentToHex(rgba[idx]),
+        ).join('');
+
+        document.body.removeChild(d);
+
+        return '#'+hex;
+    }
+
     /**
      * Gets the luma of a color.
      *
@@ -109,9 +132,7 @@ export class CoreColors {
      * @return Hexadec of the color component.
      */
     protected static componentToHex(c: number): string {
-        const hex = c.toString(16);
+        return ('0' + c.toString(16)).slice(-2);
-
-        return hex.length == 1 ? '0' + hex : hex;
     }
 
 }

src/theme/globals.mixins.ionic.scss

@@ -287,353 +287,353 @@
 
     // $root: #{&};
     // @at-root [dir] {
-        //   #{$root} {
+    //   #{$root} {
-            //     @content;
+    //     @content;
-            //   }
+    //   }
-            // }
+    // }
-        }
+}
 
-        @mixin rtl() {
+@mixin rtl() {
-            $root: #{&};
+    $root: #{&};
 
-            @at-root [dir=rtl] {
+    @at-root [dir=rtl] {
-                #{$root} {
+        #{$root} {
-                    @content;
-                }
-            }
-        }
-
-        @mixin ltr() {
             @content;
         }
+    }
+}
+
+@mixin ltr() {
+    @content;
+}
 
 
-        // SVG Background Image Mixin
+// SVG Background Image Mixin
-        // @param {string} $svg
+// @param {string} $svg
-        // ----------------------------------------------------------
+// ----------------------------------------------------------
-        @mixin svg-background-image($svg, $flip-rtl: false) {
+@mixin svg-background-image($svg, $flip-rtl: false) {
-            $url: url-encode($svg);
+    $url: url-encode($svg);
-            $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
+    $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
 
-            @if $flip-rtl != true or $viewBox == null {
+    @if $flip-rtl != true or $viewBox == null {
-                @include multi-dir() {
+        @include multi-dir() {
-                    background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+            background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
-                }
-            } @else {
-                $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
-                $flipped-url: $svg;
-                $flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
-                $flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
-                $flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
-                $flipped-url: url-encode($flipped-url);
-
-                @include ltr () {
-                    background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
-                }
-                @include rtl() {
-                    background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
-                }
-            }
         }
+    } @else {
+        $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
+        $flipped-url: $svg;
+        $flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
+        $flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
+        $flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
+        $flipped-url: url-encode($flipped-url);
 
-        // Add property horizontal
+        @include ltr () {
-        // @param {string} $start
+            background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
-        // @param {string} $end
+        }
-        // ----------------------------------------------------------
+        @include rtl() {
-        @mixin property-horizontal($prop, $start, $end: $start) {
+            background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
-            @if $start == 0 and $end == 0 {
+        }
-                #{$prop}-left: $start;
+    }
-                #{$prop}-right: $end;
+}
 
-            } @else {
+// Add property horizontal
-                #{$prop}-left: $start;
+// @param {string} $start
-                #{$prop}-right: $end;
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin property-horizontal($prop, $start, $end: $start) {
+    @if $start == 0 and $end == 0 {
+        #{$prop}-left: $start;
+        #{$prop}-right: $end;
 
-                @at-root {
+    } @else {
-                    @supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
+        #{$prop}-left: $start;
-                        & {
+        #{$prop}-right: $end;
-                            @if $start != null {
-                                #{$prop}-left: unset;
-                            }
-                            @if $end != null {
-                                #{$prop}-right: unset;
-                            }
 
-                            -webkit-#{$prop}-start: $start;
+        @at-root {
-                            #{$prop}-inline-start: $start;
+            @supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
-                            -webkit-#{$prop}-end: $end;
+                & {
-                            #{$prop}-inline-end: $end;
+                    @if $start != null {
-                        }
+                        #{$prop}-left: unset;
                     }
-                }
+                    @if $end != null {
-            }
+                        #{$prop}-right: unset;
-        }
-
-        // Add property for all directions
-        // @param {string} $prop
-        // @param {string} $top
-        // @param {string} $end
-        // @param {string} $bottom
-        // @param {string} $start
-        // @param {boolean} $content include content or use default
-        // ----------------------------------------------------------
-        @mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
-            @include property-horizontal($prop, $start, $end);
-            #{$prop}-top: $top;
-            #{$prop}-bottom: $bottom;
-        }
-
-        // Add padding horizontal
-        // @param {string} $start
-        // @param {string} $end
-        // ----------------------------------------------------------
-        @mixin padding-horizontal($start, $end: $start) {
-            @include property-horizontal(padding, $start, $end);
-        }
-
-        // Add padding for all directions
-        // @param {string} $top
-        // @param {string} $end
-        // @param {string} $bottom
-        // @param {string} $start
-        // ----------------------------------------------------------
-        @mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
-            @include property(padding, $top, $end, $bottom, $start);
-        }
-
-        // Add margin horizontal
-        // @param {string} $start
-        // @param {string} $end
-        // ----------------------------------------------------------
-        @mixin margin-horizontal($start, $end: $start) {
-            @include property-horizontal(margin, $start, $end);
-        }
-
-        // Add margin for all directions
-        // @param {string} $top
-        // @param {string} $end
-        // @param {string} $bottom
-        // @param {string} $start
-        // ----------------------------------------------------------
-        @mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
-            @include property(margin, $top, $end, $bottom, $start);
-        }
-
-        // Add position horizontal
-        // @param {string} $start - amount to position start
-        // @param {string} $end - amount to left: 0; end
-        // ----------------------------------------------------------
-        @mixin position-horizontal($start: null, $end: null) {
-            @if $start == $end {
-                @include multi-dir() {
-                    left: $start;
-                    right: $end;
-                }
-            } @else {
-                @include ltr() {
-                    left: $start;
-                    right: $end;
-                }
-                @include rtl() {
-                    left: unset;
-                    right: unset;
-
-                    left: $end;
-                    right: $start;
-                }
-            }
-        }
-
-        // Add position for all directions
-        // @param {string} $top
-        // @param {string} $end
-        // @param {string} $bottom
-        // @param {string} $start
-        // ----------------------------------------------------------
-        @mixin position($top: null, $end: null, $bottom: null, $start: null) {
-            @include position-horizontal($start, $end);
-            top: $top;
-            bottom: $bottom;
-        }
-
-        // Add border for all directions
-        // @param {string} $top
-        // @param {string} $end
-        // @param {string} $bottom
-        // @param {string} $start
-        // ----------------------------------------------------------
-        @mixin border($top, $end: $top, $bottom: $top, $start: $end) {
-            @include property(border, $top, $end, $bottom, $start);
-        }
-
-        // Add border radius for all directions
-        // @param {string} $top-start
-        // @param {string} $top-end
-        // @param {string} $bottom-end
-        // @param {string} $bottom-start
-        // ----------------------------------------------------------
-        @mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
-            @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
-                @include multi-dir() {
-                    border-radius: $top-start;
-                }
-            } @else {
-                @include ltr() {
-                    border-top-left-radius: $top-start;
-                    border-top-right-radius: $top-end;
-                    border-bottom-right-radius: $bottom-end;
-                    border-bottom-left-radius: $bottom-start;
-                }
-
-                @include rtl() {
-                    border-top-left-radius: $top-end;
-                    border-top-right-radius: $top-start;
-                    border-bottom-right-radius: $bottom-start;
-                    border-bottom-left-radius: $bottom-end;
-                }
-            }
-        }
-
-        // Add direction for all directions
-        // @param {string} $dir - Direction on LTR
-        @mixin direction($dir) {
-            $other-dir: null;
-
-            @if $dir == ltr {
-                $other-dir: rtl;
-            } @else {
-                $other-dir: ltr;
-            }
-
-            @include ltr() {
-                direction: $dir;
-            }
-            @include rtl() {
-                direction: $other-dir;
-            }
-        }
-
-        // Add float for all directions
-        // @param {string} $side
-        // @param {string} $decorator - !important
-        @mixin float($side, $decorator: null) {
-            @if $side == start {
-                @include ltr() {
-                    float: left $decorator;
-                }
-                @include rtl() {
-                    float: right $decorator;
-                }
-            } @else if $side == end {
-                @include ltr() {
-                    float: right $decorator;
-                }
-                @include rtl() {
-                    float: left $decorator;
-                }
-            } @else {
-                @include multi-dir() {
-                    float: $side $decorator;
-                }
-            }
-        }
-
-        @mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
-            @if $horizontal == start or $horizontal == end {
-                $horizontal-ltr: null;
-                $horizontal-rtl: null;
-                @if $horizontal == start {
-                    $horizontal-ltr: left;
-                    $horizontal-rtl: right;
-                } @else {
-                    $horizontal-ltr: right;
-                    $horizontal-rtl: left;
-                }
-
-                @include ltr() {
-                    background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
-                }
-                @include rtl() {
-                    background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
-                }
-            } @else {
-                @include multi-dir() {
-                    background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
-                }
-            }
-        }
-
-        @mixin transform-origin($x-axis, $y-axis: null) {
-            @if $x-axis == start {
-                @include ltr() {
-                    transform-origin: left $y-axis;
-                }
-                @include rtl() {
-                    transform-origin: right $y-axis;
-                }
-            } @else if $x-axis == end {
-                @include ltr() {
-                    transform-origin: right $y-axis;
-                }
-                @include rtl() {
-                    transform-origin: left $y-axis;
-                }
-            } @else if $x-axis == left or $x-axis == right {
-                @include multi-dir() {
-                    transform-origin: $x-axis $y-axis;
-                }
-            } @else {
-                @include ltr() {
-                    transform-origin: $x-axis $y-axis;
-                }
-                @include rtl() {
-                    transform-origin: calc(100% - #{$x-axis}) $y-axis;
-                }
-            }
-        }
-
-        // Add transform for all directions
-        // @param {string} $transforms - comma separated list of transforms
-        @mixin transform($transforms...) {
-            $extra: null;
-
-            $x: null;
-            $ltr-translate: null;
-            $rtl-translate: null;
-
-            @each $transform in $transforms {
-                @if (str-index($transform, translate3d)) {
-                    $transform: str-replace($transform, 'translate3d(');
-                    $transform: str-replace($transform, ')');
-
-                    $coordinates: str-split($transform, ',');
-
-                    $x: nth($coordinates, 1);
-                    $y: nth($coordinates, 2);
-                    $z: nth($coordinates, 3);
-
-                    $ltr-translate: translate3d($x, $y, $z);
-                    $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
-                } @else {
-                    @if $extra == null {
-                        $extra: $transform;
-                    } @else {
-                        $extra: $extra $transform;
                     }
-                }
-            }
 
-            @if $x == '0' or $x == null {
+                    -webkit-#{$prop}-start: $start;
-                @include multi-dir() {
+                    #{$prop}-inline-start: $start;
-                    transform: $ltr-translate $extra;
+                    -webkit-#{$prop}-end: $end;
-                }
+                    #{$prop}-inline-end: $end;
-            } @else {
-                @include ltr() {
-                    transform: $ltr-translate $extra;
-                }
-
-                @include rtl() {
-                    transform: $rtl-translate $extra;
                 }
             }
         }
+    }
+}
+
+// Add property for all directions
+// @param {string} $prop
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// @param {boolean} $content include content or use default
+// ----------------------------------------------------------
+@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
+    @include property-horizontal($prop, $start, $end);
+    #{$prop}-top: $top;
+    #{$prop}-bottom: $bottom;
+}
+
+// Add padding horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin padding-horizontal($start, $end: $start) {
+    @include property-horizontal(padding, $start, $end);
+}
+
+// Add padding for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
+    @include property(padding, $top, $end, $bottom, $start);
+}
+
+// Add margin horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin margin-horizontal($start, $end: $start) {
+    @include property-horizontal(margin, $start, $end);
+}
+
+// Add margin for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
+    @include property(margin, $top, $end, $bottom, $start);
+}
+
+// Add position horizontal
+// @param {string} $start - amount to position start
+// @param {string} $end - amount to left: 0; end
+// ----------------------------------------------------------
+@mixin position-horizontal($start: null, $end: null) {
+    @if $start == $end {
+        @include multi-dir() {
+            left: $start;
+            right: $end;
+        }
+    } @else {
+        @include ltr() {
+            left: $start;
+            right: $end;
+        }
+        @include rtl() {
+            left: unset;
+            right: unset;
+
+            left: $end;
+            right: $start;
+        }
+    }
+}
+
+// Add position for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin position($top: null, $end: null, $bottom: null, $start: null) {
+    @include position-horizontal($start, $end);
+    top: $top;
+    bottom: $bottom;
+}
+
+// Add border for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
+    @include property(border, $top, $end, $bottom, $start);
+}
+
+// Add border radius for all directions
+// @param {string} $top-start
+// @param {string} $top-end
+// @param {string} $bottom-end
+// @param {string} $bottom-start
+// ----------------------------------------------------------
+@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
+    @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
+        @include multi-dir() {
+            border-radius: $top-start;
+        }
+    } @else {
+        @include ltr() {
+            border-top-left-radius: $top-start;
+            border-top-right-radius: $top-end;
+            border-bottom-right-radius: $bottom-end;
+            border-bottom-left-radius: $bottom-start;
+        }
+
+        @include rtl() {
+            border-top-left-radius: $top-end;
+            border-top-right-radius: $top-start;
+            border-bottom-right-radius: $bottom-start;
+            border-bottom-left-radius: $bottom-end;
+        }
+    }
+}
+
+// Add direction for all directions
+// @param {string} $dir - Direction on LTR
+@mixin direction($dir) {
+    $other-dir: null;
+
+    @if $dir == ltr {
+        $other-dir: rtl;
+    } @else {
+        $other-dir: ltr;
+    }
+
+    @include ltr() {
+        direction: $dir;
+    }
+    @include rtl() {
+        direction: $other-dir;
+    }
+}
+
+// Add float for all directions
+// @param {string} $side
+// @param {string} $decorator - !important
+@mixin float($side, $decorator: null) {
+    @if $side == start {
+        @include ltr() {
+            float: left $decorator;
+        }
+        @include rtl() {
+            float: right $decorator;
+        }
+    } @else if $side == end {
+        @include ltr() {
+            float: right $decorator;
+        }
+        @include rtl() {
+            float: left $decorator;
+        }
+    } @else {
+        @include multi-dir() {
+            float: $side $decorator;
+        }
+    }
+}
+
+@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
+    @if $horizontal == start or $horizontal == end {
+        $horizontal-ltr: null;
+        $horizontal-rtl: null;
+        @if $horizontal == start {
+            $horizontal-ltr: left;
+            $horizontal-rtl: right;
+        } @else {
+            $horizontal-ltr: right;
+            $horizontal-rtl: left;
+        }
+
+        @include ltr() {
+            background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
+        }
+        @include rtl() {
+            background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
+        }
+    } @else {
+        @include multi-dir() {
+            background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
+        }
+    }
+}
+
+@mixin transform-origin($x-axis, $y-axis: null) {
+    @if $x-axis == start {
+        @include ltr() {
+            transform-origin: left $y-axis;
+        }
+        @include rtl() {
+            transform-origin: right $y-axis;
+        }
+    } @else if $x-axis == end {
+        @include ltr() {
+            transform-origin: right $y-axis;
+        }
+        @include rtl() {
+            transform-origin: left $y-axis;
+        }
+    } @else if $x-axis == left or $x-axis == right {
+        @include multi-dir() {
+            transform-origin: $x-axis $y-axis;
+        }
+    } @else {
+        @include ltr() {
+            transform-origin: $x-axis $y-axis;
+        }
+        @include rtl() {
+            transform-origin: calc(100% - #{$x-axis}) $y-axis;
+        }
+    }
+}
+
+// Add transform for all directions
+// @param {string} $transforms - comma separated list of transforms
+@mixin transform($transforms...) {
+    $extra: null;
+
+    $x: null;
+    $ltr-translate: null;
+    $rtl-translate: null;
+
+    @each $transform in $transforms {
+        @if (str-index($transform, translate3d)) {
+            $transform: str-replace($transform, 'translate3d(');
+            $transform: str-replace($transform, ')');
+
+            $coordinates: str-split($transform, ',');
+
+            $x: nth($coordinates, 1);
+            $y: nth($coordinates, 2);
+            $z: nth($coordinates, 3);
+
+            $ltr-translate: translate3d($x, $y, $z);
+            $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
+        } @else {
+            @if $extra == null {
+                $extra: $transform;
+            } @else {
+                $extra: $extra $transform;
+            }
+        }
+    }
+
+    @if $x == '0' or $x == null {
+        @include multi-dir() {
+            transform: $ltr-translate $extra;
+        }
+    } @else {
+        @include ltr() {
+            transform: $ltr-translate $extra;
+        }
+
+        @include rtl() {
+            transform: $rtl-translate $extra;
+        }
+    }
+}

src/theme/theme.base.scss

@@ -554,6 +554,13 @@ textarea, button, select, input, a {
     }
 }
 
+ion-loading:focus-visible,
+ion-alert:focus-visible,
+ion-popover:focus-visible,
+ion-modal:focus-visible {
+    box-shadow: none;
+}
+
 ion-input .native-input{
     &:focus, &:focus-visible {
         box-shadow: none;