Skip to content

Commit 9ff1b96

Browse files
perrygovierperrygovier
committed
fix(listItem): apply color styles to complex list items
1 parent b2585f1 commit 9ff1b96

File tree

3 files changed

+142
-0
lines changed

3 files changed

+142
-0
lines changed

Diff for: ‎scss/_items.scss

+60
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,66 @@ a.item-content {
236236
white-space: normal;
237237
}
238238

239+
// Link and Button Active States
240+
241+
.item-complex{
242+
// Stylized items
243+
&.item-light > .item-content{
244+
@include item-style($item-light-bg, $item-light-border, $item-light-text);
245+
&.active, &:active {
246+
@include item-active-style($item-light-active-bg, $item-light-active-border);
247+
}
248+
}
249+
&.item-stable > .item-content{
250+
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
251+
&.active, &:active {
252+
@include item-active-style($item-stable-active-bg, $item-stable-active-border);
253+
}
254+
}
255+
&.item-positive > .item-content{
256+
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
257+
&.active, &:active {
258+
@include item-active-style($item-positive-active-bg, $item-positive-active-border);
259+
}
260+
}
261+
&.item-calm > .item-content{
262+
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
263+
&.active, &:active {
264+
@include item-active-style($item-calm-active-bg, $item-calm-active-border);
265+
}
266+
}
267+
&.item-assertive > .item-content{
268+
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
269+
&.active, &:active {
270+
@include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
271+
}
272+
}
273+
&.item-balanced > .item-content{
274+
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
275+
&.active, &:active {
276+
@include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
277+
}
278+
}
279+
&.item-energized > .item-content{
280+
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
281+
&.active, &:active {
282+
@include item-active-style($item-energized-active-bg, $item-energized-active-border);
283+
}
284+
}
285+
&.item-royal > .item-content{
286+
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
287+
&.active, &:active {
288+
@include item-active-style($item-royal-active-bg, $item-royal-active-border);
289+
}
290+
}
291+
&.item-dark > .item-content{
292+
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
293+
&.active, &:active {
294+
@include item-active-style($item-dark-active-bg, $item-dark-active-border);
295+
}
296+
}
297+
}
298+
239299

240300
/**
241301
* Item Icons

Diff for: ‎test/css/lists-colors-complex.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html ng-app="ionic">
3+
<head>
4+
<script src="../../dist/js/ionic.bundle.js"></script>
5+
<meta charset="utf-8">
6+
<title>Lists</title>
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
8+
<link href="../../dist/css/ionic.css" rel="stylesheet">
9+
<style>
10+
body {
11+
position: absolute;;
12+
}
13+
</style>
14+
</head>
15+
<body class="ionic-pseudo">
16+
17+
<header class="bar bar-header bar-dark">
18+
<h1 class="title">Lists: Colors Complex</h1>
19+
</header>
20+
21+
<div class="content has-header">
22+
23+
<div class="list">
24+
<div class="item item-complex">
25+
<a class="item-content" ng-href="#" target="_self" href="#">Default </a>
26+
</div>
27+
<div class="item-light item item-complex">
28+
<a class="item-content" ng-href="#" target="_self" href="#">item-light</a>
29+
</div>
30+
<div class="item-stable item item-complex">
31+
<a class="item-content" ng-href="#" target="_self" href="#">item-stable</a>
32+
</div>
33+
<div class="item-positive item item-complex">
34+
<a class="item-content" ng-href="#" target="_self" href="#">item-positive</a>
35+
</div>
36+
<div class="item-assertive item item-complex">
37+
<a class="item-content" ng-href="#" target="_self" href="#">item-assertive</a>
38+
</div>
39+
<div class="item-balanced item item-complex">
40+
<a class="item-content" ng-href="#" target="_self" href="#">item-balanced</a>
41+
</div>
42+
<div class="item-energized item item-complex">
43+
<a class="item-content" ng-href="#" target="_self" href="#">item-energized</a>
44+
</div>
45+
<div class="item-royal item item-complex">
46+
<a class="item-content" ng-href="#" target="_self" href="#">item-royal</a>
47+
</div>
48+
<div class="item-dark item item-complex">
49+
<a class="item-content" ng-href="#" target="_self" href="#">item-dark</a>
50+
</div>
51+
<div class="item item-complex">
52+
<a class="item-content active" ng-href="#" target="_self" href="#">Default Active</a>
53+
</div>
54+
<div class="item-light item item-complex">
55+
<a class="item-content active" ng-href="#" target="_self" href="#">item-light Active</a>
56+
</div>
57+
<div class="item-stable item item-complex">
58+
<a class="item-content active" ng-href="#" target="_self" href="#">item-stable Active</a>
59+
</div>
60+
<div class="item-positive item item-complex">
61+
<a class="item-content active" ng-href="#" target="_self" href="#">item-positive Active</a>
62+
</div>
63+
<div class="item-assertive item item-complex">
64+
<a class="item-content active" ng-href="#" target="_self" href="#">item-assertive Active</a>
65+
</div>
66+
<div class="item-balanced item item-complex">
67+
<a class="item-content active" ng-href="#" target="_self" href="#">item-balanced Active</a>
68+
</div>
69+
<div class="item-energized item item-complex">
70+
<a class="item-content active" ng-href="#" target="_self" href="#">item-energized Active</a>
71+
</div>
72+
<div class="item-royal item item-complex">
73+
<a class="item-content active" ng-href="#" target="_self" href="#">item-royal Active</a>
74+
</div>
75+
<div class="item-dark item item-complex">
76+
<a class="item-content active" ng-href="#" target="_self" href="#">item-dark active Active</a>
77+
</div>
78+
</div>
79+
80+
</body>
81+
</html>

Diff for: ‎test/css/test.scenario.js

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ describe('css', function() {
3838
"lists-avatar",
3939
"lists-buttons",
4040
"lists-colors",
41+
"lists-colors-complex",
4142
"lists-icons",
4243
"lists-text",
4344
"lists-thumbnails",

0 commit comments

Comments
 (0)