pre
span.token--sel #boo
|
span.token--punc {
br
span.token--rule
span.token--prop width
span.token--punc :
|
span.token--val
span.token--len
span.token--num 5
span.token--unit em
span.token--punc ;
br
span.token--rule
span.token--prop height
span.token--punc :
|
span.token--val
span.token--len
span.token--num 5
span.token--unit em
span.token--punc ;
br
span.token--rule
span.token--prop border
span.token--punc :
|
span.token--val
span.token--keyw solid
|
span.token--len
span.token--num 2
span.token--unit em
|
span.token--keyw goldenrod
span.token--punc ;
br
span.token--rule
span.token--prop background
span.token--punc :
|
span.token--val
span.token--hex #ff7a18
|
span.token--keyw content-box
span.token--punc ;
br
span.token--rule
input#bi(type='checkbox')
label(for='bi')
span.token--prop border-image
span.token--punc :
|
span.token--val
span.token--func conic-gradient
span.token--punc (
span.token--args
span.token--arg
span.token--hex #ff7a18
span.token--punc ,
span.token--arg
span.token--hex #af002d
span.token--punc )
|
span.token--num 1
span.token--punc ;
br
span.token--rule
input#br(type='checkbox' checked)
label(for='br')
span.token--prop border-radius
span.token--punc :
|
span.token--val
span.token--perc
span.token--num 50
span.token--unit %
span.token--punc ;
br
span.token--punc }
section
#boo.br
View Compiled
$d: 1.375em;
* {
margin: 0;
padding: 0;
font: inherit
}
body {
display: flex;
flex-direction: column;
height: 100vh
}
pre {
padding: .5em;
background: #111;
color: #eee;
font: 1em/ 1.75 consolas, monaco, monospace
}
label {
position: relative;
white-space: pre;
text-decoration: line-through;
cursor: pointer;
&:before {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%; right: calc(100% + .5em);
box-shadow: inset 0 0 0 2px;
border-radius: 5px;
width: $d; height: $d;
transform: translatey(-50%);
color: #b53;
font-weight: 900;
content: '✘'
}
}
section {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
background: #444;
}
.token {
&--rule {
padding-left: 2.375em;
white-space: normal;
}
&--sel { color: #ffcd98 }
&--prop { color: #dbbae5 }
&--num { color: #f8f087 }
&--unit { color: #f39dd4 }
&--keyw { color: #b7e3c0 }
&--func { color: #b8d0dd }
&--hex { color: #d1ffa1 }
}
[type='checkbox'] {
position: absolute;
left: -100vw;
&:hover, &:focus {
+ label {
filter: saturate(4);
&:before {
color: inherit;
content: ''
}
}
}
&:checked + label {
text-decoration: none;
&:before {
color: #4ca454;
content: '✔'
}
}
}
#boo {
border: solid 2em goldenrod;
width: 5em;
height: 5em;
background: #319197 content-box;
&.bi { border-image: conic-gradient(#ff7a18, #af002d) 1 }
&.br { border-radius: 50% }
}
View Compiled
const _B = document.getElementById('boo');
addEventListener('change', e => {
_B.classList.toggle(e.target.id)
}, false);
View Compiled
This Pen doesn't use any external CSS resources.