Skip to content

Instantly share code, notes, and snippets.

@peterpme
Created February 6, 2014 15:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peterpme/8846790 to your computer and use it in GitHub Desktop.
Save peterpme/8846790 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="btn-close-container blue round base">
<div class="btn-close-outer">
<div class="btn-close-inner">
<p class="btn-close-x">X</p>
</div>
</div>
</div>
<div class="blue-box">ss</div>
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
.btn-close-container{
position:absolute;
font-family:sans-serif;
cursor:pointer;
%margin-reset{
margin:0;
padding:0;
}
&.base{
width:100px;
height:100px;
}
.btn-close-inner{
@extend %margin-reset;
width:100%;
height:100%;
top:0;
left:0;
display:table-cell;
vertical-align:middle;
}
& > .btn-close-outer{
@extend .btn-close-inner;
display:table;
}
.btn-close-x{
@extend %margin-reset;
text-align:center;
font-size:5em;
}
}
@mixin btn-close($bg-color,$width:100px, $height:100px, $fg-color:white, $fsize:2em){
width:$width;
height:$height;
color:$fg-color;
background-color:$bg-color;
font-size:$fsize;
}
.box{
width:100px;
height:100px;
}
.blue-box{
background:blue;
@extend .box;
}
.btn-close-container {
position: absolute;
font-family: sans-serif;
cursor: pointer;
}
.btn-close-container .btn-close-inner, .btn-close-container > .btn-close-outer, .btn-close-container .btn-close-x {
margin: 0;
padding: 0;
}
.btn-close-container.base {
width: 100px;
height: 100px;
}
.btn-close-container .btn-close-inner, .btn-close-container > .btn-close-outer {
width: 100%;
height: 100%;
top: 0;
left: 0;
display: table-cell;
vertical-align: middle;
}
.btn-close-container > .btn-close-outer {
display: table;
}
.btn-close-container .btn-close-x {
text-align: center;
font-size: 5em;
}
.box, .blue-box {
width: 100px;
height: 100px;
}
.blue-box {
background: blue;
}
<div class="btn-close-container blue round base">
<div class="btn-close-outer">
<div class="btn-close-inner">
<p class="btn-close-x">X</p>
</div>
</div>
</div>
<div class="blue-box">ss</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment