Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="volume-estimator-output">
<p class="text-center">You will love</p>
<p id="volume-result" class="readonly-output">0</p>
<p class="text-center">Litres</p>
</div>
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
body {
text-align: center;
font-family: helvetica;
}
.volume-estimator-output {
$size--crosshair: 35px;
$borderWidth--crosshair: 1px;
$grid-gutter-width: 20px;
$color-ocean--btnPrimary: #004879;
@mixin positioner($pos, $top: null, $right: null, $bottom: null, $left: null) {
position: $pos;
top: if($top, $top, auto);
right: if($right, $right, auto);
bottom: if($bottom, $bottom, auto);
left: if($left, $left, auto);
}
position: relative;
margin-top: $grid-gutter-width;
padding-top: $grid-gutter-width;
padding-bottom: $grid-gutter-width;
border: $borderWidth--crosshair solid $color-ocean--btnPrimary;
width: 20%;
&:before {
content: "";
display: block;
@include positioner(
absolute,
-($borderWidth--crosshair),
$size--crosshair,
-($borderWidth--crosshair),
$size--crosshair
);
border-top: $borderWidth--crosshair solid #fff;
border-bottom: $borderWidth--crosshair solid #fff;
}
&:after {
content: "";
display: block;
@include positioner(
absolute,
$size--crosshair,
-($borderWidth--crosshair),
$size--crosshair,
-($borderWidth--crosshair)
);
border-left: $borderWidth--crosshair solid #fff;
border-right: $borderWidth--crosshair solid #fff;
}
}
.readonly-output {
font-size: 3em;
line-height: 1;
font-weight: bold;
}
p {
margin: 10px;
}
body {
text-align: center;
font-family: helvetica;
}
.volume-estimator-output {
position: relative;
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
border: 1px solid #004879;
width: 20%;
}
.volume-estimator-output:before {
content: "";
display: block;
position: absolute;
top: -1px;
right: 35px;
bottom: -1px;
left: 35px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.volume-estimator-output:after {
content: "";
display: block;
position: absolute;
top: 35px;
right: -1px;
bottom: 35px;
left: -1px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.readonly-output {
font-size: 3em;
line-height: 1;
font-weight: bold;
}
p {
margin: 10px;
}
<div class="volume-estimator-output">
<p class="text-center">You will love</p>
<p id="volume-result" class="readonly-output">0</p>
<p class="text-center">Litres</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment