mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Fixed scroll issue with slidebox
This commit is contained in:
Max Lynch
13
dist/css/ionic-ios7.css
vendored
13
dist/css/ionic-ios7.css
vendored
@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
/**
|
||||
* Adapted from normalize.css and some reset.css. We don't care even one
|
||||
* bit about old IE, so we don't need any hacks for that in here.
|
||||
@ -182,7 +181,7 @@ sub {
|
||||
fieldset {
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
border: 1px solid silver; }
|
||||
border: 1px solid #c0c0c0; }
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
@ -1463,7 +1462,7 @@ select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333333;
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
|
||||
@ -1550,7 +1549,7 @@ input[type="checkbox"][readonly] {
|
||||
right: 20px;
|
||||
transition: 0.2s ease;
|
||||
transition-property: left, right;
|
||||
transition-delay: 0s, 0.05s; }
|
||||
transition-delay: 0s, .05s; }
|
||||
|
||||
.toggle :checked + .track {
|
||||
/* When the toggle is "on" */
|
||||
@ -1565,7 +1564,7 @@ input[type="checkbox"][readonly] {
|
||||
right: 0;
|
||||
left: 20px;
|
||||
-webkit-transform: none;
|
||||
transition-delay: 0.05s, 0s; }
|
||||
transition-delay: .05s, 0s; }
|
||||
|
||||
/* hide a radio button's icon by default */
|
||||
.radio-item [class^="icon-"],
|
||||
@ -1811,7 +1810,7 @@ input[type="checkbox"][readonly] {
|
||||
.button.button-icon:active, .button.button-icon.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px white; }
|
||||
text-shadow: 0px 0px 10px #fff; }
|
||||
.button.button-inline {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@ -1943,7 +1942,7 @@ a.button {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #dddddd; }
|
||||
border: 1px solid #ddd; }
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
|
||||
13
dist/css/ionic-scoped.css
vendored
13
dist/css/ionic-scoped.css
vendored
@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
.ionic {
|
||||
@font-face {
|
||||
font-family: 'ionicons';
|
||||
@ -991,7 +990,7 @@
|
||||
.ionic fieldset {
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
border: 1px solid silver; }
|
||||
border: 1px solid #c0c0c0; }
|
||||
.ionic legend {
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
@ -2078,7 +2077,7 @@
|
||||
.ionic input[type="file"]:focus,
|
||||
.ionic input[type="radio"]:focus,
|
||||
.ionic input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333333;
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
.ionic input:-moz-placeholder,
|
||||
@ -2136,7 +2135,7 @@
|
||||
border: 1px solid #049cdb;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
transition: background-color 0.1s ease-in-out; }
|
||||
transition: background-color .1s ease-in-out; }
|
||||
.ionic .checkbox .handle:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
@ -2148,7 +2147,7 @@
|
||||
border-right: none;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
transition: opacity .1s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.ionic .checkbox input:checked + .handle {
|
||||
@ -2435,7 +2434,7 @@
|
||||
.ionic .button.button-icon:active, .ionic .button.button-icon.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px white; }
|
||||
text-shadow: 0px 0px 10px #fff; }
|
||||
.ionic .button.button-inline {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@ -2547,7 +2546,7 @@
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #dddddd; }
|
||||
border: 1px solid #ddd; }
|
||||
.ionic .card-header {
|
||||
padding: 10px;
|
||||
background-color: white; }
|
||||
|
||||
16
dist/css/ionic.css
vendored
16
dist/css/ionic.css
vendored
@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: 'ionicons';
|
||||
src: url("fonts/ionicons.eot");
|
||||
@ -1246,7 +1245,7 @@ sub {
|
||||
fieldset {
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
border: 1px solid silver; }
|
||||
border: 1px solid #c0c0c0; }
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
@ -2550,7 +2549,7 @@ select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333333;
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
|
||||
@ -2613,7 +2612,7 @@ input[type="checkbox"][readonly] {
|
||||
border: 1px solid #049cdb;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
transition: background-color 0.1s ease-in-out; }
|
||||
transition: background-color .1s ease-in-out; }
|
||||
.checkbox .handle:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
@ -2625,7 +2624,7 @@ input[type="checkbox"][readonly] {
|
||||
border-right: none;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
transition: opacity .1s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.checkbox input:checked + .handle {
|
||||
@ -2929,7 +2928,7 @@ input[type="checkbox"][readonly] {
|
||||
.button.button-icon:active, .button.button-icon.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px white; }
|
||||
text-shadow: 0px 0px 10px #fff; }
|
||||
.button.button-inline {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@ -3061,7 +3060,7 @@ a.button {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #dddddd; }
|
||||
border: 1px solid #ddd; }
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
@ -3088,6 +3087,9 @@ a.button {
|
||||
padding: 10px; }
|
||||
|
||||
.slide-box {
|
||||
overflow: hidden; }
|
||||
|
||||
.slide-box-items {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: -webkit-transform 0 ease-in-out;
|
||||
|
||||
2
dist/js/ionic.js
vendored
2
dist/js/ionic.js
vendored
@ -2302,7 +2302,7 @@ window.ionic = {
|
||||
this._initDrag();
|
||||
|
||||
// Make sure to grab the element we will slide as our target
|
||||
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box');
|
||||
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-items');
|
||||
if(!content) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
this._initDrag();
|
||||
|
||||
// Make sure to grab the element we will slide as our target
|
||||
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box');
|
||||
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-items');
|
||||
if(!content) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
.slide-box {
|
||||
// Make sure items don't scroll over ever
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide-box-items {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: -webkit-transform 0 ease-in-out;
|
||||
|
||||
@ -18,14 +18,16 @@
|
||||
<main class="content-wrapper">
|
||||
<div class="content has-header">
|
||||
<div class="slide-box" id="slide-box">
|
||||
<div class="slide-box-content">
|
||||
<img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
|
||||
</div>
|
||||
<div class="slide-box-content">
|
||||
<img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
|
||||
</div>
|
||||
<div class="slide-box-content">
|
||||
<img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
|
||||
<div class="slide-box-items">
|
||||
<div class="slide-box-content">
|
||||
<img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
|
||||
</div>
|
||||
<div class="slide-box-content">
|
||||
<img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
|
||||
</div>
|
||||
<div class="slide-box-content">
|
||||
<img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user