Skip to content

Instantly share code, notes, and snippets.

@XmlmXmlmX

XmlmXmlmX/index.html

Created November 23, 2016 14:37
Download ZIP

Revisions

  1. XmlmXmlmX created this gist Nov 23, 2016.
    24 changes: 24 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>Rating</title>
    </head>
    <body>
    <fieldset class="stars rating" id="rate1">
    <label>Rate this comment:</label>
    <input type="hidden" id="rate1_hiddenngmodel" />
    <input type="radio" name="rate1_ratinggroup" id="rate1_1" value="1" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
    <label for="rate1_1"><span class="show-for-sr">1</span></label>
    <input type="radio" name="rate1_ratinggroup" id="rate1_2" value="2" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
    <label for="rate1_2"><span class="show-for-sr">2</span></label>
    <input type="radio" name="rate1_ratinggroup" id="rate1_3" value="3" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
    <label for="rate1_3"><span class="show-for-sr">3</span></label>
    <input type="radio" name="rate1_ratinggroup" id="rate1_4" value="4" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
    <label for="rate1_4"><span class="show-for-sr">4</span></label>
    <input type="radio" name="rate1_ratinggroup" id="rate1_5" value="5" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
    <label for="rate1_5"><span class="show-for-sr">5</span></label>
    </fieldset>
    </body>
    </html>
    45 changes: 45 additions & 0 deletions rating.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    .rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;

    &.stars {
    > input[type="radio"] {
    + label {
    margin: 0;
    padding: 0;

    &:before {
    content: '\2606'; // ☆
    border: 0;
    position: relative;
    width: auto;
    height: auto;
    font-size: 3em;
    }
    }

    + label:hover,
    + label:hover ~ input[type="radio"] + label {
    color: $success-color;
    }


    + label:hover,
    + label:hover ~ input[type="radio"] + label,
    &:checked + label,
    &:checked + label ~ input[type="radio"] + label {
    &::before {
    content: '\2605'; // ★
    border: 0;
    }
    }

    &:active, &:active {
    + label::before {
    box-shadow: none;
    }
    }
    }
    }
    }