javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(thumbnail): add stand alone styles for thumbnail

Browse Source
This commit is contained in:
Brandy Carney
2017-11-30 17:58:10 -05:00
parent f3e7021ba1
commit 1151646e71
9 changed files with 106 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/src/components/item/item.ios.scss
View File

@ -130,14 +130,8 @@
// -------------------------------------------------- // --------------------------------------------------
.item-ios ion-thumbnail { .item-ios ion-thumbnail {
min-width: $item-ios-thumbnail-size; width: $item-ios-thumbnail-width;
min-height: $item-ios-thumbnail-size; height: $item-ios-thumbnail-height;
}
.item-ios ion-thumbnail ion-img,
.item-ios ion-thumbnail img {
width: $item-ios-thumbnail-size;
height: $item-ios-thumbnail-size;
} }

7
packages/core/src/components/item/item.ios.vars.scss
View File

@ -30,8 +30,11 @@ $item-ios-avatar-width: 36px !default;
/// @prop - Height of the avatar in the item /// @prop - Height of the avatar in the item
$item-ios-avatar-height: $item-ios-avatar-width !default; $item-ios-avatar-height: $item-ios-avatar-width !default;
/// @prop - Size of the thumbnail in the item /// @prop - Width of the thumbnail in the item
$item-ios-thumbnail-size: 56px !default; $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 /// @prop - Shows the detail arrow icon on an item
$item-ios-detail-push-show: true !default; $item-ios-detail-push-show: true !default;

10
packages/core/src/components/item/item.md.scss
View File

@ -142,14 +142,8 @@
// -------------------------------------------------- // --------------------------------------------------
.item-md ion-thumbnail { .item-md ion-thumbnail {
min-width: $item-md-thumbnail-size; width: $item-md-thumbnail-width;
min-height: $item-md-thumbnail-size; height: $item-md-thumbnail-height;
}
.item-md ion-thumbnail ion-img,
.item-md ion-thumbnail img {
width: $item-md-thumbnail-size;
height: $item-md-thumbnail-size;
} }

7
packages/core/src/components/item/item.md.vars.scss
View File

@ -21,8 +21,11 @@ $item-md-avatar-width: 40px !default;
/// @prop - Height of the avatar in the item /// @prop - Height of the avatar in the item
$item-md-avatar-height: $item-md-avatar-width !default; $item-md-avatar-height: $item-md-avatar-width !default;
/// @prop - Size of the thumbnail in the item /// @prop - Width of the thumbnail in the item
$item-md-thumbnail-size: 80px !default; $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 /// @prop - Shows the detail arrow icon on an item
$item-md-detail-push-show: false !default; $item-md-detail-push-show: false !default;

36
packages/core/src/components/thumbnail/test/basic/index.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Thumbnail - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Thumbnail - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-thumbnail>
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-item>
<ion-thumbnail slot="start">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-label>Item Thumbnail</ion-label>
</ion-item>
</ion-content>
</ion-page>
</ion-app>
</body>
</html>

16
packages/core/src/components/thumbnail/thumbnail.ios.scss
View File

@ -1,6 +1,20 @@
@import "../../themes/ionic.globals.ios";
@import "./thumbnail"; @import "./thumbnail";
@import "./thumbnail.ios.vars";
// iOS Thumbnail // 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;
}

13
packages/core/src/components/thumbnail/thumbnail.ios.vars.scss Normal file
View File

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

17
packages/core/src/components/thumbnail/thumbnail.md.scss
View File

@ -1,6 +1,19 @@
@import "../../themes/ionic.globals.md";
@import "./thumbnail"; @import "./thumbnail";
@import "./thumbnail.md.vars";
// Material Design Thumbnail // 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;
}

13
packages/core/src/components/thumbnail/thumbnail.md.vars.scss Normal file
View File

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