Skip to content

Instantly share code, notes, and snippets.

@greystate

greystate/dabblet.css

Created March 4, 2019 22:36
Show Gist options
  • Save greystate/2fedff16142e4f83211eb36a459cb46c to your computer and use it in GitHub Desktop.
Save greystate/2fedff16142e4f83211eb36a459cb46c to your computer and use it in GitHub Desktop.
Download ZIP
Dot with underlay
Raw
dabblet.css
/**
* Dot with underlay
*/
.dot {
transition: max-width 0.7s ease-out;
box-sizing: border-box;
position: relative;
border-radius: 17px;
padding: 7px 17px 7px 7px;
background-color: rgba(0, 0, 0, 0.5);
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 34px;
}
.dot::before {
position: absolute;
left: 7px;
top: 7px;
content: "";
display: block;
width: 20px;
height: 20px;
background-color: rgba(255, 79, 79, 0.55);
border-radius: 50%;
}
.dot.ok::before {
background-color: rgba(70, 241, 110, 0.55);
}
.dot::after {
transition: 0.2s linear;
position: absolute;
content: "";
display: block;
width: 4px;
height: 4px;
background-color: #fff;
left: 15px;
top: 15px;
border-radius: 50%;
}
.dot a {
margin-left: 37px;
font-size: 16px;
line-height: 20px;
color:#fff;
}
.dot:hover, .dot:focus-within {
max-width: 25em;
}
.dot:hover::after, .dot:focus-within::after {
left: 12px;
top: 12px;
width: 10px;
height: 10px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="dot bad">
<a href="#somewhere">Se mere</a>
</div>
<div class="dot ok">
<a href="#somewhere">Se mere</a>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment