mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
.item.active states only for <a> and <button>
This commit is contained in:
Adam Bradley
61
dist/css/ionic.css
vendored
61
dist/css/ionic.css
vendored
@@ -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,
|
||||
|
||||
1
dist/css/themes/ionic-ios7.css
vendored
1
dist/css/themes/ionic-ios7.css
vendored
@@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
/**
|
||||
* Nav controllers and header bar animations
|
||||
*/
|
||||
|
||||
@@ -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 <a> and <button> items
|
||||
&.item-light {
|
||||
@include item-active-style($item-light-active-bg, $item-light-active-border);
|
||||
}
|
||||
&.item-stable {
|
||||
@include item-active-style($item-stable-active-bg, $item-stable-active-border);
|
||||
}
|
||||
&.item-positive {
|
||||
@include item-active-style($item-positive-active-bg, $item-positive-active-border);
|
||||
}
|
||||
&.item-calm {
|
||||
@include item-active-style($item-calm-active-bg, $item-calm-active-border);
|
||||
}
|
||||
&.item-assertive {
|
||||
@include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
|
||||
}
|
||||
&.item-balanced {
|
||||
@include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
|
||||
}
|
||||
&.item-energized {
|
||||
@include item-active-style($item-energized-active-bg, $item-energized-active-border);
|
||||
}
|
||||
&.item-royal {
|
||||
@include item-active-style($item-royal-active-bg, $item-royal-active-border);
|
||||
}
|
||||
&.item-dark {
|
||||
@include item-active-style($item-dark-active-bg, $item-dark-active-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle text overflow
|
||||
.item,
|
||||
.item h1,
|
||||
|
||||
@@ -83,11 +83,13 @@
|
||||
// Item Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin item-style($bg-color, $border-color, $color, $active-bg-color, $active-border-color) {
|
||||
@mixin item-style($bg-color, $border-color, $color) {
|
||||
color: $color;
|
||||
background-color: $bg-color;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
@mixin item-active-style($active-bg-color, $active-border-color) {
|
||||
&.active,
|
||||
.ionic-pseudo &:active {
|
||||
background-color: $active-bg-color;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<h1 class="title">Cards</h1>
|
||||
</header>
|
||||
|
||||
<main class="content has-header overflow-scroll">
|
||||
<main class="content has-header overflow-scroll ionic-pseudo">
|
||||
|
||||
<div class="card">
|
||||
<div class="item item-text-wrap">
|
||||
|
||||
Reference in New Issue
Block a user