Skip to content

Instantly share code, notes, and snippets.

@danmatthews
Created February 25, 2014 20:01
Show Gist options
  • Save danmatthews/9216579 to your computer and use it in GitHub Desktop.
Save danmatthews/9216579 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h3>Recommend rating</h3>
<div class="simply-widget-container">
<div class="widget-instance">
<div class="simply-link">Provided by Simply Satisfied.</div>
<div class="simply-recommend-rating">49<span class="pc">%</span></div>
<p>Would recommend Simply Satisfied to someone else.</p>
</div>
</div>
<hr />
<h3>Satisfaction rating.</h3>
<div class="simply-widget-container">
<div class="widget-instance">
<div class="simply-link">Provided by Simply Satisfied.</div>
<div class="simply-rating">100<span class="pc">%</span></div>
<p>Average customer satisfaction rating.</p>
</div>
</div>
<hr />
<h3>Large Widget</h3>
<div class="simply-widget-container simply-both">
<div class="widget-instance">
<div class="simply-rating">84<span class="pc">%</span></div>
<p>Average customer satisfaction rating.</p>
</div>
<div class="widget-instance">
<div class="simply-recommend-rating">49<span class="pc">%</span></div>
<p>Of customers would recommend Simply Satisfied to someone else.</p>
</div>
</div>
// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// Bourbon (v3.1.8)
// ----
@import "bourbon/bourbon";
$brand-color: #2980b9;
body {
font: {
family: sans-serif;
};
}
.simply-widget-container {
-webkit-font-smoothing: antialiased;
height: 80px;
color: #151515;
width: 320px;
overflow: hidden;
border-radius: 3px;
position: relative;
&.simply-both {
height: 160px;
}
div.widget-instance {
overflow: hidden;
background: whitesmoke;
@include linear-gradient(to bottom, #f5f5f5, #eeeeee);
clear:left;
}
div.simply-link {
position: absolute;
bottom: 15px;
left: 111px;
font-size: 11px;
line-height: 0px;
color: #666;
}
div.simply-recommend-rating,
div.simply-rating {
font-size: 24px;
color:#ffffff;
line-height: 80px;
height: 80px;
width: 80px;
padding: 0 0px;
float: left;
background: $brand-color;
@include linear-gradient(to bottom, lighten($brand-color, 5%), $brand-color);
border-right: 1px solid darken($brand-color, 5%);
margin: 0 0px 0 0;
text-align: center;
font-weight: bold;
span.pc {
font-size: 16px;
}
}
p {
font-size: 12px;
line-height: 18px;
margin: 0;
max-width: 200px;
padding: 10px 0 0 15px;
float:left;
}
}
body { font-family: sans-serif; }
.simply-widget-container { -webkit-font-smoothing: antialiased; height: 80px; color: #151515; width: 320px; overflow: hidden; border-radius: 3px; position: relative; }
.simply-widget-container.simply-both { height: 160px; }
.simply-widget-container div.widget-instance { overflow: hidden; background: whitesmoke; background-color: whitesmoke; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, whitesmoke), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(top, whitesmoke, #eeeeee); background-image: linear-gradient(to bottom,whitesmoke, #eeeeee); clear: left; }
.simply-widget-container div.simply-link { position: absolute; bottom: 15px; left: 111px; font-size: 11px; line-height: 0px; color: #666; }
.simply-widget-container div.simply-recommend-rating, .simply-widget-container div.simply-rating { font-size: 24px; color: #ffffff; line-height: 80px; height: 80px; width: 80px; padding: 0 0px; float: left; background: #2980b9; background-color: #2e8ece; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2e8ece), color-stop(100%, #2980b9)); background-image: -webkit-linear-gradient(top, #2e8ece, #2980b9); background-image: linear-gradient(to bottom,#2e8ece, #2980b9); border-right: 1px solid #2472a4; margin: 0 0px 0 0; text-align: center; font-weight: bold; }
.simply-widget-container div.simply-recommend-rating span.pc, .simply-widget-container div.simply-rating span.pc { font-size: 16px; }
.simply-widget-container p { font-size: 12px; line-height: 18px; margin: 0; max-width: 200px; padding: 10px 0 0 15px; float: left; }
<h3>Recommend rating</h3>
<div class="simply-widget-container">
<div class="widget-instance">
<div class="simply-link">Provided by Simply Satisfied.</div>
<div class="simply-recommend-rating">49<span class="pc">%</span></div>
<p>Would recommend Simply Satisfied to someone else.</p>
</div>
</div>
<hr />
<h3>Satisfaction rating.</h3>
<div class="simply-widget-container">
<div class="widget-instance">
<div class="simply-link">Provided by Simply Satisfied.</div>
<div class="simply-rating">100<span class="pc">%</span></div>
<p>Average customer satisfaction rating.</p>
</div>
</div>
<hr />
<h3>Large Widget</h3>
<div class="simply-widget-container simply-both">
<div class="widget-instance">
<div class="simply-rating">84<span class="pc">%</span></div>
<p>Average customer satisfaction rating.</p>
</div>
<div class="widget-instance">
<div class="simply-recommend-rating">49<span class="pc">%</span></div>
<p>Of customers would recommend Simply Satisfied to someone else.</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment