Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The .ticket-punch() mix-in allows for very easy creation of "punchouts" on the left and right side of an element using :before and :after pseudo-elements.
.ticket(@size: 11px, @bgColor: #fff, @borderStyle: solid, @borderWidth: 1px, @borderColor: #333) {
position: relative;
border: @borderStyle @borderWidth @borderColor;
text-align: center;
padding: 10px 20px;
display: inline-block;
&:before {
position: absolute;
content: '';
width: @size;
height: @size;
background-color: @bgColor;
border-radius: 50%;
left: (@size / 2 * -1);
top: 50%;
margin-top: (@size / 2 * -1);
border-right: @borderStyle @borderWidth @borderColor;
}
&:after {
position: absolute;
content: '';
width: @size;
height: @size;
background-color: @bgColor;
border-radius: 50%;
right: (@size / 2 * -1);
top: 50%;
margin-top: (@size / 2 * -1);
border-left: @borderStyle @borderWidth @borderColor;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment