diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss index 164246db46..2dbdea3c77 100644 --- a/packages/core/src/components/item/item.ios.scss +++ b/packages/core/src/components/item/item.ios.scss @@ -130,14 +130,8 @@ // -------------------------------------------------- .item-ios ion-thumbnail { - min-width: $item-ios-thumbnail-size; - min-height: $item-ios-thumbnail-size; -} - -.item-ios ion-thumbnail ion-img, -.item-ios ion-thumbnail img { - width: $item-ios-thumbnail-size; - height: $item-ios-thumbnail-size; + width: $item-ios-thumbnail-width; + height: $item-ios-thumbnail-height; } diff --git a/packages/core/src/components/item/item.ios.vars.scss b/packages/core/src/components/item/item.ios.vars.scss index 86831536fa..46060a068e 100644 --- a/packages/core/src/components/item/item.ios.vars.scss +++ b/packages/core/src/components/item/item.ios.vars.scss @@ -30,8 +30,11 @@ $item-ios-avatar-width: 36px !default; /// @prop - Height of the avatar in the item $item-ios-avatar-height: $item-ios-avatar-width !default; -/// @prop - Size of the thumbnail in the item -$item-ios-thumbnail-size: 56px !default; +/// @prop - Width of the thumbnail in the item +$item-ios-thumbnail-width: 56px !default; + +/// @prop - Height of the thumbnail in the item +$item-ios-thumbnail-height: $item-ios-thumbnail-width !default; /// @prop - Shows the detail arrow icon on an item $item-ios-detail-push-show: true !default; diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss index aba37a7043..93fe21b012 100644 --- a/packages/core/src/components/item/item.md.scss +++ b/packages/core/src/components/item/item.md.scss @@ -142,14 +142,8 @@ // -------------------------------------------------- .item-md ion-thumbnail { - min-width: $item-md-thumbnail-size; - min-height: $item-md-thumbnail-size; -} - -.item-md ion-thumbnail ion-img, -.item-md ion-thumbnail img { - width: $item-md-thumbnail-size; - height: $item-md-thumbnail-size; + width: $item-md-thumbnail-width; + height: $item-md-thumbnail-height; } diff --git a/packages/core/src/components/item/item.md.vars.scss b/packages/core/src/components/item/item.md.vars.scss index fdecf79e79..538808fc30 100644 --- a/packages/core/src/components/item/item.md.vars.scss +++ b/packages/core/src/components/item/item.md.vars.scss @@ -21,8 +21,11 @@ $item-md-avatar-width: 40px !default; /// @prop - Height of the avatar in the item $item-md-avatar-height: $item-md-avatar-width !default; -/// @prop - Size of the thumbnail in the item -$item-md-thumbnail-size: 80px !default; +/// @prop - Width of the thumbnail in the item +$item-md-thumbnail-width: 80px !default; + +/// @prop - Height of the thumbnail in the item +$item-md-thumbnail-height: $item-md-thumbnail-width !default; /// @prop - Shows the detail arrow icon on an item $item-md-detail-push-show: false !default; diff --git a/packages/core/src/components/thumbnail/test/basic/index.html b/packages/core/src/components/thumbnail/test/basic/index.html new file mode 100644 index 0000000000..d740c61621 --- /dev/null +++ b/packages/core/src/components/thumbnail/test/basic/index.html @@ -0,0 +1,36 @@ + + + + + + Thumbnail - Basic + + + + + + + + + + Thumbnail - Basic + + + + + + + + + + + + + Item Thumbnail + + + + + + + diff --git a/packages/core/src/components/thumbnail/thumbnail.ios.scss b/packages/core/src/components/thumbnail/thumbnail.ios.scss index c8b40bfd5d..885200b277 100644 --- a/packages/core/src/components/thumbnail/thumbnail.ios.scss +++ b/packages/core/src/components/thumbnail/thumbnail.ios.scss @@ -1,6 +1,20 @@ -@import "../../themes/ionic.globals.ios"; @import "./thumbnail"; +@import "./thumbnail.ios.vars"; // iOS Thumbnail // -------------------------------------------------- + +.thumbnail-ios { + @include border-radius($thumbnail-ios-border-radius); + + width: $thumbnail-ios-width; + height: $thumbnail-ios-height; +} + +.thumbnail-ios ion-img, +.thumbnail-ios img { + @include border-radius($thumbnail-ios-border-radius); + + overflow: hidden; +} \ No newline at end of file diff --git a/packages/core/src/components/thumbnail/thumbnail.ios.vars.scss b/packages/core/src/components/thumbnail/thumbnail.ios.vars.scss new file mode 100644 index 0000000000..85d53e58a4 --- /dev/null +++ b/packages/core/src/components/thumbnail/thumbnail.ios.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Thumbnail +// -------------------------------------------------- + +/// @prop - Width of the thumbnail +$thumbnail-ios-width: 48px !default; + +/// @prop - Height of the thumbnail +$thumbnail-ios-height: $thumbnail-ios-width !default; + +/// @prop - Border radius of the thumbnail +$thumbnail-ios-border-radius: 0 !default; diff --git a/packages/core/src/components/thumbnail/thumbnail.md.scss b/packages/core/src/components/thumbnail/thumbnail.md.scss index e03360d188..aa36021795 100644 --- a/packages/core/src/components/thumbnail/thumbnail.md.scss +++ b/packages/core/src/components/thumbnail/thumbnail.md.scss @@ -1,6 +1,19 @@ -@import "../../themes/ionic.globals.md"; @import "./thumbnail"; - +@import "./thumbnail.md.vars"; // Material Design Thumbnail // -------------------------------------------------- + +.thumbnail-md { + @include border-radius($thumbnail-md-border-radius); + + width: $thumbnail-md-width; + height: $thumbnail-md-height; +} + +.thumbnail-md ion-img, +.thumbnail-md img { + @include border-radius($thumbnail-md-border-radius); + + overflow: hidden; +} \ No newline at end of file diff --git a/packages/core/src/components/thumbnail/thumbnail.md.vars.scss b/packages/core/src/components/thumbnail/thumbnail.md.vars.scss new file mode 100644 index 0000000000..94e48b264d --- /dev/null +++ b/packages/core/src/components/thumbnail/thumbnail.md.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Thumbnail +// -------------------------------------------------- + +/// @prop - Width of the thumbnail +$thumbnail-md-width: 48px !default; + +/// @prop - Height of the thumbnail +$thumbnail-md-height: $thumbnail-md-width !default; + +/// @prop - Border radius of the thumbnail +$thumbnail-md-border-radius: 0 !default;