MOBILE-2567 ux: Fix RTL css ranking
Pau Ferrer Ocaña
parent
4697ce7c59
commit
16e565626e
|
|
@ -1,3 +0,0 @@
|
|||
page-addon-calendar-event {
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
page-addon-calendar-list {
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
page-addon-calendar-settings {
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
addon-messages-discussions {
|
||||
ion-app.app-root addon-messages-discussions {
|
||||
h2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
page-addon-messages-settings {
|
||||
ion-app.app-root page-addon-messages-settings {
|
||||
.list-header {
|
||||
margin-bottom: 0;
|
||||
border-top: 0;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
addon-mod-assign-submission {
|
||||
ion-app.app-root addon-mod-assign-submission {
|
||||
div.latesubmission,
|
||||
div.overdue {
|
||||
// @extend .core-danger-item;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
addon-mod-imscp-index {
|
||||
ion-app.app-root addon-mod-imscp-index {
|
||||
.addon-mod-imscp-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
addon-mod-lesson-index {
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
addon-mod-quiz-connection-error {
|
||||
ion-app.app-root addon-mod-quiz-connection-error {
|
||||
background-color: $red-light;
|
||||
|
||||
.item {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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] {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
addon-mod-scorm-index {
|
||||
ion-app.app-root addon-mod-scorm-index {
|
||||
|
||||
.addon-mod_scorm-toc {
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
addon-mod-scorm-toc-popover {
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
addon-mod-survey-index {
|
||||
ion-app.app-root addon-mod-survey-index {
|
||||
|
||||
.label, .label[stacked] {
|
||||
font-size: initial;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
addon-mod-wiki-subwiki-picker {
|
||||
ion-app.app-root addon-mod-wiki-subwiki-picker {
|
||||
|
||||
$core-subwiki-selected: $core-color !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
page-addon-notifications-settings {
|
||||
ion-app.app-root page-addon-notifications-settings {
|
||||
.list-header {
|
||||
margin-bottom: 0;
|
||||
border-top: 0;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,29 @@
|
|||
|
||||
.button-ios {
|
||||
ion-app.app-root.ios {
|
||||
.button-ios {
|
||||
min-height: $button-ios-height
|
||||
}
|
||||
}
|
||||
|
||||
// Light buttons color.
|
||||
.button-ios-light {
|
||||
// Light buttons color.
|
||||
.button-ios-light {
|
||||
color: color($colors, primary, base);
|
||||
}
|
||||
}
|
||||
|
||||
.col[align-self-stretch] .card-ios {
|
||||
.col[align-self-stretch] .card-ios {
|
||||
height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
|
||||
}
|
||||
}
|
||||
|
||||
.bar-buttons core-context-menu .button-clear-ios {
|
||||
.bar-buttons core-context-menu .button-clear-ios {
|
||||
color: $toolbar-ios-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item-ios ion-spinner[item-start],
|
||||
.item-ios ion-spinner[item-end] {
|
||||
.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 {
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
.core-#{$color-name}-card {
|
||||
@extend .card-ios ;
|
||||
@extend .card-content-ios;
|
||||
|
||||
|
|
@ -34,28 +35,33 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ios .core-avoid-header ion-content {
|
||||
.core-avoid-header ion-content {
|
||||
top: $navbar-ios-height;
|
||||
height: calc(100% - #{($navbar-ios-height)});
|
||||
}
|
||||
}
|
||||
|
||||
.platform-cordova.ios .core-avoid-header ion-content.statusbar-padding,
|
||||
.platform-cordova.ios .core-avoid-header .menu-inner > ion-content {
|
||||
top: $navbar-ios-height + $cordova-ios-statusbar-padding;
|
||||
&.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));
|
||||
|
||||
.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: 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) {
|
||||
// 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)
|
||||
|
|
@ -116,19 +122,20 @@
|
|||
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Different levels of padding.
|
||||
@for $i from 0 through 15 {
|
||||
.ios .core-padding-#{$i} {
|
||||
// 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 {
|
||||
// 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 {
|
||||
}
|
||||
.card-ios.with-borders .item-ios:last-child .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +1,28 @@
|
|||
|
||||
.button-md {
|
||||
ion-app.app-root.md {
|
||||
.button-md {
|
||||
min-height: $button-md-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Light buttons color.
|
||||
.button-md-light {
|
||||
// Light buttons color.
|
||||
.button-md-light {
|
||||
color: color($colors, primary, base);
|
||||
}
|
||||
}
|
||||
|
||||
.col[align-self-stretch] .card-md {
|
||||
.col[align-self-stretch] .card-md {
|
||||
height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
|
||||
}
|
||||
}
|
||||
|
||||
.bar-buttons core-context-menu .button-clear-md {
|
||||
.bar-buttons core-context-menu .button-clear-md {
|
||||
color: $toolbar-md-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item-md ion-spinner[item-start] + .item-inner,
|
||||
.item-md ion-spinner[item-start] + .item-input {
|
||||
.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 {
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
.core-#{$color-name}-card {
|
||||
@extend .card-md;
|
||||
@extend .card-content-md;
|
||||
|
||||
|
|
@ -34,15 +34,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md .core-avoid-header ion-content {
|
||||
.core-avoid-header ion-content {
|
||||
top: $navbar-md-height;
|
||||
height: calc(100% - #{($navbar-md-height)});
|
||||
}
|
||||
}
|
||||
|
||||
// Highlights inside the input element.
|
||||
@if ($core-text-input-md-show-highlight) {
|
||||
// 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)
|
||||
|
|
@ -104,20 +104,20 @@
|
|||
@include md-input-highlight($text-input-md-highlight-color-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Different levels of padding.
|
||||
@for $i from 0 through 15 {
|
||||
.md .core-padding-#{$i} {
|
||||
// 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 {
|
||||
// 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 {
|
||||
}
|
||||
.card-md.with-borders .item-md:last-child .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
476
src/app/app.scss
476
src/app/app.scss
|
|
@ -18,36 +18,32 @@
|
|||
// Alignment
|
||||
// -------------------------
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
.clearfix {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.img-responsive {
|
||||
}
|
||||
.img-responsive {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-hide { opacity: 0; }
|
||||
.core-big { font-size: 115%; }
|
||||
.invisible { visibility: hidden; }
|
||||
.opacity-hide { opacity: 0; }
|
||||
.core-big { font-size: 115%; }
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
.button-no-uppercase {
|
||||
.button-no-uppercase {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] body, [dir="rtl"] body {
|
||||
padding-top: constant(safe-area-inset-top); //for iOS 11.2
|
||||
padding-top: env(safe-area-inset-top); //for iOS 11.1
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.core-center-view .scroll-content {
|
||||
display: flex!important;
|
||||
align-content: center !important;
|
||||
|
|
@ -57,23 +53,23 @@
|
|||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
@include media-breakpoint-down(sm) {
|
||||
.hidden-phone {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include media-breakpoint-up(md) {
|
||||
.hidden-tablet {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-headings() {
|
||||
@mixin core-headings() {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
|
@ -92,32 +88,30 @@
|
|||
h6 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Define an alternative way to set a heading in an item without using a heading tag.
|
||||
// This is done for accessibility reasons when a heading is semantically incorrect.
|
||||
.item .item-heading {
|
||||
// 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 {
|
||||
.item-dimmed {
|
||||
opacity: 0.71;
|
||||
}
|
||||
}
|
||||
|
||||
.item-radio-checked {
|
||||
.item-radio-checked {
|
||||
background-color: $gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
// Make no-lines work in any element, not just ion-item and ion-list.
|
||||
.item *[no-lines] .item-inner,
|
||||
*[no-lines] .item .item-inner {
|
||||
// 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 {
|
||||
.core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon {
|
||||
min-height: 32px;
|
||||
img, .label {
|
||||
max-height: 32px;
|
||||
|
|
@ -130,17 +124,17 @@
|
|||
@include margin(null, null, null, 5px);
|
||||
color: $gray-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.core-bold, .core-bold .label {
|
||||
.core-bold, .core-bold .label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.core-module-icon {
|
||||
.core-module-icon {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.core-button-spinner {
|
||||
.core-button-spinner {
|
||||
min-height: 44px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
|
|
@ -148,12 +142,12 @@
|
|||
.spinner {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Avatar
|
||||
// -------------------------
|
||||
// Large centered avatar
|
||||
.item-avatar-center {
|
||||
// Avatar
|
||||
// -------------------------
|
||||
// Large centered avatar
|
||||
.item-avatar-center {
|
||||
text-align: center;
|
||||
|
||||
&.item-complex .item-content {
|
||||
|
|
@ -184,38 +178,38 @@
|
|||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-avatar ion-img, ion-avatar img {
|
||||
ion-avatar ion-img, ion-avatar img {
|
||||
text-indent: -99999px;
|
||||
background-color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Form items
|
||||
// -------------------------
|
||||
// Form items
|
||||
// -------------------------
|
||||
|
||||
.item .core-input-footnote {
|
||||
.item .core-input-footnote {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
ion-datetime {
|
||||
ion-datetime {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
input {
|
||||
@include rtl() {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** Format Text */
|
||||
core-format-text[maxHeight],
|
||||
core-format-text[ng-reflect-max-height] {
|
||||
/** Format Text */
|
||||
core-format-text[maxHeight],
|
||||
core-format-text[ng-reflect-max-height] {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -283,10 +277,10 @@ core-format-text[ng-reflect-max-height] {
|
|||
background-size: 14px 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
core-format-text[singleLine="true"],
|
||||
core-format-text[ng-reflect-single-line="true"] {
|
||||
core-format-text[singleLine="true"],
|
||||
core-format-text[ng-reflect-single-line="true"] {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
white-space: nowrap;
|
||||
|
|
@ -295,27 +289,27 @@ core-format-text[ng-reflect-single-line="true"] {
|
|||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.core-media-adapt-width {
|
||||
.core-media-adapt-width {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
img.core-media-adapt-width {
|
||||
img.core-media-adapt-width {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
audio.core-media-adapt-width {
|
||||
audio.core-media-adapt-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.core-adapted-img-container {
|
||||
.core-adapted-img-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.core-image-viewer-icon {
|
||||
.core-image-viewer-icon {
|
||||
position: absolute;
|
||||
@include position(null, 10px, 10px, null);
|
||||
color: $black;
|
||||
|
|
@ -331,9 +325,9 @@ audio.core-media-adapt-width {
|
|||
ion-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
core-format-text {
|
||||
core-format-text {
|
||||
audio, video, a, iframe {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
|
@ -374,40 +368,40 @@ core-format-text {
|
|||
}
|
||||
|
||||
@include core-headings();
|
||||
}
|
||||
}
|
||||
|
||||
.item core-format-text {
|
||||
.item core-format-text {
|
||||
@include core-headings();
|
||||
}
|
||||
}
|
||||
|
||||
// Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
|
||||
ion-card core-format-text img {
|
||||
// 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 {
|
||||
// Message item.
|
||||
.item-message {
|
||||
core-format-text > p:only-child {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media item, ideal for icons.
|
||||
.item-media {
|
||||
// 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 {
|
||||
// Ionic fix. Button can occupy all page if not.
|
||||
ion-select {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
ion-col ion-select {
|
||||
ion-col ion-select {
|
||||
@include float(end);
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
|
|
@ -415,11 +409,10 @@ ion-col ion-select {
|
|||
white-space: normal;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:not(.item) > * > * > ion-select,
|
||||
.core-button-select {
|
||||
:not(.item) > * > * > ion-select,
|
||||
.core-button-select {
|
||||
background-color: white;
|
||||
color: $core-color;
|
||||
white-space: normal;
|
||||
|
|
@ -461,14 +454,13 @@ ion-col ion-select {
|
|||
text-align: right;
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// File uploader.
|
||||
// -------------------------
|
||||
|
||||
.core-fileuploader-file-handler {
|
||||
// File uploader.
|
||||
// -------------------------
|
||||
.core-fileuploader-file-handler {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
|
|
@ -481,32 +473,32 @@ ion-col ion-select {
|
|||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Question.
|
||||
// -------------------------
|
||||
// Question.
|
||||
// -------------------------
|
||||
|
||||
.core-question-answer-correct,
|
||||
.core-question-comment {
|
||||
.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 {
|
||||
.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 {
|
||||
.core-question-feedback-container {
|
||||
background-color: $core-question-feedback-color-bg;
|
||||
color: $core-question-feedback-color;
|
||||
|
||||
|
|
@ -532,128 +524,128 @@ ion-col ion-select {
|
|||
background-color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.core-question-feedback-inline {
|
||||
.core-question-feedback-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.core-question-feedback-padding {
|
||||
.core-question-feedback-padding {
|
||||
@include padding(8px, 35px, 8px, 14px);
|
||||
}
|
||||
}
|
||||
|
||||
.core-question-correct {
|
||||
.core-question-correct {
|
||||
background-color: $core-question-state-correct-color;
|
||||
}
|
||||
.core-question-partiallycorrect {
|
||||
}
|
||||
.core-question-partiallycorrect {
|
||||
background-color: $core-question-state-partial-color;
|
||||
}
|
||||
.core-question-notanswered,
|
||||
.core-question-incorrect {
|
||||
}
|
||||
.core-question-notanswered,
|
||||
.core-question-incorrect {
|
||||
background-color: $core-question-state-incorrect-color;
|
||||
}
|
||||
.core-question-answersaved {
|
||||
}
|
||||
.core-question-answersaved {
|
||||
color: $text-color;
|
||||
background-color: $core-question-saved-color-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.core-question-warning {
|
||||
.core-question-warning {
|
||||
color: $core-question-warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
.questioncorrectnessicon,
|
||||
.fa.icon.questioncorrectnessicon {
|
||||
.questioncorrectnessicon,
|
||||
.fa.icon.questioncorrectnessicon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Atto styles
|
||||
// -------------------------
|
||||
.atto_image_preview {
|
||||
// Atto styles
|
||||
// -------------------------
|
||||
.atto_image_preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_preview_box {
|
||||
.atto_image_preview_box {
|
||||
max-height: 200px;
|
||||
margin-bottom: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.editor_atto_content img {
|
||||
.editor_atto_content img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_size {
|
||||
.atto_image_size {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_size input[type=checkbox] {
|
||||
.atto_image_size input[type=checkbox] {
|
||||
@include margin(null, 1em, null, 1em);
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_size input[type=text] {
|
||||
.atto_image_size input[type=text] {
|
||||
width: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_size label {
|
||||
.atto_image_size label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_button_text-top {
|
||||
.atto_image_button_text-top {
|
||||
vertical-align: text-top;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_button_middle {
|
||||
.atto_image_button_middle {
|
||||
vertical-align: middle;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_button_text-bottom {
|
||||
.atto_image_button_text-bottom {
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.atto_image_button_text-top.img-responsive,
|
||||
.atto_image_button_middle.img-responsive,
|
||||
.atto_image_button_text-bottom.img-responsive {
|
||||
.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 {
|
||||
/*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 {
|
||||
.atto_image_button_right {
|
||||
@include float(end);
|
||||
@include margin(0, 0, 0, 0.5em);
|
||||
max-width: calc(100% - 1em);
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
.action-sheet-group {
|
||||
.action-sheet-group {
|
||||
overflow: auto;
|
||||
}
|
||||
.alert-message {
|
||||
}
|
||||
.alert-message {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
ion-toast.core-toast-success .toast-wrapper{
|
||||
ion-toast.core-toast-success .toast-wrapper{
|
||||
background: $green-dark;
|
||||
}
|
||||
}
|
||||
|
||||
ion-toast.core-toast-alert .toast-wrapper{
|
||||
ion-toast.core-toast-alert .toast-wrapper{
|
||||
background: $red-dark;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
textarea {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
|
||||
|
|
@ -667,27 +659,27 @@ textarea {
|
|||
height: 200px;
|
||||
min-height: $core-rte-min-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar .core-bar-button-image {
|
||||
.toolbar .core-bar-button-image {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: $core-toolbar-button-image-width - 1;
|
||||
max-height: $core-toolbar-button-image-width - 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer with auto height.
|
||||
.footer.footer-adjustable {
|
||||
// Footer with auto height.
|
||||
.footer.footer-adjustable {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.core-circle:before {
|
||||
.core-circle:before {
|
||||
content: ' \25CF';
|
||||
}
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors) {
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors) {
|
||||
// Message cards.
|
||||
.core-#{$color-name}-card {
|
||||
@extend ion-card;
|
||||
|
|
@ -728,34 +720,34 @@ textarea {
|
|||
.text-#{$color-name}, p.text-#{$color-name}, .item p.text-#{$color-name}, .card p.text-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accesshide {
|
||||
.accesshide {
|
||||
position: absolute;
|
||||
@include position(null, null, null, -10000px);
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.core-monospaced {
|
||||
.core-monospaced {
|
||||
font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.core-white-push-arrow .item-inner{
|
||||
.core-white-push-arrow .item-inner{
|
||||
@include push-arrow-color($white);
|
||||
}
|
||||
}
|
||||
|
||||
// For list where some items have detail icon and some others don't.
|
||||
.core-list-align-detail-right .item .item-inner {
|
||||
// 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] {
|
||||
[ion-fixed] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.core-modal-fullscreen {
|
||||
.core-modal-fullscreen {
|
||||
.modal-wrapper {
|
||||
position: absolute;
|
||||
@include position(0 !important, null, null, 0 !important);
|
||||
|
|
@ -763,26 +755,26 @@ textarea {
|
|||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-fab .scroll-content{
|
||||
.has-fab .scroll-content{
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-content ion-fab {
|
||||
.scroll-content ion-fab {
|
||||
position: fixed;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// For some reason, in iOS the pages don't inherit the background-color from ion-app, set it explicitly.
|
||||
.ion-page {
|
||||
// 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 {
|
||||
// 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%;
|
||||
|
|
@ -810,33 +802,33 @@ textarea {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-21by9 {
|
||||
.embed-responsive-21by9 {
|
||||
&::before {
|
||||
padding-top: percentage(9 / 21);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-16by9 {
|
||||
.embed-responsive-16by9 {
|
||||
&::before {
|
||||
padding-top: percentage(9 / 16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-4by3 {
|
||||
.embed-responsive-4by3 {
|
||||
&::before {
|
||||
padding-top: percentage(3 / 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-1by1 {
|
||||
.embed-responsive-1by1 {
|
||||
&::before {
|
||||
padding-top: percentage(1 / 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-alert.core-inapp-notification {
|
||||
ion-alert.core-inapp-notification {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
align-items: start;
|
||||
|
|
@ -871,9 +863,9 @@ ion-alert.core-inapp-notification {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.core-icon-with-badge {
|
||||
.core-icon-with-badge {
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
|
|
@ -889,19 +881,9 @@ ion-alert.core-inapp-notification {
|
|||
color: red;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
body.keyboard-is-open {
|
||||
.scroll-content, .fixed-content {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
core-ion-tabs .tabbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item.item-radio, .item.item-checkbox {
|
||||
.item.item-radio, .item.item-checkbox {
|
||||
// Fix links and videos in ion-radio and ion-checkbox.
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
|
|
@ -913,9 +895,9 @@ body.keyboard-is-open {
|
|||
ion-label {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.core-no-text-wrap {
|
||||
.core-no-text-wrap {
|
||||
white-space: nowrap;
|
||||
|
||||
&.item.item-radio, &.item.item-checkbox {
|
||||
|
|
@ -923,6 +905,27 @@ body.keyboard-is-open {
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix modals displayed over action sheet.
|
||||
.disable-scroll ion-modal .ion-page {
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] body, [dir="rtl"] body {
|
||||
padding-top: constant(safe-area-inset-top); //for iOS 11.2
|
||||
padding-top: env(safe-area-inset-top); //for iOS 11.1
|
||||
}
|
||||
|
||||
body.keyboard-is-open {
|
||||
.scroll-content, .fixed-content {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
core-ion-tabs .tabbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix iframes in fullscreen mode.
|
||||
|
|
@ -941,8 +944,3 @@ ion-modal,
|
|||
.split-pane {
|
||||
contain: size layout style;
|
||||
}
|
||||
|
||||
// Fix modals displayed over action sheet.
|
||||
.disable-scroll ion-modal .ion-page {
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
|
||||
.button-wp {
|
||||
ion-app.app-root.wp {
|
||||
.button-wp {
|
||||
min-height: $button-wp-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Light buttons color.
|
||||
.button-wp-light {
|
||||
// Light buttons color.
|
||||
.button-wp-light {
|
||||
color: color($colors, primary, base);
|
||||
}
|
||||
}
|
||||
|
||||
.col[align-self-stretch] .card-wp {
|
||||
.col[align-self-stretch] .card-wp {
|
||||
height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
|
||||
}
|
||||
}
|
||||
|
||||
.bar-buttons core-context-menu .button-clear-wp {
|
||||
.bar-buttons core-context-menu .button-clear-wp {
|
||||
color: $toolbar-wp-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wp ion-spinner[item-start] + .item-inner,
|
||||
.item-wp ion-spinner[item-start] + .item-input {
|
||||
.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) {
|
||||
.wp .core-#{$color-name}-card {
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
.core-#{$color-name}-card {
|
||||
@extend .card-wp ;
|
||||
@extend .card-content-wp;
|
||||
|
||||
|
|
@ -34,24 +34,25 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp .core-avoid-header ion-content {
|
||||
.core-avoid-header ion-content {
|
||||
top: $navbar-wp-height;
|
||||
height: calc(100% - #{($navbar-wp-height)});
|
||||
}
|
||||
}
|
||||
|
||||
// Different levels of padding.
|
||||
@for $i from 0 through 15 {
|
||||
.wp .core-padding-#{$i} {
|
||||
// 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 {
|
||||
// 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 {
|
||||
}
|
||||
.card-wp.with-borders .item-wp:last-child .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
core-chart {
|
||||
ion-app.app-root core-chart {
|
||||
display: block;
|
||||
|
||||
canvas {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
.card-md core-file + core-file > .item-md.item-block > .item-inner {
|
||||
ion-app.app-root {
|
||||
.card-md core-file + core-file > .item-md.item-block > .item-inner {
|
||||
border-top: 1px solid $list-md-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.card-ios core-file + core-file > .item-ios.item-block > .item-inner {
|
||||
.card-ios core-file + core-file > .item-ios.item-block > .item-inner {
|
||||
border-top: $hairlines-width solid $list-ios-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.card-wp core-file + core-file > .item-wp.item-block > .item-inner {
|
||||
.card-wp core-file + core-file > .item-wp.item-block > .item-inner {
|
||||
border-top: 1px solid $list-wp-border-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
core-iframe {
|
||||
ion-app.app-root core-iframe {
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
core-input-errors {
|
||||
ion-app.app-root core-input-errors {
|
||||
width: 100%;
|
||||
|
||||
.core-input-error-container {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
core-ion-tabs {
|
||||
ion-app.app-root core-ion-tabs {
|
||||
.tabbar {
|
||||
z-index: 101; // For some reason, the regular z-index isn't enough with our tabs, use a higher one.
|
||||
|
||||
|
|
@ -20,15 +20,15 @@ core-ion-tabs {
|
|||
}
|
||||
}
|
||||
|
||||
.ios core-ion-tabs .core-ion-tabs-loading {
|
||||
ion-app.app-root.ios core-ion-tabs .core-ion-tabs-loading {
|
||||
min-height: $tabs-ios-tab-min-height;
|
||||
}
|
||||
|
||||
.md core-ion-tabs .core-ion-tabs-loading {
|
||||
ion-app.app-root.md core-ion-tabs .core-ion-tabs-loading {
|
||||
min-height: $tabs-md-tab-min-height;
|
||||
}
|
||||
|
||||
.wp core-ion-tabs .core-ion-tabs-loading {
|
||||
ion-app.app-root.wp core-ion-tabs .core-ion-tabs-loading {
|
||||
min-height: $tabs-wp-tab-min-height;
|
||||
}
|
||||
|
||||
|
|
@ -82,14 +82,14 @@ core-ion-tab.show-tab {
|
|||
|
||||
}
|
||||
|
||||
.ios {
|
||||
ion-app.app-root.ios {
|
||||
@include core-ion-tabs-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
|
||||
}
|
||||
|
||||
.md {
|
||||
ion-app.app-root.md {
|
||||
@include core-ion-tabs-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $cordova-md-statusbar-padding, $cordova-md-statusbar-padding-modal-max-width);
|
||||
}
|
||||
|
||||
.wp {
|
||||
ion-app.app-root.wp {
|
||||
@include core-ion-tabs-statusbar-padding($toolbar-wp-height, $toolbar-wp-padding, $content-wp-padding, $cordova-wp-statusbar-padding, $cordova-wp-statusbar-padding-modal-max-width);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
core-loading {
|
||||
ion-app.app-root {
|
||||
core-loading {
|
||||
@include core-transition(height, 200ms);
|
||||
|
||||
.core-loading-container {
|
||||
|
|
@ -16,18 +17,18 @@ core-loading {
|
|||
&.core-loading-noheight .core-loading-content {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-content > core-loading,
|
||||
ion-content > .scroll-content > core-loading,
|
||||
.core-loading-center {
|
||||
.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 {
|
||||
.scroll-content > core-loading,
|
||||
ion-content > .scroll-content > core-loading,
|
||||
.core-loading-center,
|
||||
core-loading.core-loading-loaded {
|
||||
position: relative;
|
||||
|
||||
> .core-loading-container {
|
||||
|
|
@ -47,4 +48,5 @@ core-loading.core-loading-loaded {
|
|||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
core-timer {
|
||||
ion-app.app-root core-timer {
|
||||
.item.item-block .item-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
core-course-module-completion a {
|
||||
ion-app.app-root core-course-module-completion a {
|
||||
img {
|
||||
padding: 5px;
|
||||
width: 30px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
page-core-course-section {
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
core-courses-course-progress {
|
||||
ion-app.app-root core-courses-course-progress {
|
||||
ion-card.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
page-core-courses-my-courses {
|
||||
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
page-core-courses-search {
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
page-core-login-credentials {
|
||||
ion-app.app-root page-core-login-credentials {
|
||||
.scroll-content {
|
||||
background: $core-login-page-background-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
page-core-login-email-signup {
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
page-core-login-reconnect {
|
||||
ion-app.app-root page-core-login-reconnect {
|
||||
.scroll-content {
|
||||
background: $core-login-page-background-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
page-core-login-site-policy {
|
||||
ion-app.app-root page-core-login-site-policy {
|
||||
.card {
|
||||
height: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
page-core-login-site {
|
||||
ion-app.app-root page-core-login-site {
|
||||
.scroll-content {
|
||||
background: $core-login-page-background-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
core-user-profile-field {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
page-core-user-about {
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
page-core-viewer-iframe {
|
||||
ion-app.app-root page-core-viewer-iframe {
|
||||
core-loading .core-loading-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.core-zoom-pane {
|
||||
ion-app.app-root .core-zoom-pane {
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ $loading-ios-spinner-color: $core-loading-spinner-color;
|
|||
$spinner-ios-ios-color: $core-spinner-color;
|
||||
$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
|
||||
$button-ios-outline-background-color: $core-button-outline-background-color;
|
||||
$toolbar-ios-height: 44px + 15; // Avoid toolbar with different heights.
|
||||
$toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights.
|
||||
$checkbox-ios-icon-border-radius: 0px !default;
|
||||
|
||||
// App Material Design Variables
|
||||
|
|
@ -274,16 +274,6 @@ $core-question-state-incorrect-color: $red-light !default;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin app-root() {
|
||||
$root: #{&};
|
||||
@at-root ion-app.app-root {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Font Awesome
|
||||
$fa-font-path: $font-path;
|
||||
@import "font-awesome";
|
||||
|
|
|
|||
Loading…
Reference in New Issue