md card updates

This commit is contained in:
Adam Bradley
2015-08-18 09:06:07 -05:00
parent e38c144463
commit 512fc21491
6 changed files with 31 additions and 21 deletions

View File

@@ -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>

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -50,7 +50,7 @@ button.item.item {
border-radius: 0;
icon:first-child {
min-width: 26px;
min-width: 24px;
text-align: center;
}

View File

@@ -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;
}

View File

@@ -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;
}