mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(sass): restructure for sass theme updates
This commit is contained in:
Adam Bradley
@@ -1,5 +1,17 @@
|
||||
@import "../../globals.core";
|
||||
@import "./z-index";
|
||||
|
||||
// Globals
|
||||
// --------------------------------------------------
|
||||
@import "../themes/ionic.globals";
|
||||
|
||||
|
||||
// Normalize
|
||||
// --------------------------------------------------
|
||||
@import "../themes/normalize";
|
||||
|
||||
|
||||
// Util
|
||||
// --------------------------------------------------
|
||||
@import "../themes/util";
|
||||
|
||||
|
||||
// App Structure
|
||||
@@ -20,8 +32,6 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
@include user-select-none();
|
||||
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -46,6 +56,7 @@ body {
|
||||
word-wrap: break-word;
|
||||
|
||||
text-size-adjust: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -62,14 +73,15 @@ ion-tabs,
|
||||
left: 0;
|
||||
z-index: $z-index-page-container;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ion-tab scroll-cotent {
|
||||
display: none;
|
||||
ion-nav,
|
||||
ion-tab,
|
||||
ion-tabs {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ion-tab {
|
||||
@@ -80,15 +92,11 @@ ion-tab.show-tab {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
ion-tab.show-tab scroll-cotent {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Page Container Structure
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-page {
|
||||
.ion-page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -101,35 +109,11 @@ ion-page {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
ion-content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ion-page > ion-content {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
ion-page scroll-content {
|
||||
// do not render the scroll-content at all until ready
|
||||
display: none;
|
||||
}
|
||||
|
||||
ion-page.show-page {
|
||||
.ion-page.show-page {
|
||||
// show the page now that it's ready
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
ion-page.show-page scroll-content {
|
||||
// render the content when ready
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Toolbar Container Structure
|
||||
// --------------------------------------------------
|
||||
@@ -144,11 +128,6 @@ ion-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ion-toolbar {
|
||||
position: relative;
|
||||
z-index: $z-index-toolbar;
|
||||
}
|
||||
|
||||
ion-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -159,66 +138,13 @@ ion-footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ion-tabbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-toolbar;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
// default to hidden until ready
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
ion-tabbar.show-tabbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[tabsPlacement=top] > ion-tabbar {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
|
||||
// Scrollable Content
|
||||
// Misc
|
||||
// --------------------------------------------------
|
||||
|
||||
scroll-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-scroll-content;
|
||||
display: block;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
ion-content.js-scroll > scroll-content {
|
||||
position: relative;
|
||||
|
||||
min-height: 100%;
|
||||
|
||||
overflow-x: initial;
|
||||
overflow-y: initial;
|
||||
-webkit-overflow-scrolling: auto;
|
||||
will-change: initial;
|
||||
}
|
||||
|
||||
.disable-scroll ion-page scroll-content {
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
[app-viewport],
|
||||
[overlay-portal],
|
||||
[nav-viewport],
|
||||
[nav-portal],
|
||||
[tab-portal],
|
||||
.nav-decor {
|
||||
display: none;
|
||||
226
src/components/app/normalize.scss
vendored
226
src/components/app/normalize.scss
vendored
@@ -1,226 +0,0 @@
|
||||
// ! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css
|
||||
|
||||
|
||||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
// 1. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
vertical-align: baseline; // 1
|
||||
}
|
||||
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
// Embedded content
|
||||
// ==========================================================================
|
||||
|
||||
// Remove border when inside `a` element in IE 8/9/10.
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Correct overflow not hidden in IE 9/10/11.
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
// Grouping content
|
||||
// ==========================================================================
|
||||
|
||||
// Address margin not present in IE 8/9 and Safari.
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
|
||||
border-width: 0;
|
||||
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
// Contain overflow in all browsers.
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Address odd `em`-unit font size rendering in all browsers.
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `select`, unless a `border` property is set.
|
||||
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
label,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
|
||||
height: auto;
|
||||
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
form,
|
||||
input,
|
||||
optgroup,
|
||||
select {
|
||||
margin: 0; // 3
|
||||
|
||||
font: inherit; // 2
|
||||
color: inherit; // 1
|
||||
}
|
||||
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
// and `video` controls.
|
||||
// 2. Correct inability to style clickable `input` types in iOS.
|
||||
// 3. Improve usability and consistency of cursor style between image-type
|
||||
// `input` and others.
|
||||
html input[type="button"], // 1
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer; // 3
|
||||
|
||||
-webkit-appearance: button; // 2
|
||||
}
|
||||
|
||||
// remove 300ms delay
|
||||
a,
|
||||
a div,
|
||||
a span,
|
||||
a ion-icon,
|
||||
a ion-label,
|
||||
button,
|
||||
button div,
|
||||
button span,
|
||||
button ion-icon,
|
||||
button ion-label,
|
||||
[tappable],
|
||||
[tappable] div,
|
||||
[tappable] span,
|
||||
[tappable] ion-icon,
|
||||
[tappable] ion-label,
|
||||
input,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
a ion-label,
|
||||
button ion-label,
|
||||
[tappable] ion-label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
font-family: inherit;
|
||||
font-style: inherit;
|
||||
font-variant: inherit;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Re-set default cursor for disabled elements.
|
||||
a[disabled],
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
padding: 0; // 2
|
||||
|
||||
box-sizing: border-box; // 1
|
||||
}
|
||||
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
// `font-size` values of the `input`, it causes the cursor style of the
|
||||
// decrement button to change from `default` to `text`.
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
// Tables
|
||||
// ==========================================================================//
|
||||
|
||||
// Remove most spacing between table cells.
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
|
||||
// Z-Index
|
||||
// --------------------------------------------------
|
||||
// Grouped by elements which would be siblings
|
||||
|
||||
$z-index-menu-overlay: 80;
|
||||
$z-index-menu-backdrop: 79;
|
||||
$z-index-overlay: 1000;
|
||||
$z-index-click-block: 9999;
|
||||
|
||||
$z-index-fixed-content: 2;
|
||||
$z-index-scroll-content: 1;
|
||||
$z-index-refresher: 0;
|
||||
|
||||
$z-index-page-container: 0;
|
||||
$z-index-toolbar: 10;
|
||||
$z-index-toolbar-background: -1;
|
||||
|
||||
$z-index-backdrop: 2;
|
||||
$z-index-overlay-wrapper: 10;
|
||||
|
||||
$z-index-item-options: 1;
|
||||
Reference in New Issue
Block a user