From e8bd9a5dee77d29b746115546a51b1a4a3d46246 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 1 Nov 2013 14:13:43 -0500 Subject: [PATCH] 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