mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Default style for list items
This commit is contained in:
Max Lynch
15
dist/css/ionic.css
vendored
15
dist/css/ionic.css
vendored
@ -3190,14 +3190,8 @@ a.subdued {
|
||||
border-color: #dddddd;
|
||||
background-color: white;
|
||||
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; }
|
||||
.item.active {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #444444; }
|
||||
.item.active .item-content {
|
||||
background-color: white;
|
||||
color: #444444; }
|
||||
.item h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
@ -3229,6 +3223,13 @@ a.subdued {
|
||||
z-index: 2; }
|
||||
.item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
|
||||
color: inherit; }
|
||||
.item.active {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #444444; }
|
||||
.item.active .item-content {
|
||||
background-color: white;
|
||||
color: #444444; }
|
||||
|
||||
.item-light.active {
|
||||
color: white;
|
||||
|
||||
14
dist/js/ionic-angular.js
vendored
14
dist/js/ionic-angular.js
vendored
@ -514,12 +514,16 @@ angular.module('ionic.ui.checkbox', [])
|
||||
|
||||
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() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div class="pane" ng-transclude></div>'
|
||||
compile: function(element, attr) {
|
||||
element.addClass('pane');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -701,9 +705,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
10
js/ext/angular/src/directive/ionicContent.js
vendored
10
js/ext/angular/src/directive/ionicContent.js
vendored
@ -3,12 +3,16 @@
|
||||
|
||||
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() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div class="pane" ng-transclude></div>'
|
||||
compile: function(element, attr) {
|
||||
element.addClass('pane');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
4
js/ext/angular/src/directive/ionicList.js
vendored
4
js/ext/angular/src/directive/ionicList.js
vendored
@ -42,9 +42,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
@ -11,22 +11,44 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<content has-header="true">
|
||||
<div ng-controller="ModalCtrl">
|
||||
<button class="button button-primary" ng-click="openModal()">Open</button>
|
||||
</div>
|
||||
</content>
|
||||
<pane ng-controller="ModalCtrl">
|
||||
<header-bar type="bar-positive">
|
||||
<h1 class="title">Contacts</h1>
|
||||
<button class="button button-icon" ng-click="openModal()"><i class="icon ion-compose"></i></button>
|
||||
</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">
|
||||
<div class="modal">
|
||||
<header class="bar bar-header bar-secondary">
|
||||
<h1 class="title">Modal</h1>
|
||||
<header class="bar bar-header bar-positive">
|
||||
<h1 class="title">New Contact</h1>
|
||||
<button class="button button-clear button-primary" ng-click="closeModal()">Cancel</button>
|
||||
</header>
|
||||
<content>
|
||||
Realllllyyy long content
|
||||
<input type="text">
|
||||
<div style="height: 2000px; background-color: red;"></div>
|
||||
<content has-header="true">
|
||||
<div class="padding">
|
||||
<div class="list">
|
||||
<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>
|
||||
</div>
|
||||
</script>
|
||||
@ -37,6 +59,17 @@
|
||||
angular.module('modalTest', ['ionic', 'ngAnimate'])
|
||||
|
||||
.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) {
|
||||
$scope.modal = modal;
|
||||
}, {
|
||||
@ -44,12 +77,6 @@
|
||||
animation: 'slide-in-up'
|
||||
});
|
||||
|
||||
$scope.openModal = function() {
|
||||
$scope.modal.show();
|
||||
};
|
||||
$scope.closeModal = function() {
|
||||
$scope.modal.hide();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
*/
|
||||
|
||||
.item {
|
||||
@include item-style-active($light, $dark, $dark);
|
||||
position: relative;
|
||||
|
||||
z-index: 2; // Make sure the borders and stuff don't get hidden by children
|
||||
@ -20,6 +19,8 @@
|
||||
background-color: $list-bg;
|
||||
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;
|
||||
|
||||
h2 {
|
||||
@ -72,6 +73,8 @@
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@include item-style-active($light, $dark, $dark);
|
||||
}
|
||||
|
||||
// Different themes for list items
|
||||
|
||||
@ -36,6 +36,7 @@ $headings-line-height: 1.1 !default;
|
||||
|
||||
$base-background-color: #fff;
|
||||
$base-color: #000;
|
||||
$light-color: #666666;
|
||||
|
||||
$link-color: $positive !default;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<h1 class="title">Text Inputs</h1>
|
||||
</header>
|
||||
|
||||
<div class="content has-header">
|
||||
<div class="content overflow-scroll has-header">
|
||||
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="list">
|
||||
|
||||
Reference in New Issue
Block a user