From 512fc21491c9694993a10321d47febe121947dd0 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 18 Aug 2015 09:06:07 -0500 Subject: [PATCH] md card updates --- ionic/components/button/test/basic/main.html | 10 +++++----- ionic/components/card/modes/ios.scss | 1 + ionic/components/card/modes/material.scss | 7 ++++--- ionic/components/item/item.scss | 2 +- ionic/components/item/modes/material.scss | 19 ++++++++++++++----- ionic/components/list/modes/material.scss | 13 ++++++------- 6 files changed, 31 insertions(+), 21 deletions(-) diff --git a/ionic/components/button/test/basic/main.html b/ionic/components/button/test/basic/main.html index fdf67d56c6..a9de3ecaf7 100644 --- a/ionic/components/button/test/basic/main.html +++ b/ionic/components/button/test/basic/main.html @@ -6,31 +6,31 @@

- +

- +

- +

- +

- +

diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index 111d9d1c87..92b5376094 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -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 { diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss index fca0794aec..537e9ddcd9 100644 --- a/ionic/components/card/modes/material.scss +++ b/ionic/components/card/modes/material.scss @@ -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 { diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index e0d3d418ec..51b44254fc 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -50,7 +50,7 @@ button.item.item { border-radius: 0; icon:first-child { - min-width: 26px; + min-width: 24px; text-align: center; } diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss index 0b3ec3ed45..b0733bdfb1 100644 --- a/ionic/components/item/modes/material.scss +++ b/ionic/components/item/modes/material.scss @@ -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; } diff --git a/ionic/components/list/modes/material.scss b/ionic/components/list/modes/material.scss index 934f4aa066..b703ef07c8 100644 --- a/ionic/components/list/modes/material.scss +++ b/ionic/components/list/modes/material.scss @@ -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; }