mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
border items / .item required with .item-divider
This commit is contained in:
Adam Bradley
50
dist/css/ionic.css
vendored
50
dist/css/ionic.css
vendored
@ -3250,11 +3250,19 @@ a.subdued {
|
||||
display: block;
|
||||
margin: -1px;
|
||||
padding: 15px;
|
||||
border: none;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #dddddd;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
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; }
|
||||
.item.active {
|
||||
color: #888888;
|
||||
background-color: white;
|
||||
border-color: #888888; }
|
||||
.item.active .item-content {
|
||||
background-color: white;
|
||||
color: #888888; }
|
||||
.item h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
@ -3286,13 +3294,6 @@ a.subdued {
|
||||
z-index: 2; }
|
||||
.item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
|
||||
color: inherit; }
|
||||
.item.active {
|
||||
color: #888888;
|
||||
background-color: white;
|
||||
border-color: #888888; }
|
||||
.item.active .item-content {
|
||||
background-color: white;
|
||||
color: #888888; }
|
||||
|
||||
.item-primary.active {
|
||||
color: white;
|
||||
@ -3439,7 +3440,6 @@ a.item {
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
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; }
|
||||
|
||||
.item-text-wrap,
|
||||
@ -3654,12 +3654,10 @@ button.item-button-right:after {
|
||||
margin-bottom: 15px; }
|
||||
|
||||
.item-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
padding-top: 7.5px;
|
||||
padding-bottom: 7.5px;
|
||||
min-height: 30px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
@ -3694,7 +3692,6 @@ button.item-button-right:after {
|
||||
.item-edit .button {
|
||||
height: 100%; }
|
||||
.item-edit .button .icon, .item-edit .button i {
|
||||
color: #ef4e3a;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
@ -3705,10 +3702,11 @@ button.item-button-right:after {
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%; }
|
||||
height: 100%;
|
||||
color: #ef4e3a;
|
||||
font-size: 24px; }
|
||||
.item-edit.ng-enter {
|
||||
left: -48px;
|
||||
opacity: 0;
|
||||
@ -3745,10 +3743,10 @@ button.item-button-right:after {
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%; }
|
||||
height: 100%;
|
||||
font-size: 24px; }
|
||||
|
||||
/**
|
||||
* 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; }
|
||||
|
||||
.card .item,
|
||||
.card .item-divider,
|
||||
.list-inset .item,
|
||||
.list-inset .item-divider,
|
||||
.padding > .list .item,
|
||||
.padding-horizontal > .list .item,
|
||||
.padding > .list .item-divider,
|
||||
.padding-horizontal > .list .item-divider {
|
||||
.padding-horizontal > .list .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
|
||||
.padding-left > .list .item,
|
||||
.padding-left > .list .item-divider {
|
||||
.padding-left > .list .item {
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-right > .list .item,
|
||||
.padding-right > .list .item-divider {
|
||||
.padding-right > .list .item {
|
||||
margin-right: 0; }
|
||||
|
||||
/**
|
||||
@ -4122,7 +4114,7 @@ textarea {
|
||||
padding: 4px 8px 3px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
box-shadow: inset 0 0 1px #dddddd; }
|
||||
|
||||
.item-stacked-label input {
|
||||
height: 46px; }
|
||||
|
||||
@ -105,7 +105,7 @@ textarea {
|
||||
padding: 4px 8px 3px;
|
||||
border: none;
|
||||
background-color: $input-bg;
|
||||
box-shadow: $item-box-shadow;
|
||||
box-shadow: inset 0 0 $item-border-width $item-border-color;
|
||||
}
|
||||
.item-stacked-label input {
|
||||
height: $line-height-computed + $font-size-base + 12px;
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
*/
|
||||
|
||||
.item {
|
||||
@include item-style-active($secondary, $subdued-dark, $subdued-dark);
|
||||
position: relative;
|
||||
|
||||
z-index: 2; // Make sure the borders and stuff don't get hidden by children
|
||||
@ -13,9 +14,10 @@
|
||||
|
||||
padding: $item-padding;
|
||||
|
||||
border: none;
|
||||
border-width: $item-border-width;
|
||||
border-style: $item-border-style;
|
||||
border-color: $item-border-color;
|
||||
background-color: $list-bg;
|
||||
box-shadow: $item-box-shadow;
|
||||
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;
|
||||
@ -70,7 +72,6 @@
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
@include item-style-active($secondary, $subdued-dark, $subdued-dark);
|
||||
}
|
||||
|
||||
// Different themes for list items
|
||||
@ -141,7 +142,6 @@ a.item {
|
||||
|
||||
border: none;
|
||||
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;
|
||||
}
|
||||
@ -275,7 +275,7 @@ a.item {
|
||||
|
||||
a.item,
|
||||
button.item {
|
||||
padding-right: (($item-padding * 3) - 5)
|
||||
padding-right: (($item-padding * 3) - 5);
|
||||
}
|
||||
|
||||
a.item:after,
|
||||
@ -394,12 +394,10 @@ button.item-button-right:after {
|
||||
// -------------------------------
|
||||
|
||||
.item-divider {
|
||||
margin: $item-border-width * -1;
|
||||
padding: $item-divider-padding;
|
||||
padding-top: $item-padding / 2;
|
||||
padding-bottom: $item-padding / 2;
|
||||
min-height: 30px;
|
||||
border: none;
|
||||
background-color: $item-divider-bg;
|
||||
box-shadow: $item-box-shadow;
|
||||
color: $item-divider-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -449,13 +447,13 @@ button.item-button-right:after {
|
||||
.button {
|
||||
height: 100%;
|
||||
.icon, i {
|
||||
color: $assertive;
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
color: $assertive;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -493,10 +491,10 @@ button.item-button-right:after {
|
||||
.icon, i {
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,21 +96,15 @@
|
||||
}
|
||||
|
||||
.card .item,
|
||||
.card .item-divider,
|
||||
.list-inset .item,
|
||||
.list-inset .item-divider,
|
||||
.padding > .list .item,
|
||||
.padding-horizontal > .list .item,
|
||||
.padding > .list .item-divider,
|
||||
.padding-horizontal > .list .item-divider {
|
||||
.padding-horizontal > .list .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.padding-left > .list .item,
|
||||
.padding-left > .list .item-divider {
|
||||
.padding-left > .list .item {
|
||||
margin-left: 0;
|
||||
}
|
||||
.padding-right > .list .item,
|
||||
.padding-right > .list .item-divider {
|
||||
.padding-right > .list .item {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -466,9 +466,8 @@ $card-border-radius: 2px !default;
|
||||
// -------------------------------
|
||||
|
||||
$item-border-width: 1px !default;
|
||||
$item-border-color: #666;
|
||||
$item-border-color: #ddd;
|
||||
$item-border-style: solid;
|
||||
$item-box-shadow: inset 0 0 $item-border-width $item-border-color;
|
||||
$item-padding: 15px !default;
|
||||
|
||||
$item-divider-bg: #f5f5f5;
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<div id="list" class="scroll">
|
||||
<div class="list">
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
Work
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<input type="text" placeholder="name">
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
Work
|
||||
</div>
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
Leisure
|
||||
</div>
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
I'm a Header in a Card!
|
||||
</div>
|
||||
<div class="item item-text-wrap">
|
||||
@ -33,13 +33,13 @@
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
I'm a Header in a Card!
|
||||
</div>
|
||||
<div class="item item-text-wrap">
|
||||
This is a basic Card with some text.
|
||||
</div>
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
I'm a Footer in a Card!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,11 +21,11 @@
|
||||
</header>
|
||||
|
||||
<div id="list">
|
||||
<main id="content" class="content overflow-scroll">
|
||||
<main id="content" class="content has-header overflow-scroll">
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
Work
|
||||
</div>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
Work
|
||||
</div>
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
Leisure
|
||||
</div>
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
@ -191,7 +191,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
@ -232,7 +232,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
@ -247,7 +247,7 @@
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
Without .item-content
|
||||
</div>
|
||||
|
||||
@ -320,7 +320,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
<div class="item item-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user