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,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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
1698
src/app/app.scss
1698
src/app/app.scss
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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