mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
md card updates
This commit is contained in:
@@ -6,31 +6,31 @@
|
||||
<ion-content class="padding" style="text-align:center">
|
||||
|
||||
<p>
|
||||
<button>D</button>
|
||||
<button>Default</button>
|
||||
<button class="hover">D.hover</button>
|
||||
<button class="activated">D.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary>S</button>
|
||||
<button secondary>Secondary</button>
|
||||
<button secondary class="hover">S.hover</button>
|
||||
<button secondary class="activated">S.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger>D</button>
|
||||
<button danger>Danger</button>
|
||||
<button danger class="hover">D.hover</button>
|
||||
<button danger class="activated">D.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button light>L</button>
|
||||
<button light>Light</button>
|
||||
<button light class="hover">L.hover</button>
|
||||
<button light class="activated">L.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button dark>D</button>
|
||||
<button dark>Dark</button>
|
||||
<button dark class="hover">D.hover</button>
|
||||
<button dark class="activated">D.activated</button>
|
||||
</p>
|
||||
|
||||
@@ -18,6 +18,7 @@ $card-ios-footer-padding: 10px;
|
||||
box-shadow: $card-ios-box-shadow;
|
||||
border-radius: $card-ios-border-radius;
|
||||
font-size: $card-ios-font-size;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
$card-md-background-color: $list-background-color !default;
|
||||
$card-md-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
|
||||
$card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$card-md-border-radius: 2px !default;
|
||||
$card-md-font-size: 1.4rem !default;
|
||||
|
||||
$card-md-header-background-color: $card-md-background-color !default;
|
||||
$card-md-header-padding: 10px;
|
||||
$card-md-header-padding: 16px;
|
||||
$card-md-footer-background-color: $card-md-background-color !default;
|
||||
$card-md-footer-padding: 10px;
|
||||
$card-md-footer-padding: 16px;
|
||||
|
||||
|
||||
.card.list[mode=md] {
|
||||
@@ -18,6 +18,7 @@ $card-md-footer-padding: 10px;
|
||||
box-shadow: $card-md-box-shadow;
|
||||
border-radius: $card-md-border-radius;
|
||||
font-size: $card-md-font-size;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
|
||||
|
||||
@@ -50,7 +50,7 @@ button.item.item {
|
||||
border-radius: 0;
|
||||
|
||||
icon:first-child {
|
||||
min-width: 26px;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,17 +2,20 @@
|
||||
// Material Design Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-md-border-color: $list-border-color !default;
|
||||
$item-md-border-color: lighten($list-border-color, 10%) !default;
|
||||
$item-md-font-size: 1.6rem !default;
|
||||
|
||||
$item-md-padding-top: 13px !default;
|
||||
$item-md-padding-right: 15px !default;
|
||||
$item-md-padding-bottom: 14px !default;
|
||||
$item-md-padding-left: 15px !default;
|
||||
$item-md-padding-top: 16px !default;
|
||||
$item-md-padding-right: 16px !default;
|
||||
$item-md-padding-bottom: 16px !default;
|
||||
$item-md-padding-left: 16px !default;
|
||||
|
||||
$item-md-padding-media-top: 10px !default;
|
||||
$item-md-padding-media-bottom: 11px !default;
|
||||
|
||||
$item-md-body-text-font-size: 1.4rem !default;
|
||||
$item-md-body-text-line-height: 1.5 !default;
|
||||
|
||||
$item-md-avatar-size: 4rem !default;
|
||||
$item-md-thumbnail-size: 8rem !default;
|
||||
$item-md-note-color: $item-md-border-color !default;
|
||||
@@ -50,6 +53,12 @@ $item-md-forward-icon-color: $item-md-border-color !default;
|
||||
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
|
||||
}
|
||||
|
||||
.item-text-wrap,
|
||||
.item-text-wrap .item-content {
|
||||
font-size: $item-md-body-text-font-size;
|
||||
line-height: $item-md-body-text-line-height;
|
||||
}
|
||||
|
||||
.item-media {
|
||||
margin: $item-md-padding-media-top $item-md-padding-right $item-md-padding-media-bottom $item-md-padding-left;
|
||||
}
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
// Material Design List
|
||||
// --------------------------------------------------
|
||||
|
||||
$list-md-header-padding: 30px $item-md-padding-right 10px $item-md-padding-left !default;
|
||||
$list-md-header-font-size: 1.2rem !default;
|
||||
$list-md-header-color: #6d6d72 !default;
|
||||
$list-md-header-padding: 30px $item-md-padding-right 16px $item-md-padding-left !default;
|
||||
$list-md-header-font-size: 1.6rem !default;
|
||||
$list-md-header-color: #6d6d72 !default;
|
||||
|
||||
$list-md-footer-padding: 10px $item-md-padding-right 0 $item-md-padding-left !default;
|
||||
$list-md-footer-font-size: 1.2rem !default;
|
||||
$list-md-footer-color: #8f8f94 !default;
|
||||
$list-md-footer-padding: 16px $item-md-padding-right 0 $item-md-padding-left !default;
|
||||
$list-md-footer-font-size: 1.2rem !default;
|
||||
$list-md-footer-color: #8f8f94 !default;
|
||||
|
||||
|
||||
.list[mode=md] {
|
||||
@@ -16,7 +16,6 @@ $list-md-footer-color: #8f8f94 !default;
|
||||
ion-header {
|
||||
padding: $list-md-header-padding;
|
||||
font-size: $list-md-header-font-size;
|
||||
text-transform: uppercase;
|
||||
color: $list-md-header-color;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user