mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
418 lines
8.4 KiB
SCSS
418 lines
8.4 KiB
SCSS
@import "./app.vars";
|
|
|
|
// Normalize
|
|
// --------------------------------------------------
|
|
@import "../../themes/normalize";
|
|
|
|
|
|
// Util
|
|
// --------------------------------------------------
|
|
@import "../../themes/util";
|
|
|
|
|
|
// App Structure
|
|
// --------------------------------------------------
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
@include margin(0);
|
|
@include padding(0);
|
|
|
|
position: fixed;
|
|
overflow: hidden;
|
|
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
|
|
text-rendering: optimizeLegibility;
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-webkit-user-drag: none;
|
|
|
|
-ms-content-zooming: none;
|
|
touch-action: manipulation;
|
|
|
|
word-wrap: break-word;
|
|
|
|
overscroll-behavior-y: contain;
|
|
|
|
text-size-adjust: none;
|
|
user-select: none;
|
|
}
|
|
|
|
|
|
// App Typography
|
|
// --------------------------------------------------
|
|
|
|
a {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.enable-hover a:not(.button):hover {
|
|
opacity: .7;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@include margin(16px, null, 10px, null);
|
|
|
|
font-weight: $headings-font-weight;
|
|
line-height: $headings-line-height;
|
|
}
|
|
|
|
h1 {
|
|
@include margin(20px, null, null, null);
|
|
|
|
font-size: $h1-font-size;
|
|
}
|
|
|
|
h2 {
|
|
@include margin(18px, null, null, null);
|
|
|
|
font-size: $h2-font-size;
|
|
}
|
|
|
|
h3 {
|
|
font-size: $h3-font-size;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $h4-font-size;
|
|
}
|
|
|
|
h5 {
|
|
font-size: $h5-font-size;
|
|
}
|
|
|
|
h6 {
|
|
font-size: $h6-font-size;
|
|
}
|
|
|
|
small {
|
|
font-size: 75%;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
position: relative;
|
|
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
top: -.5em;
|
|
}
|
|
|
|
sub {
|
|
bottom: -.25em;
|
|
}
|
|
|
|
// Page Container Structure
|
|
// --------------------------------------------------
|
|
|
|
ion-app,
|
|
ion-router-outlet,
|
|
ion-tab,
|
|
ion-tabs,
|
|
ion-nav,
|
|
.ion-page {
|
|
@include position(0, 0, 0, 0);
|
|
|
|
position: absolute;
|
|
z-index: $z-index-page-container;
|
|
overflow: hidden;
|
|
|
|
contain: layout size style;
|
|
}
|
|
|
|
ion-app,
|
|
.ion-page {
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hide-page {
|
|
opacity: 0;
|
|
}
|
|
|
|
// TODO: move to somewhere else
|
|
|
|
$navigation-ios-transition-background: #000 !default;
|
|
|
|
.nav-decor {
|
|
display: none;
|
|
}
|
|
|
|
.show-decor > .nav-decor {
|
|
@include position(0, 0, 0, 0);
|
|
|
|
// when ios pages transition, the leaving page grays out
|
|
// this is the black square behind all pages so they gray out
|
|
position: absolute;
|
|
z-index: 0;
|
|
display: block;
|
|
|
|
background: $navigation-ios-transition-background;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
// Misc
|
|
// --------------------------------------------------
|
|
|
|
ion-route,
|
|
ion-route-controller,
|
|
ion-animation-controller,
|
|
ion-nav-controller,
|
|
ion-menu-controller,
|
|
ion-action-sheet-controller,
|
|
ion-alert-controller,
|
|
ion-loading-controller,
|
|
ion-modal-controller,
|
|
ion-picker-controller,
|
|
ion-toast-controller,
|
|
[app-viewport],
|
|
[overlay-portal],
|
|
[nav-viewport],
|
|
[tab-portal] {
|
|
display: none;
|
|
}
|
|
|
|
|
|
// Text Alignment
|
|
// --------------------------------------------------
|
|
|
|
@if ($include-text-alignment-utilities == true) {
|
|
// Creates text alignment attributes based on screen size
|
|
@each $breakpoint in map-keys($screen-breakpoints) {
|
|
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
|
|
|
|
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
|
|
// Provide `[text-{bp}]` attributes for aligning the text based
|
|
// on the breakpoint
|
|
[text#{$infix}-center] {
|
|
@include text-align(center, !important);
|
|
}
|
|
|
|
[text#{$infix}-justify] {
|
|
@include text-align(justify, !important);
|
|
}
|
|
|
|
[text#{$infix}-start] {
|
|
@include text-align(start, !important);
|
|
}
|
|
|
|
[text#{$infix}-end] {
|
|
@include text-align(end, !important);
|
|
}
|
|
|
|
[text#{$infix}-left] {
|
|
@include text-align(left, !important);
|
|
}
|
|
|
|
[text#{$infix}-right] {
|
|
@include text-align(right, !important);
|
|
}
|
|
|
|
[text#{$infix}-nowrap] {
|
|
// scss-lint:disable ImportantRule
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
[text#{$infix}-wrap] {
|
|
// scss-lint:disable ImportantRule
|
|
white-space: normal !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Text Transformation
|
|
// --------------------------------------------------
|
|
|
|
@if ($include-text-transform-utilities == true) {
|
|
// Creates text transform attributes based on screen size
|
|
@each $breakpoint in map-keys($screen-breakpoints) {
|
|
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
|
|
|
|
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
|
|
// Provide `[text-{bp}]` attributes for transforming the text based
|
|
// on the breakpoint
|
|
[text#{$infix}-uppercase] {
|
|
// scss-lint:disable ImportantRule
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
[text#{$infix}-lowercase] {
|
|
// scss-lint:disable ImportantRule
|
|
text-transform: lowercase !important;
|
|
}
|
|
|
|
[text#{$infix}-capitalize] {
|
|
// scss-lint:disable ImportantRule
|
|
text-transform: capitalize !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Float Elements
|
|
// --------------------------------------------------
|
|
|
|
@if ($include-float-element-utilities == true) {
|
|
// Creates text transform attributes based on screen size
|
|
@each $breakpoint in map-keys($screen-breakpoints) {
|
|
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
|
|
|
|
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
|
|
// Provide `[float-{bp}]` attributes for floating the element based
|
|
// on the breakpoint
|
|
[float#{$infix}-left] {
|
|
@include float(left, !important);
|
|
}
|
|
|
|
[float#{$infix}-right] {
|
|
@include float(right, !important);
|
|
}
|
|
|
|
[float#{$infix}-start] {
|
|
@include float(start, !important);
|
|
}
|
|
|
|
[float#{$infix}-end] {
|
|
@include float(end, !important);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
ion-app [no-padding],
|
|
ion-app [no-padding] .scroll-inner {
|
|
@include padding(0);
|
|
}
|
|
|
|
@mixin app-padding($mode, $content-padding) {
|
|
.app-#{$mode} [padding],
|
|
.app-#{$mode} [padding] .scroll-inner {
|
|
@include padding($content-padding);
|
|
}
|
|
|
|
.app-#{$mode} [padding-top],
|
|
.app-#{$mode} [padding-top] .scroll-inner {
|
|
@include padding($content-padding, null, null, null);
|
|
}
|
|
|
|
.app-#{$mode} [padding-left],
|
|
.app-#{$mode} [padding-left] .scroll-inner {
|
|
@include padding-horizontal($content-padding, null);
|
|
}
|
|
|
|
.app-#{$mode} [padding-right],
|
|
.app-#{$mode} [padding-right] .scroll-inner {
|
|
@include padding-horizontal(null, $content-padding);
|
|
}
|
|
|
|
.app-#{$mode} [padding-bottom],
|
|
.app-#{$mode} [padding-bottom] .scroll-inner {
|
|
@include padding(null, null, $content-padding, null);
|
|
}
|
|
|
|
.app-#{$mode} [padding-vertical],
|
|
.app-#{$mode} [padding-vertical] .scroll-inner {
|
|
@include padding($content-padding, null, $content-padding, null);
|
|
}
|
|
|
|
.app-#{$mode} [padding-horizontal],
|
|
.app-#{$mode} [padding-horizontal] .scroll-inner {
|
|
@include padding-horizontal($content-padding);
|
|
}
|
|
}
|
|
|
|
|
|
// Content Margin
|
|
// --------------------------------------------------
|
|
|
|
ion-app [no-margin],
|
|
ion-app [no-margin] ion-scroll {
|
|
@include margin(0);
|
|
}
|
|
|
|
@mixin app-margin($mode, $content-margin) {
|
|
.app-#{$mode} [margin],
|
|
.app-#{$mode} [margin] .scroll-inner {
|
|
@include margin($content-margin);
|
|
}
|
|
|
|
.app-#{$mode} [margin-top],
|
|
.app-#{$mode} [margin-top] .scroll-inner {
|
|
@include margin($content-margin, null, null, null);
|
|
}
|
|
|
|
.app-#{$mode} [margin-left],
|
|
.app-#{$mode} [margin-left] .scroll-inner {
|
|
// scss-lint:disable PropertySpelling
|
|
margin-left: $content-margin;
|
|
}
|
|
|
|
.app-#{$mode} [margin-start],
|
|
.app-#{$mode} [margin-start] .scroll-inner {
|
|
@include margin-horizontal($content-margin, null);
|
|
}
|
|
|
|
.app-#{$mode} [margin-right],
|
|
.app-#{$mode} [margin-right] .scroll-inner {
|
|
// scss-lint:disable PropertySpelling
|
|
margin-right: $content-margin;
|
|
}
|
|
|
|
.app-#{$mode} [margin-end],
|
|
.app-#{$mode} [margin-end] .scroll-inner {
|
|
@include margin-horizontal(null, $content-margin);
|
|
}
|
|
|
|
.app-#{$mode} [margin-bottom],
|
|
.app-#{$mode} [margin-bottom] .scroll-inner {
|
|
@include margin(null, null, $content-margin, null);
|
|
}
|
|
|
|
.app-#{$mode} [margin-vertical],
|
|
.app-#{$mode} [margin-vertical] .scroll-inner {
|
|
@include margin($content-margin, null, $content-margin, null);
|
|
}
|
|
|
|
.app-#{$mode} [margin-horizontal],
|
|
.app-#{$mode} [margin-horizontal] .scroll-inner {
|
|
@include margin-horizontal($content-margin);
|
|
}
|
|
}
|