javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

border items / .item required with .item-divider

Browse Source
This commit is contained in:
Adam Bradley
2013-11-12 10:36:29 -06:00
parent 656499d755
commit 8a9d577fda
8 changed files with 52 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
dist/css/ionic.css vendored
View File

@ -3250,11 +3250,19 @@ a.subdued‎ {
display: block; display: block;
margin: -1px; margin: -1px;
padding: 15px; padding: 15px;
border: none; border-width: 1px;
border-style: solid;
border-color: #dddddd;
background-color: white; background-color: white;
box-shadow: inset 0 0 1px #666666;
font-size: 16px; font-size: 16px;
-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: #888888;
background-color: white;
border-color: #888888; }
.item.active .item-content {
background-color: white;
color: #888888; }
.item h2 { .item h2 {
margin: 0 0 4px 0; margin: 0 0 4px 0;
font-size: 16px; } font-size: 16px; }
@ -3286,13 +3294,6 @@ 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: #888888;
background-color: white;
border-color: #888888; }
.item.active .item-content {
background-color: white;
color: #888888; }
.item-primary.active { .item-primary.active {
color: white; color: white;
@ -3439,7 +3440,6 @@ a.item {
padding: 15px 40px 15px 15px; padding: 15px 40px 15px 15px;
border: none; border: none;
background-color: white; background-color: white;
box-shadow: inset 0 0 1px #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-text-wrap, .item-text-wrap,
@ -3654,12 +3654,10 @@ button.item-button-right:after {
margin-bottom: 15px; } margin-bottom: 15px; }
.item-divider { .item-divider {
margin: -1px; padding-top: 7.5px;
padding: 5px 15px; padding-bottom: 7.5px;
min-height: 30px; min-height: 30px;
border: none;
background-color: whitesmoke; background-color: whitesmoke;
box-shadow: inset 0 0 1px #666666;
color: #222222; color: #222222;
font-weight: bold; } font-weight: bold; }
@ -3694,7 +3692,6 @@ button.item-button-right:after {
.item-edit .button { .item-edit .button {
height: 100%; } height: 100%; }
.item-edit .button .icon, .item-edit .button i { .item-edit .button .icon, .item-edit .button i {
color: #ef4e3a;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
@ -3705,10 +3702,11 @@ button.item-button-right:after {
-webkit-align-items: center; -webkit-align-items: center;
-moz-align-items: center; -moz-align-items: center;
align-items: center; align-items: center;
font-size: 24px;
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; } height: 100%;
color: #ef4e3a;
font-size: 24px; }
.item-edit.ng-enter { .item-edit.ng-enter {
left: -48px; left: -48px;
opacity: 0; opacity: 0;
@ -3745,10 +3743,10 @@ button.item-button-right:after {
-webkit-align-items: center; -webkit-align-items: center;
-moz-align-items: center; -moz-align-items: center;
align-items: center; align-items: center;
font-size: 24px;
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; } height: 100%;
font-size: 24px; }
/** /**
* The hidden right-side buttons that can be exposed under a list item * The hidden right-side buttons that can be exposed under a list item
@ -3836,22 +3834,16 @@ button.item-button-right:after {
margin-bottom: -1px; } margin-bottom: -1px; }
.card .item, .card .item,
.card .item-divider,
.list-inset .item, .list-inset .item,
.list-inset .item-divider,
.padding > .list .item, .padding > .list .item,
.padding-horizontal > .list .item, .padding-horizontal > .list .item {
.padding > .list .item-divider,
.padding-horizontal > .list .item-divider {
margin-left: 0; margin-left: 0;
margin-right: 0; } margin-right: 0; }
.padding-left > .list .item, .padding-left > .list .item {
.padding-left > .list .item-divider {
margin-left: 0; } margin-left: 0; }
.padding-right > .list .item, .padding-right > .list .item {
.padding-right > .list .item-divider {
margin-right: 0; } margin-right: 0; }
/** /**
@ -4122,7 +4114,7 @@ textarea {
padding: 4px 8px 3px; padding: 4px 8px 3px;
border: none; border: none;
background-color: white; background-color: white;
box-shadow: inset 0 0 1px #666666; } box-shadow: inset 0 0 1px #dddddd; }
.item-stacked-label input { .item-stacked-label input {
height: 46px; } height: 46px; }

2
scss/_form.scss
View File

@ -105,7 +105,7 @@ textarea {
padding: 4px 8px 3px; padding: 4px 8px 3px;
border: none; border: none;
background-color: $input-bg; background-color: $input-bg;
box-shadow: $item-box-shadow; box-shadow: inset 0 0 $item-border-width $item-border-color;
} }
.item-stacked-label input { .item-stacked-label input {
height: $line-height-computed + $font-size-base + 12px; height: $line-height-computed + $font-size-base + 12px;

22
scss/_items.scss
View File

@ -5,6 +5,7 @@
*/ */
.item { .item {
@include item-style-active($secondary, $subdued-dark, $subdued-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
@ -13,9 +14,10 @@
padding: $item-padding; padding: $item-padding;
border: none; border-width: $item-border-width;
border-style: $item-border-style;
border-color: $item-border-color;
background-color: $list-bg; background-color: $list-bg;
box-shadow: $item-box-shadow;
font-size: $list-font-size; font-size: $list-font-size;
-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;
@ -70,7 +72,6 @@
color: inherit; color: inherit;
} }
} }
@include item-style-active($secondary, $subdued-dark, $subdued-dark);
} }
// Different themes for list items // Different themes for list items
@ -141,7 +142,6 @@ a.item {
border: none; border: none;
background-color: $list-bg; background-color: $list-bg;
box-shadow: $item-box-shadow;
-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;
} }
@ -275,7 +275,7 @@ a.item {
a.item, a.item,
button.item { button.item {
padding-right: (($item-padding * 3) - 5) padding-right: (($item-padding * 3) - 5);
} }
a.item:after, a.item:after,
@ -394,12 +394,10 @@ button.item-button-right:after {
// ------------------------------- // -------------------------------
.item-divider { .item-divider {
margin: $item-border-width * -1; padding-top: $item-padding / 2;
padding: $item-divider-padding; padding-bottom: $item-padding / 2;
min-height: 30px; min-height: 30px;
border: none;
background-color: $item-divider-bg; background-color: $item-divider-bg;
box-shadow: $item-box-shadow;
color: $item-divider-color; color: $item-divider-color;
font-weight: bold; font-weight: bold;
} }
@ -449,13 +447,13 @@ button.item-button-right:after {
.button { .button {
height: 100%; height: 100%;
.icon, i { .icon, i {
color: $assertive;
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
font-size: 24px;
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; height: 100%;
color: $assertive;
font-size: 24px;
} }
} }
@ -493,10 +491,10 @@ button.item-button-right:after {
.icon, i { .icon, i {
@include display-flex(); @include display-flex();
@include align-items(center); @include align-items(center);
font-size: 24px;
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; height: 100%;
font-size: 24px;
} }
} }
} }

12
scss/_list.scss
View File

@ -96,21 +96,15 @@
} }
.card .item, .card .item,
.card .item-divider,
.list-inset .item, .list-inset .item,
.list-inset .item-divider,
.padding > .list .item, .padding > .list .item,
.padding-horizontal > .list .item, .padding-horizontal > .list .item {
.padding > .list .item-divider,
.padding-horizontal > .list .item-divider {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.padding-left > .list .item, .padding-left > .list .item {
.padding-left > .list .item-divider {
margin-left: 0; margin-left: 0;
} }
.padding-right > .list .item, .padding-right > .list .item {
.padding-right > .list .item-divider {
margin-right: 0; margin-right: 0;
} }

3
scss/_variables.scss
View File

@ -466,9 +466,8 @@ $card-border-radius: 2px !default;
// ------------------------------- // -------------------------------
$item-border-width: 1px !default; $item-border-width: 1px !default;
$item-border-color: #666; $item-border-color: #ddd;
$item-border-style: solid; $item-border-style: solid;
$item-box-shadow: inset 0 0 $item-border-width $item-border-color;
$item-padding: 15px !default; $item-padding: 15px !default;
$item-divider-bg: #f5f5f5; $item-divider-bg: #f5f5f5;

8
test/biglists.html
View File

@ -20,7 +20,7 @@
<div id="list" class="scroll"> <div id="list" class="scroll">
<div class="list"> <div class="list">
<div class="item-divider"> <div class="item item-divider">
Work Work
</div> </div>
@ -35,7 +35,7 @@
<input type="text" placeholder="name"> <input type="text" placeholder="name">
</a> </a>
<div class="item-divider"> <div class="item item-divider">
Work Work
</div> </div>
@ -69,7 +69,7 @@
</span> </span>
</a> </a>
<div class="item-divider"> <div class="item item-divider">
Leisure Leisure
</div> </div>
@ -125,7 +125,7 @@
</div> </div>
</a> </a>
<div class="item-divider"> <div class="item item-divider">
List Divider List Divider
</div> </div>

6
test/cards.html
View File

@ -24,7 +24,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="item-divider"> <div class="item item-divider">
I'm a Header in a Card! I'm a Header in a Card!
</div> </div>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
@ -33,13 +33,13 @@
</div> </div>
<div class="card"> <div class="card">
<div class="item-divider"> <div class="item item-divider">
I'm a Header in a Card! I'm a Header in a Card!
</div> </div>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
This is a basic Card with some text. This is a basic Card with some text.
</div> </div>
<div class="item-divider"> <div class="item item-divider">
I'm a Footer in a Card! I'm a Footer in a Card!
</div> </div>
</div> </div>

18
test/lists.html
View File

@ -21,11 +21,11 @@
</header> </header>
<div id="list"> <div id="list">
<main id="content" class="content overflow-scroll"> <main id="content" class="content has-header overflow-scroll">
<div class="list"> <div class="list">
<div class="item-divider"> <div class="item item-divider">
Work Work
</div> </div>
@ -43,7 +43,7 @@
<div class="list"> <div class="list">
<div class="item-divider"> <div class="item item-divider">
Work Work
</div> </div>
@ -84,7 +84,7 @@
</span> </span>
</a> </a>
<div class="item-divider"> <div class="item item-divider">
Leisure Leisure
</div> </div>
@ -143,7 +143,7 @@
</div> </div>
</a> </a>
<div class="item-divider"> <div class="item item-divider">
List Divider List Divider
</div> </div>
@ -191,7 +191,7 @@
</div> </div>
</a> </a>
<div class="item-divider"> <div class="item item-divider">
List Divider List Divider
</div> </div>
@ -232,7 +232,7 @@
</div> </div>
</a> </a>
<div class="item-divider"> <div class="item item-divider">
List Divider List Divider
</div> </div>
@ -247,7 +247,7 @@
<div class="list"> <div class="list">
<div class="item-divider"> <div class="item item-divider">
Without .item-content Without .item-content
</div> </div>
@ -320,7 +320,7 @@
</div> </div>
</a> </a>
<div class="item-divider"> <div class="item item-divider">
List Divider List Divider
</div> </div>