MOBILE-2567 ux: Fix RTL css ranking

src/addon/calendar/pages/event/event.scss

@@ -1,3 +0,0 @@
-page-addon-calendar-event {
-
-}

src/addon/calendar/pages/list/list.scss

@@ -1,3 +0,0 @@
-page-addon-calendar-list {
-
-}

src/addon/calendar/pages/settings/settings.scss

@@ -1,3 +0,0 @@
-page-addon-calendar-settings {
-
-}

src/addon/messages/components/contacts/contacts.scss

@@ -1,4 +1,4 @@
-addon-messages-discussions {
+ion-app.app-root addon-messages-discussions {
     h2 {
         display: flex;
         justify-content: space-between;

src/addon/messages/components/discussions/discussions.scss

@@ -1,4 +1,4 @@
-addon-messages-discussions {
+ion-app.app-root addon-messages-discussions {
     h2 {
         display: flex;
         justify-content: space-between;
@@ -7,6 +7,7 @@ addon-messages-discussions {
             margin: 0;
             align-self: flex-end;
             display: inline-flex;
+            font-size: initial;
         }
     }
 }

src/addon/messages/pages/discussion/discussion.scss

@@ -4,8 +4,7 @@ $item-message-note-text: $gray-dark !default;
 $item-message-note-font-size: 75% !default;
 $item-message-mine-bg: $blue-light !default;
 
-
+ion-app.app-root page-addon-messages-discussion {
-page-addon-messages-discussion {
     .addon-messages-discussion-container {
         display: flex;
         flex-direction: column;
@@ -104,3 +103,8 @@ page-addon-messages-discussion {
         padding: 0;
     }
 }
+
+ion-app.app-root.ios page-addon-messages-discussion ion-footer .toolbar:last-child {
+    padding-bottom: 4px;
+    min-height: 0;
+}

src/addon/messages/pages/settings/settings.scss

@@ -1,4 +1,4 @@
-page-addon-messages-settings {
+ion-app.app-root page-addon-messages-settings {
     .list-header {
         margin-bottom: 0;
         border-top: 0;

src/addon/mod/assign/components/submission/submission.scss

@@ -1,4 +1,4 @@
-addon-mod-assign-submission {
+ion-app.app-root addon-mod-assign-submission {
     div.latesubmission,
     div.overdue {
         // @extend .core-danger-item;

src/addon/mod/chat/pages/chat/chat.scss

@@ -1,4 +1,4 @@
-page-addon-mod-chat-chat {
+ion-app.app-root page-addon-mod-chat-chat {
     .addon-mod-chat-notice {
         margin-top: 10px;
         margin-bottom: 10px;

src/addon/mod/chat/pages/users/users.scss

@@ -1,4 +1,4 @@
-page-addon-mod-chat-users {
+ion-app.app-root page-addon-mod-chat-users {
     .addon-mod-chat-user ion-label {
         margin-bottom: 0;
     }

src/addon/mod/feedback/pages/form/form.scss

@@ -1,4 +1,4 @@
-page-addon-mod-feedback-form {
+ion-app.app-root page-addon-mod-feedback-form {
     .addon-mod_feedback-form-content {
         align-self: self-start;
         width: 100%;

src/addon/mod/folder/components/index/index.scss

@@ -1,4 +1,4 @@
-addon-mod-folder-index {
+ion-app.app-root addon-mod-folder-index {
     .item-media > img:first-child {
         width: 24px;
         height: 24px;

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

@@ -1,4 +1,4 @@
-addon-mod-forum-index {
+ion-app.app-root addon-mod-forum-index {
     .addon-forum-discussion-selected {
         border-top: 5px solid $core-splitview-selected;
     }

src/addon/mod/imscp/components/index/index.scss

@@ -1,4 +1,4 @@
-addon-mod-imscp-index {
+ion-app.app-root addon-mod-imscp-index {
     .addon-mod-imscp-container {
         position: absolute;
         width: 100%;

src/addon/mod/lesson/components/index/index.scss

@@ -1,2 +0,0 @@
-addon-mod-lesson-index {
-}

src/addon/mod/lesson/pages/menu-modal/menu-modal.scss

@@ -1,4 +1,4 @@
-page-addon-mod-lesson-menu-modal {
+ion-app.app-root page-addon-mod-lesson-menu-modal {
     .addon-mod_lesson-selected, .item.addon-mod_lesson-selected {
         background: $blue-light;
     }

src/addon/mod/lesson/pages/player/player.scss

@@ -1,4 +1,4 @@
-page-addon-mod-lesson-player {
+ion-app.app-root page-addon-mod-lesson-player {
     .addon-mod_lesson-slideshow {
         max-width: 100%;
         max-height: 100%;

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

@@ -1,4 +1,4 @@
-page-addon-mod-lesson-user-retake {
+ion-app.app-root page-addon-mod-lesson-user-retake {
     .addon-mod_lesson-highlight {
         background: $blue-light;
         .label, .label p {

src/addon/mod/quiz/components/connection-error/connection-error.scss

@@ -1,4 +1,4 @@
-addon-mod-quiz-connection-error {
+ion-app.app-root addon-mod-quiz-connection-error {
     background-color: $red-light;
 
     .item {

src/addon/mod/quiz/components/index/index.scss

@@ -1,4 +1,4 @@
-addon-mod-quiz-index {
+ion-app.app-root addon-mod-quiz-index {
 
     .addon-mod_quiz-table {
         .addon-mod_quiz-table-header .item-inner {

src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss

@@ -1,4 +1,4 @@
-page-addon-mod-quiz-navigation-modal {
+ion-app.app-root page-addon-mod-quiz-navigation-modal {
     .addon-mod_quiz-selected, .item.addon-mod_quiz-selected {
         @include border-start(5px, solid, $core-splitview-selected);
         font-weight: bold;

src/addon/mod/quiz/pages/player/player.scss

@@ -1,4 +1,4 @@
-page-addon-mod-quiz-player {
+ion-app.app-root page-addon-mod-quiz-player {
     .toolbar {
         padding-top: 0;
         padding-bottom: 0;

src/addon/mod/quiz/pages/review/review.scss

@@ -1,4 +1,4 @@
-page-addon-mod-quiz-review {
+ion-app.app-root page-addon-mod-quiz-review {
     .item-radio-disabled,
     .item-checkbox-disabled,
     .text-input[disabled] {

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

@@ -1,4 +1,4 @@
-addon-mod-scorm-index {
+ion-app.app-root addon-mod-scorm-index {
 
     .addon-mod_scorm-toc {
         img {

src/addon/mod/scorm/components/toc-popover/toc-popover.scss

@@ -1,3 +0,0 @@
-addon-mod-scorm-toc-popover {
-
-}

src/addon/mod/survey/components/index/index.scss

@@ -1,4 +1,4 @@
-addon-mod-survey-index {
+ion-app.app-root addon-mod-survey-index {
 
   .label, .label[stacked] {
     font-size: initial;

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

@@ -4,7 +4,7 @@ $addon-mod-wiki-toc-title-color:      $gray-darker !default;
 $addon-mod-wiki-toc-border-color:     $gray-dark !default;
 $addon-mod-wiki-toc-background-color: $gray-light !default;
 
-addon-mod-wiki-index {
+ion-app.app-root addon-mod-wiki-index {
     background-color: $white;
 
     .core-tabs-content-container,

src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss

@@ -1,4 +1,4 @@
-addon-mod-wiki-subwiki-picker {
+ion-app.app-root addon-mod-wiki-subwiki-picker {
 
     $core-subwiki-selected: $core-color !default;
 

src/addon/mod/wiki/pages/edit/edit.scss

@@ -1,4 +1,4 @@
-page-addon-mod-wiki-edit {
+ion-app.app-root page-addon-mod-wiki-edit {
     .addon-mod_wiki-wrongversionlock .label {
         margin: 0;
     }

src/addon/mod/workshop/components/assessment/assessment.scss

@@ -1,4 +1,4 @@
-addon-mod-workshop-assessment {
+ion-app.app-root addon-mod-workshop-assessment {
     .item-md.item-block .item-inner {
       border-bottom: 1px solid $list-md-border-color;
     }
@@ -16,7 +16,7 @@ addon-mod-workshop-assessment {
     }
 }
 
-.card.with-borders addon-mod-workshop-assessment {
+ion-app.app-root .card.with-borders addon-mod-workshop-assessment {
     .item-md.item-block .item-inner {
       border-bottom: 1px solid $list-md-border-color;
     }

src/addon/mod/workshop/components/submission/submission.scss

@@ -1,4 +1,4 @@
-addon-mod-workshop-submission {
+ion-app.app-root addon-mod-workshop-submission {
     .item-md.item-block .item-inner {
       border-bottom: 1px solid $list-md-border-color;
     }
@@ -16,7 +16,7 @@ addon-mod-workshop-submission {
     }
 }
 
-.card.with-borders addon-mod-workshop-submission {
+ion-app.app-root .card.with-borders addon-mod-workshop-submission {
     .item-md.item-block .item-inner {
       border-bottom: 1px solid $list-md-border-color;
     }

src/addon/mod/workshop/pages/phase/phase.scss

@@ -1,4 +1,4 @@
-page-addon-mod-workshop-phase-info {
+ion-app.app-root page-addon-mod-workshop-phase-info {
     .core-workshop-phase-selected {
         background-color: $white;
         @include border-start(5px, solid, $core-splitview-selected);

src/addon/notifications/pages/settings/settings.scss

@@ -1,4 +1,4 @@
-page-addon-notifications-settings {
+ion-app.app-root page-addon-notifications-settings {
     .list-header {
         margin-bottom: 0;
         border-top: 0;

src/app/app.ios.scss

@@ -1,4 +1,4 @@
-
+ion-app.app-root.ios {
   .button-ios {
     min-height: $button-ios-height
   }
@@ -21,8 +21,9 @@
     @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
   }
 
+
   @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-  .ios .core-#{$color-name}-card {
+    .core-#{$color-name}-card {
       @extend .card-ios ;
       @extend .card-content-ios;
 
@@ -36,19 +37,24 @@
     }
   }
 
-.ios .core-avoid-header ion-content {
+  .core-avoid-header ion-content {
       top: $navbar-ios-height;
       height: calc(100% - #{($navbar-ios-height)});
   }
 
-.platform-cordova.ios .core-avoid-header ion-content.statusbar-padding,
+  &.platform-cordova .core-avoid-header ion-content.statusbar-padding,
-.platform-cordova.ios .core-avoid-header .menu-inner > ion-content {
+  &.platform-cordova .core-avoid-header .menu-inner > ion-content {
-    top: $navbar-ios-height + $cordova-ios-statusbar-padding;
       height: calc(100% - #{($navbar-ios-height + $cordova-ios-statusbar-padding)});
+      height: calc(100% - #{($navbar-ios-height)} - constant(safe-area-inset-top));
+      height: calc(100% - #{($navbar-ios-height)} - env(safe-area-inset-top));
+
+      top: calc(#{$navbar-ios-height + $cordova-ios-statusbar-padding});
+      top: calc(#{$navbar-ios-height} + constant(safe-area-inset-top));
+      top: calc(#{$navbar-ios-height} + env(safe-area-inset-top));
   }
 
-.platform-cordova.ios .core-avoid-header .core-avoid-header .menu-inner > ion-content,
+  &.platform-cordova .core-avoid-header .core-avoid-header .menu-inner > ion-content,
-.platform-cordova.ios core-tab core-split-view .core-avoid-header .menu-inner > ion-content {
+  core-tab core-split-view .core-avoid-header .menu-inner > ion-content {
       top: 0;
       height: 100%;
   }
@@ -120,7 +126,7 @@
 
   // Different levels of padding.
   @for $i from 0 through 15 {
-  .ios .core-padding-#{$i} {
+    .core-padding-#{$i} {
       @include padding(null, null, null, 15px * $i + $item-ios-padding-start);
     }
   }
@@ -132,3 +138,4 @@
   .card-ios.with-borders .item-ios:last-child .item-inner {
     border-bottom: 0;
   }
+}

src/app/app.md.scss

@@ -1,4 +1,4 @@
-
+ion-app.app-root.md {
   .button-md {
     min-height: $button-md-height;
   }
@@ -22,7 +22,7 @@
   }
 
   @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-  .md .core-#{$color-name}-card {
+    .core-#{$color-name}-card {
       @extend .card-md;
       @extend .card-content-md;
 
@@ -36,7 +36,7 @@
     }
   }
 
-.md .core-avoid-header ion-content {
+  .core-avoid-header ion-content {
       top: $navbar-md-height;
       height: calc(100% - #{($navbar-md-height)});
   }
@@ -108,12 +108,11 @@
 
   // Different levels of padding.
   @for $i from 0 through 15 {
-  .md .core-padding-#{$i} {
+    .core-padding-#{$i} {
       @include padding(null, null, null, 15px * $i + $item-md-padding-start);
     }
   }
 
-
   // Recover borders on items inside cards.
   .card-md.with-borders .item-md.item-block .item-inner {
     border-bottom: 1px solid $list-md-border-color;
@@ -121,3 +120,4 @@
   .card-md.with-borders .item-md:last-child .item-inner {
     border-bottom: 0;
   }
+}

src/app/app.scss

@@ -18,6 +18,7 @@
 // Alignment
 // -------------------------
 
+ion-app.app-root {
   .text-left           { text-align: left; }
   .text-right          { text-align: right; }
   .text-center         { text-align: center; }
@@ -42,11 +43,6 @@
     text-transform: none;
   }
 
-[dir="ltr"] body, [dir="rtl"] body {
-    padding-top: constant(safe-area-inset-top); //for iOS 11.2
-    padding-top: env(safe-area-inset-top); //for iOS 11.1
-}
-
   @include media-breakpoint-up(sm) {
     .core-center-view .scroll-content {
       display: flex!important;
@@ -94,8 +90,6 @@
     }
   }
 
-
-
   // Define an alternative way to set a heading in an item without using a heading tag.
   // This is done for accessibility reasons when a heading is semantically incorrect.
   .item .item-heading {
@@ -417,7 +411,6 @@ ion-col ion-select {
       }
   }
 
-
   :not(.item) > * > * > ion-select,
   .core-button-select {
     background-color: white;
@@ -467,7 +460,6 @@ ion-col ion-select {
 
   // File uploader.
   // -------------------------
-
   .core-fileuploader-file-handler {
       position: relative;
 
@@ -891,16 +883,6 @@ ion-alert.core-inapp-notification {
     }
   }
 
-body.keyboard-is-open {
-    .scroll-content, .fixed-content {
-        margin-bottom: 0 !important;
-    }
-
-    core-ion-tabs .tabbar {
-        display: none;
-    }
-}
-
   .item.item-radio, .item.item-checkbox {
     // Fix links and videos in ion-radio and ion-checkbox.
     .input-wrapper {
@@ -925,6 +907,27 @@ body.keyboard-is-open {
     }
   }
 
+  // Fix modals displayed over action sheet.
+  .disable-scroll ion-modal .ion-page {
+    pointer-events: initial;
+  }
+}
+
+[dir="ltr"] body, [dir="rtl"] body {
+  padding-top: constant(safe-area-inset-top); //for iOS 11.2
+  padding-top: env(safe-area-inset-top); //for iOS 11.1
+}
+
+body.keyboard-is-open {
+  .scroll-content, .fixed-content {
+      margin-bottom: 0 !important;
+  }
+
+  core-ion-tabs .tabbar {
+      display: none;
+  }
+}
+
 // Fix iframes in fullscreen mode.
 //
 // Ionic sets "contain: strict" to some elements. This enables paint containment,
@@ -941,8 +944,3 @@ ion-modal,
 .split-pane {
   contain: size layout style;
 }
-
-// Fix modals displayed over action sheet.
-.disable-scroll ion-modal .ion-page {
-  pointer-events: initial;
-}

src/app/app.wp.scss

@@ -1,4 +1,4 @@
-
+ion-app.app-root.wp {
   .button-wp {
     min-height: $button-wp-height;
   }
@@ -22,7 +22,7 @@
   }
 
   @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
-  .wp .core-#{$color-name}-card {
+    .core-#{$color-name}-card {
       @extend .card-wp ;
       @extend .card-content-wp;
 
@@ -36,14 +36,14 @@
     }
   }
 
-.wp .core-avoid-header ion-content {
+  .core-avoid-header ion-content {
       top: $navbar-wp-height;
       height: calc(100% - #{($navbar-wp-height)});
   }
 
   // Different levels of padding.
   @for $i from 0 through 15 {
-  .wp .core-padding-#{$i} {
+    .core-padding-#{$i} {
       @include padding(null, null, null, 15px * $i + $item-wp-padding-start);
     }
   }
@@ -55,3 +55,4 @@
   .card-wp.with-borders .item-wp:last-child .item-inner {
     border-bottom: 0;
   }
+}

src/components/chart/chart.scss

@@ -1,4 +1,4 @@
-core-chart {
+ion-app.app-root core-chart {
     display: block;
 
     canvas {

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

@@ -1,4 +1,4 @@
-core-context-menu-popover {
+ion-app.app-root core-context-menu-popover {
     .item-md ion-icon[item-start] + .item-inner,
     .item-md ion-icon[item-start] + .item-input {
         @include margin-horizontal(5px, null);

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

@@ -1,4 +1,4 @@
-core-empty-box {
+ion-app.app-root core-empty-box {
   .core-empty-box {
     position: absolute;
     @include position(0, 0, 0, 0);

src/components/file/file.scss

@@ -1,3 +1,4 @@
+ion-app.app-root {
     .card-md core-file + core-file > .item-md.item-block > .item-inner {
         border-top: 1px solid $list-md-border-color;
     }
@@ -9,3 +10,4 @@
     .card-wp core-file + core-file > .item-wp.item-block > .item-inner {
         border-top: 1px solid $list-wp-border-color;
     }
+}

src/components/iframe/iframe.scss

@@ -1,4 +1,4 @@
-core-iframe {
+ion-app.app-root core-iframe {
     > div {
         height: 100%;
     }

src/components/input-errors/input-errors.scss

@@ -1,4 +1,4 @@
-core-input-errors {
+ion-app.app-root core-input-errors {
     width: 100%;
 
     .core-input-error-container {

src/components/ion-tabs/ion-tabs.scss

@@ -1,4 +1,4 @@
-core-ion-tabs {
+ion-app.app-root core-ion-tabs {
     .tabbar {
         z-index: 101; // For some reason, the regular z-index isn't enough with our tabs, use a higher one.
 
@@ -20,15 +20,15 @@ core-ion-tabs {
     }
 }
 
-.ios core-ion-tabs .core-ion-tabs-loading {
+ion-app.app-root.ios core-ion-tabs .core-ion-tabs-loading {
     min-height: $tabs-ios-tab-min-height;
 }
 
-.md core-ion-tabs .core-ion-tabs-loading {
+ion-app.app-root.md core-ion-tabs .core-ion-tabs-loading {
     min-height: $tabs-md-tab-min-height;
 }
 
-.wp core-ion-tabs .core-ion-tabs-loading {
+ion-app.app-root.wp core-ion-tabs .core-ion-tabs-loading {
     min-height: $tabs-wp-tab-min-height;
 }
 
@@ -82,14 +82,14 @@ core-ion-tab.show-tab {
 
 }
 
-.ios {
+ion-app.app-root.ios {
     @include core-ion-tabs-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
 }
 
-.md {
+ion-app.app-root.md {
    @include core-ion-tabs-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $cordova-md-statusbar-padding, $cordova-md-statusbar-padding-modal-max-width);
 }
 
-.wp {
+ion-app.app-root.wp {
     @include core-ion-tabs-statusbar-padding($toolbar-wp-height, $toolbar-wp-padding, $content-wp-padding, $cordova-wp-statusbar-padding, $cordova-wp-statusbar-padding-modal-max-width);
 }

src/components/loading/loading.scss

@@ -1,3 +1,4 @@
+ion-app.app-root {
     core-loading {
         @include core-transition(height, 200ms);
 
@@ -48,3 +49,4 @@ core-loading.core-loading-loaded {
             }
         }
     }
+}

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

@@ -1,4 +1,4 @@
-.core-input-required-asterisk, .icon.core-input-required-asterisk {
+ion-app.app-root .core-input-required-asterisk, ion-app.app-root .icon.core-input-required-asterisk {
     color: $red !important;
     font-size: 8px;
     @include padding(null, null, null, 4px);

src/components/navbar-buttons/navbar-buttons.scss

@@ -1,3 +1,4 @@
-core-navbar-buttons, .core-navbar-button-hidden {
+ion-app.app-root core-navbar-buttons,
+ion-app.app-root .core-navbar-button-hidden {
     display: none !important;
 }

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

@@ -1,6 +1,6 @@
 $core-progress-bar-height: 5px !default;
 
-core-progress-bar {
+ion-app.app-root core-progress-bar {
     @include padding(null, 55px, null, null);
     position: relative;
     display: block;

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

@@ -1,4 +1,4 @@
-core-rich-text-editor {
+ion-app.app-root core-rich-text-editor {
     height: 40vh;
     overflow: hidden;
     min-height: 200px; /* Just in case vh is not supported */
@@ -121,6 +121,6 @@ core-rich-text-editor {
 
 }
 
-.keyboard-is-open core-rich-text-editor {
+body.keyboard-is-open ion-app.app-root core-rich-text-editor {
     min-height: 200px;
 }

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

@@ -1,4 +1,4 @@
-core-search-box {
+ion-app.app-root core-search-box {
     .button.item-button[icon-only] {
         margin: 0;
         padding: ($content-padding / 2) $content-padding;

src/components/send-message-form/send-message-form.scss

@@ -1,7 +1,7 @@
 $core-send-message-input-background: $gray;
 $core-send-message-input-color: $black;
 
-core-send-message-form {
+ion-app.app-root core-send-message-form {
   background: $white;
 
   form {

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

@@ -1,4 +1,4 @@
-core-show-password {
+ion-app.app-root core-show-password {
     padding: 0px;
     width: 100%;
     position: relative;
@@ -22,13 +22,13 @@ core-show-password {
     }
 }
 
-.md {
+ion-app.app-root.md {
     .item-label-stacked core-show-password .button[icon-only] {
         bottom: 0;
     }
 }
 
-.ios {
+ion-app.app-root.ios {
     .item-label-stacked core-show-password .button[icon-only] {
         bottom: -5px;
     }
@@ -37,7 +37,7 @@ core-show-password {
     }
 }
 
-.wp {
+ion-app.app-root.wp {
     .item-label-stacked core-show-password .button[icon-only] {
         bottom: 7px;
     }

src/components/tabs/tabs.scss

@@ -1,4 +1,4 @@
-.core-tabs-bar {
+ion-app.app-root .core-tabs-bar {
     @include position(null, null, null, 0);
     position: relative;
     z-index: $z-index-toolbar;
@@ -49,7 +49,7 @@
     }
 }
 
-.md .core-tabs-bar a.tab-slide {
+ion-app.app-root.md .core-tabs-bar a.tab-slide {
     // @extend .tabs-md .tab-button;
     min-height: $tabs-md-tab-min-height;
 
@@ -57,7 +57,7 @@
     color: $tabs-md-tab-text-color;
 }
 
-.ios .core-tabs-bar a.tab-slide {
+ion-app.app-root.ios .core-tabs-bar a.tab-slide {
     // @extend .tabs-ios .tab-button;
     max-width: $tabs-ios-tab-max-width;
     min-height: $tabs-ios-tab-min-height;
@@ -67,11 +67,7 @@
     color: $tabs-ios-tab-text-color;
 }
 
-.ios .tabs:not(.tabs-ios[tabsPlacement=top]) .tabbar {
+ion-app.app-root.wp .core-tabs-bar a.tab-slide {
-    padding-bottom: 0;
-}
-
-.wp .core-tabs-bar a.tab-slide {
     //@extend .tabs-wp .tab-button;
     @include border-radius(0);
 
@@ -84,7 +80,7 @@
     box-shadow: none;
 }
 
-core-tabs {
+ion-app.app-root core-tabs {
     .core-tabs-content-container {
         height: 100%;
 
@@ -129,11 +125,11 @@ core-tabs {
     }
 }
 
-:not(.has-refresher) > .scroll-content.no-scroll {
+ion-app.app-root :not(.has-refresher) > .scroll-content.no-scroll {
     overflow: hidden !important;
 }
 
-.ios .core-tabs-bar {
+ion-app.app-root.ios .core-tabs-bar {
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
@@ -143,11 +139,11 @@ core-tabs {
     }
 }
 
-.md .core-tabs-bar::after {
+ion-app.app-root.md .core-tabs-bar::after {
     @extend .header-md::after;
 }
 
-.ios, .md, .wp {
+ion-app.app-root.ios, ion-app.app-root.md, ion-app.app-root.wp {
     .core-avoid-header ion-content core-tabs core-tab ion-content {
         top: 0 !important;
         height: 100% !important;

src/components/timer/timer.scss

@@ -1,4 +1,4 @@
-core-timer {
+ion-app.app-root core-timer {
     .item.item-block .item-inner {
         border: 0;
     }

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

@@ -1,10 +1,10 @@
-ion-badge.core-course-download-section-progress {
+ion-app.app-root ion-badge.core-course-download-section-progress {
     display: block;
     @include float(start);
     @include margin(12px, 12px, null, 12px);
 }
 
-core-course-format {
+ion-app.app-root core-course-format {
 
     .core-format-progress-list {
         margin-bottom: 0;

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

@@ -1,4 +1,4 @@
-core-course-module-completion a {
+ion-app.app-root core-course-module-completion a {
     img {
         padding: 5px;
         width: 30px;

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

@@ -1,4 +1,4 @@
-core-course-module {
+ion-app.app-root core-course-module {
     background: white;
     display: block;
 
@@ -51,7 +51,7 @@ core-course-module {
     }
 }
 
-.md core-course-module {
+ion-app.app-root.md core-course-module {
     .core-module-description {
         @include padding(null, $label-md-margin-end, null, null);
         margin-bottom: $label-md-margin-bottom;
@@ -81,7 +81,7 @@ core-course-module {
     }
 }
 
-.ios core-course-module {
+ion-app.app-root.ios core-course-module {
     .core-module-description {
         @include padding(null, $label-ios-margin-end, null, null);
         margin-bottom: $label-md-margin-bottom;
@@ -106,7 +106,7 @@ core-course-module {
     }
 }
 
-.wp core-course-module {
+ion-app.app-root.wp core-course-module {
     .core-module-description {
         @include padding(null, $item-wp-padding-end / 2, null, null);
         margin-bottom: $label-md-margin-bottom;

src/core/course/pages/section/section.scss

@@ -1,3 +0,0 @@
-page-core-course-section {
-
-}

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

@@ -1,4 +1,4 @@
-core-courses-course-list-item {
+ion-app.app-root core-courses-course-list-item {
     .core-course-enrollment-img {
         max-width: 16px;
         max-height: 16px;

src/core/courses/components/course-progress/course-progress.scss

@@ -1,4 +1,4 @@
-core-courses-course-progress {
+ion-app.app-root core-courses-course-progress {
     ion-card.card {
         display: flex;
         flex-direction: column;

src/core/courses/components/overview-events/overview-events.scss

@@ -1,4 +1,4 @@
-core-courses-course-progress {
+ion-app.app-root core-courses-course-progress {
 
     .core-course-module-handler.item-md.item-block .item-inner {
       border-bottom: 1px solid $list-md-border-color;

src/core/courses/pages/course-preview/course-preview.scss

@@ -1,4 +1,4 @@
-page-core-courses-course-preview {
+ion-app.app-root page-core-courses-course-preview {
     .core-course-thumb {
         height: 150px;
         width: 100%;

src/core/courses/pages/my-courses/my-courses.scss

@@ -1,3 +0,0 @@
-page-core-courses-my-courses {
-
-}

src/core/courses/pages/my-overview/my-overview.scss

@@ -1,4 +1,4 @@
-page-core-courses-my-overview {
+ion-app.app-root page-core-courses-my-overview {
     ion-badge.core-course-download-courses-progress {
         display: block;
         @include float(start);

src/core/courses/pages/search/search.scss

@@ -1,3 +0,0 @@
-page-core-courses-search {
-
-}

src/core/emulator/pages/capture-media/capture-media.scss

@@ -1,4 +1,4 @@
-page-core-emulator-capture-media {
+ion-app.app-root page-core-emulator-capture-media {
     ion-content {
         .core-av-wrapper {
             position: absolute;

src/core/grades/components/course/course.scss

@@ -1,4 +1,4 @@
-core-grades-course {
+ion-app.app-root core-grades-course {
   .core-grades-table {
     border-collapse: collapse;
     line-height: 20px;
@@ -74,7 +74,7 @@ core-grades-course {
   }
 }
 
-.split-pane-side, .split-pane-main {
+ion-app.app-root .split-pane-side, ion-app.app-root .split-pane-main {
   core-grades-course .core-grades-table .hidden-phone {
     display: none;
     opacity: 0;

src/core/login/pages/credentials/credentials.scss

@@ -1,4 +1,4 @@
-page-core-login-credentials {
+ion-app.app-root page-core-login-credentials {
     .scroll-content {
         background: $core-login-page-background-color;
     }

src/core/login/pages/email-signup/email-signup.scss

@@ -1,2 +0,0 @@
-page-core-login-email-signup {
-}

src/core/login/pages/forgotten-password/forgotten-password.scss

@@ -1,4 +1,4 @@
-page-core-login-forgotten-password {
+ion-app.app-root page-core-login-forgotten-password {
     .content {
         background: -webkit-radial-gradient(white, $gray-light);
         background: radial-gradient(white, $gray-light);

src/core/login/pages/init/init.scss

@@ -1,4 +1,4 @@
-page-core-login-init {
+ion-app.app-root page-core-login-init {
     .scroll-content {
         background-color: $core-color-init-screen; /* Change this to add a bg image or change color */
         background: -webkit-radial-gradient($core-color-init-screen-alt, $core-color-init-screen);

src/core/login/pages/reconnect/reconnect.scss

@@ -1,4 +1,4 @@
-page-core-login-reconnect {
+ion-app.app-root page-core-login-reconnect {
     .scroll-content {
         background: $core-login-page-background-color;
     }

src/core/login/pages/site-policy/site-policy.scss

@@ -1,4 +1,4 @@
-page-core-login-site-policy {
+ion-app.app-root page-core-login-site-policy {
     .card {
         height: 300px;
     }

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

@@ -1,4 +1,4 @@
-page-core-login-site {
+ion-app.app-root page-core-login-site {
     .scroll-content {
         background: $core-login-page-background-color;
     }

src/core/login/pages/sites/sites.scss

@@ -1,4 +1,4 @@
-page-core-login-sites {
+ion-app.app-root page-core-login-sites {
     .item-button[icon-only] ion-icon {
         font-size: 2.3em;
     }

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

@@ -1,4 +1,4 @@
-page-core-mainmenu {
+ion-app.app-root page-core-mainmenu {
     .ion-md-fa-graduation-cap,
     .ion-ios-fa-graduation-cap,
     .ion-ios-fa-graduation-cap-outline,

src/core/mainmenu/pages/more/more.scss

@@ -1,4 +1,4 @@
-page-core-mainmenu-more {
+ion-app.app-root page-core-mainmenu-more {
     $core-more-icon: $gray-darker !default;
     $core-more-background-ios: $list-ios-background-color !default;
     $core-more-background-md: $list-md-background-color !default;

src/core/user/components/user-profile-field/user-profile-field.scss

@@ -1,5 +0,0 @@
-core-user-profile-field {
-
-}
-
-

src/core/user/pages/about/about.scss

@@ -1,2 +0,0 @@
-page-core-user-about {
-}

src/core/user/pages/profile/profile.scss

@@ -1,4 +1,4 @@
-page-core-user-profile {
+ion-app.app-root page-core-user-profile {
     .core-icon-foreground {
         position: relative;
         @include position(null, null, 30px, 60px);

src/core/viewer/pages/iframe/iframe.scss

@@ -1,4 +1,4 @@
-page-core-viewer-iframe {
+ion-app.app-root page-core-viewer-iframe {
     core-loading .core-loading-content {
         height: 100%;
     }

src/core/viewer/pages/image/image.scss

@@ -1,4 +1,4 @@
-.core-zoom-pane {
+ion-app.app-root .core-zoom-pane {
     height: 100%;
 
     img {

src/theme/variables.scss

@@ -147,7 +147,7 @@ $loading-ios-spinner-color: $core-loading-spinner-color;
 $spinner-ios-ios-color: $core-spinner-color;
 $tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
 $button-ios-outline-background-color: $core-button-outline-background-color;
-$toolbar-ios-height: 44px + 15; // Avoid toolbar with different heights.
+$toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights.
 $checkbox-ios-icon-border-radius: 0px !default;
 
 // App Material Design Variables
@@ -274,16 +274,6 @@ $core-question-state-incorrect-color: $red-light !default;
   }
 }
 
-@mixin app-root() {
-  $root: #{&};
-  @at-root ion-app.app-root {
-    #{$root} {
-      @content;
-    }
-  }
-}
-
-
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";