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;
@@ -99,8 +98,13 @@ page-addon-messages-discussion {
     }
 
     .addon-message .item-content,
-    .addon-message-mine .item-content{
+    .addon-message-mine .item-content {
         background-color: transparent;
         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,134 +1,141 @@
-
+ion-app.app-root.ios {
-.button-ios {
+  .button-ios {
-  min-height: $button-ios-height
+    min-height: $button-ios-height
-}
-
-// Light buttons color.
-.button-ios-light {
-  color: color($colors, primary, base);
-}
-
-.col[align-self-stretch] .card-ios {
-  height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
-}
-
-.bar-buttons core-context-menu .button-clear-ios {
-  color: $toolbar-ios-button-color;
-}
-
-.item-ios ion-spinner[item-start],
-.item-ios ion-spinner[item-end] {
-  @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 {
-    @extend .card-ios ;
-    @extend .card-content-ios;
-
-    &[icon-start] {
-      @include padding(null, null, null, $card-ios-padding-left * 2 + 20);
-
-      ion-icon {
-        @include position(null, null, null, $card-ios-padding-left);
-      }
-    }
   }
-}
 
-.ios .core-avoid-header ion-content {
+  // Light buttons color.
-    top: $navbar-ios-height;
+  .button-ios-light {
-    height: calc(100% - #{($navbar-ios-height)});
+    color: color($colors, primary, base);
-}
+  }
 
-.platform-cordova.ios .core-avoid-header ion-content.statusbar-padding,
+  .col[align-self-stretch] .card-ios {
-.platform-cordova.ios .core-avoid-header .menu-inner > ion-content {
+    height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
-    top: $navbar-ios-height + $cordova-ios-statusbar-padding;
+  }
-    height: calc(100% - #{($navbar-ios-height + $cordova-ios-statusbar-padding)});
-}
 
-.platform-cordova.ios .core-avoid-header .core-avoid-header .menu-inner > ion-content,
+  .bar-buttons core-context-menu .button-clear-ios {
-.platform-cordova.ios core-tab core-split-view .core-avoid-header .menu-inner > ion-content {
+    color: $toolbar-ios-button-color;
-    top: 0;
+  }
-    height: 100%;
+
-}
+  .item-ios ion-spinner[item-start],
+  .item-ios ion-spinner[item-end] {
+    @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
+  }
 
 
-// Highlights inside the input element.
+  @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-@if ($core-text-input-ios-show-highlight) {
+    .core-#{$color-name}-card {
-  .card-ios, .list-ios {
+      @extend .card-ios ;
-    // In order to get a 2px border we need to add an inset
+      @extend .card-content-ios;
-    // box-shadow 1px (this is to avoid the div resizing)
 
-    // The last item in a list has a border on the item, not the
+      &[icon-start] {
-    // inner item, so add it to the item itself
+        @include padding(null, null, null, $card-ios-padding-left * 2 + 20);
-    .item-input.item-input-has-focus:last-child,
-    .item-input.input-has-focus:last-child {
-      @include ios-input-highlight($text-input-ios-highlight-color);
 
-      .item-inner ion-input {
+        ion-icon {
-        box-shadow: none;
+          @include position(null, null, null, $card-ios-padding-left);
-      }
+        }
-    }
-
-    // Show the focus highlight when the input has focus
-    .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
-    .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
-      @include ios-input-highlight($text-input-ios-highlight-color-valid);
-
-      .item-inner ion-input {
-        box-shadow: none;
-      }
-    }
-
-    .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
-      @include ios-input-highlight($text-input-ios-highlight-color-invalid);
-
-      .item-inner ion-input {
-        box-shadow: none;
       }
     }
   }
 
-  .item-ios.item-input {
+  .core-avoid-header ion-content {
-    .item-inner {
+      top: $navbar-ios-height;
-      border: 0;
+      height: calc(100% - #{($navbar-ios-height)});
+  }
+
+  &.platform-cordova .core-avoid-header ion-content.statusbar-padding,
+  &.platform-cordova .core-avoid-header .menu-inner > ion-content {
+      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 .core-avoid-header .core-avoid-header .menu-inner > ion-content,
+  core-tab core-split-view .core-avoid-header .menu-inner > ion-content {
+      top: 0;
+      height: 100%;
+  }
+
+
+  // Highlights inside the input element.
+  @if ($core-text-input-ios-show-highlight) {
+    .card-ios, .list-ios {
+      // In order to get a 2px border we need to add an inset
+      // box-shadow 1px (this is to avoid the div resizing)
+
+      // The last item in a list has a border on the item, not the
+      // inner item, so add it to the item itself
+      .item-input.item-input-has-focus:last-child,
+      .item-input.input-has-focus:last-child {
+        @include ios-input-highlight($text-input-ios-highlight-color);
+
+        .item-inner ion-input {
+          box-shadow: none;
+        }
+      }
+
+      // Show the focus highlight when the input has focus
+      .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
+      .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
+        @include ios-input-highlight($text-input-ios-highlight-color-valid);
+
+        .item-inner ion-input {
+          box-shadow: none;
+        }
+      }
+
+      .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
+        @include ios-input-highlight($text-input-ios-highlight-color-invalid);
+
+        .item-inner ion-input {
+          box-shadow: none;
+        }
+      }
     }
 
-    &.item-block .item-inner ion-input {
+    .item-ios.item-input {
-      border-bottom: $hairlines-width solid $list-border-color;
+      .item-inner {
-    }
+        border: 0;
+      }
 
-    // TODO remove all uses of input-has-focus in v4
+      &.item-block .item-inner ion-input {
-    &.item-input-has-focus .item-inner ion-input,
+        border-bottom: $hairlines-width solid $list-border-color;
-    &.input-has-focus .item-inner ion-input {
+      }
-      @include ios-input-highlight($text-input-ios-highlight-color);
-    }
 
-    // Show the valid highlight when it has the .ng-valid class and a value
+      // TODO remove all uses of input-has-focus in v4
-    &.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
+      &.item-input-has-focus .item-inner ion-input,
-    &.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+      &.input-has-focus .item-inner ion-input {
-      @include ios-input-highlight($text-input-ios-highlight-color-valid);
+        @include ios-input-highlight($text-input-ios-highlight-color);
-    }
+      }
 
-    // Show the invalid highlight when it has the invalid class and has been touched
+      // Show the valid highlight when it has the .ng-valid class and a value
-    &.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+      &.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
-      @include ios-input-highlight($text-input-ios-highlight-color-invalid);
+      &.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+        @include ios-input-highlight($text-input-ios-highlight-color-valid);
+      }
+
+      // Show the invalid highlight when it has the invalid class and has been touched
+      &.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+        @include ios-input-highlight($text-input-ios-highlight-color-invalid);
+      }
     }
   }
-}
 
-// Different levels of padding.
+  // Different levels of padding.
-@for $i from 0 through 15 {
+  @for $i from 0 through 15 {
-  .ios .core-padding-#{$i} {
+    .core-padding-#{$i} {
-    @include padding(null, null, null, 15px * $i + $item-ios-padding-start);
+      @include padding(null, null, null, 15px * $i + $item-ios-padding-start);
+    }
+  }
+
+  // Recover borders on items inside cards.
+  .card-ios.with-borders  .item-ios.item-block .item-inner {
+    border-bottom: $hairlines-width solid $list-ios-border-color;
+  }
+  .card-ios.with-borders .item-ios:last-child .item-inner {
+    border-bottom: 0;
   }
 }
-
-// Recover borders on items inside cards.
-.card-ios.with-borders  .item-ios.item-block .item-inner {
-  border-bottom: $hairlines-width solid $list-ios-border-color;
-}
-.card-ios.with-borders .item-ios:last-child .item-inner {
-  border-bottom: 0;
-}

src/app/app.md.scss

@@ -1,123 +1,123 @@
-
+ion-app.app-root.md {
-.button-md {
+  .button-md {
-  min-height: $button-md-height;
+    min-height: $button-md-height;
-}
-
-// Light buttons color.
-.button-md-light {
-  color: color($colors, primary, base);
-}
-
-.col[align-self-stretch] .card-md {
-  height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
-}
-
-.bar-buttons core-context-menu .button-clear-md {
-  color: $toolbar-md-button-color;
-}
-
-.item-md ion-spinner[item-start] + .item-inner,
-.item-md ion-spinner[item-start] + .item-input {
-  @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2) - 1, null);
-}
-
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-  .md .core-#{$color-name}-card {
-    @extend .card-md;
-    @extend .card-content-md;
-
-    &[icon-start] {
-      @include padding(null, null, null, $card-md-padding-left * 2 + 20);
-
-      ion-icon {
-        @include position(null, null, null, $card-md-padding-left);
-      }
-    }
   }
-}
 
-.md .core-avoid-header ion-content {
+  // Light buttons color.
-    top: $navbar-md-height;
+  .button-md-light {
-    height: calc(100% - #{($navbar-md-height)});
+    color: color($colors, primary, base);
-}
+  }
 
-// Highlights inside the input element.
+  .col[align-self-stretch] .card-md {
-@if ($core-text-input-md-show-highlight) {
+    height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
-  .card-md, .list-md {
+  }
-    // In order to get a 2px border we need to add an inset
-    // box-shadow 1px (this is to avoid the div resizing)
 
-    // The last item in a list has a border on the item, not the
+  .bar-buttons core-context-menu .button-clear-md {
-    // inner item, so add it to the item itself
+    color: $toolbar-md-button-color;
-    .item-input.item-input-has-focus:last-child,
+  }
-    .item-input.input-has-focus:last-child {
-      @include md-input-highlight($text-input-md-highlight-color);
 
-      .item-inner ion-input {
+  .item-md ion-spinner[item-start] + .item-inner,
-        box-shadow: none;
+  .item-md ion-spinner[item-start] + .item-input {
-      }
+    @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2) - 1, null);
-    }
+  }
 
-    .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
+  @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-    .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
+    .core-#{$color-name}-card {
-      @include md-input-highlight($text-input-md-highlight-color-valid);
+      @extend .card-md;
+      @extend .card-content-md;
 
-      .item-inner ion-input {
+      &[icon-start] {
-        box-shadow: none;
+        @include padding(null, null, null, $card-md-padding-left * 2 + 20);
-      }
-    }
 
-    .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
+        ion-icon {
-      @include md-input-highlight($text-input-md-highlight-color-invalid);
+          @include position(null, null, null, $card-md-padding-left);
-
+        }
-      .item-inner ion-input {
-        box-shadow: none;
       }
     }
   }
 
-  .item-md.item-input {
+  .core-avoid-header ion-content {
-    .item-inner {
+      top: $navbar-md-height;
-      border: 0;
+      height: calc(100% - #{($navbar-md-height)});
+  }
+
+  // Highlights inside the input element.
+  @if ($core-text-input-md-show-highlight) {
+    .card-md, .list-md {
+      // In order to get a 2px border we need to add an inset
+      // box-shadow 1px (this is to avoid the div resizing)
+
+      // The last item in a list has a border on the item, not the
+      // inner item, so add it to the item itself
+      .item-input.item-input-has-focus:last-child,
+      .item-input.input-has-focus:last-child {
+        @include md-input-highlight($text-input-md-highlight-color);
+
+        .item-inner ion-input {
+          box-shadow: none;
+        }
+      }
+
+      .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
+      .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
+        @include md-input-highlight($text-input-md-highlight-color-valid);
+
+        .item-inner ion-input {
+          box-shadow: none;
+        }
+      }
+
+      .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
+        @include md-input-highlight($text-input-md-highlight-color-invalid);
+
+        .item-inner ion-input {
+          box-shadow: none;
+        }
+      }
     }
 
-    &.item-block .item-inner ion-input {
+    .item-md.item-input {
-      border-bottom: 1px solid $list-border-color;
+      .item-inner {
-    }
+        border: 0;
+      }
 
-    // TODO remove all uses of input-has-focus in v4
+      &.item-block .item-inner ion-input {
-    &.item-input-has-focus .item-inner ion-input,
+        border-bottom: 1px solid $list-border-color;
-    &.input-has-focus .item-inner ion-input {
+      }
-      @include md-input-highlight($text-input-md-highlight-color);
-    }
 
-    // Show the valid highlight when it has the .ng-valid class and a value
+      // TODO remove all uses of input-has-focus in v4
-    // TODO remove all uses of input-has-focus in v4
+      &.item-input-has-focus .item-inner ion-input,
-    // TODO remove all uses of input-has-value in v4
+      &.input-has-focus .item-inner ion-input {
-    &.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
+        @include md-input-highlight($text-input-md-highlight-color);
-    &.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+      }
-      @include md-input-highlight($text-input-md-highlight-color-valid);
-    }
 
-    // Show the invalid highlight when it has the invalid class and has been touched
+      // Show the valid highlight when it has the .ng-valid class and a value
-    &.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+      // TODO remove all uses of input-has-focus in v4
-      @include md-input-highlight($text-input-md-highlight-color-invalid);
+      // TODO remove all uses of input-has-value in v4
+      &.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
+      &.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+        @include md-input-highlight($text-input-md-highlight-color-valid);
+      }
+
+      // Show the invalid highlight when it has the invalid class and has been touched
+      &.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
+        @include md-input-highlight($text-input-md-highlight-color-invalid);
+      }
     }
   }
-}
 
-// Different levels of padding.
+  // Different levels of padding.
-@for $i from 0 through 15 {
+  @for $i from 0 through 15 {
-  .md .core-padding-#{$i} {
+    .core-padding-#{$i} {
-    @include padding(null, null, null, 15px * $i + $item-md-padding-start);
+      @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;
+  }
+  .card-md.with-borders .item-md:last-child .item-inner {
+    border-bottom: 0;
   }
 }
-
-
-// Recover borders on items inside cards.
-.card-md.with-borders .item-md.item-block .item-inner {
-  border-bottom: 1px solid $list-md-border-color;
-}
-.card-md.with-borders .item-md:last-child .item-inner {
-  border-bottom: 0;
-}

src/app/app.wp.scss

@@ -1,57 +1,58 @@
+ion-app.app-root.wp {
+  .button-wp {
+    min-height: $button-wp-height;
+  }
 
-.button-wp {
+  // Light buttons color.
-  min-height: $button-wp-height;
+  .button-wp-light {
-}
+    color: color($colors, primary, base);
+  }
 
-// Light buttons color.
+  .col[align-self-stretch] .card-wp {
-.button-wp-light {
+    height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
-  color: color($colors, primary, base);
+  }
-}
 
-.col[align-self-stretch] .card-wp {
+  .bar-buttons core-context-menu .button-clear-wp {
-  height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
+    color: $toolbar-wp-button-color;
-}
+  }
 
-.bar-buttons core-context-menu .button-clear-wp {
+  .item-wp ion-spinner[item-start] + .item-inner,
-  color: $toolbar-wp-button-color;
+  .item-wp ion-spinner[item-start] + .item-input {
-}
+    @include margin-horizontal(($item-wp-padding-start / 2), null);
+  }
 
-.item-wp ion-spinner[item-start] + .item-inner,
+  @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
-.item-wp ion-spinner[item-start] + .item-input {
+    .core-#{$color-name}-card {
-  @include margin-horizontal(($item-wp-padding-start / 2), null);
+      @extend .card-wp ;
-}
+      @extend .card-content-wp;
 
-@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+      &[icon-start] {
-  .wp .core-#{$color-name}-card {
+        @include padding(null, null, null, $card-wp-padding-left * 2 + 20);
-    @extend .card-wp ;
-    @extend .card-content-wp;
 
-    &[icon-start] {
+        ion-icon {
-      @include padding(null, null, null, $card-wp-padding-left * 2 + 20);
+          @include position(null, null, null, $card-wp-padding-left);
-
+        }
-      ion-icon {
-        @include position(null, null, null, $card-wp-padding-left);
       }
     }
   }
-}
 
-.wp .core-avoid-header ion-content {
+  .core-avoid-header ion-content {
-    top: $navbar-wp-height;
+      top: $navbar-wp-height;
-    height: calc(100% - #{($navbar-wp-height)});
+      height: calc(100% - #{($navbar-wp-height)});
-}
+  }
 
-// Different levels of padding.
+  // Different levels of padding.
-@for $i from 0 through 15 {
+  @for $i from 0 through 15 {
-  .wp .core-padding-#{$i} {
+    .core-padding-#{$i} {
-    @include padding(null, null, null, 15px * $i + $item-wp-padding-start);
+      @include padding(null, null, null, 15px * $i + $item-wp-padding-start);
+    }
+  }
+
+  // Recover borders on items inside cards.
+  .card-wp.with-borders  .item-wp.item-block .item-inner {
+    border-bottom: 1px solid $list-wp-border-color;
+  }
+  .card-wp.with-borders .item-wp:last-child .item-inner {
+    border-bottom: 0;
   }
 }
-
-// Recover borders on items inside cards.
-.card-wp.with-borders  .item-wp.item-block .item-inner {
-  border-bottom: 1px solid $list-wp-border-color;
-}
-.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,11 +1,13 @@
-.card-md core-file + core-file > .item-md.item-block > .item-inner {
+ion-app.app-root {
-    border-top: 1px solid $list-md-border-color;
+    .card-md core-file + core-file > .item-md.item-block > .item-inner {
-}
+        border-top: 1px solid $list-md-border-color;
+    }
 
-.card-ios core-file + core-file > .item-ios.item-block > .item-inner {
+    .card-ios core-file + core-file > .item-ios.item-block > .item-inner {
-    border-top: $hairlines-width solid $list-ios-border-color;
+        border-top: $hairlines-width solid $list-ios-border-color;
-}
+    }
 
-.card-wp core-file + core-file > .item-wp.item-block > .item-inner {
+    .card-wp core-file + core-file > .item-wp.item-block > .item-inner {
-    border-top: 1px solid $list-wp-border-color;
+        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,50 +1,52 @@
-core-loading {
+ion-app.app-root {
-    @include core-transition(height, 200ms);
+    core-loading {
+        @include core-transition(height, 200ms);
 
-    .core-loading-container {
+        .core-loading-container {
-        width: 100%;
+            width: 100%;
-        text-align: center;
-        padding-top: 10px;
-        clear: both;
-    }
-
-    .core-loading-content {
-        display: inline;
-        padding-bottom: 1px; /* This makes height be real */
-    }
-
-    &.core-loading-noheight .core-loading-content {
-        height: auto;
-    }
-}
-
-.scroll-content > core-loading,
-ion-content > .scroll-content > core-loading,
-.core-loading-center {
-    position: static !important;
-}
-
-.scroll-content > core-loading,
-ion-content > .scroll-content > core-loading,
-.core-loading-center,
-core-loading.core-loading-loaded {
-    position: relative;
-
-    > .core-loading-container {
-        position: absolute;
-        @include position(0, 0, 0, 0);
-        display: table;
-        height: 100%;
-        width: 100%;
-        z-index: 1;
-        margin: 0;
-        padding: 0;
-        clear: both;
-
-        .core-loading-spinner {
-            display: table-cell;
             text-align: center;
-            vertical-align: middle;
+            padding-top: 10px;
+            clear: both;
+        }
+
+        .core-loading-content {
+            display: inline;
+            padding-bottom: 1px; /* This makes height be real */
+        }
+
+        &.core-loading-noheight .core-loading-content {
+            height: auto;
+        }
+    }
+
+    .scroll-content > core-loading,
+    ion-content > .scroll-content > core-loading,
+    .core-loading-center {
+        position: static !important;
+    }
+
+    .scroll-content > core-loading,
+    ion-content > .scroll-content > core-loading,
+    .core-loading-center,
+    core-loading.core-loading-loaded {
+        position: relative;
+
+        > .core-loading-container {
+            position: absolute;
+            @include position(0, 0, 0, 0);
+            display: table;
+            height: 100%;
+            width: 100%;
+            z-index: 1;
+            margin: 0;
+            padding: 0;
+            clear: both;
+
+            .core-loading-spinner {
+                display: table-cell;
+                text-align: center;
+                vertical-align: middle;
+            }
         }
     }
 }

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";