Skip to content

Commit

Permalink
fix(listItem): apply color styles to complex list items
Browse files Browse the repository at this point in the history
  • Loading branch information
@perrygovier
perrygovier committed Jun 18, 2014
1 parent b2585f1 commit 9ff1b96
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 0 deletions.
60 changes: 60 additions & 0 deletions scss/_items.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,66 @@ a.item-content {
white-space: normal;
}

// Link and Button Active States

.item-complex{
// Stylized items
&.item-light > .item-content{
@include item-style($item-light-bg, $item-light-border, $item-light-text);
&.active, &:active {
@include item-active-style($item-light-active-bg, $item-light-active-border);
}
}
&.item-stable > .item-content{
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
&.active, &:active {
@include item-active-style($item-stable-active-bg, $item-stable-active-border);
}
}
&.item-positive > .item-content{
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
&.active, &:active {
@include item-active-style($item-positive-active-bg, $item-positive-active-border);
}
}
&.item-calm > .item-content{
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
&.active, &:active {
@include item-active-style($item-calm-active-bg, $item-calm-active-border);
}
}
&.item-assertive > .item-content{
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
&.active, &:active {
@include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
}
}
&.item-balanced > .item-content{
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
&.active, &:active {
@include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
}
}
&.item-energized > .item-content{
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
&.active, &:active {
@include item-active-style($item-energized-active-bg, $item-energized-active-border);
}
}
&.item-royal > .item-content{
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
&.active, &:active {
@include item-active-style($item-royal-active-bg, $item-royal-active-border);
}
}
&.item-dark > .item-content{
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
&.active, &:active {
@include item-active-style($item-dark-active-bg, $item-dark-active-border);
}
}
}


/**
* Item Icons
Expand Down
81 changes: 81 additions & 0 deletions test/css/lists-colors-complex.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html ng-app="ionic">
<head>
<script src="../../dist/js/ionic.bundle.js"></script>
<meta charset="utf-8">
<title>Lists</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../../dist/css/ionic.css" rel="stylesheet">
<style>
body {
position: absolute;;
}
</style>
</head>
<body class="ionic-pseudo">

<header class="bar bar-header bar-dark">
<h1 class="title">Lists: Colors Complex</h1>
</header>

<div class="content has-header">

<div class="list">
<div class="item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">Default </a>
</div>
<div class="item-light item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">item-light</a>
</div>
<div class="item-stable item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">item-stable</a>
</div>
<div class="item-positive item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">item-positive</a>
</div>
<div class="item-assertive item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">item-assertive</a>
</div>
<div class="item-balanced item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">item-balanced</a>
</div>
<div class="item-energized item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">item-energized</a>
</div>
<div class="item-royal item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">item-royal</a>
</div>
<div class="item-dark item item-complex">
<a class="item-content" ng-href="#" target="_self" href="#">item-dark</a>
</div>
<div class="item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">Default Active</a>
</div>
<div class="item-light item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">item-light Active</a>
</div>
<div class="item-stable item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">item-stable Active</a>
</div>
<div class="item-positive item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">item-positive Active</a>
</div>
<div class="item-assertive item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">item-assertive Active</a>
</div>
<div class="item-balanced item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">item-balanced Active</a>
</div>
<div class="item-energized item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">item-energized Active</a>
</div>
<div class="item-royal item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">item-royal Active</a>
</div>
<div class="item-dark item item-complex">
<a class="item-content active" ng-href="#" target="_self" href="#">item-dark active Active</a>
</div>
</div>

</body>
</html>
1 change: 1 addition & 0 deletions test/css/test.scenario.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ describe('css', function() {
"lists-avatar",
"lists-buttons",
"lists-colors",
"lists-colors-complex",
"lists-icons",
"lists-text",
"lists-thumbnails",
Expand Down

0 comments on commit 9ff1b96

Please sign in to comment.