603ab4e5ac
Ionic sets the "contain" CSS property to some elements. This enables CSS containment, which changes how elements are positioned and sized, breaking fixed positioned elements, iframes in full screen mode, subtitle menus in videos and potentially more things. CSS containment is not supported in iOS and Android 4.4, so it can introduce inconsistencies across devices.
1145 lines
25 KiB
SCSS
1145 lines
25 KiB
SCSS
// http://ionicframework.com/docs/theming/
|
|
|
|
|
|
// App Global Sass
|
|
// --------------------------------------------------
|
|
// Put style rules here that you want to apply globally. These
|
|
// styles are for the entire app and not just one component.
|
|
// Additionally, this file can be also used as an entry point
|
|
// to import other Sass files to be included in the output CSS.
|
|
//
|
|
// Shared Sass variables, which can be used to adjust Ionic's
|
|
// default Sass variables, belong in "theme/variables.scss".
|
|
//
|
|
// To declare rules for a specific mode, create a child rule
|
|
// for the .md, .ios, or .wp mode classes. The mode class is
|
|
// automatically applied to the <body> element in the app.
|
|
|
|
// Alignment
|
|
// -------------------------
|
|
|
|
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 {
|
|
display: block;
|
|
max-width: 100%;
|
|
&[height] {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.opacity-hide { opacity: 0; }
|
|
.core-big { font-size: 115%; }
|
|
.invisible { visibility: hidden; }
|
|
|
|
.button-no-uppercase {
|
|
text-transform: none;
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
.core-center-view .scroll-content {
|
|
display: flex!important;
|
|
align-content: center !important;
|
|
align-items: center !important;
|
|
> * {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
.hidden-phone {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
.hidden-tablet {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
.has-refresher > .scroll-content {
|
|
border-top: 0 !important;
|
|
}
|
|
|
|
// Define an alternative way to set a heading in an item without using a heading tag.
|
|
// This is done for accessibility reasons when a heading is semantically incorrect.
|
|
.item .item-heading {
|
|
@extend h6;
|
|
margin: 0;
|
|
}
|
|
|
|
.item-dimmed {
|
|
opacity: 0.71;
|
|
}
|
|
|
|
// Simulate item[disabled] but keeping pointer-events.
|
|
.item-disabled {
|
|
opacity: .4;
|
|
}
|
|
|
|
.item-radio-checked {
|
|
background-color: $gray-lighter;
|
|
}
|
|
|
|
// Make no-lines work in any element, not just ion-item and ion-list.
|
|
.item *[no-lines] .item-inner,
|
|
*[no-lines] .item .item-inner {
|
|
border: 0;
|
|
}
|
|
|
|
.item h2 {
|
|
text-overflow: inherit;
|
|
overflow: inherit;
|
|
}
|
|
|
|
.core-nav-item-selected, .item.core-nav-item-selected {
|
|
@include core-selected-item($core-splitview-selected);
|
|
}
|
|
|
|
// Recover borders on items inside cards.
|
|
.card.with-borders .core-as-item,
|
|
.core-as-item {
|
|
@include core-as-items();
|
|
}
|
|
|
|
.card.with-borders .item {
|
|
@include core-items();
|
|
}
|
|
|
|
.core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon {
|
|
min-height: 32px;
|
|
img, .label {
|
|
max-height: 32px;
|
|
vertical-align: middle;
|
|
}
|
|
img {
|
|
max-width: 32px;
|
|
}
|
|
.label {
|
|
@include margin(null, null, null, 5px);
|
|
color: $gray-darker;
|
|
}
|
|
}
|
|
|
|
.core-bold, .core-bold .label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.core-module-icon {
|
|
width: auto;
|
|
max-width: 24px;
|
|
max-height: 24px;
|
|
}
|
|
|
|
.core-button-spinner {
|
|
min-height: 44px;
|
|
min-width: 50px;
|
|
text-align: center;
|
|
|
|
.spinner {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
// Avatar
|
|
// -------------------------
|
|
// Large centered avatar
|
|
.item-avatar-center {
|
|
text-align: center;
|
|
|
|
&.item-complex .item-content {
|
|
text-align: center;
|
|
@include padding(null, null, null, 49px);
|
|
}
|
|
|
|
> img:first-child,
|
|
ion-avatar img,
|
|
img {
|
|
display: block;
|
|
margin: auto;
|
|
width: 90px;
|
|
height: 90px;
|
|
max-width: 90px;
|
|
max-height: 90px;
|
|
margin-bottom: 10px;
|
|
border-radius : 50%;
|
|
padding: 4px;
|
|
border: 1px solid #ddd;
|
|
background-color: white;
|
|
|
|
&.avatar-full {
|
|
border-radius: 2%;
|
|
border: 0;
|
|
max-width: 100%;
|
|
max-height: 160px;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
ion-avatar ion-img, ion-avatar img {
|
|
text-indent: -99999px;
|
|
background-color: $gray-light;
|
|
}
|
|
|
|
// Form items
|
|
// -------------------------
|
|
|
|
.item .core-input-footnote {
|
|
width: 100%;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
font-style: italic;
|
|
}
|
|
|
|
ion-datetime {
|
|
position: relative;
|
|
}
|
|
|
|
input {
|
|
@include text-align('start');
|
|
@include rtl() {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/** Format Text - Show more styles. */
|
|
/** Styles of elements inside the directive should be placed in format-text.scss */
|
|
core-format-text {
|
|
user-select: text;
|
|
word-break: break-word;
|
|
word-wrap: break-word;
|
|
|
|
&[maxHeight],
|
|
&[ng-reflect-max-height] {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
/* Force display inline */
|
|
&.inline {
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
|
|
// This is to allow clicks in radio/checkbox content.
|
|
&.core-text-formatted {
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
|
|
.core-show-more {
|
|
display: none;
|
|
}
|
|
|
|
&:not(.core-shortened) {
|
|
max-height: none !important;
|
|
}
|
|
|
|
&.core-shortened {
|
|
color: $gray-darker;
|
|
overflow: hidden;
|
|
min-height: 50px;
|
|
|
|
.core-show-more {
|
|
color: color($colors, dark);
|
|
@include text-align('end');
|
|
font-size: 14px;
|
|
display: block;
|
|
position: absolute;
|
|
@include position(null, 0, 0, null);
|
|
z-index: 1001;
|
|
background-color: $white;
|
|
@include padding(null, null, null, 10px);
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
height: 100%;
|
|
position: absolute;
|
|
@include position(null, 0, 0, 0);
|
|
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
|
|
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.core-expand-in-fullview {
|
|
.core-show-more {
|
|
@include svg-background-image($item-md-detail-push-svg, true);
|
|
@include padding-horizontal(null, 18px);
|
|
@include background-position(end, 0, center);
|
|
|
|
background-repeat: no-repeat;
|
|
background-size: 14px 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[singleLine="true"],
|
|
&[ng-reflect-single-line="true"] {
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
audio, video, a, iframe {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.core-media-adapt-width {
|
|
max-width: 100%;
|
|
}
|
|
|
|
img.core-media-adapt-width {
|
|
height: auto;
|
|
}
|
|
|
|
audio.core-media-adapt-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.core-adapted-img-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.core-image-viewer-icon {
|
|
position: absolute;
|
|
@include position(null, 10px, 10px, null);
|
|
color: $black;
|
|
border-radius: 5px;
|
|
background: rgba(255, 255, 255, .5);
|
|
text-align: center;
|
|
|
|
width: 32px;
|
|
height: 32px;
|
|
max-width: 32px;
|
|
line-height: 32px;
|
|
font-size: 24px;
|
|
ion-icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
.item .item-button[icon-only] {
|
|
height: 2.8em;
|
|
font-size: 1.6rem;
|
|
padding: 8px 11px;
|
|
margin: 0;
|
|
}
|
|
|
|
ion-col ion-select:not([text-start]) {
|
|
@include float(end);
|
|
max-width: none;
|
|
width: 100%;
|
|
.select-text {
|
|
white-space: normal;
|
|
@include text-align('end');
|
|
}
|
|
}
|
|
|
|
.item-radio-disabled ion-radio[ng-reflect-value="disabled"]{
|
|
display: none;
|
|
}
|
|
|
|
ion-select {
|
|
position: relative; // Ionic fix. Button can occupy all page if not.
|
|
color: $core-select-placeholder-color;
|
|
align-self: start;
|
|
|
|
.select-icon .select-icon-inner {
|
|
color: $core-select-placeholder-color;
|
|
}
|
|
|
|
&.select-disabled .select-icon .select-icon-inner {
|
|
color: $text-color;
|
|
}
|
|
@each $color-name, $color-base, $color-contrast in get-colors($colors) {
|
|
&.select-md-#{$color-name},
|
|
&.select-ios-#{$color-name},
|
|
&.select-wp-#{$color-name} {
|
|
color: $color-base;
|
|
|
|
.select-icon .select-icon-inner {
|
|
color: $color-base;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ion-select.core-button-select,
|
|
.core-button-select {
|
|
background-color: white;
|
|
color: $core-select-placeholder-color;
|
|
white-space: normal;
|
|
align-self: start;
|
|
max-width: none;
|
|
@include text-align('start');
|
|
|
|
&.select-md,
|
|
&.button-md {
|
|
background: $card-md-background-color;
|
|
box-shadow: $card-md-box-shadow;
|
|
}
|
|
|
|
&.select-ios,
|
|
&.button-ios {
|
|
background: $card-ios-background-color;
|
|
box-shadow: $card-ios-box-shadow;
|
|
}
|
|
|
|
&.select-wp,
|
|
&.button-wp {
|
|
background: $card-wp-background-color;
|
|
}
|
|
|
|
.select-text {
|
|
white-space: normal;
|
|
}
|
|
|
|
.button-inner {
|
|
justify-content: start;
|
|
}
|
|
|
|
.select-icon .select-icon-inner {
|
|
color: $core-select-placeholder-color;
|
|
}
|
|
|
|
ion-icon:last-child {
|
|
@include margin(null, null, null, 5px);
|
|
@include text-align('end');
|
|
flex-grow: 2;
|
|
}
|
|
|
|
.select-text {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
// File uploader.
|
|
// -------------------------
|
|
.core-fileuploader-file-handler {
|
|
position: relative;
|
|
|
|
input {
|
|
position: absolute;
|
|
@include position(null, 0, 0, null);
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
opacity: 0;
|
|
outline: none;
|
|
z-index: 100;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// Question.
|
|
// -------------------------
|
|
.core-correct-icon {
|
|
padding: 0 ($content-padding / 2);
|
|
position: absolute;
|
|
@include position(null, 0, $content-padding / 2, null);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.core-question-answer-correct {
|
|
color: $core-question-correct-color;
|
|
}
|
|
|
|
.core-question-answer-incorrect {
|
|
color: $core-question-incorrect-color;
|
|
}
|
|
|
|
input, select {
|
|
&.core-question-answer-correct, &.core-question-answer-incorrect {
|
|
background-color: $gray-lighter;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
|
|
.core-question-correct,
|
|
.core-question-comment {
|
|
color: $core-question-correct-color;
|
|
background-color: $core-question-correct-color-bg;
|
|
|
|
.label, ion-label.label, .select-text, .select-icon .select-icon-inner {
|
|
color: $core-question-correct-color;
|
|
}
|
|
.radio-icon {
|
|
border-color: $core-question-correct-color;
|
|
}
|
|
.radio-inner {
|
|
background-color: $core-question-correct-color;
|
|
}
|
|
}
|
|
|
|
.core-question-incorrect {
|
|
color: $core-question-incorrect-color;
|
|
background-color: $core-question-incorrect-color-bg;
|
|
|
|
.label, ion-label.label, .select-text, .select-icon .select-icon-inner {
|
|
color: $core-question-incorrect-color;
|
|
}
|
|
.radio-icon {
|
|
border-color: $core-question-incorrect-color;
|
|
}
|
|
.radio-inner {
|
|
background-color: $core-question-incorrect-color;
|
|
}
|
|
}
|
|
|
|
.core-question-feedback-container {
|
|
background-color: $core-question-feedback-color-bg;
|
|
color: $core-question-feedback-color;
|
|
|
|
.specificfeedback, .rightanswer, .im-feedback, .feedback, .generalfeedback {
|
|
margin: 0 0 .5em;
|
|
}
|
|
|
|
.correctness {
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
font-weight: bold;
|
|
line-height: 14px;
|
|
color: $white;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
|
|
background-color: $gray-dark;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
|
|
&.incorrect {
|
|
background-color: $red;
|
|
}
|
|
&.correct {
|
|
background-color: $green;
|
|
}
|
|
}
|
|
}
|
|
|
|
.core-question-feedback-inline {
|
|
display: inline-block;
|
|
}
|
|
|
|
.core-question-feedback-padding {
|
|
@include padding(8px, 35px, 8px, 14px);
|
|
}
|
|
|
|
.core-question-correct {
|
|
background-color: $core-question-state-correct-color;
|
|
}
|
|
.core-question-partiallycorrect {
|
|
background-color: $core-question-state-partial-color;
|
|
}
|
|
.core-question-notanswered,
|
|
.core-question-incorrect {
|
|
background-color: $core-question-state-incorrect-color;
|
|
}
|
|
.core-question-answersaved,
|
|
.core-question-requiresgrading {
|
|
color: $text-color;
|
|
background-color: $core-question-saved-color-bg;
|
|
}
|
|
|
|
.core-question-warning {
|
|
color: $core-question-warning-color;
|
|
}
|
|
|
|
.questioncorrectnessicon,
|
|
.fa.icon.questioncorrectnessicon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.action-sheet-group {
|
|
overflow: auto;
|
|
}
|
|
.alert-message {
|
|
overflow-y: auto;
|
|
}
|
|
ion-alert.core-nohead {
|
|
|
|
&.alert-md .alert-message {
|
|
padding-top: $alert-md-message-padding-bottom;
|
|
}
|
|
&.alert-ios .alert-message {
|
|
padding-top: $alert-ios-message-padding-bottom;
|
|
}
|
|
&.alert-wp .alert-message {
|
|
padding-top: $alert-wp-message-padding-bottom;
|
|
}
|
|
.alert-head {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
ion-alert .alert-checkbox-group {
|
|
border: 0;
|
|
}
|
|
|
|
ion-toast.core-toast-success .toast-wrapper{
|
|
background: $green-dark;
|
|
}
|
|
|
|
ion-toast.core-toast-alert .toast-wrapper{
|
|
background: $red-dark;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
resize: none;
|
|
|
|
&[core-auto-rows] {
|
|
height: auto;
|
|
line-height: 18px;
|
|
padding: 5px;
|
|
}
|
|
|
|
&:not([core-auto-rows]) {
|
|
height: 200px;
|
|
min-height: $core-rte-min-height;
|
|
}
|
|
}
|
|
|
|
.toolbar img.core-bar-button-image,
|
|
.toolbar .core-bar-button-image img {
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: $core-toolbar-button-image-width - 1;
|
|
max-height: $core-toolbar-button-image-width - 1;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
// Footer with auto height.
|
|
.footer.footer-adjustable {
|
|
height: auto;
|
|
}
|
|
|
|
.core-circle:before {
|
|
content: ' \25CF';
|
|
}
|
|
|
|
@each $color-name, $color-base, $color-contrast in get-colors($colors) {
|
|
// Message cards.
|
|
.core-#{$color-name}-card {
|
|
@extend ion-card;
|
|
border-bottom: 3px solid $color-base;
|
|
|
|
&[icon-start] {
|
|
@include padding(null, null, null, 52px);
|
|
position: relative;
|
|
|
|
> ion-icon {
|
|
color: $color-base;
|
|
position: absolute;
|
|
@include position(0, null, null, 16px);
|
|
height: 100%;
|
|
font-size: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.core-#{$color-name}-item {
|
|
border-bottom: 3px solid $color-base !important;
|
|
ion-icon {
|
|
color: $color-base;
|
|
}
|
|
}
|
|
|
|
.core-#{$color-name}-item.item-input {
|
|
border-bottom: 0 !important;
|
|
|
|
&.item-md .item-inner {
|
|
@include md-input-highlight($color-base);
|
|
}
|
|
|
|
&.item-ios .item-inner {
|
|
@include ios-input-highlight($color-base);
|
|
}
|
|
|
|
&.item-wp .item-inner {
|
|
border-color: $color-base;
|
|
}
|
|
}
|
|
|
|
.core-#{$color-name}-selected-item {
|
|
@include safe-area-border-start(5px, solid, $color-base);
|
|
|
|
&.item-md {
|
|
@include padding(null, null, null, $item-md-padding-start - 5px);
|
|
}
|
|
&.item-ios {
|
|
@include padding(null, null, null, $item-ios-padding-start - 5px);
|
|
}
|
|
&.item-wp {
|
|
@include padding(null, null, null, $item-wp-padding-start - 5px);
|
|
}
|
|
}
|
|
|
|
.split-pane-main .core-#{$color-name}-selected-item {
|
|
@include border-start(5px, solid, $color-base);
|
|
}
|
|
|
|
.core-#{$color-name}-circle {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.core-#{$color-name}-circle:before {
|
|
@extend .core-circle:before;
|
|
color: $color-base;
|
|
}
|
|
|
|
.text-#{$color-name}, p.text-#{$color-name}, .item p.text-#{$color-name}, .card p.text-#{$color-name} {
|
|
color: $color-base;
|
|
}
|
|
}
|
|
|
|
.accesshide {
|
|
position: absolute;
|
|
@include position(null, null, null, -10000px);
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.core-monospaced {
|
|
font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;
|
|
}
|
|
|
|
|
|
.core-white-push-arrow .item-inner{
|
|
@include push-arrow-color($white);
|
|
}
|
|
|
|
// For list where some items have detail icon and some others don't.
|
|
.core-list-align-detail-right .item .item-inner {
|
|
@include padding-horizontal(null, 32px);
|
|
}
|
|
|
|
[ion-fixed] {
|
|
width: 100%;
|
|
}
|
|
|
|
.core-modal-fullscreen .modal-wrapper {
|
|
position: absolute;
|
|
@include position(0 !important, null, null, 0 !important);
|
|
display: block;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
@media only screen and (min-height: 400px) and (min-width: 300px) {
|
|
.core-modal-lateral {
|
|
.modal-wrapper {
|
|
position: absolute;
|
|
@include position(0 !important, 0 !important, 0 !important, auto);
|
|
display: block;
|
|
height: 100% !important;
|
|
width: auto;
|
|
min-width: 300px;
|
|
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
|
|
}
|
|
ion-backdrop {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.has-fab .scroll-content{
|
|
padding-bottom: 56px;
|
|
}
|
|
|
|
// For some reason, in iOS the pages don't inherit the background-color from ion-app, set it explicitly.
|
|
.ion-page {
|
|
background-color: $background-color;
|
|
}
|
|
|
|
// Embed video responsive classes.
|
|
// Taken from https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_embed.scss
|
|
.embed-responsive {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
display: block;
|
|
content: "";
|
|
}
|
|
|
|
.embed-responsive-item,
|
|
iframe,
|
|
embed,
|
|
object,
|
|
video {
|
|
position: absolute;
|
|
@include position(0, null, 0, 0);
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
iframe iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.embed-responsive-21by9 {
|
|
&::before {
|
|
padding-top: percentage(9 / 21);
|
|
}
|
|
}
|
|
|
|
.embed-responsive-16by9 {
|
|
&::before {
|
|
padding-top: percentage(9 / 16);
|
|
}
|
|
}
|
|
|
|
.embed-responsive-4by3 {
|
|
&::before {
|
|
padding-top: percentage(3 / 4);
|
|
}
|
|
}
|
|
|
|
.embed-responsive-1by1 {
|
|
&::before {
|
|
padding-top: percentage(1 / 1);
|
|
}
|
|
}
|
|
|
|
ion-alert.core-inapp-notification {
|
|
pointer-events: none;
|
|
position: fixed;
|
|
align-items: start;
|
|
|
|
ion-backdrop {
|
|
display: none;
|
|
}
|
|
|
|
.alert-wrapper {
|
|
width: $toast-width;
|
|
max-width: $toast-max-width;
|
|
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
|
|
padding: 2px 0;
|
|
border-radius: 0;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.alert-head {
|
|
padding: 5px 10px;
|
|
@include text-align('start');
|
|
h2 {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.alert-message {
|
|
padding: 5px 10px;
|
|
@include text-align('start');
|
|
p {
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.core-icon-with-badge {
|
|
position: relative;
|
|
|
|
.icon {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.core-icon-badge {
|
|
width: auto;
|
|
height: auto;
|
|
margin: 0;
|
|
position: absolute;
|
|
@include position(-18px, -8px, null, null);
|
|
color: red;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.item.item-radio, .item.item-checkbox {
|
|
// Fix links and videos in ion-radio and ion-checkbox.
|
|
.input-wrapper {
|
|
position: relative;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
// Show whole text on options.
|
|
ion-label {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
.core-no-text-wrap {
|
|
white-space: nowrap;
|
|
|
|
&.item.item-radio, &.item.item-checkbox {
|
|
ion-label {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fix modals displayed over action sheet.
|
|
&.disable-scroll ion-modal .ion-page {
|
|
pointer-events: initial;
|
|
}
|
|
|
|
// Avoid scroll bouncing on iOS if disabled.
|
|
&.disable-scroll .ion-page .content-ios .scroll-content::before,
|
|
&.disable-scroll .ion-page .content-ios .scroll-content::after {
|
|
content: none;
|
|
}
|
|
|
|
.core-iframe-offline-disabled {
|
|
display: none !important;
|
|
}
|
|
|
|
.core-horizontal-scroll {
|
|
display: flex;
|
|
flex-flow: nowrap;
|
|
overflow-x: scroll;
|
|
flex-direction: row;
|
|
}
|
|
|
|
ion-content.core-expand-max .scroll-content {
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
|
|
core-loading {
|
|
flex-grow: 1;
|
|
|
|
.core-loading-content {
|
|
position: absolute;
|
|
@include position(0,0,0,0);
|
|
}
|
|
}
|
|
|
|
ion-list {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
> div {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.core-expandable {
|
|
ion-icon[item-start] + .item-inner {
|
|
@include margin-horizontal(0px, null);
|
|
}
|
|
.icon.fa.fa-caret-right,
|
|
.icon.fa.fa-caret-down {
|
|
min-width: 16px;
|
|
min-height: 1.6rem;
|
|
font-size: 1.6rem;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
ion-alert .alert-checkbox-button .alert-checkbox-label {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
@each $color-name, $color-base, $color-contrast in get-colors($colors) {
|
|
// If there is text with a color it should use this color
|
|
// and override whatever item sets it to
|
|
.text-#{$color-name} {
|
|
color: $color-contrast;
|
|
}
|
|
|
|
.item-divider-md-#{$color-name} h2,
|
|
.item-divider-wp-#{$color-name} h2,
|
|
.item-divider-ios-#{$color-name} h2 {
|
|
color: $color-contrast;
|
|
}
|
|
}
|
|
|
|
[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 {
|
|
ion-content:not(.has-footer) {
|
|
> .scroll-content, > .fixed-content {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
core-ion-tabs[tabsplacement="bottom"] .tabbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.safe-padding-horizontal{
|
|
@include safe-area-padding-horizontal(0px, 0px);
|
|
}
|
|
|
|
[padding].safe-padding-horizontal,
|
|
ion-app.ios [padding].safe-padding-horizontal {
|
|
@include safe-area-padding-horizontal($content-padding, $content-padding);
|
|
}
|
|
|
|
ion-app.ios .split-pane-side,
|
|
.split-pane-side {
|
|
.safe-padding-horizontal,
|
|
[padding].safe-padding-horizontal {
|
|
@include safe-area-padding-start(0px, $content-padding);
|
|
}
|
|
}
|
|
|
|
ion-app.ios .split-pane-main,
|
|
.split-pane-main {
|
|
.safe-padding-horizontal,
|
|
[padding].safe-padding-horizontal {
|
|
@include safe-area-padding-end($content-padding, 0px);
|
|
}
|
|
}
|
|
|
|
details summary {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.icon.fa-graduation-cap,
|
|
.item > .icon.fa,
|
|
.item-inner > .icon.fa {
|
|
font-size: 21px;
|
|
width: 21px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
// Ionic sets the "contain" CSS property to some elements. This enables CSS
|
|
// containment, which changes how elements are positioned and sized, breaking
|
|
// fixed positioned elements, iframes in full screen mode, subtitle menus in
|
|
// videos and potentially more things. CSS containment is not supported in iOS
|
|
// and Android 4.4, so it can introduce inconsistencies across devices.
|
|
// See https://www.w3.org/TR/css-contain-1
|
|
* {
|
|
contain: none !important;
|
|
}
|
|
|
|
// Highlight text.
|
|
.matchtext {
|
|
background-color: $core-text-hightlight-background-color;
|
|
}
|
|
|
|
// Styles for desktop apps only.
|
|
ion-app.platform-desktop {
|
|
video::-webkit-media-text-track-display {
|
|
white-space: normal !important;
|
|
}
|
|
|
|
&.platform-windows {
|
|
video::-webkit-media-text-track-display {
|
|
font-size: 0.6em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fix text wrapping in block buttons.
|
|
.button-block[text-wrap] {
|
|
height: auto;
|
|
|
|
// Add vertical padding, we cannot rely on a fixed height + centering like in normal buttons.
|
|
.item-md & {
|
|
padding-top: .5357em;
|
|
padding-bottom: .5357em;
|
|
}
|
|
.item-md &.item-button {
|
|
padding-top: .6em;
|
|
padding-bottom: .6em;
|
|
}
|
|
.item-ios & {
|
|
padding-top: .9em;
|
|
padding-bottom: .9em;
|
|
}
|
|
.item-ios &.item-button {
|
|
padding-top: .7846em;
|
|
padding-bottom: .7846em;
|
|
}
|
|
|
|
// Keep a consistent height with normal buttons if text does not wrap.
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
&.button-md {
|
|
min-height: $button-md-height;
|
|
}
|
|
&.button-large-md {
|
|
min-height: $button-md-large-height;
|
|
}
|
|
&.button-small-md {
|
|
min-height: $button-md-small-height;
|
|
}
|
|
&.button-ios {
|
|
min-height: $button-ios-height;
|
|
}
|
|
&.button-large-ios {
|
|
min-height: $button-ios-large-height;
|
|
}
|
|
&.button-small-ios {
|
|
min-height: $button-ios-small-height;
|
|
}
|
|
}
|
|
|
|
// Make funnel icon have iOS look.
|
|
.ion-md-funnel::before {
|
|
content: "\f182";
|
|
}
|