MOBILE-3103 style: Fix 0 set css vars

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

@@ -6,7 +6,7 @@
     }
 
     .core-course-module-handler {
-        --inner-border-width: 0;
+        --inner-border-width: 0px;
     }
     core-loading {
         --loading-inline-min-height: 102px;

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

@@ -4,7 +4,7 @@
 :host {
     --input-border-color: var(--gray);
     --input-border-width: 1px;
-    --select-border-width: 0;
+    --select-border-width: 0px;
 
     ::ng-deep {
         table {

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

@@ -2,7 +2,7 @@
 
 :host {
     .core-warning-item {
-        --inner-border-width: 0;
+        --inner-border-width: 0px;
     }
 
     .addon-mod_h5pactivity-attempt-result-summary {

src/core/components/loading/loading.scss

@@ -5,7 +5,7 @@
     --loading-background-inline: var(--ion-background-color-rgb);
     --loading-spinner: var(--ion-color-primary);
     --loading-text-color: var(--ion-text-color);
-    --loading-inline-margin: 0;
+    --loading-inline-margin: 0px;
     --loading-inline-min-height: 28px;
     --internal-loading-inline-min-height: var(--loading-inline-min-height);
 
@@ -19,7 +19,7 @@
     }
 
     &.core-loading-loaded {
-        --internal-loading-inline-min-height: 0;
+        --internal-loading-inline-min-height: 0px;
     }
 
     ion-spinner {

src/core/features/course/components/module-completion-legacy/module-completion-legacy.scss

@@ -12,9 +12,9 @@
     }
 
     ion-button {
-        --padding-top: 0;
+        --padding-top: 0px;
-        --padding-start: 0;
+        --padding-start: 0px;
-        --padding-end: 0;
+        --padding-end: 0px;
-        --padding-bottom: 0;
+        --padding-bottom: 0px;
     }
 }

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

@@ -56,7 +56,7 @@
     }
 
     .core-module-main-item.has-module-info {
-        --inner-border-width: 0;
+        --inner-border-width: 0px;
     }
 
     .core-module-module-info ion-label {

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

@@ -32,8 +32,8 @@
     }
 
     ion-input {
-        --padding-start: 0;
+        --padding-start: 0px;
-        --padding-end: 0;
+        --padding-end: 0px;
         padding-left: 0;
         padding-right: 0;
     }

src/theme/components/discussion.scss

@@ -39,8 +39,8 @@
         overflow: visible;
 
         &::part(native) {
-            --inner-border-width: 0;
+            --inner-border-width: 0px;
-            --inner-padding-end: 0;
+            --inner-padding-end: 0px;
             padding: 0;
             margin: 0;
         }

src/theme/theme.base.scss

@@ -375,6 +375,9 @@ ion-list.list-md {
 }
 
 // Header.
+ion-header {
+    z-index: 12; // To hide ion-slides on scroll.
+}
 ion-tabs.hide-header ion-header {
     display: none;
 }
@@ -395,7 +398,7 @@ body.core-iframe-fullscreen ion-router-outlet {
     --core-header-toolbar-height: 48px;
     --core-header-toolbar-color: white;
     --core-header-toolbar-background: black;
-    --core-header-toolbar-border-width: 0;
+    --core-header-toolbar-border-width: 0px;
 
     ion-header ion-toolbar {
         h1, ion-back-button {
@@ -412,8 +415,8 @@ body.core-iframe-fullscreen ion-router-outlet {
 
                 ion-toolbar {
                     height: 100%;
-                    --padding-start: 0;
+                    --padding-start: 0px;
-                    --padding-end: 0;
+                    --padding-end: 0px;
                 }
 
                 ion-buttons {
@@ -474,9 +477,7 @@ body.core-iframe-fullscreen ion-router-outlet {
 // Item styles
 [aria-current="page"],
 .item.item-current {
-    // TODO: Add safe area to border and RTL
+    @include safe-area-border-start(var(--selected-item-border-width), solid,  var(--selected-item-color));
-    --ion-safe-area-left: calc(-1 * var(--selected-item-border-width));
-    border-inline-start: var(--selected-item-border-width) solid var(--selected-item-color);
 }
 
 .item.item-file {
@@ -507,7 +508,7 @@ body.core-iframe-fullscreen ion-router-outlet {
         border-bottom: 3px solid var(--color-base);
 
         ion-item {
-            --inner-border-width: 0;
+            --inner-border-width: 0px;
         }
         ion-label {
             white-space: normal !important;
@@ -522,7 +523,7 @@ body.core-iframe-fullscreen ion-router-outlet {
 
         --border-width: 0 0 3px 0;
         --border-color: var(--color-base);
-        --inner-border-width: 0;
+        --inner-border-width: 0px;
         ion-icon {
             color: var(--color-base);
         }
@@ -568,7 +569,7 @@ img[core-external-content]:not([src]) {
 }
 
 ion-card ion-item:only-child {
-    --inner-border-width: 0;
+    --inner-border-width: 0px;
 }
 
 .core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {
@@ -992,6 +993,11 @@ ion-item.item-input ion-input.has-focus {
     }
 }
 
+// Ionic set this value to 0 without px that provoked miscalculations.
+ion-item-divider {
+    --inner-padding-end: 0px;
+}
+
 // Change default outline.
 :focus-visible {
     @include core-focus-style();

src/theme/theme.light.scss

@@ -246,7 +246,7 @@
     --core-combobox-border-color: var(--primary);
     --core-combobox-border-width: 3px;
     --core-combobox-border-all-width: 0 0 var(--core-combobox-border-width) 0;
-    --core-combobox-radius: 0;
+    --core-combobox-radius: 0px;
     --core-combobox-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
 
     --selected-item-color: var(--primary);