Skip to content

Instantly share code, notes, and snippets.

@AleksejDix
Created February 24, 2016 13:10
Show Gist options
  • Save AleksejDix/b9c2ab6eebfc48fd28d0 to your computer and use it in GitHub Desktop.
Save AleksejDix/b9c2ab6eebfc48fd28d0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="page">
<ul class="list-media">
<li class="list-media__item">
<div class="flag flag--top">
<div class="flag__media"> <img src="https://cdn.siroop.ch/media/images/sized/ZfV81H_AQ49u4D0pql3ikw.200x200.jpg"/></div>
<div class="flag__body">
<div class="product__title"></div>
<div class="product__top-feature"></div>
<div class="product__price">ab <span class="price__currensy">CHF </span><strong class="price__amount">99.99 </strong></div>
</div>
</div>
</li>
</ul>
</div>
// ----
// libsass (v3.2.5)
// ----
.page{
font-family: sans-serif;
}
strong{
font-weight:bold;
}
.flag {
display: table;
width: 100%;
&__media,
&__body {
display: table-cell;
vertical-align: middle;
.flag--top & {
vertical-align: top;
}
}
&__media {
padding-right: 10px;
img {
display: block;
max-width: none;
}
}
&__body {
width: 100%;
}
}
.price{
font-size: 30px;
}
.page {
font-family: sans-serif;
}
strong {
font-weight: bold;
}
.flag {
display: table;
width: 100%;
}
.flag__media,
.flag__body {
display: table-cell;
vertical-align: middle;
}
.flag--top .flag__media,
.flag--top .flag__body {
vertical-align: top;
}
.flag__media {
padding-right: 10px;
}
.flag__media img {
display: block;
max-width: none;
}
.flag__body {
width: 100%;
}
.price {
font-size: 30px;
}
<div class="page">
<ul class="list-media">
<li class="list-media__item">
<div class="flag flag--top">
<div class="flag__media"> <img src="https://cdn.siroop.ch/media/images/sized/ZfV81H_AQ49u4D0pql3ikw.200x200.jpg"/></div>
<div class="flag__body">
<div class="product__title"></div>
<div class="product__top-feature"></div>
<div class="product__price">ab <span class="price__currensy">CHF </span><strong class="price__amount">99.99 </strong></div>
</div>
</div>
</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment