Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
extendo fabuloso
<button class="extendor" onclick="invert()">wow fab x</button>
<pre>[click the button for funsies]</pre>
<footer hidden>
<p>Dedicated to my late mum</p>
<p>She would always end her texts with a variant on "fab x" or "wow fab x"</p>
<p>💖💖💖</p>
</footer>
var count = 0;
function invert() {
document.body.classList.toggle('invert');
count++;
if (count > 3) {
document.querySelectorAll('[hidden]').forEach(el => el.hidden = false);
}
}
@mixin extendor($extend, $border: 0px) {
position: relative;
border-width: $border;
margin: $extend;
&, &::before, &::after {
transition: transform 100ms ease-in-out;
}
&::before, &::after {
content: '';
position: absolute;
border: 0 solid transparent;
z-index: -1;
transition-property: border-width, top, left, bottom, right;
}
&::before {
top: -$border;
right: calc(100% + #{$border});
bottom: -$border;
border-right-color: inherit;
}
&::after {
top: calc(100% + #{$border});
left: -$border;
right: -$border;
border-top-color: inherit;
}
&:hover, &:focus {
&::before {
border-top-width: $extend;
border-right-width: $extend;
bottom: -($extend + $border);
}
&::after {
border-top-width: $extend;
border-right-width: $extend;
left: -($extend + $border);
}
}
&:active {
transform: translateX(-$border) translateY($border);
&, &::before, &::after {
transition-duration: 50ms;
}
&::before {
border-top-width: $extend - $border;
border-right-width: $extend - $border;
bottom: -$extend;
}
&::after {
border-top-width: $extend - $border;
border-right-width: $extend - $border;
left: -$extend;
}
}
}
.extendor {
padding: 10px;
display: inline-block;
@include extendor(6px, 2px); // odd total number can produce half-pixel rendering oddities
min-width: 100px;
min-height: 44px;
}
button {
appearance: none;
cursor: pointer;
color: inherit;
font-size: inherit;
margin: 1em 0;
background: none;
border-color: inherit;
border-style: solid;
}
body {
background-color: white;
color: black;
font-family: Helvetica, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 500px;
&.invert {
background-color: black;
color: white;
}
}
* {
box-sizing: border-box;
}
[hidden] {
display: initial;
visibility: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment