mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Scroll messing around and start of cards
This commit is contained in:
Max Lynch
74
dist/ionic-ios7.css
vendored
74
dist/ionic-ios7.css
vendored
@ -324,8 +324,7 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
|
||||
.view {
|
||||
position: fixed;
|
||||
@ -334,25 +333,22 @@ body {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto; }
|
||||
|
||||
/* Hack to 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); }
|
||||
|
||||
.has-header {
|
||||
top: 44px; }
|
||||
.content-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
|
||||
.has-footer {
|
||||
bottom: 44px; }
|
||||
.has-header {
|
||||
margin-top: 44px; }
|
||||
|
||||
.has-tabs {
|
||||
bottom: 49px; }
|
||||
@ -375,7 +371,7 @@ body {
|
||||
.platform-ios7 .bar > * {
|
||||
margin-top: 20px; }
|
||||
.platform-ios7 .has-header {
|
||||
top: 64px; }
|
||||
margin-top: 64px; }
|
||||
|
||||
.padded {
|
||||
padding: 10px; }
|
||||
@ -1111,7 +1107,7 @@ address {
|
||||
line-height: 1.42857; }
|
||||
|
||||
.bar {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
@ -1134,35 +1130,35 @@ address {
|
||||
.bar.bar-footer {
|
||||
border-top-width: 1px; }
|
||||
.bar.bar-default {
|
||||
background-color: white;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
.bar.bar-secondary {
|
||||
background-color: whitesmoke;
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
border-color: #bbbbbb;
|
||||
color: #333333; }
|
||||
.bar.bar-primary {
|
||||
background-color: #4a87ee;
|
||||
background-color: rgba(74, 135, 238, 0.9);
|
||||
border-color: #3b6dc2;
|
||||
color: white; }
|
||||
.bar.bar-info {
|
||||
background-color: #43cee6;
|
||||
background-color: rgba(67, 206, 230, 0.9);
|
||||
border-color: #3bb3c8;
|
||||
color: white; }
|
||||
.bar.bar-success {
|
||||
background-color: #66cc33;
|
||||
background-color: rgba(102, 204, 51, 0.9);
|
||||
border-color: #5bb22f;
|
||||
color: white; }
|
||||
.bar.bar-warning {
|
||||
background-color: #f0b840;
|
||||
background-color: rgba(240, 184, 64, 0.9);
|
||||
border-color: #d29f31;
|
||||
color: white; }
|
||||
.bar.bar-danger {
|
||||
background-color: #ef4e3a;
|
||||
background-color: rgba(239, 78, 58, 0.9);
|
||||
border-color: #c73927;
|
||||
color: white; }
|
||||
.bar.bar-dark {
|
||||
background-color: #444444;
|
||||
background-color: rgba(68, 68, 68, 0.9);
|
||||
border-color: #111111;
|
||||
color: white; }
|
||||
.bar .title {
|
||||
@ -2233,6 +2229,36 @@ a.button {
|
||||
.alert-info h4 {
|
||||
color: #3a87ad; }
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #dddddd; }
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
background-color: white; }
|
||||
.card-header.card-header-secondary {
|
||||
background-color: whitesmoke; }
|
||||
.card-header.card-header-primary {
|
||||
background-color: #4a87ee; }
|
||||
.card-header.card-header-info {
|
||||
background-color: #43cee6; }
|
||||
.card-header.card-header-success {
|
||||
background-color: #66cc33; }
|
||||
.card-header.card-header-warning {
|
||||
background-color: #f0b840; }
|
||||
.card-header.card-header-danger {
|
||||
background-color: #ef4e3a; }
|
||||
.card-header.card-header-dark {
|
||||
background-color: #444444; }
|
||||
|
||||
.card-body {
|
||||
padding: 10px; }
|
||||
|
||||
.card-footer {
|
||||
padding: 10px; }
|
||||
|
||||
/*
|
||||
.slide-in-up.enter {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
|
||||
74
dist/ionic.css
vendored
74
dist/ionic.css
vendored
@ -389,8 +389,7 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
|
||||
.view {
|
||||
position: fixed;
|
||||
@ -399,25 +398,22 @@ body {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto; }
|
||||
|
||||
/* Hack to 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); }
|
||||
|
||||
.has-header {
|
||||
top: 44px; }
|
||||
.content-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
|
||||
.has-footer {
|
||||
bottom: 44px; }
|
||||
.has-header {
|
||||
margin-top: 44px; }
|
||||
|
||||
.has-tabs {
|
||||
bottom: 49px; }
|
||||
@ -1169,7 +1165,7 @@ address {
|
||||
line-height: 1.42857; }
|
||||
|
||||
.bar {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
@ -1192,35 +1188,35 @@ address {
|
||||
.bar.bar-footer {
|
||||
border-top-width: 1px; }
|
||||
.bar.bar-default {
|
||||
background-color: white;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
.bar.bar-secondary {
|
||||
background-color: whitesmoke;
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
border-color: #bbbbbb;
|
||||
color: #333333; }
|
||||
.bar.bar-primary {
|
||||
background-color: #4a87ee;
|
||||
background-color: rgba(74, 135, 238, 0.9);
|
||||
border-color: #3b6dc2;
|
||||
color: white; }
|
||||
.bar.bar-info {
|
||||
background-color: #43cee6;
|
||||
background-color: rgba(67, 206, 230, 0.9);
|
||||
border-color: #3bb3c8;
|
||||
color: white; }
|
||||
.bar.bar-success {
|
||||
background-color: #66cc33;
|
||||
background-color: rgba(102, 204, 51, 0.9);
|
||||
border-color: #5bb22f;
|
||||
color: white; }
|
||||
.bar.bar-warning {
|
||||
background-color: #f0b840;
|
||||
background-color: rgba(240, 184, 64, 0.9);
|
||||
border-color: #d29f31;
|
||||
color: white; }
|
||||
.bar.bar-danger {
|
||||
background-color: #ef4e3a;
|
||||
background-color: rgba(239, 78, 58, 0.9);
|
||||
border-color: #c73927;
|
||||
color: white; }
|
||||
.bar.bar-dark {
|
||||
background-color: #444444;
|
||||
background-color: rgba(68, 68, 68, 0.9);
|
||||
border-color: #111111;
|
||||
color: white; }
|
||||
.bar .title {
|
||||
@ -2278,6 +2274,36 @@ a.button {
|
||||
.alert-info h4 {
|
||||
color: #3a87ad; }
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #dddddd; }
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
background-color: white; }
|
||||
.card-header.card-header-secondary {
|
||||
background-color: whitesmoke; }
|
||||
.card-header.card-header-primary {
|
||||
background-color: #4a87ee; }
|
||||
.card-header.card-header-info {
|
||||
background-color: #43cee6; }
|
||||
.card-header.card-header-success {
|
||||
background-color: #66cc33; }
|
||||
.card-header.card-header-warning {
|
||||
background-color: #f0b840; }
|
||||
.card-header.card-header-danger {
|
||||
background-color: #ef4e3a; }
|
||||
.card-header.card-header-dark {
|
||||
background-color: #444444; }
|
||||
|
||||
.card-body {
|
||||
padding: 10px; }
|
||||
|
||||
.card-footer {
|
||||
padding: 10px; }
|
||||
|
||||
/*
|
||||
.slide-in-up.enter {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
@ -2308,4 +2334,4 @@ a.button {
|
||||
.platform-ios7 .bar > * {
|
||||
margin-top: 20px; }
|
||||
.platform-ios7 .has-header {
|
||||
top: 64px; }
|
||||
margin-top: 64px; }
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.bar {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
background-color: $brand-default;
|
||||
|
||||
&.card-header-secondary { background-color: $brand-secondary; }
|
||||
&.card-header-primary { background-color: $brand-primary; }
|
||||
&.card-header-info { background-color: $brand-info; }
|
||||
&.card-header-success { background-color: $brand-success; }
|
||||
&.card-header-warning { background-color: $brand-warning; }
|
||||
&.card-header-danger { background-color: $brand-danger; }
|
||||
&.card-header-dark { background-color: $brand-dark; }
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
.has-header {
|
||||
top: 64px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,6 @@ body {
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.view {
|
||||
@ -35,12 +34,6 @@ body {
|
||||
}
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
|
||||
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
|
||||
@ -49,14 +42,25 @@ body {
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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;
|
||||
//top: $bar-height;
|
||||
margin-top: $bar-height;
|
||||
}
|
||||
|
||||
.has-footer {
|
||||
bottom: $bar-height;
|
||||
//bottom: $bar-height;
|
||||
//margin-bottom: $bar-height;
|
||||
}
|
||||
|
||||
// Specify that a content area will have tabs
|
||||
|
||||
@ -260,29 +260,30 @@ $bar-padding-landscape: 5px;
|
||||
|
||||
$bar-bg: #fff;
|
||||
|
||||
$bar-transparency: 0.9;
|
||||
// Bar variations
|
||||
$bar-default-bg: $brand-default;
|
||||
$bar-default-bg: rgba($brand-default, $bar-transparency);
|
||||
$bar-default-border-color: #ddd;
|
||||
|
||||
$bar-secondary-bg: $brand-secondary;
|
||||
$bar-secondary-bg: rgba($brand-secondary, $bar-transparency);
|
||||
$bar-secondary-border-color: $button-secondary-border;
|
||||
|
||||
$bar-primary-bg: $brand-primary;
|
||||
$bar-primary-bg: rgba($brand-primary, $bar-transparency);
|
||||
$bar-primary-border-color: $button-primary-border;
|
||||
|
||||
$bar-info-bg: $brand-info;
|
||||
$bar-info-bg: rgba($brand-info, $bar-transparency);
|
||||
$bar-info-border-color: $button-info-border;
|
||||
|
||||
$bar-success-bg: $brand-success;
|
||||
$bar-success-bg: rgba($brand-success, $bar-transparency);
|
||||
$bar-success-border-color: $button-success-border;
|
||||
|
||||
$bar-warning-bg: $brand-warning;
|
||||
$bar-warning-bg: rgba($brand-warning, $bar-transparency);
|
||||
$bar-warning-border-color: $button-warning-border;
|
||||
|
||||
$bar-danger-bg: $brand-danger;
|
||||
$bar-danger-bg: rgba($brand-danger, $bar-transparency);
|
||||
$bar-danger-border-color: $button-danger-border;
|
||||
|
||||
$bar-dark-bg: $brand-dark;
|
||||
$bar-dark-bg: rgba($brand-dark, $bar-transparency);
|
||||
$bar-dark-border-color: $button-dark-border;
|
||||
|
||||
|
||||
|
||||
@ -15,18 +15,29 @@
|
||||
<h1 class="title">World Clock</h1>
|
||||
<a href="#" class="button button-danger button-clear">Delete</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div style="width: 100%; background-color: #ccc; height: 2000px"></div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content has-header has-footer">
|
||||
<div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padded">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-secondary">
|
||||
Your update
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<i>Just doing my thing</i>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Good bye
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="page2">
|
||||
<div class="bar bar-header bar-success">
|
||||
<a href="#" class="button button-danger button-clear">Edit</a>
|
||||
<h1 class="title">World Clock</h1>
|
||||
<a href="#" class="button button-danger button-clear">Delete</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div style="width: 100%; background-color: #ccc; height: 2000px"></div>
|
||||
<div class="bar bar-footer bar-secondary">
|
||||
<div class="button-bar">
|
||||
<a href="#" class="button button-danger button-clear">Edit</a>
|
||||
<a href="#" class="button button-danger button-clear">Move</a>
|
||||
<a href="#" class="button button-danger button-clear">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
BIN
test/tree_bark.png
Normal file
BIN
test/tree_bark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Reference in New Issue
Block a user