Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Allow sizing via CSS font-size #5

Merged
merged 2 commits into from
Jul 31, 2014
Merged

Allow sizing via CSS font-size #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cef344
Fix demo styles
cletusw Jul 15, 2014
daf3b6b
Allow core-item to be sized via CSS font-size
cletusw Jul 15, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions core-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ html /deep/ core-item {
white-space: nowrap;
}

html /deep/ core-item.font-scalable {
min-height: 2.5em;
}

html /deep/ core-item.core-selected {
font-weight: bold;
}
Expand All @@ -22,6 +26,12 @@ html /deep/ core-item::shadow core-icon {
margin: 0 16px 0 4px;
}

html /deep/ core-item.font-scalable::shadow core-icon {
margin: 0 1em 0 0.25em;
height: 1.5em;
width: 1.5em;
}

html /deep/ core-item::shadow ::content > a {
position: absolute;
top: 0;
Expand Down
29 changes: 26 additions & 3 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,35 @@

body {
font-family: sans-serif;
font-size: 16px;
margin: 20px;
}

core-item {
width: 300px;
}

core-item.big {
font-size: 24px;
}

core-item.small {
font-size: 12px;
}

core-item.contact-item {
height: 50px;
background-color: #efefef;
border: 1px solid #ddd;
}

core-item.contact-item .name {
font-size: 1.125em;
}

core-item.contact-item .address {
font-size: 0.75em;
}

</style>

Expand All @@ -45,13 +62,19 @@ <h2>links (via &lt;a&gt;):</h2>

<core-item icon="settings" label="Settings"><a href="#settings" target="_self"></a></core-item>
<core-item icon="account-box" label="Account"><a href="#account" target="_self"></a></core-item>

<h2>items sized with CSS:</h2>
<core-item icon="settings" label="Settings" class="font-scalable big"></core-item>
<core-item icon="account-box" label="Account" class="font-scalable big"></core-item>
<core-item icon="settings" label="Settings" class="font-scalable small"></core-item>
<core-item icon="account-box" label="Account" class="font-scalable small"></core-item>

<h2>custom item:</h2>

<core-item icon="account-circle" class="label-outline">
<core-item icon="account-circle" class="contact-item">
<div flex>
<div style="font-size: 18px;">John Doe</div>
<div style="font-size: 12px;">123 A Street, San Francisco, CA</div>
<div class="name">John Doe</div>
<div class="address">123 A Street, San Francisco, CA</div>
</div>
<core-icon icon="more-vert"></core-icon>
</core-item>
Expand Down