diff --git a/src/addon/calendar/pages/event/event.scss b/src/addon/calendar/pages/event/event.scss deleted file mode 100644 index c3d04186c..000000000 --- a/src/addon/calendar/pages/event/event.scss +++ /dev/null @@ -1,3 +0,0 @@ -page-addon-calendar-event { - -} \ No newline at end of file diff --git a/src/addon/calendar/pages/list/list.scss b/src/addon/calendar/pages/list/list.scss deleted file mode 100644 index 345d0d21c..000000000 --- a/src/addon/calendar/pages/list/list.scss +++ /dev/null @@ -1,3 +0,0 @@ -page-addon-calendar-list { - -} \ No newline at end of file diff --git a/src/addon/calendar/pages/settings/settings.scss b/src/addon/calendar/pages/settings/settings.scss deleted file mode 100644 index 1f837a1e7..000000000 --- a/src/addon/calendar/pages/settings/settings.scss +++ /dev/null @@ -1,3 +0,0 @@ -page-addon-calendar-settings { - -} \ No newline at end of file diff --git a/src/addon/messages/components/contacts/contacts.scss b/src/addon/messages/components/contacts/contacts.scss index ff39202e3..b675c4efc 100644 --- a/src/addon/messages/components/contacts/contacts.scss +++ b/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; diff --git a/src/addon/messages/components/discussions/discussions.scss b/src/addon/messages/components/discussions/discussions.scss index ff39202e3..e6f7b9089 100644 --- a/src/addon/messages/components/discussions/discussions.scss +++ b/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; } } } \ No newline at end of file diff --git a/src/addon/messages/pages/discussion/discussion.scss b/src/addon/messages/pages/discussion/discussion.scss index 8b94e0a1a..aac4cfeea 100644 --- a/src/addon/messages/pages/discussion/discussion.scss +++ b/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; - -page-addon-messages-discussion { +ion-app.app-root 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; } \ No newline at end of file diff --git a/src/addon/messages/pages/settings/settings.scss b/src/addon/messages/pages/settings/settings.scss index 4b0e04a62..138395573 100644 --- a/src/addon/messages/pages/settings/settings.scss +++ b/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; diff --git a/src/addon/mod/assign/components/submission/submission.scss b/src/addon/mod/assign/components/submission/submission.scss index 90c6890e8..874562df0 100644 --- a/src/addon/mod/assign/components/submission/submission.scss +++ b/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; diff --git a/src/addon/mod/book/components/components.module.ts b/src/addon/mod/book/components/components.module.ts index b3db11442..b0ace2f26 100644 --- a/src/addon/mod/book/components/components.module.ts +++ b/src/addon/mod/book/components/components.module.ts @@ -21,13 +21,11 @@ import { CoreDirectivesModule } from '@directives/directives.module'; import { CoreCourseComponentsModule } from '@core/course/components/components.module'; import { AddonModBookIndexComponent } from './index/index'; import { AddonModBookTocPopoverComponent } from './toc-popover/toc-popover'; -import { AddonModBookNavigationArrowsComponent } from './navigation-arrows/navigation-arrows'; @NgModule({ declarations: [ AddonModBookIndexComponent, - AddonModBookTocPopoverComponent, - AddonModBookNavigationArrowsComponent + AddonModBookTocPopoverComponent ], imports: [ CommonModule, @@ -41,8 +39,7 @@ import { AddonModBookNavigationArrowsComponent } from './navigation-arrows/navig ], exports: [ AddonModBookIndexComponent, - AddonModBookTocPopoverComponent, - AddonModBookNavigationArrowsComponent + AddonModBookTocPopoverComponent ], entryComponents: [ AddonModBookIndexComponent, diff --git a/src/addon/mod/book/components/index/addon-mod-book-index.html b/src/addon/mod/book/components/index/addon-mod-book-index.html index 0f9b9a735..32c49d009 100644 --- a/src/addon/mod/book/components/index/addon-mod-book-index.html +++ b/src/addon/mod/book/components/index/addon-mod-book-index.html @@ -18,9 +18,9 @@
- + - +
diff --git a/src/addon/mod/book/components/navigation-arrows/addon-mod-assign-submission-navigation-arrows.html b/src/addon/mod/book/components/navigation-arrows/addon-mod-assign-submission-navigation-arrows.html deleted file mode 100644 index 44e6a24d4..000000000 --- a/src/addon/mod/book/components/navigation-arrows/addon-mod-assign-submission-navigation-arrows.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/addon/mod/book/components/navigation-arrows/navigation-arrows.ts b/src/addon/mod/book/components/navigation-arrows/navigation-arrows.ts deleted file mode 100644 index 64a103f84..000000000 --- a/src/addon/mod/book/components/navigation-arrows/navigation-arrows.ts +++ /dev/null @@ -1,32 +0,0 @@ -// (C) Copyright 2015 Martin Dougiamas -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import { Component, Input, Output, EventEmitter } from '@angular/core'; - -/** - * Component to navigate to previous or next chapter in a book. - */ -@Component({ - selector: 'addon-mod-book-navigation-arrows', - templateUrl: 'addon-mod-assign-submission-navigation-arrows.html' -}) -export class AddonModBookNavigationArrowsComponent { - @Input() previous?: string; // Previous chapter ID. - @Input() next?: string; // Next chapter ID. - @Output() action?: EventEmitter; // Will emit an event when the item clicked. - - constructor() { - this.action = new EventEmitter(); - } -} diff --git a/src/addon/mod/chat/pages/chat/chat.scss b/src/addon/mod/chat/pages/chat/chat.scss index 148f2fe33..fe62c5619 100644 --- a/src/addon/mod/chat/pages/chat/chat.scss +++ b/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; diff --git a/src/addon/mod/chat/pages/users/users.scss b/src/addon/mod/chat/pages/users/users.scss index 20fdf6ae7..43dc18a2c 100644 --- a/src/addon/mod/chat/pages/users/users.scss +++ b/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; } diff --git a/src/addon/mod/feedback/pages/form/form.scss b/src/addon/mod/feedback/pages/form/form.scss index ec55664a2..f4674d933 100644 --- a/src/addon/mod/feedback/pages/form/form.scss +++ b/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%; diff --git a/src/addon/mod/folder/components/index/index.scss b/src/addon/mod/folder/components/index/index.scss index 6c1df1ccc..f2fb207d2 100644 --- a/src/addon/mod/folder/components/index/index.scss +++ b/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; diff --git a/src/addon/mod/forum/components/index/index.scss b/src/addon/mod/forum/components/index/index.scss index 98ef4fffa..5234ac16e 100644 --- a/src/addon/mod/forum/components/index/index.scss +++ b/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; } diff --git a/src/addon/mod/imscp/components/index/index.scss b/src/addon/mod/imscp/components/index/index.scss index 4b4f8dc60..036f1c632 100644 --- a/src/addon/mod/imscp/components/index/index.scss +++ b/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%; diff --git a/src/addon/mod/lesson/components/index/index.scss b/src/addon/mod/lesson/components/index/index.scss deleted file mode 100644 index bee1246fe..000000000 --- a/src/addon/mod/lesson/components/index/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -addon-mod-lesson-index { -} diff --git a/src/addon/mod/lesson/pages/menu-modal/menu-modal.scss b/src/addon/mod/lesson/pages/menu-modal/menu-modal.scss index 8961fc65e..8a686fb9c 100644 --- a/src/addon/mod/lesson/pages/menu-modal/menu-modal.scss +++ b/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; } diff --git a/src/addon/mod/lesson/pages/player/player.scss b/src/addon/mod/lesson/pages/player/player.scss index 2c06d1a8b..f492ff4b3 100644 --- a/src/addon/mod/lesson/pages/player/player.scss +++ b/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%; diff --git a/src/addon/mod/lesson/pages/user-retake/user-retake.scss b/src/addon/mod/lesson/pages/user-retake/user-retake.scss index ed414081f..96cbd5ee3 100644 --- a/src/addon/mod/lesson/pages/user-retake/user-retake.scss +++ b/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 { diff --git a/src/addon/mod/quiz/components/connection-error/connection-error.scss b/src/addon/mod/quiz/components/connection-error/connection-error.scss index 334d83ebf..da4543765 100644 --- a/src/addon/mod/quiz/components/connection-error/connection-error.scss +++ b/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 { diff --git a/src/addon/mod/quiz/components/index/index.scss b/src/addon/mod/quiz/components/index/index.scss index 08f6226a8..1488b3628 100644 --- a/src/addon/mod/quiz/components/index/index.scss +++ b/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 { diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss index b608f4438..a7b609f48 100644 --- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss +++ b/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; diff --git a/src/addon/mod/quiz/pages/player/player.scss b/src/addon/mod/quiz/pages/player/player.scss index 72ddb3b75..0ee54c698 100644 --- a/src/addon/mod/quiz/pages/player/player.scss +++ b/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; diff --git a/src/addon/mod/quiz/pages/review/review.scss b/src/addon/mod/quiz/pages/review/review.scss index 26a67cda3..48a0f092d 100644 --- a/src/addon/mod/quiz/pages/review/review.scss +++ b/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] { diff --git a/src/addon/mod/scorm/components/index/index.scss b/src/addon/mod/scorm/components/index/index.scss index 9cfb94875..67f01dcb6 100644 --- a/src/addon/mod/scorm/components/index/index.scss +++ b/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 { diff --git a/src/addon/mod/scorm/components/toc-popover/toc-popover.scss b/src/addon/mod/scorm/components/toc-popover/toc-popover.scss deleted file mode 100644 index ed116481c..000000000 --- a/src/addon/mod/scorm/components/toc-popover/toc-popover.scss +++ /dev/null @@ -1,3 +0,0 @@ -addon-mod-scorm-toc-popover { - -} diff --git a/src/addon/mod/survey/components/index/index.scss b/src/addon/mod/survey/components/index/index.scss index 1b50cccd2..e8bc5f985 100644 --- a/src/addon/mod/survey/components/index/index.scss +++ b/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; diff --git a/src/addon/mod/wiki/components/index/index.scss b/src/addon/mod/wiki/components/index/index.scss index 538f326da..9b7a2f796 100644 --- a/src/addon/mod/wiki/components/index/index.scss +++ b/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, diff --git a/src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss b/src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss index 62f7e0c44..90c933749 100644 --- a/src/addon/mod/wiki/components/subwiki-picker/subwiki-picker.scss +++ b/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; diff --git a/src/addon/mod/wiki/pages/edit/edit.scss b/src/addon/mod/wiki/pages/edit/edit.scss index ccb35ae13..beb6a63b0 100644 --- a/src/addon/mod/wiki/pages/edit/edit.scss +++ b/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; } diff --git a/src/addon/mod/workshop/components/assessment/assessment.scss b/src/addon/mod/workshop/components/assessment/assessment.scss index 9ed4dbcc5..bacc18ee2 100644 --- a/src/addon/mod/workshop/components/assessment/assessment.scss +++ b/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; } diff --git a/src/addon/mod/workshop/components/submission/submission.scss b/src/addon/mod/workshop/components/submission/submission.scss index 9c1f97329..2dac5ff4e 100644 --- a/src/addon/mod/workshop/components/submission/submission.scss +++ b/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; } diff --git a/src/addon/mod/workshop/pages/phase/phase.scss b/src/addon/mod/workshop/pages/phase/phase.scss index 39b922678..6b909c4ea 100644 --- a/src/addon/mod/workshop/pages/phase/phase.scss +++ b/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); diff --git a/src/addon/notifications/pages/settings/settings.scss b/src/addon/notifications/pages/settings/settings.scss index 354425bb6..7b132cda9 100644 --- a/src/addon/notifications/pages/settings/settings.scss +++ b/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; diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss index 4d135f461..8684dbd18 100644 --- a/src/app/app.ios.scss +++ b/src/app/app.ios.scss @@ -1,134 +1,141 @@ - -.button-ios { - 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); - } - } +ion-app.app-root.ios { + .button-ios { + min-height: $button-ios-height } -} -.ios .core-avoid-header ion-content { - top: $navbar-ios-height; - height: calc(100% - #{($navbar-ios-height)}); -} + // Light buttons color. + .button-ios-light { + color: color($colors, primary, base); + } -.platform-cordova.ios .core-avoid-header ion-content.statusbar-padding, -.platform-cordova.ios .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)}); -} + .col[align-self-stretch] .card-ios { + height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)}); + } -.platform-cordova.ios .core-avoid-header .core-avoid-header .menu-inner > ion-content, -.platform-cordova.ios core-tab core-split-view .core-avoid-header .menu-inner > ion-content { - top: 0; - height: 100%; -} + .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); + } -// 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) + @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + .core-#{$color-name}-card { + @extend .card-ios ; + @extend .card-content-ios; - // 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); + &[icon-start] { + @include padding(null, null, null, $card-ios-padding-left * 2 + 20); - .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; + ion-icon { + @include position(null, null, null, $card-ios-padding-left); + } } } } - .item-ios.item-input { - .item-inner { - border: 0; + .core-avoid-header ion-content { + top: $navbar-ios-height; + 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 { - border-bottom: $hairlines-width solid $list-border-color; - } + .item-ios.item-input { + .item-inner { + border: 0; + } - // TODO remove all uses of input-has-focus in v4 - &.item-input-has-focus .item-inner ion-input, - &.input-has-focus .item-inner ion-input { - @include ios-input-highlight($text-input-ios-highlight-color); - } + &.item-block .item-inner ion-input { + border-bottom: $hairlines-width solid $list-border-color; + } - // Show the valid highlight when it has the .ng-valid class and a value - &.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 ios-input-highlight($text-input-ios-highlight-color-valid); - } + // TODO remove all uses of input-has-focus in v4 + &.item-input-has-focus .item-inner ion-input, + &.input-has-focus .item-inner ion-input { + @include ios-input-highlight($text-input-ios-highlight-color); + } - // 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); + // Show the valid highlight when it has the .ng-valid class and a value + &.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 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. -@for $i from 0 through 15 { - .ios .core-padding-#{$i} { - @include padding(null, null, null, 15px * $i + $item-ios-padding-start); + // Different levels of padding. + @for $i from 0 through 15 { + .core-padding-#{$i} { + @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; + } } \ No newline at end of file diff --git a/src/app/app.md.scss b/src/app/app.md.scss index 3a9d43320..c183e0c3c 100644 --- a/src/app/app.md.scss +++ b/src/app/app.md.scss @@ -1,123 +1,123 @@ - -.button-md { - 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); - } - } +ion-app.app-root.md { + .button-md { + min-height: $button-md-height; } -} -.md .core-avoid-header ion-content { - top: $navbar-md-height; - height: calc(100% - #{($navbar-md-height)}); -} + // Light buttons color. + .button-md-light { + color: color($colors, primary, base); + } -// 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) + .col[align-self-stretch] .card-md { + height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)}); + } - // 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); + .bar-buttons core-context-menu .button-clear-md { + color: $toolbar-md-button-color; + } - .item-inner ion-input { - box-shadow: none; - } - } + .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); + } - .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); + @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + .core-#{$color-name}-card { + @extend .card-md; + @extend .card-content-md; - .item-inner ion-input { - box-shadow: none; - } - } + &[icon-start] { + @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 { - @include md-input-highlight($text-input-md-highlight-color-invalid); - - .item-inner ion-input { - box-shadow: none; + ion-icon { + @include position(null, null, null, $card-md-padding-left); + } } } } - .item-md.item-input { - .item-inner { - border: 0; + .core-avoid-header ion-content { + top: $navbar-md-height; + 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 { - border-bottom: 1px solid $list-border-color; - } + .item-md.item-input { + .item-inner { + border: 0; + } - // TODO remove all uses of input-has-focus in v4 - &.item-input-has-focus .item-inner ion-input, - &.input-has-focus .item-inner ion-input { - @include md-input-highlight($text-input-md-highlight-color); - } + &.item-block .item-inner ion-input { + border-bottom: 1px solid $list-border-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-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); - } + // TODO remove all uses of input-has-focus in v4 + &.item-input-has-focus .item-inner ion-input, + &.input-has-focus .item-inner ion-input { + @include md-input-highlight($text-input-md-highlight-color); + } - // 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); + // 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-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. -@for $i from 0 through 15 { - .md .core-padding-#{$i} { - @include padding(null, null, null, 15px * $i + $item-md-padding-start); + // Different levels of padding. + @for $i from 0 through 15 { + .core-padding-#{$i} { + @include padding(null, null, null, 15px * $i + $item-md-padding-start); + } } -} - -// Recover borders on items inside cards. -.card-md.with-borders .item-md.item-block .item-inner { - border-bottom: 1px solid $list-md-border-color; -} -.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; + } } \ No newline at end of file diff --git a/src/app/app.scss b/src/app/app.scss index 17509e20f..59e4bfb88 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -18,905 +18,913 @@ // Alignment // ------------------------- -.text-left { text-align: left; } -.text-right { text-align: right; } -.text-center { text-align: center; } -.text-justify { text-align: justify; } -.clearfix { - &:after { - content: ""; - display: table; - clear: both; - } -} -.img-responsive { - display: block; - max-width: 100%; -} - -.opacity-hide { opacity: 0; } -.core-big { font-size: 115%; } -.invisible { visibility: hidden; } - -.button-no-uppercase { - text-transform: none; -} - -@include media-breakpoint-up(sm) { - .core-center-view .scroll-content { - display: flex!important; - align-content: center !important; - align-items: center !important; - > * { - margin: 0 auto; - max-width: 600px; +ion-app.app-root { + .text-left { text-align: left; } + .text-right { text-align: right; } + .text-center { text-align: center; } + .text-justify { text-align: justify; } + .clearfix { + &:after { + content: ""; + display: table; + clear: both; } } -} - -@include media-breakpoint-down(sm) { - .hidden-phone { - display: none !important; - opacity: 0 !important; + .img-responsive { + display: block; + max-width: 100%; } -} -@include media-breakpoint-up(md) { - .hidden-tablet { - display: none !important; - opacity: 0 !important; + .opacity-hide { opacity: 0; } + .core-big { font-size: 115%; } + .invisible { visibility: hidden; } + + .button-no-uppercase { + text-transform: none; } -} -@mixin core-headings() { - h1 { - font-size: 3rem; - } - h2 { - font-size: 2.8rem; - } - h3 { - font-size: 2.6rem; - } - h4 { - font-size: 2.2rem; - } - h5 { - font-size: 1.8rem; - } - 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. -.item .item-heading { - @extend h6; - margin: 0; -} - -.item-dimmed { - opacity: 0.71; -} - -.item-radio-checked { - background-color: $gray-lighter; -} - -// Make no-lines work in any element, not just ion-item and ion-list. -.item *[no-lines] .item-inner, -*[no-lines] .item .item-inner { - border: 0; -} - -.core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon { - min-height: 32px; - img, .label { - max-height: 32px; - vertical-align: middle; - } - img { - max-width: 32px; - } - .label { - @include margin(null, null, null, 5px); - color: $gray-darker; - } -} - -.core-bold, .core-bold .label { - font-weight: bold; -} - -.core-module-icon { - width: auto; -} - -.core-button-spinner { - min-height: 44px; - min-width: 50px; - text-align: center; - - .spinner { - margin-top: 8px; - } -} - -// Avatar -// ------------------------- -// Large centered avatar -.item-avatar-center { - text-align: center; - - &.item-complex .item-content { - text-align: center; - @include padding(null, null, null, 49px); + @include media-breakpoint-up(sm) { + .core-center-view .scroll-content { + display: flex!important; + align-content: center !important; + align-items: center !important; + > * { + margin: 0 auto; + max-width: 600px; + } } + } - > img:first-child, - ion-avatar img, + @include media-breakpoint-down(sm) { + .hidden-phone { + display: none !important; + opacity: 0 !important; + } + } + + @include media-breakpoint-up(md) { + .hidden-tablet { + display: none !important; + opacity: 0 !important; + } + } + + @mixin core-headings() { + h1 { + font-size: 3rem; + } + h2 { + font-size: 2.8rem; + } + h3 { + font-size: 2.6rem; + } + h4 { + font-size: 2.2rem; + } + h5 { + font-size: 1.8rem; + } + 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. + .item .item-heading { + @extend h6; + margin: 0; + } + + .item-dimmed { + opacity: 0.71; + } + + .item-radio-checked { + background-color: $gray-lighter; + } + + // Make no-lines work in any element, not just ion-item and ion-list. + .item *[no-lines] .item-inner, + *[no-lines] .item .item-inner { + border: 0; + } + + .core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon { + min-height: 32px; + img, .label { + max-height: 32px; + vertical-align: middle; + } img { - display: block; - margin: auto; - width: 90px; - height: 90px; - max-width: 90px; - max-height: 90px; - margin-bottom: 10px; - border-radius : 50%; - padding: 4px; - border: 1px solid #ddd; - - &.avatar-full { - border-radius: 2%; - border: 0; - max-width: 100%; - max-height: 160px; - width: auto; - height: auto; - } + max-width: 32px; + } + .label { + @include margin(null, null, null, 5px); + color: $gray-darker; } -} - -ion-avatar ion-img, ion-avatar img { - text-indent: -99999px; - background-color: $gray-light; -} - -// Form items -// ------------------------- - -.item .core-input-footnote { - width: 100%; - padding-top: 10px; - padding-bottom: 10px; - font-style: italic; -} - -ion-datetime { - position: relative; -} - -input { - @include rtl() { - text-align: right; } -} + .core-bold, .core-bold .label { + font-weight: bold; + } - -/** Format Text */ -core-format-text[maxHeight], -core-format-text[ng-reflect-max-height] { - display: block; - position: relative; - width: 100%; - overflow: hidden; - - /* Force display inline */ - &.inline { - display: inline-block; + .core-module-icon { width: auto; } - // This is to allow clicks in radio/checkbox content. - &.core-text-formatted { - cursor: pointer; - pointer-events: auto; + .core-button-spinner { + min-height: 44px; + min-width: 50px; + text-align: center; - .core-show-more { - display: none; - } - - &:not(.core-shortened) { - max-height: none !important; - } - - &.core-shortened { - color: $gray-darker; - overflow: hidden; - min-height: 50px; - - .core-show-more { - color: color($colors, dark); - text-align: right; - font-size: 14px; - display: block; - position: absolute; - @include position(null, 0, 0, null); - z-index: 1001; - background-color: $white; - @include padding(null, null, null, 10px); - } - - &:before { - content: ''; - height: 100%; - position: absolute; - @include position(null, 0, 0, 0); - background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); - background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white)); - background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); - background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); - background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); - z-index: 1000; - } + .spinner { + margin-top: 8px; } } - &.core-expand-in-fullview { - .core-show-more { - @include svg-background-image($item-md-detail-push-svg, true); - @include padding-horizontal(null, 18px); - @include background-position(end, 0, center); + // Avatar + // ------------------------- + // Large centered avatar + .item-avatar-center { + text-align: center; - background-repeat: no-repeat; - background-size: 14px 14px; + &.item-complex .item-content { + text-align: center; + @include padding(null, null, null, 49px); + } + + > img:first-child, + ion-avatar img, + img { + display: block; + margin: auto; + width: 90px; + height: 90px; + max-width: 90px; + max-height: 90px; + margin-bottom: 10px; + border-radius : 50%; + padding: 4px; + border: 1px solid #ddd; + + &.avatar-full { + border-radius: 2%; + border: 0; + max-width: 100%; + max-height: 160px; + width: auto; + height: auto; + } + } + } + + ion-avatar ion-img, ion-avatar img { + text-indent: -99999px; + background-color: $gray-light; + } + + // Form items + // ------------------------- + + .item .core-input-footnote { + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + font-style: italic; + } + + ion-datetime { + position: relative; + } + + input { + @include rtl() { + text-align: right; } } -} -core-format-text[singleLine="true"], -core-format-text[ng-reflect-single-line="true"] { - cursor: pointer; - pointer-events: auto; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + + + /** Format Text */ + core-format-text[maxHeight], + core-format-text[ng-reflect-max-height] { display: block; position: relative; width: 100%; -} + overflow: hidden; -.core-media-adapt-width { - max-width: 100%; -} - -img.core-media-adapt-width { - height: auto; -} - -audio.core-media-adapt-width { - width: 100%; -} - -.core-adapted-img-container { - position: relative; - display: inline-block; - width: 100%; -} - -.core-image-viewer-icon { - position: absolute; - @include position(null, 10px, 10px, null); - color: $black; - border-radius: 5px; - background: rgba(255, 255, 255, .5); - text-align: center; - - width: 32px; - height: 32px; - max-width: 32px; - line-height: 32px; - font-size: 24px; - ion-icon { - font-size: 24px; - } -} - -core-format-text { - audio, video, a, iframe { - pointer-events: auto; - } - - // Fix lists styles in core-format-text. - ul { - list-style-type: disc; - } - ol { - list-style-type: decimal; - } - ul, ol { - -webkit-padding-start: 15px; - list-style-position: inside; - ul { - list-style-type: circle; + /* Force display inline */ + &.inline { + display: inline-block; + width: auto; } - ol { - list-style-type: lower-latin; + + // This is to allow clicks in radio/checkbox content. + &.core-text-formatted { + cursor: pointer; + pointer-events: auto; + + .core-show-more { + display: none; + } + + &:not(.core-shortened) { + max-height: none !important; + } + + &.core-shortened { + color: $gray-darker; + overflow: hidden; + min-height: 50px; + + .core-show-more { + color: color($colors, dark); + text-align: right; + font-size: 14px; + display: block; + position: absolute; + @include position(null, 0, 0, null); + z-index: 1001; + background-color: $white; + @include padding(null, null, null, 10px); + } + + &:before { + content: ''; + height: 100%; + position: absolute; + @include position(null, 0, 0, 0); + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); + background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white)); + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); + background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); + background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); + z-index: 1000; + } + } } - ul, ol { - list-style-position: inside; - @include margin(null, null, null, 15px); - } - } - .badge { - position: initial !important; - } + &.core-expand-in-fullview { + .core-show-more { + @include svg-background-image($item-md-detail-push-svg, true); + @include padding-horizontal(null, 18px); + @include background-position(end, 0, center); - .core-disable-media-adapt, - .core-disable-media-adapt .core-media-adapt-width { - max-width: none !important; - max-height: none !important; - width: initial !important; - height: initial !important; - display: inline-block !important; - } - - @include core-headings(); -} - -.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. -ion-card core-format-text img { - width: min-content; - display: inline; -} - -// Message item. -.item-message { - core-format-text > p:only-child { - display: inline; - } -} - -// Media item, ideal for icons. -.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. -ion-select { - position: relative; -} - -ion-col ion-select { - @include float(end); - max-width: none; - width: 100%; - .select-text { - white-space: normal; - text-align: right; - } -} - - -:not(.item) > * > * > ion-select, -.core-button-select { - background-color: white; - color: $core-color; - white-space: normal; - align-self: start; - max-width: none; - - &.select-md, - &.button-md { - background: $card-md-background-color; - box-shadow: $card-md-box-shadow; - } - - &.select-ios, - &.button-ios { - background: $card-ios-background-color; - box-shadow: $card-ios-box-shadow; - } - - &.select-wp, - &.button-wp { - background: $card-wp-background-color; - box-shadow: $card-wp-box-shadow; - } - - .select-text { - white-space: normal; - } - - .button-inner { - justify-content: start; - } - - .select-icon .select-icon-inner { - color: $core-color; - } - - ion-icon:last-child { - @include margin(null, null, null, 5px); - text-align: right; - flex-grow: 2; - } -} - - - -// File uploader. -// ------------------------- - -.core-fileuploader-file-handler { - position: relative; - - input { - position: absolute; - @include position(null, 0, 0, null); - min-width: 100%; - min-height: 100%; - opacity: 0; - outline: none; - z-index: 100; - cursor: pointer; - } -} - -// Question. -// ------------------------- - -.core-question-answer-correct, -.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-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 { - background-color: $core-question-feedback-color-bg; - color: $core-question-feedback-color; - - .specificfeedback, .rightanswer, .im-feedback, .feedback, .generalfeedback { - margin: 0 0 .5em; - } - - .correctness { - display: inline-block; - padding: 2px 4px; - font-weight: bold; - line-height: 14px; - color: $white; - text-shadow: 0 -1px 0 rgba(0,0,0,0.25); - background-color: $gray-dark; - -webkit-border-radius: 3px; - border-radius: 3px; - - &.incorrect { - background-color: $red; - } - &.correct { - background-color: $green; - } - } -} - -.core-question-feedback-inline { - display: inline-block; -} - -.core-question-feedback-padding { - @include padding(8px, 35px, 8px, 14px); -} - -.core-question-correct { - background-color: $core-question-state-correct-color; -} -.core-question-partiallycorrect { - background-color: $core-question-state-partial-color; -} -.core-question-notanswered, -.core-question-incorrect { - background-color: $core-question-state-incorrect-color; -} -.core-question-answersaved { - color: $text-color; - background-color: $core-question-saved-color-bg; -} - -.core-question-warning { - color: $core-question-warning-color; -} - -.questioncorrectnessicon, -.fa.icon.questioncorrectnessicon { - font-size: 20px; -} - -// Atto styles -// ------------------------- -.atto_image_preview { - width: 100%; - height: 100%; - margin-left: auto; - margin-right: auto; -} - -.atto_image_preview_box { - max-height: 200px; - margin-bottom: 1em; - overflow: auto; -} - -.editor_atto_content img { - cursor: pointer; -} - -.atto_image_size { - display: inline-block; -} - -.atto_image_size input[type=checkbox] { - @include margin(null, 1em, null, 1em); -} - -.atto_image_size input[type=text] { - width: 3em; -} - -.atto_image_size label { - display: inline-block; -} - -.atto_image_button_text-top { - vertical-align: text-top; - margin: 0 0.5em; -} - -.atto_image_button_middle { - vertical-align: middle; - margin: 0 0.5em; -} - -.atto_image_button_text-bottom { - vertical-align: text-bottom; - margin: 0 0.5em; -} - -.atto_image_button_text-top.img-responsive, -.atto_image_button_middle.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*/ -.atto_image_button_left { - @include float(start); - @include margin(0, 0.5em, 0, 0); - max-width: calc(100% - 1em); -} - -.atto_image_button_right { - @include float(end); - @include margin(0, 0, 0, 0.5em); - max-width: calc(100% - 1em); -} -/*rtl:end:ignore*/ - -.action-sheet-group { - overflow: auto; -} -.alert-message { - overflow-y: auto; -} - -ion-toast.core-toast-success .toast-wrapper{ - background: $green-dark; -} - -ion-toast.core-toast-alert .toast-wrapper{ - background: $red-dark; -} - -textarea { - width: 100%; - resize: none; - - &[core-auto-rows] { - height: auto; - line-height: 18px; - padding: 5px; - } - - &:not([core-auto-rows]) { - height: 200px; - min-height: $core-rte-min-height; - } -} - -.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.footer-adjustable { - height: auto; -} - -.core-circle:before { - content: ' \25CF'; -} - -@each $color-name, $color-base, $color-contrast in get-colors($colors) { - // Message cards. - .core-#{$color-name}-card { - @extend ion-card; - border-bottom: 3px solid $color-base; - - &[icon-start] { - @include padding(null, null, null, 52px); - position: relative; - - ion-icon { - color: $color-base; - position: absolute; - @include position(0, null, null, 16px) - height: 100%; - font-size: 24px; - display: flex; - align-items: center; + background-repeat: no-repeat; + background-size: 14px 14px; } } } - .core-#{$color-name}-item { - border-bottom: 3px solid $color-base !important; + core-format-text[singleLine="true"], + core-format-text[ng-reflect-single-line="true"] { + cursor: pointer; + pointer-events: auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + position: relative; + width: 100%; + } + + .core-media-adapt-width { + max-width: 100%; + } + + img.core-media-adapt-width { + height: auto; + } + + audio.core-media-adapt-width { + width: 100%; + } + + .core-adapted-img-container { + position: relative; + display: inline-block; + width: 100%; + } + + .core-image-viewer-icon { + position: absolute; + @include position(null, 10px, 10px, null); + color: $black; + border-radius: 5px; + background: rgba(255, 255, 255, .5); + text-align: center; + + width: 32px; + height: 32px; + max-width: 32px; + line-height: 32px; + font-size: 24px; ion-icon { + font-size: 24px; + } + } + + core-format-text { + audio, video, a, iframe { + pointer-events: auto; + } + + // Fix lists styles in core-format-text. + ul { + list-style-type: disc; + } + ol { + list-style-type: decimal; + } + ul, ol { + -webkit-padding-start: 15px; + list-style-position: inside; + ul { + list-style-type: circle; + } + ol { + list-style-type: lower-latin; + } + ul, ol { + list-style-position: inside; + @include margin(null, null, null, 15px); + } + } + + .badge { + position: initial !important; + } + + .core-disable-media-adapt, + .core-disable-media-adapt .core-media-adapt-width { + max-width: none !important; + max-height: none !important; + width: initial !important; + height: initial !important; + display: inline-block !important; + } + + @include core-headings(); + } + + .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. + ion-card core-format-text img { + width: min-content; + display: inline; + } + + // Message item. + .item-message { + core-format-text > p:only-child { + display: inline; + } + } + + // Media item, ideal for icons. + .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. + ion-select { + position: relative; + } + + ion-col ion-select { + @include float(end); + max-width: none; + width: 100%; + .select-text { + white-space: normal; + text-align: right; + } + } + + :not(.item) > * > * > ion-select, + .core-button-select { + background-color: white; + color: $core-color; + white-space: normal; + align-self: start; + max-width: none; + + &.select-md, + &.button-md { + background: $card-md-background-color; + box-shadow: $card-md-box-shadow; + } + + &.select-ios, + &.button-ios { + background: $card-ios-background-color; + box-shadow: $card-ios-box-shadow; + } + + &.select-wp, + &.button-wp { + background: $card-wp-background-color; + box-shadow: $card-wp-box-shadow; + } + + .select-text { + white-space: normal; + } + + .button-inner { + justify-content: start; + } + + .select-icon .select-icon-inner { + color: $core-color; + } + + ion-icon:last-child { + @include margin(null, null, null, 5px); + text-align: right; + flex-grow: 2; + } + } + + + + // File uploader. + // ------------------------- + .core-fileuploader-file-handler { + position: relative; + + input { + position: absolute; + @include position(null, 0, 0, null); + min-width: 100%; + min-height: 100%; + opacity: 0; + outline: none; + z-index: 100; + cursor: pointer; + } + } + + // Question. + // ------------------------- + + .core-question-answer-correct, + .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-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 { + background-color: $core-question-feedback-color-bg; + color: $core-question-feedback-color; + + .specificfeedback, .rightanswer, .im-feedback, .feedback, .generalfeedback { + margin: 0 0 .5em; + } + + .correctness { + display: inline-block; + padding: 2px 4px; + font-weight: bold; + line-height: 14px; + color: $white; + text-shadow: 0 -1px 0 rgba(0,0,0,0.25); + background-color: $gray-dark; + -webkit-border-radius: 3px; + border-radius: 3px; + + &.incorrect { + background-color: $red; + } + &.correct { + background-color: $green; + } + } + } + + .core-question-feedback-inline { + display: inline-block; + } + + .core-question-feedback-padding { + @include padding(8px, 35px, 8px, 14px); + } + + .core-question-correct { + background-color: $core-question-state-correct-color; + } + .core-question-partiallycorrect { + background-color: $core-question-state-partial-color; + } + .core-question-notanswered, + .core-question-incorrect { + background-color: $core-question-state-incorrect-color; + } + .core-question-answersaved { + color: $text-color; + background-color: $core-question-saved-color-bg; + } + + .core-question-warning { + color: $core-question-warning-color; + } + + .questioncorrectnessicon, + .fa.icon.questioncorrectnessicon { + font-size: 20px; + } + + // Atto styles + // ------------------------- + .atto_image_preview { + width: 100%; + height: 100%; + margin-left: auto; + margin-right: auto; + } + + .atto_image_preview_box { + max-height: 200px; + margin-bottom: 1em; + overflow: auto; + } + + .editor_atto_content img { + cursor: pointer; + } + + .atto_image_size { + display: inline-block; + } + + .atto_image_size input[type=checkbox] { + @include margin(null, 1em, null, 1em); + } + + .atto_image_size input[type=text] { + width: 3em; + } + + .atto_image_size label { + display: inline-block; + } + + .atto_image_button_text-top { + vertical-align: text-top; + margin: 0 0.5em; + } + + .atto_image_button_middle { + vertical-align: middle; + margin: 0 0.5em; + } + + .atto_image_button_text-bottom { + vertical-align: text-bottom; + margin: 0 0.5em; + } + + .atto_image_button_text-top.img-responsive, + .atto_image_button_middle.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*/ + .atto_image_button_left { + @include float(start); + @include margin(0, 0.5em, 0, 0); + max-width: calc(100% - 1em); + } + + .atto_image_button_right { + @include float(end); + @include margin(0, 0, 0, 0.5em); + max-width: calc(100% - 1em); + } + /*rtl:end:ignore*/ + + .action-sheet-group { + overflow: auto; + } + .alert-message { + overflow-y: auto; + } + + ion-toast.core-toast-success .toast-wrapper{ + background: $green-dark; + } + + ion-toast.core-toast-alert .toast-wrapper{ + background: $red-dark; + } + + textarea { + width: 100%; + resize: none; + + &[core-auto-rows] { + height: auto; + line-height: 18px; + padding: 5px; + } + + &:not([core-auto-rows]) { + height: 200px; + min-height: $core-rte-min-height; + } + } + + .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.footer-adjustable { + height: auto; + } + + .core-circle:before { + content: ' \25CF'; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors) { + // Message cards. + .core-#{$color-name}-card { + @extend ion-card; + border-bottom: 3px solid $color-base; + + &[icon-start] { + @include padding(null, null, null, 52px); + position: relative; + + ion-icon { + color: $color-base; + position: absolute; + @include position(0, null, null, 16px) + height: 100%; + font-size: 24px; + display: flex; + align-items: center; + } + } + } + + .core-#{$color-name}-item { + border-bottom: 3px solid $color-base !important; + ion-icon { + color: $color-base; + } + } + + .core-#{$color-name}-circle { + margin: 0 4px; + } + + .core-#{$color-name}-circle:before { + @extend .core-circle:before; + color: $color-base; + } + + .text-#{$color-name}, p.text-#{$color-name}, .item p.text-#{$color-name}, .card p.text-#{$color-name} { color: $color-base; } } - .core-#{$color-name}-circle { - margin: 0 4px; - } - - .core-#{$color-name}-circle:before { - @extend .core-circle:before; - color: $color-base; - } - - .text-#{$color-name}, p.text-#{$color-name}, .item p.text-#{$color-name}, .card p.text-#{$color-name} { - color: $color-base; - } -} - -.accesshide { - position: absolute; - @include position(null, null, null, -10000px); - font-weight: normal; - font-size: 1em; -} - -.core-monospaced { - font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace; -} - - -.core-white-push-arrow .item-inner{ - @include push-arrow-color($white); -} - -// For list where some items have detail icon and some others don't. -.core-list-align-detail-right .item .item-inner { - @include padding-horizontal(null, 32px); -} - -[ion-fixed] { - width: 100%; -} - -.core-modal-fullscreen { - .modal-wrapper { + .accesshide { position: absolute; - @include position(0 !important, null, null, 0 !important); - display: block; - width: 100% !important; - height: 100% !important; - } -} - -.has-fab .scroll-content{ - padding-bottom: 56px; -} - -.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. -.ion-page { - background-color: $background-color; -} - -// Embed video responsive classes. -// Taken from https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_embed.scss -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; - - &::before { - display: block; - content: ""; + @include position(null, null, null, -10000px); + font-weight: normal; + font-size: 1em; } - .embed-responsive-item, - iframe, - embed, - object, - video { - position: absolute; - @include position(0, null, 0, 0); + .core-monospaced { + font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace; + } + + + .core-white-push-arrow .item-inner{ + @include push-arrow-color($white); + } + + // For list where some items have detail icon and some others don't. + .core-list-align-detail-right .item .item-inner { + @include padding-horizontal(null, 32px); + } + + [ion-fixed] { width: 100%; - height: 100%; - border: 0; } - iframe iframe { - width: 100%; - height: 100%; - } -} - -.embed-responsive-21by9 { - &::before { - padding-top: percentage(9 / 21); - } -} - -.embed-responsive-16by9 { - &::before { - padding-top: percentage(9 / 16); - } -} - -.embed-responsive-4by3 { - &::before { - padding-top: percentage(3 / 4); - } -} - -.embed-responsive-1by1 { - &::before { - padding-top: percentage(1 / 1); - } -} - -ion-alert.core-inapp-notification { - pointer-events: none; - position: fixed; - align-items: start; - - ion-backdrop { - display: none; - } - - .alert-wrapper { - width: $toast-width; - max-width: $toast-max-width; - box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); - padding: 2px 0; - border-radius: 0; - pointer-events: auto; - } - - .alert-head { - padding: 5px 10px; - text-align: left; - h2 { - font-size: 14px; + .core-modal-fullscreen { + .modal-wrapper { + position: absolute; + @include position(0 !important, null, null, 0 !important); + display: block; + width: 100% !important; + height: 100% !important; } } - .alert-message { - padding: 5px 10px; - text-align: left; - p { - font-size: 14px; - margin-top: 5px; - margin-bottom: 5px; + .has-fab .scroll-content{ + padding-bottom: 56px; + } + + .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. + .ion-page { + background-color: $background-color; + } + + // Embed video responsive classes. + // Taken from https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_embed.scss + .embed-responsive { + position: relative; + display: block; + width: 100%; + padding: 0; + overflow: hidden; + + &::before { + display: block; + content: ""; } + + .embed-responsive-item, + iframe, + embed, + object, + video { + position: absolute; + @include position(0, null, 0, 0); + width: 100%; + height: 100%; + border: 0; + } + + iframe iframe { + width: 100%; + height: 100%; + } + } + + .embed-responsive-21by9 { + &::before { + padding-top: percentage(9 / 21); + } + } + + .embed-responsive-16by9 { + &::before { + padding-top: percentage(9 / 16); + } + } + + .embed-responsive-4by3 { + &::before { + padding-top: percentage(3 / 4); + } + } + + .embed-responsive-1by1 { + &::before { + padding-top: percentage(1 / 1); + } + } + + ion-alert.core-inapp-notification { + pointer-events: none; + position: fixed; + align-items: start; + + ion-backdrop { + display: none; + } + + .alert-wrapper { + width: $toast-width; + max-width: $toast-max-width; + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); + padding: 2px 0; + border-radius: 0; + pointer-events: auto; + } + + .alert-head { + padding: 5px 10px; + text-align: left; + h2 { + font-size: 14px; + } + } + + .alert-message { + padding: 5px 10px; + text-align: left; + p { + font-size: 14px; + margin-top: 5px; + margin-bottom: 5px; + } + } + } + + .core-icon-with-badge { + position: relative; + + .icon { + font-size: 32px; + } + + .core-icon-badge { + width: auto; + height: auto; + margin: 0; + position: absolute; + @include position(-18px, -8px, null, null); + color: red; + font-size: 16px; + } + } + + .item.item-radio, .item.item-checkbox { + // Fix links and videos in ion-radio and ion-checkbox. + .input-wrapper { + position: relative; + z-index: 5; + pointer-events: none; + } + + // Show whole text on options. + ion-label { + white-space: normal; + } + } + + .core-no-text-wrap { + white-space: nowrap; + + &.item.item-radio, &.item.item-checkbox { + ion-label { + white-space: nowrap; + } + } + } + + // Fix modals displayed over action sheet. + .disable-scroll ion-modal .ion-page { + pointer-events: initial; } } -.core-icon-with-badge { - position: relative; - - .icon { - font-size: 32px; - } - - .core-icon-badge { - width: auto; - height: auto; - margin: 0; - position: absolute; - @include position(-18px, -8px, null, null); - color: red; - font-size: 16px; - } +[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; - } -} - -.item.item-radio, .item.item-checkbox { - // Fix links and videos in ion-radio and ion-checkbox. - .input-wrapper { - position: relative; - z-index: 5; - pointer-events: none; + .scroll-content, .fixed-content { + margin-bottom: 0 !important; } - // Show whole text on options. - ion-label { - white-space: normal; - } -} - -.core-no-text-wrap { - white-space: nowrap; - - &.item.item-radio, &.item.item-checkbox { - ion-label { - white-space: nowrap; - } + core-ion-tabs .tabbar { + display: none; } } @@ -936,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; -} diff --git a/src/app/app.wp.scss b/src/app/app.wp.scss index 040a4560c..f8156ec7c 100644 --- a/src/app/app.wp.scss +++ b/src/app/app.wp.scss @@ -1,57 +1,58 @@ +ion-app.app-root.wp { + .button-wp { + min-height: $button-wp-height; + } -.button-wp { - min-height: $button-wp-height; -} + // Light buttons color. + .button-wp-light { + color: color($colors, primary, base); + } -// Light buttons color. -.button-wp-light { - color: color($colors, primary, base); -} + .col[align-self-stretch] .card-wp { + height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)}); + } -.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 { + color: $toolbar-wp-button-color; + } -.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-input { + @include margin-horizontal(($item-wp-padding-start / 2), null); + } -.item-wp ion-spinner[item-start] + .item-inner, -.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) { + .core-#{$color-name}-card { + @extend .card-wp ; + @extend .card-content-wp; -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - .wp .core-#{$color-name}-card { - @extend .card-wp ; - @extend .card-content-wp; + &[icon-start] { + @include padding(null, null, null, $card-wp-padding-left * 2 + 20); - &[icon-start] { - @include padding(null, null, null, $card-wp-padding-left * 2 + 20); - - ion-icon { - @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 { - top: $navbar-wp-height; - height: calc(100% - #{($navbar-wp-height)}); -} - -// Different levels of padding. -@for $i from 0 through 15 { - .wp .core-padding-#{$i} { - @include padding(null, null, null, 15px * $i + $item-wp-padding-start); + .core-avoid-header ion-content { + top: $navbar-wp-height; + height: calc(100% - #{($navbar-wp-height)}); } -} -// 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; + // Different levels of padding. + @for $i from 0 through 15 { + .core-padding-#{$i} { + @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; + } } \ No newline at end of file diff --git a/src/components/chart/chart.scss b/src/components/chart/chart.scss index 0194f1f9b..ea587bc90 100644 --- a/src/components/chart/chart.scss +++ b/src/components/chart/chart.scss @@ -1,4 +1,4 @@ -core-chart { +ion-app.app-root core-chart { display: block; canvas { diff --git a/src/components/context-menu/context-menu.scss b/src/components/context-menu/context-menu.scss index 9730ca1e4..138e4b4c7 100644 --- a/src/components/context-menu/context-menu.scss +++ b/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); diff --git a/src/components/context-menu/core-context-menu.html b/src/components/context-menu/core-context-menu.html index 523970a63..262bb3256 100644 --- a/src/components/context-menu/core-context-menu.html +++ b/src/components/context-menu/core-context-menu.html @@ -1,4 +1,4 @@ - \ No newline at end of file diff --git a/src/components/empty-box/empty-box.scss b/src/components/empty-box/empty-box.scss index 4d493c020..2dbb4f072 100644 --- a/src/components/empty-box/empty-box.scss +++ b/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); diff --git a/src/components/file/file.scss b/src/components/file/file.scss index d39844487..2c594deff 100644 --- a/src/components/file/file.scss +++ b/src/components/file/file.scss @@ -1,11 +1,13 @@ -.card-md core-file + core-file > .item-md.item-block > .item-inner { - border-top: 1px solid $list-md-border-color; -} +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 { - border-top: $hairlines-width solid $list-ios-border-color; -} + .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 { - border-top: 1px solid $list-wp-border-color; + .card-wp core-file + core-file > .item-wp.item-block > .item-inner { + border-top: 1px solid $list-wp-border-color; + } } \ No newline at end of file diff --git a/src/components/iframe/iframe.scss b/src/components/iframe/iframe.scss index 5f1a11cc2..dba9aa54c 100644 --- a/src/components/iframe/iframe.scss +++ b/src/components/iframe/iframe.scss @@ -1,4 +1,4 @@ -core-iframe { +ion-app.app-root core-iframe { > div { height: 100%; } diff --git a/src/components/input-errors/input-errors.scss b/src/components/input-errors/input-errors.scss index 29cfb2c92..a3712fe5e 100644 --- a/src/components/input-errors/input-errors.scss +++ b/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 { diff --git a/src/components/ion-tabs/ion-tabs.scss b/src/components/ion-tabs/ion-tabs.scss index a34d98c88..5fcdfc79a 100644 --- a/src/components/ion-tabs/ion-tabs.scss +++ b/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,16 +82,14 @@ core-ion-tab.show-tab { } -.ios { - core-ion-tab > .ion-page > ion-header .toolbar-ios { - padding-top: 4px; - } +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); } diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss index a6e506ba3..92f001805 100644 --- a/src/components/loading/loading.scss +++ b/src/components/loading/loading.scss @@ -1,50 +1,52 @@ -core-loading { - @include core-transition(height, 200ms); +ion-app.app-root { + core-loading { + @include core-transition(height, 200ms); - .core-loading-container { - 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; + .core-loading-container { + width: 100%; 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; + } } } } diff --git a/src/components/mark-required/mark-required.scss b/src/components/mark-required/mark-required.scss index 09873c055..0453ba119 100644 --- a/src/components/mark-required/mark-required.scss +++ b/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); diff --git a/src/components/navbar-buttons/navbar-buttons.scss b/src/components/navbar-buttons/navbar-buttons.scss index d800187c1..7cd383039 100644 --- a/src/components/navbar-buttons/navbar-buttons.scss +++ b/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; } diff --git a/src/components/navigation-bar/core-navigation-bar.html b/src/components/navigation-bar/core-navigation-bar.html index 07d9810ac..4a7c211d3 100644 --- a/src/components/navigation-bar/core-navigation-bar.html +++ b/src/components/navigation-bar/core-navigation-bar.html @@ -1,18 +1,18 @@ - + - - - + + + - + - - - + + + diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss index 3634f0946..cb1c71cc5 100644 --- a/src/components/progress-bar/progress-bar.scss +++ b/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; diff --git a/src/components/rich-text-editor/rich-text-editor.scss b/src/components/rich-text-editor/rich-text-editor.scss index baa715a62..1cad07590 100644 --- a/src/components/rich-text-editor/rich-text-editor.scss +++ b/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; } \ No newline at end of file diff --git a/src/components/search-box/search-box.scss b/src/components/search-box/search-box.scss index c2f5de7b5..335d9ed54 100644 --- a/src/components/search-box/search-box.scss +++ b/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; diff --git a/src/components/send-message-form/send-message-form.scss b/src/components/send-message-form/send-message-form.scss index d6fbdcecb..784480f65 100644 --- a/src/components/send-message-form/send-message-form.scss +++ b/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 { diff --git a/src/components/show-password/show-password.scss b/src/components/show-password/show-password.scss index f02632d8e..ae3ccef98 100644 --- a/src/components/show-password/show-password.scss +++ b/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; } diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss index f38027603..65a5a64a2 100644 --- a/src/components/split-view/split-view.scss +++ b/src/components/split-view/split-view.scss @@ -1,4 +1,4 @@ -core-split-view { +ion-app.app-root core-split-view { ion-menu.split-pane-side { display: block; @@ -37,15 +37,6 @@ core-split-view { display: none; } ion-content.statusbar-padding:first-child .scroll-content { - padding-top: 0 !important; + padding-top: 0 !important; } } - -.ios .split-pane { - .core-avoid-header ion-content.statusbar-padding, - .core-avoid-header .menu-inner > ion-content { - top: $navbar-ios-height; - height: calc(100% - #{($navbar-ios-height)}); - } - -} diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index ff246ed5d..92429699d 100644 --- a/src/components/tabs/tabs.scss +++ b/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 { - padding-bottom: 0; -} - -.wp .core-tabs-bar a.tab-slide { +ion-app.app-root.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; diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 09e37e2ce..07dfebfb2 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -311,7 +311,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe const width = this.domUtils.getElementWidth(this.slides.getNativeElement()) || this.slides.renderedWidth; if (width) { - this.maxSlides = Math.floor(width / 120); + this.maxSlides = Math.floor(width / 100); return; } diff --git a/src/components/timer/timer.scss b/src/components/timer/timer.scss index 16f119724..89c7b2414 100644 --- a/src/components/timer/timer.scss +++ b/src/components/timer/timer.scss @@ -1,4 +1,4 @@ -core-timer { +ion-app.app-root core-timer { .item.item-block .item-inner { border: 0; } diff --git a/src/core/course/components/format/format.scss b/src/core/course/components/format/format.scss index f10f68084..16737be20 100644 --- a/src/core/course/components/format/format.scss +++ b/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; diff --git a/src/core/course/components/module-completion/module-completion.scss b/src/core/course/components/module-completion/module-completion.scss index 78ab92d36..95674dc1c 100644 --- a/src/core/course/components/module-completion/module-completion.scss +++ b/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; diff --git a/src/core/course/components/module/module.scss b/src/core/course/components/module/module.scss index f7203aa18..41fabe184 100644 --- a/src/core/course/components/module/module.scss +++ b/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; diff --git a/src/core/course/pages/section/section.scss b/src/core/course/pages/section/section.scss deleted file mode 100644 index a99f04bdb..000000000 --- a/src/core/course/pages/section/section.scss +++ /dev/null @@ -1,3 +0,0 @@ -page-core-course-section { - -} diff --git a/src/core/courses/components/course-list-item/course-list-item.scss b/src/core/courses/components/course-list-item/course-list-item.scss index d5fe709e3..9876bdafa 100644 --- a/src/core/courses/components/course-list-item/course-list-item.scss +++ b/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; diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss index 1ad60e95b..3546320be 100644 --- a/src/core/courses/components/course-progress/course-progress.scss +++ b/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; diff --git a/src/core/courses/components/overview-events/overview-events.scss b/src/core/courses/components/overview-events/overview-events.scss index 4adcffdff..36475d624 100644 --- a/src/core/courses/components/overview-events/overview-events.scss +++ b/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; diff --git a/src/core/courses/pages/course-preview/course-preview.scss b/src/core/courses/pages/course-preview/course-preview.scss index 0bb6be28f..3994f5cc9 100644 --- a/src/core/courses/pages/course-preview/course-preview.scss +++ b/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%; diff --git a/src/core/courses/pages/my-courses/my-courses.scss b/src/core/courses/pages/my-courses/my-courses.scss deleted file mode 100644 index 89812f8f7..000000000 --- a/src/core/courses/pages/my-courses/my-courses.scss +++ /dev/null @@ -1,3 +0,0 @@ -page-core-courses-my-courses { - -} diff --git a/src/core/courses/pages/my-overview/my-overview.scss b/src/core/courses/pages/my-overview/my-overview.scss index d698dc081..838e05192 100644 --- a/src/core/courses/pages/my-overview/my-overview.scss +++ b/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); diff --git a/src/core/courses/pages/search/search.scss b/src/core/courses/pages/search/search.scss deleted file mode 100644 index 1bf3fe798..000000000 --- a/src/core/courses/pages/search/search.scss +++ /dev/null @@ -1,3 +0,0 @@ -page-core-courses-search { - -} diff --git a/src/core/emulator/pages/capture-media/capture-media.scss b/src/core/emulator/pages/capture-media/capture-media.scss index 2b605ada2..3dc699a24 100644 --- a/src/core/emulator/pages/capture-media/capture-media.scss +++ b/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; diff --git a/src/core/grades/components/course/course.scss b/src/core/grades/components/course/course.scss index 73db3bf79..2b8ea0be2 100644 --- a/src/core/grades/components/course/course.scss +++ b/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; diff --git a/src/core/grades/pages/courses/courses.scss b/src/core/grades/pages/courses/courses.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/login/pages/credentials/credentials.scss b/src/core/login/pages/credentials/credentials.scss index 27ca57da5..6a65689ff 100644 --- a/src/core/login/pages/credentials/credentials.scss +++ b/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; } diff --git a/src/core/login/pages/email-signup/email-signup.scss b/src/core/login/pages/email-signup/email-signup.scss deleted file mode 100644 index cf74cbcf4..000000000 --- a/src/core/login/pages/email-signup/email-signup.scss +++ /dev/null @@ -1,2 +0,0 @@ -page-core-login-email-signup { -} diff --git a/src/core/login/pages/forgotten-password/forgotten-password.scss b/src/core/login/pages/forgotten-password/forgotten-password.scss index ed3dcd36c..1e881494a 100644 --- a/src/core/login/pages/forgotten-password/forgotten-password.scss +++ b/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); diff --git a/src/core/login/pages/init/init.scss b/src/core/login/pages/init/init.scss index bdce290f9..79f1005d0 100644 --- a/src/core/login/pages/init/init.scss +++ b/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); diff --git a/src/core/login/pages/reconnect/reconnect.scss b/src/core/login/pages/reconnect/reconnect.scss index 8ae1f4565..0d3098368 100644 --- a/src/core/login/pages/reconnect/reconnect.scss +++ b/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; } diff --git a/src/core/login/pages/site-policy/site-policy.scss b/src/core/login/pages/site-policy/site-policy.scss index d87f901c2..b59c63c53 100644 --- a/src/core/login/pages/site-policy/site-policy.scss +++ b/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; } diff --git a/src/core/login/pages/site/site.scss b/src/core/login/pages/site/site.scss index 0af4815d4..100ae86c3 100644 --- a/src/core/login/pages/site/site.scss +++ b/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; } diff --git a/src/core/login/pages/sites/sites.scss b/src/core/login/pages/sites/sites.scss index d8143d4b7..04cca753b 100644 --- a/src/core/login/pages/sites/sites.scss +++ b/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; } diff --git a/src/core/mainmenu/pages/menu/menu.scss b/src/core/mainmenu/pages/menu/menu.scss index 4bca19269..ae7a4fcbc 100644 --- a/src/core/mainmenu/pages/menu/menu.scss +++ b/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, diff --git a/src/core/mainmenu/pages/more/more.scss b/src/core/mainmenu/pages/more/more.scss index d8baa9e9e..8bb2930d7 100644 --- a/src/core/mainmenu/pages/more/more.scss +++ b/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; diff --git a/src/core/user/components/user-profile-field/user-profile-field.scss b/src/core/user/components/user-profile-field/user-profile-field.scss deleted file mode 100644 index a5595aa37..000000000 --- a/src/core/user/components/user-profile-field/user-profile-field.scss +++ /dev/null @@ -1,5 +0,0 @@ -core-user-profile-field { - -} - - diff --git a/src/core/user/pages/about/about.scss b/src/core/user/pages/about/about.scss deleted file mode 100644 index 1752c93e5..000000000 --- a/src/core/user/pages/about/about.scss +++ /dev/null @@ -1,2 +0,0 @@ -page-core-user-about { -} \ No newline at end of file diff --git a/src/core/user/pages/profile/profile.scss b/src/core/user/pages/profile/profile.scss index f51ba5364..496e1ae0c 100644 --- a/src/core/user/pages/profile/profile.scss +++ b/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); diff --git a/src/core/viewer/pages/iframe/iframe.scss b/src/core/viewer/pages/iframe/iframe.scss index a22e7a5eb..9c2fa5108 100644 --- a/src/core/viewer/pages/iframe/iframe.scss +++ b/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%; } diff --git a/src/core/viewer/pages/image/image.scss b/src/core/viewer/pages/image/image.scss index 2be2a02fc..c9ff1903c 100644 --- a/src/core/viewer/pages/image/image.scss +++ b/src/core/viewer/pages/image/image.scss @@ -1,4 +1,4 @@ -.core-zoom-pane { +ion-app.app-root .core-zoom-pane { height: 100%; img { diff --git a/src/theme/variables.scss b/src/theme/variables.scss index b176ed86c..908caf8ec 100644 --- a/src/theme/variables.scss +++ b/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; +$toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights. $checkbox-ios-icon-border-radius: 0px !default; // App Material Design Variables @@ -164,7 +164,6 @@ $tabs-md-tab-color-inactive: $tabs-tab-color-inactive; $button-md-outline-background-color: $core-button-outline-background-color; $font-family-md-base: "Roboto", "Noto Sans", "Helvetica Neue", sans-serif !default; - // App Windows Variables // -------------------------------------------------- // Windows only Sass variables can go here