javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

item media updates

Browse Source
This commit is contained in:
Adam Bradley
2015-07-27 16:00:09 -05:00
parent 4698763ce7
commit 7084d54712
6 changed files with 89 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ionic/components/item/extensions/ios.scss
View File

@@ -6,12 +6,15 @@ $item-ios-border-color: #c8c7cc !default;
$item-ios-font-size: 1.6rem !default;
$item-ios-padding-top: 13px !default;
$item-ios-padding-right: 15px !default;
$item-ios-padding-right: 16px !default;
$item-ios-padding-bottom: 14px !default;
$item-ios-padding-left: 15px !default;
$item-ios-padding-left: 16px !default;
$item-ios-avatar-size: 4rem !default;
$item-ios-thumbnail-size: 8rem !default;
$item-ios-padding-media-top: 10px !default;
$item-ios-padding-media-bottom: 11px !default;
$item-ios-avatar-size: 3.6rem !default;
$item-ios-thumbnail-size: 5.6rem !default;
$item-ios-note-color: #999 !default;
@@ -42,12 +45,15 @@ $item-ios-note-color: #999 !default;
.text-input,
.input-label,
.item-media,
.item-content,
.item-note {
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
}
.item-media {
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom $item-ios-padding-left;
}
.item-note {
color: $item-ios-note-color;
}
@@ -83,16 +89,6 @@ $item-ios-note-color: #999 !default;
max-height: $item-ios-thumbnail-size;
}
.vertical-align-top {
button,
[button] {
margin-top: $item-ios-padding-top;
}
> icon {
margin-top: $item-ios-padding-top / 2;
}
}
.item-input {
&:before,
&:after {
@@ -103,6 +99,16 @@ $item-ios-note-color: #999 !default;
}
.hairlines .list[mode="ios"] .item {
margin-top: -0.5px;
&:before,
&:after {
border-top-width: 0.5px;
}
}
/*
.list[mode="ios"] {
margin-top: -1px;

10
ionic/components/item/extensions/material.scss
View File

@@ -83,16 +83,6 @@ $item-md-note-color: #999 !default;
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;
}

15
ionic/components/item/item.scss
View File

@@ -84,6 +84,10 @@ button.item.item {
padding: 0;
}
.item icon {
font-size: 2.4rem;
}
.list .item button.icon-only,
.item button.icon-only icon {
padding: 0;
@@ -111,12 +115,13 @@ button.item.item {
line-height: normal;
margin: 0 0 3px 0;
font-size: 1.4rem;
font-weight: normal;
}
p {
line-height: normal;
color: #666;
font-size: 1.4rem;
font-size: 1.2rem;
margin: 0 0 2px;
}
@@ -151,6 +156,14 @@ button.item.item {
margin-top: -13px;
}
.item .item-media {
line-height: 1;
img {
display: block;
}
}
/*
.item-group-title {

9
ionic/components/item/test/icons/main.html
View File

@@ -30,6 +30,13 @@
<icon name="ion-ios-information-outline"></icon>
</a>
<a class="item" href="#">
<div class="item-content">
Link with right side icon
</div>
<icon name="ion-ios-information-outline"></icon>
</a>
<button class="item">
<icon name="ion-star"></icon>
<div class="item-content">
@@ -42,7 +49,7 @@
<div class="item-content">
Button with both side icons
</div>
<icon name="ion-settings"></icon>
<icon name="ion-ios-checkmark"></icon>
</button>
<a class="item" href="#">

58
ionic/components/item/test/media/main.html
View File

@@ -1,10 +1,16 @@
<ion-toolbar><ion-title>Item Media</ion-title></ion-toolbar>
<!--
class="line-media"
class="line-none"
class="line-full"
-->
<ion-list>
<button class="item">
<div class="item-media">
<div class="avatar"></div>
<img class="avatar" src="data:image/gif;base64,R0lGODlhCAAIAIAAAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MUVDRkVFRjJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MUVDRkVGMDJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgxRUNGRUVEMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgxRUNGRUVFMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAgACAAAAgeEj6nL7V0AADs=">
</div>
<div class="item-content">
Media/Avatar left, button.item
@@ -13,31 +19,59 @@
<a class="item" href="#">
<div class="item-content">
Media/Thumbnail right side, a.item
Media/Avatar right, a.item
</div>
<div class="item-media">
<div class="thumbnail"></div>
<img class="avatar" src="data:image/gif;base64,R0lGODlhCAAIAIAAAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MUVDRkVFRjJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MUVDRkVGMDJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgxRUNGRUVEMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgxRUNGRUVFMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAgACAAAAgeEj6nL7V0AADs=">
</div>
</a>
<div class="item vertical-align-top">
<div class="item">
<div class="item-media">
<div class="thumbnail"></div>
<img class="avatar" src="data:image/gif;base64,R0lGODlhCAAIAIAAAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MUVDRkVFRjJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MUVDRkVGMDJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgxRUNGRUVEMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgxRUNGRUVFMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAgACAAAAgeEj6nL7V0AADs=">
</div>
<div class="item-content">
<h3>Media w/ Multiline</h3>
<p>Button on right</p>
<p>Vertically align top</p>
Media/Avatar, right button
</div>
<button primary outline>View</button>
</div>
<button class="item vertical-align-top">
<a class="item" href="#">
<div class="item-media">
<div class="thumbnail"></div>
<img class="avatar" src="data:image/gif;base64,R0lGODlhCAAIAIAAAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MUVDRkVFRjJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MUVDRkVGMDJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgxRUNGRUVEMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgxRUNGRUVFMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAgACAAAAgeEj6nL7V0AADs=">
</div>
<div class="item-content">
<h3>Media w/ Multiline</h3>
<h2>H2 Title Text</h2>
<p>Paragraph text</p>
</div>
</a>
<a class="item" href="#">
<div class="item-content">
Media/Thumbnail right side, a.item
</div>
<div class="item-media">
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhCAAIAIAAAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MUVDRkVFRjJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MUVDRkVGMDJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgxRUNGRUVEMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgxRUNGRUVFMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAgACAAAAgeEj6nL7V0AADs=">
</div>
</a>
<div class="item">
<div class="item-media">
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhCAAIAIAAAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MUVDRkVFRjJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MUVDRkVGMDJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgxRUNGRUVEMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgxRUNGRUVFMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAgACAAAAgeEj6nL7V0AADs=">
</div>
<div class="item-content">
<h2>H2 Title Text</h2>
<p>Button on right</p>
</div>
<button primary outline>View</button>
</div>
<button class="item">
<div class="item-media">
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhCAAIAIAAAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MUVDRkVFRjJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MUVDRkVGMDJDQkExMUU1OUVCQ0VCRDkzODI3QUZCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgxRUNGRUVEMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgxRUNGRUVFMkNCQTExRTU5RUJDRUJEOTM4MjdBRkJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAgACAAAAgeEj6nL7V0AADs=">
</div>
<div class="item-content">
<h3>H3 Title Text</h3>
<p>Icon on right</p>
<p>Vertically align top</p>
<p>button.item</p>
@@ -52,7 +86,5 @@
.thumbnail {
width: 100px;
height: 100px;
background: black;
display: inline-block;
}
</style>

2
scripts/snapshot/snapshot.config.js
View File

@@ -21,7 +21,7 @@ exports.config = {
platform_index: 0,
platform_count: 1,
width: 400,
height: 800
height: 760
}
},