“When the input has more than 15 characters, make the border red”
@element 'input' and (min-characters: 16) {
input { border-color: red; }
}
“Increase the height of the textarea the moment is contains more than 3 lines of text”
@element 'textarea' and (min-lines: 4) {
textarea { height: 500px; }
}
“When more than ten songs have been added to the Playlist, keep the Song Title visible but hide the Artist's Name, and move the Playback Controls over top of the Album Artwork”
@element '#playlist' and (min-children: 11) {
.artist-name { display: none; }
.playback-controls { position: absolute; top: 0; left: 0; }
}
“If the gallery item has a caption longer than 60 characters, make it so the text of the caption is hidden and only show the first little bit, and display a toggle button users can click to reveal the full caption”
@element '.gallery-item' and (min-characters: 60) {
$this input { display: block; }
$this input + label.caption { overflow: hidden; height: auto; max-height: 50px; }
$this input:checked + label.caption { max-height: 500px; }
}