MOBILE-4470 styles: Sort more styles into separate files

src/addons/block/myoverview/components/myoverview/myoverview.scss

@@ -1,3 +1,5 @@
+@use "theme/globals" as *;
+
 :host {
     ion-row.addon-block-myoverview-filter {
         margin: 8px;
@@ -39,4 +41,14 @@
             color: var(--subdued-text-color);
         }
     }
+
+    ion-item-divider .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/theme/components/format-text.scss

@@ -70,7 +70,7 @@ core-format-text {
         display: inline-block;
         max-width: 100%;
 
-        .core-image-viewer-icon {
+        button.core-image-viewer-icon {
             position: absolute;
             @include position(null, 10px, 10px, null);
             color: var(--ion-text-color);

src/theme/components/iframe.scss

@@ -0,0 +1,95 @@
+iframe {
+    flex-grow: 1;
+    border: 0;
+    display: block;
+    max-width: 100%;
+    background-color: var(--ion-background-color);
+}
+
+.core-iframe-offline-disabled {
+    display: none !important;
+}
+
+// Iframe fullscreen manage.
+body.core-iframe-fullscreen {
+
+    // Using router outlet to avoid changing styles on modals.
+    ion-router-outlet {
+        .core-course-header,
+        ion-tab-bar {
+            display: none !important;
+        }
+
+        ion-tab-bar.mainmenu-tabs {
+            display: none;
+
+            // Restore original safe area.
+            .tabs-inner {
+                @supports (padding-left: constant(safe-area-inset-left)) {
+                    --ion-safe-area-left: constant(safe-area-inset-left);
+                }
+
+                @supports (padding-left: env(safe-area-inset-left)) {
+                    --ion-safe-area-left: env(safe-area-inset-left);
+                }
+            }
+        }
+
+        .ion-page ion-header {
+            --core-header-toolbar-height: 48px;
+            --core-header-toolbar-color: white;
+            --core-header-toolbar-background: black;
+            --core-header-buttons-background: var(--core-header-toolbar-background);
+            --core-header-buttons-color: var(--core-header-toolbar-color);
+            --core-header-toolbar-border-width: 0px;
+
+            ion-toolbar {
+                h1, ion-back-button {
+                    display: none;
+                }
+            }
+        }
+
+        @media screen and (orientation: landscape) {
+            // Place ion-header on the side and hide text
+            .ion-page {
+                flex-direction: row-reverse;
+                ion-header {
+                    width: calc(var(--core-header-toolbar-height) + var(--ion-safe-area-right));
+                    @include safe-area-padding-horizontal(null, 0px);
+                    background: var(--core-header-toolbar-background);
+
+                    ion-toolbar {
+                        padding: 0;
+                        height: 100%;
+                        --padding-start: 0px;
+                        --padding-end: 0px;
+                    }
+
+                    ion-buttons {
+                        flex-direction: column-reverse;
+                    }
+                }
+            }
+
+            core-tabs-outlet {
+                width: 100%;
+            }
+        }
+    }
+
+    // Hide cards and items with colors on fullscreen iframes.
+    @each $color-name, $unused in $colors {
+        ion-card.core-#{$color-name}-card,
+        .item.core-#{$color-name}-item {
+            opacity: 0 !important;
+            height: 0 !important;
+        }
+    }
+
+    // Hide collapsible footer on fullscreen iframes.
+    [collapsible-footer] {
+        opacity: 0 !important;
+        height: 0 !important;
+    }
+}

src/theme/components/ion-avatar.scss

@@ -0,0 +1,27 @@
+
+// Avatar
+// -------------------------
+// Large centered avatar
+img.large-avatar,
+.large-avatar img {
+    display: block;
+    margin: 8px auto;
+    width: var(--core-large-avatar-size);
+    height: var(--core-large-avatar-size);
+    max-width: var(--core-large-avatar-size);
+    max-height: var(--core-large-avatar-size);
+    border-radius: 50%;
+    background-color: transparent;
+}
+
+ion-avatar {
+    &.large-avatar {
+        width: var(--core-large-avatar-size);
+        height: var(--core-large-avatar-size);
+    }
+
+    img {
+        text-indent: -99999px;
+        background-color: var(--gray-200);
+    }
+}

src/theme/components/ion-badge.scss

@@ -0,0 +1,5 @@
+ion-badge {
+    line-height: 1.1;
+    padding: 2px 8px;
+    border-radius: var(--mdl-shape-borderRadius-lg);
+}

src/theme/components/ion-card.scss

@@ -42,4 +42,41 @@ ion-card {
             }
         }
     }
+
+    // Coloured cards.
+    @each $color-name, $unused in $colors {
+        &.core-#{$color-name}-card {
+            --color-tint: var(--ion-color-#{$color-name}-tint);
+            --color-shade: var(--ion-color-#{$color-name}-shade);
+            --border-width: 0;
+
+            --border-color: var(--color-tint);
+            --border-radius: var(--mdl-shape-borderRadius-sm);
+            --background: var(--color-tint);
+            --color: var(--color-shade);
+
+            ion-item.item {
+                --background: var(--color-tint);
+                --color: var(--color-shade);
+                --inner-border-width: 0px;
+                --border-width: 0px;
+                font-size: var(--text-size);
+
+                &.item-label > ion-label,
+                &.item-label > ion-label > p {
+                    --color: var(--color-shade);
+                }
+
+                > ion-icon[slot] {
+                    color: var(--color-shade);
+                    @include margin-horizontal(null, 16px);
+                }
+            }
+
+            ion-label {
+                white-space: normal !important;
+            }
+        }
+    }
+
 }

src/theme/components/ion-icon.scss

@@ -19,6 +19,14 @@ ion-icon {
         -webkit-transform: scale(-1, 1);
         transform: scale(-1, 1);
     }
+
+    // Coloured icons.
+    @each $color-name, $unused in $colors {
+        &.ion-color-#{$color-name} {
+            --ion-color-base: var(--ion-color-#{$color-name});
+            color: var(--ion-color-base);
+        }
+    }
 }
 
 // The following code is part of the Fontawesome css file that can be found

src/theme/components/ion-item.scss

@@ -232,3 +232,21 @@ ion-item.item.item-file {
         --background: var(--light);
     }
 }
+
+// Coloured items.
+@each $color-name, $unused in $colors {
+
+    ion-item.item.core-#{$color-name}-item,
+    .item.core-#{$color-name}-item {
+        --color-base: var(--ion-color-#{$color-name});
+        --color-shade: var(--ion-color-#{$color-name}-shade);
+
+        --border-width: 0 0 3px 0;
+        --border-color: var(--color-base);
+        --inner-border-width: 0px;
+
+        > ion-icon[slot] {
+            color: var(--color-base);
+        }
+    }
+}

src/theme/components/table.scss

@@ -0,0 +1,82 @@
+
+// Table App styles
+table.core-table {
+    border-collapse: collapse;
+    line-height: 20px;
+    width: 98%;
+    margin: 1em auto;
+    color: var(--text-color);
+
+    thead th {
+        vertical-align: bottom;
+        font-weight: bold;
+        font-size: var(--mdl-typography-body-fontSize-md);
+        background-color: var(--core-table-header-background);
+    }
+
+    tbody {
+        th {
+            font-weight: normal;
+        }
+        td {
+            font-size: var(--mdl-typography-body-fontSize-lg);
+        }
+    }
+
+    th, td {
+        padding: 8px;
+        white-space: normal;
+        text-align: start;
+    }
+
+    tr {
+        border-bottom: 1px solid var(--core-table-border-color);
+    }
+
+    .odd {
+        --cell-background: var(--core-table-odd-cell-background);
+        --cell-hover: var(--core-table-odd-cell-hover);
+    }
+
+    .even {
+        --cell-background: var(--core-table-even-cell-background);
+        --cell-hover: var(--core-table-even-cell-hover);
+    }
+
+    .odd, .even {
+        td, th, th[aria-current="page"] {
+            background-color: var(--cell-background);
+
+            &:hover {
+                background-color: var(--cell-hover);
+            }
+        }
+    }
+
+    tbody.auto-striped {
+        tr:nth-child(odd) {
+            background-color: var(--core-table-odd-cell-background);
+
+            &:hover {
+                background-color: var(--core-table-even-odd-hover);
+            }
+        }
+
+        tr:nth-child(even) {
+            background-color: var(--core-table-even-cell-background);
+
+            &:hover {
+                background-color: var(--core-table-even-cell-hover);
+            }
+        }
+    }
+
+    .ion-no-border {
+        border: 0 !important;
+    }
+
+    .dimmed_text,
+    .hidden {
+        opacity: .7;
+    }
+}

src/theme/theme.base.scss

@@ -161,73 +161,6 @@ core-split-view.menu-and-content {
     }
 }
 
-// Iframe fullscreen manage.
-// Using router outlet to avoid changing styles on modals.
-body.core-iframe-fullscreen ion-router-outlet {
-
-    .core-course-header,
-    ion-tab-bar {
-        display: none !important;
-    }
-
-    ion-tab-bar.mainmenu-tabs {
-        display: none;
-
-        // Restore original safe area.
-        .tabs-inner {
-            @supports (padding-left: constant(safe-area-inset-left)) {
-                --ion-safe-area-left: constant(safe-area-inset-left);
-            }
-
-            @supports (padding-left: env(safe-area-inset-left)) {
-                --ion-safe-area-left: env(safe-area-inset-left);
-            }
-        }
-    }
-
-    .ion-page ion-header {
-        --core-header-toolbar-height: 48px;
-        --core-header-toolbar-color: white;
-        --core-header-toolbar-background: black;
-        --core-header-buttons-background: var(--core-header-toolbar-background);
-        --core-header-buttons-color: var(--core-header-toolbar-color);
-        --core-header-toolbar-border-width: 0px;
-
-        ion-toolbar {
-            h1, ion-back-button {
-                display: none;
-            }
-        }
-    }
-
-    @media screen and (orientation: landscape) {
-        // Place ion-header on the side and hide text
-        .ion-page {
-            flex-direction: row-reverse;
-            ion-header {
-                width: calc(var(--core-header-toolbar-height) + var(--ion-safe-area-right));
-                @include safe-area-padding-horizontal(null, 0px);
-                background: var(--core-header-toolbar-background);
-
-                ion-toolbar {
-                    padding: 0;
-                    height: 100%;
-                    --padding-start: 0px;
-                    --padding-end: 0px;
-                }
-
-                ion-buttons {
-                    flex-direction: column-reverse;
-                }
-            }
-        }
-
-        core-tabs-outlet {
-            width: 100%;
-        }
-    }
-}
-
 // Hidden submit button.
 .core-submit-hidden-enter {
     position: absolute;
@@ -262,105 +195,6 @@ body.core-iframe-fullscreen ion-router-outlet {
     color: var(--gray-500);
 }
 
-// Card styles
-@each $color-name, $unused in $colors {
-
-    // Message cards.
-    ion-card.core-#{$color-name}-card {
-        --color-tint: var(--ion-color-#{$color-name}-tint);
-        --color-shade: var(--ion-color-#{$color-name}-shade);
-        --border-width: 0;
-
-        --border-color: var(--color-tint);
-        --border-radius: var(--mdl-shape-borderRadius-sm);
-        --background: var(--color-tint);
-        --color: var(--color-shade);
-
-        ion-item.item {
-            --background: var(--color-tint);
-            --color: var(--color-shade);
-            --inner-border-width: 0px;
-            --border-width: 0px;
-            font-size: var(--text-size);
-
-            &.item-label > ion-label,
-            &.item-label > ion-label > p {
-                --color: var(--color-shade);
-            }
-
-            > ion-icon[slot] {
-                color: var(--color-shade);
-                @include margin-horizontal(null, 16px);
-            }
-        }
-
-        ion-label {
-            white-space: normal !important;
-        }
-    }
-
-    ion-item.item.core-#{$color-name}-item {
-        --color-base: var(--ion-color-#{$color-name});
-        --color-shade: var(--ion-color-#{$color-name}-shade);
-
-        --border-width: 0 0 3px 0;
-        --border-color: var(--color-base);
-        --inner-border-width: 0px;
-
-        > ion-icon[slot] {
-            color: var(--color-base);
-        }
-    }
-
-    .item.core-#{$color-name}-item {
-        --color-base: var(--ion-color-#{$color-name});
-        --color-shade: var(--ion-color-#{$color-name}-shade);
-
-        --border-width: 0 0 3px 0;
-        --border-color: var(--color-base);
-        --inner-border-width: 0px;
-        > ion-icon[slot] {
-            color: var(--color-base);
-        }
-    }
-
-    .core-iframe-fullscreen ion-card.core-#{$color-name}-card,
-    .core-iframe-fullscreen .item.core-#{$color-name}-item {
-        opacity: 0 !important;
-        height: 0 !important;
-    }
-
-    ion-icon.ion-color-#{$color-name} {
-        --ion-color-base: var(--ion-color-#{$color-name});
-        color: var(--ion-color-base);
-    }
-}
-
-// Avatar
-// -------------------------
-// Large centered avatar
-img.large-avatar,
-.large-avatar img {
-    display: block;
-    margin: 8px auto;
-    width: var(--core-large-avatar-size);
-    height: var(--core-large-avatar-size);
-    max-width: var(--core-large-avatar-size);
-    max-height: var(--core-large-avatar-size);
-    border-radius: 50%;
-    background-color: transparent;
-}
-
-ion-avatar.large-avatar {
-    width: var(--core-large-avatar-size);
-    height: var(--core-large-avatar-size);
-}
-
-ion-avatar ion-img, ion-avatar img {
-    text-indent: -99999px;
-    background-color: var(--gray-200);
-}
-
 // Wait to load before showing the image.
 img[core-external-content]:not([src]) {
     visibility: hidden;
@@ -398,27 +232,12 @@ ion-content.limited-width > :not([slot]) {
     min-height: 100%;
 }
 
-ion-badge {
-    line-height: 1.1;
-    padding: 2px 8px;
-    border-radius: var(--mdl-shape-borderRadius-lg);
-}
-
 .core-anchor, core-format-text a {
     color: var(--core-link-color);
     cursor: pointer;
     text-decoration: underline;
 }
 
-core-block ion-item-divider .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);
-    }
-}
 
 // Horizontal scrolling elements
 .core-horizontal-scroll {
@@ -443,10 +262,6 @@ mark, .matchtext {
     font-family: var(--mdl-typography-monospace-font);
 }
 
-.core-iframe-offline-disabled {
-    display: none !important;
-}
-
 .core-scanning-qr {
     .ion-page, ion-modal::part(content) {
         background-color: transparent !important;
@@ -538,14 +353,6 @@ ion-content.disable-scroll-y::part(scroll) {
     will-change: auto;
 }
 
-iframe {
-    flex-grow: 1;
-    border: 0;
-    display: block;
-    max-width: 100%;
-    background-color: var(--ion-background-color);
-}
-
 @if ($core-login-hide-need-help) {
     .core-login-need-help {
         display: none !important;
@@ -556,17 +363,11 @@ ion-grid.core-no-grid > ion-row {
     display: block;
 }
 
-.core-underheader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-}
-
 .core-footer-shadow [collapsible-footer] {
     box-shadow: var(--drop-shadow-top, none);
     clip-path: inset(-8px 0px 0px 0px); // Only show shadow at top.
 }
+
 [collapsible-footer] {
     transition: box-shadow 0.5s;
     width: 100%;
@@ -611,11 +412,6 @@ ion-grid.core-no-grid > ion-row {
     }
 }
 
-.core-iframe-fullscreen [collapsible-footer] {
-    opacity: 0 !important;
-    height: 0 !important;
-}
-
 @include media-breakpoint-up(md) {
     .adaptable-buttons-row,
     .adaptable-buttons-row-reverse {
@@ -701,85 +497,3 @@ video::-webkit-media-text-track-display {
     overflow-x: auto;
     display: block;
 }
-
-// Table App styles
-table.core-table {
-    border-collapse: collapse;
-    line-height: 20px;
-    width: 98%;
-    margin: 1em auto;
-    color: var(--text-color);
-
-    thead th {
-        vertical-align: bottom;
-        font-weight: bold;
-        font-size: var(--mdl-typography-body-fontSize-md);
-        background-color: var(--core-table-header-background);
-    }
-
-    tbody {
-        th {
-            font-weight: normal;
-        }
-        td {
-            font-size: var(--mdl-typography-body-fontSize-lg);
-        }
-    }
-
-    th, td {
-        padding: 8px;
-        white-space: normal;
-        text-align: start;
-    }
-
-    tr {
-        border-bottom: 1px solid var(--core-table-border-color);
-    }
-
-    .odd {
-        --cell-background: var(--core-table-odd-cell-background);
-        --cell-hover: var(--core-table-odd-cell-hover);
-    }
-
-    .even {
-        --cell-background: var(--core-table-even-cell-background);
-        --cell-hover: var(--core-table-even-cell-hover);
-    }
-
-    .odd, .even {
-        td, th, th[aria-current="page"] {
-            background-color: var(--cell-background);
-
-            &:hover {
-                background-color: var(--cell-hover);
-            }
-        }
-    }
-
-    tbody.auto-striped {
-        tr:nth-child(odd) {
-            background-color: var(--core-table-odd-cell-background);
-
-            &:hover {
-                background-color: var(--core-table-even-odd-hover);
-            }
-        }
-
-        tr:nth-child(even) {
-            background-color: var(--core-table-even-cell-background);
-
-            &:hover {
-                background-color: var(--core-table-even-cell-hover);
-            }
-        }
-    }
-
-    .ion-no-border {
-        border: 0 !important;
-    }
-
-    .dimmed_text,
-    .hidden {
-        opacity: .7;
-    }
-}

src/theme/theme.scss

@@ -22,8 +22,10 @@
 @import "components/collapsible-item.scss";
 @import "components/error-accordion.scss";
 @import "components/format-text.scss";
+@import "components/iframe.scss";
 @import "components/mod-label.scss";
 @import "components/rubrics.scss";
+@import "components/table.scss";
 @import "components/videojs.scss";
 
 /* Ionic components overrides */
@@ -31,7 +33,9 @@ html {
     @import "components/ion-accordion.scss";
     @import "components/ion-action-sheet.scss";
     @import "components/ion-alert.scss";
+    @import "components/ion-avatar.scss";
     @import "components/ion-back-button.scss";
+    @import "components/ion-badge.scss";
     @import "components/ion-button.scss";
     @import "components/ion-card.scss";
     @import "components/ion-checkbox.scss";