// 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
// -------------------------
.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;
}
/** 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, ol {
-webkit-padding-start: 40px;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
.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,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23FFFFFF'/></svg>") !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;
}