Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
#MODULE #CODEPEN Rating module. A Pen by orioltf.
<section class="mod_rating" tabindex="0" aria-labelledby="rating_title">
<h1 id="rating_title" class="visuallyhidden" aria-hidden="true">
Article rating
</h1>
<form action="#">
<fieldset
tabindex="0"
aria-label="Rating component. To use this radiogroup: step into this group and press arrows up and down to rate. Then step out of the group again.">
<legend class="visuallyhidden">Choose a Rating</legend>
<input type="radio" id="star5" name="rating" value="5" />
<label aria-label="Give it 5 stars: it rocks!" for="star5" title="Rocks!">
<span class="visuallyhidden">5 stars</span>
</label>
<input type="radio" id="star4" name="rating" value="4" />
<label aria-label="Give it 4 stars: it is pretty good!" for="star4" title="Pretty good">
<span class="visuallyhidden">4 stars</span>
</label>
<input type="radio" id="star3" name="rating" value="3" />
<label aria-label="Give it 3 stars: it could be better, it could be worst…" for="star3" title="Meh">
<span class="visuallyhidden">3 stars</span>
</label>
<input type="radio" id="star2" name="rating" value="2" />
<label aria-label="Give it 2 stars: it's kinda bad" for="star2" title="Kinda bad">
<span class="visuallyhidden">2 stars</span>
</label>
<input type="radio" id="star1" name="rating" value="1" />
<label aria-label="Give it 1 star: it sucks big time" for="star1" title="Sucks big time">
<span class="visuallyhidden">1 star</span>
</label>
</fieldset>
<aside class="total_ratings" aria-label="Total ratings: 14">
<span aria-hidden="true" class="visuallyhidden">Total ratings: </span>
<span aria-hidden="true" class="number_total_ratings">14</span>
<span aria-hidden="true">Ratings</span>
</aside>
</form>
</section>
@mixin clearfix {
zoom:1;
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
@mixin visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden {
@include visuallyhidden;
}
@mixin visuallyhidden_reset {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
$colorUnrated: #B9B9B9;
$colorUnratedHover: #666666;
$colorRated: #101010;
$colorRatedHover: $colorUnratedHover;
.mod_rating {
&:focus {
outline: 0;
}
& form {
@include clearfix;
}
& fieldset {
&:focus {
outline: 0;
}
border: none;
padding: 0;
float: left;
&:not(:checked) {
& > input {
@include visuallyhidden;
}
& > label {
float: right; // We need to float rtl (tho oposite of reading) due to how the ~ selector works
padding: 0 pxToEm(1px); // OrT: don't use margins, to avoid flickering when hovering from star to star
overflow: hidden;
white-space: nowrap;
cursor: pointer;
color: $colorUnrated;
&:before {
content: '';
}
}
& > label:hover,
& > label:hover ~ label,
& > input:focus + label,
& > input:focus + label ~ label {
color: $colorUnratedHover;
}
}
& > input:checked ~ label {
color: $colorRated;
}
& > input:checked + label:hover,
& > input:checked + label:hover ~ label,
& > input:checked ~ label:hover,
& > input:checked ~ label:hover ~ label,
& > label:hover ~ input:checked ~ label {
color: $colorRatedHover;
}
}
.total_ratings {
// block formatting context to avoid having a to float this element
overflow: hidden;
width: auto;
float: none;
padding-left: 1em;
.number_total_ratings {
font-weight: bold;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment