mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
166 lines
3.1 KiB
SCSS
166 lines
3.1 KiB
SCSS
|
|
/**
|
|
* Scaffolding
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
a {
|
|
-webkit-user-drag: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
img {
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
a, button {
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
body, .ionic-body {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: $base-color;
|
|
word-wrap: break-word;
|
|
font-size: $font-size-base;
|
|
font-family: $base-font-family;
|
|
line-height: $line-height-computed;
|
|
text-rendering: optimizeLegibility;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-webkit-text-size-adjust: none;
|
|
text-size-adjust: none;
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-user-drag: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.content:before,
|
|
.content:after {
|
|
display: block;
|
|
overflow: hidden;
|
|
height: 0;
|
|
// Uncollapse content margin if child elements DO have an margin
|
|
content: "\00a0"; /* No-break space character */
|
|
}
|
|
/* Force all relatively and absolutely positioned elements still render while scrolling
|
|
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
|
|
.content > * {
|
|
-webkit-transform: translateZ(0px);
|
|
transform: translateZ(0px);
|
|
}
|
|
|
|
.content {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.scroll-content {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/**
|
|
* Scroll is the scroll view component available for complex and custom
|
|
* scroll view functionality.
|
|
*/
|
|
.scroll {
|
|
position: absolute;
|
|
z-index: 1;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-transform: translateZ(0);
|
|
-moz-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
-o-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-text-size-adjust: none;
|
|
-moz-text-size-adjust: none;
|
|
-ms-text-size-adjust: none;
|
|
-o-text-size-adjust: none;
|
|
text-size-adjust: none;
|
|
}
|
|
|
|
// Scroll refresher (for pull to refresh)
|
|
.scroll-refresher {
|
|
display: none;
|
|
overflow: hidden;
|
|
height: 100px;
|
|
margin-top: -100px;
|
|
}
|
|
.scroll-refresher-content {
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
//@include display-flex();
|
|
//@include align-items(center);
|
|
}
|
|
.scroll-refreshing {
|
|
-webkit-transition: height 0.1s ease-in-out;
|
|
}
|
|
|
|
.overflow-scroll {
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
|
// Note: For these to work, content must come after both bars in the markup
|
|
.has-header {
|
|
top: $bar-height;
|
|
}
|
|
|
|
.has-subheader {
|
|
top: $bar-height * 2;
|
|
}
|
|
|
|
.has-footer {
|
|
bottom: $bar-height;
|
|
}
|
|
|
|
// Specify that a content area will have tabs
|
|
.has-tabs {
|
|
bottom: 84px;
|
|
}
|
|
|
|
// A full screen section with a solid background
|
|
.pane {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
|