diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 0e25cda49d..23dc24a5f2 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1405,9 +1405,6 @@ a.subdued { border-style: solid; 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; } - .item.active, .ionic-pseudo .item:active { - background-color: #d9d9d9; - border-color: #cccccc; } .item h2 { margin: 0 0 4px 0; font-size: 16px; } @@ -1439,65 +1436,69 @@ a.subdued { color: #444444; background-color: white; border-color: #dddddd; } - .item.item-light.active, .ionic-pseudo .item.item-light:active { - background-color: #fafafa; - border-color: #cccccc; } .item.item-stable { color: #444444; background-color: #f8f8f8; border-color: #b2b2b2; } - .item.item-stable.active, .ionic-pseudo .item.item-stable:active { - background-color: #e5e5e5; - border-color: #a2a2a2; } .item.item-positive { color: white; background-color: #4a87ee; border-color: #145dd7; } - .item.item-positive.active, .ionic-pseudo .item.item-positive:active { - background-color: #145dd7; - border-color: #145dd7; } .item.item-calm { color: white; background-color: #43cee6; border-color: #1aaac3; } - .item.item-calm.active, .ionic-pseudo .item.item-calm:active { - background-color: #1aaac3; - border-color: #1aaac3; } .item.item-assertive { color: white; background-color: #ef4e3a; border-color: #cc2511; } - .item.item-assertive.active, .ionic-pseudo .item.item-assertive:active { - background-color: #cc2511; - border-color: #cc2511; } .item.item-balanced { color: white; background-color: #66cc33; border-color: #478f24; } - .item.item-balanced.active, .ionic-pseudo .item.item-balanced:active { - background-color: #478f24; - border-color: #478f24; } .item.item-energized { color: white; background-color: #f0b840; border-color: #d39511; } - .item.item-energized.active, .ionic-pseudo .item.item-energized:active { - background-color: #d39511; - border-color: #d39511; } .item.item-royal { color: white; background-color: #8a6de9; border-color: #552bdf; } - .item.item-royal.active, .ionic-pseudo .item.item-royal:active { - background-color: #552bdf; - border-color: #552bdf; } .item.item-dark { color: white; background-color: #444444; border-color: #111111; } - .item.item-dark.active, .ionic-pseudo .item.item-dark:active { - background-color: #262626; - border-color: black; } + +a.item.active, .ionic-pseudo a.item:active, button.item.active, .ionic-pseudo button.item:active { + background-color: #d9d9d9; + border-color: #cccccc; } +a.item.item-light.active, .ionic-pseudo a.item.item-light:active, button.item.item-light.active, .ionic-pseudo button.item.item-light:active { + background-color: #fafafa; + border-color: #cccccc; } +a.item.item-stable.active, .ionic-pseudo a.item.item-stable:active, button.item.item-stable.active, .ionic-pseudo button.item.item-stable:active { + background-color: #e5e5e5; + border-color: #a2a2a2; } +a.item.item-positive.active, .ionic-pseudo a.item.item-positive:active, button.item.item-positive.active, .ionic-pseudo button.item.item-positive:active { + background-color: #145dd7; + border-color: #145dd7; } +a.item.item-calm.active, .ionic-pseudo a.item.item-calm:active, button.item.item-calm.active, .ionic-pseudo button.item.item-calm:active { + background-color: #1aaac3; + border-color: #1aaac3; } +a.item.item-assertive.active, .ionic-pseudo a.item.item-assertive:active, button.item.item-assertive.active, .ionic-pseudo button.item.item-assertive:active { + background-color: #cc2511; + border-color: #cc2511; } +a.item.item-balanced.active, .ionic-pseudo a.item.item-balanced:active, button.item.item-balanced.active, .ionic-pseudo button.item.item-balanced:active { + background-color: #478f24; + border-color: #478f24; } +a.item.item-energized.active, .ionic-pseudo a.item.item-energized:active, button.item.item-energized.active, .ionic-pseudo button.item.item-energized:active { + background-color: #d39511; + border-color: #d39511; } +a.item.item-royal.active, .ionic-pseudo a.item.item-royal:active, button.item.item-royal.active, .ionic-pseudo button.item.item-royal:active { + background-color: #552bdf; + border-color: #552bdf; } +a.item.item-dark.active, .ionic-pseudo a.item.item-dark:active, button.item.item-dark.active, .ionic-pseudo button.item.item-dark:active { + background-color: #262626; + border-color: black; } .item, .item h1, diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index 1d85c360f2..680f21850c 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/dist/css/themes/ionic-ios7.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; /** * Nav controllers and header bar animations */ diff --git a/scss/_items.scss b/scss/_items.scss index 8f5b6b07a3..90d872dcf6 100644 --- a/scss/_items.scss +++ b/scss/_items.scss @@ -5,7 +5,7 @@ */ .item { - @include item-style($item-default-bg, $item-default-border, $item-default-text, $item-default-active-bg, $item-default-active-border); + @include item-style($item-default-bg, $item-default-border, $item-default-text); position: relative; @@ -52,7 +52,7 @@ margin-bottom: 0; } - // Align badges within list items + // Align badges within items .badge { float: right; } @@ -60,37 +60,71 @@ margin-right: 5px; } - // Different themes for list items + // Different themes for items &.item-light { - @include item-style($item-light-bg, $item-light-border, $item-light-text, $item-light-active-bg, $item-light-active-border); + @include item-style($item-light-bg, $item-light-border, $item-light-text); } &.item-stable { - @include item-style($item-stable-bg, $item-stable-border, $item-stable-text, $item-stable-active-bg, $item-stable-active-border); + @include item-style($item-stable-bg, $item-stable-border, $item-stable-text); } &.item-positive { - @include item-style($item-positive-bg, $item-positive-border, $item-positive-text, $item-positive-active-bg, $item-positive-active-border); + @include item-style($item-positive-bg, $item-positive-border, $item-positive-text); } &.item-calm { - @include item-style($item-calm-bg, $item-calm-border, $item-calm-text, $item-calm-active-bg, $item-calm-active-border); + @include item-style($item-calm-bg, $item-calm-border, $item-calm-text); } &.item-assertive { - @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text, $item-assertive-active-bg, $item-assertive-active-border); + @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text); } &.item-balanced { - @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text, $item-balanced-active-bg, $item-balanced-active-border); + @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text); } &.item-energized { - @include item-style($item-energized-bg, $item-energized-border, $item-energized-text, $item-energized-active-bg, $item-energized-active-border); + @include item-style($item-energized-bg, $item-energized-border, $item-energized-text); } &.item-royal { - @include item-style($item-royal-bg, $item-royal-border, $item-royal-text, $item-royal-active-bg, $item-royal-active-border); + @include item-style($item-royal-bg, $item-royal-border, $item-royal-text); } &.item-dark { - @include item-style($item-dark-bg, $item-dark-border, $item-dark-text, $item-dark-active-bg, $item-dark-active-border); + @include item-style($item-dark-bg, $item-dark-border, $item-dark-text); } } +// Link and Button Active States +a.item, button.item { + @include item-active-style($item-default-active-bg, $item-default-active-border); + + // Different active themes for and