From 349461675dfbee1087181dceb141b4a89dd0590f Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 21 Oct 2013 12:12:05 -0500 Subject: [PATCH 1/5] auto right arrow on lists --- dist/css/ionic-ios7.css | 33 ++++++++++++++++++++++---- dist/css/ionic-scoped.css | 31 +++++++++++++++++++++---- dist/css/ionic.css | 33 ++++++++++++++++++++++---- scss/ionic/_listview.scss | 41 +++++++++++++++++++++++++++------ scss/ionic/_variables.scss | 2 ++ test/lists.html | 47 +++++++++++++++++--------------------- 6 files changed, 139 insertions(+), 48 deletions(-) diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index d3dc9f7d9d..dbfd0c240b 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -1119,7 +1119,8 @@ a.list-item { border: 1px solid #dddddd; z-index: 2; margin-top: -1px; - padding: 15px; + padding: 15px 45px 15px 15px; + font-size: 16px; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } .list-item-content i { @@ -1135,14 +1136,36 @@ a.list-item { .list-icon-left .list-item-content i { left: 7.5px; } -.list-icon-right .list-item-content { - padding-right: 45px; } - .list-icon-right .list-item-content i { - right: 7.5px; } +.list-icon-right .list-item-content i { + right: 7.5px; } .list-icon-left.list-icon-right .list-item-content i:last-child { left: auto; } +a .list-item-content:after, +button .list-item-content:after { + position: absolute; + top: 0; + right: 15px; + display: flex; + height: 100%; + color: #ccc; + content: "\e0fc"; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-size: 16px; + font-family: 'ionicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + align-items: center; } + +a.list-icon-right .list-item-content:after, +button.list-icon-right .list-item-content:after { + display: none; } + .list-thumbnail h2 { overflow: hidden; margin: 0 0 8px 0; diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index a2ddf42465..9ed925c27f 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -1818,7 +1818,8 @@ border: 1px solid #dddddd; z-index: 2; margin-top: -1px; - padding: 15px; + padding: 15px 45px 15px 15px; + font-size: 16px; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } .ionic .list-item-content i { position: absolute; @@ -1831,12 +1832,32 @@ padding-left: 45px; } .ionic .list-icon-left .list-item-content i { left: 7.5px; } - .ionic .list-icon-right .list-item-content { - padding-right: 45px; } - .ionic .list-icon-right .list-item-content i { - right: 7.5px; } + .ionic .list-icon-right .list-item-content i { + right: 7.5px; } .ionic .list-icon-left.list-icon-right .list-item-content i:last-child { left: auto; } + .ionic a .list-item-content:after, + .ionic button .list-item-content:after { + position: absolute; + top: 0; + right: 15px; + display: flex; + height: 100%; + color: #ccc; + content: "\e0fc"; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-size: 16px; + font-family: 'ionicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + align-items: center; } + .ionic a.list-icon-right .list-item-content:after, + .ionic button.list-icon-right .list-item-content:after { + display: none; } .ionic .list-thumbnail h2 { overflow: hidden; margin: 0 0 8px 0; diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 07387c84b5..72c10dc2de 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2228,7 +2228,8 @@ a.list-item { border: 1px solid #dddddd; z-index: 2; margin-top: -1px; - padding: 15px; + padding: 15px 45px 15px 15px; + font-size: 16px; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } .list-item-content i { @@ -2244,14 +2245,36 @@ a.list-item { .list-icon-left .list-item-content i { left: 7.5px; } -.list-icon-right .list-item-content { - padding-right: 45px; } - .list-icon-right .list-item-content i { - right: 7.5px; } +.list-icon-right .list-item-content i { + right: 7.5px; } .list-icon-left.list-icon-right .list-item-content i:last-child { left: auto; } +a .list-item-content:after, +button .list-item-content:after { + position: absolute; + top: 0; + right: 15px; + display: flex; + height: 100%; + color: #ccc; + content: "\e0fc"; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-size: 16px; + font-family: 'ionicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + align-items: center; } + +a.list-icon-right .list-item-content:after, +button.list-icon-right .list-item-content:after { + display: none; } + .list-thumbnail h2 { overflow: hidden; margin: 0 0 8px 0; diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss index 7762b077c1..fb0495db83 100644 --- a/scss/ionic/_listview.scss +++ b/scss/ionic/_listview.scss @@ -110,7 +110,8 @@ a.list-item { z-index: 2; margin-top: $list-item-border-width * -1; - padding: $list-item-padding; + padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding; + font-size: $list-font-size; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } @@ -132,18 +133,44 @@ a.list-item { } } -.list-icon-right .list-item-content { - padding-right: ($list-item-padding * 3); - - i { - right: $list-item-padding / 2; - } +.list-icon-right .list-item-content i { + right: $list-item-padding / 2; } .list-icon-left.list-icon-right .list-item-content i:last-child { left: auto; } +a .list-item-content:after, +button .list-item-content:after { + position: absolute; + top: 0; + right: $list-item-padding; + display: flex; + height: 100%; + color: #ccc; + content: "\e0fc"; // icon-chevron-right + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-size: 16px; + font-family: 'ionicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + align-items: center; +} + +// do not show the default right arrow when they want their own right side icon +a.list-icon-right, +button.list-icon-right { + .list-item-content:after { + display: none; + } +} + + .list-thumbnail h2 { overflow: hidden; margin: 0 0 8px 0; diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index 533998369c..cb84ebf2de 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -337,6 +337,8 @@ $tabs-dark-border-color: $button-dark-border; // Lists // ------------------------------- +$list-font-size: 16px; + $list-header-bg: transparent; $list-header-color: #222; $list-header-padding: 5px 15px; diff --git a/test/lists.html b/test/lists.html index a8cd4fcd3b..ee0606a3a5 100644 --- a/test/lists.html +++ b/test/lists.html @@ -22,15 +22,22 @@ List Header - +
- Madison, WI + Not a link so no default right arrow
- +
- Driving Directions + Auto Right side arrow cuz its a link +
+ + + +
+ Custom Right Icon +
@@ -74,28 +81,25 @@
- +
Madison, WI -
- +
Driving Directions -
- +
Computers 3 -
@@ -162,19 +166,17 @@
- +
Madison, WI -
- +
Driving Directions -
@@ -202,52 +204,45 @@
-
-
- +

Pretty Hate Machine

Nine Inch Nails

-
- +

Siamese Dream

Smashing Pumpkins

-
- +

Nevermind

Nirvana

-
- +

License To Ill

Bestie Boys

-
- +

Dookie

Green Day

-
From 097063f4c6783028a5c04536abcabc86263e01a0 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 21 Oct 2013 13:27:11 -0500 Subject: [PATCH 2/5] border btn icon/list thumbnail --- dist/css/ionic-ios7.css | 100 +++++++- dist/css/ionic-scoped.css | 91 ++++++- dist/css/ionic.css | 138 +++++++++- dist/js/ionic-angular.js | 502 ++++++++++++++++++++++++++++++------- dist/js/ionic.js | 181 ++++++++++++- scss/ionic/_bar.scss | 10 +- scss/ionic/_listview.scss | 2 +- scss/ionic/_mixins.scss | 11 - scss/ionic/_variables.scss | 2 +- test/headers.html | 10 +- test/lists.html | 10 +- 11 files changed, 899 insertions(+), 158 deletions(-) diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index dbfd0c240b..4027e743f2 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -772,10 +772,13 @@ address { box-shadow: none; font-size: 17px; } +.bar [class^="icon-"], +.bar [class*=" icon-"] { + font-size: 24px; } + .bar .button-icon { border: 1px solid transparent; - background-color: transparent; - font-size: 24px; } + background-color: transparent; } .bar-header { top: 0; } @@ -805,6 +808,7 @@ address { bottom: 0; width: 100%; height: 49px; + z-index: 5; box-orient: horizontal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; @@ -848,6 +852,9 @@ address { border-color: #c73927; color: white; } +.tabs-top { + top: 44px; } + .tab-item { display: block; width: 0; @@ -1182,7 +1189,7 @@ button.list-icon-right .list-item-content:after { .list-thumbnail .list-item-content { padding-left: 95px; min-height: 80px; } - .list-thumbnail .list-item-content img { + .list-thumbnail .list-item-content .thumbnail { position: absolute; top: 0; left: 0; @@ -2010,15 +2017,86 @@ a.button { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -@keyframes fadein { +.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter { + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(100%, 0, 0); + box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } +.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); } +.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave { + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(0%, 0, 0); } +.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active { + -webkit-transform: translate3d(-10%, 0, 0); + opacity: 0.8; } + +.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter { + z-index: 1; + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(-100%, 0, 0); + box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } +.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); } +.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave { + z-index: 0; + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(0%, 0, 0); } +.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active { + -webkit-transform: translate3d(10%, 0, 0); + opacity: 0.8; } + +/** + * An animation that fades out one content area and fades in another + */ +.fade-in-out.ng-enter, .fade-in-out > .ng-enter { + opacity: 0; + -webkit-transition: opacity 0.3s ease-in-out; } +.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active { + opacity: 1; } +.fade-in-out.ng-leave, .fade-in-out > .ng-leave { + opacity: 1; + -webkit-transition: opacity 0.3s ease-in-out; } +.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active { + opacity: 0; } + +.slide-left-fade-add { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } + +.slide-left-fade-add-active { + -webkit-transform: translate3d(-120px, 0, 0); + opacity: 0; } + +.slide-left-fade-remove { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; + -webkit-transform: translate3d(120px, 0, 0); + opacity: 0; } + +.slide-left-fade-remove-active { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } + +@-webkit-keyframes fadeOut { from { - opacity: 0.7; } + opacity: 1; } + + to { + opacity: 0; } } + +@keyframes fadeOut { + from { + opacity: 1; } + + to { + opacity: 0; } } + +@-webkit-keyframes fadeIn { + from { + opacity: 0; } to { opacity: 1; } } -@-webkit-keyframes fadein { - /* Safari and Chrome */ +@keyframes fadeIn { from { opacity: 0; } @@ -2026,9 +2104,11 @@ a.button { opacity: 1; } } .fade-in { - opacity: 0; - animation: fadein 0.5s; - -webkit-animation: fadein 0.5s; } + -webkit-animation: fadeOut 0.3s; + animation: fadeOut 0.3s; } + .fade-in.active { + -webkit-animation: fadeIn 0.3s; + animation: fadeIn 0.3s; } .fill-icon { color: white !important; } diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 9ed925c27f..261842f15e 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -190,15 +190,31 @@ /* the handle when the toggle is "on" */ /* make sure list item content have enough padding on right to fit the toggle */ /* position the toggle to the right within a list item */ - @keyframes fadein { + /** + * An animation that fades out one content area and fades in another + */ + @-webkit-keyframes fadeOut { from { - opacity: 0.7; } + opacity: 1; } + + to { + opacity: 0; } } + + @keyframes fadeOut { + from { + opacity: 1; } + + to { + opacity: 0; } } + + @-webkit-keyframes fadeIn { + from { + opacity: 0; } to { opacity: 1; } } - @-webkit-keyframes fadein { - /* Safari and Chrome */ + @keyframes fadeIn { from { opacity: 0; } @@ -1515,10 +1531,12 @@ background: none; box-shadow: none; font-size: 17px; } + .ionic .bar [class^="icon-"], + .ionic .bar [class*=" icon-"] { + font-size: 24px; } .ionic .bar .button-icon { border: 1px solid transparent; - background-color: transparent; - font-size: 24px; } + background-color: transparent; } .ionic .bar-header { top: 0; } .ionic .bar-footer { @@ -1537,6 +1555,7 @@ bottom: 0; width: 100%; height: 49px; + z-index: 5; box-orient: horizontal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; @@ -1579,6 +1598,8 @@ background-color: #ef4e3a; border-color: #c73927; color: white; } + .ionic .tabs-top { + top: 44px; } .ionic .tab-item { display: block; width: 0; @@ -1872,7 +1893,7 @@ .ionic .list-thumbnail .list-item-content { padding-left: 95px; min-height: 80px; } - .ionic .list-thumbnail .list-item-content img { + .ionic .list-thumbnail .list-item-content .thumbnail { position: absolute; top: 0; left: 0; @@ -2664,10 +2685,60 @@ opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - .ionic .fade-in { + .ionic .slide-in-slide-out.ng-enter, .ionic .slide-in-slide-out > .ng-enter { + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(100%, 0, 0); + box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } + .ionic .slide-in-slide-out.ng-enter-active, .ionic .slide-in-slide-out > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); } + .ionic .slide-in-slide-out.ng-leave, .ionic .slide-in-slide-out > .ng-leave { + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(0%, 0, 0); } + .ionic .slide-in-slide-out.ng-leave-active, .ionic .slide-in-slide-out > .ng-leave-active { + -webkit-transform: translate3d(-10%, 0, 0); + opacity: 0.8; } + .ionic .slide-in-slide-out-reverse.ng-enter, .ionic .slide-in-slide-out-reverse > .ng-enter { + z-index: 1; + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(-100%, 0, 0); + box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } + .ionic .slide-in-slide-out-reverse.ng-enter-active, .ionic .slide-in-slide-out-reverse > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); } + .ionic .slide-in-slide-out-reverse.ng-leave, .ionic .slide-in-slide-out-reverse > .ng-leave { + z-index: 0; + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(0%, 0, 0); } + .ionic .slide-in-slide-out-reverse.ng-leave-active, .ionic .slide-in-slide-out-reverse > .ng-leave-active { + -webkit-transform: translate3d(10%, 0, 0); + opacity: 0.8; } + .ionic .fade-in-out.ng-enter, .ionic .fade-in-out > .ng-enter { opacity: 0; - animation: fadein 0.5s; - -webkit-animation: fadein 0.5s; } + -webkit-transition: opacity 0.3s ease-in-out; } + .ionic .fade-in-out.ng-enter-active, .ionic .fade-in-out > .ng-enter-active { + opacity: 1; } + .ionic .fade-in-out.ng-leave, .ionic .fade-in-out > .ng-leave { + opacity: 1; + -webkit-transition: opacity 0.3s ease-in-out; } + .ionic .fade-in-out.ng-leave-active, .ionic .fade-in-out > .ng-leave-active { + opacity: 0; } + .ionic .slide-left-fade-add { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } + .ionic .slide-left-fade-add-active { + -webkit-transform: translate3d(-120px, 0, 0); + opacity: 0; } + .ionic .slide-left-fade-remove { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; + -webkit-transform: translate3d(120px, 0, 0); + opacity: 0; } + .ionic .slide-left-fade-remove-active { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } + .ionic .fade-in { + -webkit-animation: fadeOut 0.3s; + animation: fadeOut 0.3s; } + .ionic .fade-in.active { + -webkit-animation: fadeIn 0.3s; + animation: fadeIn 0.3s; } .ionic .fill-icon { color: white !important; } .ionic .fill-icon:before { diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 72c10dc2de..b14f1fe68c 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1881,10 +1881,13 @@ address { box-shadow: none; font-size: 17px; } +.bar [class^="icon-"], +.bar [class*=" icon-"] { + font-size: 24px; } + .bar .button-icon { border: 1px solid transparent; - background-color: transparent; - font-size: 24px; } + background-color: transparent; } .bar-header { top: 0; } @@ -1914,6 +1917,7 @@ address { bottom: 0; width: 100%; height: 49px; + z-index: 5; box-orient: horizontal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; @@ -1957,6 +1961,9 @@ address { border-color: #c73927; color: white; } +.tabs-top { + top: 44px; } + .tab-item { display: block; width: 0; @@ -2046,6 +2053,38 @@ address { .modal.active { height: 100%; } +.popup { + position: fixed; } + +.popup-content { + padding: 10px; } + +.loading-backdrop { + position: fixed; + visibility: hidden; + -webkit-transition: visibility 0s linear 0.3s; + top: 0; + left: 0; + width: 100%; + height: 100%; } + .loading-backdrop.enabled { + background-color: rgba(0, 0, 0, 0.7); } + .loading-backdrop.active { + visibility: visible; + -webkit-transition-delay: 0s; } + +.loading { + position: fixed; + left: 50%; + top: 50%; + border-radius: 5px; + padding: 20px; + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + font-size: 20px; } + .loading h1, .loading h2, .loading h3, .loading h4, .loading h5 { + color: #fff; } + .list { margin-bottom: 20px; padding-left: 0; @@ -2291,7 +2330,7 @@ button.list-icon-right .list-item-content:after { .list-thumbnail .list-item-content { padding-left: 95px; min-height: 80px; } - .list-thumbnail .list-item-content img { + .list-thumbnail .list-item-content .thumbnail { position: absolute; top: 0; left: 0; @@ -3216,6 +3255,12 @@ a.button { -webkit-transition: opacity 0.4s ease-in; opacity: 1; } +.nav-content { + position: absolute; + width: 100%; + height: 100%; + background-color: white; } + .slide-in-up { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); @@ -3231,15 +3276,86 @@ a.button { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -@keyframes fadein { +.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter { + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(100%, 0, 0); + box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } +.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); } +.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave { + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(0%, 0, 0); } +.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active { + -webkit-transform: translate3d(-10%, 0, 0); + opacity: 0.8; } + +.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter { + z-index: 1; + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(-100%, 0, 0); + box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } +.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); } +.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave { + z-index: 0; + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(0%, 0, 0); } +.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active { + -webkit-transform: translate3d(10%, 0, 0); + opacity: 0.8; } + +/** + * An animation that fades out one content area and fades in another + */ +.fade-in-out.ng-enter, .fade-in-out > .ng-enter { + opacity: 0; + -webkit-transition: opacity 0.3s ease-in-out; } +.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active { + opacity: 1; } +.fade-in-out.ng-leave, .fade-in-out > .ng-leave { + opacity: 1; + -webkit-transition: opacity 0.3s ease-in-out; } +.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active { + opacity: 0; } + +.slide-left-fade-add { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } + +.slide-left-fade-add-active { + -webkit-transform: translate3d(-120px, 0, 0); + opacity: 0; } + +.slide-left-fade-remove { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; + -webkit-transform: translate3d(120px, 0, 0); + opacity: 0; } + +.slide-left-fade-remove-active { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } + +@-webkit-keyframes fadeOut { from { - opacity: 0.7; } + opacity: 1; } + + to { + opacity: 0; } } + +@keyframes fadeOut { + from { + opacity: 1; } + + to { + opacity: 0; } } + +@-webkit-keyframes fadeIn { + from { + opacity: 0; } to { opacity: 1; } } -@-webkit-keyframes fadein { - /* Safari and Chrome */ +@keyframes fadeIn { from { opacity: 0; } @@ -3247,9 +3363,11 @@ a.button { opacity: 1; } } .fade-in { - opacity: 0; - animation: fadein 0.5s; - -webkit-animation: fadein 0.5s; } + -webkit-animation: fadeOut 0.3s; + animation: fadeOut 0.3s; } + .fade-in.active { + -webkit-animation: fadeIn 0.3s; + animation: fadeIn 0.3s; } .fill-icon { color: white !important; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index ce7930f7dd..f2eb0ee6eb 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -12,7 +12,7 @@ angular.module('ionic.ui', ['ionic.ui.content', ]); ; -angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSheet']) +angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet']) .factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) { return { @@ -70,7 +70,6 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh }; }]); ; -; angular.module('ionic.service.gesture', []) .factory('Gesture', [function() { @@ -81,7 +80,56 @@ angular.module('ionic.service.gesture', []) }; }]); ; -angular.module('ionic.service.modal', ['ionic.service']) +angular.module('ionic.service.loading', ['ionic.ui.loading']) + +.factory('Loading', ['$rootScope', '$document', '$compile', function($rootScope, $document, $compile) { + return { + /** + * Load an action sheet with the given template string. + * + * A new isolated scope will be created for the + * action sheet and the new element will be appended into the body. + * + * @param {object} opts the options for this ActionSheet (see docs) + */ + show: function(opts) { + var defaults = { + content: '', + animation: 'fade-in', + showBackdrop: true + }; + + opts = angular.extend(defaults, opts); + + var scope = $rootScope.$new(true); + angular.extend(scope, opts); + + // Make sure there is only one loading element on the page at one point in time + var existing = angular.element($document[0].querySelector('.loading-backdrop')); + if(existing.length) { + var scope = existing.scope(); + if(scope.loading) { + scope.loading.show(); + return scope.loading; + } + } + + // Compile the template + var element = $compile('' + opts.content + '')(scope); + + $document[0].body.appendChild(element[0]); + + var loading = new ionic.views.Loading({el: element[0] }); + loading.show(); + + scope.loading = loading; + + return loading; + } + }; +}]); +; +angular.module('ionic.service.modal', ['ionic.service.templateLoad']) .factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) { @@ -122,7 +170,65 @@ angular.module('ionic.service.modal', ['ionic.service']) }; }]); ; -angular.module('ionic.service', []) +angular.module('ionic.service.popup', ['ionic.service.templateLoad']) + + +.factory('Popup', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) { + + var getPopup = function() { + // Make sure there is only one loading element on the page at one point in time + var existing = angular.element($document[0].querySelector('.popup')); + if(existing.length) { + var scope = existing.scope(); + if(scope.popup) { + return scope; + } + } + }; + + return { + alert: function(message) { + + // If there is an existing popup, just show that one + var existing = getPopup(); + if(existing) { + return existing.popup.alert(message); + } + + var defaults = { + title: message, + animation: 'fade-in', + }; + + opts = angular.extend(defaults, opts); + + var scope = $rootScope.$new(true); + angular.extend(scope, opts); + + // Compile the template + var element = $compile('' + opts.content + '')(scope); + $document[0].body.appendChild(element[0]); + + var popup = new ionic.views.Popup({el: element[0] }); + popup.alert(message); + + scope.popup = popup; + + return popup; + }, + confirm: function(cb) { + }, + prompt: function(cb) { + }, + show: function(data) { + // data.title + // data.template + // data.buttons + } + }; +}]); +; +angular.module('ionic.service.templateLoad', []) .factory('TemplateLoader', ['$q', '$http', '$templateCache', function($q, $http, $templateCache) { return { @@ -343,26 +449,38 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate']) (function() { 'use strict'; -angular.module('ionic.ui.nav', ['ionic.service']) +angular.module('ionic.ui.loading', []) -.controller('NavCtrl', ['$scope', '$element', '$compile', 'TemplateLoader', function($scope, $element, $compile, TemplateLoader) { +.directive('loading', function() { + return { + restrict: 'E', + replace: true, + transclude: true, + link: function($scope, $element){ + $scope.$on('$destroy', function() { + $element.remove(); + }); + $element.addClass($scope.animation || ''); + }, + template: '
' + + '
' + + '
' + + '
' + }; +}); + +})(); +; +(function() { +'use strict'; + +angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ngAnimate']) + +.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', function($scope, $element, $animate, $compile, TemplateLoader) { var _this = this; angular.extend(this, ionic.controllers.NavController.prototype); - this.pushFromTemplate = function(tmpl) { - data = TemplateLoader.load(tmpl).then(function(data) { - console.log('Nav loaded template', data); - - var childScope = $scope.$new(); - childScope.isVisible = true; - - $compile(data)(childScope, function(cloned, scope) { - $element.append(cloned); - }); - }); - }; - ionic.controllers.NavController.call(this, { content: { }, @@ -383,14 +501,39 @@ angular.module('ionic.ui.nav', ['ionic.service']) } }); - $scope.pushController = function(scope) { + this.handleDrag = function(e) { + }; + + this.endDrag = function(e) { + }; + + this.pushFromTemplate = function(templateUrl) { + var childScope = $scope.$new(); + childScope.isVisible = true; + + TemplateLoader.load(templateUrl).then(function(templateString) { + var el = $compile(templateString)(childScope, function(cloned, scope) { + angular.element($element[0].children[1].firstElementChild).append(cloned); + }); + }); + }; + + $scope.pushController = function(scope, element) { _this.push(scope); + + /* + var old = angular.element($element[0].children[1]); + $animate.enter(element, $element, $element[0].firstElementChild, function() { + }); + $animate.leave(old, function() { + }); + */ }; $scope.navController = this; }]) -.directive('navCtrl', function() { +.directive('navs', function() { return { restrict: 'E', replace: true, @@ -404,7 +547,7 @@ angular.module('ionic.ui.nav', ['ionic.service']) .directive('navBar', function() { return { restrict: 'E', - require: '^navCtrl', + require: '^navs', replace: true, scope: true, template: '
' + @@ -413,6 +556,8 @@ angular.module('ionic.ui.nav', ['ionic.service']) '
', link: function(scope, element, attrs, navCtrl) { scope.navController = navCtrl; + scope.$watch('navController.controllers.length', function(value) { + }); scope.goBack = function() { navCtrl.pop(); }; @@ -420,37 +565,66 @@ angular.module('ionic.ui.nav', ['ionic.service']) }; }) -.directive('navContent', function() { +.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) { return { restrict: 'ECA', - require: '^navCtrl', + require: '^navs', scope: true, - link: function(scope, element, attrs, navCtrl) { - scope.title = attrs.title; + transclude: 'element', + compile: function(element, attr, transclude) { + return function($scope, $element, $attr, navCtrl) { + var lastParent, lastIndex, childScope, childElement; - if(attrs.navBar === "false") { - navCtrl.hideNavBar(); - } else { - navCtrl.showNavBar(); - } + $scope.title = $attr.title; - scope.isVisible = true; - scope.pushController(scope); - - scope.$watch('isVisible', function(value) { - console.log('Visiblity changed', value); - if(value) { - element[0].classList.remove('hidden'); + if($attr.navBar === "false") { + navCtrl.hideNavBar(); } else { - element[0].classList.add('hidden'); + navCtrl.showNavBar(); } - }); + + $scope.pushController($scope, $element); + + + $scope.$watch('isVisible', function(value) { + if(childElement) { + $animate.leave(childElement); + childElement = undefined; + } + if(childScope) { + childScope.$destroy(); + childScope = undefined; + } + if(value) { + childScope = $scope.$new(); + transclude(childScope, function(clone) { + childElement = clone; + Gesture.on('drag', function(e) { + //navCtrl.handleDrag(e); + console.log('Content drag', e); + }, childElement[0]); + + Gesture.on('release', function(e) { + //navCtrl._endDrag(e); + }, childElement[0]); + + var title = $element.parent().parent().parent()[0].querySelector('.title'); + $animate.enter(clone, $element.parent(), $element); + $animate.addClass(angular.element(title), 'slide-left-fade', function() { + $animate.removeClass(angular.element(title), 'slide-left-fade', function() { + }); + }); + }); + } + }); + } } }; -}); +}]); })(); ; +; (function() { 'use strict'; @@ -572,9 +746,89 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture']) }); })(); ; -angular.module('ionic.ui.tabs', []) +(function() { +'use strict'; -.controller('TabsCtrl', function($scope) { +/** + * @description + * The sideMenuCtrl lets you quickly have a draggable side + * left and/or right menu, which a center content area. + */ + +angular.module('ionic.ui.slideBox', []) + +/** + * The internal controller for the side menu controller. This + * extends our core Ionic side menu controller and exposes + * some side menu stuff on the current scope. + */ +.controller('SlideBoxCtrl', ['$scope', '$element', function($scope, $element) { + $scope.slides = []; + this.slideAdded = function() { + $scope.slides.push({}); + }; +}]) + +.directive('slideBox', ['$compile', function($compile) { + return { + restrict: 'E', + replace: true, + transclude: true, + controller: 'SlideBoxCtrl', + scope: {}, + template: '
\ +
\ +
\ +
', + + postLink: function() { + console.log('POST LINK'); + }, + link: function($scope, $element, $attr, slideBoxCtrl) { + // If the pager should show, append it to the slide box + if($attr.showPager !== "false") { + var childScope = $scope.$new(); + var pager = $compile('')(childScope); + $element.append(pager); + + $scope.slideBox = new ionic.views.SlideBox({ + el: $element[0] + }); + } + } + } +}]) + +.directive('slide', function() { + return { + restrict: 'E', + replace: true, + require: '^slideBox', + transclude: true, + template: '
', + compile: function(element, attr, transclude) { + return function($scope, $element, $attr, slideBoxCtrl) { + slideBoxCtrl.slideAdded(); + } + } + } +}) + +.directive('pager', function() { + return { + restrict: 'E', + replace: true, + require: '^slideBox', + template: '
' + } + +}); + +})(); +; +angular.module('ionic.ui.tabs', ['ngAnimate']) + +.controller('TabsCtrl', ['$scope', '$element', '$animate', function($scope, $element, $animate) { var _this = this; angular.extend(this, ionic.controllers.TabBarController.prototype); @@ -582,83 +836,119 @@ angular.module('ionic.ui.tabs', []) ionic.controllers.TabBarController.call(this, { tabBar: { tryTabSelect: function() {}, - setSelectedItem: function(index) { - console.log('TAB BAR SET SELECTED INDEX', index); - }, - addItem: function(item) { - console.log('TAB BAR ADD ITEM', item); - } + setSelectedItem: function(index) {}, + addItem: function(item) {} } }); + this.add = function(controller) { + this.addController(controller); + this.select(0); + }; + + this.select = function(controllerIndex) { + var oldIndex = _this.getSelectedIndex(); + + $scope.activeAnimation = $scope.animation; + /* + if(controllerIndex > oldIndex) { + } else if(controllerIndex < oldIndex) { + $scope.activeAnimation = $scope.animation + '-reverse'; + } + */ + _this.selectController(controllerIndex); + }; + $scope.controllers = this.controllers; +}]) - $scope.$watch('controllers', function(newV, oldV) { - console.log("CControlelrs changed", newV, oldV); - //$scope.$apply(); - }); -}) - -.directive('tabController', function() { +.directive('tabs', function() { return { restrict: 'E', replace: true, - scope: {}, + scope: { + animation: '@' + }, transclude: true, controller: 'TabsCtrl', //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html', - template: '
', + template: '
', compile: function(element, attr, transclude, tabsCtrl) { return function($scope, $element, $attr) { + $scope.$watch('activeAnimation', function(value) { + //$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse'); + $element.addClass($scope.activeAnimation); + }); + transclude($scope, function(cloned) { + $element.prepend(cloned); + }); }; } }; }) // Generic controller directive -.directive('tabContent', function() { - return { - restrict: 'CA', - replace: true, - require: '^tabController', - scope: true, - link: function(scope, element, attrs, tabsCtrl) { - scope.$watch('isVisible', function(value) { - if(!value) { - element[0].style.display = 'none'; - } else { - element[0].style.display = 'block'; - } - }); - - scope.title = attrs.title; - scope.icon = attrs.icon; - scope.iconOn = attrs.iconOn; - scope.iconOff = attrs.iconOff; - tabsCtrl.addController(scope); - } - }; -}) - - -.directive('tabBar', function() { +.directive('tab', ['$animate', function($animate) { return { restrict: 'E', - require: '^tabController', + replace: true, + require: '^tabs', + scope: true, + transclude: 'element', + compile: function(element, attr, transclude) { + return function($scope, $element, $attr, tabsCtrl) { + var childScope, childElement; + + + $scope.$watch('isVisible', function(value) { + if(childElement) { + $animate.leave(childElement); + childElement = undefined; + } + if(childScope) { + childScope.$destroy(); + childScope = undefined; + } + if(value) { + childScope = $scope.$new(); + transclude(childScope, function(clone) { + childElement = clone; + childElement.addClass('view-full'); + $animate.enter(clone, $element.parent(), $element); + }); + } + }); + + $scope.title = $attr.title; + $scope.icon = $attr.icon; + $scope.iconOn = $attr.iconOn; + $scope.iconOff = $attr.iconOff; + tabsCtrl.add($scope); + + } + } + }; +}]) + + +.directive('tabControllerBar', function() { + return { + restrict: 'E', + require: '^tabs', transclude: true, replace: true, scope: true, template: '
' + - '' + + '' + '
' }; }) -.directive('tabItem', function() { +.directive('tabControllerItem', function() { return { restrict: 'E', replace: true, - require: '^tabController', + require: '^tabs', scope: { title: '@', iconOn: '@', @@ -668,9 +958,8 @@ angular.module('ionic.ui.tabs', []) index: '=' }, link: function(scope, element, attrs, tabsCtrl) { - console.log('Linked item', scope); scope.selectTab = function(index) { - tabsCtrl.selectController(scope.index); + tabsCtrl.select(scope.index); }; }, template: @@ -680,6 +969,39 @@ angular.module('ionic.ui.tabs', []) ' {{title}}' + '' }; +}) + +.directive('tabBar', function() { + return { + restrict: 'E', + replace: true, + transclude: true, + template: '
' + + '
' + } +}) + +.directive('tabItem', function() { + return { + restrict: 'E', + replace: true, + scope: { + title: '@', + iconOn: '@', + iconOff: '@', + active: '=', + tabSelected: '@', + index: '=' + }, + link: function(scope, element, attrs) { + }, + template: + '' + + '' + + '' + + ' {{title}}' + + '' + }; }); ; angular.module('ionic.ui.toggle', []) diff --git a/dist/js/ionic.js b/dist/js/ionic.js index baca49d451..8165a7e15a 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -1842,6 +1842,8 @@ window.ionic = { ; (function(ionic) { 'use strict'; + + var DragOp = function() {}; DragOp.prototype = { start: function(e) { @@ -1852,11 +1854,25 @@ window.ionic = { } }; + + /** + * The Pull To Refresh drag operation handles the well-known + * "pull to refresh" concept seen on various apps. This lets + * the user indicate they want to refresh a given list by dragging + * down. + * + * @param {object} opts the options for the pull to refresh drag. + */ var PullToRefreshDrag = function(opts) { this.dragThresholdY = opts.dragThresholdY || 10; + this.onRefreshOpening = opts.onRefreshOpening || function() {}; + this.onRefresh = opts.onRefresh || function() {}; + this.onRefreshHolding = opts.onRefreshHolding || function() {}; this.el = opts.el; }; + PullToRefreshDrag.prototype = new DragOp(); + PullToRefreshDrag.prototype.start = function(e) { var content, refresher; @@ -1869,17 +1885,23 @@ window.ionic = { refresher = this._injectRefresher(); } + // Disable animations while dragging + refresher.classList.remove('list-refreshing'); + this._currentDrag = { refresher: refresher, - content: content + content: content, + isHolding: false }; }; + PullToRefreshDrag.prototype._injectRefresher = function() { var refresher = document.createElement('div'); refresher.className = 'list-refresher'; this.el.insertBefore(refresher, this.el.firstChild); return refresher; }; + PullToRefreshDrag.prototype.drag = function(e) { var _this = this; @@ -1896,21 +1918,59 @@ window.ionic = { } if(_this._isDragging) { - var currentHeight = parseFloat(_this._currentDrag.refresher.style.height); - _this._currentDrag.refresher.style.height = e.gesture.deltaY + 'px'; + var refresher = _this._currentDrag.refresher; - var newHeight = parseFloat(_this._currentDrag.refresher.style.height = e.gesture.deltaY); - var firstChildHeight = parseFloat(_this._currentDrag.refresher.firstElementChild.style.height); - console.log('New Height must pass', firstChildHeight); - if(newHeight > firstChildHeight) { - console.log('PASSED', firstChildHeight); + var currentHeight = parseFloat(refresher.style.height); + refresher.style.height = e.gesture.deltaY + 'px'; + + var newHeight = parseFloat(refresher.style.height); + var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight); + + if(newHeight > firstChildHeight && !_this._currentDrag.isHolding) { + // The user is holding the refresh but hasn't let go of it + _this._currentDrag.isHolding = true; + _this.onRefreshHolding && _this.onRefreshHolding(); + } else { + // Indicate what ratio of opening the list refresh drag is + var ratio = Math.min(1, newHeight / firstChildHeight); + _this.onRefreshOpening && _this.onRefreshOpening(ratio); } } }); }; - PullToRefreshDrag.prototype.end = function(e) { + + PullToRefreshDrag.prototype.end = function(e, doneCallback) { + var _this = this; + + // There is no drag, just end immediately + if(!this._currentDrag) { + return; + } + + var refresher = this._currentDrag.refresher; + + var currentHeight = parseFloat(refresher.style.height); + refresher.style.height = e.gesture.deltaY + 'px'; + + var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight); + + if(currentHeight > firstChildHeight) { + //this.refreshing(); + refresher.classList.add('list-refreshing'); + refresher.style.height = firstChildHeight + 'px'; + this.onRefresh && _this.onRefresh(); + } else { + // Enable animations + refresher.classList.add('list-refreshing'); + refresher.style.height = '0px'; + this.onRefresh && _this.onRefresh(); + } + + this._currentDrag = null; + doneCallback && doneCallback(); }; + var SlideDrag = function(opts) { this.dragThresholdX = opts.dragThresholdX || 10; this.el = opts.el; @@ -2150,6 +2210,10 @@ window.ionic = { // The amount of dragging required to start sliding the element over (in pixels) this.dragThresholdX = opts.dragThresholdX || 10; + + this.onRefresh = opts.onRefresh || function() {}; + this.onRefreshOpening = opts.onRefreshOpening || function() {}; + this.onRefreshHolding = opts.onRefreshHolding || function() {}; // Start the drag states this._initDrag(); @@ -2164,6 +2228,14 @@ window.ionic = { }; ionic.views.List.prototype = { + /** + * Called to tell the list to stop refreshing. This is useful + * if you are refreshing the list and are done with refreshing. + */ + stopRefreshing: function() { + var refresher = this.el.querySelector('.list-refresher'); + refresher.style.height = '0px'; + }, _initDrag: function() { this._isDragging = false; @@ -2183,6 +2255,8 @@ window.ionic = { _startDrag: function(e) { + var _this = this; + this._isDragging = false; // Check if this is a reorder drag @@ -2197,7 +2271,18 @@ window.ionic = { // Check if this is a "pull down" drag for pull to refresh else if(e.gesture.direction == 'down') { - this._dragOp = new PullToRefreshDrag({ el: this.el }); + this._dragOp = new PullToRefreshDrag({ + el: this.el, + onRefresh: function() { + _this.onRefresh && _this.onRefresh(); + }, + onRefreshHolding: function() { + _this.onRefreshHolding && _this.onRefreshHolding(); + }, + onRefreshOpening: function(ratio) { + _this.onRefreshOpening && _this.onRefreshOpening(ratio); + } + }); this._dragOp.start(e); } @@ -2230,12 +2315,51 @@ window.ionic = { if(!this._dragOp) { this._startDrag(e); + if(!this._dragOp) { return; } } this._dragOp.drag(e); } }; +})(ionic); +; +(function(ionic) { +'use strict'; + /** + * An ActionSheet is the slide up menu popularized on iOS. + * + * You see it all over iOS apps, where it offers a set of options + * triggered after an action. + */ + ionic.views.Loading = function(opts) { + var _this = this; + + this.el = opts.el; + this._loadingBox = this.el.querySelector('.loading'); + }; + + ionic.views.Loading.prototype = { + show: function() { + var _this = this; + + if(this._loadingBox) { + window.requestAnimationFrame(function() { + _this.el.classList.add('active'); + + _this._loadingBox.style.marginLeft = (-_this._loadingBox.offsetWidth) / 2 + 'px'; + _this._loadingBox.style.marginTop = (-_this._loadingBox.offsetHeight) / 2 + 'px'; + }); + } + }, + hide: function() { + // Force a reflow so the animation will actually run + this.el.offsetWidth; + + this.el.classList.remove('active'); + } + }; + })(ionic); ; (function(ionic) { @@ -2308,6 +2432,43 @@ window.ionic = { } }; +})(ionic); +; +(function(ionic) { +'use strict'; + /** + * An ActionSheet is the slide up menu popularized on iOS. + * + * You see it all over iOS apps, where it offers a set of options + * triggered after an action. + */ + ionic.views.Popup = function(opts) { + var _this = this; + + this.el = opts.el; + }; + + ionic.views.Popup.prototype = { + setTitle: function(title) { + var title = el.querySelector('.popup-title'); + title && title.innerHTML = title; + }, + alert: function(message) { + var _this = this; + + window.requestAnimationFrame(function() { + _this.setTitle(message); + _this.el.classList.add('active'); + }); + }, + hide: function() { + // Force a reflow so the animation will actually run + this.el.offsetWidth; + + this.el.classList.remove('active'); + } + }; + })(ionic); ; (function(ionic) { diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss index d2707eb77b..d36307a597 100644 --- a/scss/ionic/_bar.scss +++ b/scss/ionic/_bar.scss @@ -175,12 +175,16 @@ } } -.bar .button-icon { - border: 1px solid transparent; - background-color: transparent; +.bar [class^="icon-"], +.bar [class*=" icon-"] { font-size: 24px; } +.bar .button-icon { + border: $button-border-width solid transparent; + background-color: transparent; +} + // Header at top .bar-header { top: 0; diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss index fb0495db83..3d7b300d4e 100644 --- a/scss/ionic/_listview.scss +++ b/scss/ionic/_listview.scss @@ -190,7 +190,7 @@ button.list-icon-right { padding-left: $list-thumbnail-width + $list-item-padding; min-height: $list-thumbnail-width; - img { + .thumbnail { position: absolute; top: 0; left: 0; diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss index d90de00573..f8cde9d8da 100644 --- a/scss/ionic/_mixins.scss +++ b/scss/ionic/_mixins.scss @@ -131,17 +131,6 @@ clear: both; } } - -// Webkit-style focus -// ------------------ -@mixin tab-focus() { - // Default - outline: thin dotted #333; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - // Center-align a block level element // ---------------------------------- @mixin center-block() { diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index cb84ebf2de..1b0301b9b9 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -213,7 +213,7 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%); // Buttons // ------------------------------- -$button-bar-button-line-height: 15px !default; +$button-bar-button-line-height: 15px !default; $button-color: #222; $button-padding: 8px 12px; diff --git a/test/headers.html b/test/headers.html index 178c64e4c7..2e1d07f5f3 100644 --- a/test/headers.html +++ b/test/headers.html @@ -5,8 +5,7 @@ - - +