From f48ff64d2ef2dc2fc89f8b361e21106c45d70bff Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 2 May 2017 21:56:53 -0500 Subject: [PATCH] feat(card): update card --- .../card-content/card-content.ios.scss | 53 +++++++++++++ .../card-content/card-content.md.scss | 57 ++++++++++++++ .../{card => card-content}/card-content.scss | 2 +- .../{card => card-content}/card-content.ts | 0 .../card-content/card-content.wp.scss | 57 ++++++++++++++ .../card-header/card-header.ios.scss | 52 +++++++++++++ .../card-header/card-header.md.scss | 48 ++++++++++++ .../{card => card-header}/card-header.scss | 0 .../{card => card-header}/card-header.ts | 0 .../card-header/card-header.wp.scss | 49 ++++++++++++ src/components/card-title/card-title.ios.scss | 55 ++++++++++++++ src/components/card-title/card-title.md.scss | 55 ++++++++++++++ src/components/card-title/card-title.scss | 11 +++ .../{card => card-title}/card-title.ts | 6 +- src/components/card-title/card-title.wp.scss | 55 ++++++++++++++ src/components/card/card-content.ios.scss | 3 - src/components/card/card-content.md.scss | 3 - src/components/card/card-content.wp.scss | 3 - src/components/card/card-header.ios.scss | 2 - src/components/card/card-header.md.scss | 2 - src/components/card/card-header.wp.scss | 2 - src/components/card/card.ios.scss | 76 +------------------ src/components/card/card.md.scss | 74 +----------------- src/components/card/card.scss | 6 +- src/components/card/card.wp.scss | 73 +----------------- 25 files changed, 501 insertions(+), 243 deletions(-) create mode 100644 src/components/card-content/card-content.ios.scss create mode 100644 src/components/card-content/card-content.md.scss rename src/components/{card => card-content}/card-content.scss (91%) rename src/components/{card => card-content}/card-content.ts (100%) create mode 100644 src/components/card-content/card-content.wp.scss create mode 100644 src/components/card-header/card-header.ios.scss create mode 100644 src/components/card-header/card-header.md.scss rename src/components/{card => card-header}/card-header.scss (100%) rename src/components/{card => card-header}/card-header.ts (100%) create mode 100644 src/components/card-header/card-header.wp.scss create mode 100644 src/components/card-title/card-title.ios.scss create mode 100644 src/components/card-title/card-title.md.scss create mode 100644 src/components/card-title/card-title.scss rename src/components/{card => card-title}/card-title.ts (58%) create mode 100644 src/components/card-title/card-title.wp.scss delete mode 100644 src/components/card/card-content.ios.scss delete mode 100644 src/components/card/card-content.md.scss delete mode 100644 src/components/card/card-content.wp.scss delete mode 100644 src/components/card/card-header.ios.scss delete mode 100644 src/components/card/card-header.md.scss delete mode 100644 src/components/card/card-header.wp.scss mode change 100644 => 100755 src/components/card/card.ios.scss mode change 100644 => 100755 src/components/card/card.md.scss mode change 100644 => 100755 src/components/card/card.scss mode change 100644 => 100755 src/components/card/card.wp.scss diff --git a/src/components/card-content/card-content.ios.scss b/src/components/card-content/card-content.ios.scss new file mode 100644 index 0000000000..6b1f921a09 --- /dev/null +++ b/src/components/card-content/card-content.ios.scss @@ -0,0 +1,53 @@ +@import "../../themes/ionic.globals.ios"; +@import "./card-content"; + + +// iOS Card Header +// -------------------------------------------------- + +/// @prop - Font size of the card +$card-ios-font-size: 1.4rem !default; + +/// @prop - Padding top of the card +$card-ios-padding-top: 13px !default; + +/// @prop - Padding right of the card +$card-ios-padding-right: 16px !default; + +/// @prop - Padding bottom of the card +$card-ios-padding-bottom: 14px !default; + +/// @prop - Padding left of the card +$card-ios-padding-left: 16px !default; + + +.card-content-ios { + padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left; + + font-size: $card-ios-font-size; + line-height: 1.4; +} + + +// Generate iOS Card Content Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + + .card-ios-#{$color-name} { + .card-content-ios { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + .card-content-ios-#{$color-name} { + color: $color-base; + } + } + } + + .card-content-ios-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card-content/card-content.md.scss b/src/components/card-content/card-content.md.scss new file mode 100644 index 0000000000..b098f640c6 --- /dev/null +++ b/src/components/card-content/card-content.md.scss @@ -0,0 +1,57 @@ +@import "../../themes/ionic.globals.md"; +@import "./card-content"; + + +// Material Design Card Content +// -------------------------------------------------- + +/// @prop - Padding top of the card +$card-md-padding-top: 13px !default; + +/// @prop - Padding right of the card +$card-md-padding-right: 16px !default; + +/// @prop - Padding bottom of the card +$card-md-padding-bottom: 13px !default; + +/// @prop - Padding left of the card +$card-md-padding-left: 16px !default; + +/// @prop - Font size of the card +$card-md-font-size: 1.4rem !default; + +/// @prop - Line height of the card +$card-md-line-height: 1.5 !default; + + +.card-content-md { + padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left; + + font-size: $card-md-font-size; + line-height: $card-md-line-height; +} + + +// Generate Material Design Card Content Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + + .card-md-#{$color-name} { + + .card-content-md { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + .card-content-md-#{$color-name} { + color: $color-base; + } + } + } + + .card-content-md-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card/card-content.scss b/src/components/card-content/card-content.scss similarity index 91% rename from src/components/card/card-content.scss rename to src/components/card-content/card-content.scss index 1fb53d976a..6c95458857 100644 --- a/src/components/card/card-content.scss +++ b/src/components/card-content/card-content.scss @@ -1,7 +1,7 @@ @import "../../themes/ionic.globals"; -// Card +// Card Content // -------------------------------------------------- ion-card-content, diff --git a/src/components/card/card-content.ts b/src/components/card-content/card-content.ts similarity index 100% rename from src/components/card/card-content.ts rename to src/components/card-content/card-content.ts diff --git a/src/components/card-content/card-content.wp.scss b/src/components/card-content/card-content.wp.scss new file mode 100644 index 0000000000..d538b74134 --- /dev/null +++ b/src/components/card-content/card-content.wp.scss @@ -0,0 +1,57 @@ +@import "../../themes/ionic.globals.wp"; +@import "./card-content"; + + +// Windows Card Content +// -------------------------------------------------- + +/// @prop - Padding top of the card +$card-wp-padding-top: 13px !default; + +/// @prop - Padding right of the card +$card-wp-padding-right: 16px !default; + +/// @prop - Padding bottom of the card +$card-wp-padding-bottom: 13px !default; + +/// @prop - Padding left of the card +$card-wp-padding-left: 16px !default; + +/// @prop - Font size of the card +$card-wp-font-size: 1.4rem !default; + +/// @prop - Line height of the card +$card-wp-line-height: 1.5 !default; + + +.card-content-wp { + padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left; + + font-size: $card-wp-font-size; + line-height: $card-wp-line-height; +} + + +// Generate Windows Card Content Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + + .card-wp-#{$color-name} { + + .card-content-wp { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + .card-content-wp-#{$color-name} { + color: $color-base; + } + } + } + + .card-content-wp-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card-header/card-header.ios.scss b/src/components/card-header/card-header.ios.scss new file mode 100644 index 0000000000..b9dfb05915 --- /dev/null +++ b/src/components/card-header/card-header.ios.scss @@ -0,0 +1,52 @@ +@import "../../themes/ionic.globals.ios"; +@import "./card-header"; + + +// iOS Card Header +// -------------------------------------------------- + +/// @prop - Font size of the card header +$card-ios-header-font-size: 1.6rem !default; + +/// @prop - Font weight of the card header +$card-ios-header-font-weight: 500 !default; + +/// @prop - Padding of the card header +$card-ios-header-padding: 16px !default; + +/// @prop - Color of the card header +$card-ios-header-color: #333 !default; + + +.card-header-ios { + padding: $card-ios-header-padding; + + font-size: $card-ios-header-font-size; + font-weight: $card-ios-header-font-weight; + color: $card-ios-header-color; +} + + +// Generate iOS Card Header Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + + .card-ios-#{$color-name} { + + .card-header-ios { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + .card-header-ios-#{$color-name} { + color: $color-base; + } + } + } + + .card-header-ios-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card-header/card-header.md.scss b/src/components/card-header/card-header.md.scss new file mode 100644 index 0000000000..4d0819c533 --- /dev/null +++ b/src/components/card-header/card-header.md.scss @@ -0,0 +1,48 @@ +@import "../../themes/ionic.globals.md"; +@import "./card-header"; + + +// Material Design Card Header +// -------------------------------------------------- + +/// @prop - Font size of the card header +$card-md-header-font-size: 1.6rem !default; + +/// @prop - Padding of the card header +$card-md-header-padding: 16px !default; + +/// @prop - Color of the card header +$card-md-header-color: #222 !default; + + +.card-header-md { + padding: $card-md-header-padding; + + font-size: $card-md-header-font-size; + color: $card-md-header-color; +} + + +// Generate Material Design Card Header Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + + .card-md-#{$color-name} { + + .card-header-md { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + .card-header-md-#{$color-name} { + color: $color-base; + } + } + } + + .card-header-md-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card/card-header.scss b/src/components/card-header/card-header.scss similarity index 100% rename from src/components/card/card-header.scss rename to src/components/card-header/card-header.scss diff --git a/src/components/card/card-header.ts b/src/components/card-header/card-header.ts similarity index 100% rename from src/components/card/card-header.ts rename to src/components/card-header/card-header.ts diff --git a/src/components/card-header/card-header.wp.scss b/src/components/card-header/card-header.wp.scss new file mode 100644 index 0000000000..7288c3bc41 --- /dev/null +++ b/src/components/card-header/card-header.wp.scss @@ -0,0 +1,49 @@ +@import "../../themes/ionic.globals.wp"; +@import "./card-header"; + + +// Windows Card Header +// -------------------------------------------------- + +/// @prop - Font size of the card header +$card-wp-header-font-size: 1.6rem !default; + +/// @prop - Padding of the card header +$card-wp-header-padding: 16px !default; + +/// @prop - Color of the card header +$card-wp-header-color: #222 !default; + + +.card-header-wp { + padding: $card-wp-header-padding; + + font-size: $card-wp-header-font-size; + + color: $card-wp-header-color; +} + + +// Generate Windows Card Header Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + + .card-wp-#{$color-name} { + + .card-header-wp { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + .card-header-wp-#{$color-name} { + color: $color-base; + } + } + } + + .card-header-wp-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card-title/card-title.ios.scss b/src/components/card-title/card-title.ios.scss new file mode 100644 index 0000000000..6c9aa363db --- /dev/null +++ b/src/components/card-title/card-title.ios.scss @@ -0,0 +1,55 @@ +@import "../../themes/ionic.globals.ios"; +@import "./card-title"; + + +// iOS Card Title +// -------------------------------------------------- + +/// @prop - Font size of the card title +$card-ios-title-font-size: 1.8rem !default; + +/// @prop - Padding of the card title +$card-ios-title-padding: 8px 0 8px 0 !default; + +/// @prop - Margin of the card title +$card-ios-title-margin: 2px 0 2px !default; + +/// @prop - Color of the card title +$card-ios-title-text-color: #222 !default; + + +.card-title-ios { + display: block; + + margin: $card-ios-title-margin; + padding: $card-ios-title-padding; + + font-size: $card-ios-title-font-size; + line-height: 1.2; + color: $card-ios-title-text-color; +} + + +// Generate iOS Card Title Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + + .card-ios-#{$color-name} { + + .card-title-ios { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + .card-title-ios-#{$color-name} { + color: $color-base; + } + } + } + + .card-title-ios-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card-title/card-title.md.scss b/src/components/card-title/card-title.md.scss new file mode 100644 index 0000000000..6231bde4f1 --- /dev/null +++ b/src/components/card-title/card-title.md.scss @@ -0,0 +1,55 @@ +@import "../../themes/ionic.globals.md"; +@import "./card-title"; + + +// Material Design Card Title +// -------------------------------------------------- + +/// @prop - Font size of the card title +$card-md-title-font-size: 2.4rem !default; + +/// @prop - Padding of the card title +$card-md-title-padding: 8px 0 8px 0 !default; + +/// @prop - Margin of the card title +$card-md-title-margin: 2px 0 2px !default; + +/// @prop - Color of the card title +$card-md-title-text-color: #222 !default; + + +.card-title-md { + display: block; + + margin: $card-md-title-margin; + padding: $card-md-title-padding; + + font-size: $card-md-title-font-size; + line-height: 1.2; + color: $card-md-title-text-color; +} + + +// Generate Material Design Card Title Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + + .card-md-#{$color-name} { + + .card-title-md { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + .card-title-md-#{$color-name} { + color: $color-base; + } + } + } + + .card-title-md-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card-title/card-title.scss b/src/components/card-title/card-title.scss new file mode 100644 index 0000000000..3f7dcee4b1 --- /dev/null +++ b/src/components/card-title/card-title.scss @@ -0,0 +1,11 @@ +@import "../../themes/ionic.globals"; + + +// Card Title +// -------------------------------------------------- + +ion-card-title, +:host { + display: block; + visibility: inherit !important; +} diff --git a/src/components/card/card-title.ts b/src/components/card-title/card-title.ts similarity index 58% rename from src/components/card/card-title.ts rename to src/components/card-title/card-title.ts index de33ed99fc..2f98f31bc6 100644 --- a/src/components/card/card-title.ts +++ b/src/components/card-title/card-title.ts @@ -4,9 +4,9 @@ import { Component } from '../index'; @Component({ tag: 'ion-card-title', styleUrls: { - ios: 'card.ios.scss', - md: 'card.md.scss', - wp: 'card.wp.scss' + ios: 'card-title.ios.scss', + md: 'card-title.md.scss', + wp: 'card-title.wp.scss' } }) export class CardTitle {} diff --git a/src/components/card-title/card-title.wp.scss b/src/components/card-title/card-title.wp.scss new file mode 100644 index 0000000000..0953772861 --- /dev/null +++ b/src/components/card-title/card-title.wp.scss @@ -0,0 +1,55 @@ +@import "../../themes/ionic.globals.wp"; +@import "./card-title"; + + +// Windows Card Title +// -------------------------------------------------- + +/// @prop - Font size of card title +$card-wp-title-font-size: 2.4rem !default; + +/// @prop - Padding of the card title +$card-wp-title-padding: 8px 0 8px 0 !default; + +/// @prop - Margin of the card title +$card-wp-title-margin: 2px 0 !default; + +/// @prop - Color of the card title +$card-wp-title-text-color: #222 !default; + + +.card-title-wp { + display: block; + + margin: $card-wp-title-margin; + padding: $card-wp-title-padding; + + font-size: $card-wp-title-font-size; + line-height: 1.2; + color: $card-wp-title-text-color; +} + + +// Generate Windows Card Title Colors +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + + .card-wp-#{$color-name} { + + .card-title-wp { + color: $color-contrast; + } + + @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + .card-title-wp-#{$color-name} { + color: $color-base; + } + } + } + + .card-title-wp-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/card/card-content.ios.scss b/src/components/card/card-content.ios.scss deleted file mode 100644 index 3c75fec439..0000000000 --- a/src/components/card/card-content.ios.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "../../themes/ionic.globals"; -@import "./card-content"; - diff --git a/src/components/card/card-content.md.scss b/src/components/card/card-content.md.scss deleted file mode 100644 index 3c75fec439..0000000000 --- a/src/components/card/card-content.md.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "../../themes/ionic.globals"; -@import "./card-content"; - diff --git a/src/components/card/card-content.wp.scss b/src/components/card/card-content.wp.scss deleted file mode 100644 index 3c75fec439..0000000000 --- a/src/components/card/card-content.wp.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "../../themes/ionic.globals"; -@import "./card-content"; - diff --git a/src/components/card/card-header.ios.scss b/src/components/card/card-header.ios.scss deleted file mode 100644 index 605e7f43b8..0000000000 --- a/src/components/card/card-header.ios.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "../../themes/ionic.globals"; -@import "./card-header"; diff --git a/src/components/card/card-header.md.scss b/src/components/card/card-header.md.scss deleted file mode 100644 index 605e7f43b8..0000000000 --- a/src/components/card/card-header.md.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "../../themes/ionic.globals"; -@import "./card-header"; diff --git a/src/components/card/card-header.wp.scss b/src/components/card/card-header.wp.scss deleted file mode 100644 index 605e7f43b8..0000000000 --- a/src/components/card/card-header.wp.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "../../themes/ionic.globals"; -@import "./card-header"; diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss old mode 100644 new mode 100755 index 7b394c832e..55ae677001 --- a/src/components/card/card.ios.scss +++ b/src/components/card/card.ios.scss @@ -17,18 +17,6 @@ $card-ios-margin-bottom: 12px !default; /// @prop - Margin left of the card $card-ios-margin-left: 12px !default; -/// @prop - Padding top of the card -$card-ios-padding-top: 13px !default; - -/// @prop - Padding right of the card -$card-ios-padding-right: 16px !default; - -/// @prop - Padding bottom of the card -$card-ios-padding-bottom: 14px !default; - -/// @prop - Padding left of the card -$card-ios-padding-left: 16px !default; - /// @prop - Padding top of the media on the card $card-ios-padding-media-top: 10px !default; @@ -53,30 +41,6 @@ $card-ios-font-size: 1.4rem !default; /// @prop - Color of the card text $card-ios-text-color: #666 !default; -/// @prop - Font size of the card title -$card-ios-title-font-size: 1.8rem !default; - -/// @prop - Padding of the card title -$card-ios-title-padding: 8px 0 8px 0 !default; - -/// @prop - Margin of the card title -$card-ios-title-margin: 2px 0 2px !default; - -/// @prop - Color of the card title -$card-ios-title-text-color: #222 !default; - -/// @prop - Font size of the card header -$card-ios-header-font-size: 1.6rem !default; - -/// @prop - Font weight of the card header -$card-ios-header-font-weight: 500 !default; - -/// @prop - Padding of the card header -$card-ios-header-padding: 16px !default; - -/// @prop - Color of the card header -$card-ios-header-color: #333 !default; - .card-ios { margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left; @@ -104,21 +68,6 @@ $card-ios-header-color: #333 !default; border: 0; } -.card-content-ios { - padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left; - - font-size: $card-ios-font-size; - line-height: 1.4; -} - -.card-header-ios { - padding: $card-ios-header-padding; - - font-size: $card-ios-header-font-size; - font-weight: $card-ios-header-font-weight; - color: $card-ios-header-color; -} - .card-header-ios + .card-content-ios, .card-ios .item + .card-content-ios { padding-top: 0; @@ -128,17 +77,6 @@ $card-ios-header-color: #333 !default; font-size: 1.3rem; } -.card-title-ios { - display: block; - - margin: $card-ios-title-margin; - padding: $card-ios-title-padding; - - font-size: $card-ios-title-font-size; - line-height: 1.2; - color: $card-ios-title-text-color; -} - .card-ios h1 { margin: 0 0 2px; @@ -188,27 +126,15 @@ $card-ios-header-color: #333 !default; color: $color-contrast; background-color: $color-base; - .card-header-ios, - .card-title-ios, - .card-content-ios, p { color: $color-contrast; } @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - .text-ios-#{$color-name}, - .card-header-ios-#{$color-name}, - .card-title-ios-#{$color-name}, - .card-content-ios-#{$color-name} { + .text-ios-#{$color-name} { color: $color-base; } } } - .card-header-ios-#{$color-name}, - .card-title-ios-#{$color-name}, - .card-content-ios-#{$color-name} { - color: $color-base; - } - } diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss old mode 100644 new mode 100755 index 79fd69a7c7..b756b65d25 --- a/src/components/card/card.md.scss +++ b/src/components/card/card.md.scss @@ -17,19 +17,6 @@ $card-md-margin-bottom: 10px !default; /// @prop - Margin left of the card $card-md-margin-left: 10px !default; - -/// @prop - Padding top of the card -$card-md-padding-top: 13px !default; - -/// @prop - Padding right of the card -$card-md-padding-right: 16px !default; - -/// @prop - Padding bottom of the card -$card-md-padding-bottom: 13px !default; - -/// @prop - Padding left of the card -$card-md-padding-left: 16px !default; - /// @prop - Padding top of the media on the card $card-md-padding-media-top: 10px !default; @@ -51,7 +38,6 @@ $card-md-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px /// @prop - Border radius of the card $card-md-border-radius: 2px !default; - /// @prop - Font size of the card $card-md-font-size: 1.4rem !default; @@ -61,27 +47,6 @@ $card-md-line-height: 1.5 !default; /// @prop - Color of the card text $card-md-text-color: #222 !default; -/// @prop - Font size of the card title -$card-md-title-font-size: 2.4rem !default; - -/// @prop - Padding of the card title -$card-md-title-padding: 8px 0 8px 0 !default; - -/// @prop - Margin of the card title -$card-md-title-margin: 2px 0 2px !default; - -/// @prop - Color of the card title -$card-md-title-text-color: #222 !default; - -/// @prop - Font size of the card header -$card-md-header-font-size: 1.6rem !default; - -/// @prop - Padding of the card header -$card-md-header-padding: 16px !default; - -/// @prop - Color of the card header -$card-md-header-color: #222 !default; - .card-md { margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left; @@ -109,20 +74,6 @@ $card-md-header-color: #222 !default; border: 0; } -.card-content-md { - padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left; - - font-size: $card-md-font-size; - line-height: $card-md-line-height; -} - -.card-header-md { - padding: $card-md-header-padding; - - font-size: $card-md-header-font-size; - color: $card-md-header-color; -} - .card-header-md + .card-content-md, .card-md .item + .card-content-md { padding-top: 0; @@ -132,17 +83,6 @@ $card-md-header-color: #222 !default; font-size: 1.3rem; } -.card-title-md { - display: block; - - margin: $card-md-title-margin; - padding: $card-md-title-padding; - - font-size: $card-md-title-font-size; - line-height: 1.2; - color: $card-md-title-text-color; -} - .card-md h1 { margin: 0 0 2px; @@ -197,9 +137,6 @@ $card-md-header-color: #222 !default; color: $color-contrast; background-color: $color-base; - .card-header-md, - .card-title-md, - .card-content-md, h1, h2, h3, @@ -211,19 +148,10 @@ $card-md-header-color: #222 !default; } @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - .text-md-#{$color-name}, - .card-header-md-#{$color-name}, - .card-title-md-#{$color-name}, - .card-content-md-#{$color-name} { + .text-md-#{$color-name} { color: $color-base; } } } - .card-header-md-#{$color-name}, - .card-title-md-#{$color-name}, - .card-content-md-#{$color-name} { - color: $color-base; - } - } diff --git a/src/components/card/card.scss b/src/components/card/card.scss old mode 100644 new mode 100755 index dbc57555e6..e75c5208ad --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -1,6 +1,5 @@ @import "../../themes/ionic.globals"; - // Card // -------------------------------------------------- @@ -12,9 +11,8 @@ ion-card, visibility: inherit !important; } -ion-card img, -:host img { +ion-card img { display: block; width: 100%; -} \ No newline at end of file +} diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss old mode 100644 new mode 100755 index 2350386f7e..47ae8d99d9 --- a/src/components/card/card.wp.scss +++ b/src/components/card/card.wp.scss @@ -17,18 +17,6 @@ $card-wp-margin-bottom: 8px !default; /// @prop - Margin left of the card $card-wp-margin-left: 8px !default; -/// @prop - Padding top of the card -$card-wp-padding-top: 13px !default; - -/// @prop - Padding right of the card -$card-wp-padding-right: 16px !default; - -/// @prop - Padding bottom of the card -$card-wp-padding-bottom: 13px !default; - -/// @prop - Padding left of the card -$card-wp-padding-left: 16px !default; - /// @prop - Padding top of the media on the card $card-wp-padding-media-top: 10px !default; @@ -62,27 +50,6 @@ $card-wp-line-height: 1.5 !default; /// @prop - Color of the card text $card-wp-text-color: #222 !default; -/// @prop - Font size of card title -$card-wp-title-font-size: 2.4rem !default; - -/// @prop - Padding of the card title -$card-wp-title-padding: 8px 0 8px 0 !default; - -/// @prop - Margin of the card title -$card-wp-title-margin: 2px 0 !default; - -/// @prop - Color of the card title -$card-wp-title-text-color: #222 !default; - -/// @prop - Font size of the card header -$card-wp-header-font-size: 1.6rem !default; - -/// @prop - Padding of the card header -$card-wp-header-padding: 16px !default; - -/// @prop - Color of the card header -$card-wp-header-color: #222 !default; - .card-wp { margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left; @@ -110,21 +77,6 @@ $card-wp-header-color: #222 !default; border: 0; } -.card-content-wp { - padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left; - - font-size: $card-wp-font-size; - line-height: $card-wp-line-height; -} - -.card-header-wp { - padding: $card-wp-header-padding; - - font-size: $card-wp-header-font-size; - - color: $card-wp-header-color; -} - .card-header-wp + .card-content-wp, .card-wp .item + .card-content-wp { padding-top: 0; @@ -134,17 +86,6 @@ $card-wp-header-color: #222 !default; font-size: 1.3rem; } -.card-title-wp { - display: block; - - margin: $card-wp-title-margin; - padding: $card-wp-title-padding; - - font-size: $card-wp-title-font-size; - line-height: 1.2; - color: $card-wp-title-text-color; -} - .card-wp h1 { margin: 0 0 2px; @@ -199,9 +140,6 @@ $card-wp-header-color: #222 !default; color: $color-contrast; background-color: $color-base; - .card-header-wp, - .card-title-wp, - .card-content-wp, h1, h2, h3, @@ -213,19 +151,10 @@ $card-wp-header-color: #222 !default; } @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - .text-wp-#{$color-name}, - .card-header-wp-#{$color-name}, - .card-title-wp-#{$color-name}, - .card-content-wp-#{$color-name} { + .text-wp-#{$color-name} { color: $color-base; } } } - .card-header-wp-#{$color-name}, - .card-title-wp-#{$color-name}, - .card-content-wp-#{$color-name} { - color: $color-base; - } - }