javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(listItem): apply color styles to complex list items

Browse Source
This commit is contained in:
Perry Govier
2014-06-18 12:04:58 -05:00
parent b2585f19ca
commit 9ff1b965bf
3 changed files with 142 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
scss/_items.scss
View File

@@ -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

81
test/css/lists-colors-complex.html Normal file
View File

@@ -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
test/css/test.scenario.js
View File

@@ -38,6 +38,7 @@ describe('css', function() {
"lists-avatar",
"lists-buttons",
"lists-colors",
"lists-colors-complex",
"lists-icons",
"lists-text",
"lists-thumbnails",