Skip to content

Commit c358a9c

Browse files
adamdbradleyadamdbradley
committed
.item.active states only for <a> and <button>
1 parent 2f035c2 commit c358a9c

File tree

5 files changed

+81
-45
lines changed

5 files changed

+81
-45
lines changed

‎dist/css/ionic.css‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1405,9 +1405,6 @@ a.subdued {
14051405
border-style: solid;
14061406
font-size: 16px;
14071407
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
1408-
.item.active, .ionic-pseudo .item:active {
1409-
background-color: #d9d9d9;
1410-
border-color: #cccccc; }
14111408
.item h2 {
14121409
margin: 0 0 4px 0;
14131410
font-size: 16px; }
@@ -1439,65 +1436,69 @@ a.subdued {
14391436
color: #444444;
14401437
background-color: white;
14411438
border-color: #dddddd; }
1442-
.item.item-light.active, .ionic-pseudo .item.item-light:active {
1443-
background-color: #fafafa;
1444-
border-color: #cccccc; }
14451439
.item.item-stable {
14461440
color: #444444;
14471441
background-color: #f8f8f8;
14481442
border-color: #b2b2b2; }
1449-
.item.item-stable.active, .ionic-pseudo .item.item-stable:active {
1450-
background-color: #e5e5e5;
1451-
border-color: #a2a2a2; }
14521443
.item.item-positive {
14531444
color: white;
14541445
background-color: #4a87ee;
14551446
border-color: #145dd7; }
1456-
.item.item-positive.active, .ionic-pseudo .item.item-positive:active {
1457-
background-color: #145dd7;
1458-
border-color: #145dd7; }
14591447
.item.item-calm {
14601448
color: white;
14611449
background-color: #43cee6;
14621450
border-color: #1aaac3; }
1463-
.item.item-calm.active, .ionic-pseudo .item.item-calm:active {
1464-
background-color: #1aaac3;
1465-
border-color: #1aaac3; }
14661451
.item.item-assertive {
14671452
color: white;
14681453
background-color: #ef4e3a;
14691454
border-color: #cc2511; }
1470-
.item.item-assertive.active, .ionic-pseudo .item.item-assertive:active {
1471-
background-color: #cc2511;
1472-
border-color: #cc2511; }
14731455
.item.item-balanced {
14741456
color: white;
14751457
background-color: #66cc33;
14761458
border-color: #478f24; }
1477-
.item.item-balanced.active, .ionic-pseudo .item.item-balanced:active {
1478-
background-color: #478f24;
1479-
border-color: #478f24; }
14801459
.item.item-energized {
14811460
color: white;
14821461
background-color: #f0b840;
14831462
border-color: #d39511; }
1484-
.item.item-energized.active, .ionic-pseudo .item.item-energized:active {
1485-
background-color: #d39511;
1486-
border-color: #d39511; }
14871463
.item.item-royal {
14881464
color: white;
14891465
background-color: #8a6de9;
14901466
border-color: #552bdf; }
1491-
.item.item-royal.active, .ionic-pseudo .item.item-royal:active {
1492-
background-color: #552bdf;
1493-
border-color: #552bdf; }
14941467
.item.item-dark {
14951468
color: white;
14961469
background-color: #444444;
14971470
border-color: #111111; }
1498-
.item.item-dark.active, .ionic-pseudo .item.item-dark:active {
1499-
background-color: #262626;
1500-
border-color: black; }
1471+
1472+
a.item.active, .ionic-pseudo a.item:active, button.item.active, .ionic-pseudo button.item:active {
1473+
background-color: #d9d9d9;
1474+
border-color: #cccccc; }
1475+
a.item.item-light.active, .ionic-pseudo a.item.item-light:active, button.item.item-light.active, .ionic-pseudo button.item.item-light:active {
1476+
background-color: #fafafa;
1477+
border-color: #cccccc; }
1478+
a.item.item-stable.active, .ionic-pseudo a.item.item-stable:active, button.item.item-stable.active, .ionic-pseudo button.item.item-stable:active {
1479+
background-color: #e5e5e5;
1480+
border-color: #a2a2a2; }
1481+
a.item.item-positive.active, .ionic-pseudo a.item.item-positive:active, button.item.item-positive.active, .ionic-pseudo button.item.item-positive:active {
1482+
background-color: #145dd7;
1483+
border-color: #145dd7; }
1484+
a.item.item-calm.active, .ionic-pseudo a.item.item-calm:active, button.item.item-calm.active, .ionic-pseudo button.item.item-calm:active {
1485+
background-color: #1aaac3;
1486+
border-color: #1aaac3; }
1487+
a.item.item-assertive.active, .ionic-pseudo a.item.item-assertive:active, button.item.item-assertive.active, .ionic-pseudo button.item.item-assertive:active {
1488+
background-color: #cc2511;
1489+
border-color: #cc2511; }
1490+
a.item.item-balanced.active, .ionic-pseudo a.item.item-balanced:active, button.item.item-balanced.active, .ionic-pseudo button.item.item-balanced:active {
1491+
background-color: #478f24;
1492+
border-color: #478f24; }
1493+
a.item.item-energized.active, .ionic-pseudo a.item.item-energized:active, button.item.item-energized.active, .ionic-pseudo button.item.item-energized:active {
1494+
background-color: #d39511;
1495+
border-color: #d39511; }
1496+
a.item.item-royal.active, .ionic-pseudo a.item.item-royal:active, button.item.item-royal.active, .ionic-pseudo button.item.item-royal:active {
1497+
background-color: #552bdf;
1498+
border-color: #552bdf; }
1499+
a.item.item-dark.active, .ionic-pseudo a.item.item-dark:active, button.item.item-dark.active, .ionic-pseudo button.item.item-dark:active {
1500+
background-color: #262626;
1501+
border-color: black; }
15011502

15021503
.item,
15031504
.item h1,

‎dist/css/themes/ionic-ios7.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@charset "UTF-8";
21
/**
32
* Nav controllers and header bar animations
43
*/

‎scss/_items.scss‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66

77
.item {
8-
@include item-style($item-default-bg, $item-default-border, $item-default-text, $item-default-active-bg, $item-default-active-border);
8+
@include item-style($item-default-bg, $item-default-border, $item-default-text);
99

1010
position: relative;
1111

@@ -52,45 +52,79 @@
5252
margin-bottom: 0;
5353
}
5454

55-
// Align badges within list items
55+
// Align badges within items
5656
.badge {
5757
float: right;
5858
}
5959
.badge + .badge {
6060
margin-right: 5px;
6161
}
6262

63-
// Different themes for list items
63+
// Different themes for items
6464
&.item-light {
65-
@include item-style($item-light-bg, $item-light-border, $item-light-text, $item-light-active-bg, $item-light-active-border);
65+
@include item-style($item-light-bg, $item-light-border, $item-light-text);
6666
}
6767
&.item-stable {
68-
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text, $item-stable-active-bg, $item-stable-active-border);
68+
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
6969
}
7070
&.item-positive {
71-
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text, $item-positive-active-bg, $item-positive-active-border);
71+
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
7272
}
7373
&.item-calm {
74-
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text, $item-calm-active-bg, $item-calm-active-border);
74+
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
7575
}
7676
&.item-assertive {
77-
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text, $item-assertive-active-bg, $item-assertive-active-border);
77+
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
7878
}
7979
&.item-balanced {
80-
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text, $item-balanced-active-bg, $item-balanced-active-border);
80+
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
8181
}
8282
&.item-energized {
83-
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text, $item-energized-active-bg, $item-energized-active-border);
83+
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
8484
}
8585
&.item-royal {
86-
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text, $item-royal-active-bg, $item-royal-active-border);
86+
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
8787
}
8888
&.item-dark {
89-
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text, $item-dark-active-bg, $item-dark-active-border);
89+
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
9090
}
9191

9292
}
9393

94+
// Link and Button Active States
95+
a.item, button.item {
96+
@include item-active-style($item-default-active-bg, $item-default-active-border);
97+
98+
// Different active themes for <a> and <button> items
99+
&.item-light {
100+
@include item-active-style($item-light-active-bg, $item-light-active-border);
101+
}
102+
&.item-stable {
103+
@include item-active-style($item-stable-active-bg, $item-stable-active-border);
104+
}
105+
&.item-positive {
106+
@include item-active-style($item-positive-active-bg, $item-positive-active-border);
107+
}
108+
&.item-calm {
109+
@include item-active-style($item-calm-active-bg, $item-calm-active-border);
110+
}
111+
&.item-assertive {
112+
@include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
113+
}
114+
&.item-balanced {
115+
@include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
116+
}
117+
&.item-energized {
118+
@include item-active-style($item-energized-active-bg, $item-energized-active-border);
119+
}
120+
&.item-royal {
121+
@include item-active-style($item-royal-active-bg, $item-royal-active-border);
122+
}
123+
&.item-dark {
124+
@include item-active-style($item-dark-active-bg, $item-dark-active-border);
125+
}
126+
}
127+
94128
// Handle text overflow
95129
.item,
96130
.item h1,

‎scss/_mixins.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,13 @@
8383
// Item Mixins
8484
// --------------------------------------------------
8585

86-
@mixin item-style($bg-color, $border-color, $color, $active-bg-color, $active-border-color) {
86+
@mixin item-style($bg-color, $border-color, $color) {
8787
color: $color;
8888
background-color: $bg-color;
8989
border-color: $border-color;
90+
}
9091

92+
@mixin item-active-style($active-bg-color, $active-border-color) {
9193
&.active,
9294
.ionic-pseudo &:active {
9395
background-color: $active-bg-color;

‎test/cards.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<h1 class="title">Cards</h1>
1616
</header>
1717

18-
<main class="content has-header overflow-scroll">
18+
<main class="content has-header overflow-scroll ionic-pseudo">
1919

2020
<div class="card">
2121
<div class="item item-text-wrap">

0 commit comments

Comments
 (0)