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,28 +1,29 @@
-
+ion-app.app-root.ios {
-.button-ios {
+  .button-ios {
     min-height: $button-ios-height
-}
+  }
 
-// Light buttons color.
+  // Light buttons color.
-.button-ios-light {
+  .button-ios-light {
     color: color($colors, primary, base);
-}
+  }
 
-.col[align-self-stretch] .card-ios {
+  .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 {
+  .bar-buttons core-context-menu .button-clear-ios {
     color: $toolbar-ios-button-color;
-}
+  }
 
-.item-ios ion-spinner[item-start],
+  .item-ios ion-spinner[item-start],
-.item-ios ion-spinner[item-end] {
+  .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 {
+  @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+    .core-#{$color-name}-card {
       @extend .card-ios ;
       @extend .card-content-ios;
 
@@ -34,28 +35,33 @@
         }
       }
     }
-}
+  }
 
-.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));
 
-.platform-cordova.ios .core-avoid-header .core-avoid-header .menu-inner > ion-content,
+      top: calc(#{$navbar-ios-height + $cordova-ios-statusbar-padding});
-.platform-cordova.ios core-tab core-split-view .core-avoid-header .menu-inner > ion-content {
+      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.
+  // Highlights inside the input element.
-@if ($core-text-input-ios-show-highlight) {
+  @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)
@@ -116,19 +122,20 @@
         @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);
     }
-}
+  }
 
-// Recover borders on items inside cards.
+  // Recover borders on items inside cards.
-.card-ios.with-borders  .item-ios.item-block .item-inner {
+  .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 {
+  .card-ios.with-borders .item-ios:last-child .item-inner {
     border-bottom: 0;
+  }
 }

src/app/app.md.scss

@@ -1,28 +1,28 @@
-
+ion-app.app-root.md {
-.button-md {
+  .button-md {
     min-height: $button-md-height;
-}
+  }
 
-// Light buttons color.
+  // Light buttons color.
-.button-md-light {
+  .button-md-light {
     color: color($colors, primary, base);
-}
+  }
 
-.col[align-self-stretch] .card-md {
+  .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 {
+  .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-inner,
-.item-md ion-spinner[item-start] + .item-input {
+  .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) {
+  @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;
 
@@ -34,15 +34,15 @@
         }
       }
     }
-}
+  }
 
-.md .core-avoid-header ion-content {
+  .core-avoid-header ion-content {
       top: $navbar-md-height;
       height: calc(100% - #{($navbar-md-height)});
-}
+  }
 
-// Highlights inside the input element.
+  // Highlights inside the input element.
-@if ($core-text-input-md-show-highlight) {
+  @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)
@@ -104,20 +104,20 @@
         @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);
     }
-}
+  }
 
-
+  // Recover borders on items inside cards.
-// Recover borders on items inside cards.
+  .card-md.with-borders .item-md.item-block .item-inner {
-.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 {
+  .card-md.with-borders .item-md:last-child .item-inner {
     border-bottom: 0;
+  }
 }

src/app/app.scss

@@ -18,36 +18,32 @@
 // Alignment
 // -------------------------
 
-.text-left           { text-align: left; }
+ion-app.app-root {
-.text-right          { text-align: right; }
+  .text-left           { text-align: left; }
-.text-center         { text-align: center; }
+  .text-right          { text-align: right; }
-.text-justify        { text-align: justify; }
+  .text-center         { text-align: center; }
-.clearfix {
+  .text-justify        { text-align: justify; }
+  .clearfix {
     &:after {
       content: "";
       display: table;
       clear: both;
     }
-}
+  }
-.img-responsive {
+  .img-responsive {
     display: block;
     max-width: 100%;
-}
+  }
 
-.opacity-hide { opacity: 0; }
+  .opacity-hide { opacity: 0; }
-.core-big   { font-size: 115%; }
+  .core-big   { font-size: 115%; }
-.invisible { visibility: hidden; }
+  .invisible { visibility: hidden; }
 
-.button-no-uppercase {
+  .button-no-uppercase {
     text-transform: none;
-}
+  }
 
-[dir="ltr"] body, [dir="rtl"] body {
+  @include media-breakpoint-up(sm) {
-    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;
       align-content: center !important;
@@ -57,23 +53,23 @@
         max-width: 600px;
       }
     }
-}
+  }
 
-@include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(sm) {
     .hidden-phone {
       display: none !important;
       opacity: 0 !important;
     }
-}
+  }
 
-@include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md) {
     .hidden-tablet {
       display: none !important;
       opacity: 0 !important;
     }
-}
+  }
 
-@mixin core-headings() {
+  @mixin core-headings() {
     h1 {
       font-size: 3rem;
     }
@@ -92,32 +88,30 @@
     h6 {
       font-size: 1.4rem;
     }
-}
+  }
 
-
+  // 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.
-// Define an alternative way to set a heading in an item without using a heading tag.
+  .item .item-heading {
-// This is done for accessibility reasons when a heading is semantically incorrect.
-.item .item-heading {
     @extend h6;
     margin: 0;
-}
+  }
 
-.item-dimmed {
+  .item-dimmed {
     opacity: 0.71;
-}
+  }
 
-.item-radio-checked {
+  .item-radio-checked {
     background-color: $gray-lighter;
-}
+  }
 
-// Make no-lines work in any element, not just ion-item and ion-list.
+  // Make no-lines work in any element, not just ion-item and ion-list.
-.item *[no-lines] .item-inner,
+  .item *[no-lines] .item-inner,
-*[no-lines] .item .item-inner {
+  *[no-lines] .item .item-inner {
     border: 0;
-}
+  }
 
-.core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon {
+  .core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon {
     min-height: 32px;
     img, .label {
       max-height: 32px;
@@ -130,17 +124,17 @@
       @include margin(null, null, null, 5px);
       color: $gray-darker;
     }
-}
+  }
 
-.core-bold, .core-bold .label {
+  .core-bold, .core-bold .label {
     font-weight: bold;
-}
+  }
 
-.core-module-icon {
+  .core-module-icon {
     width: auto;
-}
+  }
 
-.core-button-spinner {
+  .core-button-spinner {
     min-height: 44px;
     min-width: 50px;
     text-align: center;
@@ -148,12 +142,12 @@
     .spinner {
       margin-top: 8px;
     }
-}
+  }
 
-// Avatar
+  // Avatar
-// -------------------------
+  // -------------------------
-// Large centered avatar
+  // Large centered avatar
-.item-avatar-center {
+  .item-avatar-center {
       text-align: center;
 
       &.item-complex .item-content {
@@ -184,38 +178,38 @@
               height: auto;
           }
       }
-}
+  }
 
-ion-avatar ion-img, ion-avatar img {
+  ion-avatar ion-img, ion-avatar img {
     text-indent: -99999px;
     background-color: $gray-light;
-}
+  }
 
-// Form items
+  // Form items
-// -------------------------
+  // -------------------------
 
-.item .core-input-footnote {
+  .item .core-input-footnote {
     width: 100%;
     padding-top: 10px;
     padding-bottom: 10px;
     font-style: italic;
-}
+  }
 
-ion-datetime {
+  ion-datetime {
     position: relative;
-}
+  }
 
-input {
+  input {
     @include rtl() {
       text-align: right;
     }
-}
+  }
 
 
 
-/** Format Text */
+  /** Format Text */
-core-format-text[maxHeight],
+  core-format-text[maxHeight],
-core-format-text[ng-reflect-max-height] {
+  core-format-text[ng-reflect-max-height] {
     display: block;
     position: relative;
     width: 100%;
@@ -283,10 +277,10 @@ core-format-text[ng-reflect-max-height] {
         background-size: 14px 14px;
       }
     }
-}
+  }
 
-core-format-text[singleLine="true"],
+  core-format-text[singleLine="true"],
-core-format-text[ng-reflect-single-line="true"] {
+  core-format-text[ng-reflect-single-line="true"] {
       cursor: pointer;
       pointer-events: auto;
       white-space: nowrap;
@@ -295,27 +289,27 @@ core-format-text[ng-reflect-single-line="true"] {
       display: block;
       position: relative;
       width: 100%;
-}
+  }
 
-.core-media-adapt-width {
+  .core-media-adapt-width {
     max-width: 100%;
-}
+  }
 
-img.core-media-adapt-width {
+  img.core-media-adapt-width {
     height: auto;
-}
+  }
 
-audio.core-media-adapt-width {
+  audio.core-media-adapt-width {
     width: 100%;
-}
+  }
 
-.core-adapted-img-container {
+  .core-adapted-img-container {
     position: relative;
     display: inline-block;
     width: 100%;
-}
+  }
 
-.core-image-viewer-icon {
+  .core-image-viewer-icon {
     position: absolute;
     @include position(null, 10px, 10px, null);
     color: $black;
@@ -331,9 +325,9 @@ audio.core-media-adapt-width {
     ion-icon {
       font-size: 24px;
     }
-}
+  }
 
-core-format-text {
+  core-format-text {
     audio, video, a, iframe {
       pointer-events: auto;
     }
@@ -374,40 +368,40 @@ core-format-text {
     }
 
     @include core-headings();
-}
+  }
 
-.item core-format-text {
+  .item core-format-text {
     @include core-headings();
-}
+  }
 
-// Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
+  // Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
-ion-card core-format-text img {
+  ion-card core-format-text img {
     width: min-content;
     display: inline;
-}
+  }
 
-// Message item.
+  // Message item.
-.item-message {
+  .item-message {
     core-format-text > p:only-child {
       display: inline;
     }
-}
+  }
 
-// Media item, ideal for icons.
+  // Media item, ideal for icons.
-.item-media {
+  .item-media {
     min-height: $item-media-height + ($content-padding * 2);
     > img:first-child {
       max-width: $item-media-width;
       max-height: $item-media-height;
     }
-}
+  }
 
-// Ionic fix. Button can occupy all page if not.
+  // Ionic fix. Button can occupy all page if not.
-ion-select {
+  ion-select {
     position: relative;
-}
+  }
 
-ion-col ion-select {
+  ion-col ion-select {
       @include float(end);
       max-width: none;
       width: 100%;
@@ -415,11 +409,10 @@ ion-col ion-select {
         white-space: normal;
         text-align: right;
       }
-}
+  }
 
-
+  :not(.item) > * > * > ion-select,
-:not(.item) > * > * > ion-select,
+  .core-button-select {
-.core-button-select {
     background-color: white;
     color: $core-color;
     white-space: normal;
@@ -461,14 +454,13 @@ ion-col ion-select {
       text-align: right;
       flex-grow: 2;
     }
-}
+  }
 
 
 
-// File uploader.
+  // File uploader.
-// -------------------------
+  // -------------------------
-
+  .core-fileuploader-file-handler {
-.core-fileuploader-file-handler {
       position: relative;
 
       input {
@@ -481,32 +473,32 @@ ion-col ion-select {
           z-index: 100;
           cursor: pointer;
       }
-}
+  }
 
-// Question.
+  // Question.
-// -------------------------
+  // -------------------------
 
-.core-question-answer-correct,
+  .core-question-answer-correct,
-.core-question-comment {
+  .core-question-comment {
     color: $core-question-correct-color;
     background-color: $core-question-correct-color-bg;
 
     .label, ion-label.label {
       color: $core-question-correct-color;
     }
-}
+  }
 
-.core-question-answer-incorrect,
+  .core-question-answer-incorrect,
-.core-question-incorrect {
+  .core-question-incorrect {
     color: $core-question-incorrect-color;
     background-color: $core-question-incorrect-color-bg;
 
     .label, ion-label.label {
       color: $core-question-incorrect-color;
     }
-}
+  }
 
-.core-question-feedback-container {
+  .core-question-feedback-container {
     background-color: $core-question-feedback-color-bg;
     color: $core-question-feedback-color;
 
@@ -532,128 +524,128 @@ ion-col ion-select {
         background-color: $green;
       }
     }
-}
+  }
 
-.core-question-feedback-inline {
+  .core-question-feedback-inline {
     display: inline-block;
-}
+  }
 
-.core-question-feedback-padding {
+  .core-question-feedback-padding {
     @include padding(8px, 35px, 8px, 14px);
-}
+  }
 
-.core-question-correct {
+  .core-question-correct {
     background-color: $core-question-state-correct-color;
-}
+  }
-.core-question-partiallycorrect {
+  .core-question-partiallycorrect {
     background-color: $core-question-state-partial-color;
-}
+  }
-.core-question-notanswered,
+  .core-question-notanswered,
-.core-question-incorrect {
+  .core-question-incorrect {
     background-color: $core-question-state-incorrect-color;
-}
+  }
-.core-question-answersaved {
+  .core-question-answersaved {
     color: $text-color;
     background-color: $core-question-saved-color-bg;
-}
+  }
 
-.core-question-warning {
+  .core-question-warning {
     color: $core-question-warning-color;
-}
+  }
 
-.questioncorrectnessicon,
+  .questioncorrectnessicon,
-.fa.icon.questioncorrectnessicon {
+  .fa.icon.questioncorrectnessicon {
     font-size: 20px;
-}
+  }
 
-// Atto styles
+  // Atto styles
-// -------------------------
+  // -------------------------
-.atto_image_preview {
+  .atto_image_preview {
       width: 100%;
       height: 100%;
       margin-left: auto;
       margin-right: auto;
-}
+  }
 
-.atto_image_preview_box {
+  .atto_image_preview_box {
       max-height: 200px;
       margin-bottom: 1em;
       overflow: auto;
-}
+  }
 
-.editor_atto_content img {
+  .editor_atto_content img {
       cursor: pointer;
-}
+  }
 
-.atto_image_size {
+  .atto_image_size {
       display: inline-block;
-}
+  }
 
-.atto_image_size input[type=checkbox] {
+  .atto_image_size input[type=checkbox] {
       @include margin(null, 1em, null, 1em);
-}
+  }
 
-.atto_image_size input[type=text] {
+  .atto_image_size input[type=text] {
       width: 3em;
-}
+  }
 
-.atto_image_size label {
+  .atto_image_size label {
       display: inline-block;
-}
+  }
 
-.atto_image_button_text-top {
+  .atto_image_button_text-top {
       vertical-align: text-top;
       margin: 0 0.5em;
-}
+  }
 
-.atto_image_button_middle {
+  .atto_image_button_middle {
       vertical-align: middle;
       margin: 0 0.5em;
-}
+  }
 
-.atto_image_button_text-bottom {
+  .atto_image_button_text-bottom {
       vertical-align: text-bottom;
       margin: 0 0.5em;
-}
+  }
 
-.atto_image_button_text-top.img-responsive,
+  .atto_image_button_text-top.img-responsive,
-.atto_image_button_middle.img-responsive,
+  .atto_image_button_middle.img-responsive,
-.atto_image_button_text-bottom.img-responsive {
+  .atto_image_button_text-bottom.img-responsive {
       /* If the image is display: block then linking the image to URLs won't work. */
       display: inline-block;
       max-width: calc(100% - 1em);
-}
+  }
 
-/*rtl:begin:ignore*/
+  /*rtl:begin:ignore*/
-.atto_image_button_left {
+  .atto_image_button_left {
       @include float(start);
       @include margin(0, 0.5em, 0, 0);
       max-width: calc(100% - 1em);
-}
+  }
 
-.atto_image_button_right {
+  .atto_image_button_right {
       @include float(end);
       @include margin(0, 0, 0, 0.5em);
       max-width: calc(100% - 1em);
-}
+  }
-/*rtl:end:ignore*/
+  /*rtl:end:ignore*/
 
-.action-sheet-group {
+  .action-sheet-group {
       overflow: auto;
-}
+  }
-.alert-message {
+  .alert-message {
       overflow-y: auto;
-}
+  }
 
-ion-toast.core-toast-success .toast-wrapper{
+  ion-toast.core-toast-success .toast-wrapper{
       background: $green-dark;
-}
+  }
 
-ion-toast.core-toast-alert .toast-wrapper{
+  ion-toast.core-toast-alert .toast-wrapper{
       background: $red-dark;
-}
+  }
 
-textarea {
+  textarea {
     width: 100%;
     resize: none;
 
@@ -667,27 +659,27 @@ textarea {
       height: 200px;
       min-height: $core-rte-min-height;
     }
-}
+  }
 
-.toolbar .core-bar-button-image {
+  .toolbar .core-bar-button-image {
     padding: 0;
     width: 100%;
     height: 100%;
     max-width: $core-toolbar-button-image-width - 1;
     max-height: $core-toolbar-button-image-width - 1;
     border-radius: 50%;
-}
+  }
 
-// Footer with auto height.
+  // Footer with auto height.
-.footer.footer-adjustable {
+  .footer.footer-adjustable {
       height: auto;
-}
+  }
 
-.core-circle:before {
+  .core-circle:before {
     content: ' \25CF';
-}
+  }
 
-@each $color-name, $color-base, $color-contrast in get-colors($colors) {
+  @each $color-name, $color-base, $color-contrast in get-colors($colors) {
     // Message cards.
     .core-#{$color-name}-card {
       @extend ion-card;
@@ -728,34 +720,34 @@ textarea {
     .text-#{$color-name}, p.text-#{$color-name}, .item p.text-#{$color-name}, .card p.text-#{$color-name} {
       color: $color-base;
     }
-}
+  }
 
-.accesshide {
+  .accesshide {
     position: absolute;
     @include position(null, null, null, -10000px);
     font-weight: normal;
     font-size: 1em;
-}
+  }
 
-.core-monospaced {
+  .core-monospaced {
     font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;
-}
+  }
 
 
-.core-white-push-arrow .item-inner{
+  .core-white-push-arrow .item-inner{
       @include push-arrow-color($white);
-}
+  }
 
-// For list where some items have detail icon and some others don't.
+  // For list where some items have detail icon and some others don't.
-.core-list-align-detail-right .item .item-inner {
+  .core-list-align-detail-right .item .item-inner {
       @include padding-horizontal(null, 32px);
-}
+  }
 
-[ion-fixed] {
+  [ion-fixed] {
     width: 100%;
-}
+  }
 
-.core-modal-fullscreen {
+  .core-modal-fullscreen {
     .modal-wrapper {
       position: absolute;
       @include position(0 !important, null, null, 0 !important);
@@ -763,26 +755,26 @@ textarea {
       width: 100% !important;
       height: 100% !important;
     }
-}
+  }
 
-.has-fab .scroll-content{
+  .has-fab .scroll-content{
     padding-bottom: 56px;
-}
+  }
 
-.scroll-content ion-fab {
+  .scroll-content ion-fab {
     position: fixed;
     margin-bottom: 56px;
-}
+  }
 
 
-// For some reason, in iOS the pages don't inherit the background-color from ion-app, set it explicitly.
+  // For some reason, in iOS the pages don't inherit the background-color from ion-app, set it explicitly.
-.ion-page {
+  .ion-page {
     background-color: $background-color;
-}
+  }
 
-// Embed video responsive classes.
+  // Embed video responsive classes.
-// Taken from https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_embed.scss
+  // Taken from https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_embed.scss
-.embed-responsive {
+  .embed-responsive {
     position: relative;
     display: block;
     width: 100%;
@@ -810,33 +802,33 @@ textarea {
       width: 100%;
       height: 100%;
     }
-}
+  }
 
-.embed-responsive-21by9 {
+  .embed-responsive-21by9 {
     &::before {
       padding-top: percentage(9 / 21);
     }
-}
+  }
 
-.embed-responsive-16by9 {
+  .embed-responsive-16by9 {
     &::before {
       padding-top: percentage(9 / 16);
     }
-}
+  }
 
-.embed-responsive-4by3 {
+  .embed-responsive-4by3 {
     &::before {
       padding-top: percentage(3 / 4);
     }
-}
+  }
 
-.embed-responsive-1by1 {
+  .embed-responsive-1by1 {
     &::before {
       padding-top: percentage(1 / 1);
     }
-}
+  }
 
-ion-alert.core-inapp-notification {
+  ion-alert.core-inapp-notification {
     pointer-events: none;
     position: fixed;
     align-items: start;
@@ -871,9 +863,9 @@ ion-alert.core-inapp-notification {
         margin-bottom: 5px;
       }
     }
-}
+  }
 
-.core-icon-with-badge {
+  .core-icon-with-badge {
     position: relative;
 
     .icon {
@@ -889,19 +881,9 @@ ion-alert.core-inapp-notification {
       color: red;
       font-size: 16px;
     }
-}
-
-body.keyboard-is-open {
-    .scroll-content, .fixed-content {
-        margin-bottom: 0 !important;
   }
 
-    core-ion-tabs .tabbar {
+  .item.item-radio, .item.item-checkbox {
-        display: none;
-    }
-}
-
-.item.item-radio, .item.item-checkbox {
     // Fix links and videos in ion-radio and ion-checkbox.
     .input-wrapper {
       position: relative;
@@ -913,9 +895,9 @@ body.keyboard-is-open {
     ion-label {
       white-space: normal;
     }
-}
+  }
 
-.core-no-text-wrap {
+  .core-no-text-wrap {
     white-space: nowrap;
 
     &.item.item-radio, &.item.item-checkbox {
@@ -923,6 +905,27 @@ body.keyboard-is-open {
         white-space: nowrap;
       }
     }
+  }
+
+  // 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.
@@ -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,28 +1,28 @@
-
+ion-app.app-root.wp {
-.button-wp {
+  .button-wp {
     min-height: $button-wp-height;
-}
+  }
 
-// Light buttons color.
+  // Light buttons color.
-.button-wp-light {
+  .button-wp-light {
     color: color($colors, primary, base);
-}
+  }
 
-.col[align-self-stretch] .card-wp {
+  .col[align-self-stretch] .card-wp {
     height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
-}
+  }
 
-.bar-buttons core-context-menu .button-clear-wp {
+  .bar-buttons core-context-menu .button-clear-wp {
     color: $toolbar-wp-button-color;
-}
+  }
 
-.item-wp ion-spinner[item-start] + .item-inner,
+  .item-wp ion-spinner[item-start] + .item-inner,
-.item-wp ion-spinner[item-start] + .item-input {
+  .item-wp ion-spinner[item-start] + .item-input {
     @include margin-horizontal(($item-wp-padding-start / 2), null);
-}
+  }
 
-@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  @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;
 
@@ -34,24 +34,25 @@
         }
       }
     }
-}
+  }
 
-.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.
+  // 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);
     }
-}
+  }
 
-// Recover borders on items inside cards.
+  // Recover borders on items inside cards.
-.card-wp.with-borders  .item-wp.item-block .item-inner {
+  .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 {
+  .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 {
+    .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;
-}
+    }
 
-.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;
+    }
 }

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,4 +1,5 @@
-core-loading {
+ion-app.app-root {
+    core-loading {
         @include core-transition(height, 200ms);
 
         .core-loading-container {
@@ -16,18 +17,18 @@ core-loading {
         &.core-loading-noheight .core-loading-content {
             height: auto;
         }
-}
+    }
 
-.scroll-content > core-loading,
+    .scroll-content > core-loading,
-ion-content > .scroll-content > core-loading,
+    ion-content > .scroll-content > core-loading,
-.core-loading-center {
+    .core-loading-center {
         position: static !important;
-}
+    }
 
-.scroll-content > core-loading,
+    .scroll-content > core-loading,
-ion-content > .scroll-content > core-loading,
+    ion-content > .scroll-content > core-loading,
-.core-loading-center,
+    .core-loading-center,
-core-loading.core-loading-loaded {
+    core-loading.core-loading-loaded {
         position: relative;
 
         > .core-loading-container {
@@ -47,4 +48,5 @@ core-loading.core-loading-loaded {
                 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";