diff --git a/ionic/components/card/extensions/material.scss b/ionic/components/card/extensions/material.scss index 53a3da6128..742b9cc505 100644 --- a/ionic/components/card/extensions/material.scss +++ b/ionic/components/card/extensions/material.scss @@ -2,39 +2,40 @@ // Material Design Card // -------------------------------------------------- -$card-md-background-color: #fff !default; -$card-md-box-shadow: $md-whiteframe-shadow-z1; -$card-md-border-radius: 2px !default; -$card-md-font-size: 1.4rem !default; -$card-md-item-content-padding: 15px !default; +$card-md-background-color: #fff !default; +$card-md-box-shadow: 0 1px 2px rgba(0,0,0,.3) !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-footer-background-color: $card-md-background-color !default; +$card-md-footer-padding: 10px; -.card[mode="md"] { +.card[mode="md"] { background: $card-md-background-color; box-shadow: $card-md-box-shadow; border-radius: $card-md-border-radius; font-size: $card-md-font-size; - .item, - .item-content { - padding: 0; - background: transparent; + .item::before, + .item::after { + left: 0; } - .item:last-of-type .item-content:after { - background: transparent; + .item:first-child:before { + border: none; } .card-header { - font-size: 1.7rem; + padding: $card-md-header-padding; + background-color: $card-md-footer-background-color; } .card-footer { - color: #6d6d72; - } - - .item-content { - padding: $card-md-item-content-padding + padding: $card-md-footer-padding; + background-color: $card-md-footer-background-color; } } diff --git a/ionic/components/item/extensions/material.scss b/ionic/components/item/extensions/material.scss index 008f83be7d..d80829d7fc 100644 --- a/ionic/components/item/extensions/material.scss +++ b/ionic/components/item/extensions/material.scss @@ -1,24 +1,100 @@ -$item-material-min-height: 56px; -$item-material-font-size: 16px; -$item-material-label-color: #222; + +// Material Design Item +// -------------------------------------------------- + +$item-md-border-color: #c8c7cc !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-avatar-size: 4rem !default; +$item-md-thumbnail-size: 8rem !default; +$item-md-note-color: #999 !default; + .list[mode="md"] { + .item { - padding-left: 16px; + font-size: $item-md-font-size; + margin-top: -1px; + + &:before { + position: absolute; + content: ''; + top: 0; + right: 0; + left: 0; + border-top: 1px solid $item-md-border-color; + } + + &:after { + position: absolute; + content: ''; + right: 0; + bottom: 0; + left: 0; + border-top: 1px solid $item-md-border-color; + } } - .item-content { - min-height: $item-material-min-height; - padding: 16px 16px 16px 0px; - border-bottom: 1px solid #DBDBDB; + .text-input, + .input-label, + .item-media, + .item-content, + .item-note { + margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left; } - .item-media { - display: block; + .item-note { + color: $item-md-note-color; } - .item-label { - color: $item-material-label-color; - font-size: $item-material-font-size; + .item > icon { + margin-left: $item-md-padding-left; + margin-right: $item-md-padding-right; } + + icon[forward] { + font-size: 2rem; + color: #cfcfcf; + } + + button { + margin: 0 $item-md-padding-right 0 $item-md-padding-left; + padding: 2px 6px; + min-height: 26px; + } + + .badge { + margin-right: $item-md-padding-right; + } + + .avatar { + max-width: $item-md-avatar-size; + max-height: $item-md-avatar-size; + border-radius: $item-md-avatar-size / 2; + } + + .thumbnail { + max-width: $item-md-thumbnail-size; + max-height: $item-md-thumbnail-size; + } + + .vertical-align-top { + button, + [button] { + margin-top: $item-md-padding-top; + } + > icon { + margin-top: $item-md-padding-top / 2; + } + } + + button.item.activated { + box-shadow: none; + } + } diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index ffeffa8871..160c0f1a07 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -18,7 +18,7 @@ } a.item, -button.item { +button.item.item { border-radius: 0; margin: 0; color: inherit; @@ -26,6 +26,8 @@ button.item { width: 100%; line-height: normal; justify-content: inherit; + box-shadow: none; + font-weight: normal; } .item-content { diff --git a/ionic/components/list/extensions/material.scss b/ionic/components/list/extensions/material.scss index 310b4b4125..f73a551174 100644 --- a/ionic/components/list/extensions/material.scss +++ b/ionic/components/list/extensions/material.scss @@ -1,2 +1,30 @@ + +// 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-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[mode="md"] { + + .list-header { + padding: $list-md-header-padding; + font-size: $list-md-header-font-size; + text-transform: uppercase; + color: $list-md-header-color; + } + + .list-footer { + padding: $list-md-footer-padding; + font-size: $list-md-footer-font-size; + text-transform: uppercase; + color: $list-md-footer-color; + } + }