diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index b75758f7e1..595c52a11d 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -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; diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index bab5c9e234..d1519f0242 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -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; } diff --git a/dist/css/ionic.css b/dist/css/ionic.css index a7501c084c..739bcd6573 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -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; diff --git a/dist/js/ionic.js b/dist/js/ionic.js index ae63c61d5a..1315a6d931 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -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; } diff --git a/js/views/slideBox.js b/js/views/slideBox.js index fad0f2f73b..d6b8186afd 100644 --- a/js/views/slideBox.js +++ b/js/views/slideBox.js @@ -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; } diff --git a/scss/ionic/_slideBox.scss b/scss/ionic/_slideBox.scss index b572317df9..b67ca29a3a 100644 --- a/scss/ionic/_slideBox.scss +++ b/scss/ionic/_slideBox.scss @@ -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; diff --git a/test/slideBox.html b/test/slideBox.html index 23037bed6d..8c09a0a1f3 100644 --- a/test/slideBox.html +++ b/test/slideBox.html @@ -18,14 +18,16 @@
-
- -
-
- -
-
- +
+
+ +
+
+ +
+
+ +