// 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 // ------------------------- .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: auto; } .opacity-hide { opacity: 0; } .core-big { font-size: 115%; } .invisible { visibility: hidden; } @include media-breakpoint-up(sm) { .core-center-view .scroll-content { display: flex!important; align-content: center !important; align-items: center !important; > * { margin: 0 auto; max-width: 600px; } } } @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; } } // 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.6; } .item-radio-checked { background-color: $gray-lighter; } // Make no-lines work in any element, not just ion-item and ion-list. .item *[no-lines] .item-inner, *[no-lines] .item .item-inner { border: 0; } .core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon { min-height: 32px; img, .label { max-height: 32px; vertical-align: middle; } img { max-width: 32px; } .label { margin-left: 5px; color: $gray-darker; } } .core-bold, .core-bold .label { font-weight: bold; } .core-module-icon { width: auto; } .core-button-spinner { min-height: 44px; min-width: 50px; text-align: center; .spinner { margin-top: 8px; } } // Avatar // ------------------------- // Large centered avatar .item-avatar-center { text-align: center; &.item-complex .item-content { text-align: center; padding-left: 49px; } > img:first-child, ion-avatar img, img { display: block; margin: auto; width: 90px; height: 90px; max-width: 90px; max-height: 90px; margin-bottom: 10px; border-radius : 50%; padding: 4px; border: 1px solid #ddd; &.avatar-full { border-radius: 2%; border: 0; max-width: 100%; max-height: 160px; width: auto; height: auto; } } } ion-avatar ion-img, ion-avatar img { text-indent: -99999px; background-color: $gray-light; } // Form items // ------------------------- .item .core-input-footnote { width: 100%; padding-top: 10px; padding-bottom: 10px; font-style: italic; } ion-datetime { position: relative; } /** Format Text */ core-format-text[maxHeight], *[core-format-text][maxHeight], core-format-text[ng-reflect-max-height], *[core-format-text][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); text-align: right; font-size: 14px; display: block; position: absolute; bottom: 0; right: 0; z-index: 1001; background-color: $white; padding-left: 10px; } &:before { content: ''; height: 100%; position: absolute; left: 0; right: 0; bottom: 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; } } } core-format-text[singleLine="true"], *[core-format-text][singleLine="true"], core-format-text[ng-reflect-single-line="true"], *[core-format-text][ng-reflect-single-line="true"] { cursor: pointer; pointer-events: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; position: relative; width: 100%; } .core-media-adapt-width { max-width: 100%; } audio.core-media-adapt-width { width: 100%; } .core-adapted-img-container { position: relative; display: inline-block; } .core-image-viewer-icon { position: absolute; right: 10px; bottom: 10px; color: $black; border-radius: 5px; background: rgba(255, 255, 255, .5); text-align: center; width: 32px; height: 32px; max-width: 32px; line-height: 32px; font-size: 24px; ion-icon { font-size: 24px; } } core-format-text, *[core-format-text] { audio, video, a, iframe { pointer-events: auto; } // Fix lists styles in core-format-text. ul { list-style-type: disc; } ol { list-style-type: decimal; } ul, ol { -webkit-padding-start: 15px; list-style-position: inside; ul { list-style-type: circle; } ol { list-style-type: lower-latin; } ul, ol { list-style-position: inside; margin-left: 15px; } } .badge { position: initial !important; } // Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text. img { width: initial; display: inline; } .core-disable-media-adapt, .core-disable-media-adapt .core-media-adapt-width { max-width: none !important; max-height: none !important; width: initial !important; height: initial !important; display: inline-block !important; } } // Message item. .item-message { core-format-text > p:only-child { display: inline; } } // Media item, ideal for icons. .item-media { min-height: $item-media-height + ($content-padding * 2); > img:first-child { max-width: $item-media-width; max-height: $item-media-height; } } // Ionic fix. Button can occupy all page if not. ion-select { position: relative } ion-col ion-select { float: right; max-width: none; width: 100%; .select-text { white-space: normal; text-align: right; } } // File uploader. // ------------------------- .core-fileuploader-file-handler { position: relative; input { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; opacity: 0; outline: none; z-index: 100; cursor: pointer; } } // Question. // ------------------------- .core-question-answer-correct, .core-question-comment { color: $core-question-correct-color; background-color: $core-question-correct-color-bg; .label, ion-label.label { color: $core-question-correct-color; } } .core-question-answer-incorrect, .core-question-incorrect { color: $core-question-incorrect-color; background-color: $core-question-incorrect-color-bg; .label, ion-label.label { color: $core-question-incorrect-color; } } .core-question-feedback-container { background-color: $core-question-feedback-color-bg; color: $core-question-feedback-color; .specificfeedback, .rightanswer, .im-feedback, .feedback, .generalfeedback { margin: 0 0 .5em; } .correctness { display: inline-block; padding: 2px 4px; font-weight: bold; line-height: 14px; color: $white; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); background-color: $gray-dark; -webkit-border-radius: 3px; border-radius: 3px; &.incorrect { background-color: $red; } &.correct { background-color: $green; } } } .core-question-feedback-inline { display: inline-block; } .core-question-feedback-padding { 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-warning { color: $core-question-warning-color; } .questioncorrectnessicon, .fa.icon.questioncorrectnessicon { font-size: 20px; } // Atto styles // ------------------------- .atto_image_preview { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .atto_image_preview_box { max-height: 200px; margin-bottom: 1em; overflow: auto; } .editor_atto_content img { cursor: pointer; } .atto_image_size { display: inline-block; } .atto_image_size input[type=checkbox] { margin-left: 1em; margin-right: 1em; } .atto_image_size input[type=text] { width: 3em; } .atto_image_size label { display: inline-block; } .atto_image_button_text-top { vertical-align: text-top; margin: 0 0.5em; } .atto_image_button_middle { vertical-align: middle; margin: 0 0.5em; } .atto_image_button_text-bottom { vertical-align: text-bottom; margin: 0 0.5em; } .atto_image_button_text-top.img-responsive, .atto_image_button_middle.img-responsive, .atto_image_button_text-bottom.img-responsive { /* If the image is display: block then linking the image to URLs won't work. */ display: inline-block; max-width: calc(100% - 1em); } /*rtl:begin:ignore*/ .atto_image_button_left { float: left; margin: 0 0.5em 0 0; max-width: calc(100% - 1em); } .atto_image_button_right { float: right; margin: 0 0 0 0.5em; max-width: calc(100% - 1em); } /*rtl:end:ignore*/ .action-sheet-group { overflow: auto; } .alert-message { overflow-y: auto; } ion-toast.core-toast-success .toast-wrapper{ background: $green-dark; } ion-toast.core-toast-alert .toast-wrapper{ background: $red-dark; } textarea { width: 100%; resize: none; &[core-auto-rows] { height: auto; line-height: 18px; padding: 5px; } &:not([core-auto-rows]) { height: 200px; min-height: $core-rte-min-height; } } .toolbar .core-bar-button-image { padding: 0; width: 100%; height: 100%; max-width: $core-toolbar-button-image-width - 1; max-height: $core-toolbar-button-image-width - 1; border-radius: 50%; } // Footer with auto height. .footer.footer-adjustable { height: auto; } canvas[core-chart] { max-width: 500px; margin: 0 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] { padding-left: 52px; position: relative; ion-icon { color: $color-base; position: absolute; top: 0; left: 16px; height: 100%; font-size: 24px; display: flex; align-items: center; } } } .core-#{$color-name}-item { border-bottom: 3px solid $color-base !important; ion-icon { color: $color-base; } } .core-#{$color-name}-circle { margin: 0 4px; } .core-#{$color-name}-circle:before { @extend .core-circle:before; color: $color-base; } .text-#{$color-name}, p.text-#{$color-name}, .item p.text-#{$color-name}, .card p.text-#{$color-name} { color: $color-base; } } .accesshide { position: absolute; left: -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{ background-image: url("data:image/svg+xml;charset=utf-8,

") !important; } // 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; top: 0 !important; left: 0 !important; display: block; width: 100% !important; height: 100% !important; } } // 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; }