javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Default style for list items

Browse Source
This commit is contained in:
Max Lynch
2013-11-13 15:01:09 -06:00
parent 2174571580
commit 3400cc0276
8 changed files with 76 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
dist/css/ionic.css vendored
View File

@ -3190,14 +3190,8 @@ a.subdued‎ {
border-color: #dddddd; border-color: #dddddd;
background-color: white; background-color: white;
font-size: 16px; font-size: 16px;
color: #666666;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.item.active {
color: #444444;
background-color: white;
border-color: #444444; }
.item.active .item-content {
background-color: white;
color: #444444; }
.item h2 { .item h2 {
margin: 0 0 4px 0; margin: 0 0 4px 0;
font-size: 16px; } font-size: 16px; }
@ -3229,6 +3223,13 @@ a.subdued‎ {
z-index: 2; } z-index: 2; }
.item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading { .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
color: inherit; } color: inherit; }
.item.active {
color: #444444;
background-color: white;
border-color: #444444; }
.item.active .item-content {
background-color: white;
color: #444444; }
.item-light.active { .item-light.active {
color: white; color: white;

14
dist/js/ionic-angular.js vendored
View File

@ -514,12 +514,16 @@ angular.module('ionic.ui.checkbox', [])
angular.module('ionic.ui.content', []) angular.module('ionic.ui.content', [])
/**
* Panel is a simple 100% width and height, fixed panel. It's meant for content to be
* added to it, or animated around.
*/
.directive('pane', function() { .directive('pane', function() {
return { return {
restrict: 'E', restrict: 'E',
replace: true, compile: function(element, attr) {
transclude: true, element.addClass('pane');
template: '<div class="pane" ng-transclude></div>' }
} }
}) })
@ -701,9 +705,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
} }
// Add the list item type class // Add the list item type class
$element.addClass($attr.type || 'item-slider'); $element.addClass($attr.type || 'item-complex');
if($attr.type !== 'item-slider') { if($attr.type !== 'item-complex') {
$scope.canSwipe = false; $scope.canSwipe = false;
} }

10
js/ext/angular/src/directive/ionicContent.js vendored
View File

@ -3,12 +3,16 @@
angular.module('ionic.ui.content', []) angular.module('ionic.ui.content', [])
/**
* Panel is a simple 100% width and height, fixed panel. It's meant for content to be
* added to it, or animated around.
*/
.directive('pane', function() { .directive('pane', function() {
return { return {
restrict: 'E', restrict: 'E',
replace: true, compile: function(element, attr) {
transclude: true, element.addClass('pane');
template: '<div class="pane" ng-transclude></div>' }
} }
}) })

4
js/ext/angular/src/directive/ionicList.js vendored
View File

@ -42,9 +42,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
} }
// Add the list item type class // Add the list item type class
$element.addClass($attr.type || 'item-slider'); $element.addClass($attr.type || 'item-complex');
if($attr.type !== 'item-slider') { if($attr.type !== 'item-complex') {
$scope.canSwipe = false; $scope.canSwipe = false;
} }

61
js/ext/angular/test/modal.html
View File

@ -11,22 +11,44 @@
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
</head> </head>
<body> <body>
<content has-header="true"> <pane ng-controller="ModalCtrl">
<div ng-controller="ModalCtrl"> <header-bar type="bar-positive">
<button class="button button-primary" ng-click="openModal()">Open</button> <h1 class="title">Contacts</h1>
</div> <button class="button button-icon" ng-click="openModal()"><i class="icon ion-compose"></i></button>
</content> </header-bar>
<content has-header="true">
<list>
<item ng-repeat="contact in contacts">
{{contact.name}}
</item>
</list>
</content>
</pane>
<script id="modal.html" type="text/ng-template"> <script id="modal.html" type="text/ng-template">
<div class="modal"> <div class="modal">
<header class="bar bar-header bar-secondary"> <header class="bar bar-header bar-positive">
<h1 class="title">Modal</h1> <h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="closeModal()">Cancel</button> <button class="button button-clear button-primary" ng-click="closeModal()">Cancel</button>
</header> </header>
<content> <content has-header="true">
Realllllyyy long content <div class="padding">
<input type="text"> <div class="list">
<div style="height: 2000px; background-color: red;"></div> <label class="item item-input">
<span class="input-label">First Name</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" placeholder="">
</label>
<button class="button button-full button-positive" ng-click="closeModal()">Create</button>
</div>
</div>
</content> </content>
</div> </div>
</script> </script>
@ -37,6 +59,17 @@
angular.module('modalTest', ['ionic', 'ngAnimate']) angular.module('modalTest', ['ionic', 'ngAnimate'])
.controller('ModalCtrl', function($scope, Modal) { .controller('ModalCtrl', function($scope, Modal) {
$scope.contacts = [
{ name: 'Gordon Freeman' },
{ name: 'Barney Calhoun' },
{ name: 'Lamar the Headcrab' },
];
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
Modal.fromTemplateUrl('modal.html', function(modal) { Modal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal; $scope.modal = modal;
}, { }, {
@ -44,12 +77,6 @@
animation: 'slide-in-up' animation: 'slide-in-up'
}); });
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
}); });
</script> </script>
</body> </body>

5
scss/_items.scss
View File

@ -5,7 +5,6 @@
*/ */
.item { .item {
@include item-style-active($light, $dark, $dark);
position: relative; position: relative;
z-index: 2; // Make sure the borders and stuff don't get hidden by children z-index: 2; // Make sure the borders and stuff don't get hidden by children
@ -20,6 +19,8 @@
background-color: $list-bg; background-color: $list-bg;
font-size: $list-font-size; font-size: $list-font-size;
color: $light-color;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
h2 { h2 {
@ -72,6 +73,8 @@
color: inherit; color: inherit;
} }
} }
@include item-style-active($light, $dark, $dark);
} }
// Different themes for list items // Different themes for list items

1
scss/_variables.scss
View File

@ -36,6 +36,7 @@ $headings-line-height: 1.1 !default;
$base-background-color: #fff; $base-background-color: #fff;
$base-color: #000; $base-color: #000;
$light-color: #666666;
$link-color: $positive !default; $link-color: $positive !default;
$link-hover-color: darken($link-color, 15%) !default; $link-hover-color: darken($link-color, 15%) !default;

2
test/input-text.html
View File

@ -15,7 +15,7 @@
<h1 class="title">Text Inputs</h1> <h1 class="title">Text Inputs</h1>
</header> </header>
<div class="content has-header"> <div class="content overflow-scroll has-header">
<h3>Default Text Input, Not Inset, No Content Padding</h3> <h3>Default Text Input, Not Inset, No Content Padding</h3>
<div class="list"> <div class="list">