From 4b0a6ac7af5d3085fa08554a266ec2afbbdc24ac Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 1 Nov 2013 00:36:53 -0500 Subject: [PATCH 1/8] More Nav WIP --- dist/js/ionic-angular.js | 5 +++-- js/ext/angular/src/directive/ionicNav.js | 5 +++-- js/ext/angular/test/nav.html | 5 +++++ 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 3a798ffed3..2a1a5803af 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -585,7 +585,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges */ this.pushFromTemplate = function(templateUrl) { var childScope = $scope.$new(); - childScope.isVisible = true; // Load the given template TemplateLoader.load(templateUrl).then(function(templateString) { @@ -650,6 +649,8 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges return function($scope, $element, $attr, navCtrl) { var lastParent, lastIndex, childScope, childElement; + $scope.isVisible = true; + $scope.$watch('isVisible', function(value) { // Taken from ngIf if(childElement) { @@ -662,7 +663,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges } if(value) { - childScope = $scope; + childScope = $scope.$new(); transclude(childScope, function(clone) { childElement = clone; diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js index 8b13cc26a4..eba7ad7380 100644 --- a/js/ext/angular/src/directive/ionicNav.js +++ b/js/ext/angular/src/directive/ionicNav.js @@ -40,7 +40,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges */ this.pushFromTemplate = function(templateUrl) { var childScope = $scope.$new(); - childScope.isVisible = true; // Load the given template TemplateLoader.load(templateUrl).then(function(templateString) { @@ -105,6 +104,8 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges return function($scope, $element, $attr, navCtrl) { var lastParent, lastIndex, childScope, childElement; + $scope.isVisible = true; + $scope.$watch('isVisible', function(value) { // Taken from ngIf if(childElement) { @@ -117,7 +118,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges } if(value) { - childScope = $scope; + childScope = $scope.$new(); transclude(childScope, function(clone) { childElement = clone; diff --git a/js/ext/angular/test/nav.html b/js/ext/angular/test/nav.html index d33cf823ba..46b8d6679c 100644 --- a/js/ext/angular/test/nav.html +++ b/js/ext/angular/test/nav.html @@ -73,6 +73,11 @@ .controller('CatsCtrl', function($scope, $compile, $element) { console.log('Cats', $element); + var items = []; + for(var i = 0; i < 100; i++) { + items.push({}); + } + $scope.items = items; $scope.goNext = function() { $scope.navController.pushFromTemplate('page.html'); }; From 374ee92a7e58b57df0d589116d3588318f2ee02e Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 1 Nov 2013 08:20:22 -0500 Subject: [PATCH 2/8] i, .icon selector w/ !important --- dist/css/fonts/ionicons.eot | Bin dist/css/fonts/ionicons.svg | 4 ++-- dist/css/fonts/ionicons.ttf | Bin dist/css/fonts/ionicons.woff | Bin dist/css/ionic-scoped.css | 12 ++++++------ dist/css/ionic.css | 12 ++++++------ ionicons/style.scss | 12 ++++++------ 7 files changed, 20 insertions(+), 20 deletions(-) mode change 100644 => 100755 dist/css/fonts/ionicons.eot mode change 100644 => 100755 dist/css/fonts/ionicons.svg mode change 100644 => 100755 dist/css/fonts/ionicons.ttf mode change 100644 => 100755 dist/css/fonts/ionicons.woff diff --git a/dist/css/fonts/ionicons.eot b/dist/css/fonts/ionicons.eot old mode 100644 new mode 100755 diff --git a/dist/css/fonts/ionicons.svg b/dist/css/fonts/ionicons.svg old mode 100644 new mode 100755 index 8feff2497a..ee963d4878 --- a/dist/css/fonts/ionicons.svg +++ b/dist/css/fonts/ionicons.svg @@ -11,8 +11,8 @@ "license": "MIT", "licenseURL": "http://opensource.org/licenses/MIT", "version": "Version 1.2.3", - "fontId": "Ionicons", - "psName": "Ionicons", + "fontId": "ionicons", + "psName": "ionicons", "subFamily": "Regular", "fullName": "Ionicons", "description": "Generated by IcoMoon" diff --git a/dist/css/fonts/ionicons.ttf b/dist/css/fonts/ionicons.ttf old mode 100644 new mode 100755 diff --git a/dist/css/fonts/ionicons.woff b/dist/css/fonts/ionicons.woff old mode 100644 new mode 100755 diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index be39f0d02b..b852c3aaed 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -213,12 +213,12 @@ transform: rotate(360deg); } } } .ionic i, .ionic .icon { - font-family: 'ionicons'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; + font-family: 'ionicons' !important; + speak: none !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; diff --git a/dist/css/ionic.css b/dist/css/ionic.css index a37fa3e426..5b9d1366c6 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -7,12 +7,12 @@ font-style: normal; } i, .icon { - font-family: 'ionicons'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; + font-family: 'ionicons' !important; + speak: none !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; diff --git a/ionicons/style.scss b/ionicons/style.scss index 157a59ce35..a170414751 100644 --- a/ionicons/style.scss +++ b/ionicons/style.scss @@ -10,12 +10,12 @@ } i, .icon { - font-family: 'ionicons'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; + font-family: 'ionicons' !important; + speak: none !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; line-height: 1; /* Better Font Rendering =========== */ From 5c2f1ae0ab9076af2da7ee3c576c6273daf780b6 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 1 Nov 2013 09:02:11 -0500 Subject: [PATCH 3/8] use flex mixins --- scss/ionic/_bar.scss | 2 +- scss/ionic/_button-bar.scss | 20 +++++++++----------- scss/ionic/_mixins.scss | 12 ------------ scss/ionic/_tabs.scss | 22 ++++++++++++++-------- 4 files changed, 24 insertions(+), 32 deletions(-) diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss index 1856b32664..06e4a7f912 100644 --- a/scss/ionic/_bar.scss +++ b/scss/ionic/_bar.scss @@ -102,7 +102,7 @@ } > .button { - @include box-flex(0); + @include flex(0); z-index: 1; margin: 0; padding: 2px 8px 0 8px; diff --git a/scss/ionic/_button-bar.scss b/scss/ionic/_button-bar.scss index c91647065a..1b4be3691d 100644 --- a/scss/ionic/_button-bar.scss +++ b/scss/ionic/_button-bar.scss @@ -1,17 +1,16 @@ .button-bar { - @include box-flex(1); - @include box-orient(horizontal); - display: -webkit-box; - display: box; + @include display-flex(); + @include flex(1); + @include flex-direction(horizontal); } .button-bar > .button { - @include box-flex(1); + @include flex(1); display: block; overflow: hidden; - padding: 8px 16px; + padding: 0 16px; // Fix for unequal widths of buttons width: 0; @@ -23,7 +22,7 @@ white-space: nowrap; // Fix for box-flex width issue - line-height: $button-bar-button-line-height; + line-height: $button-bar-button-line-height - 2; &:first-child { border-radius: 2px 0px 0px 2px; @@ -38,8 +37,7 @@ // to pull a set of buttons to the right side of a header // bar, for example. .buttons { - @include box-flex(1); - @include box-orient(horizontal); - display: -webkit-box; - display: box; + @include display-flex(); + @include flex(1); + @include flex-direction(horizontal); } diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss index 67ee58ddac..5649a0617d 100644 --- a/scss/ionic/_mixins.scss +++ b/scss/ionic/_mixins.scss @@ -350,18 +350,6 @@ hyphens: $mode; } -@mixin box-orient($orientation) { - box-orient: $orientation; - -webkit-box-orient: $orientation; - -moz-box-orient: $orientation; -} - -@mixin box-flex($flex) { - box-flex: 1; - -webkit-box-flex: $flex; - -moz-box-flex: $flex; -} - @mixin display-flex { display: -webkit-box; display: -webkit-flex; diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss index 4796921fcd..83884eac7a 100644 --- a/scss/ionic/_tabs.scss +++ b/scss/ionic/_tabs.scss @@ -5,15 +5,13 @@ */ .tabs { - - @include box-orient(horizontal); + @include display-flex(); + @include flex-direction(horizontal); @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark); position: fixed; bottom: 0; z-index: 5; - display: -webkit-box; - display: box; width: 100%; height: $tabs-height; border-style: solid; @@ -66,13 +64,12 @@ } .tab-item { - @include box-flex(1); - display: block; + @include flex(1); + display: inline-block; overflow: hidden; box-sizing: border-box; + margin: auto; - // Required to force box elements to be the same size; - width: 0; height: 100%; color: inherit; @@ -149,3 +146,12 @@ } } +.item.tabs { + @include display-flex(); + padding: 0; + + i, .icon { + position: relative; + } +} + From 1f91f4a0bb618741e4abe30b6389a8c8889e19dc Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 1 Nov 2013 09:02:24 -0500 Subject: [PATCH 4/8] thumbnail margin --- dist/css/ionic-ios7.css | 131 +++++++++++++++++++++++------------- dist/css/ionic-scoped.css | 132 ++++++++++++++++++++++++------------- dist/css/ionic.css | 131 +++++++++++++++++++++++------------- scss/ionic/_items.scss | 16 ++--- scss/ionic/_variables.scss | 1 + test/cards.html | 27 +++++++- 6 files changed, 295 insertions(+), 143 deletions(-) diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index 017e5965d8..6e17f1c558 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -182,7 +182,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. @@ -646,9 +646,12 @@ a.subdued‎ { .bar .title a { color: inherit; } .bar > .button { - box-flex: 1; -webkit-box-flex: 0; + -webkit-flex: 0; -moz-box-flex: 0; + -moz-flex: 0; + -ms-flex: 0; + flex: 0; z-index: 1; margin: 0; padding: 2px 8px 0 8px; @@ -835,9 +838,17 @@ a.subdued‎ { * A navigation bar with any number of tab items supported. */ .tabs { - box-orient: horizontal; + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-direction: normal; -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; background-color: white; background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); border-color: #dddddd; @@ -845,8 +856,6 @@ a.subdued‎ { position: fixed; bottom: 0; z-index: 5; - display: -webkit-box; - display: box; width: 100%; height: 49px; border-style: solid; @@ -906,13 +915,16 @@ a.subdued‎ { top: 44px; } .tab-item { - box-flex: 1; -webkit-box-flex: 1; + -webkit-flex: 1; -moz-box-flex: 1; - display: block; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + display: inline-block; overflow: hidden; box-sizing: border-box; - width: 0; + margin: auto; height: 100%; color: inherit; text-align: center; @@ -970,6 +982,16 @@ a.subdued‎ { .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { color: #444444; } +.item.tabs { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + padding: 0; } + .item.tabs i, .item.tabs .icon { + position: relative; } + .menu { position: absolute; top: 0; @@ -1273,23 +1295,23 @@ button.item-icon-right:after { border-radius: 4px; } .item-thumbnail-left { - padding-left: 95px; - min-height: 80px; } + padding-left: 105px; + min-height: 100px; } .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image { position: absolute; - top: 0; - left: 0; + top: 10px; + left: 10px; max-width: 80px; max-height: 80px; width: 100%; } .item-thumbnail-right { - padding-right: 95px; - min-height: 80px; } + padding-right: 105px; + min-height: 100px; } .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image { position: absolute; - top: 0; - right: 0; + top: 10px; + right: 10px; max-width: 80px; max-height: 80px; width: 100%; } @@ -1663,7 +1685,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #cccccc; + border: 1px solid #ccc; background-color: white; } select[multiple], @@ -1735,7 +1757,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" */ @@ -1750,7 +1772,7 @@ input[type="checkbox"][readonly] { right: 0; left: 20px; -webkit-transform: none; - transition-delay: 0.05s, 0s; } + transition-delay: .05s, 0s; } .item-radio { padding: 0; } @@ -2034,7 +2056,7 @@ input[type="range"] { .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.block, .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -2076,29 +2098,41 @@ a.button { text-decoration: none; } .button-bar { - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; display: -webkit-box; - display: box; } + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; } .button-bar > .button { - box-flex: 1; -webkit-box-flex: 1; + -webkit-flex: 1; -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; display: block; overflow: hidden; - padding: 8px 16px; + padding: 0 16px; width: 0; border-width: 1px 0px 1px 1px; border-radius: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; - line-height: 15px; } + line-height: 13px; } .button-bar > .button:first-child { border-radius: 2px 0px 0px 2px; } .button-bar > .button:last-child { @@ -2106,14 +2140,23 @@ a.button { border-radius: 0px 2px 2px 0px; } .buttons { - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; display: -webkit-box; - display: box; } + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; } .badge { display: inline-block; @@ -2392,9 +2435,9 @@ a.button { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin 0.75s linear infinite; - -moz-animation: spin 0.75s linear infinite; - animation: spin 0.75s linear infinite; } + -webkit-animation: spin .75s linear infinite; + -moz-animation: spin .75s linear infinite; + animation: spin .75s linear infinite; } .icon-loading:before { content: "\e144"; } @@ -2407,9 +2450,9 @@ a.button { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin 0.75s linear infinite; - -moz-animation: spin 0.75s linear infinite; - animation: spin 0.75s linear infinite; } + -webkit-animation: spin .75s linear infinite; + -moz-animation: spin .75s linear infinite; + animation: spin .75s linear infinite; } .icon-refreshing:before { content: "\e144"; } diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index b852c3aaed..dc2e6a1f23 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -1195,7 +1195,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 */ @@ -1579,9 +1579,12 @@ .ionic .bar .title a { color: inherit; } .ionic .bar > .button { - box-flex: 1; -webkit-box-flex: 0; + -webkit-flex: 0; -moz-box-flex: 0; + -moz-flex: 0; + -ms-flex: 0; + flex: 0; z-index: 1; margin: 0; padding: 2px 8px 0 8px; @@ -1749,9 +1752,17 @@ bottom: 44px; display: block; } .ionic .tabs { - box-orient: horizontal; + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-direction: normal; -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; background-color: white; background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); border-color: #dddddd; @@ -1759,8 +1770,6 @@ position: fixed; bottom: 0; z-index: 5; - display: -webkit-box; - display: box; width: 100%; height: 49px; border-style: solid; @@ -1818,13 +1827,16 @@ .ionic .tabs-top { top: 44px; } .ionic .tab-item { - box-flex: 1; -webkit-box-flex: 1; + -webkit-flex: 1; -moz-box-flex: 1; - display: block; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + display: inline-block; overflow: hidden; box-sizing: border-box; - width: 0; + margin: auto; height: 100%; color: inherit; text-align: center; @@ -1874,6 +1886,15 @@ color: #f0b840; } .ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark { color: #444444; } + .ionic .item.tabs { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + padding: 0; } + .ionic .item.tabs i, .ionic .item.tabs .icon { + position: relative; } .ionic .menu { position: absolute; top: 0; @@ -2151,22 +2172,22 @@ width: 100%; border-radius: 4px; } .ionic .item-thumbnail-left { - padding-left: 95px; - min-height: 80px; } + padding-left: 105px; + min-height: 100px; } .ionic .item-thumbnail-left img:first-child, .ionic .item-thumbnail-left .item-image { position: absolute; - top: 0; - left: 0; + top: 10px; + left: 10px; max-width: 80px; max-height: 80px; width: 100%; } .ionic .item-thumbnail-right { - padding-right: 95px; - min-height: 80px; } + padding-right: 105px; + min-height: 100px; } .ionic .item-thumbnail-right img:first-child, .ionic .item-thumbnail-right .item-image { position: absolute; - top: 0; - right: 0; + top: 10px; + right: 10px; max-width: 80px; max-height: 80px; width: 100%; } @@ -2487,7 +2508,7 @@ .ionic input[type="file"] { line-height: 34px; } .ionic select { - border: 1px solid #cccccc; + border: 1px solid #ccc; background-color: white; } .ionic select[multiple], .ionic select[size] { @@ -2536,7 +2557,7 @@ border-radius: 50%; background: white; content: ' '; - transition: background-color 0.1s ease-in-out; } + transition: background-color .1s ease-in-out; } .ionic .checkbox input:after { position: absolute; top: 34%; @@ -2549,7 +2570,7 @@ border-right: 0; content: ' '; opacity: 0; - transition: opacity 0.05s ease-in-out; + transition: opacity .05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ionic .checkbox input:checked:before { @@ -2900,7 +2921,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.block, .ionic .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -2935,42 +2956,63 @@ .ionic a.button { text-decoration: none; } .ionic .button-bar { - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; display: -webkit-box; - display: box; } - .ionic .button-bar > .button { - box-flex: 1; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; -webkit-box-flex: 1; + -webkit-flex: 1; -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; } + .ionic .button-bar > .button { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; display: block; overflow: hidden; - padding: 8px 16px; + padding: 0 16px; width: 0; border-width: 1px 0px 1px 1px; border-radius: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; - line-height: 15px; } + line-height: 13px; } .ionic .button-bar > .button:first-child { border-radius: 2px 0px 0px 2px; } .ionic .button-bar > .button:last-child { border-right-width: 1px; border-radius: 0px 2px 2px 0px; } .ionic .buttons { - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; display: -webkit-box; - display: box; } + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; } .ionic .badge { display: inline-block; min-width: 10px; @@ -3166,9 +3208,9 @@ line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin 0.75s linear infinite; - -moz-animation: spin 0.75s linear infinite; - animation: spin 0.75s linear infinite; } + -webkit-animation: spin .75s linear infinite; + -moz-animation: spin .75s linear infinite; + animation: spin .75s linear infinite; } .ionic .icon-loading:before { content: "\e144"; } .ionic .icon-refreshing { @@ -3180,9 +3222,9 @@ line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin 0.75s linear infinite; - -moz-animation: spin 0.75s linear infinite; - animation: spin 0.75s linear infinite; } + -webkit-animation: spin .75s linear infinite; + -moz-animation: spin .75s linear infinite; + animation: spin .75s linear infinite; } .ionic .icon-refreshing:before { content: "\e144"; } .ionic .hidden, diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 5b9d1366c6..f4e11b13a8 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1521,7 +1521,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. @@ -2015,9 +2015,12 @@ a.subdued‎ { .bar .title a { color: inherit; } .bar > .button { - box-flex: 1; -webkit-box-flex: 0; + -webkit-flex: 0; -moz-box-flex: 0; + -moz-flex: 0; + -ms-flex: 0; + flex: 0; z-index: 1; margin: 0; padding: 2px 8px 0 8px; @@ -2204,9 +2207,17 @@ a.subdued‎ { * A navigation bar with any number of tab items supported. */ .tabs { - box-orient: horizontal; + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-direction: normal; -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; background-color: white; background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); border-color: #dddddd; @@ -2214,8 +2225,6 @@ a.subdued‎ { position: fixed; bottom: 0; z-index: 5; - display: -webkit-box; - display: box; width: 100%; height: 49px; border-style: solid; @@ -2275,13 +2284,16 @@ a.subdued‎ { top: 44px; } .tab-item { - box-flex: 1; -webkit-box-flex: 1; + -webkit-flex: 1; -moz-box-flex: 1; - display: block; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + display: inline-block; overflow: hidden; box-sizing: border-box; - width: 0; + margin: auto; height: 100%; color: inherit; text-align: center; @@ -2339,6 +2351,16 @@ a.subdued‎ { .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { color: #444444; } +.item.tabs { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + padding: 0; } + .item.tabs i, .item.tabs .icon { + position: relative; } + .menu { position: absolute; top: 0; @@ -2676,23 +2698,23 @@ button.item-icon-right:after { border-radius: 4px; } .item-thumbnail-left { - padding-left: 95px; - min-height: 80px; } + padding-left: 105px; + min-height: 100px; } .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image { position: absolute; - top: 0; - left: 0; + top: 10px; + left: 10px; max-width: 80px; max-height: 80px; width: 100%; } .item-thumbnail-right { - padding-right: 95px; - min-height: 80px; } + padding-right: 105px; + min-height: 100px; } .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image { position: absolute; - top: 0; - right: 0; + top: 10px; + right: 10px; max-width: 80px; max-height: 80px; width: 100%; } @@ -3066,7 +3088,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #cccccc; + border: 1px solid #ccc; background-color: white; } select[multiple], @@ -3121,7 +3143,7 @@ input[type="checkbox"][readonly] { border-radius: 50%; background: white; content: ' '; - transition: background-color 0.1s ease-in-out; } + transition: background-color .1s ease-in-out; } /* the checkmark within the box */ .checkbox input:after { @@ -3136,7 +3158,7 @@ input[type="checkbox"][readonly] { border-right: 0; content: ' '; opacity: 0; - transition: opacity 0.05s ease-in-out; + transition: opacity .05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -3515,7 +3537,7 @@ input[type="range"] { .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.block, .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -3557,29 +3579,41 @@ a.button { text-decoration: none; } .button-bar { - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; display: -webkit-box; - display: box; } + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; } .button-bar > .button { - box-flex: 1; -webkit-box-flex: 1; + -webkit-flex: 1; -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; display: block; overflow: hidden; - padding: 8px 16px; + padding: 0 16px; width: 0; border-width: 1px 0px 1px 1px; border-radius: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; - line-height: 15px; } + line-height: 13px; } .button-bar > .button:first-child { border-radius: 2px 0px 0px 2px; } .button-bar > .button:last-child { @@ -3587,14 +3621,23 @@ a.button { border-radius: 0px 2px 2px 0px; } .buttons { - box-flex: 1; - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-orient: horizontal; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; display: -webkit-box; - display: box; } + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; } .badge { display: inline-block; @@ -3978,9 +4021,9 @@ a.button { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin 0.75s linear infinite; - -moz-animation: spin 0.75s linear infinite; - animation: spin 0.75s linear infinite; } + -webkit-animation: spin .75s linear infinite; + -moz-animation: spin .75s linear infinite; + animation: spin .75s linear infinite; } .icon-loading:before { content: "\e144"; } @@ -3993,9 +4036,9 @@ a.button { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin 0.75s linear infinite; - -moz-animation: spin 0.75s linear infinite; - animation: spin 0.75s linear infinite; } + -webkit-animation: spin .75s linear infinite; + -moz-animation: spin .75s linear infinite; + animation: spin .75s linear infinite; } .icon-refreshing:before { content: "\e144"; } diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss index 06400caa6a..c17607d90e 100644 --- a/scss/ionic/_items.scss +++ b/scss/ionic/_items.scss @@ -275,13 +275,13 @@ button.item-icon-right:after { // ------------------------------- .item-thumbnail-left { - padding-left: $item-thumbnail-width + $item-padding; - min-height: $item-thumbnail-height; + padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding; + min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2); img:first-child, .item-image { position: absolute; - top: 0; - left: 0; + top: $item-thumbnail-margin; + left: $item-thumbnail-margin; max-width: $item-thumbnail-width; max-height: $item-thumbnail-height; width: 100%; @@ -289,13 +289,13 @@ button.item-icon-right:after { } .item-thumbnail-right { - padding-right: $item-thumbnail-width + $item-padding; - min-height: $item-thumbnail-height; + padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding; + min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2); img:first-child, .item-image { position: absolute; - top: 0; - right: 0; + top: $item-thumbnail-margin; + right: $item-thumbnail-margin; max-width: $item-thumbnail-width; max-height: $item-thumbnail-height; width: 100%; diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index 7536ea7ee4..be282691d2 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -411,6 +411,7 @@ $item-avitar-height: 40px !default; $item-thumbnail-width: 80px !default; $item-thumbnail-height: 80px !default; +$item-thumbnail-margin: 10px !default; // Icons diff --git a/test/cards.html b/test/cards.html index 2891b3ab0f..881f0edc8b 100644 --- a/test/cards.html +++ b/test/cards.html @@ -95,6 +95,18 @@

November 05, 1955

+
+ +

Marty McFly

+

November 05, 1955

+
+ +
+ +

Marty McFly

+

November 05, 1955

+
+

@@ -108,8 +120,19 @@

-
- Like Comment Share +
+ + + Like + + + + Comment + + + + Share +
From f4a04ea790278c9f50e93159578f79262fc92f8b Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 1 Nov 2013 09:14:25 -0500 Subject: [PATCH 5/8] should not be reset --- dist/css/ionic-ios7.css | 2 +- dist/css/ionic-scoped.css | 2 +- dist/css/ionic.css | 2 +- scss/ionic/_reset.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index 6e17f1c558..c23d5a3348 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -16,7 +16,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, -b, u, i, center, +b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index dc2e6a1f23..2859d4ba24 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -1108,7 +1108,7 @@ .ionic a, .ionic abbr, .ionic acronym, .ionic address, .ionic big, .ionic cite, .ionic code, .ionic del, .ionic dfn, .ionic em, .ionic img, .ionic ins, .ionic kbd, .ionic q, .ionic s, .ionic samp, .ionic small, .ionic strike, .ionic strong, .ionic sub, .ionic sup, .ionic tt, .ionic var, - .ionic b, .ionic u, .ionic i, .ionic center, + .ionic b, .ionic u, .ionic center, .ionic dl, .ionic dt, .ionic dd, .ionic ol, .ionic ul, .ionic li, .ionic fieldset, .ionic form, .ionic label, .ionic legend, .ionic table, .ionic caption, .ionic tbody, .ionic tfoot, .ionic thead, .ionic tr, .ionic th, .ionic td, diff --git a/dist/css/ionic.css b/dist/css/ionic.css index f4e11b13a8..277fa062c7 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1355,7 +1355,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, -b, u, i, center, +b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, diff --git a/scss/ionic/_reset.scss b/scss/ionic/_reset.scss index 1ac8e2de8c..1554dab1ae 100755 --- a/scss/ionic/_reset.scss +++ b/scss/ionic/_reset.scss @@ -16,7 +16,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, -b, u, i, center, +b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, From 73d71aea1457f09d36b5819cd8f6611ca58576d8 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 1 Nov 2013 11:25:54 -0500 Subject: [PATCH 6/8] Some stuff --- js/ext/angular/src/directive/ionicNav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js index eba7ad7380..ff3832b4f8 100644 --- a/js/ext/angular/src/directive/ionicNav.js +++ b/js/ext/angular/src/directive/ionicNav.js @@ -97,7 +97,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) { return { - restrict: 'ECA', + restrict: 'CA', require: '^navs', transclude: 'element', compile: function(element, attr, transclude) { From 979bba48105105e976c4b9ffe654bf1b06fb371c Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 1 Nov 2013 11:26:43 -0500 Subject: [PATCH 7/8] button variables updates --- dist/css/ionic-ios7.css | 86 +++++++++++++------------------------ dist/css/ionic-scoped.css | 85 +++++++++++++----------------------- dist/css/ionic.css | 86 +++++++++++++------------------------ scss/ionic/_bar.scss | 21 +++++---- scss/ionic/_button-bar.scss | 14 +----- scss/ionic/_button.scss | 39 +++++++++-------- scss/ionic/_variables.scss | 27 +++++++----- 7 files changed, 142 insertions(+), 216 deletions(-) diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index c23d5a3348..bc6ed1bccb 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -556,8 +556,8 @@ a.subdued‎ { border-style: solid; border-top: 1px solid transparent; border-bottom: 1px solid #dddddd; - background-size: 0; - background-color: white; } + background-color: white; + background-size: 0; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .bar { border-top: none !important; @@ -646,23 +646,17 @@ a.subdued‎ { .bar .title a { color: inherit; } .bar > .button { - -webkit-box-flex: 0; - -webkit-flex: 0; - -moz-box-flex: 0; - -moz-flex: 0; - -ms-flex: 0; - flex: 0; z-index: 1; - margin: 0; - padding: 2px 8px 0 8px; - min-height: 33px; - background-color: transparent; + padding: 0 8px; + min-height: 31px; font-size: 12px; - line-height: 28px; } + line-height: 30px; } .bar > .button i, .bar > .button .icon { - margin-top: 1px; } - .bar .button-bar { - line-height: 18px; } + font-size: 24px; + line-height: 29px; } + .bar .button-bar > .button { + min-height: 31px; + line-height: 31px; } .bar .button-bar + .button, .bar .button + .button-bar { margin-left: 5px; } .bar .title + .button:last-child, @@ -1836,8 +1830,9 @@ input[type="range"] { position: relative; display: inline-block; margin: 0; - padding: 10px 12px 7px 12px; - min-height: 44px; + padding: 0 12px; + padding-top: 1px; + min-height: 42px; border-width: 1px; border-style: solid; border-radius: 2px; @@ -1846,24 +1841,24 @@ input[type="range"] { text-align: center; text-overflow: ellipsis; font-size: 16px; - line-height: 23px; + line-height: 41px; cursor: pointer; } .button i, .button .icon { display: inline-block; - padding: 0; + padding: 0 0 1px 0; vertical-align: inherit; font-size: 24px; - line-height: 22px; } + line-height: 40px; } .button.button-icon { - padding: 12px 6px; + padding: 2px 4px; background: none; } .button.button-icon i, .button.button-icon .icon { font-size: 32px; } .button.button-clear { -webkit-transition: opacity 0.1s; transition: opacity 0.1s; - padding: 12px 6px; - max-height: 44px; + padding: 0 6px; + max-height: 42px; border: none; background: none; box-shadow: none; } @@ -2062,20 +2057,22 @@ input[type="range"] { margin-bottom: 10px; } .button-small { - padding: 1px 8px 1px 8px; - min-height: 32px; - line-height: 29px; - font-size: 12px; } + padding: 0 4px; + min-height: 28px; + font-size: 12px; + line-height: 27px; } .button-small i, .button-small .icon { - font-size: 20px; + font-size: 16px; line-height: 26px; } .button-large { - padding: 12px 18px 12px 18px; - min-height: 52px; - font-size: 24px; } + padding: 0 12px; + min-height: 54px; + font-size: 18px; + line-height: 53px; } .button-large i, .button-large .icon { - font-size: 32px; } + font-size: 32px; + line-height: 52px; } .padding > .button.block:first-child { margin-top: 0; } @@ -2123,7 +2120,6 @@ a.button { -moz-flex: 1; -ms-flex: 1; flex: 1; - display: block; overflow: hidden; padding: 0 16px; width: 0; @@ -2131,33 +2127,13 @@ a.button { border-radius: 0; text-align: center; text-overflow: ellipsis; - white-space: nowrap; - line-height: 13px; } + white-space: nowrap; } .button-bar > .button:first-child { border-radius: 2px 0px 0px 2px; } .button-bar > .button:last-child { border-right-width: 1px; border-radius: 0px 2px 2px 0px; } -.buttons { - display: -webkit-box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex: 1; - -moz-box-flex: 1; - -moz-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - -webkit-flex-direction: horizontal; - -moz-flex-direction: horizontal; - -ms-flex-direction: horizontal; - flex-direction: horizontal; } - .badge { display: inline-block; min-width: 10px; diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 2859d4ba24..9c51b545ac 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -1489,8 +1489,8 @@ border-style: solid; border-top: 1px solid transparent; border-bottom: 1px solid #dddddd; - background-size: 0; - background-color: white; } + background-color: white; + background-size: 0; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .ionic .bar { border-top: none !important; @@ -1579,23 +1579,17 @@ .ionic .bar .title a { color: inherit; } .ionic .bar > .button { - -webkit-box-flex: 0; - -webkit-flex: 0; - -moz-box-flex: 0; - -moz-flex: 0; - -ms-flex: 0; - flex: 0; z-index: 1; - margin: 0; - padding: 2px 8px 0 8px; - min-height: 33px; - background-color: transparent; + padding: 0 8px; + min-height: 31px; font-size: 12px; - line-height: 28px; } + line-height: 30px; } .ionic .bar > .button i, .ionic .bar > .button .icon { - margin-top: 1px; } - .ionic .bar .button-bar { - line-height: 18px; } + font-size: 24px; + line-height: 29px; } + .ionic .bar .button-bar > .button { + min-height: 31px; + line-height: 31px; } .ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar { margin-left: 5px; } .ionic .bar .title + .button:last-child, @@ -2701,8 +2695,9 @@ position: relative; display: inline-block; margin: 0; - padding: 10px 12px 7px 12px; - min-height: 44px; + padding: 0 12px; + padding-top: 1px; + min-height: 42px; border-width: 1px; border-style: solid; border-radius: 2px; @@ -2711,24 +2706,24 @@ text-align: center; text-overflow: ellipsis; font-size: 16px; - line-height: 23px; + line-height: 41px; cursor: pointer; } .ionic .button i, .ionic .button .icon { display: inline-block; - padding: 0; + padding: 0 0 1px 0; vertical-align: inherit; font-size: 24px; - line-height: 22px; } + line-height: 40px; } .ionic .button.button-icon { - padding: 12px 6px; + padding: 2px 4px; background: none; } .ionic .button.button-icon i, .ionic .button.button-icon .icon { font-size: 32px; } .ionic .button.button-clear { -webkit-transition: opacity 0.1s; transition: opacity 0.1s; - padding: 12px 6px; - max-height: 44px; + padding: 0 6px; + max-height: 42px; border: none; background: none; box-shadow: none; } @@ -2926,19 +2921,21 @@ margin-top: 10px; margin-bottom: 10px; } .ionic .button-small { - padding: 1px 8px 1px 8px; - min-height: 32px; - line-height: 29px; - font-size: 12px; } + padding: 0 4px; + min-height: 28px; + font-size: 12px; + line-height: 27px; } .ionic .button-small i, .ionic .button-small .icon { - font-size: 20px; + font-size: 16px; line-height: 26px; } .ionic .button-large { - padding: 12px 18px 12px 18px; - min-height: 52px; - font-size: 24px; } + padding: 0 12px; + min-height: 54px; + font-size: 18px; + line-height: 53px; } .ionic .button-large i, .ionic .button-large .icon { - font-size: 32px; } + font-size: 32px; + line-height: 52px; } .ionic .padding > .button.block:first-child { margin-top: 0; } .ionic .button-full, @@ -2980,7 +2977,6 @@ -moz-flex: 1; -ms-flex: 1; flex: 1; - display: block; overflow: hidden; padding: 0 16px; width: 0; @@ -2988,31 +2984,12 @@ border-radius: 0; text-align: center; text-overflow: ellipsis; - white-space: nowrap; - line-height: 13px; } + white-space: nowrap; } .ionic .button-bar > .button:first-child { border-radius: 2px 0px 0px 2px; } .ionic .button-bar > .button:last-child { border-right-width: 1px; border-radius: 0px 2px 2px 0px; } - .ionic .buttons { - display: -webkit-box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex: 1; - -moz-box-flex: 1; - -moz-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - -webkit-flex-direction: horizontal; - -moz-flex-direction: horizontal; - -ms-flex-direction: horizontal; - flex-direction: horizontal; } .ionic .badge { display: inline-block; min-width: 10px; diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 277fa062c7..da2206b7a2 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1925,8 +1925,8 @@ a.subdued‎ { border-style: solid; border-top: 1px solid transparent; border-bottom: 1px solid #dddddd; - background-size: 0; - background-color: white; } + background-color: white; + background-size: 0; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .bar { border-top: none !important; @@ -2015,23 +2015,17 @@ a.subdued‎ { .bar .title a { color: inherit; } .bar > .button { - -webkit-box-flex: 0; - -webkit-flex: 0; - -moz-box-flex: 0; - -moz-flex: 0; - -ms-flex: 0; - flex: 0; z-index: 1; - margin: 0; - padding: 2px 8px 0 8px; - min-height: 33px; - background-color: transparent; + padding: 0 8px; + min-height: 31px; font-size: 12px; - line-height: 28px; } + line-height: 30px; } .bar > .button i, .bar > .button .icon { - margin-top: 1px; } - .bar .button-bar { - line-height: 18px; } + font-size: 24px; + line-height: 29px; } + .bar .button-bar > .button { + min-height: 31px; + line-height: 31px; } .bar .button-bar + .button, .bar .button + .button-bar { margin-left: 5px; } .bar .title + .button:last-child, @@ -3317,8 +3311,9 @@ input[type="range"] { position: relative; display: inline-block; margin: 0; - padding: 10px 12px 7px 12px; - min-height: 44px; + padding: 0 12px; + padding-top: 1px; + min-height: 42px; border-width: 1px; border-style: solid; border-radius: 2px; @@ -3327,24 +3322,24 @@ input[type="range"] { text-align: center; text-overflow: ellipsis; font-size: 16px; - line-height: 23px; + line-height: 41px; cursor: pointer; } .button i, .button .icon { display: inline-block; - padding: 0; + padding: 0 0 1px 0; vertical-align: inherit; font-size: 24px; - line-height: 22px; } + line-height: 40px; } .button.button-icon { - padding: 12px 6px; + padding: 2px 4px; background: none; } .button.button-icon i, .button.button-icon .icon { font-size: 32px; } .button.button-clear { -webkit-transition: opacity 0.1s; transition: opacity 0.1s; - padding: 12px 6px; - max-height: 44px; + padding: 0 6px; + max-height: 42px; border: none; background: none; box-shadow: none; } @@ -3543,20 +3538,22 @@ input[type="range"] { margin-bottom: 10px; } .button-small { - padding: 1px 8px 1px 8px; - min-height: 32px; - line-height: 29px; - font-size: 12px; } + padding: 0 4px; + min-height: 28px; + font-size: 12px; + line-height: 27px; } .button-small i, .button-small .icon { - font-size: 20px; + font-size: 16px; line-height: 26px; } .button-large { - padding: 12px 18px 12px 18px; - min-height: 52px; - font-size: 24px; } + padding: 0 12px; + min-height: 54px; + font-size: 18px; + line-height: 53px; } .button-large i, .button-large .icon { - font-size: 32px; } + font-size: 32px; + line-height: 52px; } .padding > .button.block:first-child { margin-top: 0; } @@ -3604,7 +3601,6 @@ a.button { -moz-flex: 1; -ms-flex: 1; flex: 1; - display: block; overflow: hidden; padding: 0 16px; width: 0; @@ -3612,33 +3608,13 @@ a.button { border-radius: 0; text-align: center; text-overflow: ellipsis; - white-space: nowrap; - line-height: 13px; } + white-space: nowrap; } .button-bar > .button:first-child { border-radius: 2px 0px 0px 2px; } .button-bar > .button:last-child { border-right-width: 1px; border-radius: 0px 2px 2px 0px; } -.buttons { - display: -webkit-box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex: 1; - -moz-box-flex: 1; - -moz-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - -webkit-flex-direction: horizontal; - -moz-flex-direction: horizontal; - -ms-flex-direction: horizontal; - flex-direction: horizontal; } - .badge { display: inline-block; min-width: 10px; diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss index 06e4a7f912..20393c1bfe 100644 --- a/scss/ionic/_bar.scss +++ b/scss/ionic/_bar.scss @@ -20,9 +20,9 @@ border-style: solid; border-top: 1px solid transparent; border-bottom: 1px solid $bar-default-border-color; - background-size: 0; background-color: $bar-bg; + background-size: 0; @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), @@ -102,22 +102,21 @@ } > .button { - @include flex(0); z-index: 1; - margin: 0; - padding: 2px 8px 0 8px; - min-height: $button-bar-button-min-height; - background-color: transparent; - font-size: 12px; - line-height: 28px; + padding: $button-bar-button-padding; + min-height: $button-bar-button-height; + font-size: $button-bar-button-font-size; + line-height: $button-bar-button-height - $button-border-width; i, .icon { - margin-top: 1px; + font-size: $button-bar-button-icon-size; + line-height: $button-bar-button-height - $button-border-width - 1; } } - .button-bar { - line-height: $bar-button-bar-line-height; + .button-bar > .button { + min-height: $button-bar-button-height; + line-height: $button-bar-button-height; } .button-bar + .button, .button + .button-bar { diff --git a/scss/ionic/_button-bar.scss b/scss/ionic/_button-bar.scss index 1b4be3691d..779dd2eb7f 100644 --- a/scss/ionic/_button-bar.scss +++ b/scss/ionic/_button-bar.scss @@ -1,3 +1,4 @@ + .button-bar { @include display-flex(); @include flex(1); @@ -6,7 +7,6 @@ .button-bar > .button { @include flex(1); - display: block; overflow: hidden; @@ -20,9 +20,6 @@ text-align: center; text-overflow: ellipsis; white-space: nowrap; - // Fix for box-flex width issue - - line-height: $button-bar-button-line-height - 2; &:first-child { border-radius: 2px 0px 0px 2px; @@ -32,12 +29,3 @@ border-radius: 0px 2px 2px 0px; } } - -// Buttons are used to group a set of buttons, useful -// to pull a set of buttons to the right side of a header -// bar, for example. -.buttons { - @include display-flex(); - @include flex(1); - @include flex-direction(horizontal); -} diff --git a/scss/ionic/_button.scss b/scss/ionic/_button.scss index bfab67aac3..73cbaf1b24 100644 --- a/scss/ionic/_button.scss +++ b/scss/ionic/_button.scss @@ -4,7 +4,8 @@ margin: 0; padding: $button-padding; - min-height: $button-min-height; + padding-top: 1px; + min-height: $button-height; border-width: $button-border-width; border-style: solid; @@ -17,31 +18,31 @@ text-overflow: ellipsis; font-size: $button-font-size; - line-height: $button-line-height; + line-height: $button-height - $button-border-width; cursor: pointer; i, .icon { display: inline-block; - padding: 0; + padding: 0 0 $button-border-width 0; vertical-align: inherit; - font-size: $button-icon-font-size; - line-height: $button-line-height - 1; + font-size: $button-icon-size; + line-height: $button-height - $button-border-width - 1; } &.button-icon { - padding: $button-clear-padding; + padding: 2px 4px; background: none; i, .icon { - font-size: $button-icon-large-font-size; + font-size: $button-large-icon-size; } } &.button-clear { @include transition(opacity .1s); padding: $button-clear-padding; - max-height: 44px; + max-height: $button-height; border: none; background: none; box-shadow: none; @@ -116,24 +117,26 @@ } .button-small { - padding: 1px 8px 1px 8px; - min-height: $button-small-min-height; - line-height: $button-small-line-height; - font-size: $button-font-size - 4; + padding: $button-small-padding; + min-height: $button-small-height; + font-size: $button-small-font-size; + line-height: $button-small-height - $button-border-width; i, .icon { - font-size: $button-icon-font-size - 4; - line-height: $button-small-line-height - 3; + font-size: $button-small-icon-size; + line-height: $button-small-height - $button-border-width - 1; } } .button-large { - padding: 12px 18px 12px 18px; - min-height: $button-min-height + 8; - font-size: $button-font-size + 8; + padding: $button-large-padding; + min-height: $button-large-height; + font-size: $button-large-font-size; + line-height: $button-large-height - $button-border-width; i, .icon { - font-size: $button-icon-font-size + 8; + font-size: $button-large-icon-size; + line-height: $button-large-height - $button-border-width - 1; } } diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index be282691d2..e2e53e583f 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -210,23 +210,30 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%); // ------------------------------- $button-color: #222; -$button-padding: 10px 12px 7px 12px; $button-block-margin: 10px !default; -$button-clear-padding: 12px 6px; +$button-clear-padding: 0 6px; $button-border-radius: 2px; $button-border-width: 1px; + $button-font-size: 16px; -$button-line-height: 23px; -$button-min-height: 44px; +$button-height: 42px; +$button-padding: 0 12px; +$button-icon-size: 24px; -$button-small-line-height: 29px !default; -$button-small-min-height: 32px !default; +$button-large-font-size: 18px; +$button-large-height: 54px; +$button-large-padding: 0 12px; +$button-large-icon-size: 32px; -$button-icon-font-size: 24px; -$button-icon-large-font-size: 32px; +$button-small-font-size: 12px; +$button-small-height: 28px; +$button-small-padding: 0 4px; +$button-small-icon-size: 16px; -$button-bar-button-line-height: 15px !default; -$button-bar-button-min-height: 33px !default; +$button-bar-button-font-size: 12px; +$button-bar-button-height: 31px !default; +$button-bar-button-padding: 0 8px; +$button-bar-button-icon-size: 24px; $button-default-bg: $brand-default; $button-default-border: #ddd; From e8bd9a5dee77d29b746115546a51b1a4a3d46246 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 1 Nov 2013 14:13:43 -0500 Subject: [PATCH 8/8] icon colors --- dist/css/ionic-ios7.css | 80 +++++++++++++++++++++++++++++---------- dist/css/ionic-scoped.css | 65 ++++++++++++++++++++++--------- dist/css/ionic.css | 80 +++++++++++++++++++++++++++++---------- dist/js/ionic-angular.js | 2 +- scss/ionic/_icons.scss | 79 +++++++++++++++++++++++++++++++------- scss/ionic/_items.scss | 13 +++++++ scss/ionic/_list.scss | 6 --- test/cards.html | 14 +++---- test/lists.html | 28 +++++++------- 9 files changed, 270 insertions(+), 97 deletions(-) diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index bc6ed1bccb..a29c1f8bc5 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -1214,7 +1214,9 @@ a.item { font-size: 32px; } .item .fill-icon { - font-size: 28px; } + font-size: 28px; + min-width: 30px; + min-height: 30px; } .item-icon-left { padding-left: 45px; } @@ -1329,12 +1331,18 @@ button.item-icon-right:after { .item-divider { margin: -1px; padding: 5px 15px; + min-height: 30px; border: none; background-color: whitesmoke; box-shadow: inset 0 0 1px #666666; color: #222222; font-weight: bold; } +.item-note { + float: right; + color: #aaa; + font-size: 14px; } + .item-sliding { -webkit-transition: -webkit-transform 0.1s ease-in-out; } @@ -1440,11 +1448,6 @@ button.item-icon-right:after { padding-right: 1px; padding-left: 1px; } -.item-label-right { - float: right; - color: #aaa; - font-size: 14px; } - /* A card and list-inset are close to the same thing, except a card as a box shadow. */ @@ -2368,6 +2371,45 @@ a.button { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } +i.icon-default, .icon.icon-default { + color: white; } + +i.icon-secondary, .icon.icon-secondary { + color: gainsboro; } + +i.icon-primary, .icon.icon-primary { + color: #4a87ee; } + +i.icon-info, .icon.icon-info { + color: #43cee6; } + +i.icon-success, .icon.icon-success { + color: #66cc33; } + +i.icon-warning, .icon.icon-warning { + color: #f0b840; } + +i.icon-danger, .icon.icon-danger { + color: #ef4e3a; } + +i.icon-dark, .icon.icon-dark { + color: #444444; } + +i.icon-gray-darker, .icon.icon-gray-darker { + color: #222222; } + +i.icon-gray-dark, .icon.icon-gray-dark { + color: #333333; } + +i.icon-gray, .icon.icon-gray { + color: #555555; } + +i.icon-gray-light, .icon.icon-gray-light { + color: #999999; } + +i.icon-gray-lighter, .icon.icon-gray-lighter { + color: #999999; } + .fill-icon { color: white !important; } .fill-icon:before { @@ -2375,31 +2417,31 @@ a.button { position: relative; border-radius: 6px; padding: 1px; } - .fill-icon.brand-default:before { + .fill-icon.icon-default:before { background: white; } - .fill-icon.brand-secondary:before { + .fill-icon.icon-secondary:before { background: whitesmoke; } - .fill-icon.brand-primary:before { + .fill-icon.icon-primary:before { background: #4a87ee; } - .fill-icon.brand-info:before { + .fill-icon.icon-info:before { background: #43cee6; } - .fill-icon.brand-success:before { + .fill-icon.icon-success:before { background: #66cc33; } - .fill-icon.brand-warning:before { + .fill-icon.icon-warning:before { background: #f0b840; } - .fill-icon.brand-danger:before { + .fill-icon.icon-danger:before { background: #ef4e3a; } - .fill-icon.brand-dark:before { + .fill-icon.icon-dark:before { background: #444444; } - .fill-icon.gray-darker:before { + .fill-icon.icon-gray-darker:before { background: #222222; } - .fill-icon.gray-dark:before { + .fill-icon.icon-gray-dark:before { background: #333333; } - .fill-icon.gray:before { + .fill-icon.icon-gray:before { background: #555555; } - .fill-icon.gray-light:before { + .fill-icon.icon-gray-light:before { background: #999999; } - .fill-icon.gray-lighter:before { + .fill-icon.icon-gray-lighter:before { background: #eeeeee; } .icon-loading { diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 9c51b545ac..2fa3c3be26 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -2101,7 +2101,9 @@ height: 100%; font-size: 32px; } .ionic .item .fill-icon { - font-size: 28px; } + font-size: 28px; + min-width: 30px; + min-height: 30px; } .ionic .item-icon-left { padding-left: 45px; } .ionic .item-icon-left i, .ionic .item-icon-left .icon { @@ -2202,11 +2204,16 @@ .ionic .item-divider { margin: -1px; padding: 5px 15px; + min-height: 30px; border: none; background-color: whitesmoke; box-shadow: inset 0 0 1px #666666; color: #222222; font-weight: bold; } + .ionic .item-note { + float: right; + color: #aaa; + font-size: 14px; } .ionic .item-sliding { -webkit-transition: -webkit-transform 0.1s ease-in-out; } .ionic .item-reordering { @@ -2289,10 +2296,6 @@ .ionic .card.list .list-item { padding-right: 1px; padding-left: 1px; } - .ionic .item-label-right { - float: right; - color: #aaa; - font-size: 14px; } .ionic .card, .ionic .list-inset { overflow: hidden; @@ -3143,6 +3146,32 @@ .ionic .fade-in.active { -webkit-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } + .ionic i.icon-default, .ionic .icon.icon-default { + color: white; } + .ionic i.icon-secondary, .ionic .icon.icon-secondary { + color: gainsboro; } + .ionic i.icon-primary, .ionic .icon.icon-primary { + color: #4a87ee; } + .ionic i.icon-info, .ionic .icon.icon-info { + color: #43cee6; } + .ionic i.icon-success, .ionic .icon.icon-success { + color: #66cc33; } + .ionic i.icon-warning, .ionic .icon.icon-warning { + color: #f0b840; } + .ionic i.icon-danger, .ionic .icon.icon-danger { + color: #ef4e3a; } + .ionic i.icon-dark, .ionic .icon.icon-dark { + color: #444444; } + .ionic i.icon-gray-darker, .ionic .icon.icon-gray-darker { + color: #222222; } + .ionic i.icon-gray-dark, .ionic .icon.icon-gray-dark { + color: #333333; } + .ionic i.icon-gray, .ionic .icon.icon-gray { + color: #555555; } + .ionic i.icon-gray-light, .ionic .icon.icon-gray-light { + color: #999999; } + .ionic i.icon-gray-lighter, .ionic .icon.icon-gray-lighter { + color: #999999; } .ionic .fill-icon { color: white !important; } .ionic .fill-icon:before { @@ -3150,31 +3179,31 @@ position: relative; border-radius: 6px; padding: 1px; } - .ionic .fill-icon.brand-default:before { + .ionic .fill-icon.icon-default:before { background: white; } - .ionic .fill-icon.brand-secondary:before { + .ionic .fill-icon.icon-secondary:before { background: whitesmoke; } - .ionic .fill-icon.brand-primary:before { + .ionic .fill-icon.icon-primary:before { background: #4a87ee; } - .ionic .fill-icon.brand-info:before { + .ionic .fill-icon.icon-info:before { background: #43cee6; } - .ionic .fill-icon.brand-success:before { + .ionic .fill-icon.icon-success:before { background: #66cc33; } - .ionic .fill-icon.brand-warning:before { + .ionic .fill-icon.icon-warning:before { background: #f0b840; } - .ionic .fill-icon.brand-danger:before { + .ionic .fill-icon.icon-danger:before { background: #ef4e3a; } - .ionic .fill-icon.brand-dark:before { + .ionic .fill-icon.icon-dark:before { background: #444444; } - .ionic .fill-icon.gray-darker:before { + .ionic .fill-icon.icon-gray-darker:before { background: #222222; } - .ionic .fill-icon.gray-dark:before { + .ionic .fill-icon.icon-gray-dark:before { background: #333333; } - .ionic .fill-icon.gray:before { + .ionic .fill-icon.icon-gray:before { background: #555555; } - .ionic .fill-icon.gray-light:before { + .ionic .fill-icon.icon-gray-light:before { background: #999999; } - .ionic .fill-icon.gray-lighter:before { + .ionic .fill-icon.icon-gray-lighter:before { background: #eeeeee; } .ionic .icon-loading { font-family: 'ionicons'; diff --git a/dist/css/ionic.css b/dist/css/ionic.css index da2206b7a2..85f7d260c1 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2617,7 +2617,9 @@ a.item { font-size: 32px; } .item .fill-icon { - font-size: 28px; } + font-size: 28px; + min-width: 30px; + min-height: 30px; } .item-icon-left { padding-left: 45px; } @@ -2732,12 +2734,18 @@ button.item-icon-right:after { .item-divider { margin: -1px; padding: 5px 15px; + min-height: 30px; border: none; background-color: whitesmoke; box-shadow: inset 0 0 1px #666666; color: #222222; font-weight: bold; } +.item-note { + float: right; + color: #aaa; + font-size: 14px; } + .item-sliding { -webkit-transition: -webkit-transform 0.1s ease-in-out; } @@ -2843,11 +2851,6 @@ button.item-icon-right:after { padding-right: 1px; padding-left: 1px; } -.item-label-right { - float: right; - color: #aaa; - font-size: 14px; } - /* A card and list-inset are close to the same thing, except a card as a box shadow. */ @@ -3954,6 +3957,45 @@ a.button { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } +i.icon-default, .icon.icon-default { + color: white; } + +i.icon-secondary, .icon.icon-secondary { + color: gainsboro; } + +i.icon-primary, .icon.icon-primary { + color: #4a87ee; } + +i.icon-info, .icon.icon-info { + color: #43cee6; } + +i.icon-success, .icon.icon-success { + color: #66cc33; } + +i.icon-warning, .icon.icon-warning { + color: #f0b840; } + +i.icon-danger, .icon.icon-danger { + color: #ef4e3a; } + +i.icon-dark, .icon.icon-dark { + color: #444444; } + +i.icon-gray-darker, .icon.icon-gray-darker { + color: #222222; } + +i.icon-gray-dark, .icon.icon-gray-dark { + color: #333333; } + +i.icon-gray, .icon.icon-gray { + color: #555555; } + +i.icon-gray-light, .icon.icon-gray-light { + color: #999999; } + +i.icon-gray-lighter, .icon.icon-gray-lighter { + color: #999999; } + .fill-icon { color: white !important; } .fill-icon:before { @@ -3961,31 +4003,31 @@ a.button { position: relative; border-radius: 6px; padding: 1px; } - .fill-icon.brand-default:before { + .fill-icon.icon-default:before { background: white; } - .fill-icon.brand-secondary:before { + .fill-icon.icon-secondary:before { background: whitesmoke; } - .fill-icon.brand-primary:before { + .fill-icon.icon-primary:before { background: #4a87ee; } - .fill-icon.brand-info:before { + .fill-icon.icon-info:before { background: #43cee6; } - .fill-icon.brand-success:before { + .fill-icon.icon-success:before { background: #66cc33; } - .fill-icon.brand-warning:before { + .fill-icon.icon-warning:before { background: #f0b840; } - .fill-icon.brand-danger:before { + .fill-icon.icon-danger:before { background: #ef4e3a; } - .fill-icon.brand-dark:before { + .fill-icon.icon-dark:before { background: #444444; } - .fill-icon.gray-darker:before { + .fill-icon.icon-gray-darker:before { background: #222222; } - .fill-icon.gray-dark:before { + .fill-icon.icon-gray-dark:before { background: #333333; } - .fill-icon.gray:before { + .fill-icon.icon-gray:before { background: #555555; } - .fill-icon.gray-light:before { + .fill-icon.icon-gray-light:before { background: #999999; } - .fill-icon.gray-lighter:before { + .fill-icon.icon-gray-lighter:before { background: #eeeeee; } .icon-loading { diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 2a1a5803af..41879f8490 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -642,7 +642,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) { return { - restrict: 'ECA', + restrict: 'CA', require: '^navs', transclude: 'element', compile: function(element, attr, transclude) { diff --git a/scss/ionic/_icons.scss b/scss/ionic/_icons.scss index aa58d41f12..1e444d2b5d 100644 --- a/scss/ionic/_icons.scss +++ b/scss/ionic/_icons.scss @@ -1,4 +1,57 @@ +i.icon-default, .icon.icon-default { + color: $brand-default; +} + +i.icon-secondary, .icon.icon-secondary { + color: darken($brand-secondary, 10%); +} + +i.icon-primary, .icon.icon-primary { + color: $brand-primary; +} + +i.icon-info, .icon.icon-info { + color: $brand-info; +} + +i.icon-success, .icon.icon-success { + color: $brand-success; +} + +i.icon-warning, .icon.icon-warning { + color: $brand-warning; +} + +i.icon-danger, .icon.icon-danger { + color: $brand-danger; +} + +i.icon-dark, .icon.icon-dark { + color: $brand-dark; +} + +i.icon-gray-darker, .icon.icon-gray-darker { + color: $gray-darker; +} + +i.icon-gray-dark, .icon.icon-gray-dark { + color: $gray-dark; +} + +i.icon-gray, .icon.icon-gray { + color: $gray; +} + +i.icon-gray-light, .icon.icon-gray-light { + color: $gray-light; +} + +i.icon-gray-lighter, .icon.icon-gray-lighter { + color: $gray-light; +} + + .fill-icon { color: white !important; &:before { @@ -8,44 +61,44 @@ padding: 1px; } - &.brand-default:before { + &.icon-default:before { background: $brand-default; } - &.brand-secondary:before { + &.icon-secondary:before { background: $brand-secondary; } - &.brand-primary:before { + &.icon-primary:before { background: $brand-primary; } - &.brand-info:before { + &.icon-info:before { background: $brand-info; } - &.brand-success:before { + &.icon-success:before { background: $brand-success; } - &.brand-warning:before { + &.icon-warning:before { background: $brand-warning; } - &.brand-danger:before { + &.icon-danger:before { background: $brand-danger; } - &.brand-dark:before { + &.icon-dark:before { background: $brand-dark; } - &.gray-darker:before { + &.icon-gray-darker:before { background: $gray-darker; } - &.gray-dark:before { + &.icon-gray-dark:before { background: $gray-dark; } - &.gray:before { + &.icon-gray:before { background: $gray; } - &.gray-light:before { + &.icon-gray-light:before { background: $gray-light; } - &.gray-lighter:before { + &.icon-gray-lighter:before { background: $gray-lighter; } diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss index c17607d90e..d20f3a4636 100644 --- a/scss/ionic/_items.scss +++ b/scss/ionic/_items.scss @@ -186,6 +186,8 @@ a.item { .item .fill-icon { font-size: $item-icon-fill-font-size; + min-width: $item-icon-fill-font-size + 2; + min-height: $item-icon-fill-font-size + 2; } .item-icon-left { @@ -339,6 +341,7 @@ button.item-icon-right:after { .item-divider { margin: $item-border-width * -1; padding: $item-divider-padding; + min-height: 30px; border: none; background-color: $item-divider-bg; box-shadow: $item-box-shadow; @@ -347,6 +350,16 @@ button.item-icon-right:after { } +// Item Note +// ------------------------------- + +.item-note { + float: right; + color: #aaa; + font-size: 14px; +} + + // Item Animations // ------------------------------- diff --git a/scss/ionic/_list.scss b/scss/ionic/_list.scss index 04797db6cd..3d36afdde2 100644 --- a/scss/ionic/_list.scss +++ b/scss/ionic/_list.scss @@ -57,12 +57,6 @@ padding-left: 1px; } -.item-label-right { - float: right; - color: #aaa; - font-size: 14px; -} - // Cards / Inset Lists // -------------------------------------------------- diff --git a/test/cards.html b/test/cards.html index 881f0edc8b..6a0ac20f60 100644 --- a/test/cards.html +++ b/test/cards.html @@ -120,17 +120,17 @@

-
- - +
+ + Like - - + + Comment - - + + Share
diff --git a/test/lists.html b/test/lists.html index 2e568f389c..8b2f3df56b 100644 --- a/test/lists.html +++ b/test/lists.html @@ -48,31 +48,31 @@
- + Check mail 5 - + Call Ma - + Cell - + Record album - + Grammy - + Breaking Bad - + Blue, yellow, pink @@ -82,31 +82,31 @@ - + Games - + Super Mario - + Music - + JT - + Shopping - + Bag - + Friends 0