// 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 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; } } // All external files should be banned from copying it. ion-avatar, img, audio, video, iframe, [core-external-content], [role="presentation"], [data-original-src], [src] { user-select: none !important; } .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-color; align-self: start; .select-icon .select-icon-inner { color: $core-select-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; } } } } .item-label-stacked ion-select[multiple="true"] { width: 100%; } ion-select .select-placeholder { color: $core-select-placeholder-color; } ion-select.core-button-select, .core-button-select { background-color: white; color: $core-select-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-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; } .action-sheet-wrapper { .action-sheet-button.action-sheet-cancel { color: $core-action-sheet-cancel-color; } .action-sheet-selected { color: $core-color; } } .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: $core-toolbar-button-image-width; height: $core-toolbar-button-image-width; max-width: $core-toolbar-button-image-width; border-radius: 50%; } .header .toolbar-ios { height: $toolbar-ios-height; } // 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; } ion-backdrop { transition: opacity 100ms ease-in-out; opacity: .1; } } @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; } // Lower z-index for ion-item-divider so it is displayed below video menus. ion-item-divider { z-index: 2; // Ionic default is 100. } // 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"; } // Fix icon size in lists, to prevent them scaling with text. .item, .item-inner { > ion-icon { font-size: 28px; } }