MOBILE-3320 ios: Fixes on tabs and format text styles

src/core/components/tabs/tabs.scss

@@ -1,6 +1,7 @@
 :host {
     --tabs-background: var(--core-tabs-background);
     --tabs-color: var(--color);
+    --height: 56px;
     height: 100%;
     display: block;
 
@@ -12,8 +13,8 @@
     ion-tab-bar.core-tabs-bar {
         position: relative;
         width: 100%;
-        height: auto;
         background: var(--tabs-background);
+        height: var(--height);
         color: var(--tabs-color);
         -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
         filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
@@ -26,7 +27,7 @@
         .tab-slide {
             border-bottom: 2px solid transparent;
             min-width: 100px;
-            min-height: 56px;
+            min-height: var(--height);
             cursor: pointer;
             overflow: hidden;
 
@@ -95,3 +96,8 @@
         }
     }
 }
+
+
+:host-context(.ios) {
+    --height: 53px;
+}

src/core/directives/format-text.ts

@@ -206,20 +206,21 @@ export class CoreFormatTextDirective implements OnChanges {
 
             const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src'));
             const label = Translate.instant('core.openfullimage');
-            const anchor = document.createElement('a');
+            const button = document.createElement('button');
 
-            anchor.classList.add('core-image-viewer-icon');
+            button.classList.add('core-image-viewer-icon');
-            anchor.setAttribute('aria-label', label);
+            button.setAttribute('aria-label', label);
             // Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
-            anchor.innerHTML = '<ion-icon name="fas-search" src="assets/fonts/font-awesome/solid/search.svg"></ion-icon>';
+            button.innerHTML = '<ion-icon name="fas-search" aria-hidden="true" src="assets/fonts/font-awesome/solid/search.svg">\
+            </ion-icon>';
 
-            anchor.addEventListener('click', (e: Event) => {
+            button.addEventListener('click', (e: Event) => {
                 e.preventDefault();
                 e.stopPropagation();
                 CoreDomUtils.viewImage(imgSrc, img.getAttribute('alt'), this.component, this.componentId, true);
             });
 
-            img.parentNode?.appendChild(anchor);
+            img.parentNode?.appendChild(button);
         });
     }
 

src/theme/components/format-text.scss

@@ -2,6 +2,18 @@
 /** Styles of elements inside the directive should be placed in format-text.scss */
 @import "~theme/globals";
 
+:root {
+    --background: var(--background, #{$ion-item-background});
+    --background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background)});
+    --viewer-icon-background: rgba(255, 255, 255, .5);
+}
+
+:root body.dark {
+    --background: var(--background, #{$ion-item-background-dark});
+    --background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background-dark)});
+    --viewer-icon-background: rgba(0, 0, 0, .5);
+}
+
 core-format-text {
     user-select: text;
     word-break: break-word;
@@ -47,20 +59,19 @@ core-format-text {
                     z-index: 7;
                     background-color: var(--background);
                     color: var(--text-color);
-                    padding-left: 10px; // RTL
+                    @include padding(null, null, null, 10px);
+                    margin: 0;
                 }
 
                 &:before {
                     content: '';
                     height: 100%;
                     position: absolute;
-                    right: 0;
+                    @include position(null, 0, 0, 0);
-                    bottom: 0;
+                    background: -moz-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
-                    left: 0;
+                    background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(var(--background-gradient-rgb), 0)), color-stop(calc(100% - 15px), rgba(var(--background-gradient-rgb), 1)));
-                    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
+                    background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
-                    background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(0, 0, 0, 0)), color-stop(calc(100% - 15px), var(--background)));
+                    background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
-                    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
-                    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
                     z-index: 6;
                 }
             }
@@ -70,7 +81,7 @@ core-format-text {
             .core-show-more {
                 @include push-arrow-color(626262, true);
                 @include padding-horizontal(null, 5px);
-                @include background-position(end, 0, center);
+                @include background-position(end, 5px, center);
 
                 background-repeat: no-repeat;
                 background-size: 14px 14px;
@@ -93,18 +104,17 @@ core-format-text {
         @include position(null, 10px, 10px, null);
         color: var(--black);
         border-radius: 5px;
-        background-color: rgba(255, 255, 255, .5);
+        background-color: var(--viewer-icon-background);
-        text-align: center;
+        display: flex;
-        cursor: pointer;
 
-        width: 32px;
+        width: var(--a11y-min-target-size);
-        height: 32px;
+        height: var(--a11y-min-target-size);
-        max-width: 32px;
+        max-width: var(--a11y-min-target-size);
-        line-height: 32px;
         font-size: 24px;
 
         ion-icon {
-            margin-top: 3px;
+            flex: 1;
+            align-self: center;
         }
 
         &:hover {
@@ -112,9 +122,3 @@ core-format-text {
         }
     }
 }
-
-body.dark {
-    core-format-text .core-image-viewer-icon {
-        background-color: rgba(0, 0, 0, .5);
-    }
-}

src/theme/globals.variables.scss

@@ -72,17 +72,17 @@ $text-color-dark:          $white !default;
 $link-color:               $blue !default;
 $link-color-dark:          $blue-light !default;
 $background-color:         $gray-light !default;
-$background-color-dark:    #{$shade-90} !default;
+$background-color-dark:    $shade-90 !default;
 $subdued-text-color:       $gray-darker !default;
 
 $ion-item-background:      $white !default;
-$ion-item-background-dark: #{$shade-80} !default;
+$ion-item-background-dark: $shade-80 !default;
-$ion-item-divider-background: #{$gray-lighter} !default;
+$ion-item-divider-background: $gray-lighter !default;
-$ion-item-divider-color: #{$text-color} !default;
+$ion-item-divider-color: $text-color !default;
-$core-spacer-background: #{$ion-item-divider-background} !default;
+$core-spacer-background: $ion-item-divider-background !default;
-$ion-item-divider-background-dark: #{$shade-75} !default;
+$ion-item-divider-background-dark: $shade-75 !default;
-$ion-item-divider-color-dark: #{$text-color-dark} !default;
+$ion-item-divider-color-dark: $text-color-dark !default;
-$core-spacer-background-dark: #{$shade-100} !default;
+$core-spacer-background-dark: $shade-100 !default;
 
 $core-online-color: #5cb85c !default;
 

src/theme/theme.dark.scss

@@ -7,10 +7,10 @@
 
 :root body.dark {
     --ion-background-color: #{$background-color-dark};
-    --ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
+    --ion-background-color-rgb: #{color-to-rgb-list($background-color-dark)};
 
     --ion-text-color: #{$text-color-dark};
-    --ion-text-color-rgb: color-to-rgb-list(var(--ion-text-color));
+    --ion-text-color-rgb: #{color-to-rgb-list($text-color-dark)};
 
     // Enlighten the ionic shades.
     --ion-color-step-50: #1e1e1e;

src/theme/theme.light.scss

@@ -70,7 +70,7 @@
     --module-icon-size: 24px;
 
     --ion-background-color: #{$background-color};
-    --ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
+    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
 
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: 58,58,58;