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

list divider/header

Browse Source
This commit is contained in:
Adam Bradley
2013-10-21 09:56:58 -05:00
parent 31ea84bbf1
commit 9486da44d1
7 changed files with 117 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
dist/css/ionic-ios7.css vendored
View File

@@ -934,6 +934,7 @@ address {
margin-bottom: 20px;
padding-left: 0;
position: relative;
overflow: hidden;
color: #333333;
background-color: white;
border-color: #dddddd; }
@@ -963,13 +964,11 @@ address {
position: relative;
display: block;
margin-bottom: -1px;
margin-left: -1px;
margin-right: -1px;
border-top: 1px solid #dddddd;
z-index: 2;
background-color: white;
/* // Align icons to the right
> i:last-child {
float: right;
}*/ }
background-color: white; }
.list-item:last-child {
margin-bottom: 0; }
.list-item > .badge {
@@ -1231,6 +1230,16 @@ a.list-item {
border-radius: 0;
border: none; }
/**
* A list header.
*/
.list-header {
padding: 5px 15px;
margin-top: 20px;
background-color: transparent;
color: #222222;
font-weight: bold; }
/**
* A list divider.
*/
@@ -1240,13 +1249,15 @@ a.list-item {
color: #222222;
font-weight: bold; }
.list-item-heading {
margin-top: 0;
margin-bottom: 5px; }
.list-divider,
.list-header {
margin-left: -1px;
margin-right: -1px; }
.list-item-text {
margin-bottom: 0;
line-height: 1.3; }
.padding .list-divider,
.padding .list-heading {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd; }
/**
* List refreser elements
@@ -1410,26 +1421,8 @@ input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
input[type="color"] {
border: 0; }
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
outline: 0; }
input[type="radio"],
input[type="checkbox"] {
@@ -1458,14 +1451,6 @@ select[multiple],
select[size] {
height: auto; }
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999; }

59
dist/css/ionic-scoped.css vendored
View File

@@ -168,6 +168,9 @@
* The hidden right-side buttons that can be exposed under a list item
* with dragging.
*/
/**
* A list header.
*/
/**
* A list divider.
*/
@@ -1646,6 +1649,7 @@
margin-bottom: 20px;
padding-left: 0;
position: relative;
overflow: hidden;
color: #333333;
background-color: white;
border-color: #dddddd; }
@@ -1671,13 +1675,11 @@
position: relative;
display: block;
margin-bottom: -1px;
margin-left: -1px;
margin-right: -1px;
border-top: 1px solid #dddddd;
z-index: 2;
background-color: white;
/* // Align icons to the right
> i:last-child {
float: right;
}*/ }
background-color: white; }
.ionic .list-item:last-child {
margin-bottom: 0; }
.ionic .list-item > .badge {
@@ -1905,17 +1907,25 @@
height: 100%;
border-radius: 0;
border: none; }
.ionic .list-header {
padding: 5px 15px;
margin-top: 20px;
background-color: transparent;
color: #222222;
font-weight: bold; }
.ionic .list-divider {
padding: 5px 15px;
background-color: whitesmoke;
color: #222222;
font-weight: bold; }
.ionic .list-item-heading {
margin-top: 0;
margin-bottom: 5px; }
.ionic .list-item-text {
margin-bottom: 0;
line-height: 1.3; }
.ionic .list-divider,
.ionic .list-header {
margin-left: -1px;
margin-right: -1px; }
.ionic .padding .list-divider,
.ionic .padding .list-heading {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd; }
.ionic .list-refresher {
background-color: red;
height: 0;
@@ -2059,26 +2069,8 @@
.ionic input[type="url"],
.ionic input[type="search"],
.ionic input[type="tel"],
.ionic input[type="color"],
.ionic .uneditable-input {
.ionic input[type="color"] {
border: 0; }
.ionic textarea:focus,
.ionic input[type="text"]:focus,
.ionic input[type="password"]:focus,
.ionic input[type="datetime"]:focus,
.ionic input[type="datetime-local"]:focus,
.ionic input[type="date"]:focus,
.ionic input[type="month"]:focus,
.ionic input[type="time"]:focus,
.ionic input[type="week"]:focus,
.ionic input[type="number"]:focus,
.ionic input[type="email"]:focus,
.ionic input[type="url"]:focus,
.ionic input[type="search"]:focus,
.ionic input[type="tel"]:focus,
.ionic input[type="color"]:focus,
.ionic .uneditable-input:focus {
outline: 0; }
.ionic input[type="radio"],
.ionic input[type="checkbox"] {
margin: 4px 0 0;
@@ -2101,13 +2093,6 @@
.ionic select[multiple],
.ionic select[size] {
height: auto; }
.ionic select:focus,
.ionic input[type="file"]:focus,
.ionic input[type="radio"]:focus,
.ionic input[type="checkbox"]:focus {
outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ionic input:-moz-placeholder,
.ionic textarea:-moz-placeholder {
color: #999999; }

61
dist/css/ionic.css vendored
View File

@@ -2043,6 +2043,7 @@ address {
margin-bottom: 20px;
padding-left: 0;
position: relative;
overflow: hidden;
color: #333333;
background-color: white;
border-color: #dddddd; }
@@ -2072,13 +2073,11 @@ address {
position: relative;
display: block;
margin-bottom: -1px;
margin-left: -1px;
margin-right: -1px;
border-top: 1px solid #dddddd;
z-index: 2;
background-color: white;
/* // Align icons to the right
> i:last-child {
float: right;
}*/ }
background-color: white; }
.list-item:last-child {
margin-bottom: 0; }
.list-item > .badge {
@@ -2340,6 +2339,16 @@ a.list-item {
border-radius: 0;
border: none; }
/**
* A list header.
*/
.list-header {
padding: 5px 15px;
margin-top: 20px;
background-color: transparent;
color: #222222;
font-weight: bold; }
/**
* A list divider.
*/
@@ -2349,13 +2358,15 @@ a.list-item {
color: #222222;
font-weight: bold; }
.list-item-heading {
margin-top: 0;
margin-bottom: 5px; }
.list-divider,
.list-header {
margin-left: -1px;
margin-right: -1px; }
.list-item-text {
margin-bottom: 0;
line-height: 1.3; }
.padding .list-divider,
.padding .list-heading {
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd; }
/**
* List refreser elements
@@ -2519,26 +2530,8 @@ input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
input[type="color"] {
border: 0; }
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
outline: 0; }
input[type="radio"],
input[type="checkbox"] {
@@ -2567,14 +2560,6 @@ select[multiple],
select[size] {
height: auto; }
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999; }

16
scss/ionic/_form.scss
View File

@@ -183,14 +183,8 @@ input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
input[type="color"] {
border: 0;
// Focus state
&:focus {
outline: 0;
}
}
@@ -231,14 +225,6 @@ select[size] {
height: auto;
}
// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
@include tab-focus();
}
// Placeholder
// -------------------------------

47
scss/ionic/_listview.scss
View File

@@ -4,6 +4,7 @@
padding-left: 0; // reset padding because ul and ol
position: relative;
overflow: hidden;
@include list-style($list-default-background, $list-default-border, $gray-dark);
@@ -20,21 +21,19 @@
display: block;
// Place the border on the list items and negative margin up for better styling
margin-bottom: $list-item-border-width * -1;
margin-left: $list-item-border-width * -1;
margin-right: $list-item-border-width * -1;
border-top: $list-item-border-width solid $list-item-border-color;
// Make sure the borders and stuff don't get hidden
// by children
z-index: 2;
background-color: $list-default-background;
// Round the first and last items
&:first-child {
//@include border-top-radius($list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
//@include border-bottom-radius($list-group-border-radius);
}
// Align badges within list items
@@ -42,11 +41,6 @@
float: right;
}
/* // Align icons to the right
> i:last-child {
float: right;
}*/
> .badge + .badge {
margin-right: 5px;
}
@@ -277,24 +271,41 @@ a.list-item {
}
}
/**
* A list header.
*/
.list-header {
padding: $list-header-padding;
margin-top: $list-header-margin-top;
background-color: $list-header-bg;
color: $list-header-color;
font-weight: bold;
}
/**
* A list divider.
*/
.list-divider {
padding: 5px 15px;
padding: $list-divider-padding;
background-color: $list-divider-bg;
color: $list-divider-color;
font-weight: bold;
}
.list-item-heading {
margin-top: 0;
margin-bottom: 5px;
// inset so they layout the same as list items
.list-divider,
.list-header {
margin-left: $list-item-border-width * -1;
margin-right: $list-item-border-width * -1;
}
.list-item-text {
margin-bottom: 0;
line-height: 1.3;
// make sure these have left/right borders when inset
.padding .list-divider,
.padding .list-heading {
border-left: $list-item-border-width solid $list-item-border-color;
border-right: $list-item-border-width solid $list-item-border-color;
}
/**

7
scss/ionic/_variables.scss
View File

@@ -337,8 +337,15 @@ $tabs-dark-border-color: $button-dark-border;
// Lists
// -------------------------------
$list-header-bg: transparent;
$list-header-color: #222;
$list-header-padding: 5px 15px;
$list-header-margin-top: 20px !default;
$list-divider-bg: #f5f5f5;
$list-divider-color: #222;
$list-divider-padding: 5px 15px;
$list-item-border-width: 1px !default;
$list-item-border-color: #ddd;
$list-item-padding: 15px !default;

12
test/lists.html
View File

@@ -18,6 +18,10 @@
<div class="list">
<div class="list-header">
List Header
</div>
<a href="#" class="list-item">
<div class="list-item-content">
Madison, WI
@@ -30,6 +34,10 @@
</div>
</a>
<div class="list-divider">
List Divider
</div>
<a href="#" class="list-item">
<div class="list-item-content slide-left">
Settings
@@ -146,6 +154,10 @@
</div>
</a>
<div class="list-divider">
List Divider
</div>
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content slide-left slide-right">
<i class="icon-ios7-cog gray fill-icon"></i>