// 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; } /** * App Branding */ .mm-bglogo { background-color: $mm-color-init-screen; /* Change this to add a bg image or change color */ background: -webkit-radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen); background: radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen); background-repeat: no-repeat; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; display: table; .mm-logo { display: table-cell; text-align: center; vertical-align: middle; } img { width: $mm-init-screen-logo-width; max-width: $mm-init-screen-logo-max-width; display: block; margin: 0 auto; margin-bottom: 30px; } .spinner circle { stroke: $mm-init-screen-spinner-color; } } @media only screen and (min-width: 430px) { .mm-center-view .scroll-content { margin: 0 auto; max-width: 600px; /* display: table !important; */ width: 100% !important; height: 100% !important; .mm-view-content { /* display: table-cell; vertical-align: middle; */ display: block; // Added this style and commented some others to make scroll work. Box isn't centered vertically. } } } // 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; } .mm-oauth-icon, .item.mm-oauth-icon, .list .item.mm-oauth-icon { padding: ($content-padding / 2); border: 1px solid $list-border-color; img, span { max-height: 32px; vertical-align: middle; } img { max-width: 32px; } span { margin-left: 5px; color: $gray-darker; } .label { margin: 0; } } .icon-accessory, ion-icon.icon-accessory { color: $item-icon-accessory-color; font-size: $item-icon-accessory-font-size; } .mm-bold, .mm-bold .label { font-weight: bold; } .item .core-input-footnote { width: 100%; padding-top: 10px; padding-bottom: 10px; font-style: italic; } .content { // Set bgcolor in content instead of overriding $background-color because that variable is applied to a lot of places. background-color: $gray-light; } // Large centered avatar. .item-avatar-center { text-align: center; padding-left: 16px; &.item-complex .item-content { text-align: center; padding-left: 49px; } > img:first-child, ion-avatar 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; } } }