Skip to content

Instantly share code, notes, and snippets.

@jsit

jsit/SassMeister-input-HTML.html

Created June 12, 2014 14:48
Show Gist options
  • Save jsit/d4e7eb8ff84f0dc0d9d3 to your computer and use it in GitHub Desktop.
Save jsit/d4e7eb8ff84f0dc0d9d3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="box-list download-box">
<div class="box-title">downloads</div>
<ul>
<li><a href="#">Guia de Aprendizagem Rápida Action.NET<br><span class="file-size">(450kb)</span></a></li>
<li><a href="#">Palestra para Usuários Action.NET<br><span class="file-size">(450kb)</span></a></li>
<li><a href="#">Agrupamentos pontos ONS 2.7<br><span class="file-size">(450kb)</span></a></li>
<li><a href="#">Protocolo DNP 3.0 Mestre<br><span class="file-size">(450kb)</span></a></li>
<li><a href="#">Palestra SPIN CTEEP SE Centro<br><span class="file-size">(450kb)</span></a></li>
</ul>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
@mixin box-list($item-height: 35px, $item-spacing: 0, $title-bgc: #c4c4c4, $title-color: black, $item-bgc: #e2e2e2, $item-color: black, $case: none){
.box-title{
background-color: $title-bgc;
height: $item-height;
padding: 10px;
color: white;
text-transform: $case;
}
ul{
list-style: none;
margin: 0;
padding: 0;
li a{
color: $item-color;
display: block;
min-height: $item-height;
padding: 10px;
background-color: $item-bgc;
margin-bottom: $item-spacing;
&:hover{
background-color: #0384ad;
color: white;
}
}
}
}
.download-box{
width: 370px;
float: right;
margin: 0 0 20px 20px;
overflow: hidden;
@include box-list(35px,2px,blue,white,#b3e5fa,black,uppercase);
}
Raw
SassMeister-output.css
.download-box {
width: 370px;
float: right;
margin: 0 0 20px 20px;
overflow: hidden;
}
.download-box .box-title {
background-color: blue;
height: 35px;
padding: 10px;
color: white;
text-transform: uppercase;
}
.download-box ul {
list-style: none;
margin: 0;
padding: 0;
}
.download-box ul li a {
color: black;
display: block;
min-height: 35px;
padding: 10px;
background-color: #b3e5fa;
margin-bottom: 2px;
}
.download-box ul li a:hover {
background-color: #0384ad;
color: white;
}
Raw
SassMeister-rendered.html
<div class="box-list download-box">
<div class="box-title">downloads</div>
<ul>
<li><a href="#">Guia de Aprendizagem Rápida Action.NET<br><span class="file-size">(450kb)</span></a></li>
<li><a href="#">Palestra para Usuários Action.NET<br><span class="file-size">(450kb)</span></a></li>
<li><a href="#">Agrupamentos pontos ONS 2.7<br><span class="file-size">(450kb)</span></a></li>
<li><a href="#">Protocolo DNP 3.0 Mestre<br><span class="file-size">(450kb)</span></a></li>
<li><a href="#">Palestra SPIN CTEEP SE Centro<br><span class="file-size">(450kb)</span></a></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment